@charset "UTF-8";
/* CSS Document */

/* ----------- Style Sheet for Smart Phone Screens ----------- */


/* ----------- Major Styles Affecting Interface Behaviors and Appearance ----------- */

/* This style provides a wrapper for the entire content of a page, which allows it to be centered by using a variation of the basic idea of relative postion, auto l/r margins, and an absolute size. In this case it's an absolute max-width, so that the margins can appear and disapear as needed. */
.contentwrapper1 {
	position: relative;
	margin: 0px auto;
	max-width: 900px;
}

/*This style allows the image files themselves (content) to resize with screen size */
.sizeable-content {
	width: 100%;	
	max-width: 900px;
	border: #DCDCDC 1px solid;
}


/* This style adds a class to a page header to override the line-739 style of the jquery.mobile css without having to edit it directly. It needs to be added to the header div to work. */
/* The style must be added to each page's header div, not the page itself */
/* NOTE: this solution avoids needing to edit the original css file, which has tradeoffs. It allows varied header appearances, and avoids possible unintended results of edits, but it requires adding the class to every single page header in the app, adding hundreds of lines of code. */
/* I can add a class directly to the logo image tags in the header, but not to the H1 which I seem to have to manipulate remotely via the headerfont tag in the header */
.headerfont {
	font-size: 0.8em; /* This smaller font size was chosen for mobile devices to fit long titles */
	height: 55px;	/* This solves problem with default header varying in height with one or two lines */
	/* Unsolved issue: single lines start at same location as double, would be better if centered vertically. This property isn't affected by editing margins or padding. */
}

/* This style allows customization of the home page specifically. Replaces headerfont */
.headerfont-home {
	font-size: 1.6em;
	line-height: 30%; /* this property allows me to adjust the vertical position of the h1 without touching it directly */
	height: 55px;
}

.header-logo {
	width: 100px;
	margin: 3px 20px -10px 10px; /* These margins allow placement of the logo as well as verticle adjustments of both the wordmark and title. Imperfect workaround as it may move the logo, h1, or both. */
	
}

/* This style allows customization of the top level pages with longer titles in mobile. Replaces headerfont */
.headerfont-toplevelpage {
	font-size: 1.2em;
	line-height: 30%; /* this property allows me to adjust the vertical position of the h1 without touching it directly */
	height: 55px;
}

.header-logo-toplevelpage {
	width: 80px;
	margin: 3px 20px -10px 10px; /* These margins allow placement of the logo as well as verticle adjustments of both the wordmark and title. Imperfect workaround as it may move the logo, h1, or both. */
	
}

.footer-logo1 {
	width: 90px;
	margin: 0px 5px -40px 27px;
	float:none;
}
.footer-logo2 {
	width: 80px;
	margin: 0px 5px -41px 5px;
	float:none;
}
.footer-logo3 {
	width: 100px;
	margin: 0px 5px -47px 0px;
	float:none;
}
.footer-logo4 {
	width: 180px;
	margin: 5px 0px 15px 2px;
	float:none;
}
.footer-logo5 {
	width: 160px;
	margin: 5px 0px 15px 2px;
	float:none;
}
.footer-logo6 {
	width: 200px;
	margin: -17px 0px 0px -18px;
	float:none;
}


/* This style works the same as the header style above, but is for the page footers. */
.footerfont {
	font-size: 0.5em; /* This smaller font size was chosen for mobile devices to fit long titles */
	padding: 0px 20px 10px 0px;
	text-align: center;
	float:left;
	width: 95%;
	position: absolute;
	bottom: 0;
	background-color: #01539B;
	color: white;
	text-shadow:none; 
}
.footerfont ul {
	display: block;
	list-style-type: none;
	border-top: #FFFFFF solid thin;
	padding: 15px 0px 10px 0px;
	margin: 3px -10px 0px 7px;
}
.footerfont li {
	display:inline;
}
/* Note: link properties needed to be nested inside the li to take. */
.footerfont li a:link {
	color:white;
}	
.footerfont li a:visited {
	color:#ADADAD;
}
.footerfont li a:hover {
	color:#ADADAD;
}
.footerfont li a:active {
	color:#ADADAD;
}


