@charset "UTF-8";
/* CSS Document */
#wrapper {
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

#header{
	width: 100%;
}


div.nav ul#nav_menu ul {
	display: none;
}

#header form{
	display: none;
}

.flexslider{
	display: none;	
}
#nav2 ul{
	float: none;
	width: 100%;
}

#nav2 li{
	padding: 1em .5em;
}

#nav2 li ul.current {
	display: none;
}


#nav2 li:hover ul {
	display: none;
}

#nav2 a{
	font-size: .65em;
	text-transform:uppercase;
	letter-spacing: .03em;
	width: 100%;
	display : block;
	color: #293C4A;
	font-weight: bold;
	text-decoration : none;
}
#header{
	float: none;
	margin: 0;	
}

#header img{
	width: 270px;
	display: block;
	margin: 0 auto;
	
}

#header h2 {
	color: #ccce8b;
	font-size: .75em;
	text-transform: uppercase;
	font-style:italic;
	letter-spacing: .04em;
	margin: -.75em 0 1em 5.25em;
}

#header form{
	display: none;	
}

div.nav form{
	float: right;
	width: 190px;
	margin: -1.95em 0 .5em 0;	
}

div.nav #searchField{
   display: none;
	
}

div.nav #searchField2{
    width: 150px;
    height: 27px;
    padding: 0 20px 0 5px; /* puts padding on the right side, so text doesn't go under the button. NOTE: TOTAL WIDTH IS 240 + 25 = 265px */
    float: left; /* some browsers display correctly without this, but better to leave it for cross browser compatibility */
    border: 1px solid #FFEDE8; /* sets new color for border of the field */
	color: #ccc;
	font-size: 10px;
	position: relative;
	padding-right: 50px;
	
}
div.nav #searchSubmit{
    display: none;
}
div.nav #searchSubmit2{
    background: transparent url("/courses/chemistry/images/general/search_button.png") no-repeat -0 0;
	position: absolute;
    width: 20px;
    height: 20px;
    border: none;
	border-left: 1px solid #ccc;
    cursor: pointer;
	margin-left: -20px; /* image is 20x20px, so leave little extra */
    margin-top: 4px; /* leave some space from the top, so button looks in the middle */
	right: 2px;
}


#btmnav li {
	float: left;
	display: inline;
	padding: .5em 1em .5em 1em;
	font-size: .75em;
	font-weight: bold;
	letter-spacing:.05em;
}

#btmnav li.img {
	padding: 0 1em .5em 1em;
	float: left;
	width: 175px;
}

#btmnav li.img img {
width: 100%;
}



div.nav {
		position: relative;
		float: left;
	}

	/* menu icon */
	#menu-icon {
		color: #293c4a;
		width: 42px;
		height: 30px;
		background: #c1d1d6 url("/courses/chemistry/images/general/menu-icon.png") no-repeat 10px center;
		padding: 10px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #293c4a;
		display: block; /* show menu icon */
		font-size: .9em;
	}
	#menu-icon:hover {
		background-color: #447497;
		color: #fff;
	}
	
	/* main nav */
	div.nav ul#nav_menu {
		display: none;
	}


ul#nav_mobile{	
}

ul#nav_mobile li{
	background-color: #293C4A;
	width: 100%;
	border-bottom: 1px solid #003;
}

ul#nav_mobile a{
	font-size: .85em;
	display: block;	
	color: #fff;
	padding: 1em.75em;
	text-decoration: none;
}

ul#nav_mobile a:hover{
	
	color: #CCCE8B;
	
}

ul#nav_mobile ul.subnav{
	padding-bottom: .5em;
}


ul#nav_mobile ul.subnav li{
	border-bottom: none;
		background-color:#c1d1d6;	
}

ul#nav_mobile ul.subnav a{
	color: #293C4A;
	text-decoration: none;
}

ul#nav_mobile ul.subnav a:hover{
	text-decoration: underline;
}

ul#nav_mobile ul.subnav ul{
	padding-left: 1em;	
}



/*ul#nav_mobile li:hover ul{
	left: auto;
	margin-left: 0;
	background-color: #fff;
}

ul#nav_mobile ul li{
	margin-left: 1em;	
}*/

#footer {
	clear: both;
	
}

.videos_cont {
		width: 97%;
	padding: 1em 1.5em 1em 1.5em;
	margin-right: 1.5em;
}

