/**/
body {
	background: #f9efc8 url(images/home_bg.gif) top left repeat-x;
}

/* different bg on some subpages */
#body_synbio101-sub, #body_basic-page, #body_news-item, #body_biographies, #body_biography {
	background-image: url(images/content_bg.gif);
}

.content {
	font-size: 1.3em;
}

.content .module {
	font-size: 12px;
}

#logo {
	float: left;
	margin: 15px 40px;
	width: 237px;
	height: 98px; 
	background: url(images/logo.png) 50% 50% no-repeat;
	background-size: contain;
	overflow: hidden;
	text-indent: -9999px; 
}

#topnav {
	float: left;
	margin-left: 10px;
}

#topnav li {
	float: left;
}

#topnav li.page-1 {
	display: none; /* Hide home from nav, we show it on mobile only */
}

#search {
	float: right;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-right: 5px;
}

#section {
	position: absolute;
	left: 340px;
	bottom: -3px;
	z-index: 2;
}

#body_home #section {
	display: none;
}

#masthead {
	position: relative;
	background-position: bottom right;
	background-repeat: no-repeat;
	background-image: url(images/bg_section_topics.jpg);
}

.section-home #masthead {
	background-image: url(images/bg_section_home.gif);
}

.section-news #masthead {
	background-image: url(images/bg_section_news.jpg);
}

.section-events #masthead {
	background-image: url(images/bg_section_events.jpg);
}

.section-basic-page #masthead, .section-biographies #masthead, .section-biography #masthead {
	background-image: url(images/bg_section_about.jpg);
}



#hero {
	
}

.module {
	width: 320px;
	height: 201px;
	padding: 1em 1.5em;
	border-left: 5px solid #F9EFC8;
	border-bottom: 5px solid #F9EFC8;
	background: white;
	float: left;
	position: relative;
	overflow: hidden;
}

.module_container {
	height: 150px;
	overflow: hidden;
}

.event_module {
	background: #EAE1BC;
}

/* Icons inside modules should be top right */
.module > .icons {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font-size: 14px;
}

.icons i {
	margin-left: 3px;
	color: #b14c00;
}

.content .module p {
	margin-top: 0;
}

.empty_module {
	background: transparent;
	display: none;
}

.image_module {
	padding: 0;
}

.publication_module {
	background: url(images/bg_module_publication.jpg); 	
}

.module img {
	margin-left: 7px;
}

.tools_module img {
	margin-left: 0;
}

.image_module img {
	margin: 0;
	display: block;
}

.publication_module img {
	border: 1px solid #f0a0bc;
}

.inventory_module a.more {
	display: none;
}

.what_module {
	position: relative;
	float: right;
	top: -93px;
	margin-bottom: -93px;
	background: transparent url(images/bg_module_feature_what.jpg) left bottom no-repeat;
	border-left: 0;
	width: 315px;
	height: 495px;
}

.what_module h2 {
	overflow: hidden;
	text-indent: -9999px; 
}

.what_module p {
	position: absolute;
	top: 410px; 
	left: 24px; 
	width: 270px; 
	color: #00344b;
}

.what_module a {
	color: #12648f; 
	text-decoration: underline; 
}

.content {
	clear: both;
	background: #f9efc8;
	padding-right: 5px;
}

#footer {
	clear: both;
	background: url(images/bg_footer.gif) repeat-x; 
	margin: 0 0 4em; 
	padding-bottom: 4em;
}

#body_home #footer {
	background-image: none;
}

#footer p.footer_text {
	clear: both;
	padding: 1em;
}

#body_home .clouds_module {
	display: none;
}

.clouds_module {
	background: url(images/bg_module_clouds.jpg);
}

.tools_module {
	background: url(images/bg_module_tools_landscape.jpg); 
}

.synbio101-sub_module {
	background: url(images/whatis_bg4.jpg);
}

.wide_module {
	width: 640px;
	padding-top: 20px;
}

.high_module {
	height: 402px;
	background: #f9efc8;
}

.high_module .subpages {
	margin-top: 5px;
}

.footer_module {
	background: url(images/bg_module_footer_landscape2.jpg); 
	background-size: cover;
	position: relative; 
}

.twitter_module {
	background: url(images/bg_module_clouds.jpg);
	background-size: cover;
}


.footer_module a {
	position: absolute;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

#wwics {
	top: 0; 
	left: 75px; 
	width: 120px;
	height: 70px;
}

