/* 
==================================================
BEAN'S TREES AND SHRUBS STYLES
Base styles from Pure framework http://purecss.io/
Slider from http://bxslider.com/
Uses http://css3pie.com/ for IE<=8

Red/orange: #F25814 (lighter #E65613, darker #FF6015)
Green: #316A0B
Light green: #D6E0CF
Main text grey: #303030
Mid grey: #808080
Light grey: #E6E6E6
http://www.w3schools.com/tags/ref_colorpicker.asp

Media queries set in pure.css (or pure-min.css), and below for hiding items.
Currently using defaults - see http://purecss.io/start/.
Site, full width 980px, is mainly interested in (px dimensions for 16px em):
    sm, min-width 35.5em (568px), iPhone 5 landscape (2:1 for retina))
    md, min-width 48em (768px), iPad portrait

Site grid:
* Site is 980px wide. 
* White margins of 10px each side give a principal content width of 960px.
* Home page slider images are 960 x 400 px (2.4:1, common for widescreen cinema).

==================================================
*/

/* ===== ALL (OR MOST) ===== */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* See http://purecss.io/grids/#using-grids-with-custom-fonts */
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    font-family: 'Source Sans Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

html {
    overflow-y: scroll;
    /*height: 101%;*/
}

body {
 	margin: 0;
    /*line-height: 1.7em;*/
	color: #303030;
}

/* PRINCIPAL TEXT STYLES */

h1 {
	margin: 15px 0 5px 0;
	font-size: 34px;
	font-weight: 200;
}

h2 {
	margin-bottom: 15px;
	font-size: 22px;
	font-weight: 300;
}

h3 {
	color: #F25814;
	font-weight: 600;
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 0;
}
.bodyText h3 {
	margin-bottom: 1em;
}

p {
	margin-top: 0;
	padding-right: 10px;
	font-weight: 400;
}

ul {
	font-weight: 400;
}

/* Links */
a:link {color:#316A0B; text-decoration:none;}
a:visited {color:#316A0B; text-decoration:none;}
a:hover {color:#F25814; text-decoration:none;}
a:active {color:#F25814; text-decoration:none;}

/* Captions */
.caption {
	font-size: 0.8em;
}

/* POSITION MAIN CONTENT AREAS */

.headerContent, .menuItems, .mainContent, .homepageSlider, .footer {
	max-width: 960px;
	margin: 0 auto;
	/*padding: 0 10px 0 10px;*/
}

.mainContent {
	min-height: 300px;
	padding: 0 10px 0 10px;
}

/* BUTTONS */

body .pure-button {
	border-radius: 4px;
}

body .primary-button {
    background: #F25814;
    color: #fff;
}

a.primary-button:hover {
	text-decoration: none;
}

.button-xsmall {
	font-size: 70%;
}

.button-small {
	font-size: 85%;
}

.adv-search-button {
	margin-left: 20px;
	padding-top: 9px;
	padding-bottom: 9px;
}

#quickSearchSubmit {
	height: 27px;
}

/* ===== DIALOGS ===== */

i.fa-question-circle {
	vertical-align: 15%;
	padding-left: 0.25em;
	color: #F25814;
}
h3 i.fa-question-circle {
	font-size: 0.7em;
}

#modal-content {
	display: none;
}

/* ===== HEADER ===== */

.header {
	border-bottom: 15px solid #f25814;
	margin-bottom: 15px;
	background: white; /*Needed for PIE*/
	box-shadow: 0px 4px 4px #808080;
	behavior: url(pie/PIE.htc);
}

.masthead {
	padding-top: 10px;
}

.masthead img {
	margin: 0 auto;
	padding: 0 10px;	
}
@media screen and (min-width: 48em) {
	.masthead img {
		margin: 0;
		padding 10px 0;
	}
}

/* To position header elements adequately in IE8 */
.restOfHeader {
	margin-top: 35px;
}
@media screen and (min-width: 1em) {
	.restOfHeader {
		margin-top: 0;
	}
}
/* And to bump things in from the edge just around 960px */
@media screen and (min-width: 48em) {
	.restOfHeader {
		padding-right: 1em;
	}
}
@media screen and (min-width: 980px) {
	.restOfHeader {
		padding-right: 0em;
	}
}

/* IDS LOGO IN HEADER */

.idsHeader {
	margin: 0 auto;
	max-width: 210px;
	height: 30px;
	padding: 0;
	height:30px;
	font-weight: 300;
	font-size: 0.9em;
	white-space: nowrap;
}
@media screen and (min-width: 35.5em) {
	.idsHeader {
		max-width: 240px;
	}
}
@media screen and (min-width: 48em) {
	.idsHeader {
		margin: 0;
		padding-top: 5px;
		text-align: right;
		max-width: 320px;
	}
}

/* QUICK SEARCH */

.quickSearch {
	display: none;
	margin: 0 auto;
	width: 320px;
	text-align: center;
	padding: 0;
}
@media screen and (min-width: 35.5em) {
	.quickSearch {
		display: block;
	}
}
@media screen and (min-width: 48em) {
	.quickSearch {
		margin: 0;
		text-align: right;
	}
}

#quickSearchInput {
	width: 200px;
	font-size: 14px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-right: 10px;
	background: #D6E0CF;
	box-shadow: 0px 1px 2px #BBB inset;
}

#quickSearchInput:focus {
	outline: 0;
	border: 1px solid #316A0B;
}

