@charset "utf-8";
/* Updated for responsive web pages  7/16/15 */
/* BLUE */

/* SMALL MOBILE LAYOUT: 480px and below */
	/*Adjust Google ads to fit in small device*/
	/*adslot1 - right side ads; adlslot2 - banner ad*/
	.adslot_1 { width: 120px; height: 240px; }
	.adslot_2 { width: 120px; height: 240px; }
	
	/*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 MENUl 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;
	}
	
	#right_col {
	padding-left:1%;
	clear: both;
	margin-left: 0;
	}
	
/* MOBILE LAYOUT: 480 to 669 */
@media only screen and (min-width: 480px) {
	/* GOOGLE ADS are larger after breakpoint */
	/* Menu ads wider than for Tablet*/
	.adslot_1 { width: 320px; height: 100px; }
	/* Banner ad same as above */
	.adslot_2 { width: 320px; height: 100px; }
	
	/*SET HEADER MAGE 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) {
	/* Right col ads less width */
	.adslot_1 { width: 120px; height: 240px; }
	/* Banner ad less width */
	.adslot_2 { width: 320px; height: 100px; }
	
	/* 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;
	}
}

/* DESKTOP LAYOUT: 769px to 1080px */
@media only screen and (min-width: 1080px) {
	/* GOOGLE ADS fullsize */
	/* Right col ads full size */
	.adslot_1 { width: 300px; height: 250px; }
	/* Banner ad full size */
	.adslot_2 {width:728px;height:90px;}
	
	#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:90% 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:87%;
}
#right_col ul{
margin:0;
padding:0;
list-style-type:none;
font-size:87%;
line-height:20px;
}
#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;
}

h1 {
color:#0000CC;
text-align:center;
font-size:210%;
margin-top:auto;
}

h2 {
color:#0000CC;
font-size:160%;
}

h3 {
color:#0000CC;
font-style:italic;
font-size:120%;
}
h4 {
color:#0000CC;
font-size:100%;	
}
h5 {
color:#0000CC;
font-style:italic;
font-size:85%;	
}

.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;}