@charset "utf-8";

/* Multiple Uses of Chemistry Site Style */

html{

	padding: 0;

	margin: 0;

}



body{

	font-family: 'Oxygen', Verdana, Geneva, sans-serif;

	font-size: 14px;

	background: #000;

	padding: 0;

	margin: 0;

}


.bottomLogo{
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 0px;
	padding-top: 15px;
	
}



#container{

	width:100%;

	margin: 0;

	padding: 0;

}



#wrapper{

	margin: 0 auto;

	padding-top: 0;

	width: 900px;

	background: #eee;

	border-radius: 5px;

}



#welcometext{

	color: #fff;

	width: 900px;

	margin: 5px auto 0 auto;

	background: url(../img/header_back_opener.jpg) no-repeat;

	border-top-left-radius: 5px;

	border-top-right-radius: 5px;

	height: 0;

	overflow: hidden;

	font-weight: 600;

	text-align: center;

}

#welcomePar{

	color: #fff;

	width: 900px;

	margin: 5px auto 0 auto;

	/*background: url(../img/header_back_opener.jpg) no-repeat;*/

	border-top-left-radius: 5px;

	border-top-right-radius: 5px;

	height: 0;

	overflow: hidden;

	font-weight: 600;

	text-align: left;
}
#welcomePar:lang(ar){
	text-align: right;
}
#welcomePar:lang(zh){
	font-size: 1.2em;
}
#welcomePar:lang(es){
	font-size: 0.95em;
}
#welcomePar:lang(ru){
	font-size: 0.85em;
}


/*Welcome title formatting*/
#welcomeTitle{
	font-weight: bold;

	font-size: 4em;

	text-align: center;

	color: #fff;
	
	width: 900px;

	margin-bottom: 0;

	top: 15px;

	border-top-right-radius: 5px;

	border-top-left-radius: 5px;
}

#welcomeTitle:lang(ar){
	font-size: 4em;
}
#welcomeTitle:lang(en){
	font-size: 4em;
}
#welcomeTitle:lang(es){
	font-size: 2.6em;
}
#welcomeTitle:lang(fr){
	font-size: 2.5em;
}
#welcomeTitle:lang(ru){
	font-size: 1.6em;
}
#welcomeTitle:lang(zh){
	font-size: 4em;
}


#header{

	font-size: 4em;

	font-weight: bold;

	text-align: center;

	background: url(../img/header_back.jpg) no-repeat;

	color: #fff;

	margin-bottom: 0;

	position: -webkit-sticky;

	position: -moz-sticky;

	position: -ms-sticky;

	position: -o-sticky;

	top: 15px;

	border-top-right-radius: 5px;

	border-top-left-radius: 5px;

}

#header:lang(ar){
	font-size: 4em;
}
#header:lang(en){
	font-size: 4em;
}
#header:lang(es){
	font-size: 2.6em;
}
#header:lang(fr){
	font-size: 3em;
}
#header:lang(ru){
	font-size: 2.6em;
}
#header:lang(zh){
	font-size: 4em;
}


#supernav{

	height: 50px;

	width: 900px;

	margin: 0 auto 15px auto;

	padding: 0;

	border-radius: 5px;

}



#supernav ul{

	list-style: none;

	display: table;

	width: 900px;

	background: #333;

	table-layout: fixed;

	border-collapse: collapse;

	height: 100%;

	border-radius: 5px;

}



#supernav ul li{

	display: table-cell;

	text-align: center;

	vertical-align:middle;

	border-left-color: #fff;

	border-left-style: solid;

	border-left-width: 1px;

	font-weight: bold;

	color: #000;

}



#supernav ul li:hover{

	background:#666;

	cursor: pointer;

	-moz-user-select: none;

	-khtml-user-select: none;

	-webkit-user-select: none;

	-o-user-select: none;

	-ms-user-select: none;

}



#supernav ul li:first-child{

	border-bottom-left-radius: 5px;

	border-top-left-radius: 5px;

	border-left-style: none;

}



#supernav ul li:last-child{

	border-bottom-right-radius: 5px;

	border-top-right-radius: 5px;

}



.supernav-link{

	color: #fff;

}



.supernav-active {

	background: #555;

	color: #444;

	text-decoration: underline;

}



#supernav #student-content{
	content: "Students";
	background: url(../img/Students-Icon.png) no-repeat center;
}


#supernav #student-content:hover{

	background: url(../img/Students-Icon.png) #666 no-repeat center;

}



#supernav #educator-content{

	background: url(../img/Educators-Icon.png) no-repeat center;

}



#supernav #educator-content:hover{

	background: url(../img/Educators-Icon.png) #666 no-repeat center;

}



#supernav #policymaker-content{

	background: url(../img/Brief-Overview-Icon.png) no-repeat center;

}



#supernav #policymaker-content:hover{

	background: url(../img/Brief-Overview-Icon.png) #666 no-repeat center;

}





#nav {

	font-size: 14px;

	color: #000;

}



#nav a {

	text-decoration: none;

	color: #000;

}



#nav a:hover{

	color: #00F;

}





#nav ul ol{

	display: none;

}



