/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{
	font-family: 'Open Sans', sans-serif;
	text-align:justify;
	background:url(../img/bg-blue.png) repeat-x 0 0 #f1fafb;
	/*color:#798388;*/
	color:#366D7E;
}

a{color:#333;}
a:hover{text-decoration:none;}

img{}

h2{
	text-align:center;
	background:url(../img/underline.png) center bottom no-repeat;
	padding-bottom:20px;
}

hr{
	background:url(../img/underline2.png) center top no-repeat;
	width:730px;
	height:21px;
	margin:10px 0;
	border:0;
}

.container {
	margin-left: auto;
	margin-right: auto;
	width: 1200px;
}

.clouds{
	/*width:960px;
	margin:0 auto;*/
}
.cloud-l{
	position:absolute;
	height:256px;
	width:492px;
	left:0;
	top:10px;
	background:url(../img/clouds-left.png) no-repeat 0 0;
	z-index:-50;
}
.cloud-r{
	position:absolute;
	height:263px;
	width:421px;
	right:0;
	top:10px;
	background:url(../img/clouds-right.png) no-repeat 0 0;
	z-index:-50;
}
.head-l{
	position:absolute;
	height:145px;
	width:263px;
	background:url(../img/head-left.png) no-repeat 0 0;
	margin-top:185px;
	margin-left:0;
}
.head-r{
	position:absolute;
	height:150px;
	width:305px;
	background:url(../img/head-right.png) no-repeat 0 0;
	margin-top:180px;
	margin-left:895px;
}
.grass{
	position:absolute;
	height:80px;
	width:1200px;
	background:url(../img/grass.png) no-repeat top center;
	margin-top:247px;
	z-index:-20;
}

section.content,
footer,
nav,
aside{
	overflow:hidden;
}

header{}

header h1.logo{
	margin:0 auto;
	text-align:center;
}

nav{
	background:url(../img/navbg.png) repeat-x 0 0;
	border-radius:10px;
}
nav ul{
	padding:0;
	margin:14px;
	font-size:0.85em;
	height:72px;
	border-radius:7px;
	background:url(../img/navbt.png) repeat-x 0 0;
	text-align:center;
}
nav ul li{
	display: inline-block;
}
nav ul li a{
	text-decoration: none;
	text-transform: uppercase;
	display:block;
	color:#C36800;
	font-size:16px;
	font-weight:bold;
	line-height:72px;
	padding:0 15px;
}
nav ul li a:hover{
	color:#7f4300;
}

.sld{
	background:rgba(253, 253, 253, 0.6);
	border-radius:10px;
	padding:15px;
	margin:15px auto;
}

section.content{
	padding:10px;
	border-radius:10px;
	background:#F5FAFB;
	width:730px;
	margin-right:20px;
	float:left;
	border:#e1eef2 15px solid;
}
section.content h2{
	color:#EC7417;
}

aside{
	width:400px;
	float:left;
	
}
aside .box1,
aside .box2,
aside .box3{
	margin-bottom:27px;
	margin-top:17px;
	border-radius:10px;
	padding:10px;
}
aside .box1{
	border:#965cd8 15px solid;
	background:#c9aaec;
	color:#5C007C;
}
aside .box1 h2{
	background:url(../img/titlebox-purple.png) center center no-repeat;
}
aside .box2{
	border:#78a816 15px solid;
	background:#E3F7BA;
}
aside .box2 h2{
	background:url(../img/titlebox-green.png) center center no-repeat;
}
aside .box3{
	border:#03a2da 15px solid;
	background:#E8F9FF;
}
aside .box3 h2{
	background:url(../img/titlebox-blue.png) center center no-repeat;
}

aside h2{
	color:#FFF;
	margin:-35px auto 0;
	line-height:58px;
	padding:0;
}

section.content, aside{
	float:left;
}

.foot-l{
	position:absolute;
	height:388px;
	width:720px;
	background:url(../img/foot-left.png) no-repeat 0 0;
	left:0;
}
.foot-r{
	position:absolute;
	height:388px;
	width:720px;
	background:url(../img/foot-right.png) no-repeat 0 0;
	right:0;
}

footer{
	background:url(../img/footer-dirt.png) bottom center repeat-x;
	width:100%;
	height:485px;
}
footer p{
	line-height: 90px;
	text-transform: uppercase;
	color:#FFF;
	margin-top:395px;
	float:left;
}

.logoc{
	margin:10px 20px;
}

label,
input[type=text],
textarea,
select{
	display:block;
}

input,
textarea,
select{
	border: none;
	padding: 10px;
	width: 700px;
	margin: 0 0 15px;
	border: 1px solid #333333;
}

textarea{
	height:200px;
}

input.bt{
	display:inline-block;
	width:100px;
	padding:10px;
}
input.bt:hover{
	background:#1C1C1C;
	color:#FFF;
}