#sloan {
	left: 0;
	top: 0; 
	width: 70px;
	height: 70px;
}


/* breakpoints */


/* trad. desktop, three modules */
.container {
	width: 965px; 
	margin: 0 auto; 
	position: relative;
	background: url(images/bg_topright.gif) top right no-repeat;
}

#footer .container {
	background: none;
}

.sidebar {
	float: left;
	width: 320px;
}

.sidebar .topics {
	background: url(images/bg_sidebar.gif) top left repeat-x; 
	margin: 0;
	border-left: 5px solid #F9EFC8;
	padding: 2em;
	padding-top: 1em;
}
	
.sidecopy {
	clear: both;
	background: #efe5bb;
	padding: 0;
	border-left: 5px solid #F9EFC8;
}

.sidecontent {
	padding: 1em 2em;
}

ul.subpages {
	margin: 0;
	padding: 1em 2em;
	background: #b2d7e8;
	min-height: 196px;
	margin-bottom: 5px;
	font-size: 12px;
}

.subpages li {
	display: block;
	margin: 0.5em 0;
	line-height: 1.6em;
}

.subpages a {
	color: #0b5b7d;
	font-weight: bold;
}

.subpages .active a {
	text-decoration: underline;
}

.bodycopy {
	float: right;
	background: white;
	padding: 1em;
	padding-left: 19px;
	min-height: 396px;
	width: 635px;
	margin-bottom: 5px;
}

.right-container {
	float: right;
	width: 200px;
	padding-left: 1em;
	border-left: 1px dotted #ccc;
}

.left-container {
	float: left;
	width: 395px;
}

.bio-modules {
	width: 640px;
	float: right;
}

.simple {
	padding: 0;
	background: transparent;
}

.featureimage {
	float: none;
	clear: both;
	text-align: right;
	width: 960px;
	border-left: 5px solid transparent;
	margin-bottom: 5px;
}

.featureimage img {
	max-width: 100%;
	display: block;
}

.images {
	margin-bottom: 0.5em;
}

.images_center {
	clear: both;
	margin-top: 2em;
}

.images_center img {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.images_left {
	float: left;
	margin-right: 1em;
}

.images_right {
	float: right;
	margin-left: 1em;
}

.MarkupPagerNav {
    clear: both;
    margin: 0 !important; 
    margin-left: 5px !important;
   	font-family: Arial, sans-serif;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: block;
	float: left;
	padding: 2px 9px;                
	color: #fff;
	background: #e9a04b;
	margin-right: 3px;
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}
                
.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
	color: #000;
	background: #ffce95;
	text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
	color: #777;
	background: transparent;
	padding-left: 3px;
	padding-right: 3px;
}

.imagelink {
	float: right;
	margin-right: -5px;
}

#editpage {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	padding: 0.5em 1em;
	font-size: 10px;
	background: #e9a04b;
	color: white;
	border-bottom-right-radius: 3px;
}

#search_query {
	width: 110px;
	border: 1px solid #ccc;
}
#search_submit {
	background: transparent;
	border: none;
}
#search_submit i {
	color: #333;
}

/* Large screens, four modules side by side */
@media screen and (min-width: 1350px) {
	#search_query {
		width: 170px;
	}
	.featureimage {
		float: right;
	}
	.container {
		width: 1285px;
	}
	.bodycopy, .featureimage {
		border-left: none;
		width: 955px;
	}
	.content {
		font-size: 1.6em;
	}	
	.bio-modules {
		width: 960px;
	}
	#topnav {
		font-size: 1.3em;
	}
	.empty_module {
		display: block;
	}
	.left-container {
		width: 710px;
	}
	.section-home #masthead {
		background-image: url(images/bg_slogan.gif);
		background-position: 320px 0px;
	}
	.innerwrap {
		position: relative;
		overflow: hidden;
	}

	#body_inventory-map .sidebar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 320px;
		height: 397px;
	}
	#body_inventory-map .sidebar .sidecopy {
		height: 100%;
	}
}