/*#nav ul li:hover > ol {

	display: block;

}*/



#nav ul {

	background: #e5e5e5;

	background: -moz-linear-gradient(top,  #e5e5e5 0%, #999999 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#999999));

	background: -webkit-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: -o-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: -ms-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: linear-gradient(to bottom,  #e5e5e5 0%,#999999 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#999999',GradientType=0 );



	padding-right: 50px;

	border-radius: 5px;

	list-style: none;

	position: relative;

	display: inline-table;

}



#nav ul:after{

	content: ""; clear:both; display: block;

}


/*Menubar*/
#nav ul li {

	float: left;

	padding: 5px 15px;

}


/*menubar entries*/
#nav ul li:hover {

	background: #999999;

	background: -moz-linear-gradient(top,  #999999 0%, #e5e5e5 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#e5e5e5));

	background: -webkit-linear-gradient(top,  #999999 0%,#e5e5e5 100%);

	background: -o-linear-gradient(top,  #999999 0%,#e5e5e5 100%);

	background: -ms-linear-gradient(top,  #999999 0%,#e5e5e5 100%);

	background: linear-gradient(to bottom,  #999999 0%,#e5e5e5 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#e5e5e5',GradientType=0 );

}



#nav ul li:hover > a {

	color: #333;

}



#nav ul ol {

	position: absolute;

	top: 100%;

	box-shadow: 3px 3px 5px #000;

	text-align: left;

	background: #eee;

	width: 400px;

	list-style-position: inside;

	padding-left: 0px;

	/*margin-left: -15px;*/

	margin-top: -4px;

	border-bottom-left-radius: 5px;

	border-bottom-right-radius: 5px;

	border-top-right-radius: 5px;

	list-style-type: none;

	counter-reset: menu-counter;

}



#nav ul ol li {

	float:none;

	position:relative;

	padding: 3px 9px;

	background: #e5e5e5;

	background: -moz-linear-gradient(top,  #e5e5e5 0%, #999999 100%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#999999));

	background: -webkit-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: -o-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: -ms-linear-gradient(top,  #e5e5e5 0%,#999999 100%);

	background: linear-gradient(to bottom,  #e5e5e5 0%,#999999 100%);

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#999999',GradientType=0 );

	display: list-item;

	font-size: 13px;

}



#nav ul ol li ul {

	background: transparent;

	width: 400px;

	margin-left: -50px;
}



#nav ul ol li ul li {

	/*height: 22px;*/

}



#nav ul ol li:last-child{

	border-bottom-left-radius: 5px;

	border-bottom-right-radius: 5px;

}



#nav ul ol li:first-child{

	border-top-right-radius: 5px;

}



#nav ul ol li:hover {

	/*background: #eee;*/

}



#nav ul ol li a{

	padding: 3px 9px;

}



.nav-header{

	font-weight: bold;

	font-size: 15px;

}



.nav-header:before{

	content: counter(menu-counter) ". ";

	counter-increment: menu-counter;

}

.menuBarSubItem{
	margin-left: 4em;
}



#content{

	padding: 15px;

}



.clearfix::after {
    content: "";
    clear: both;
	display: table;
}



.student-content{



}



.questionbox{

	background: #040;

	padding: 10px;

	border-radius: 5px;

	width: 850px;

	clear: both;  /* Prevent floating bodies from overlapping this box. */

}

.questionbox:before{ 
	content: "Question ";
	color: #fff;
	font-size: 18px;
	padding-right: 5px;
	float: left;
}


.questionbox:lang(ar):before{ 
	content:"السؤال "; 
}

.questionbox:lang(es):before{ 
	content:"Pregunta "; 
}

.questionbox:lang(fr):before{ 
	content:"Question "; 
}

.questionbox:lang(ru):before{ 
	content:"Вопрос "; 
}

.questionbox:lang(zh):before{ 
	content:"问题 "; 
}

.questionbox:lang(ar):before{
	content:" السؤال";
	padding-left: 5px;
	float: right;
}


.questionbox .question-container{

	float:left;

	padding-left: 5px;

	background: #0A0;

	padding: 10px;

	margin: 5px auto 10px auto;

	width: 830px;

	clear: both;  /* Prevent floating bodies from overlapping this box. */

}



.questionbox .answer {

	display: none;

}



.questionbox .toggle{

	float:right;

	font-size: 12px;

	cursor: pointer;

	-moz-user-select: none;

	-khtml-user-select: none;

	-webkit-user-select: none;

	-o-user-select: none;

	-ms-user-select: none;

}

.toggle:lang("ar") {
	
	float:left;
	
}



.questionbox:after{

	float: none;

	clear: both;

}



.asidebox{

	background: #004;

	padding: 10px;

	border-radius: 5px;

	width: 400px;

	float: right;

}



.asidebox:before{

	content:"Did You Know? ";

	color: #fff;

	font-size: 18px;

	padding-right: 5px;

	float: left;

}


.asidebox:lang(ar):before{
	content:"  هل تعلم؟";
	padding-left: 5px;
	float: right;
}

.asidebox:lang(es):before{
	content:"¿Sabía que…?";
}