.quickSearch form a {
	color: #316A0B;
}

#quickSearchSubmit {
	width:100px;
	height: 28px;
	position: relative;
	top: -1px;
}

/* MENU */

.siteMenu {
	margin: 0 auto 10px auto;
	width: 320px;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.9em;
}
@media screen and (min-width: 35.5em) {
	.siteMenu {
		width:340px; /*Wider to deal with possible Firefox or font-version bug */
	}
}
@media screen and (min-width: 48em) {
	.siteMenu {
		text-align: right;
		font-size: 1em;
	}
}

.siteMenu a {
	color: #303030;
	text-decoration: none;
}
.siteMenu ul {
  text-align: left;
  display: inline;
  padding: 0;
  list-style: none;
}

.siteMenu ul li {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
@media screen and (min-width: 48em) {
	.siteMenu ul li {
		padding-left: 32px;
		padding-right: 0;
	}
	.siteMenu ul li:first-child {
		padding-left: 0;
	}
}
.siteMenu ul li .current {
	color: #f25814;
}
.siteMenu ul li a:hover {
  color: #f25814;
}

/*Dropdown Menu*/

.siteMenu ul li ul {
	padding: 0;
	margin-top: 20px;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 11em; 
	display: none;
	opacity: 0;
	visibility: hidden;
	box-shadow: 5px 4px 5px #808080;
	behavior: url(pie/PIE.htc);
	z-index: 500; /*Also necessary is -500 on slider*/
}
@media screen and (min-width: 35.5em) {
	.siteMenu ul li ul {
		width: 9em;
	}
}

.siteMenu ul li ul li { 
	background: #D6E0CF;
	display: block; 
	text-align: right;
	padding: 15px 20px 15px 0;
}

.siteMenu ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* SIDE MENU ON INFO PAGES */

.sideMenu {
	display: none;
}
@media screen and (min-width: 48em) {
	.sideMenu {
		display: block;
	}
}
.sideMenu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.sideMenu li {
	padding-top: 0.5em;
}

/* ===== FOOTER ===== */

.footerBar {
	background:  #316A0B;
	min-height: 100px;
	text-align: center;
	padding-top: 10px;
	margin-top: 20px;
	font-weight: 300;
	font-size: 13px;
	color: white;
	box-shadow: 0px 500px 0px 500px #316A0B;
	behavior: url(pie/PIE.htc);
}

.footer {
	background-image: url("../images/footer-background.png");
    background-repeat: no-repeat;
    min-height: 110px;
}

.footerBar p {
	font-weight: 300;
	font-size: 13px;
	color: white;
}

.footerBar a:link {color:#D6E0CF; text-decoration:none;}
.footerBar a:visited {color:#E6E6E6; text-decoration:none;}
.footerBar a:hover {color:#E6E6E6; text-decoration:none;}
.footerBar a:active {color:#E6E6E6; text-decoration:none;}


/* ===== HEADER BAR ===== */

.headerBar {
	background:  #316A0B;
	/*min-height: 35px;*/
	line-height: 15px;
	text-align: center;
	padding: 10px 5px 0 10px;
	margin-top: 0;
	font-weight: 300;
	font-size: 13px;
	color: white;
}

.headerBar a:link {color:#D6E0CF; text-decoration:none;}
.headerBar a:visited {color:#E6E6E6; text-decoration:none;}
.headerBar a:hover {color:#E6E6E6; text-decoration:none;}
.headerBar a:active {color:#E6E6E6; text-decoration:none;}

/* HOME PAGE */

.sliderIndex {
	position:absolute;
	z-index: -500;
}

.homepageSlider ul {
	margin: 0;
	padding: 0;
}

.homeContentItem {
	padding-right: 10px;
}

.strapline1 {
	text-align: center;
}

.strapline2 {
	text-align: center;
}

/* ===== BROWSE ===== */

/* There's more in the accordion section further down */

.browseSelector {
	font-size: 1.5em;
	margin-bottom: 0.75em;
	margin-top: 0;
}

.browseSelector div {
	text-align: center;
}

.browseLetter {
	/*outline: 1px solid blue;*/
}

.browseLetter:last-child {
	padding-left: 0em;
	letter-spacing: -5px;
	overflow-x: hidden;
}
@media screen and (min-width: 361px) {
	.browseLetter:last-child {
		letter-spacing: -3px;
	}
}
@media screen and (min-width: 35.5em) {
	.browseLetter:last-child {
		letter-spacing: -2px;
	}
}
@media screen and (min-width: 48em) {
	.browseLetter:last-child {
		padding-left: -1em;
	}
}

.browseSelector a:hover, .browseSelector a:active {
	text-decoration: none;
	font-weight: 900;
	/*color: #316A0B;*/
}

/* ===== ADVANCED SEARCH ===== */

.searchArea  {
	padding-right: 2em;
}

.searchNotes {
	padding-right: 2em;
}
.searchNotes p {
	color: #808080;
	font-weight: 300;
}

.searchNotes b {
	font-weight: 500;
}

#article_name:focus, #search_type:focus, #article_text:focus {
	border: 1px solid #316A0B;
}

/* ===== INFO PAGES ===== */

.sideAboutMenu  {
	padding-right: 3em;
}

/* ===== ARTICLES ===== */

.articleText {
	line-height: 1.4em;
	padding-right: 1em;
	margin-bottom: 2em;
}
.articleText p {
	/*margin-bottom: -0.5em;*/
}
.articleText p:first-child {
	margin-top:1em;
}
.articleText p b {
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: small-caps !important;
}

.infoPanelLeft {
	padding-right: 1em;
}

.infoPanelRight {
	padding-left: 1em;
}

.speciesList {
	list-style: none;
	margin: 0;
	padding-left: 1em;
	text-indent: -1em;
}
.speciesList li {
	line-height: 1.4em;
	padding-bottom: 0.25em;
}

hr {
	border: 0;
	height: 1px;
}
hr.articleRule {
	color: #D6E0CF;
	background-color: #D6E0CF;
}
hr.panelRule {
	color: #F25814;
	background-color: #F25814;
	width: 90%;
	text-align: left;
	margin: 2em auto 0 0;
}

/* Fractions */
.articleText p .fnum {
 	font-size: 0.75em;
 	vertical-align: 0.3em;
 	padding-right: 0.2em;
 	padding-left: 0.2em;
 }
 .articleText p .fden {
 	font-size: 0.75em;
	padding-left: 0.2em;
 }

/* ===== TABLE ACCORDION ===== */

#accordion,
#accordion table,
#accordion thead,
#accordion tbody,
#accordion tr,
#accordion th,
#accordion td,
#accordion a {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
	text-align: left;
	line-height: 1em;
	font-size: 1em;
	position: relative;
	border-collapse: collapse;
	/*table-layout: fixed;*/
}
#accordion table {
	width: 100%;
	border-bottom: 6px solid #D6E0CF;
}

#accordion .level1 td a.genus {
	font-weight: 600;
}
#accordion .level1 td:nth-child(2) {
	font-weight: 500;
}
#accordion .level2 td:nth-child(2) {
	font-weight: 300;
}

#accordion a:link {
	text-decoration: none;
}
#accordion td, #accordion th {
	padding-right: 0.5em;
}

/* Initially hidden */

#accordion tbody.level2 {
	display: none;
}

