body { /* set default font for page */
}

.container {
    margin: auto;	/* centers div */
	width: 816px;
	max-width: 100%;
	font-family: Verdana, Geneva, sans-serif;

}

.homepage {	/*homepage design */
	background-color:#505;
	}
	
.nav-buttons {
	background-color:#505;
}	
.nav-button {
	display:inline-block;
	width: 49.6%; 		/* can't use 50 due to use of padding ? */
	color:#03FF03;
	font-family:  Verdana, Geneva, sans-serif;	
}
.nav-button a {
	font-size:12pt;
	color:#03FF03;
	font-family:  Verdana, Geneva, sans-serif;	
}

.nav-button3 {
	display:inline-block;
	width: 32.82%; 		
	color:#03FF03;
	font-family:  Verdana, Geneva, sans-serif;	
}
.nav-button3 a {
	font-size:12pt;
	color:#03FF03;
	font-family:  Verdana, Geneva, sans-serif;	
}
.articlepage {
	background-color:#FFF;	
}	
.article {
	padding-left: 4px;	
	padding-right: 4px;	
	}
.article h2 {
	font-size	: 14pt;
	}
	
.article_date {
	color:#06F;
	float: right;
}	
	
	
.blogpage {	/*blogpage design */
	font-family	: Verdana, Arial, Helvetica, sans-serif;
	font-size	: 12pt;
	background-color:#202;
	}
	
.row {
	width:100%;
	clear:both;	/*stops problems where previous display:inline */
	}

.main {
    /*margin: auto;*/	/* centers div */
	/*max-width: 816px;*/
	/* background: #F8F8FF; */
	}

.home_h1 {
	font-size:64pt;
	color:#FF0F00;
	font-family: 'Nosifer', cursive;
	margin-top: -20px;

	}
.home_h1 a:link {text-decoration:none;}
.home_h1 a:visited {text-decoration:none;}

.home_h3 {
	font-size:32pt;
	color:#03FF03;
	font-family:  Verdana, Geneva, sans-serif;
	margin-top: -20px;
	}

.home_h4 {
	font-size:16pt;
	color:#fff;
	font-family:  Verdana, Geneva, sans-serif;
	}
	
.page_logo a {
	font-size: 20pt;
	color:#FF0F00;
	font-family: 'Nosifer', cursive;
}
.page_logo a:link {text-decoration:none;}
.page_logo a:visited {text-decoration:none;}


