@charset "UTF-8";



/* Document Styles */
body, html{
	font-family:Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
	font-size:14px;
	line-height:140%;
	padding:0px;
	margin:0px;
	height:100%;
	width:100%;
	overflow:hidden
}
p{
	color:#000000;
	font-size:14px;
	margin:0px 0px 15px 0px;
}
a{
	text-decoration:none;
	color:#c748e0;
	font-weight:bold;
	font-style:italic;
}
a:hover{
	color:#e081f3;
	text-decoration:underline;
}
.aLarge{
	font-size:16px;
	display:block;
	margin:0px 0px 40px 0px;
}
.aHuge{
	margin:50px auto 50px auto;
	text-align:center;
	display:block;
	padding:10px;
	border-radius:10px;
	font-size:16px;
	color:#FFF;
	background-color:#7BABEF;
}
.aHuge:hover{
	background-color:#3179F7;
	color:#fff;
}
.keyTerm{
	font-weight:bold;
	color:#00C425;
}
.keyTermLarge{
	font-weight:bold;
	color:#00C425;
	font-size:16px;
	display:block;
	margin:0px 0px 40px 0px;
}
h1{
	font-size:28px;
	text-align:center;
	color:#E20803;
	font-weight:normal;
	font-style: italic;
	margin:0px 0px 10px 0px;
	line-height:120%;
}
h2{
	font-size:16px;
	text-align:center;
	font-weight:bold;
	color:#990000;
	margin:0px 0px 40px 0px;
	line-height:120%;
}	
h3{
	color:#0F8758;
	font-weight:bold;
	font-size:20px;
	padding:5px;
	background-color:#d0e2cf;
	text-align:center;
	margin:30px 0px 30px 0px;
	line-height:140%;
}
h4{
	color:#000;
	text-align:center;
	font-weight:bold;
	font-size:18px;
	margin:50px auto 35px auto;
	line-height:140%;
}
.caption{
	font-size:12px;
	color:#999;
	text-align:center;
}
.image{
	float:right;
	margin:0px 0px 20px 20px;
	border:1px solid #999;
	border-radius: 5px;
	max-width:50%;
}
li{
	margin:0px 0px 40px 0px;
}
.floatRightImage{
	float:right;
	margin:0px 0px 20px 20px;
	border:1px solid #cccccc;
	border-radius: 5px;
}
.jmolButton{
	background-color:#eff5ff;
	border-radius:5px;
	padding:4px;
	margin-bottom:35px;
	display:inline-block;
	color:#0048c1;
}
.jmolButton:hover{
	text-decoration:underline;
	color:#0048c1;
}
.note{
	color:#996699;
	font-style:italic;
	margin:15px 0px;
}


/* Header Styles */
#header{
	height:80px;
	width:100%;
	text-align:center;
	background-image:url(headerBackground.jpg);
	background-repeat:repeat-y;
	background-position: center top;
	background-size: 100% auto;
	overflow:hidden;
	margin:0px;
	padding:0px;
	top:0px;
	left:0px;
	position:absolute;
}
#headerLeft{
	background-image:url(headerLogo.png);
	background-repeat:no-repeat;
	height:80px;
	width:200px;
	float:left;
}
#headerLeft:hover{
	cursor:pointer;
}
#headerRight{
	text-align:right;
	height:60px;
	width:180px;
	padding:10px;
	float:right;
}
#headerRight a{
	color:#6C3078;
	text-decoration:none;
	font-size:14px;
	font-weight:bold;
	display:block;
	margin:5px 10px 0px 0px;
}
#headerRight a:hover{
	color:#6C3078;
	text-decoration:underline;
}
#headerTitle{
	font-size:28px;
	color:#0B672E;
	font-style: italic;
	padding-top:20px;
}
#headerSubtitle{
	font-size:16px;
	color:#000000;
	margin-top:10px;
}
#headerGradient{
	background-image:url(bodyGradient.png);
	background-position:top;
	background-repeat:repeat-x;
	position:fixed;
	top:80px;
	height:16px;
	width:100%;
	z-index:100;
}



