@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: 480px and below */
	/*Set HEADER IMAGE to 280px for small devices*/
	#header_left img {width:280px;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 {
	float:left;
	padding-left:2%;
	padding-right:1%;
	word-wrap:normal;
	}
	/* Headings smaller in mobile */
	h1 {
	color:#0000CC;
	text-align:center;
	font-size:175%;
	margin-top:auto;
	}
	h2 {
	color:#0000CC;
	font-size:133%;
	}
	h3 {
	color:#0000CC;
	font-style:italic;
	font-size:120%;
	}
	h4 {
	color:#0000CC;
	font-size:105%;
	}
	h5 {
	color:#0000CC;
	font-style:italic;
	font-size:100%;
	}
	
	#right_col {
	padding-left:1%;
	clear: both;
	margin-left: 0;
	}
	
/* 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:93%;
line-height: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;}