/* Head */

#accordion thead {
	background-color: #D6E0CF;
}
#accordion th {
	font-weight: 500;
	padding: 0.5em 1em 0.5em 0;
}
#accordion th:first-child {
	padding-left: 1em;
}

/* Columns */

/* Non-media style avoids display in IE8 */
#modernNameNotice {
	display: none;
}
@media screen and (min-width: 1px) {
	#modernNameNotice {
		display: block;
		font-size: 0.8em;
		font-style: italic;
		text-align: center;
	}
}
@media screen and (min-width: 361px) {
	#modernNameNotice {
		display: none;
	}
}

#accordion td {
	overflow: hidden;	
}

#accordion th:first-child, #accordion td:first-child {
	width: 60%;
}
@media screen and (min-width: 361px) {
	#accordion th:first-child, #accordion td:first-child {
		width: 40%;
	}
}

#accordion th:last-child, #accordion td:last-child {
	display: none;
	width: 40%;
}
@media screen and (min-width: 361px) {
	#accordion th:last-child, #accordion td:last-child {
		display: table-cell;
	}
}

/* Rows and cells */

#accordion tbody.level1 tr {
	border-top: 2px solid #D6E0CF;
}
#accordion td {
	padding: 0.5em 0;
}
#accordion tbody.level2 tr {
	padding-left: 1em;
	border-top: 1px solid #D6E0CF;
}
#accordion tbody.level2 tr td:first-child {
	padding-left: 4em;
}
/* Open/close icon */
#accordion tbody a > i.fa {
	font-size: 1.1em;
	padding: 0.2em 0.7em 0.2em 1em;
}
#accordion tbody.level1 td:first-child {
	white-space: nowrap;
}

/* =============== MEDIA QUERIES =============== */
/* 
Possibly essential that sizes here correspond to those in pure.css etc.
@media screen and (min-width: 35.5em)
@media screen and (min-width: 48em)
@media screen and (min-width: 64em)
@media screen and (min-width: 80em)

Consider also https://gist.github.com/dennisfrank/4594822 
*/

.infoPanelRight {
	border-top: 1px solid #D6E0CF;
}
.mediaQueryTest {
	color: red;
}

@media screen and (min-width: 35.5em) {
	.mediaQueryTest {
		color: orange;
	}
}
@media screen and (min-width: 48em) {
	.masthead {
		margin-left: 0;
		margin-right: 0;
		min-height: 105px;
	}
	.idsHeader, .quickSearch, .siteMenu {
		float: right;
		margin-left: 0;
		margin-right: 0;
	}
	.infoPanelRight {
		border-top: none;
	}
	.mediaQueryTest {
		color: yellow;
	}
}
@media screen and (min-width: 64em) {
	.mediaQueryTest {
		color: green;
	}
}
@media screen and (min-width: 80em) {
	.mediaQueryTest {
		color: blue;
	}
}