.outer_video {
	float: none;
	overflow:hidden;
	margin: 1em 1em 1em 0;
	width: 93%;
}

#content h2.videos{
	clear: both;
	font-size: .8em;
	font-weight: bold;
	padding: 1em;
	margin: 0;
	width: 97%;
}
.videos_cont p{
	padding-right: 1.5em;
	font-size: .8em;
	line-height: 1.3;	
}

.video_div{
	height: auto;	
}

.video_div img{
	float: left;
	width: 125px;
	height: 83px;
	margin: .25em .75em .25em 0;	
}

.video_div p{
	padding: 0;
	padding-bottom: 1em;
	font-size: .8em;
	line-height: 1.4;
}

.video_div p a{
	float: right;
	font-weight: bold;
}

.video_player_popup a.player, .video_player_popup object, .video_player_popup embed, .video_player_popup iframe, .video_player_popup img {
	position: absolute;
	top: -54%;
	left: 0;
	width: 100%;
	height: 100%;
}
.guide_all p{
	font-size: .8em;
	width: 96%;		
}
.guide_all p a{
	float: left;
	color: #293C4A;
	text-decoration: none;
	padding-top: .15em;
	width: 85%;
	line-height: 1.2;
	margin-bottom: .75em;
}

.course_interactives {
	width: 95%;	
}

.course_interactives img, .interactives_all img{
		width: 135px;
		height: 92px;	
}

.interactives_all img{
	margin-bottom: .5em;	
}


.course_interactives p, .interactives_all p{
	font-size: .8em;
	width: 95%;	
}

.course_interactives p a.lesson_docs, .interactives_all p a.lesson_docs {
	font-size: .9em;
}

.course_interactives p.more_inter, .interactives_all p.more_inter{
	margin: 0 0 1.5em 0;
}


 #guide_nav, .nav_to_units{
	display: none;
}

.main_text, .video_unit, .interactives_unit, .course_guide, .glossary_main, .visual_main, .guide_unit, .video_main{
width: 100%;
min-height: auto;
padding-bottom: 1em;
}

h2.glossary_header_units{
	padding: 1.5em 0 0 0;
	margin-left: 1.5em;	
}


.glossary_main{
	width: 95%;	
}

.main_text p{
	font-size: .8em;
	width: 92%;	
	padding-right: 4%;
}

.main_text .footnote p {
	font-size: .7em;
}

.course_guide, .glossary_main, .visual_main, .guide_unit, .video_main{
	border-left: none;	
}

.intronav{
border-left: none;		
}

.unit1nav, .unit6nav, .unit11nav{
border-left: none;
}

.unit2nav, .unit9nav{
border-left: none;
}

.unit3nav, .unit7nav, .unit13nav{
border-left: none;
}

.unit4nav, .unit8nav, .unit12nav{
border-left: none;
}

.unit5nav, .unit10nav{
border-left: none;
}

.video_unit p, .video_container_byunit p{
	font-size: .8em;	
}

.video_container p{
	width: 100%;	
}

/*.video_player, .video_player img, .video_player_byunit, .video_player_byunit img{
	width: 90%;
	margin-bottom: 0;	
}



.video_player img, .video_player_byunit img{
	width: 512px;	
}

.video_player a.player, .video_player_byunit a.player{
	width: 100%;	
}
*/
.video_player_container{
 width: 560px;
 max-width: 100%;
}

/*.video_player, .video_player_byunit {
	width: 80%;
	height: 100%;
	padding-bottom: 45%;
	margin-bottom: 1em;	
}*/

.video_player a.player, .video_player_byunit a.player{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}


#content h1{
	color: #293C4A;
	font-style: italic;
	font-size: .9em;
	padding: 1em .75em 1em 1.5em;
	letter-spacing: .02em;
	line-height: 1.5;
}
#content h1 a {
color: #293C4A;
	font-style: italic;
	font-size: .9em;
	letter-spacing: .02em;
	text-decoration: none;
}

#content h2{
	font-size: .9em;	
}

