@charset "utf-8";
/*------------------------------------*\
	eve-styles.css
\*------------------------------------*/

/* Design of Template ResponseEve (eve-styles.css) by Silvia Gamsjäger (SiGa)*/
/*
Twitter:            @sg_layout
Author URL:         sg-layout.com
Project URL:        sg-layout.com
Version:            1.0
Date:               January 2012
License:			MIT License (X11)
					http://www.opensource.org/licenses/MIT

Copyright (c) 2012 Silvia Gamsjäger (SiGa)

You´ll find a copy of the license in the files
you´ve downloaded.
*/

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{font-family: Arial, sans-serif;color: #888;}
body{background:url(../img/bg.jpg) repeat;}

.social {text-align: right; position: relative;  margin: 4px 0;}
.social img {margin-bottom: 0;}

#footer {border-radius: 10px; background-color: #A5C100; color: #fff; padding: 10px 0;}
#footer p {margin: 0; padding: 10px 0;}

/*------------------------------------*\
	LOGO
\*------------------------------------*/

#logo, #logo img{display:block;width:200px; height:100px;}
#logo{float: left; background:url(../img/logo-flex.png) top center no-repeat; position: relative; margin: 0; z-index: 120; display: inline; /* fixes IE6 margin bug */}
#logo img{position:absolute; left:-99999px;}

/*------------------------------------*\
	TOP NAVIGATION
\*------------------------------------*/
.nav {list-style:none; margin:0 0 1.5em 0;}

/*Add a class of centred/centered to create a centred nav.*/

#nav.main{
	float: right;
	text-align:center;
	margin: 0.5em 0 0 0;
	padding: 0.4em 0;
	font-family:'Oswald', Arial, sans-serif;
}
#nav.main li {display:inline; float:none;}

#nav.main a{
	display:inline-block;
	padding: 0.6em 1.2em;
	background-color: #EFEFEF;
	border-radius: 10px;
	border-right: 1px solid #bbb;
	border-bottom: 2px solid #bbb;
	color: #666;text-decoration:none; 
	text-transform:uppercase; 
	text-shadow: 1px 1px 1px #fff;
	font-size: 1.1em;
	margin: 0 0 0.6em 0;	
}
#nav.main a:hover{color: #666; text-shadow: 1px 1px 0px #fff; background-color: #EAFFC4; }

#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #A5C100; letter-spacing: 1px;}

#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}

/*------------------------------------*\
	TYPE
\*------------------------------------*/
/* @font-face kit by Fonts2u (http://www.fonts2u.com/oswald.schriftart) */
/* Font Oswald, SIL-licenced, author Vernon Adams */  
@font-face {font-family:"Oswald";src:url("Oswald.eot?") format("eot"),url("Oswald.woff") format("woff"),url("Oswald.ttf") format("truetype"),url("Oswald.svg#Oswald") format("svg");font-weight:normal;font-style:normal;}

/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6, h7 {
	font-family: 'Oswald', Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	color: #A5C100;
	text-shadow: 1px 1px 0px #6D8901;
}

