/*
Main Stuff

  The star selector is used to target every element.  This is
  often used to zero out the margin and padding.  This
  creates some common ground from which to begin.
*/
* {
  	padding: 0;
  	margin:0;
	}

html {
    overflow:scroll;
	min-height: 100%;
	}

/*
  body is used to provide basic page styles meant to be inherited
  by nearly all of the page’s children: font-face, size, alignment,
  etc. Some use the html selector, but I have never done that so
  it’s not listed.
*/
body {
	background-color:#FFF;
	color: #000305;
	font-size: .75em;
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	line-height: 1.429;
	margin: 0;
	padding: 0;
	text-align: left;
	/*background-image:url('images/background1000.png');*/
	background-repeat: repeat-y;
	background-position: center;
	}

/*
  The wrapper div can be used to contain the page itself. It can
  also redefine some characteristics inherited from the body. It
  is high on this page as it’ll contain everything else used.
*/

#wrapper {
	width: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top:-1px;
	}
#wrapper-inside {
	width: auto;
	float: left;
	margin-top:0;
	}

/*
Now to offer some very common elements

  Here are the headings. These may be redefined throughout the
  document as needed, if needed. This is especially true of the h1
  element as it may have special usage as the main page heading,
  and maybe as a link.

h2 {font-size: 1.571em}
h3 {font-size: 1.429em}
h4 {font-size: 1.286em}
h5 {font-size: 1.143em}
h6 {font-size: 1em}
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
	}
*/

h2 {font-size: 1.286em}	/* 22px */
h3 {font-size: 1.143em}	/* 20px */
h4 {font-size: 1em}	/* 18px */
h5 {font-size: .9em}	/* 16px */
h6 {font-size: .8em}	/* 14px */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
	}

body {
	}

h2 {
	color:#FFF;
	background-image:url('../images/text-colorbg.jpg');
	padding: 5px;
	}
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active {
	color:#ffffff;
	text-decoration:none;
	}

/*
  A page without paragraphs would be pretty unusual. Let’s make
  sure the p element is included. This, too, may be redefined
  throughout the document  as needed, if needed.
*/
p {
	margin-bottom: 1.143em;
	}
/* p:last-child {margin-bottom: 0;}

/*
  Most pages will have links. Let’s style them using a anchor
  element. Some will write this as a:link. I don’t — I don’t
  see the need

  Links really should have some interactivity characteristics for
  accessibility and usability reasons. The a:hover pseudo-class is
  offered as is a:focus. Internet Explorer (IE) doesn’t support
  a:focus, but it does use the a:active state so it’s here too.

  Focus/active should be different than hover is some regards, such
  as providing a background color to make it highly visible to
  keyboard users. Thus, certain focal styles may be redefined.
*/

a 	{
	font-weight: bold;
	outline: 0;
	}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #194E84;
	padding: 0 1px;
	text-decoration: underline;
	}
a:hover, a:active {
	color: #000000;
	text-decoration: none;
	text-shadow: 1px 1px 1px #FFF;
	}
a[target="_blank"] {
	display:inline-block;
	line-height: 1.2em;
	background:url('../images/ext_link.png')  center right no-repeat;
	padding-right: 14px;
	}

/*
  In addition to background images, most web pages will offer
  embedded images (img), so I will offer them here. Mostly this
  is used to remove borders and text-decoration
  (if the image is a link).
*/
img, a img {
	}

/*
Less Common Elements

  I’m not going to add the table element as its purpose is quite
  specific and not used very often by the typical CSS developer
  (unless they are offering tabular data). This is also the case
  for dfn (definition), code, pre (preserve [whitespace]),
  kbd (keyboard), ins (insert),  del (delete),
  i (italic [presentational]), and b (bold [presentational]).
  But you will likely want to use those I am offering — though
  you may not style them all.
*/

small {
	}

abbr, acronym { /* Also see .abbr class for a span used by IE */
	}

blockquote {
	margin-left: 20px;
	margin-bottom: 1em;
	}

cite {
	}

em {
	}

strong {
	}

/*
Form Elements

  Offering some form styles, since most sites have a form or two,
  are really quite common. And offering focal styles is quite
  useful to accessibility for those using keyboards. But please
  know that neither the :focus or :active pseudo classes (on
  elements other than anchors) are available to IE user so
  JavaScript will be needed to make it work. Since not everyone
  has JavaScript enabled, it is important that the form’s
  contrast is usable without script support.
  Since submit- and reset-type inputs are affected by
  the text-type input styles, you may want to offer an
  input.button class. The same applies to checkboxes and radio
  buttons.
*/

form {
	}

fieldset {
	}

legend {
	}