/* small screen, two modules */
@media screen and (max-width: 980px) {
	.container {
		width: 645px;
	}
	.featureimage {
		width: 100%;
	}
	.what_module {
		display: none;
	}
	.wide_module {
		width: 320px;
		height: 402px;
	}
	#topnav {
		float: right;
	}
	#topnav li a {
		padding: 20px 7px 10px 7px;
	}
	#search_query {
		width: 270px;
	} 
	body .container #masthead {
		background: none;
	}
	#body_home .container #masthead {
		background: url(images/slogan.png) right 55px no-repeat;
		background-size: 50%;
	}
	.clouds_module {
		display: none;
	}
	.sidebar {
		margin-bottom: 5px;
		width: 100%;
	}
	.sidebar .topics {
		clear: both;
	}
	.sidecopy {
		width: 100%;
		clear: none;
	}
	.bodycopy {
		width: 635px;
		margin-bottom: 5px;
	}
	#topnav {
		width: 640px;
		height: 40px;
		display: table;
		table-layout: fixed;
		margin: 0;
	}
	.subpages {
		float: right;
		width: 315px;
	}
	#topnav li {
		padding: 0;
		display: table-cell;
		width: 100%;
		overflow: hidden;
		float: none;
		height: 40px;
		padding-right: 6px;
	}

	#topnav li a {
		border: 1px solid #f6d9af;
		display: block;
		width: auto;
		text-align: center;
		margin: 0;
		padding: 0;
		line-height: 30px;
	}
	#topnav li.page-1 {
		display: table-cell; /* Hide home from nav, we show it on mobile only */
	}
	body, .container {
		background-image: none !important;
	}
	#section {
		left: 0;
		position: relative;
		clear: both;
		padding-top: 2em;
	}
	#section span {
		padding-left: 14px;
	}
	#search {
		position: absolute;
		top: 10px;
		right: 0;
	}
	#search_query {
		width: 288px;
	}
	.section-basic-page .sidebar {
		margin-top: 0;
	}
}

/* single column (ie. mobile) */
@media screen and (max-width: 700px) {
	#topnav {
		width: 100%;
		table-layout: auto;
		margin-bottom: 8px;
	}
	#topnav li {
		width: 33.333333333%;
		padding-left: 1%;
		padding-right: 1%;
		float: left;
	}
	#search {
		position: relative;
		top: 0;
		margin-bottom: 1.3em;
	}
	#logo {
		display: block;
		float: none;
		margin: 0 auto;
	}
	#body_home #logo {
		margin-bottom: 50px;
	}
	#body_home .container #masthead {
		background: url(images/slogan.png) 50% 100px no-repeat;
		background-size: 300px;
	}
	.container {
		width: 100%;
		min-width: 320px;
		background: none;
		padding: 0 10px;
	}
	.content {
		font-size: 1.4em;
	}
	.content, .sidecopy, .left-container, .right-container {
		width: 100%;
		padding: 0;
		margin: 0;
		border: 0;
	}

	.content h3 {
		margin-bottom: 0;
	}

	.sidebar .topics, .featureimage {
		border-left: 0;
	}

	.MarkupPagerNav {
		margin-left: 0 !important;
	}

	ul.subpages {
		width: 100%;
		margin-top: 0;
	}

	.featureimage, .bodycopy {
		width: 100%;
	}



	.module, .bio-modules {
		float: none;
		clear: both;
		height: auto;
		width: auto;
		background-repeat: no-repeat !important;
		background-size: cover !important;
		border-left: 0;
		padding-bottom: 1.5em;
	}

	.module_container {
		height: auto;
	}

	.module p {
		margin: 0;
	}

	.clouds_module, .module .more {
		display: none;
	}

	.footer_module {
		height: 180px;
		background: #f5eed2 url(images/bg_module_footer_landscape2_mobile.jpg) center center no-repeat; 
		background-size: contain !important;
	}
	
	.image_module {
		padding-bottom: 0;
		margin-bottom: 5px;
		border: none;
	}

	.image_module img {
		width: 100%;
	}

	.image_module .subpages {
		margin-bottom: 0;
	}

	.what_module {
		display: block;
		position: relative;
		top: 0;
		margin: 0;
		background: #97C7DE;
	}
	.what_module h2 {
		text-indent: 0;
		overflow: visible;
		color: #0D5D78;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 15px;
	}
	.what_module p {	
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}

	#search {
		clear: both;
		float: none;
		text-align: center;
	}
	#search_query {
		width: 80%;
	}
	

	.images {
		float: none;
		margin: 0 auto;
		text-align: center;
	}

	img {
		max-width: 100%;
	}

	ul.subpages {
		min-height: 0;
		overflow: hidden;
		padding: 1em 19px;
		float: none;
		display: block;
		margin-bottom: 5px;

	}

	ul.subpages li {
		float: left;
		margin-right: 1em;
	}
}