/* ------------- IF YOU MAKE CHANGES --------------- */
/* ----- comment them with your initials and the date! ------*/

/*import associated stylesheets */
@import url("/_global/css/typestyles.css");  /* styles for fonts, etc. this is linked to CKEditor for pubadmin and WebTool */
@import url("/_global/css/boxes.css"); /* styles for boxes, pullquotes. Linked to CKEditor for WebTool and pubadmin */

@import url("/_global/css/ie.css"); /* hack for IE6 width */
@import url("/_global/css/0navigation02.css");  /* styles for category navigation arch */
@import url("/_global/css/0localize.css");  /* styles for calendar localization */

/* MUX css styles */

* { margin: 0px; padding: 0px;  }
.PrintOnly {display:none;}

@media print {
	.offset {display: none}
	.page-break { display:block; page-break-before:always } 
	.flagscreen { display:none}
	#topnav {display: none;}
  div#subtitle-bc {display: none;}
  div#page {width: 100%;} 
  div#content {width: 100%;}

 .HideInPrint {display:none;}
 .PrintOnly {display:inline;}
}

body {
background-color:#959286;
}

blockquote {margin-left: 30px; margin-right: 30px;}
p sup, blurbsmall sup, td sup { vertical-align: text-top; font-size: 75%; }
p sub, blurbsmall sub, td sub { vertical-align: text-bottom; font-size: 75%; } 

dl {margin-left: 20px; }
dt {font-weight:bold;}
dd {margin-bottom: 14px}

ul { margin-bottom: 14px;}

li { margin-left: 30px; 
padding:0px;
line-height: 1.25;
margin-bottom: 5px;
}

ul li ul {
margin-bottom: 0;
margin-top: 2px;
}

table { margin-bottom: 10px;  }
td, th { padding: 5px; text-align: left;}

/*     MUX divs    */

.spotlight-box { background-color: #E8F0F7;}

img.responsive {max-width:100%; height: auto;}
img.img-responsive {max-width:100%; height: auto;}

div#page {
margin: 0 auto;
min-width: 780px;    
max-width: 950px;
}


div#header {float: left;  width: 100%;   margin: 0px;  padding: 0px; }

img#skip {  left: 202px;  }

/* Hidden skip-to links for accessibility */  /*added 12-5-08 based on Paul Gilzow's code */
.offset a { position:absolute; left:-1000em; padding:2px; font-weight:bold; background-color:#f4a71d; }
.offset a:focus, .offset a:active { position:relative; top:4px; left:4px; z-index:400 !important; }

div#mu {  width: 100%;  height: 10px;  margin: 3px 0px 2px 0px;  padding: 0; }
div#mu p {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 95%;   font-weight: bold;  color: #2b2b2b;
text-align: right;  margin: 0 3px 0px auto;  
padding-bottom: 0;  line-height: 1.2;
}

div#mu a:link { color: #2b2b2b; text-decoration: none; }
div#mu a:visited { color: #2b2b2b; text-decoration: none; }
div#mu a:hover {  color: #2b2b2b; text-decoration: underline;  }

div#flag {
float: left;  width: 100%;   height: 50px; margin: 0;  padding: 0;
}
div#flag a {border: 0;}
div#flag img.centennial {display: none; /* margin: 0; padding: 0; float: left;border:0; */}
div#flag ul {list-style-type: none; text-align: right; padding: 0; margin:0;}

div#flag li {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 95%; color: #000000; line-height: 18px; display: inline;
margin: 0px; padding: 0px; 
}

div#flag a:link { color: #000000; text-decoration: none; }
div#flag a:visited { color: #000000; text-decoration: none; }
div#flag a:hover { color: #000000; text-decoration: underline; }

div#flag img.printlogo { display: none; left: 0px;  }
div#flag img.screenlogo { display:block; left: 0px; }


@media print {
	div#flag img.printlogo { display: block }	
	div#flag img.screenlogo { display: none }
              }


div#flagprint {
 width: 100%;
 position: relative;
 /*float: left;
 clear: right;*/
 display: none;
}



div#topnav {   /* top nav bar contains notab, fourh and degreees */
display: block;
position: relative;
float: left;
width: 100%;
padding: 0; margin: 3px 0 6px 0 ; 
 }

