@charset "UTF-8";
/* CSS Document */

/* Base styles (mobile styles) */

body {
  color:#666;
	font-family:'Ubuntu', Arial, Helvetica, sans-serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:normal; }
	
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	font-family:'Droid Serif', Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0; } 
  
.box-fix { margin-left:38px; }

/* links */
a,
a:visited,
a:active { color:#0099ff; }
a:hover { text-decoration:none; color:#008000; }

th {text-align: left;}

/* Box-sizing: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}
  
/* structure */   
.wrapper {
	width: 92%; 
	margin: 0 auto; }

header { padding:15px 0; }

#hero,
#page-header{
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:20px 0; }
	
#content { float:left; width:100%; }
#content-left { float:none;  }
#content-right { float:none;  }

p { margin:0 0 1.5em;}

/* makes images responsive */
img { max-width:100%; height:auto; }

/* makes videos responsive */

.video { max-width: 100%; float: right; margin-bottom:10px!important; }

.box  {
	max-width:100%;
   	padding:8px;
   	border:1px solid #ccc;
   	float: left; 
	margin: 0 20px 20px 0; }

.box2 { margin: 30px 0; padding: 0; clear: both; width: 100%; border-radius: 25px;}

.grey-box { padding: 20px 20px!important; background-color: #eeeeee; overflow:hidden; }

.box-left { width: 45%; float: left; margin: 0 0 30px 40px; }
.box-right { width: 45%; float: left; margin: 0 0 0 30px; }

img.buy { margin: .5em 1em .5em 0; float:left; clear:left; }

ul.purchase { text-align:left; margin-top: -20px; }
	
.box a { color: purple; }
.box p { margin-bottom: 10px; }

.cta { 
	width: 200px; 
	padding:8px;
   	border:1px solid #ccc;
   	float: left; 
	margin: 0 20px 20px 0; }
	
.cta p { font-size: 16px; }

img.cta { width:auto; border:none; clear:both; display:block; }

/* Main Menu */
.menu-toggle {
	display:block;
	padding: 10px;
	margin:20px 0 0;
	background:#72834D;
	color:#fff;
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px; 
	background-image:url(/images/menu-wht.png); 
	background-repeat: no-repeat;
    background-position:98% 50%; }
	
.menu-toggle.toggled-on { 
	background:#0099ff;
	background-image:url(/images/menu-wht.png); 
	background-repeat: no-repeat;
    background-position:98% 50%; }

.srt-menu {	display:none; }
	
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10; }

.srt-menu {
	clear:both;
	margin-bottom:60px; }
	
.srt-menu li a {
	background:#dadada;
	display:block;
	margin:1px 0; 
	padding:10px;
	text-decoration:none; }
	
.srt-menu li a:hover {
	background:#0099ff;
	color:#fff; }
	
.srt-menu li li a {
	background:#e8e8e8;
	padding-left:40px; }
	
.srt-menu li li li a {
	background:#efefef;
	padding-left:80px; }

/* Secondary Menu */
#secondary-navigation {
	margin-bottom:60px; }
	
#secondary-navigation ul{
	margin:0;
	padding:0; }
	
#secondary-navigation ul li a { 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none; }
	
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a {
	background:#0099ff;
	color:#fff; }

/* Blockquotes */

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	margin: 1.8em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #666; }
	
.blockquote1 { margin: 20px 0 30px 0;  }
	
.blockquote1 p {	
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic; 
	line-height: 1.45;
	text-align: left;
	color: #666; 
	clear: right;  } 

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -5px; 
	top: -30px; 
	color: #C9C9C9; }

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
	text-align: right; 
	float: right;
  font-style:normal }

.blockquote1 cite {
	color: #999999;
	display: block;
	font-size: 14px;
	margin-top: 8px;
	text-align: right;
	padding-bottom: 20px;  
	float:right;  
  	font-style:normal }

blockquote cite:before, .blockquote1 cite:before { content: "\7E \2009"; }

/* Buttons */
a[class="button"] {
    border-radius:7px;
	  -moz-border-radius:7px;
	  -webkitborder-radius:7px;
	  background-color: #6E8B3D;
	  color:#fff!important;
	  padding: 15px;
	  display:block;
	  text-decoration: none;
	  text-transform: uppercase;
	  margin: 10px 0 50px 0;
	  width: 250px;
	  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
	  font-size:22px;
	  line-height:22px;
	  text-align: center;
	  float: left; 
	  clear:both; }

