@import 'normalize.css';  /*add cross browser normalization*/

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
/*
	This tricolor css has been modified for Responsive Design.  
	To include: 
	Notice the import of normalize.css, a cross browser normalization css.
	Not using hard coded pixels but % and em's.
	Font size will default to the browser font size.
*/

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%; /* was 12px; so 1em will be 12px for conversions*/
	color: #787878;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #F93D00;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #704A21;
}

a:hover {
}

#wrapper {                             /*parent is body*/
	width:100%;                        /*was 960px */
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header {                               /*parent is wrapper*/
	width:100%;                        /*was 960px */
	height: 7.083333333333333em;       /* 85px/12px was 85px;*/
	margin: 0 auto;
}

/* Logo */

#logo {                                 /*parent is header, logo height is 65+20px*/
	float: left;
	height: 5.416666666666667em;      /* 65px/12px was 65px; */
	margin: 0;
	padding-top: 1.666666666666667em;   /* used 20/12 and was 20px; */
	color: #00629E;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	float: left;
	letter-spacing: -0.0320512820512821em;  /*used 1px/12px / 2.6em  was -1px;*/
	text-transform: lowercase;
	font-size: 2.6em;
}

#logo p {
	float: left;
	margin: 0;
	padding: 1em 0 0 0.8333333333333333em; /* 12/12 & 10/12 was 12px 10px; */
	font: normal 1.166666666666667em Georgia, "Times New Roman", Times, serif; /*modified font 14/12 was 14px*/
	font-style: italic;
} 

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #00629E;
}

/* Search */

#search {
	float: right;
	width: 22.91666666666667%;  /*use 220/960 for percentage of the header line */
	padding: 0;
}

#search form {
	height: 3.416666666666667em;   /* used 41/12, was 41px;*/
	margin: 0;
	padding: 2.5em 0 0 0; /* was 30px 0 0 0; - use 30/12*/
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 95.45454545454545%;  /* 210/220 for the value */
	padding: 0.4166666666666667em 0.4166666666666667em; /* 5/12 .. was 5px for top and bottom, was 5px for right and left*/ 
	border: 1px solid #E9851D;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 0.9166666666666667em Arial, Helvetica, sans-serif; /* 11/12 for font size, was 11px*/
	color: #5D781D;
}

#search-submit {
	display: none;
}

/* Menu */

#menu {
	width: 100%; /*used 960px as 100%*/
	height: 4.166666666666667em; /* 50/12 was 50px; */
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.jpg) repeat-x left top;
}

#menu ul {
	margin: 0;
	padding: 0; 
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	height: 4.166666666666667em; /* 50/12 was 50px;*/
}

#menu a {
	display: block;
	margin-right: 0.3125%; /* was 3px; and used 3/960 */
	padding: 0.8333333333333333em 2.5em 0.5833333333333333em 2.5em; /* 10/12 30/12 7/12 30/12 was 10px 30px 7px 30px */ 
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.083333333333333em;  /*13/12 to put in em terms was 13px */
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
}

#menu .current_page_item a {
	color: orange;
}

#menu a:hover {
	text-decoration: underline;
}

	
/* Page */

#page {
	width: 100%; /*used 960px as 100%*/
	margin: 0 auto;
	padding: 0;
}

#page-bgtop {
	padding: 1.666666666666667em 2.604166666666667%; /*used 20/12 25/960 was 20px 25px;*/
}

#page-bgbtm {  /* the width of page-bgtop is 910 = 960-50 due to page-bgtop padding */
}

/* Content */

#content {
	float: right;
	width: 69.23076923076923%; /* set as target / context = result which is 630/910 ...but was width: 630px;*/
	padding: 0;
}

.post {
	margin-bottom: 2.083333333333333em; /* 25/12 was  25px;*/
}

.post-bgtop {
}

.post-bgbtm {
}

.post  .title {         /*title total height is 50px included top padding.*/
                       /*height includes the inherited margin-bottom from .post*/
	height: 2.083333333333333em; /*was 42px;  calculated as  42-25+8/12*/
	padding: 0.3333333333333333em 0 0 3.174603174603175%; /* 8/12/2 0 0 20/630 was 8px 0 0 20px;*/
	letter-spacing: -0.0416666666666667em; /*was -.5px; */
	color: #8AB52B;
	background: url(images/img01.gif) repeat-x left top;
	/*margin: auto 0;*/
}

.post .title a {
	color: #FFFFFF;
	border: none;
}

.post .meta {
	padding-bottom: 0.4166666666666667em; /*0.119047619047619%;*/  /* 5/12/3.5 was 5px;*/
	padding-left: 3.174603174603175%;  /* 20/630 was 20px; */
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9166666666666667em; /*11/12 was 11px;*/
	font-style: italic;
}

.post .meta a {
	color: #8AB52B;
}

.post .entry {
	padding: 0 3.174603174603175% 1.666666666666667em 3.174603174603175%; /* 20/630 20/12 20/630 in % was 0 20px 20px 20px;*/
	text-align: justify;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 26.37362637362637%; /* set as target / context = result which is 240/910 ...but was width: 240px;*/
	padding: 0;
	color: #787878;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	padding-bottom: 2.5em; /* 30/12 was 30px;*/
}