div#topnav div#notab p, div#topnav div#fourh p, div#topnav div#degree p {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 95%; color: #2b2b2b; text-align: center; margin: 0; padding: 0;
}

div#notab a:link { color: #2b2b2b; text-decoration: none;  }
div#notab a:visited { color: #2b2b2b; text-decoration: none; }
div#notab a:hover { color: #2b2b2b; text-decoration: underline; }



div#notab { 
background: url(/_global/images/barhome.gif)  50% 0%;
background-repeat: no-repeat;
float: left; height: 21px;
margin: 0; padding-top: 3px;  width: 66%;
}


div#fourh { 
background: url(/_global/images/bar4h.gif)  50% 0%;
position: relative; float: left; height: 21px;
margin:0; padding-top: 3px; width: 3%;
background-repeat: no-repeat;
}

div#fourh a:link {text-decoration: none; color: #fff; }
div#fourh a:visited {text-decoration: none; color: #fff; }
div#fourh a:hover {text-decoration: underline; color: #fff; }

div#degree a:link {text-decoration: none; color: #2b2b2b; }
div#degree a:visited {text-decoration: none; color: #2b2b2b; }
div#degree a:hover {text-decoration: underline; color: #2b2b2b; }

/* OLD div#fourh a:link, div#degree a:link {text-decoration: none; color: #f2e2c2; }
div#fourh a:visited, div#degree a:visited { color: #f2e2c2; text-decoration: none; }
div#fourh a:hover, div#degree a:hover { color: #f2e2c2; text-decoration: underline; }*/


div#degree {
  background: url(/_global/images/bardegrees.gif)  50% 0%;
  position: relative;
  background-repeat: no-repeat;
  float: left; clear: right; height: 21px;
  margin: 0; padding-top: 3px;
  width: 31%;
}


/* --------  PAGE LAYOUT STYLES -----------  */

div#content {background-color: #ffffff; padding: 0; margin-right: 0;}

div#columnone {
position: relative;
float: left;
padding: 0px 4px 0px 4px;
text-align: left;
margin-left: 1%;
margin-bottom: 10px;
width: 23.5%;
}

div#columnonetwothree {
position: relative;
float: left;
padding-left: 1%;
text-align: left;
width: 70.5%;
}

div#columntwothreefour {
float: left;
margin: 0px 0px 10px 1.5%;
padding: 0;
text-align: left;
width: 72%;
}

div#columntwothree {
background-color: #ffffff;
float: left;
margin: 0 0 10px 1.5%;
text-align: left;
width: 46%;
}

div#columnfour {
float: left; 
padding: 0px;
margin: 0 0 10px 12px  ! important;
text-align: left;
width: 25%;
}


#columnfour select { font-size: 100%;} 

div#columnonetwo {
background-color: #ffffff;
position: relative;
float: left;
clear: right;
padding: 0px;
margin: 0px 0px 0px 20px;
text-align: left;
width: 46.5%;

}

div#columnthreefour {
background-color: #ffffff;
position: relative;
float: left;
clear: right;
margin: 0px 0px 0px 20px;
text-align: left;
width: 46.5%;

}

div#columnall {
/* clear: right; */
padding: 0px 1% 0px 1%; 
text-align: left;
margin-bottom: 0;
}

div#columnall2 {
clear: right;
padding: 0px 0px 0px 1%;
text-align: left;
margin-bottom: 0;
}

.columnall {
clear: all;
padding: 0px 0px 0px 1%;
text-align: left;
margin-bottom: 0;
/* width: 97.5%; */
}


/*  is this used?? (7.19.12 - i don't think so, we could probably delete the "catlink" styles - megan */
div#catlink {
position: relative;
float: left;
clear: right;
padding: 0px;
margin: 0px;
}

div#catlink ul {
list-style-type: none;
text-align: center;
padding: 0px;
}


/* is this used?  */
div#catlink li {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 67%;
font-weight: bold;
display: inline;
position: relative;
float: left;
clear: right;
margin: 0px 10px 0px 0px; 
padding: 0px;
}

div#catlink a:link {
color: #ffffff;
background-color: #844e1c;
text-decoration: none;
display: block;
width: 80px;
height: 16px;
}

div#catlink a:visited {
color: #ffffff;
text-decoration: none;
background-color: #844e1c;
display: block;
width: 80px;
height: 16px;
}

