/*
Style Sheet used with Opinion Library
17 June 2013 - T.A. Githens
07 April 2014 - T.A. Githens - revised to prevent menu from chopping when lines wrapped

This stylesheet uses relative Font sizes.  Below is a list:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]

	Colors:
		#800000 - red
		#ece9ca - beige/brown
		#e0edf3 - light blue
		#ccd3da - navigator blue (grey blue)
		#003470 - dark blue
		#002147 - dark blue in header

		#F8F7EF  - background white ish
*/


body {
    font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size:  small;
	background: #e0edf3;
    margin: 0; padding: 0; 
}

Input {
    font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size:  x-small;
    font-weight:  bold;
}
select {font-size:  0.8em; font-weight:  bold;}
select[name^="Year"] { width:  5.5em; } 

a { color: mediumblue; text-decoration: underline; } 
a:visited { color: mediumblue; text-decoration: underline; } 
a:hover { color: blue; text-decoration: none; } 

a { color: #003470; text-decoration: underline; } 
a:visited { color: #003470; text-decoration: underline; } 
a:hover { color: #003470; text-decoration: none; } 


.myThemeColor {
	color: black;
}
.myThemeColorBackground {
	background-color: #003470;
}
.myInvisible {
	visibility:  hidden;
}

.myFont0 {
    font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size:  medium;
    font-size:  small;
}
.myFont1 {
    font-family : "Times New Roman", Times, Verdana, Arial, Helvetica, sans-serif;
    font-size:  medium;
}
.myFont2 {
    font-family : Arial, Verdana, Helvetica, sans-serif;
    font-size:  medium;
}
.myFontExtraSmall {
    font-size:  xx-small;
}
.myEmphasis {
	font-weight:  bold;
}
.myHeader {
	/*  Absolute Fonts are used  */
	font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size:  10pt;
	font-weight:  bold;
}
.myHeaderSmall {
	/*  Absolute Fonts are used  */
	font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size:  8pt;
	font-style:  italic;
}
.myDemphasize {
	font-size:  80%;
	font-style:  italic;
}
.myFontNavigator {
	/*  Absolute Fonts are used  */
	font-family : Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size:  9pt;
}

/* This is the month navigator  */
.horizNavWrapper {
	float:  left;
	clear:  left;
	text-align:  center;
	width:  100%;
}
.horizNav {
	font-size:  80%;
	font-weight:  normal;
}

.horizNavH{
	font-size:  80%;
	font-weight:  bold;
}

#navigator ul {width:  100%; list-style: none; margin: 0; padding: 0; }
#navigator li.spacer {height: 1em;}
#navigator a#pull {  display: none; }   

.myRowHeader {float:  left;	text-align:  center; width:  100%; margin:  5px 0 10px 0;}
#ViewBody {	visibility:  visible; }
#NoDocumentsFoundParent {display:  none;visibility:hidden;}
#NoDocumentsFound {display:  none;visibility:hidden; text-align: center;}

.PrevNextWrapper {width:  100%;}
.PrevNextDescr {float:  left;width:  50%;}
.PrevNextSpacer {float:  right;	width:  3%;}
.PrevNext {	float:  right;cursor: pointer;font-weight: bold;font-size: 80%;color: blue;	text-decoration: underline;}
.PrevNextDisabled {float: right;font-weight: bold;font-size: 80%;color: gray;}

*.status0 {
	/*   standard PDF document   */
	padding:  10px 21px 10px 1px;
	background:  url("pdficon_small.gif") no-repeat center right;
}
*.status1 {
	/*   Word Document   */
	padding:  10px 21px 10px 1px;
	background:  url("docicon_small.png") no-repeat center right;
}
*.status2 {
	/* Generic Text or RTF   */
	padding:  10px 21px 10px 1px;
	background:  url("16rtf.gif") no-repeat center right;
}





/* ***********************************************************************
Here is the responsive stuff and general formatting
************************************************************************  */
.box-header {
	width: 734px;
	padding: 10px 0px 0 0;
	margin: 0px auto;
	height: 40px;
	border-bottom: 2px solid #eee;
	background: url(bg_header_stars.jpg) #002147 top center no-repeat;
	color: #F8F7EF;
}
.box-header a, .box-header a:visited, .box-header a:hover{color: #F8F7EF; }

.box-middle {
	width: 734px; /* subtract padding of two containing elements  */
	padding: 5px 0 5px 0;
	margin: 0px auto;
	min-height: 400px;
	background: white;
}
.box-middle:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.box-footer {
	width: 100%;
	clear: both;
	color: #808080;
	background: #FFF;
	font-size: 0.8em;
	text-align: center;
	padding: 9px 0 9px 0;
	margin: 0px auto 10px;
	border: 1px solid #ccc;
}

/* The Columns of our design, but only in the Header section!  */
.box-header .column-one {
	position:  relative;
	float:  left;
	width:  65%;
	padding:  0px 0 0 10px;
}
.box-header .column-two {
	position:  relative;
	float:  right;
	width: 33%;
}
.box-header .column-one .item1of1{
	width:  100%;
	float: left;
	clear: left;
}


/* The Two Columns of our design */
.box-middle .column-one {
	width: 140px;
	float: left;
	padding: 5px;
	margin: 0;
	border-right: 2px solid #eee;
}
.box-middle .column-two {
	width: 552px; /* 734 - 160 - 2px - 5px - 5px - 15 - 15 = Account for margins + border values */
	float: left;
	padding: 5px 10px;
	margin: 0px 5px 5px 5px;
}


/*  The View Area.  This fits inside another column  */
.row-entry    {
	float: left;
	width: 100%;
	padding:  0 0 10px 0;
	margin:  0 0 10px 0;
}
.row-entry .column-one {
	width: 110px;
	float: left; clear:  left;
	padding: 0; margin: 0;
	border-right: 0;
}
.row-entry .column-two {
	width: 410px;
	float: left; 
	padding: 0; margin: 0;
}
.row-entry .column-one .item1of1 {
	width: 100%;
	float: left;
	padding: 0; margin: 0;
	text-align: left;
}
.row-entry .column-two .item1of1 {
	width: 100%;
	float: left;
	padding: 0; margin: 0;
	text-align: left;
}
.row-entry .column-two .item1of2 {
	width: 48%;
	float: left; 
	padding: 0; margin: 0;
	text-align: left;
}
/* for 733px or less */
/* This is the width set above for the main containing elements.  The design would start to scroll here. */
@media screen and (max-width: 733px) {
	.box-header {width: 100%;  }
	.box-middle {width: 100%;  }
	.box-footer {width: 100%;  }
	
	.box-header .column-one {width:  50%;}
	.box-header .column-two {width:  45%; }
	
	/* leave column-one as a pixel spec  */
	.box-middle .column-two {width: 65%;  }
}

/* for 640px or less */
@media screen and (max-width: 640px) {
	.box-header {width: auto; float: none; }
	.box-middle {width: auto; float: none; }
	.box-footer {width: auto; float: none; }
	
	/*
	.box-header {height: 70px;}
	.box-header .column-one {width:  55%;}
	.box-header .column-two {width:  43%;}
	*/
	
	.box-header .column-one {width:  50%;}
	.box-header .column-two {width:  45%;}
	
	.box-middle .column-one {width: auto; float: none;  border: 0; padding: 0 5px 0 5px; }
	.box-middle .column-two {width: auto; float: none; }
	
	.PrevNextWrapper {width:  95%;}
	.row-entry    {	border-bottom:  2px solid gainsboro;}
	
	/* Convert Menu to Slider  */
	#navigator {height: auto; width: 100%; } /* must account for padding in containing element  */
	#navigator ul { width: 100%; display: block; height: auto; font-size:  1.0em; }
	#navigator li {width:  33.333%; float: left; position: relative; }
	#navigator li {width:  49.9%; float: left; position: relative; }
	
	#navigator li.spacer {display: none;} /* hide the vertical spacers */
	/*  #navigator li:first-child {width:  100%; float: left; text-align: center;}  */
	#navigator li:last-child {margin-bottom: 15px;}
	#navigator li a { /* change border model to allow a right border  */
		box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; 
		border-bottom: 1px solid #576979; 
		border-right: 1px solid #576979; 
	}
	#navigator a {width:  100%; display: block; float: none;
		/*  padding: 10px 25px 10px 25px;  */
		padding: 0;
		height:  auto;
		line-height:  2.9em;
		text-align: left;
		text-indent: 25px;  
		background-color: whitesmoke;
	}
	
	/* Menu pulldown */
	#navigator ul {display: none; height: auto; font-size:  1.0em;	}
	#navigator a#pull {  
        	display: block;  
        	color: white;
	        background-color: #283744;  
	        width: 100%; 
	        position: relative;  
	} 
	#navigator a#pull:after {  
        	content:"";  
	        background: url('nav-icon.png') no-repeat;  
	        width: 30px;  
	        height: 30px;  
	        display: inline-block;  
	        position: absolute;  
	        right: 15px;  
	        top: 7px;  
	}  
	
} /*  end of @media for 640px

/* for 520px or less - this is an arbitrary break point for this design.  It starts looking weird at this point
unless the header was moved into one column */
@media screen and (max-width: 520px) {

	.box-header {height: 80px;}
	.box-header .column-one {width: auto; float: none; padding: 0 2%;}
	.box-header .column-two {width: auto; float: none; padding: 0 2%;}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	
	/* Adjust Menu width to full screen  */
	#navigator li {width:  100%;  }
}

/* for 320px or less */
@media screen and (max-width: 320px) {
	/ no further adjustments at this size */
}