form {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.form-div { 
	color:#FAA;
	font-family: Verdana, Geneva, sans-serif;
	}
.form-text {
	background:#CCC;
	font-family:  Verdana, Geneva, sans-serif;
	font-size:12pt;
}
.form-but {
	padding-top: 2px;
	margin-bottom: -6px;
	}
	
	
.padded4 {padding:4px}	
.padded8 {padding:8px}	

.blocked {display: block;
	width:100%;
}

.align-right  {text-align: right;}
.align-left   {text-align: left;}
.align-center {text-align: center;}



h1  	{font-size	: 24pt;
	}
h2  	{font-size	: 18pt;
	}
h5  	{font-size	: 10pt;
	}
h6  	{font-size	: 8pt;
	}
.title	{font-size	: 24pt;
	 color 		: navy;
	}
.hline	{font-size	: 14pt;
	}
.error	{
	 color 		: red;
	 font-weight: bold;
	 font-size	: 14pt;
	}
	
/* -------------------------------------- */	

.title_box {
	max-width: 816px;
	width: 100%;
	background: #B3C7CE;
	}
	.tb_warning {
		background: pink;
		}
	.tb_missing {
		background: yellow;
		}
	.tb_last {
		background: #FF40CD;
		}
.title_blue	{
	font-size: 24pt;
	color: navy;
	padding: 8px;
	}
.title_box_hist {
	max-width: 816px;
	width: 100%;
	background: #B3C7CE;
	padding: 8px 0 8px 0;
	}
.title_blue_hist	{
	font-size: 24pt;
	color: navy;
	padding: 8px;
	zzbackground:#FF6;	/*testing only*/
	display:inline;
	text-align: left;
}
.title_latest_hist { /* for 'Latest Report link on hist pages*/
	background: #B3C7CE; /* needed for certain points in wrapping */
	zzbackground:#9C0;	/*testing only*/
	text-align:right;
	padding: 10px 10px 0 0;
	width: 120px; 		
	float: right;		/* makes it respond to width */
	position: relative; /*only req'd when using float */
	}

/* -------------------------------------- */	

.trailer { /* same as row ??? */
	width: 100%;
	}

.trailer_left{
	width: 50%; 		/* no affect unless using float ???? */
	display:inline;		/* has no affect when using float */
	zbackground:#F88;	/*for testing only*/
	float: left;		/* makes it respond to 25% width but won't wrap*/
	position: relative; /*only req'd when using float */
	text-align: left;
	}
.trailer_right{
	width: 50%; 		/* no affect unless using float ???? */
	display:inline;		/* has no affect when using float */
	zbackground:#8F8;	/*for testing only*/
	float: left;		/* makes it respond to 25% width but won't wrap*/
	position: relative; /*only req'd when using float */
	text-align: right;
	}
.trailer_center{
	width: 100%; 		/* no affect unless using float ???? */
	display:block;		/* has no affect when using float */
	zbackground:#88F;	/*for testing only*/
	}
	
img {
	max-width: 100%;
	height: auto;
}	

.disclaimer_box { /*box around disclaimer div */
	display: block;
	}
.disc { /*disclaimer row */
	padding: 10px 0 0 0; /*top & bottom spacing around buttons row*/
	zzoverflow:hidden; /* keeps div full height when wrapping*/
    margin: auto;	/* centers div */
	max-width: 816px;
	width: 100%;
  	font-size: 8pt;	
	font-style: italic;
	zzbackground-color:#FF6;	/* for testing only */
	}
.disc_L {
	display:inline;
	zheight: 40px;
	float:left;
	zzbackground-color:#F6F;	/* for testing only */
	width: 10%;
	text-align:left;
	} 
.disc_R {
	display:inline;
	float:left;
	zzbackground-color:#6FF;	/* for testing only */
	width: 90%;
	text-align:left;
  	position: relative; 
	padding: 0 0 10px 0; /*top & bottom spacing around buttons row*/
	} 

/* -------------------------------------- */	

	
.bot_button_box { /*box around bot_button div */
	display: block;
	width:100%;
	zzbackground:#A3F;/*purple for testing only */	}

.bot_buttons { /* box around button ul to force block down */
	max-width: 816px;
	width: 100%;
	zdisplay: block;
	zbackground-color: #B3FFCE; /*pale blue bg for testing only*/
	background-color: #B3C7CE;	
	padding: 10px 0 10px 0; /*top & bottom spacing around buttons row*/
	overflow:hidden; 		/* keeps div full height when wrapping*/
	}

.bot_buttons div {
	display:inline;		/* has no affect when using float */
	zbackground:#F88;	/*for testing only*/
	zpadding: 0 10px 0 10px; /*putting padding on top or bottom causes weird wrapping on small screen */
	float: left;		/* makes it respond to 25% width but won't wrap*/
	position: relative; /*only req'd when using float */
	}

.w25 {
	width: 25%; 		/* no affect unless using float ???? */
	}
.w50 {
	width: 50%; 		/* no affect unless using float ???? */
	}
.w33 {
	width: 33.33%; 		/* no affect unless using float ???? */
	}

.w32 {
	width: 32%; 		/* can't use 33.33 due to use of padding ? */
	}

.bot_buttons div a {
	padding: 0 8px 0 8px}

.small {
	font-size	: 8pt;	
	}


@media (max-width: 820px) { /* */
.home_h1 {
	font-size:32pt;
}
.home_h3 {
	font-size:18pt;
}

.nav-button {
	display:block;
	width: 99.5%; 		/* can't use 100 due to use of padding ? */
	zcolor:#03FF03;
	zfont-family:  Verdana, Geneva, sans-serif;	
	text-align:left;
}
.nav-button3 {
	display:block;
	width: 99.5%; 		/* can't use 100 due to use of padding ? */
	zcolor:#03FF03;
	zfont-family:  Verdana, Geneva, sans-serif;	
	text-align:left;
}


.disc_L {width: 100%;} 
.disc_R {width: 100%;} 

.title_latest_hist { /* latest report link */
	float:none;
	display: block;
	width:100%;
	text-align : center;
	padding: 0;	
	}
}

@media (max-width: 480px) { /*force bot buttons onto separate rows */
.zzzbot_buttons div {
	width: 100%;	
	display: block;
	float:none;
	}
.zzzw25 {width: 100%;
	  text-align:center;}
.zzzw50 {width: 100%;
	  text-align:center;}
.zzzw33 {width: 100%;
	  text-align:center;}
}
/* used in hist4ad1-hist4ad3 */
.zzzleft {
	display: inline-block;	
	max-width: 516px;
}
.zzzleft_200 {
	display: inline-block;	
	max-width: 616px;
}
.zzzleft_250 {
	display: inline-block;	
	max-width: 566px;
}

.zzzright {
	float:right;
	width: 300px;
}
.zzzright_250 {
	float:right;
	width: 250px;
}
.zzzright_200 {
	float:right;
	width: 200px;
}

zzztd {
	vertical-align:text-top;
 
}