/*
-------------------------------------------------------------------------------
	Common styles
-------------------------------------------------------------------------------
*/
HTML
, BODY
{
	margin:			0;
	padding:		0;
	position:		relative;
	font:			normal 16px/normal Verdana, Arial, sans-serif;
}
IMG
{
	border:			none;
}
A {
	text-decoration:	none;
}
A:hover {
	text-decoration:	underline;
}
P {
	text-align:		justify;
}
HR
{
	margin:			8px 0;
	border:			none;
	border-bottom:		1px dotted #ccc;
}
H1, H2, H3
{
	font-weight:		normal;
}
H1 { font-size:			2.0em; }
H2 { font-size:			1.5em; }
H1:first-child,
H2:first-child
{
	margin-top:		0.5em;
}
FIGURE
{
	/* next two lines force FIGCAPTION to wrap to IMG width; width should be set on IMG element */
	display:		table;
	width:			20px;
	margin:			2% 4%;
	padding:		2%;
	border:			1px solid #eee;
}
FIGURE IMG
{
	display:		block;
	margin:			0 auto;
}
FIGCAPTION
{
	margin-top:		6%;
	font-size:		0.7em;
	text-align:		justify;
	color:			#333;
}
FIGURE.centered
{
	margin:			2% auto;
}
FIGURE.centered FIGCAPTION
{
	text-align:		center;
}
FIGURE.left
{
	float:			left;
	margin-left:		0;
	margin-top:		0;
}
FIGURE.right
{
	float:			right;
	margin-right:		0;
	margin-top:		0;
}
INPUT[type="text"]
, TEXTAREA
{
	border:			1px solid #999;
	padding:		6px;
}
TEXTAREA
{
	resize:			vertical;
}
BUTTON
{
	margin:			4px 2px;
	padding:		3px 9px;
	color:			#333;
	border:			1px solid #333;
	-moz-border-radius:	3px;
	-webkit-border-radius:	3px;
	border-radius:		3px;
	font:			bold 1em "Trebuchet MS", sans-serif;
	cursor:			pointer;

	background:		#ffffff; /* Old browsers */
	background:		-moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
	background:		-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
	background:		-webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
	background:		-o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
	background:		-ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
	background:		linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
	filter:			progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0); /* IE6-9 */
}
TABLE
{
	clear:			both;
	margin:			auto;
	background-color:	#ccc;
	border-spacing:		1px;
}
TABLE TD
, TABLE TH
{
	padding:		2px;
	background-color:	#fff;
}
TABLE THEAD
, TABLE TFOOT
{
	empty-cells:		hide;
}
TABLE TH
{
	background-color:	#036;
	color:			#fff;
	font-weight:		bold;
}
LABEL
{
	cursor:			pointer;
}
/*
-------------------------------------------------------------------------------
	Template styles
-------------------------------------------------------------------------------
*/
#header
{
	position:		relative;
	padding:		10px 0 0 10px;
	border-bottom:		1px solid;
	background:		#036;
	background:		-moz-linear-gradient(top, #001427 0%, #00529A 100%);
	background:		-webkit-linear-gradient(top, #001427 0%, #00529A 100%);
	background:		-o-linear-gradient(top, #001427 0%, #00529A 100%);
	filter:			progid:DXImageTransform.Microsoft.gradient( startColorstr='#001427', endColorstr='#00529A',GradientType=0); /* IE6-9 */
	background:		-ms-linear-gradient(top, #001427 0%, #00529A 100%);
	background:		linear-gradient(top, #001427 0%, #00529A 100%); /* W3C */
}
#footer
{
	padding:		40px;
	background:		#036;
	background:		-moz-linear-gradient(bottom, #001427 0%, #00529A 100%);
	background:		-webkit-linear-gradient(bottom, #001427 0%, #00529A 100%);
	background:		-o-linear-gradient(bottom, #001427 0%, #00529A 100%);
	filter:			progid:DXImageTransform.Microsoft.gradient( startColorstr='#00529A', endColorstr='#001427',GradientType=0); /* IE6-9 */
	background:		-ms-linear-gradient(bottom, #001427 0%, #00529A 100%);
	background:		linear-gradient(bottom, #001427 0%, #00529A 100%); /* W3C */
}
#title {
	position:		relative;
	background:		transparent url(../images/psu_white_long.png) no-repeat;
	margin:			0 10px 10px 0;
	width:			679px;
	height:			79px;
}
A#zfatlas-title {
	position:		absolute;
	display:		block;
	bottom:			10px;
	right:			279px;
	font-size:		40px;
	color:			#fff;
	font-weight:		normal;
}
#gittlen-title {
	position:		absolute;
	bottom:			0;
	right:			279px;
	font-size:		13px;
	color:			#ddd;
	text-align:		justify;
	cursor:			default;
}
#species {
	position:               absolute;
        display:                block;
        bottom:                 12px;
        right:                  109px;
        color:                  #fff;
        font-weight:            normal;
}
#nav-links {
	text-align:		right;
	padding:		0 2% 20px;
	overflow:		auto;
}
#nav-links A
{
	font-weight:		bold;
	color:			#ff9;
}
#nav-links .nav-link
{
	float:			right;
	margin-left:		16px;
	border-left:		1px solid #fff;
	padding-left:		16px;
}
#nav-links .nav-link:last-child
{
	border-left:		0;
}
#nav-links .nav-link .nav-link-summary
{
	font-size:		13px;
	color:			#ddd;
}
.content
{
	position:		relative;
	margin:			0;
	padding:		3% 4%;
	background-color:	#69c;
	font:			normal 1em Georgia, "Times New Roman", serif;
	overflow:		auto;
}
.content-width
{
	max-width:		1600px;
	margin:			0 auto;
}
#footer-links
{
	-moz-border-radius:	4px;
	-webkit-border-radius:	4px;
	border-radius:		4px;
	overflow:		auto;
	padding:		8px;
	padding-left:		10%;
}
.footer-links-column {
	float:			left;
	width:			20%;
	font-size:		smaller;
}
.footer-links-column:last-child {
	width:			auto;
}
.footer-links-column H4 {
	margin:			0;
}
.footer-links-column UL {
	list-style-type:	none;
	margin:			0;
	padding:		0;
	padding-bottom:		8px;
}
#copyright-notice {
	text-align:		center;
	font-size:		smaller;
	margin-top:		40px;
	clear:			both;
}
/*
-------------------------------------------------------------------------------
	Column styles
-------------------------------------------------------------------------------
*/
.column > *
{
	margin-bottom:		1%;
}
.two-column-layout .column
, .three-column-layout .column
{
	float:			left;
}
/* two column layout */
.two-column-layout .column-1
{
	width:			70%;
	margin-right:		1%;
}
.two-column-layout .column-2
{
	width:			29%;
}
.two-column-layout .column-1 > *
{
	margin-bottom:		1.43%;
}
.two-column-layout .column-2 > *
{
	margin-bottom:		3.5%;
}
/* three column layout */
.three-column-layout .column-1
{
}
.three-column-layout .column
{
	width:			32.6%;
}
.three-column-layout .column > *
{
	margin-bottom:		3%;
}
.three-column-layout .column-1
, .three-column-layout .column-2
{
	margin-right:		1%;
}
.three-column-layout .column-3
{
}
.two-column-layout .column-2 P
, .two-column-layout .column-2 LI
{
	font-size:		smaller;
}
.two-column-layout .column-1 H1
{
	text-align:		center;
}
.shadow-box
{
	-moz-border-radius:	8px;
	-webkit-border-radius:	8px;
	border-radius:		8px;
	-moz-box-shadow:	2px 2px 2px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:	2px 2px 2px rgba(0, 0, 0, 0.5);
	box-shadow:		2px 2px 2px rgba(0, 0, 0, 0.5);
	padding:		20px;
	overflow:		auto;
}
.shadow-box H1
{
	margin:			-20px;
	padding:		20px;
}
.shadow-box H1 + *
{
	/* replaces and adds some space below the H1 from above,
	 * which has been pushed to its edge with negative margins */
	margin-top:		40px;
}
TABLE.shadow-box
{
	width:			90%;
	margin:			0 auto 2%;
}
TABLE.shadow-box TD
, TABLE.shadow-box TH
{
	padding:		12px;
	font-size:		larger;
	text-align:		center;
}
TABLE.shadow-box IMG
{
	border:			1px solid #eee;
}
/*
-------------------------------------------------------------------------------
	Colors
-------------------------------------------------------------------------------
*/
/*
	zfatlas colors:

	#001427		very dark blue, almost black; used in BODY, header/footer gradient
	#003366		dark blue, used on lighter blues for contrast
	#00529A		medium dark blue (BODY, #header, #footer)
	#6699CC		lighter blue (#body)
	#99CCFF		light blue (A in BODY)

	#FFFF99		light yellow (A)
*/

BODY
{
	background-color:	#001427;
	color:			#fff;
}
A {
	color:			#9cf;
}
.content A
{
	color:			#ff9;
}
.shadow-box
{
	background-color:	#fff;
	color:			#036;
}
.shadow-box A
{
	color:			#69c;
}
.shadow-box H1
{
	color:			#fff;
	background-color:	#036;
}
/* Wrapper for 100% width form elements */
.input-100-wrapper
{
	padding:		4px 8px;
}
.input-100-wrapper TEXTAREA,
.input-100-wrapper INPUT[type="text"]
{
	width:			100%;
	margin:			-4px 0 0 -4px;
}
/*
-------------------------------------------------------------------------------
	index.php
-------------------------------------------------------------------------------
*/
.news H3
, .news H4
{
	font-weight:		bold;
}
.news H3
{
	margin:			0 -20px 1em; /* side margins need to be same as shadow-box, except negative */
	padding:		8px 20px;
	background-color:	#ffc;
	border-top:		1px dotted #ccc;
	border-bottom:		1px dotted #ccc;
	font-size:		1em;

	color:			#fff;
	background-color:	#F8BA18;
	text-shadow:		1px 1px 2px rgba(0, 0, 0, 0.5);
	padding:		4px 20px 6px;
	margin-top:		10%;
	border:			none;
}
.news H2 > H3
{
	margin-top:		0;
}
.news H4
{
	font-size:		smaller;
}
/*
-------------------------------------------------------------------------------
	search.php
-------------------------------------------------------------------------------
*/
.search-box {
}
.search-box .input-100-wrapper {
	margin:			2% auto;
}
.search-box .input-100-wrapper INPUT[type="text"] {
	font-size:		larger;
}
.search-box FIELDSET {
	float:			left;
	border:			1px solid #ccc;
	margin:			2% 16px 2% 0;
	padding:		8px 16px 16px;
}
.search-box SELECT[size="1"] {
	padding:		4px;
}
.search-box P BUTTON
, .search-box P SELECT
{
	display:		inline-block;
	vertical-align:		middle;
}
.search-results {
}
.search-results-navigation {
	text-align:		center;
}
.search-results-navigation
, .search-results-summary
{
	margin:			16px 0;
}
.search-results-summary
, .search-results-navigation
{
	font-size:		larger;
}
.search-result-item {
	margin-top:		8px;
	overflow:		auto;
}
.search-result-item P
{
	margin:			0.5em 0;
	padding:		0;
	color:			#000;
}
.search-result-item IMG {
	float:			left;
	margin:			20px 1em 0.5em 0;
}
.search-result-item .title {
	font-size:		2em;
}
.search-result-item .title A {
	color:			inherit;
	font-weight:		normal;
}
.search-result-item .title .i-th {
	margin-right:		0.7em;
	color:			#c00;
	font-size:		0.7em;
	font-weight:		bold;
}
.search-result-item .organism {
	margin-top:		5px;
	border-bottom:		1px solid;
	padding:		2px 0;
	font-size:		1.2em;
}
.search-result-item .organism .common-name {
	font-weight:		bold;
	margin-right:		0.25em;
}
.search-result-item .organism .species {
	font-style:		italic;
	color:			#999;
	margin-right:		0.25em;
}
.search-result-item .organism .strain {
}
.search-result-item .organism .unknown {
	font-style:		italic;
}
.search-result-item .type {
	float:			right;
	font:			bold larger sans-serif;
	color:			#fff;
	background:		#036;
	padding:		0 4px;
	-moz-border-radius:	3px;
	-webkit-border-radius:	3px;
	border-radius:		3px;
	text-transform:		uppercase;
}
.search-result-item .organism,
.search-result-item .source {
	color:			#666;
}
.search-result-item .source {
	clear:			both;
	text-align:		right;
}
.search-result-item .source:before {
	content:		"Source: ";
}
.search-result-slide {
}
.search-result-slide A IMG {
	border:			none;
}
.search-result-label {
}
.search-result-label .type {
	background:		#c00;
}
.search-result-label IMG {
	border:			1px solid #666;
}
.search-result-item A IMG {
	-moz-box-shadow:	2px 2px 2px rgba(0, 0, 0, 0.33), 0 0 2px rgba(0, 0, 0, 0.66);
	-webkit-box-shadow:	2px 2px 2px rgba(0, 0, 0, 0.33), 0 0 2px rgba(0, 0, 0, 0.66);
	box-shadow:		2px 2px 2px rgba(0, 0, 0, 0.33), 0 0 2px rgba(0, 0, 0, 0.66);
}
.search-result-item A IMG:hover {
	-moz-box-shadow:	3px 3px 3px rgba(0, 0, 0, 0.33), 0 0 3px rgba(0, 0, 0, 0.66);
	-webkit-box-shadow:	3px 3px 3px rgba(0, 0, 0, 0.33), 0 0 3px rgba(0, 0, 0, 0.66);
	box-shadow:		3px 3px 3px rgba(0, 0, 0, 0.33), 0 0 3px rgba(0, 0, 0, 0.66);
}
.search-result-label P.definition:before {
}
.search-result-label P.synonyms:before {
	content:		"Synonyms";
	font-weight:		bold;
	display:		block;
}
.search-result-atlas { }
.search-result-atlas .organism {
	text-align:		right;
}
.search-result-atlas .type {
	background:		#9cf;
}
/*
-------------------------------------------------------------------------------
	progress.php
-------------------------------------------------------------------------------
*/
.thumbnail-preview
{
	position:		absolute;
	border:			1px solid #999;
	-moz-box-shadow:	2px 2px 4px 2px rgba(0,0,0,0.50);
	-webkit-box-shadow:	2px 2px 4px 2px rgba(0,0,0,0.50);
	box-shadow:		2px 2px 4px 2px rgba(0,0,0,0.50);
}
.thumbnail-preview IMG
{
	display:		block;
	border:			none;
}
#atlas-table
{
	width:			100%;
	border-spacing:		1px;
	font:			normal 0.8em Verdana, Arial, sans-serif;
}
#atlas-table TH
, #atlas-table TD
{
	text-align:		left;
	background-color:	#eee;
	color:			#333;
}
#atlas-table TBODY TD
{
	vertical-align:		top;
}
#atlas-table TD:first-child
{
	font-weight:		bold;
}
#atlas-table TD A
{
	position:		relative;
	float:			left;
	margin:			1px;
	padding:		1px 2px;
	color:			#fff;
	background-color:	#36c;
	font-size:		smaller;
	border:			1px solid #36c;
	-moz-border-radius:	2px;
	-webkit-border-radius:	2px;
	border-radius:		2px;
}
#atlas-table TD A:hover
{
	color:			#036;
	background-color:	#ff9;
	text-decoration:	none;
}
#atlas-table TH .direction
{
	font-style:		italic;
	font-size:		smaller;
	font-weight:		normal;
}
#atlas-table TD.labeled
{
	background-color:	pink;
}
#atlas-table TH.priority
, #atlas-table TD.priority
{
	background-color:	#ff9 !important;
}
/*
-------------------------------------------------------------------------------
	contact.php
-------------------------------------------------------------------------------
*/
.optional
{
	color:			#666;
	font-style:		italic;
}
#contact-form
{
	width:			75%;
	margin:			5% auto 10%;
}
#contact-form TEXTAREA
{
	height:			10em;
}
#contact-form INPUT
, #contact-form TEXTAREA
{
	background-color:	#ffc;
	font:			italic 1em Georgia, Arial, sans-serif;
}
#contact-form .input-100-wrapper
{
	margin-bottom:		8px;
}
P.confirmation
{
	font-size:		larger;
	text-align:		center;
	width:			75%;
	margin:			10% auto;
}
#contact-form-questions
{
	width:			98%;
	margin:			2em 2px 1.5em;
	padding:		8px;
	background-color:	#ffc;
	border:			1px solid #999;
}
/*
-------------------------------------------------------------------------------
	about.php
-------------------------------------------------------------------------------
*/
.about-people
{
	float:			left;
	font-size:		smaller;
}
.about-people DD
{
}
.about-people DT
{
	font-weight:		bold;
	margin-top:		1.2em;
	margin-bottom:		0.5em;
}
.about-people DT:first-child
{
	margin-top:		0;
}
.about-people SUP
{
	line-height:		0;
}
.about-references LI
{
	margin-bottom:		8px;
	font-size:		smaller;
}
/*
-------------------------------------------------------------------------------
	Small screen and touch devices
-------------------------------------------------------------------------------

	iPad:		1024x768
	iPodTouch:	480x320
	iPhone4:	960x640

*/
@media (max-width:480px) {

}

@media (min-width:481px) and (max-width:768px) {

}

@media (min-width:769px) {

}

@media touch {

}