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

/* ----------- Style Sheet for Computer 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: 20px auto;
	max-width: 900px;	
}


/* Style that allows content images to resize in response to different screen sizes. It needs to be applied to the img file itself. */
.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. */
/* NOTE: when applied to the page, this style affects both the header and footer */
/* 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 in the app, adding hundreds of lines of code. It is also very hit and miss, as a few styles are able to be altered, while others cannot be. A better solution would be preferable.*/
.headerfont {
	font-size: 1.8em; /* This larger font size is for use on desktop browsers, where there is more room for titles */
	height: 100px;	/* 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. */
}
/* headerfont-home and header-logo work together. allows customization of the home page specifically. Replaces headerfont. */
.headerfont-home {
	font-size: 2em;
	line-height: 10%; /* this property allows me to adjust the vertical position of the h1 without touching it directly */
	height: 65px;
}
.header-logo {
	width: 150px;
	margin: 5px 20px -25px 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 view. Replaces headerfont */
.headerfont-toplevelpage {
	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;
}

.footer-logo1 {
	width: 150px;
	margin: 20px 15px -45px 5px;
	float:none;
}
.footer-logo2 {
	width: 140px;
	margin: 20px 5px -47px 5px;
	float:none;
}
.footer-logo3 {
	width: 180px;
	margin: 20px 5px -58px 2px;
	float:none;
}
.footer-logo4 {
	width: 231px;
	margin: 10px 0px 25px 2px;
	float:none;
}
.footer-logo5 {
	width: 216px;
	margin: 10px 0px 25px 2px;
	float:none;
}
.footer-logo6 {
	width: 277px;
	margin: -20px 0px 0px -26px;
	float:none;
}

/* This style works the same as the header style above, but is for the page footers. */
.footerfont {
	font-size: 0.6em; 
	padding: 0px 10px 40px 10px;
	text-align: center;
	float: left;
	width: 100%;
	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 0px 0px;
	margin: 0px 30px 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;
}

/* 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;	
}


/* work-around style set to add space where needed to keep other elements from accidentally overlapping */
/* used on About page at bottom */
.space_add1 {
	margin: 0px 0px 300px 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 {

}
.videolink_style2 {
	display: none;
}


/* ---------- 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 is simply hidden from view on small screens. */
.ui-grid-a2 > .ui-block-a {
	width: 33%;
}
.ui-grid-a2 > .ui-block-b {
	width: 67%;
}

/* Images used on right side of main menu subsections on larger screens only */
/* If images is needed with hypertext overlay, simply create a p container with image as background. */
.image-rightcolumn {
	width: 95%; /* allows image to shrink to fit narrower screens with enough visual border space on right */
	max-width: 800px; /* keeps image from stretching beyond the dimensions of image file */
	margin: 12px 0px 0px 20px; /* creates exact placement for top and left */
}




/* ----------- Content styles for About page, or other primary pages ----------- */

.about_container {
	max-width: 780px;	
	float: left;
	margin-left: 32%;
	margin-right: 32%;
}
.about_container h3 {
	color:#046EC4;	
	font-size: 1.5em;
}
.about_container h4 {
	font-size: 1.2em;
	margin: 0px;
}
.about_container h5 {
	font-size: 0.8em;
	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;	
}
.about_container ul h4 {
	font-size: 1.0em;
	margin: 0px;
}


/* ----------- Glossary Entry Slide Content Cells ----------- */

/* This style is the primary style to create blocks of content on all glossary definition pages. It adds a background and border to each block of content, 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 alteration of the basic font size allows the majority of the glossary text to be closer to the original font size of the slides, relative to the images. This allows for layouts closer to those of the original slides. This enlarged font is not used for the smaller screens of smart phones. Most text in the glossary occurs as content of glossary pages that require it. Exceptions, such as some picture captions, or the About page should be assigned their own class with the 1 em font size to return it to a more normal size. */
p {
	font-size: 1.4em;
}

ol {
	font-size: 1.2em;
	margin: -10px 0px 0px 0px;	
}
ul {
		font-size: 1.2em;	
		margin: -10px 0px 0px 0px;
}


/* This style is set up to keep proper level of header for a tag, while allowing the title text to appear larger than the bullet points */
h3.bulletlist_title {
	font-size: 1.4em;
}

/* This style can be added to any slide content 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 grids when text is in a grid on top with images in grid below it. */
	max-width: 600px;
}

/* 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: -20px auto 10px auto; /* 10px added to top due to style negating p tage defaults, not sure why. 20px subtracted from top to overide competing p tag margins which are pushing images and titles below them using this class too far apart. */
	max-width: 500px;	
	font-size: 1.2em;
}
/* 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: 1.2em;
}


/* Style needed for citation text for content such as images or tables */
.citation {
	text-align: right;
	position: relative;
	font-size: 0.8em;
	margin: 0px 20px 0px 0px;
}


/* Content style for any tables in glossary entries */
/* Examples are Geophytes, and Hedging entries */
.table-content1 {
	font-size: 1em;	
	text-align: left;	
	position: relative;
	width: 100%;
}
.table-content1 th {
	padding: 10px 10px 10px 10px;
		text-align: center;
}
/* note the td padding needed for hedging stock plants is odd, seems to be something else affecting */
.table-content1 td {
	padding: 20px 10px 10px 10px;	
}
.table-content1 li {
	list-style-type: none;
	text-align: left;
	position: relative;	
	font-size: 0.8em;
}

/* 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: 1em;	
	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 40px 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: 20px 0px 20px 50px;
	margin: 25px 0px 20px 0px;
	font-size: 1.1em;
	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;
	font-size: 0.9em;
}

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


/* 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;
}

/* Workaround style to allow a list title to have a larger visual size when using an <h> tag may not be possible. This style needs replacement with a better option using <h> tag if item is truly a title. */
.list_title {
	font-size:1em;
	font-weight:bold;
	margin: 0px 0px 5px 0px;	
}

/* Style to allow creation of lists without bullets */
.list_sansbullets {
	list-style-type: none;	
}
/* Variation with more spacing between li entries */
.list_sansbullets_withspace li {
	list-style-type: none;	
	margin: 0px 0px 15px 0px;
}
/* Removes default spacing around an h4 tag inside a list */
.list_sansbullets h4 {
	padding: 0px;
	margin: 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. */
.bordered {
	border: 1px #000000 solid;
	padding: 0px 20px 20px 20px;
	margin-top: 28px; /* added to align top with elements in other columns */	
}
/* 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;
}