/* work-around style set to add space where needed to keep static replacement footer at page bottoms from accidentally overlapping with page content. */
.space_add1 {
	margin: 0px 0px 200px 0px;
}


/* This style is a work-around to tighten up the space around an inline set of grouped buttons */
.navbutton_styling {
	margin: -15px -10px -5px 0px;	
}

/* These two styles are a workaround for video links I need to appear in a new tab on desktops vs smartphones. It allows me to have two hyperlinks, but only one visible per style sheet. This allows the hyperlink to have a target=blank for the desktop link and none for the smartphone version.*/
.videolink_style1 {
	display: none;
}
.videolink_style2 {

}

/* ----------- Glossary Entry Slide Content Cells ----------- */
/* This style adds a background and border to the content area glossary pages, visually defining each "slide" for the entry. It uses a basic container div to hold the jQuery grid divs. This is done so that each slide may contain multiple rows of divs to create the visual layout, such as a single column across the top of a slide with two pictures below it, while allowing it to all flow into a single column on mobile devices. */

.slide-container {
	border: #DCDCDC 1px solid;	
	background-color:#FFFFFF;
	padding: 10px;
}

/* This style can be added to any slide content div tags to allow text to be centered. Most common use would be for a solo grid div where left aligning the text may look unbalanced due to nothing else appearing on on the "slide". Note the max-width has been reduced to keep line lengths from getting too long and becoming hard to read. */

.centered-content {
	text-align: center;	
	position: relative;
	margin: 10px auto -5px auto; /* 10px added to top due to p tag defaults being overriden by something, not sure why. 12px being removed from bottom to compensate for too large of margin being placed between content of the two containers when text is in a container on top with images in container below it. */
}

/* style to center slide content both horizontally and vertically in a slide It is a flawed method in that it can only work for a specific height. You will need to clone this style and manually enter a top margin to visually center the text. Look for a better solution that can be applied to varying heights.*/
.centered-content-vertical-horizontal {
	text-align: center;	
	position: relative;
	margin: 100px auto -5px auto; /* This style starts with the reasoning of the centered-content settings, and uses 100px as the top dimension to center text next to an image 300px heigh. Unknown other elements seem to be affecting to cause a 50px variance between what you'd think would be needed, and what works. */
	max-width: 600px;
}

/* style created to allow captions to be added below images.*/
.centered-content-small {
	text-align: center;	
	position: relative;
	margin: -10px auto 10px auto; /* 10px added to top/bottom due to style negating p tage defaults, not sure why */
	max-width: 500px;	
	font-size: 1em;
}

/* style created to allow captions to be added above images.*/
.centered-content-small-top {
	text-align: center;	
	position: relative;
	margin: 0px auto -10px auto; /* reworked top and bottom margins as per the same reasons as centered-content-small, but in reverse for aligning with top of an image */
	max-width: 500px;	
	font-size: 1em;
}

/* ---------- Main Glossary Menu Illustrations ---------- */
/* This is a variation of the basic grid element for jQuery Mobile. Instead of adding a breakpoint to turn the two columns into one for mobile, the second column block-b is simply hidden from view on mobile devices*/
.ui-grid-a2 > .ui-block-a {
	/* width: 99.90%; IE7 */
	/* margin-right: -.5px; BB5 */
	width: 100%;
}
.ui-grid-a2 > .ui-block-b {
	display: none;
}





/* Content styles for About page, or other primary pages */
.about_container {
	max-width: 740px;	
	font-size: 0.9em;
}
.about_container h3 {
	color:#046EC4;	
}
.about_container h4 {
	margin: 0px;
}
.about_container p {
	margin: 10px 0px 25px 0px;	
}
.about_container ol li {
	margin: 0px 0px 25px 0px;
}
.about_container ul {
	list-style-type: none;	
}



