@charset "utf-8";
/* Updated for responsive web pages  5/12/17 - 3/21/18 (removed Google ad code)
 6/24/18 - changed body font from 90% to 95% and #right_col ul font-size from 90 to 93%; 7/25/18 font to 100%*/
/* BLUE */

/* SMALL MOBILE LAYOUT: 240px and below */
	/*Set HEADER IMAGE to 280px for small devices*/
	#header_left img {width:240px;height:auto;}
	/* Reduce other image sizes to fit page */
	img {width:80%;}
	/*DISPLAY Topics link*/
	#header_menu {display:block;}
	/*TAB MENU listed in a line*/
	#tab_menu li {display: inline;margin-right:20px;}
	/*Breakpoint ONE COLUMN display*/
	/* #main_col {width: 235px;float:left;padding-left:2%;padding-right:1%;} */
	/* Headings smaller in mobile */
	h1, h2, h3, h4, h5 {color:#0000CC;}
	
	h1 {text-align:center;font-size:135%;margin-top:auto;	}
	h2 {font-size:120%;	}
	h3 {font-style:italic; font-size:110%;}
	h4 {font-size:105%;}
	h5 {font-style:italic; font-size:100%;}
	p {font-size:100%;text-wrap:normal;}
	
	/*#right_col {padding-left:1%;clear: both;margin-left: 0;} */
	
	@media only screen and (max-width: 480px) {
	/*SET HEADER MAGE to 350px*/
	#header_left img {width:200px;height:auto;}}

/* MOBILE LAYOUT: 480 to 669 */
@media only screen and (min-width: 480px) {
	/*SET HEADER IMAGE to 350px*/
	#header_left img {width:350px;height:auto;}
	#main_col {word-break:normal;}
}
/* SMALL TABLET LAYOUT: 481px to 668px */
@media only screen and (min-width: 669px) {
	/* Breakpoint TWO COLUMN display*/
	/*Border is 3px to show breakpoint*/
	#main_col {
	width: 67%;
	float:left;
	padding-left:2%;
	border-right:3px solid black;
	word-break:normal;
	}
	#right_col {
	width: 28%;
	float:right;
	clear: none;
	}
	/*HIDE Topic List link*/
	#header_menu {
	display:none;
	}
	/*SET TABS to normal from now on*/
	#tab_container { 
	width: 100%;
	max-width:1080px;
	margin:0 auto;
	text-align:left;
	padding: 0px;
	background-color:#FFFFDD;
	border-bottom-color:black;
	}
	#tab_menu {
	border-bottom: 1px solid black;
	margin: 12px 0px 0px 0px;
	padding: 0px;
	z-index: 1;
	padding-left: 10px;
	}
	#tab_menu li {
	display: inline;
	overflow: hidden;
	list-style-type: none;
	margin-right:0;
	}
	#tab_menu a, a.active {
	color: #000;
	background: #CCC;
	font: bold 1em Arial, sans-serif;
	border: 2px solid black;
	padding: 2px 5px 0px 5px;
	margin: 0;
	text-decoration: none;
	}
	#tab_menu a.active {
	background: #FFF;
	border-bottom: 2px solid #FFF;
	}
}
/* TABLET LAYOUT: 668px to 768px */
@media only screen and (min-width: 769px) {	
	/*SET IMAGES to full size from now on*/
	#header_left img {width:auto;}
	img {width:auto;}

	#main_col {
	border-right:1px solid black;
	}
	
	/* Headings full size from now on */
	h1 {font-size:210%;}
	h2 {font-size:160%;}
	h3 {font-size:130%;}
	h4 {font-size:100%;}
	h5 {font-size:100%;}
}

/* DESKTOP LAYOUT: 769px to 1080px */
@media only screen and (min-width: 1080px) {
	#main_col {
	width: 67%;
	float:left;
	padding-left:2%;
	border-right:1px solid black;
	}
	
	#right_col {
	width: 28%;
	float:right;
	padding:0.5%;
	clear: none;
	}
}

/*Rest of stuff*/
/*This doesn't change for devices*/
/*Everything has same font size */

body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFDD;
margin:0;
padding:10px;
}

#header { 
position: relative;
width: 100%;
max-width:1080px;
background-color:#0000CC;
margin:0 auto;
border:1px solid black;
text-align:left;
}
#header_left {
padding:0;
}
#header_right { 
padding:0;
}

#container {
width: 100%;
max-width:1080px;
margin:0 auto;
padding:0;
clear: none;
float: none;
background-color:#FFFFFF;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid #FFF;
text-align:left;
}

#right_col p{
font-size:95%; /*87%*/
}
#right_col ul{
font-size:95%; /*93%*/
line-height:25px; /*20px*/
margin:0;
padding:0;
list-style-type:none;

}
#right_col h2{
margin-bottom:0px;
}
#right_col h3{
margin-bottom:0px;
}
#right_col h4{
margin-bottom:0px;
}
#right_col h5{
margin-bottom:0px;
}

p {
line-height:1.2;
}

.float_left {
float:left;
margin-right:8px;
}
.float_right {
float:right;
margin-left:8px;
}
.clearfloat {
clear:both;
height:0;
font-size:1px;
line-height:0px;
}

.headtext {	font-size:80%;}/*10px*/
.note { font-size:90%;}
.redsmall {font-size:10px;color:#FF0000;}
.whitecolor {color:#FFFFFF;}
.redcolor {color:#FF0000;}
.bluecolor {color:#000099;}
.greencolor {color:#006600;}