label {
	display: block;
	width: 100px;
	float: left;
	margin: 2px 4px 6px 4px;
	text-align: right;
	font-size: 18px;
	}

input {
	}

select {
	}

li 	{
	margin-bottom: 1em;
	}

option {
	}

textarea {
	}

input:focus, select:focus, option:focus, textarea:focus {
	}

table {
	width:100%;
	margin-bottom:1em;
 	border-collapse: separate;
  	border-spacing: 1px;
	}
td {
	padding: 2px;
    margin: 0;
	}
.data {
	font-size:.2em;
}
.data td 	{
	border-color: #FFFFFF;
    border-style: solid;
    background-color:#f5f5f5;
	}
th {
	font-size: 1.5em;
	}

/*
Some typical IDs

  Call them what you like, but these are some really common IDs
  you may use yourself. I try to make the names as informative as
  possible so as to not confuse myself down the road. Using common
  names like this offers insight to any editor later on. Note that
  the wrapper ID is covered above as it needs
  to be high up in the cascade.
*/
#header {
	background-image:url('../images/background-header1000_mobile.jpg');
	background-position: left;
	background-repeat: no-repeat;
	background-color:#E6E6E6;
	height: 86px;
	width: auto;
	padding:0;
	margin:0;
	}
#header img {
	width:300px;
}
#header h1 {
	display: none;
	}
#navigation {
	list-style-type:none;
	font-size: .5em;
	margin:6px 0 0 10px;
	}
#navigation li {
	display:inline;
	margin-right:1em;
	}
#navigation a {
	color:#FFFFFF;
	text-decoration:none;
	}
#navigation a:hover, #navigation a:active {
	text-shadow: 3px 3px 3px #000;
	}
#footer {
	clear: both;
	color: #888888;
	font-size: .8em;
	padding:0 10px;
	margin:0 0 -10px 0;
	border-left:1px solid #6f539b;
	}
#footer p {
	padding:5px 0;
}


/*
Some typical Classes

  Just like the IDs above, I use these on nearly every site I make.
  These should be pretty self-explanatory with exception to offset
  which I’ve filled in. It’s used in lieu of display : none;
  (.hidden class) so as to remove items from view while still
  making them available to other users. If anchors,  you can use
  a:focus/a:active to bring them back in view. Useful for hidden

  skip/jump links, etc.
*/

.bold {
	}

.italic {
	}

.hidden {
	display: none;
}

.offset { /* would be position : abosolute; top : -9000px;
                                 left : -9000px; */
	}

.highlight { /* useful for adding spot colors */
	}

.tiny { /* use small element to make small, but for styled-only
                               small text, this is class. */
    font-size:9px;
	}

.error {
	color: #680000;
	}

.abbr { /* use with a span to style abbr for IE as abbr isn’t
                                supported */
	}
.inactive {
	color: #CCCCCC;
	}
.center {
	text-align: center;
	}
.right {
	float: right;
	}
.left {
	float: left;
	}
.zero {
	margin: 0;
	padding: 0;
	}
.norepeat {
	background-repeat: no-repeat;
	}
.clearleft {
	clear: left;
	}
.clearright {
	clear: right;
	}
.clearboth 	{
	clear: both;
	}
.textWhite {
	color: #FFF;
	}
.window {
	height: 70px;
	background-color: #CCCCCC;
	background-repeat: no-repeat;
	border: 1px solid #CCC;
	}
.subhead h2 {
	background-image:none;
	background-color: #555555;
	color: #ffffff;
	}



form * {margin:0;padding:0;} /* Standard margin and padding reset, normally done on the body */

legend {
	color:#000; /* IE styles legends with blue text by default */
	*margin-left:-7px; /* A hack that only ie reads to position the legend in the same place cross browser */
}
fieldset {
	border:1px solid #dedede; /* Default fieldset borders vary cross browser, so make them the same */
}
fieldset div {
	overflow:hidden; /* Contain the floating elements */
	display:inline-block; /* Give layout in ie to contain float */
}
fieldset div {display:block;} /* Reset element back to block leaving layout in ie */
label {
	 /* Take out of flow so the input starts at the same height */
	 /* Set a width so the inputs line up */
}

