/**********************************************************************************************

	Title: CSS
	Author: Anastasia Chuprasova
	Date: 2012

***********************************************************************************************

	1. General Elements
	
	2. Layout
		2.1 Header
		2.2 Content
		2.3 Footer

	3. 	Miscellaneous	
		
***********************************************************************************************/


@font-face {
	font-family: 'museo_slab_100regular';
	src: url('../fonts/museo_slab_100-webfont.eot');
	src: url('../fonts/museo_slab_100-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo_slab_100-webfont.woff') format('woff'), url('../fonts/museo_slab_100-webfont.ttf') format('truetype'), url('../fonts/museo_slab_100-webfont.svg#museo_slab_100regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'museo_slab_300regular';
	src: url('../fonts/museo_slab_300-webfont.eot');
	src: url('../fonts/museo_slab_300-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo_slab_300-webfont.woff') format('woff'), url('../fonts/museo_slab_300-webfont.ttf') format('truetype'), url('../fonts/museo_slab_300-webfont.svg#museo_slab_300regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'museo_slab_700regular';
	src: url('../fonts/museo_slab_700-webfont.eot');
	src: url('../fonts/museo_slab_700-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/museo_slab_700-webfont.woff') format('woff'), url('../fonts/museo_slab_700-webfont.ttf') format('truetype'), url('../fonts/museo_slab_700-webfont.svg#museo_slab_700regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
/* 1. General Elements
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
html {
	font-size: 100.01%;
}
body {
	font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
	font-size: 14px;
	text-align: center;
	line-height: 1.5;
	color: #333;
	background: url(../images/bg.png) 50% 50% no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
strong {
	font-weight: bold;
}
p {
	margin-bottom: 20px;
}
ul, ol {
	margin: 10px 0 15px 20px;
}
ul {
	list-style-type: disc;
}
h1, h2, h3, h4, h5 {
	margin: 0;
	color: #8CB42E;
	font-weight: normal;
}
h1 {
	margin-bottom: 5px;
	font-size: 19px;
	font-family: 'museo_slab_700regular';
}
h2 {
	font-size: 17px;
	color: #555;
	font-weight: bold;
}
h3 {
	font-size: 17px;
}
h4 {
	font-size: 15px;
}
em {
	font-style: italic;
}
address {
	font-style: normal;
}
input, textarea, select {
	padding: 0;
	font: 1em Arial, Helvetica, sans-serif;
}
a:link {
	color: #8CB42E;
	text-decoration: none;
	outline: none;
}
a:visited {
	color: #8CB42E;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #8CB42E;
	text-decoration: none;
	outline: none;
}
/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

.container {
	max-width: 1070px;
	width: 1070px\9;
	text-align: left;
}
.floats {
	overflow: hidden;
}
/* 2.1 HEADER
------------------------------------------------------------------------------------------------ */
#header {
	padding-top: 1px;
}
/* Logotype */
#logo {
	float: left;
	margin-top: 38px;
	width: 88.604651163%; /* 381 (originally 381) / 430 */
}
#logo img {
	display: block;
	width: 100%;
	height: auto;
}
/* Primary navigation */
#nav-primary {
	/*float: right;*/
	margin-top: 10px;
}
#nav-primary ul {
	margin: 0;
	list-style: none;
	border: #ddd 1px solid;
	border-bottom: #98BD44 4px solid;
	background-color: #fff;
	overflow: hidden;
}
#nav-primary ul li {
	float: left;
	height: 29px;
	line-height: 29px;
}		 /*font-size:.9em;font-weight:700; */
#nav-primary ul li a {
	display: block;
	padding: 0 22px;
	height: 29px;
	color: #444;
}
#nav-primary ul a.active, #nav-primary ul li.current_page_item a, #nav-primary ul a:hover, #nav-primary ul li.current-page-ancestor a {
	color: #fff;
	background-color: #98BD44;
	text-decoration: none;
}
/* 2.2 CONTENT
------------------------------------------------------------------------------------------------ */
#content {
	padding: 45px 0 1px;
}
/* Main area */
#main, #main.box {
	font-size: inherit;
}
#main.box, #main .box {
	padding: 25px 47px;
}
/* Welcome */
.welcome {
	line-height: 165%;
}
body.home .welcome {
	background: #fff 100% 100% no-repeat;
	background-size: 37.25%;
	background-position: 90% 100%;
}
/*body.home .welcome {background:#fff url(../images/photo.jpg) 100% 100% no-repeat; background-size:37.25%;background-position: 90% 100%; }
	*/