/* Navigation Styles */
#navigationColumn{
	float:left;
	width:180px;
	background-color:#F9F9F9;
	height:calc(100% - 35px);
	padding:35px 10px 0px 10px;
	background-image:url(bodyGradientLeft.png);
	background-repeat:repeat-y;
	background-position:right;
}
.navigationLink{
	font-size:12px;
	font-weight:bold;
	color:#666666;
	text-decoration:none;
	margin:0px 0px 12px 20px;
	display:block;
	line-height:120%;
}
.navigationLink:hover{
	color:#000000;
	text-decoration:none;
}
#navigationCurrent{
	font-size:12px;
	line-height:120%;
	font-weight:bold;
	color:#c748e0;
	text-decoration:none;
	margin:0px 0px 12px 0px;
	padding:0px 0px 0px 20px;
	display:block;
	background-image:url(navigationCurrentChoice.png);
	background-repeat:no-repeat;
}
.navigationSpacer{
	width:180px;
	height:20px;
	margin:20px auto;
	background-image:url(navigationSpacer.jpg);
	background-repeat:no-repeat;
}
#navigationVolume, #navigationFont{
	background-position:left;
	margin:0px 0px 20px 0px;
	padding:0px 0px 0px 23px;
	background-repeat:no-repeat;
}
#navigationVolume{
	background-image:url(navigationVolume.png);
}
.navigationVolumeLink{
	display:inline;
	margin:0px;
}
.navigationVolumeLink:hover{
	cursor:pointer;
}
#navigationFont{
	background-image:url(navigationFont.png);
}
.navigationFontLink{
	color:#000;
	display:inline;
	margin:0px;
	font-weight:bold;
	border-radius: 3px;
	padding:0px 5px;
	background-color:#e5e5e5;
}
.navigationFontLink:hover{
	background-color:#CCC;
	cursor:pointer;
}
#navigationCopyright{
	color:#8C8C8C;
	font-size:12px;
	text-align:center;
	position:absolute;
	bottom:20px;
	width:175px;
}



/* Body Styles */
#leftHalf{
	height:calc(100% - 80px);
	width:60%;
	overflow:hidden;
	margin-top:80px;
}
#rightHalf{
	height:calc(100% - 80px);
	width:40%;
	overflow:hidden;
	margin-top:80px;
}
#leftHalf{
	position:absolute;
	bottom:0px;
	left:0px;
}
#rightHalf{
	position:absolute;
	bottom:0px;
	right:0px;
	background-color:#F4F4F4;
}
#rightHalfGradient{
	background-image:url(bodyGradientRight.png);
	background-position:left;
	background-repeat:repeat-y;
	position:fixed;
	left:60%;
	top:82px;
	height:100%;
	width:23px;
	z-index:10;
}
#tutorialContent{
	overflow-y:scroll;
	height:100%;
	margin-right:0px!important;
}
#tutorialContentInner{
	padding:50px 20px 20px 20px;
}
.audioButton{
	width:68px;
	height:40px;
	overflow:hidden;
	margin:5px 0px 10px 0px;
	background-image:url(audioButton.png);
	background-position:top right;
	background-repeat:no-repeat;
	float:left;
}
.audioJmolButton{
	width:108px;
	height:40px;
	overflow:hidden;
	margin:5px 0px 10px 0px;
	background-image:url(audioJmolButton.png);
	background-position:top right;
	background-repeat:no-repeat;
	float:left;
}
.audioButton:hover, .audioJmolButton:hover{
	cursor:pointer;
	background-position:bottom right;
}
.bodySpacer{
	display:block;
	max-width:100%;
	margin:20px 0px 40px 0px;
}
.videoContainer {
	position:relative;
	padding-bottom:56.25%; /* 16:9 */
	height:0px;
	margin:0px 0px 10px 0px;
}
.videoContainer iframe {
	position: absolute;
	top:0px;
	left:0px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:1px solid #999;
	z-index:0;
}
.contentVideoContainer {
	position:relative;
	height:calc(100% - 70px);
	padding-bottom:56.25%; /* 16:9 */
	height:0px;
	margin:0px 0px 10px 0px;
	border-radius:5px;
	overflow:hidden;
}
.contentVideoContainer iframe{
	position: absolute;
	top:0px;
	left:0px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	border:1px solid #999;
	border-radius: 5px;
	z-index:0;
}