a:hover[class="button"] {background-color:#2585b0;}

/* Footer */
footer { 
  clear:both; 
	padding: 20px 0 30% 0px;
	background: black; }
	
footer p { 
  margin:0 auto; 
	float: none; 
	width: 60%; 
	font-size: 80%; 
	color: #D9D9D9; 
	padding-top: 10px; }
	
footer img { margin:0 auto; display: block; padding-top: 20px; }
	
footer ul { margin:0; padding:0; }

/*colors and backgrounds*/

body { 	background:#fff; }

h1, h2, h3, h4, h5, h6 { color:#333; }

footer h1, footer h2, footer h3, footer h4 { 
	color:#ccc; 
	margin-bottom:10px; }
	
a.buttonlink { 
	background:#0099ff; 
	border-radius:7px; 
	color:#fff;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:10px;
	text-decoration:none; }

a.buttonlink:hover { background:#8dbc01; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.rightfloat{ float:right; }
.leftfloat { float:left; }

/* This is for mobile devices with a bit larger screens. */

@media only screen and (min-width: 481px) {

/*make menu float right, instead of sitting under the logo*/
.menu-toggle {
	margin-top:0px; 
	float:right; 
	background-image: none; }
	
.menu-toggle.toggled-on { background-image:none; }
.video { float: none; }

footer p { 
  text-align:right; 
	float: right; 
	width: 60%; 
	font-size: 80%; 
	color: #D9D9D9; 
	padding-top: 10px; }

} 

/* screens at MOST (no larger than) 600px */
@media only screen and (max-width: 600px) {

a[class="button"] {
  margin: 0 auto;
  float: none; }
  
.box-right, .box-left {
    width: 80%;
    float: none;
    margin: 0px; }

.box-fix { margin-left:0; }

}


/* tablets and smaller laptops. */
@media only screen and (min-width: 920px) {

.wrapper { 	max-width: 1000px; 	margin: .75em auto; }

#banner { 
	float:left; 
	text-align:left;
	margin-bottom:0px; }
	
header { padding:0; }

#content-wide { float:none; width:100%; margin-bottom: 40px; }
#content-right { float:none; }
.video { float: none; }

.box  {	float: right; } 
.box2 { margin: 30px 0; padding: 0 10px 0 0; clear: both; }
ul.purchase { margin-left: 90px; margin-top: -20px; }
img.buy { margin: .5em 1em 2em 0; float:left; clear:left; }

/* Main Menu - Essential Styles */

#menu-main-navigation li li a {
background: rgba(0, 0, 0, 0.6) none repeat scroll 0% 0%;
color: #FFF;
}

#menu-main-navigation li li a:hover {
background: #09F;
color: #fff;
}

.menu-toggle { display:none; }

#menu-main-navigation { display:block; }

img.logo { padding-top: 0; }

.srt-menu, .srt-menu * {
	margin: 0;
	padding: 0;
	list-style: none; }
	
.srt-menu ul {
	position: absolute;
	display:none;
	width: 12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li { width:100%; }
.srt-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
	float: left;
	position: relative;
	margin-left:1px; }
	
.srt-menu li li {
	margin-left:0px;
}
.srt-menu a {
	display: block;
	position: relative; }
	
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
	display:block;
	left: 0;
	top: 45px; /* match top ul list item height */
	z-index: 99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3); }
	
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
	top: -999em; }
	
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
	left: 12em; /* match ul width */
	top: 0; }
	
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
	top: -999em; }
	
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
	left: 10em; /* match ul width */
	top: 0; }

/*** navigation ***/
#topnav, .srt-menu {
	float:right;
	margin: 0 0 0 0; }
	
.srt-menu a { text-decoration:none; }
.srt-menu li a {
	background:#fff;
	margin:0; 
	padding:10px 20px;
	height:45px; }
	
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color: #0099ff;	}
	
.srt-menu li li a {
		border-top: 1px solid rgba(255,255,255,.2);
		background:	#333; /*fallback for old IE*/
		background:rgba(0,0,0,.6);
		color: #fff;
		padding-left:20px;
		height:auto; }
		
.srt-menu li li a:visited{color:#fff; }
.srt-menu li li li a,
.srt-menu li.current * li a {
	padding-left:20px;
	background:rgba(0,0,0,.6); }

.srt-menu li:hover > a,
.srt-menu li.current a { 
	color:green;
	background:none; }
	
.srt-menu li li:hover > a {
	color:#fff;
	background:#0099ff; }

}

/* Desktops */

@media only screen and (min-width: 1000px) {

#content { width:70%; margin-bottom: 50px; }
#content-wide { float:none; width:100%; padding: 1px; clear: right; }
#content-left { float:left; width:50%; margin-bottom: 50px; }
#content-right { float:right; width:45%; margin-top: 65px; margin-bottom: 50px; }

aside { float:right; width:30%; margin: 40px 0; }

}