.radio {
	position:relative; /* Position so children are relative to this container */
	border:0; /* Remove the border */
}
.radio span {
	position:absolute; /* Take the content of the legend out of flow */
	top:0;left:0; /* and position it to the top left of the fieldset */
	width:5em; /* Same width as labels */
}
.radio ul {
	margin-left:5em; /* Since the legend is out of flow. set margin, so inputs are inline */
	list-style:none; /* Dont want bullets */
}
.radio li {
	position:relative; /* Fix a bug in IE zoom functionality */
	display:inline; /* Display the inputs in a line */
	white-space:nowrap; /* We dont want a label to wrap between the input and label */
}
.radio label, .radio input {
	width:auto; /* Reset the width on the label from the 5em, set earlier */
	float:none; /* Reset the float from left on the label, set earlier */
	vertical-align:middle; /* Align the radio buttons with the inputs */
}
/*these styles were previously internal style sheets for each page, but they have been converted to external stylesheets*/
#about_content {
	padding: 0 .75em;
	float: left;
	border-left:1px solid #6f539b;
}
#about_sidebar {
	width: 100%;
	display: block;
	border-left:1px solid #6f539b;
}
#about_sidebar img {
	width:20%;
	margin:0;
	padding:0 5px 5px 0;
}
#about_sidebar {
	text-align:center;
}
#book_content, #book_sidebar{
	float: left;
	padding: 0 .75em;
	border-left:1px solid #6f539b;
}
#book_sidebar {
	width:95%;
}
#book_content img {
	width:25%;
}
#book_sidebar img {
	width: 65%;
}
#book_sidebar_img {
	text-align:center;
}
#resources_content, #resources_sidebar {
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
#news_content, #news_sidebar {
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
#news_sidebar h5 {
	font-weight: bold;
}
#news_sidebar p {
	margin: 10px 0 20px 20px;
}
.news_blogPost h2 {
	margin: 0 -10px 10px 0;
	padding: 0 0 0 0;
	color: #194E84;
}
.news_blogPost p {
	margin-left: 20px;
}
.news_blogPost {
	margin: 0 0 20px 0;
}
#faqs_content {
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
#faqs_sidebar {
	width: 100%;
	display: block;
	border-left:1px solid #6f539b;
}
#faqs_sidebar img {
	width:20%;
	margin:0;
	padding:0 5px 5px 0;
}
#faqs_sidebar {
	text-align:center;
}
#faqs_content li {
	margin: 0;
}
#faqs_content ul {
	list-style-type: decimal;
	margin:0 0 10px 45px;
}
#contact_content{
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
#contact_sidebar {
	display:none;
}
#author_content {
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
#resolve_content{
	padding: 0 .75em;
	float: left;
	border-left:1px solid #6f539b;
}
#resolve_taxon_table td {
	padding:0 0 .5em 0;
}
.resolve_taxon {
	width:95%;
}
/*moved from internal css on index page*/
.panel {
	padding: 5px;
	margin: 5px;
}
.panel ul {
	padding-left: 20px;
	list-style-type: none;
}
.block {
    display:block;
}
.searchBox th {
   	background-color: #E5E5E5;
 }
.input {
	border: 1px solid #AAA;
	font-size: 18px;
	width: 170px;
}
.w250 {
	width: 100%;
}
.index_fieldset {
	border: 1px dotted #AAA;
	padding: 10px;
}
br {
	clear: left;
}
.index_h3 {
	background-color: #555;
	color: #fff;
	margin-bottom: 5px;
}
#results {
	float: right;
	}
.panes {
	padding: 0 .75em;
	border-left:1px solid #6f539b;
}
.caution_mobile {
	padding:10px 0 20px 0;
}
#result {
	width: auto;
	margin: 0 0 0 0px;
}
.species {
	width: auto;
	padding: 15px 5px 15px 5px;
	background-color: #FFF;
	margin: 5px 0 10px 0;
	border: 1px solid #9C8AA5;
}
.tableSubInfo td {
	font-size: 14px;
	font-weight: bold;
}
.tableSubHead td {
	background-color: #9C8AA5;
	color: #FFF;
	font-weight: bold;
}
.tableCellOdd td {
	background-color: #F0F0F0;
}
.tableCell td {
	background-color: #E5E5E5;
}
.year {
	background-color: #443266;
	color: #fff;
}
.textRight {
   	text-align: right;
}
.textLeft {
   	text-align: left;
}
/* root element for tabs  */
ul.tabs {
	/*list-style:none;
	margin:0 !important;
	padding:0;
	height:20px;*/
}
/* single tab */
ul.tabs li {
	/*float:left;
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important;*/
}
/* link inside the tab. uses a background image */
ul.tabs a {
	/*background: url(../images/global/tabs.png) no-repeat -553px 0;
	font-size:0.50em;
	display:block;
	height: 20px;
	line-height:20px;
	width: 134px;
	text-align:center;
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;
	position:relative;
	top:1px;*/
}
ul.tabs a:active {
	/*outline:none;	*/
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	/*background-position: -553px -31px;
	color:#fff;*/
}
/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	/*background-position: -553px -62px;
	cursor:default !important;
	color:#000 !important;*/
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
/*ul.tabs a.s 			{ background-position: -553px 0px; width:81px; }
ul.tabs a.s:hover 		{ background-position: -553px -31px; text-shadow: 1px 1px 1px #000; }
ul.tabs a.s.current 	{ background-position: -553px -62px; text-shadow: 1px 1px 1px #fff; }
/* width 2 */
/*ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 		{ background-position: -248px -31px; }
ul.tabs a.l.current 	{ background-position: -248px -62px; }*/
/* width 3 */
/*ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 		{ background-position: 0 -31px; }
ul.tabs a.xl.current	{ background-position: 0 -62px; }*/*/
/* initially all panes are hidden */
.panes .pane {
	/*display:none;*/
	}