div#catlink a:hover {
color: #000000;
text-decoration: underline;
background-color: #d8c090;
display: block;
width: 80px;
height: 16px;
}





div#footerall {
position: relative;
float: left;
margin: 0px;
padding: 0px 0px 0px 10px;
background-color: #ff0000;

}

div#footer {
position: relative;
margin: 10px 0 0 0;
}

div#footerscreen {
border-top-color: #666666;
/* border-top-color: #844e1c; */
border-top-style: solid;
border-top-width: 1px;
text-align:left;
margin: 10px 10px 0 10px;
padding: 2px 15px 2px 15px;
font-family: Trebuchet MS, arial,sans-serif;
font-size: 100%;

}

p.footerlinks {
text-align:right; 
font-weight: bold;
margin-bottom: 12px;
margin-top: 3px;
font-family: Trebuchet MS, arial,sans-serif;

}

p.footerlinks a:link {
color: #000000;
text-decoration: none;
}

p.footerlinks a:visited {
color: #000000;
text-decoration: none;
}

p.footerlinks a:hover {
color: #000000;
text-decoration: underline;
}
 
	
div#footerprint {
 width: 100%;
 position: relative;
 float: left;
 clear: right;
 display: none;
}


div#CEcalendar {    /* renamed from datatable -- only used for conference watch */
	background: #ffffff;
	width: 99%;
	overflow: auto;
	height: 600px;

    }

/*  Text  */

.slogan {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #ffffff; 
font-size: 145%;
font-weight: bold;
padding: 0px 0px 2px 0px;
margin: 0px 0px 6px 0px;
border-bottom-width: 1px;
border-bottom-color: #2b2b2b; 
border-bottom-style: solid; 
}

.follow {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
background-color: #ffffff; 
font-size: 90%;
font-weight: bold;
padding: 0px 0px 5px 0px;
margin: 0px 0px 6px 0px;
border-bottom-width: 1px;
border-bottom-color: #2b2b2b; 
border-bottom-style: solid; 
}


				
/*     Display     */     
.breadcrumb {
font-size: 85%;
padding: 3px 0px 3px 0px;
margin: 1px 0px 3px 0px;
border-top-width: 1px;
border-top-color: #C0C0C0;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-color: #C0C0C0; 
border-bottom-style: solid; 
text-transform: lowercase;
}

.blurb {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
line-height: 1.2;
}
.blurbbold {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
line-height: 1.25;
font-weight: bold;
}

.blurbnote {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
padding: 1px 0 1px 5px;
border-left: solid 2px #5b5b5b;
margin-left: 0px; 
background-repeat: no-repeat;
background-color: #ffffff;
line-height: 120%;
}

.blurbcontent {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 80%;
font-weight:bold;
padding: 3px;
border-color: #2b2b2b;
border-style: solid;
border-width: 1px;
line-height: 14px;
margin: 3px 3px 3px 0px;
}

.bigblurb {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
padding: 10px;
border: #2b2b2b solid 1px;
background-repeat: no-repeat;
background-color: #FFFFFF;
line-height: 19px;
}

.blurbsmall {
font-size: 90%;
line-height: 1.3;
}

.redtext {
font-family: Arial, Helvetica, sans-serif;
color:#cc0000;
font-size: 100%;
line-height: 1.25;
font-weight: bold;
}


.jump {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
text-align: right;
line-height: 14px;
}

.blackongold {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
border-bottom: 4px solid  #f0b74e;
font-weight: bold;
padding: 3px 0px 3px 3px;
margin-bottom: 12px;
}

.subhead2  {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
font-style: italic;
padding: 3px 0px 0px 3px;
margin-bottom: 3px;

}

p.blackongold span.PIalpha a {  /* this is just used for the horizontal line of letters on the program index */
/* font-size: 80%; */
padding-left: 2px;
}


.pubstatus {
color: #2b2b2b;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
/* background-color: #f2e2c2; 
border-left: 1px solid #d8c090; */
border-bottom: 4px solid  #f0b74e;
/* font-size: 80%; */
font-weight: bold;
padding: 3px 0px 3px 3px;
margin-bottom: 12px;
}