#sidebar li li {
	line-height: 2.916666666666667em; /* 35/12 was 35px;*/
	border-bottom: 1px dashed #C5DB76;
	padding-left: 4.166666666666667%; /* used 10/240 was 10px;*/
}

#sidebar li li span {
	display: block;
	margin-top: -1.666666666666667em; /* 20/12 was -20px;*/
	padding: 0;
	font-size: 0.9166666666666667em; /* 11/12 was 11px; */
	font-style: italic;
}

#sidebar h2 {
	height: 2.083333333333333em; /*was 42px;  calculated as  42-25+8/12*/
	padding: 0.3333333333333333em 0 0 8.333333333333333%; /* 8/12/2 20/240 was 8px 0 0 20px;*/
	background: url(images/img02.jpg) repeat-x left top;
	letter-spacing: -0.0416666666666667em; /* .5/12 was -.5px; */
	color: #FFFFFF;
}

#sidebar p {
	margin: 0 0;
	padding: 0 8.333333333333333% 1.666666666666667em 8.333333333333333%; /* 20/240 20/12 20/240 was 0px 20px 20px 20px; */
	text-align: justify;
}

#sidebar a {
	color: #787878;
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
	color: #787878;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 1.666666666666667em;  /* use ems 20/12 was 20px*/
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	width: 100%; /*used 960px as 100%*/
	background: #474036;
	height: 4.166666666666667em; /* use 50/12 was 50px;*/
	margin: 0 auto;
	padding: 0 0 1.5625% 0; /*use 15/960 was 0px 0 15px 0; top right bottom left*/
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 1.666666666666667em; /* 20/12 was 20px; */
	line-height: normal;
	font-size: 0.75em;  /* 9/12 was 9px;*/
	text-transform: uppercase;
	text-align: center;
	color: #E1F5A6;
}

#footer a {
	color: #FFFFFF;
}
/* --------------------------------------------
   < 768px viewport for ipad portrait
-------------------------------------------- */			
				
@media screen and (max-width: 768px) {
	body{ font-size:90%;}
	
	#search { display:none;}
	
	#menu{
		width: 100%; /*used 960px as 100%*/
		height: 4.166666666666667em; /* 50/12 was 50px; */
		margin: 0 auto;
		padding: 0;
		background: url(images/img03.jpg) repeat-x left top;
	}
	#menu ul { 
		margin: 0;
		padding: 0; 
		list-style: none;
		line-height: normal; 
		background: url(images/img03.jpg) repeat-x left top;
	}
	#menu li {
		float: left;
		height: 3.0em; /*3.0em; */
	}
	#menu a {
	display: block;
	margin-right: 0.3125%; /*0.3125%; *//* was 3px; and used 3/960 */
	padding: 0.8333333333333333em .5em 0.5833333333333333em .5em; /* cut it down  */  
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.083333333333333em;  /*13/12 to put in em terms was 13px */
	font-weight: bold;
	color: #FFFFFF;
	border: none;
	}
	#content {
	width: 100%; /* set as target / context = result which is 630/910 ...but was width: 630px;*/
	padding: 0;
	}
	#sidebar {  width: 100%;
	padding:0;}
		
}

/* --------------------------------------------
   < 455px change menu to drop down. Using 455 because of the menu size for the application
-------------------------------------------- */	
@media screen and (max-width: 455px) {
	#header { height: 8em;}
	#logo h1{ 
		width:100%;
		float: left;
	}
	#logo p{width:100%; float:left; padding-bottom: 1.5em; margin-bottom:1em;}
	#search {
		float: right;
		width: 100%;  /*use 220/960 for percentage of the header line */
		padding: 0;
	}
	#menu {width: 100%; background:inherit;}
	#menu ul { width:100%; 
		background: url(images/img03.jpg) repeat-x left top;
		display: block; }
	#menu li { width:100%;
			background: url(images/img03.jpg) repeat-x left top;
			background-color: red;
			height: 3.0em;
			float:left;
			padding:0;  margin-bottom:.1em;
			}
	#menu a {
		display: block;
		padding: 0.8333333333333333em 2.5em 0.5833333333333333em 2.5em; /* 10/12 30/12 7/12 30/12 was 10px 30px 7px 30px */ 
		text-decoration: none;
	}
}
/* --------------------------------------------
   < 320px viewport for iphone portrait
-------------------------------------------- */	
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)		
/*@media screen and (max-width: 320px)*/ {
	body{ font-size:50%;}
	#header { height: 8.0em; /*7.083333333333333em;*/  }
	#menu {width: 100%; /*margin-bottom: .25em;*/}
	#menu ul { width:100%; 
		background: url(images/img03.jpg) repeat-x left top;
		display: block; }
	#menu li { width:100%;
			background: url(images/img03.jpg) repeat-x left top;
			height: 2.0em;
			float:left;
			margin-bottom:.15em; padding-bottom:.3em;
			}
	#menu li:last-child {margin-bottom: 1em; /*padding-bottom:2em*/};
	#menu a {
		display: block;
		padding: auto 0 auto 1.0em; /* 10/12 30/12 7/12 30/12 was 10px 30px 7px 30px */ 
		text-decoration: none;
}
	#content {
	width: 100%; /* set as target / context = result which is 630/910 ...but was width: 630px;*/
	padding: 0;
}
	#sidebar {  }

		
}
/* --------------------------------------------
   < 300px viewport for smal tablet
-------------------------------------------- */