/* Stylesheet for Structural Biology in-lecture models */

/* body and page structure */

body				{	font-family: Helvetica; font-weight: bold; font-size: 100%; color: #000033; line-height: 140%; 	
						width: 800px; height: 600px;	background-color: #fffff0;	overflow: hidden; }
						
header				{	position: absolute;	top:  0px;	left:   0px; margin-left:  20px; width: 760px; height: 35px;
						font-size: 1.75rem; line-height: 35px; border-bottom: 2px solid #adb3c1;}						// line-height needed for vertical-align to work
header span			{	text-indent: 4px;	vertical-align: middle;}

main				{	position: absolute;	top:  50px;	left:   0px; margin-left: 20px; width: 760px; height: 465px;	}

footer				{	position: absolute; top: 535px; left:  50px; width: 730px; height: 40px;
						font-size: 12px; font-weight: normal; text-align: left; text-indent: 4px; color: #adb3c1;	
						line-height: 35px; border-top: 2px solid #adb3c1;	}
footer span			{	position: absolute; left: 0px;	font-size: 0.8rem;	vertical-align:	middle;	}

/* <div> and <section> */

div					{	position: absolute;}
div#AA div			{	position: relative; display: inline-block; margin-right: -4px;	margin-bottom: 2px;} // negative margin-right prevents spaces between divs 
#pageFlash			{	position: absolute;	top:  20px;	left:   0px; width: 460px; height: 465px;	}
#pageSVG				{	position: absolute;	top:  0px;	left:   0px; width: 460px; height: 465px;	}
#pageSVGScape		{	position: absolute;	top: 100px;	left:   0px; width: 760px; height: 365px;	}
#pageJmol			{	position: absolute;	top:  2px;	left:   0px; width: 460px; height: 460px;	}
#pageCanvas			{	position: absolute;	top:  2px;	left:  30px; width: 430px;}
canvas				{	position: absolute; top:  0px;	left:   0px;}

section				{	position: absolute;}
#pageControl		{	position: absolute;	top:  2px;	left:  470px; width: 290px; height: 480px;	overflow-x: hidden; overflow-y: hidden;}
#pageControlScape	{	position: absolute;	top:  2px;	left:   0px; width: 760px; height: 88px;	overflow-y: auto; 	}
#pageControlScape span	{ position: absolute; font-weight: bold; font-size: 80%; line-height: 120%;	}
#pageControl table	{	width: 100%;	}
#pageControl p		{	display: inline; line-height: 120%;}
#pageControl a:link		{	color: #3636FF;	text-decoration: none; cursor: pointer;}
#pageControl a:visited	{	color: #3636FF;	text-decoration: none; cursor: pointer;}

									
/* widget for <details> */
#widget				{	position: absolute; top: 45px; right: 0px; z-index: 1; 
						height: 490px; width: 290px; overflow: hidden; background-color: #fffff0; 
						font-size: 1.0rem; font-weight: bold;	}
div#widget p		{	position: absolute; top: 30px; left: 0px; font-weight: normal; line-height: 120%; 
						margin: 4px; display: inline;	}

/* Table for widget on Jm pages */
table.files			{	position: absolute; top: 10px; left: 0px; font-weight: normal;	width: 100%; }
table.files td:nth-child(1)	{	width: 75%; font-size: 0.8rem; line-height: 120%; vertical-align: top; text-align: left;	padding-bottom: 5px;	}
table.files td:nth-child(2)	{	width: 25%; font-size: 0.8rem; line-height: 120%; vertical-align: top; text-align: right;	padding-bottom: 5px;	}
div#widget a.wdga	{	position: relative; top: -6px; left: 22px;}
summary:hover		{	color: #f8f21d; text-decoration: none; cursor: pointer;	}

/* Table for widget with checkboxes */
div#widget table.check	{	table-layout: fixed; position: absolute; top: 35px; font-weight: bold; width: 100%; background: #fffff0; }
#widget table.check th	{	text-align: left;	}
#widget table.check td:nth-child(1)		{	width: 240px; font-size: 0.8rem; line-height: 100%; height: 20px; text-align: left; vertical-align: middle; margin: 3px 0px 3px 0px;	}
#widget table.check td:nth-child(2)		{	width: 44px; float: right; position: relative; height: 25px; margin: 3px 0px 3px 0px;	}

/* checkboxes for widget */
input[type=checkbox]{	visibility: hidden;	}
.ckbox 				{	width: 40px; height: 22px; background: #696969; border-radius: 25px; position: relative; border: 1px solid black;}
.ckbox label 		{	display: block; width: 20px; height: 20px; border-radius: 50%; border: 1px solid black;
						transition: all .5s ease; cursor: pointer; position: absolute; top: 0px; z-index: 1; left: 0px; background: #ff0000;	}
.ckbox input[type=checkbox]:checked + label {left: 18px; background: #00ff00;}

/* modal overlaying page */
div.modal			{	background-color: #fffff0; z-index: 2; box-shadow: 5px 5px 5px grey;	
						padding: 4px; border: 1px solid black; line-height: 0.9;
						display: none; position: absolute;   
						animation-name: blindtop; animation-duration: 0.6s;}
div.modal p			{	font-size: 0.75rem; font-weight: normal; display: inline;	}
div.modal a			{	color: #3636FF;	text-decoration: none; cursor: pointer;}
div.modal a:visited	{	color: #3636FF;	text-decoration: none; cursor: pointer;}
div.modal a:hover	{	color: #f8f21d; text-decoration: none; cursor: pointer;	}


/* modal overlaying widget and #pageControl */
div.swidget			{	position: absolute; left: 0px; top: 0px; z-index: 3; display: none; 
						width: 100%; height: 100%; background-color: #fffff0; 
						font-weight: normal; line-height: 120%;	}
.close				{	font-size: 1rem; font-weight: bold; color: #3636ff; float: right;}
.close:hover		{	color: #f8f21d; text-decoration: none; cursor: pointer;	}
div.swidget img		{	position: absolute; bottom: 0px; left: 0px; width: 100%; height: auto; }
div.swidget			{	animation-name: blindtop; animation-duration: 0.6s; transform-origin: top;}
@keyframes blindtop	{	from {transform: scale(1,0)} to {transform: scale(1,1)}	}

/* sliders */
div.sliderver		{	height: 320px; width: 50px;	}										// vertical slider
div.sliderhor		{	height: 30px; width: 290px;	}										// horizontal slider
div.slidetitlever	{	position: absolute; top: 0px; width: 50px; font-size: 1.2rem; font-weight: normal; text-align: center;}
div.slidetitlehor	{	position: absolute; top: 0px; width: 10px; font-size: 1.2rem; font-weight: normal; text-align: center; line-height: 100%; }
input.horizontal	{	position: absolute; top: 5px; left: 30px; width: 200px; height: 10px;	}
input.vertical		{	position: absolute; top: 40px; left: 20px; width: 10px; height: 200px; -webkit-appearance: slider-vertical;	writing-mode: bt-lr;	}
div.slideoutver		{	position: absolute; top: 270px; width: 50px; line-height: 120%; text-align: center; font-size: 1.0rem; font-weight: normal;}
div.slideouthor		{	position: absolute; top: 2px; right: 0px; width: 50px; line-height: 120%; text-align: right; font-size: 1.0rem; font-weight: normal; }


/* iframe */

iframe				{	position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; margin: none;} 

/* General elements */

small				{	font-size: 70%	}
span.sup			{	position: relative; top: -0.5rem; font-size: 60%;		}						/* superscripts */
span.sub			{	position: relative; bottom: -0.2rem; font-size: 60%;	}						/* subscripts */
span.contech	{	display: inline-block; font-size: 0.75rem; line-height: 1.2; color: blue; }	/* technical explanations */

/* anchors */

a:link				{	color: #000033;	text-decoration: none; cursor: pointer; }
a:visited			{	color: #000033;	text-decoration: none; cursor: pointer; }
a:hover				{	color: #f8f21d; text-decoration: none; cursor: pointer; }


/* tables */

table				{ 	table-layout: fixed; border-collapse: collapse; border: 0px none #000000; padding: 0px; border-spacing: 0px;		}
td					{ 	vertical-align: middle; text-align: left; overflow: hidden; border: 0 none #000000; padding: 0; border-spacing: 0;	}
td.frst			{	padding-bottom: 10px; padding-right: 2px; width: 80%;	vertical-align: middle;	color: #00008B;	}
td.frst span	{	color: #0000CD;	}
td.scnd			{	padding-bottom: 10px; width: 20%; vertical-align: middle;	}
.files td.right{	text-align: right;}

/* list */

li					{  font-weight: normal; 	font-size: 12px; 	line-height: 120%; }
.listbd				{  font-weight: normal; 	font-size: 12px; 	line-height: 120%; }
.listhd				{  font-weight: bold; 		font-size: 15px; 	line-height: 225%; }
.lilarge			{  font-weight: bold; 		font-size: 14px; 	line-height: 140%; }

/* buttons */

button.norm				{	border: 2px solid #696969; background-color: #e7e7e7;			}
button.norm:hover		{	color: #f8f21d; background-color: #D3D3D3; cursor: pointer; }
button.norm:active	{	color: #f8f21d; background-color: #696969; cursor: pointer; }
button.clicked			{	color: #f8f21d; background-color: #696969; cursor: pointer; }
button.clicked:hover	{	color: #f8f21d; background-color: #D3D3D3; cursor: pointer; }
button.clicked:active{	color: #f8f21d; background-color: #696969; cursor: pointer; }
button.rnd				{	font-size: 48px; line-height: 100%; border-radius: 100%; text-align: center; width: 50px; height: 50px;	}
button.ovl				{	width: 90px; height: 20px; font-size: 10px; border-radius: 8px; text-align: center;	font-weight: bold;	}
button.ovl:hover		{	color: #f8f21d;	}
button.ovl:active		{	color: #f8f21d;	}
button.rem				{	display: block; visibility: hidden; margin: 15px auto 0 auto; }
#rbclose,#rbreload,#rbspin	{	display: block; visibility: visible; margin: 15px auto 0 auto; }

/* images */

img 				{	border: 0	}
#buttClose		{	position: absolute; top: 2px; right: 0px; height: 22px; width: 95px; }
#kip				{	position: relative;	top: -13px; left: -55px; width: 50px; height:50px;		}

/* forms */

form#modelSelect select				{ width: 250px; position: absolute; left: 400px;}
form#modelSelect div.text18			{ position: relative; width: 400px; margin: 20px 0 20px 0; font-size: 1.0rem; line-height: 120%;}
form#modelSelect div.text14			{ position: relative; width: 400px; margin: 10px 0 10px; 10px; font-size: 0.8rem; line-height: 120%;}