.welcome p.intro {
	margin-right: 0;
}
/*body.home .welcome p{margin-right:29.141104294%;  190 (originally 190) / 652 }*/   
body.home .welcome h1 + p {
	margin-top: 20px;
}
body.home .feature.box {
	min-height: 215px;
	margin-top:40px;
}
/* Feature */	
.feature p {
	margin-bottom: 10px;
	line-height: 187%;
}
/* 2.3 FOOTER
------------------------------------------------------------------------------------------------ */
#footer {
	padding-bottom: 15px;
	background-color: #8CB42E;
	color: #fff;
}
#footer .box {
	margin-bottom: 0;
	min-height: 185px;
	border: none;
	background: none;
	border-left: 1px dotted #fff;
}
#footer .box:first-child {
	border: none;
}
#footer h1 {
	color: #fff;
}
#footer a {
	color: #333;
}
#footer p {
	margin-bottom: 20px;
}
/* 3. MISCELLANEOUS
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	
.intro {
	color: #777;
	font-size: 22px;
	line-height: 125%;
	font-family: 'museo_slab_100regular';
}
.list-square {
	margin: 0;
	list-style: none inside;
}
.list-square li {
	padding-left: 20px;
	background: url(../images/bullet-square.png) 0 7px no-repeat;
}
.list-none {
	margin: 0;
	list-style: none inside;
}
.box.dark .resources_square li a {
	text-decoration: none;
	color: #333;
}
aside#sidebar {
	display: table
}
/* Home page */
.page-template-home-v2-php #main {
	padding: 0;
	background-size: 29%;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: url(../images/shawn-pic.png);
}
.page-template-home-v2-php #main .inner {
	padding: 40px 28% 10px 25px;
	padding-right: 32%;
}
.page-template-home-v2-php #main .inner p:first-of-type {
	font-family: museo_slab_100regular;
	font-size: 22px;
	line-height: 1.2;
}
/* Article images */
.img-wrapper {
}
.img-wrapper.pull-right {
	margin-left: 15px;
}
.img-wrapper.pull-left {
	margin-right: 15px;
}
.img-right {
	float: right;
	margin-left: 15px;
}
.img-left {
	float: left;
	margin-right: 15px;
}
/* Titles */
.title-box {
	position: absolute;
	top: -23px;
	left: -6px;
	padding-right: 15px;
	height: 55px;
	color: #fff;
	text-indent: 13px;
	line-height: 44px;
	background: url(../images/bg-title.png) 0 0 no-repeat;
}
/* Box */
.box {
	position: relative;
	margin-bottom: 30px;
	padding: 40px 15px 10px 25px;
	border: #aaa 1px solid;
	background-color: #fff;
	font-size: .9em;
}
.box.dark {
	border-color: #98BD44;
	background-color: #E4EDCD;
}
.box.no-title {
	padding-top: 35px;
}
.box.dark a {
	color: #333;
}
.box.dark a.selected {
	color: #000;
	text-decoration: underline
}
a.btn-link {
	display: inline-block;
	padding: 0 15px;
	height: 26px;
	line-height: 26px;
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	background-color: #333;
}
a.btn-link:hover {
	text-decoration: none;
	background-color: #666;
}
 @media (max-width: 1200px) {
#nav-primary ul li a {
	padding: 0 15px;
}
.page-template-home-v2-php #main {
	background-size: 37%;
	background-position: 110% bottom;
}
.page-template-home-v2-php #main .inner {
	padding-right: 300px;
}
}
 @media (max-width: 1024px) {
}
 @media (max-width: 980px) {
#nav-primary ul li a {
	padding: 0 10px;
}
.page-template-home-v2-php #main {
	background-size: 55%;
	background-position: 128% bottom;
}
}
 @media (min-width: 768px) and (max-width: 979px) {
body {
	font-size: .8em;
}
#logo {
	width: 300px;
}
}
 @media (max-width: 767px) {
#logo {
	margin-top: 20px;
	width: 280px
}
#nav-primary {
	margin-top: 5px;
}
#footer {
	padding-top: 10px;
}
#footer .box {
	padding-bottom: 0;
	padding-top: 0;
	border: none;
}
.page-template-home-v2-php #main {
	background-size: 65%;
	background-position: 170% bottom;
}
}
 @media (max-width: 740px) {
.page-template-home-v2-php #main {
	background-size: 72% auto;
	background-position: 200% bottom;
}
}
 @media (max-width: 660px) {
.page-template-home-v2-php #main {
	background-size: 100% auto;
	background-position: 290px bottom;
}
}
 @media (max-width: 600px) {
.page-template-home-v2-php #main {
	background-size: 28% auto;
	background-position: right 20px;
}
.page-template-home-v2-php #main .inner {
	padding-right: 20px;
}
.page-template-home-v2-php #main .inner p:first-of-type {
	line-height: 1.4;
	padding-right: 210px;
}
}
 @media (max-width: 550px) {
.page-template-home-v2-php #main {
	background-size: 33% auto;
}
}
 @media (max-width: 520px) {
.page-template-home-v2-php #main {
	background-size: 36% auto;
}
 }
 @media (max-width: 510px) {
.page-template-home-v2-php #main {
 background-size: 40% auto;
}
}
 @media (max-width: 500px) {
.page-template-home-v2-php #main {
	background-size: 45% auto;
}
}
 @media (max-width: 490px) {
.page-template-home-v2-php #main {
	background-size: 54% auto;
	background-position: 230px 20px;
}

}
 @media (max-width: 480px) {
.welcome {
	padding-bottom: 180px !important;
}
.welcome p {
	margin-right: 0;
}
#nav-primary {
	float: none;
	margin-top: 25px;
}
#logo {
	display: inline-block;
	float: none;
	width: 100%;
}