.asidebox:lang(fr):before{
	content:"Le saviez-vous ?";
}

.asidebox:lang(ru):before{
	content:"Известно ли вам, что…";
}
.asidebox:lang(zh):before{
	content:"您知道吗？";
}

.asidebox .aside-container{

	float:left;

	padding-left: 5px;

	background: #99E;

	padding: 10px;

	margin: 5px auto 10px auto;

	width: 375px;

}



.discussion-questionbox{

	background: #400;

	padding: 10px;

	border-radius: 5px;

	width: 850px;
	
	clear: both;  /* Prevent floating bodies from overlapping this box. */

}



.discussion-questionbox:before{

	content:"Discussion Question ";

	color: #fff;

	font-size: 18px;

	padding-right: 5px;

	float: left;

}

.discussion-questionbox:lang(ar):before{
	content:"سؤال المناقشة ";
	padding-left: 5px;
	float: right;
}

.discussion-questionbox:lang(es):before{
	content:"Cuestión de debate";
}

.discussion-questionbox:lang(fr):before{
	content:"Question de discussion";
}

.discussion-questionbox:lang(ru):before{
	content:"Вопрос для обсуждения";
}

.discussion-questionbox:lang(zh):before{
	content:"讨论题";
}


.discussion-questionbox .discussion-question-container{

	float:left;

	padding-left: 5px;

	background: #A55;

	padding: 10px;

	margin: 5px auto 10px auto;

	width: 830px;

}



.discussion-questionbox:after{

	float: none;

	clear: both;

}





#language-select{

	color:#fff;

	margin: 10px auto 0 auto;

	width: 900px;

	text-align: center;

}



#language-select a{

	color: #fff;

}


.centered-text {

	text-align:center;

}



.clickable {

	cursor: pointer;

}



.unclickable {

	cursor: not-allowed;

}



.float-left{

	float: left;

}



.float-right{

	float: right;

}



#content img{

	margin: 15px;

	margin-bottom: 5px;

}



span.caption {

	font-size: 10px;

}



.nodelink{

	background: #3A3;

	padding: 5px;

	border-radius: 5px;

	border-bottom: 1px solid #9F9;

	border-top: 1px solid #9F9;

	line-height: 24px;

	width: 850px;

	display: inline-block;

}



.nodelink:hover{

	background: #7D7;

	cursor: pointer;

}



.pagelink{

	color: #005;

	cursor: pointer;

	text-decoration: underline;

}



.pagelink:hover{

	color: #009;

}



.glossary{

	border-bottom: 1px dashed #044;

	font-color: #044;

	cursor: help;

}



.tooltipwindow {

	position: absolute;

	padding: 5px;

	z-index: 200;

	background: #ffa;

	display: none;

	border: 1px solid #000;

	border-radius: 3px;

}



.slideshowLeftButton{

	width: 0;

	height: 0;

	border-top: 12px solid transparent;

	border-right: 24px solid black;

	border-bottom: 12px solid transparent;

	display: inline-block;

	margin-bottom: 250px;

	cursor: pointer;

}



.slideshowRightButton{

	width: 0;

	height: 0;

	border-top: 12px solid transparent;

	border-left: 24px solid black;

	border-bottom: 12px solid transparent;

	display: inline-block;

	margin-bottom: 250px;

	cursor: pointer;

}



.slideshow {

	overflow: hidden;

	width: 795px;

	height: 510px;

	display: inline-block;

	background: #99E;

	border-radius: 5px;

	padding-left: 10px;

}



.slideshow .innerContainer{

	width: 10000px;

	vertical-align: bottom;

}



.slideshow .innerContainer .rotateItem{

	width: 800px;

	height: 500px;

	display: inline-block;

}



.slideshow .innerContainer .rotateItem .image{

	display: inline-block;

	vertical-align: bottom;

	width: 600px;

	height: 480px;

	overflow: hidden;

	margin-top: 15px;

	background: #000;

	padding: 0;

	line-height: 480px;

	text-align: center;

}



.slideshow .innerContainer .rotateItem .image img{

	margin: 0 !important;

	display: inline-block;

	max-width: 600px;

	max-height: 480px;

	width: auto;

	height: auto;

	vertical-align: middle;

}	



.slideshow .innerContainer .rotateItem .imageDescription{

	display: inline-block;

	height: 475px;

	width: 170px;

	vertical-align: bottom;

	border-radius: 5px;

	background: #337;

	color: #fff;

	padding: 5px;

}



.pagelink img{

	border: #000 4px solid;

}



.pagelink img:hover{

	border: #00e 4px solid;

}

#cookieBanner {
	z-index: 1000;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	color: #fff;
	background: #444;
	display: none;
}

#cookieBanner>.bannerText {
	float: left;
	margin-left: 16px;
	line-height: 48px;
}

#cookieBanner>.bannerDismiss {
	float: right;
	margin-right: 16px;
	margin-top: 8px;
	padding: 2px 8px;
	background: #aaa;
	color: #000;
	line-height: 28px;
	cursor: pointer;
}

#cookieBanner>.bannerDismiss:hover {
	background: #bbb;
}