h1{font-size:2.5em;	margin-bottom:0.75em; line-height:1.5;}
h2{font-size:2.3em;	margin-bottom:1em; line-height:1.4em;}
h3{font-size:2em; margin-bottom:1em; line-height:1.3;}
h4{font-size:1.5em;	margin-bottom:0.8em; line-height:auto; text-shadow: none; font-weight:bold;}
h5{font-size:1.3em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
h6{font-size:1.2em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
h7{font-size:1.1em; margin-bottom:0em; text-shadow: none; line-height:auto;}
/*------------------------------------*\
	CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left!important; }
.right	{ float:right!important; }

.intro {padding: 5px 0; color: #999;}
.intro h2 {font-size: 3em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
.intro p {font-family: 'Oswald', Arial, sans-serif; font-size: 1.9em; line-height: 1.2em; letter-spacing: -2px; padding-right: 15px;}

.quote {font-family: Arial, sans-serif; font-size: 1.4em; letter-spacing: -1px; font-style: italic; line-height: 1.3em; } /*a styled quote in addition to blockquote*/
.quote span {display: block; font-size: 0.7em; padding-top: 10px; font-style: normal;}

/*Colored boxes, green and grey*/
.green, .grey, .dkgrey, .dkred {-webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; zoom: 1; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; margin-bottom: 15px!important;}
.green {background-color: #EAFFC4;}
.grey {background-color: #EFEFEF;}
.dkgrey {background-color:#CCCCCC;}
.dkred {background-color:#990000;}
.green p, .grey p, .dkgrey p, .dkred p {padding:10px 30px 0;}
.green h2, .grey h2, .dkgrey h2, .dkred h2, .green h3, .grey h3, .dkgrey h3, .dkred h3, .green h4, .grey h4, .dkgrey h4, .dkred h4 {border-bottom: 5px solid #fff; margin-bottom: 0; }
.green h2, .grey h2, .dkgrey h2, .dkred h2, .green h3, .grey h3, .dkgrey h3, .dkred h3, .green h4, .grey h4, .dkgrey h4, .dkred h4, .green h5, .grey h5, .dkgrey h5, .dkred h5, .green h6, .grey h6, .dkgrey h6, .dkred h6 {padding: 0px 30px; line-height: 1.7em;}
.green h7, .grey h7, .dkgrey h7, .dkred h7 {padding: 0px 0px; line-height: 1em;}

/*Additional whitespace top,bottom or both for any element. You don´t have to use hr or lots of <br />*/
.top {margin-top: 30px!important;}
.bottom {margin-bottom: 30px!important;}

.ticker {border: none!important; background: none!important; line-height: auto;}

/*------------------------------------*\
	LINKS and BUTTON
\*------------------------------------*/

a{ color: #669B02;text-decoration:none;}

a.button {
	font-family: Arial, sans-serif;
	font-size: 1em;
	line-height: auto;
	background-color: #6D8901;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C100), to(#6D8901));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #A5C100, #6D8901);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #A5C100, #6D8901);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #A5C100, #6D8901);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #A5C100, #6D8901);/* IE 10+ */
    border: 1px solid #799C01;
    border-radius: 5px;
    box-shadow: 0 1px 0 0 #9BCB76 inset;
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 15px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}

a.button2 {
	font-family: Arial, sans-serif;
	font-size: 1em;
	line-height: auto;
	background-color: #6D8901;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C100), to(#6D8901));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #A5C100, #6D8901);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #A5C100, #6D8901);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #A5C100, #6D8901);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #A5C100, #6D8901);/* IE 10+ */
    border: 1px solid #799C01;
    border-radius: 5px;
    box-shadow: 0 1px 0 0 #9BCB76 inset;
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 0px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}

a.button3 {
	font-family: Arial, sans-serif;
	font-size: 0.9em;
	line-height: auto;
	background-color: #6D8901;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C100), to(#6D8901));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #A5C100, #6D8901);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #A5C100, #6D8901);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #A5C100, #6D8901);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #A5C100, #6D8901);/* IE 10+ */
    border: 1px solid #799C01;
    border-radius: 2px;
    box-shadow: 0 1px 0 0 #9BCB76 inset;
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 0px 0;
	text-align: center;
	font-weight: bold;
	padding: 0em 0.2em;
	display: inline-block;}
	
a.button:hover {
	background-color: #A5C100;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6D8901), to(#A5C100));
	background-image: -moz-linear-gradient(#6D8901, #A5C100);
	background-image: -moz-linear-gradient(top, #6D8901, #A5C100);
	background-image: -o-linear-gradient(top, #6D8901, #A5C100);
	background-image: -webkit-linear-gradient(top, #6D8901, #A5C100);
	background-image: -ms-linear-gradient(top, #6D8901, #A5C100);}
	
/*------------------------------------*\
	LISTS
\*------------------------------------*/
ul.check {list-style:none;
	list-style-image:url(../img/check.png);
	list-style-position: inside;
	}
li.bulletgreen {list-style:none;
	list-style-image:url(../img/bulletgreen.png);
	list-style-position: inside;
	}
li.bulletred {list-style:none;
	list-style-image:url(../img/bulletred.png);
	list-style-position: inside;
	}
li.bulletyellow {list-style:none;
	list-style-image:url(../img/bulletyellow.png);
	list-style-position: inside;
	}
li.bulletwhite {list-style:none;
	list-style-image:url(../img/bulletwhite.png);
	list-style-position: inside;
	}
/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img{margin-bottom: 10px;}
img.left	{ margin:0 20px 10px 0; }
img.right	{ margin:0 0 10px 20px; }
/* due to article of Chris Coyier 
http://css-tricks.com/441-resizeable-images-at-full-resolution/ */
img.expand { width: 24em; margin: 0; }

/*-------------------------------------------*\
	No borders and background for form-tables
\*-------------------------------------------*/
.form th, .form td {border:none; background:none; padding: 0.75em 0;}
.form tbody tr:nth-of-type(odd){background:none;}

/*------------------------------------*\
	hr with image (leaf)
\*------------------------------------*/
hr{margin:1em 0; width: 100%; height: 26px; background: url(../img/hr-flex.png) no-repeat top center; border:none;}

/******************************************************************************************************
TABS by Sohtanaka, CSS tweaked by SiGa
*******************************************************************************************************/
ul.tabs {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 32px; /*--Set height of tabs--*/
 width: 100%;
 display: block;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 32px; 
 line-height: 32px; /*--Vertically aligns the text within the tab--*/
 border-bottom: 1px solid #fff;
 border-left: 1px solid #fff;
 overflow: hidden;
 position: relative;
 background: #CECECE;
}
ul.tabs li a {
 text-decoration: none;
 color: #666;
 display: block;
 font-size: 1.1em;
 padding: 0 15px;
 outline: none;
}
ul.tabs li a:hover {
 background: #E0E0E0;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
 background: #EFEFEF; border: none; border-bottom: 1px solid #EFEFEF;
}
.tab_container {
 background: #EFEFEF;
 overflow: hidden;
 clear: both;
float: left; width: 100%; margin-bottom: 25px;
}
.tab_content {
 padding: 15px 18px 10px;
 font-size: inherit;
}
.tab_content p {margin-bottom: 1em;}

/*------------------------------------*\
	NARROW  Media queries
\*------------------------------------*/
/*
CSS for tablets and narrower devices
*/

@media (min-width: 721px) and (max-width: 960px){
#logo{margin:0 auto 1em; width: 100%;}
#nav.main{margin: 0 auto;float: none; padding: 0.4em 0 0 0}
.intro h2 {font-size: 2.5em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
.intro p {font-family: 'Oswald',"Helvetica Neue", Arial, sans-serif;font-size: 1.6em; line-height: 1.2em; letter-spacing: -2px; padding-right: 20px;}	
.social {text-align: center; margin: 30px 0 15px 0;}
.wrapper{width:auto!important; padding:15px!important;}
}

/*------------------------------------*\
	MOBILE  Media queries
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/

@media (max-width: 720px){

.debug, .debug body{background:none!important;}
body{-webkit-text-size-adjust:none;}

.wrapper{line-height: 1.5em; width:auto!important; padding:10px!important;}
.wrapper p {font-size:0.9em;}
.social {text-align: center; margin: 30px 0 15px 0;}

#nav.main a{display:inline-block;padding: 0.8em 1.2em;font-size: 0.9em;letter-spacing: 2px;}
#nav.main{padding: 0.4em 0 0 0; float: none; margin: 0 auto; background-image: none; font-size: 100%;}

#subheader {margin: 110px 0 20px;}

h1{font-size:1.9em;margin-bottom:0.75em;line-height:1.7;}
h2{font-size:1.7em;margin-bottom:1em;line-height:1.5;}
h3{font-size:1.5em;	margin-bottom:1em;line-height:1.3em;}
h4{font-size:1.1em;	margin-bottom:0.8em;line-height:auto;font-weight:bold;}
h5,h6{font-size:1em;margin-bottom:0.8em;line-height:auto;}
h7{font-size:1em;margin-bottom:0em;line-height:auto;}

.intro p {font-size: 1.2em; line-height: 1.2em; letter-spacing: -1px;}
.intro h2 {font-size: 2em;}	

#footer p {margin: 0; padding: 0 10px;}
	
.grids{margin:0!important;width:auto!important;}
[class^="grid-"],
.grids [class^="grid-"]{
	width:auto!important;
	float:none!important;
	margin:0!important;
}


/*------------------------------------*\
	LOGO
\*------------------------------------*/
#logo{margin:0 auto 1em; width: 100%;}

/* =============================================
 
    MediaQuery-Reporter Styles
	Uncomment and use this to display the screen 
	sizes while developing your media queries!
	http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/
 
================================================ */
 
/*body:after {
    content: "less than 320px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 60px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}
*/