#jmolConsoleContainer{
	position:absolute;
	bottom:0px;
	right:0px;
	width:100%;
	z-index:15;
}
#jmolConsoleTab{
	border:2px solid #aa4dc9;
	border-bottom:2px solid #aa4dc9;
	margin:0px 0px -2px 10px;
	padding:5px 25px 5px 5px;
	background-color:#aa4dc9!important;
	color:#aa4dc9;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	font-size:12px;
	font-weight:bold;
	background-image:url(jmolArrow.png);
	background-position:right top;
	background-repeat:no-repeat;
	height:20px;
	display:inline-block;
}
#jmolConsoleTab:hover{
	color:#c992db;
	cursor:pointer;
}
#jmolConsole{
	border:2px solid #aa4dc9; 
	background-color:#c992db;
	color:#8C8C8C;
	width:calc (100% - 10px);
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
#jmolConsoleContent{
	padding:10px;
}
#jmolApplet0_canvas2d, #jmolApplet0_appletinfotablediv{
	z-index:0!important;
}
textarea{
	width:calc(100% - 20px);
	background-color:#f5f5f5;
	color:#000;
	padding:5px;
	border:1px solid #999;
}
#jmolCmd0{
	margin:0px 20px 10px 0px;
	background-color:#f5f5f5;
	border:1px solid #999;
	padding:5px;
	width:60%;
}
#stopAnimationContainer{
	position:absolute;
	z-index:10;
	margin:0px auto;
	width:50%;
	top:100px;
	text-align:center;
	display:none;
}
#stopAnimation{
	border-radius:5px;
	display:inline-block;
	padding:5px;
	background-color:#7aabee;
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	-webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75);
}
#stopAnimation:hover{
	cursor:pointer;
	background-color:#387afb;
}
#slabSlider{
	 width:calc(100% - 40px);
	 padding:20px;
	 margin:10px 0px 30px 0px;
	 background-color:#f0f0f0;
	 border-radius:10px;" 
}
#stopAnimationProgressContainer{
	width:calc(100% - 10px);
	height:5px;
	border:1px solid #000;
	background-color:#b4b7d3;
	margin:5px;
}
#stopAnimationProgress{
	height:100%;
	width:0px;
	background-color:#858bc4;
}
.question{
	border-radius:5px;
	background-color:#fffce8;
	margin:0px 0px 40px 0px;
}
.questionHalf{
	width:calc(50% - 22px);
	padding:10px;
	display:inline-block;
	vertical-align:top;
}
.questionHalf p, questionHalf input{
	margin:0px 0px 20px 0px;
}
.questionMark{
	padding: 0px 10px 10px 0px;
	float:left;
	display:block;
}
.questionAnswer{
	color:#900;
}
.jmolText{
	font-family: 'Inconsolata', monospace;
	font-weight:bold;
	color:#e37000;
	margin:0px 0px 15px 0px;
	font-size:18px;
}


/* expanding content styles */
.expand{
    width:calc(96% - 4px);
    padding:2%;
    margin:0px 0px 30px 0px;
    border:2px solid #eacdea;
    display:none;
}
.expandButton{
    role:link;
    cursor:pointer;
    background-color:#eacdea!important;
    display:block;
    padding:10px;
    margin:20px 0px 0px 0px;
    color:#666666;
    font-size:15px;
    font-weight:bold;
}
.expandButton:hover{
    cursor:pointer;
    text-decoration:none;
    color:#000;
}
.closeAll{
    padding:5px;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    height:15px;
    margin:-45px 0px 20px 20px;
    width:15px;
    background-color:#EF9781;
    float:right;
}
.closeAll:hover{
    background-color:#F3B3A3;
    cursor:pointer;
}
.clickToExpand{
	font-size:12px;
	color:#000000;
	float:right;
}