.page-template-home-v2-php #main {
	background-size: 57% auto;
}


}
 @media (max-width: 470px) {
.page-template-home-v2-php #main {
	background-size: 59% auto;
}
}



 @media (max-width: 450px) {
.page-template-home-v2-php #main {
	background-size: 65% auto;
}
}

 @media (max-width: 440px) {
.page-template-home-v2-php #main {
	background-size: 72% auto;
	background-position: 200px 20px;
}
 }
 
  @media (max-width: 440px) {
.page-template-home-v2-php #main {

	background-size: 100% auto;
background-position: 0 bottom;
}

.page-template-home-v2-php #main .inner p:first-of-type {
	padding-right: 0;
}

.page-template-home-v2-php #main .inner{
	padding-bottom: 440px;
}

 }
 


 @media (max-width: 340px) {
#logo img {
    width: 280px;
}

.page-template-home-v2-php #main .inner {
    padding-bottom: 300px;
}
}





/* drop down menu */


#main-nav   {
    height: 34px; /* set to the height you want your menu to be */
    margin: 0 0 10px; /* just to give some spacing */
	background-color:#fff;
	    border-bottom: 5px solid #8CB42E;
}
#main-nav ul    {
    margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#main-nav li    {
    display: block;
    float: left;
    line-height: 34px; /* this should be the same as your #main-nav height */
    height: 34px; /* this should be the same as your #main-nav height */
    margin: 0; padding: 0; /* only needed if you don't have a reset */
    position: relative; /* this is needed in order to position sub menus */
	background-color: #fff;
}
#main-nav li a  {
    display: block;
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
	color: #333;
}
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
    color: #fff;
    background: #8CB42E;
	text-decoration:none;
}

#main-nav ul ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute;
    top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
	    z-index: 2000;
	    border: 1px solid #eee;
	background-color:#fff;
}
#main-nav ul ul li { /* this targets all submenu items */
    float: none; /* overwriting our float up above */
    width: 260px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
#main-nav ul ul li a { /* target all sub menu item links */
    padding: 5px 10px; /* give our sub menu links a nice button feel */
}

#main-nav ul li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
}

#main-nav ul ul li ul {
    /* target all second, third, and deeper level sub menus */
    left: 260px; /* this needs to match the sub menu width set above -- width + padding + borders */
    top: 0; /* this ensures the sub menu starts in line with its parent item */
    z-index: 2000;
}