/* search button */
input.gobutton 
{
   font-size:100%;
 line-height: 1; 
   font-family: Trebuchet MS,Arial, sans-serif;
   font-weight:normal;
  /* padding-top: 4px; */
   height:20px;

 /*  color:#2b2b2b; 
   width:30px;
   background-color:#f2e2c2;
   border-style:solid;
   border-color:#844e1e;
   border-width:1px;  */
}


.goldonblack {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
color: #f0b74e;
background-color:#666666;
/* font-size: 80%; */
font-weight: bold;
padding: 3px 0px 3px 6px;
margin-bottom: 12px;


}

.whiteonblack {
color: #2b2b2b;
border-bottom: 4px solid #dad8c7;
font-weight: bold;
padding: 3px 2px 3px 3px;
margin-bottom: 12px;
}

.categoryfeatureblock {
background-color: #E8F0F7; 
padding-bottom: 6px;
width:100%;
overflow: hidden;
margin-top: 8px;
}
	
.categoryfeature {text-align: left;}

.photoartbottomspace {margin-bottom: 3px;}

.photoartfl {
float: left;
margin-right: 12px;
margin-bottom: 12px;
}

.photoartfr {
float: right;
margin-left: 12px;
margin-bottom: 12px;
}


/* ------Pubs search results section  ----------  */

.search-results_breadcrumb {
font-size: 95%;
font-style: italic;
text-transform: lowercase;
}

/* -------------- end of pubs search results styles -- */



/* ---------- This style imitates the expanding menu format -----*/
/*  when there is just a list of links. use this code:  */
/*  
  <div id="left-menu-lines">
  <p>item</p>
  <p>item </p>
  </div>
*/

#left-menu-lines { }
#left-menu-lines p {
    font: 110% Trebuchet MS, arial, sans-serif;
    border-bottom: gray solid 1px;
	margin: 10px 12px 0 10px;
	padding: 0 0 8px 16px;
}
#left-menu-lines p.current a {color: #666666; font-weight: bold;text-decoration: none;}



/* -------------- Resources tab styles --------  */

p.ResourceTitle {
font: 90% Trebuchet MS, Arial, sans-serif;
font-weight: bold;
padding-bottom: 0px;
margin-top:5px;
margin-bottom: 0px;
}

p.ResourceText {
font: 95% Arial, sans-serif;
margin-bottom: 11px;
padding-bottom:0;
}

/*  table background shades for publications  */
.tableshade1 {background-color:#dad8c7;}
.tableshade2 {background-color:#e8f0f7;}
.tableshade3 {background-color: #eeeef0;}

div#datatabletop {
	background-color:#dad8c7;
	width: 99%;
	margin: 0px;
padding: 0px;
    }

div#datatable {
	background: #ffffff;
	width: 99%;
	overflow: auto;
	height: 300px;
	border-top-color:#dad8c7;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color:#dad8c7;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-left-color:#dad8c7;
	border-left-style: solid;
	border-left-width: 1px;
    padding-left: 0px;
margin-bottom: 10px;
}

/* icons for publications */
.pdficon {
border: 0;
margin: 2px 6px 0 0;
float: left;
}

/* MISSOURI MASTER NATURALIST STYLES */

#headertext {
position: relative;
float: right;
color: #000000;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-style: italic;
font-size: 95%;
line-height: 115%;
margin-top: 115px;
}

#mnheaderimage {margin:0px;}

#mnbannertop {
position: static; 
background-color: #e4eae0;
padding: 12px 10px 0 10px;
background-repeat: no-repeat;
height: 150px; 
margin-bottom: 6px;
z-index: -1;
}


table.listtable {
font-size: 90%;
border-collapse: collapse; 
}

table.listtable th, table.listtable td {
	border: 1px solid #D8DCD8;
	padding: 6px 8px;
	vertical-align: top;
	border: 1px solid #CCCCCC;
	border-left:0; border-right: 0; border-top: 0;
}

table.listtable td p {margin-bottom: 6px;}
table.listtable th p {margin-bottom: 0; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 130%;}

img.navarrow {
border:none; border:0px; 
height:9px; width:8px
}
table.listtable th { vertical-align: bottom;}

.video-container {
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px; height: 0; overflow: hidden;
	margin-bottom: 8px;
}

.video-container iframe, .video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.CouncilPhoto {
	width: 100%;
}

p.CouncilPhotoCaption {
	font-style: italic;
}