/* tab pane styling */
.panes div {
	/*display:none;
	padding:15px 10px;
	border-top:1px solid #999;*/
}
/*author result*/
#ar_table {
	font-family:arial, sans-serif;
}
#ar_table th {
	font-size:.5em;
}
#ar_table td {
	font-size:.2em;
}
#ar_table img {
	width:40px;
}
.mockTH
{
  border: 1px solid black;
	float: left;
	width: 20%;
	background-color: #443266;
	color: white;
	text-align: center;
	text-transform: inherit;
}
.mockTHSource
{
  border: 1px solid black;
	float: left;
	width: 20%;
	background-color: #443266;
	color: white;
	text-align: center;
	text-transform: inherit;
}

.mockTHTaxa
{
  border: 1px solid black;
	float: left;
	width: 59%;
	background-color: #443266;
	color: white;
	text-align: center;
	text-transform: inherit;
}
.mockTDTaxa
{
  border: 1px solid #FFFFFF;
  background-color: #F0F0F0;
	float: left;
	width: 59%;
}
.mockTD
{
  border: 1px solid #FFFFFF;
  background-color: #EEDDEE;
	float: left;
	width: 20%;
}
.mockTDSource
{
  border: 1px solid #FFFFFF;
  background-color: #F0F0F0;
	float: left;
	width: 20%;
}
.collabsible {
	font-family:arial, sans-serif;
	font-size:76%;
}
.collapsible tr
{
	border-top: 1px solid black;
}
.collapsible td {
	text-align: center;
}
.collapsible th {
	text-align: center;
}
.yearInfo td {
	font-size: 14px;
	font-weight: bold;
}
.tableSubHead td {
	background-color: #443266;
	background-image:url('../images/text-colorbg.jpg');
	color: #FFF;
	font-weight: bold;
}
.tableCellOdd td {
  background-color: #F0F0F0;
}
.tableCell td {
  background-color: #E5E5E5;
}
.nodisplay_mobile {
	display:none;
}
#links {
	text-align:center;
	border-left:1px solid #6f539b;
}
#links img {
	width:17%;
}
.youtube {
	text-align:center;
}
.youtube img {
	width:100px;
}
#sideinfo {
	padding: 0 .75em;
	float:left;
	border-left:1px solid #6f539b;
}
.poster_mobile img {
	float:right;
}
#refelist_content {
	padding: 0 .75em;
	float: left;
	border-left:1px solid #6f539b;
}
.howitworks {
padding:0;
margin:0;
}
.howitworks img {
	float:right;
	height:25%;
	max-height:100px;
	padding:0 5% 0 0;
}
.panel_hiw {
	padding: 10px;
	margin: 5px;
}
.panel_hiw ul {
	padding-left: 20px;
	list-style-type: none;
}
.panel_ttsearch {
	margin:-10px 10px 10px 10px;
}
/*timetree app styles*/
.timetreeapp {
	background-color: white;
	display: block;
	font-family: Verdana;
	font-size: 1.0em;
	height: 480px;
	width:100%;
	position: relative;

	/*border: 1px solid #9C8AA5;
	border-radius: 10px 10px;
	margin: 0px;
	padding: 10px 0px;*/
}

.timetreeapp .timetreeapp-info {
	background: url('./timetree.png') no-repeat 0px 0px;
	display: block;
	float: left;
	height: 480px;
	text-align: center;
	max-width: 55%;
	width: 100%;
	position:absolute;
	margin:0 0 0 125px;

}

.timetreeapp .timetreeapp-info .headercontainer {
	padding: 20px 0px;
	display: block;

}

.timetreeapp .timetreeapp-info h1 {
	background: #BBB;
	display: block;
	font-weight: normal;
	font-size: 20px;
	margin: 0px;

}

.timetreeapp .timetreeapp-sidebar {
	background: white;
	display: block;
	float:left;
	height: 480px;
	position: relative;
}

.timetreeapp .hoverLink {
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: transparent;

	z-index: 1000;
	zoom: 1;
}