.list_title {
	font-size:1em;
	font-weight:bold;
	margin: 0px 0px 5px 0px;	
}
.list_sansbullets {
	list-style-type: none;	

}
.list_sansbullets_withspace li {
	list-style-type: none;	
	margin: 0px 0px 10px 0px;
}
.list_sansbullets h4 {
	padding: 0px;
	margin: 0px;
}


/* Content style for any tables in glossary entries */
/* Examples are Geophytes, and Hedging entries */
.table-content1 {
	font-size: 0.7em;	
	text-align: center;	
	position: relative;
	width: 100%;
}
.table-content1 li {
	list-style-type: none;
	text-align: center;
	position: relative;
}


/* table used for 03-light-radiation entry */
/* Uses styles to add borders. Can add border to table and cells, but not rows. Also had to add border as individual lines. Uncertain why. */
.table-content2 {
	font-size: 0.7em;	
	text-align: left;	
	position: relative;
	width: 100%;
	border: solid 5px #000000;
}
.table-content2 th {
	padding: 10px 10px 10px 10px;
	text-align: center;
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-left: solid 0px #000000;	
	border-bottom: solid 3px #000000;
}
.table-content2 td {
	padding: 20px 10px 10px 10px;	
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-left: solid 0px #000000;	
	border-bottom: solid 0px #000000;
}
.table-content2 td.limitpadding {
	padding: 30px 10px 0px 10px;	
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-left: solid 0px #000000;	
	border-bottom: solid 0px #000000;
}
.table-content2 td.limitpadding-leftalign {
	padding: 10px 10px 0px 10px;	
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-left: solid 0px #000000;	
	border-bottom: solid 0px #000000;
}
.table-content2 td.limitpadding-rightalign {
	padding: 10px 30px 10px 10px;	
	border-top: solid 0px #000000;
	border-right: solid 0px #000000;
	border-left: solid 0px #000000;	
	border-bottom: solid 0px #000000;
	text-align: right;
}
.table-content2 h4 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
.table-content2 span.smalltext {
	font-size: 0.8em;
	font-weight: normal;
}


/* Custom list styles to add style options not included in the default library */

/* A style set to allow for an outside border of entire list */
/* has border for top level bullet in nesting lists */
/* Used for Dormancy Types */
.list_custom_roman {
	border: solid 1px #000000;
	padding: 30px;
	font-size: 0.9em;
	list-style-type:upper-roman;	
}
.list_custom_roman li {
	padding: 0px 0px 10px 0px;
}

/* Has border for top level bullet in nesting lists. Used for Endogenous Dormancy. */
.list_custom_number {
	border: solid 1px #000000;
	margin: 0px 0px 0px 0px;
	padding: 30px;
	font-size: 1em;
}
.list_custom_number li {
	padding: 0px 0px 10px 0px;
}
.list_custom_number li.secondary {
	font-size: 0.7em;
	padding: 15px 0px 10px 0px;
}

/* has no border for secondary level bullet in nesting lists */
.list_custom_number_noborder {
	padding-top: 10px;
	margin-bottom: -10px;
}
.list_custom_number_noborder li {
	padding: 0px 0px 10px 0px;
}

/* no border for secondary level bullet in nesting lists. Used for Dormancy Types. */
.list_custom_alphabet_noborder {
	list-style-type:lower-alpha;	
	font-size: 0.9em;	
}
.list_custom_alphabet_noborder li {
	padding: 10px 0px 0px 0px;
}


/* Workaround style to add space back to bullets when other styles remove. Used on Parts Per Million entry. */
.list_custom_extraspace {
	margin: 0px 0px 0px 10px;	
}
.list_custom_extraspace li {
	margin: 0px 0px 10px 0px;
}


/* Style for elements that need a border placed around them to visually differenciate the information from the regular text, such as lists, tables, formulas, etc. Used for Parts Per Million entry */ 
.bluebox {
	border: 1px #000000 solid;
	padding: 20px 20px 20px 20px;
	background-color: aliceblue;
}

/* code needed to style pop-up iframes for video, copied from the jQuery Mobile demo */
iframe {
    border: none;
}