.visual p {color: #293C4A; font-style: italic; font-size: .7em; padding:.25em 0; margin: 0 .25em;}
.visual a {
	color: #293C4A;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	font-size: .85em;
}

.visuals_box a {
	font-size: .85em;
}

.course_units_visuals, .course_units, .course_units_glossary {
float: left;
width: 95%;
margin: 1.5em;
}



.course_units p, .course_units_visuals p, .visuals_type p, .course_units_glossary p, .glossary_type p{
	padding-top: .1em;
	float: left;
	font-size: .8em;
}
.visuals_type, .pdf_col, .glossary_type{
	float: none;
	width: 95%;
	margin: 1.5em;
}

.visuals_type{
	margin-top: 2.15em;	
}
.course_units, .course_units_visuals, .course_units_glossary{
	float: left;
	margin-right: 0;
	padding-bottom:1.5em; 
}

.pdf_col, .visuals_type, .glossary_type{
	width: 200px;
	position: absolute;
	top: 2.55em;
	right: 0;
}

.glossary_type{
	text-align: right;
}
ul.glos_type {
	width: 90px;
	float: left;
	text-align: right;
	position: absolute;
	right: 0;
	font-size: .9em;
}


#content h2.bytype_header{
	font-size: .85em;
}	
#content .visuals_type h2.bytype_header,  #content .glossary_type h2.bytype_header{
	text-align: right;
	margin-top:-.05em;
	[margin-top:-.05em;
	margin-top: -.1em;]
}

.pdf_list li, .visuals_type li {
	padding: 0;
	font-style:italic;
	text-align:right;
	padding: .4em 0 .9em 0;
	
}

.visuals_type li, .glossary_type li{
	font-size: .8em;
}	

.pdf_list li.entire_course{
	padding: .65em 0 1em 0;
	font-style:italic;
	margin-left: 0;
	
}

.pdf_list li a{
	color: #293C4A;
	font-size: 9.5px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	display: block;

}

.course_units p, .course_units_visuals p. .course_units_glossary p{
	font-size: .75em;
}

.course_units p span, .course_units_visuals p span, .course_units_glossary p span{
	display: none;
}

#content .glossary_main h2 {
	font-size: .95em;
}


#glossary dt {
	font-weight: bold;
	font-size: .8em;
}

#glossary dd{
	line-height: 1.2;
	padding: .25em 0 .5em 0;
	font-size: .75em;	
}

.unit_navgen {
	float: none;
	width: 50%;
	margin: 1em 0 0 .75em;
	position: relative;
}


.tinynav {display: block;
margin-left: 1em;
}

.unit_navgen select {
font-size: .65em;
background: transparent;
width: 300px;
padding: 5px;
border: 1px solid #ccc;
height: 28px;
font-family: Helvetica;
font-weight: bold;
color: #293C4A;
}

.course_guide_unit p{
	font-size: .8em;	
}

.course_guide img, .course_guide_unit img{
	width: 95%;
	display: block;	
	margin-bottom: 1em;
}

.course_guide img.placeholder_guide, .course_guide_unit img.placeholder_guide, .course_guide_unit img.guide_image{
		width: 125px;
		height: 83px;
	margin-bottom: 1em;
}

ul.glos_type_alpha {
	font-style:normal;
	font-size: .85em;
	width: 90%;
}
ul.glos_type_alpha li {
	text-transform: uppercase;
	color: #ccc;
	float: left;
	padding: .25em 1.25em 1em 0;
}

.wrap_definitions {
	clear: both;
	margin-bottom: 1.5em;
	min-height: 5em;
	padding-top: .5em;
}

.unit_nav{
	display: none;	
}

.unit_overview p{
	font-size: .8em;
	line-height: 1.3;
	padding-bottom: 1em;
	margin-right: 1em;
}

.unit_navhome ul a{
	font-size: 10px;
	color: #293C4A;	
	text-decoration: none;
}

.nonhover_state p{
	margin-bottom: 1.5em;
	font-size: .8em;
	font-style: italic;
}	

.nonhover_state li{
	padding-bottom: .75em;
	font-size: .8em;	
}

.nonhover_state p.author{
	color: #293C4A;
	font-style: italic;
	font-size: .75em;
	margin: .75em 0 0 0;
}

.unit_navhome{
	float: left;
	width: 29%;
	position: relative;
	padding: 1em 0 2em .5em;
}

.nonhover_state{
	float: left;
	width: 55%;
	margin-top: 1em;
	padding: 0 1em;
}
.sidebar_left, .sidebar_left_underhead, .sidebar_right, .sidebar_right_underhead{
	clear: both;
	float: none;
	width: 85%;
	margin: 1em auto 1em auto;
	padding: .75em .5em;
	overflow: hidden;
	display: block;
	
}	
.sidebar_left h4, .sidebar_left_underhead h4, .sidebar_right h4, .sidebar_right_underhead h4	{/* ---- currently exactly the same as content h5 ---- */
	font-size: .8em;
}

