/* CSS Document                                */
/* by Codify Design Studio - codifydesign.com  */


/* --- General Styles--- */
body, h1, h3, p {
	font-family: "Trebuchet MS";
	font-size: 12px;
	color: #333333;
}

body {
	margin: 0px;
	background-color: #FFFFFF;
}

h1 {
	font-size: 48px;
	color: #339966;
}

h2 {
	font-size: 12px;
	color: #FFFFFF;
}

h3 {
	font-size: 12px;
	color: #990033;
	text-transform: uppercase;
}

.right_image {
	float: right;
	width: 205px;
	margin: 0px 0px 10px 30px;
}

.right_image img {
	display: block;
	margin-bottom: 10px;
}

.right_image p {
	display: block;
	font-size: 12px;
	color: #715656;
}

a { color: #36C; }

a:visited  { color: black; }
a:hover{
	color: #FFFFFF;
	background-color: #BEE0BE;
}

/* --- Banner Area --- */

.bannerArea .container {
	position: relative;
	width:100%;
	height: 155px;
	margin: 0 auto 0 auto;
	padding: 35px 0px 0px 0px;
	color: black;
	font-size: 12px;
}

@media screen and (max-width:500px){
	   .bannerArea {
	      position: relative;
	      width: 100%;
	      height: 190px;
	      margin:0;
	      background: #FFFFFF url(images/banner.jpg) no-repeat center top;
	      right:0%;
	   }
	
	   .bannerArea .container .site_logo {
	      position: absolute;
	      width: 355px;
	      height: 220px;
	      background: url(/images/logo.png) no-repeat 0 0;
	      left: 22%;
	      top: 0px;
	   }
}

@media screen and (max-width:800px)and (min-width: 500px) {
	   .bannerArea {
	      position: relative;
	      width: 90%;
      	height: 190px;
	      margin:0;
	      background: #FFFFFF url(images/banner.jpg) no-repeat center top;
	      right:10%;
	   }
	
	   .bannerArea .container .site_logo {
	      position: absolute;
	      width: 355px;
	      height: 220px;
	      background: url(images/logo.png) no-repeat 0 0;
	      left: 35%;
	      top: 0px;
	   }
}

@media screen and (min-width:800px) {
	   .bannerArea {
	      position: relative;
	      width: 40%;
	      height: 190px;
	      margin:0;
	      background: #FFFFFF url(images/banner.jpg) no-repeat center top;
	      left:60%;
	   }
	
	   .bannerArea .container .site_logo {
	      position: absolute;
	      width: 355px;
	      height: 220px;
	      background: url(images/logo.png) no-repeat 0 0;
	      left: -150px;
	      top: 0px;
      }

      .bannerArea .container .site_date {
	      position:relative;
	      left: 20px;
	      top:160px;
	      color: black;
	      font-size: 12px;
      }
 }


/* --- Content Area --- */
.contentArea {
   width: 100%;
	margin: 0;
	padding: 3% 0px 3% 0px;
	position:relative;
}

@media screen and (max-width:500px) {
      .contentArea .container {	
		   width: 99%;
		   padding: 10px 0px 1% 0px;
		   color: #FFFFFF;
	   }
	
	   .contentArea .container .left_col{
		   background-color: #FFFFFF;
		   float: left;
		   padding: 10% 1% 1% 10%;
		   width: 50%;
		   position: relative;
		   border:2px solid #2980B9;
		   border-radius: 20px;
	   }
	
	   .contentArea .container .right_col{
		   float: right;
		   padding: 10px 0px 10px 0px;
		   position: relative;
		   width: 175px;
		   border:2px solid #2980B9;
		   border-radius: 20px;
		   background-color:#FFFFFF;
	   }
}

@media screen and (max-width:1000px)and (min-width: 500px) {
      .contentArea .container {
		   width: 90%;
		   margin: 0 auto 0 auto;
		   padding: 0px 0px 1% 0px;
		   color: #000000;
	   }
		
		.contentArea .container .left_col{
		   width: 62%;
		   float: left;
		   padding: 1% 2% 1% 5.5%;
		   position: relative;
		   background-color: #FFFFFF;
		   border:5px solid #2980B9;
		   border-radius: 20px;
	   }
	
	   .contentArea .container .right_col{
		   float: right;
		   padding: 45px 0px 45px 0px;
		   position: relative;
		   width: 175px;
		   border:5px solid #2980B9;
		   border-radius: 20px;
		   background-color:#FFFFFF;
	   }
}

@media screen and (min-width: 1000px) {
	   .contentArea .container {
		   width: 70%;
		   margin: 0 auto 0 auto;
		   padding: 0px 0px 1% 0px;
		   color: #000000;
	   }
	   
	   .contentArea .container .left_col{
		   background-color: #FFFFFF;
		   float: left;
		   padding: 1% 5% 10% 5%;
		   width: 60%;
		   position: relative;
		   border:8px solid #2980B9;
		   border-radius: 20px;
	   }
	
	   .contentArea .container .right_col{
		   float: right;
		   padding: 45px 0px 45px 0px;
		   position: relative;
		   width: 175px;
		   border:8px solid #2980B9;
		   border-radius: 20px;
		   background-color:#FFFFFF;
	   }
}


/* --- Footer Area --- */
@media screen and (max-width:500px) {
      .footerArea{
	      width: 90%;
	      height: 50px;
	      margin: 0 auto 0 auto;
	      background-color: #99cccc;
      }

      .footerArea .container{
	      width: 100%;
	      margin: 0 auto 0 auto;
	      padding: 5px 20px 20px 20px;
	      background-color: #99cccc;
      }
      
      .footerArea .container p{
         color: #ffffff;
	      background-color: #99cccc;
      }
}

@media screen and (max-width:1000px)and (min-width: 500px) {
      .footerArea{
	      width: 90%;
	      height: 10px;
	      margin: 0 auto 0 auto;
	      background-color: #99cccc;
      }

      .footerArea .container{
	      width: 100%;
	      margin: 0 auto 0 auto;
	      padding: 20px 20px 20px 20px;
	      background-color: #99cccc;
      }
      
      .footerArea .container p{
         color: #99cccc;
	      background-color: #99cccc;
      }
}

@media screen and (min-width: 1000px) {
	   .footerArea{
	      width: 90%;
	      height: 50px;
	      margin: 0 auto 0 auto;
	      background-color: #99cccc;	
      }

      .footerArea .container{
	      width: 100%;
	      margin: 0 auto 0 auto;
	      padding: 50px 20px 20px 20px;
	      background-color: #99cccc;
      }
      
      .footerArea .container p{
      color: #99cccc;
	   background-color: #99cccc;
      }
}

.clear_both {
	clear: both;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}