.sidebar_left p, .sidebar_left_underhead p, .sidebar_right p, .sidebar_right_underhead p {
	font-size: .8em;
	margin: 0;
	padding:  0 .25em;
	
	
}
.sidebar_left p.caption, .sidebar_left_underhead p.caption, .sidebar_right p.caption, .sidebar_right_underhead p.caption	{
	font-size: .65em;
}

.sidebar_left a, .sidebar_left_underhead a, .sidebar_right a, .sidebar_right_underhead a{
	font-size: .85em;
	padding-top: 1em;
}

div.sidebar_para li{
	font-size: .9em;	
}

.center {
	float: none;
	width: 85%;
	margin: .5em 1.25em 1em 1.5em;
}

.left{
	margin-left: 1.5em;
}


div.overlay1, div.overlay2{
display: none;
	width: 230px;
	margin: 1.1em;
	overflow-x: hidden;
	scroll-y: scroll;-webkit-overflow-scrolling: touch;
}

div.overlay h3, div.overlay1 h3, div.overlay2 h3{
 font-size: .9em;
}
div.overlay p, div.overlay1 p, div.overlay2 p{
	font-size: .75em;
	padding-bottom: .5em;
	color: #293C4A;
	line-height: 1.25;
}

div.overlay1 p, div.overlay2 p{
	font-size: .9em;
	margin-right: 1em;	
}

div.overlay1 img, div.overlay1 img.right_side, div.overlay1 img.middle{
	width: 90%;
	float: none;
	margin-bottom: .5em;
}

div.overlay1 div.leftside p.caption, div.overlay1 div.rightside p.caption, div.overlay1 div.centerside p.caption{
		font-size: .7em;
 }
 
 div.overlay2 img{
		float: left;
		background-color: #ccc; 
		width: 125px; 
		height: 156.25px; 
		margin: .15em .75em .25em 0;"
 }
 
blockquote {
	font-size: .75em;
	/*display: block;
	margin: .5em auto 1.25em auto;*/
	line-height: 1.6em;
	text-align: justify;
	/*width: 100%;*/
	}
.block{
	display: block;
	margin: 0 auto 1em auto;
	width: 75%;
	text-align: center;
}

.poem{
	display: block;
	margin: 0 auto 1em auto;
	width: 72.5%;
	text-align: center;
}

#about h2{
	font-size: .95em;	
}

#about h3{
	font-size: .78em;	
}

#about p{
	font-size: .8em;	
}

#about li{
	font-size: .8em;	
}

.main_text ul.intext {
	width: 90%;
	font-size: .8em;
	margin: 0 0 .75em 1em;
}
.main_text ul.intext li {
	list-style: disc;
	padding-bottom: .5em;
	margin-left: 2em;
}

.main_text .centertable{
	text-align: center;	
}

.main_text table.small_table, .main_text table.full_table, div.sidebar_para table.small_table, div.sidebar_para table.full_table{
	width: 90%;
	margin: 0 auto 1em auto;
	border: none;
	display: block;
	overflow-x: auto;
	 -webkit-overflow-scrolling: touch;
}	

.main_text table.small_table caption, .main_text table.full_table caption, div.sidebar_para table.small_table caption, div.sidebar_para table.full_table caption{
	font-size: .8em;
	width: 90%;	
}

.main_text table.small_table tr, .main_text table.full_table tr{
	width: 80%;	
}
.main_text th, div.sidebar_para th{
	font-size: .75em;
	
}
.main_text td, div.sidebar_para td{
		font-size: .75em;
}

.main_text fmath td{
	font-size: 12px;	
}

.col1_map, .col2_map{
	width: 100%;
	float: none;
	margin: 0 1em 1em 0;
}	

.col2_map{
	width: 100%;
	margin-right: 0;	
}

#about ul.map li a{
	font-size: .9em;
}

#about dt {
	font-size: .8em;
	font-style:italic;
	margin-top:.5em;
	font-weight: bold;
}
#about dd{
	font-size: .8em;
	line-height: 1.3;
}

.col1_credits, .col2_credits, .col3_credits{
	float: none;
	margin: 0 1em 1em 0;
	width: 100%;	
}

.search_site li, .search_site a, #content div.nextpage_se{
		font-size: .9em;
}