﻿/*
      Created by Rupert Jefferies
	  Web: www.rupertjefferies.com
	  E-Mail: rupert@rupertjefferies.com
*/

/*----------------- RESET -----------------*/

* { margin: 0; padding: 0; }

html { overflow-y: scroll;}

body { 
 background-color: #333;
 font-size: 14px; 
 color: #666666; 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 }

ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1, h2, h3, h4 { margin-bottom: 10px; color: #4a4d4e;}	
h5 { color: #4a4d4e;}	
a, img { outline: none; border:none; }
p { margin: 0 0 10px; line-height: 1.6em; font-size: 1em;}

img { display: block; margin-bottom: 10px;}
	
/*----------------- HEADER -----------------*/

#header_bg {
 width: 100%;	
 margin: 0px;
 padding: 10px 0px;
 overflow: auto;
 background-color:#081324;
}

#header {
 max-width: 915px;
 margin: 0px auto;
 overflow:auto;
}

/*----------------- LOGO -----------------*/ 

#header img.logo {
 margin: 10px 0px 10px 0px;
 max-width: 100%;
 float: left;
}
		
/*----------------- MAIN NAVIGATION -----------------*/

#headernav_bg {
 width: 100%;	
 margin: 0px;
 padding: 0px;
 overflow: auto;
 background-color: #172a46;
 border-top: 1px solid #45556b;
}

#headernav {
 max-width: 915px;
 margin: 0px auto;
 overflow:auto;
} 

#mainnav {
 margin: 0;
 padding: 0;
 float: left;
 clear:both;
}

#mainnav li {
 list-style: none;
 float: left;
 margin: 10px 10px 10px 0px;
}

#mainnav a {
 display: block;
 color: #8f9fb4;
 font-size: 1em;
 text-decoration:none;
 padding: 5px 20px;
}

#mainnav a:hover {
 color: #ffffff;
}

/*----------------- SUB NAVIGATION -----------------*/ 

#subnav {
 margin: 0;
 padding: 0;
 float: right;
 max-width: 600px;
}

#subnav li {
 list-style: none;
 float: left;
 margin: 12px 10px 0px 0px;
 display: block;
 font-size: 1em;
 padding: 5px 5px;
 color: #ffffff;
}

#subnav a {
 color: #ffffff;
 text-decoration:none;
 -moz-transition: color .6s linear;
 -o-transition: color .6s linear;
 -ms-transition: color .6s linear;
 -webkit-transition: color .6s linear;
 transition: color .6s linear;
}

/*----------------- BLOCK HERO -----------------*/ 
			
#homehero_bg {
 width: 100%;	
 margin: 0px;
 padding: 0px;
 overflow: auto;
 background-color: #ebebeb;
 background-image: url(../images/diagonal-noise.png); 
 background-position: top left; 
 background-repeat: repeat;
}

#homehero {
 margin: 0px auto 0px auto;
 clear: both;
}

/*----------------- BLOCKS -----------------*/ 
			
#blocks_bg {
 width: 100%;	
 margin: 0px;
 padding: 0px;
 overflow: auto;
 background-color: #e1e1e1;
}

#blocks_wrapper {
 max-width: 926px;
 margin: 10px auto 10px auto;
 padding: 0;
 clear: both;
 overflow:auto;
}

.block {
 float: left;
 padding: 20px 20px 10px 20px;
}

.block img {
 float: left;
 margin: 0 10px 0 0;
}

.half{
 margin: 5px;
 width: 44%;
 background-color:#efefef;
}

.third {
 margin: 5px;
 width: 27.6%;
 background-color:#efefef;
}

.fourth {
 margin: 5px;
 width: 19%;
 background-color:#efefef;
} 

/*----------------- MAIN LEFT COL -----------------*/ 

#content_bg {
 width: 100%;	
 margin: 0px;
 padding: 0px;
 overflow: auto;
 background-color: #ffffff;
}

#content_wrapper {
 max-width: 915px;
 margin: 0px auto;
 padding: 10px 0 0 0;
 overflow:auto;
}

#leftcol {
 width: 66%;
 padding: 2%;
 float: left;
 border-right: 1px solid #d9d9d9;
}

#fullwidth {
 width: 96%;
 padding: 2%;
 clear: both;
}

#content_wrapper h1 { font-size:2em; }
#content_wrapper h2 { font-size:1.6em; margin-top: 20px; }
#content_wrapper h3 { font-size:1.4em; margin-top: 20px;}
#content_wrapper h4 { font-size:1.2em; }
#content_wrapper p {  line-height: 175%; }
#content_wrapper ul { margin: 10px;}
#content_wrapper li { margin: 10px; list-style-type:circle; line-height: 165%;}
#content_wrapper a { color:#172a46; text-decoration:none; }
#content_wrapper a:hover {text-decoration:underline;}
#content_wrapper img.gallery { margin: 10px; padding: 5px; border: 1px solid #CCC; float: left;}	
#content_wrapper img.promo { margin: 10px 10px 10px 20px; padding: 10px; border: 1px solid #CCC; float: right;}		
		
/*----------------- RIGHT COL -----------------*/ 

#rightcol {
 width: 22%;
 padding: 2% 3%;
 float: left;
}

#rightcol h4 { 
 font-size: 1em;
 padding: 10px 0px 10px 0px;
 border-bottom: 1px solid #e1e1e1;
 }
 
#rightcol ul { font-size:1em; margin: 10px;}
#rightcol li { font-size:1em; margin: 10px 0px 10px -10px; list-style-type: none; line-height: 150%;}
 
#rightcol img.social {
 margin: 5px 10px 15px 5px;
 float:left;
}

#rightcol img.gallery { margin: 5px; padding: 1px; border: 1px solid #CCC; float: left; width: 100px; }

/*----------------- RESPONSIVE IFRAME -----------------*/
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 70%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.responsive-iframe-container iframe,  
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}	

/*----------------- FOOTER -----------------*/

#footer_bg {
 width: 100%;	
 margin: 0px 0px;
 padding: 0px 0px 0px 0px;
 overflow: auto;
 background-color:#333;
}

#footer {
 max-width: 920px;
 margin: 0px auto;
 padding: 20px 0px 30px 0px;
 overflow: auto;
}

#ftnav {
 float: left;
 margin: 0px 0px 0px 0px; 
}
	
#ftnav li, #ftbuiltby li {
 display: inline;
 margin-left: 15px;
}

#ftnav li a, #ftbuiltby li a {
 color: #ffffff;
 display: inline-block;
 font-size: 1em;
 text-decoration:none;
 padding: 10px 15px;
}

#ftnav li a:hover, #ftbuiltby li a:hover {
 background-color:#4a4d4e;
 -moz-transition: background-color .6s linear;
 -o-transition: background-color .6s linear;
 -ms-transition: background-color .6s linear;
 -webkit-transition: background-color .6s linear;
 transition: background-color .6s linear;
 -moz-border-radius: 5px;
 border-radius: 5px; 
}

#ftbuiltby {
 float: right;
 margin: 0px 0px 0px -15px;
}

#ftcontact {
 float: left;
 margin: 20px 0 0 30px;
}

#ftcontact li {
 display: inline;
 margin: 0 25px 0 0;
}

#ftdisc {
 float: left;
 margin: 20px 0 0 30px;
}

#ftdisc li {
 display: inline;
 margin: 0 25px 0 0;
}

/*----------------- MEDIA QUERIES -----------------*/ 

@media screen and (max-width: 640px) {

body { 
 background-image: none;
 }

#header, #leftcol, #rightcol, #fullwidth, #footer {
 float: left;
 clear: left;
 width: 92%;
 padding: 2% 4%;
 margin: 0%;
 border: none;
}

/*----------------- LOGO -----------------*/ 

#header img.logo {
 margin: 0px auto 0px auto;
 display: block;
 float: none;
}

/*----------------- SUB NAVIGATION -----------------*/ 

#subnav {
 display: none;
}

/*----------------- MAIN NAVIGATION -----------------*/ 

#mainnav {
 margin: 0 0 10px 0;
 padding: 0 0 30px 0;
 width: 100%;
}

#mainnav li {
 list-style: none;
 float: left;
 margin: 2px 0px;
 width: 100%;
}

#mainnav a {
 display: block;
 padding: 5px 10px;
 -moz-border-radius: 0px;
 border-radius: 0px;
}
/*----------------- BLOCK HERO -----------------*/ 
			
#homehero {
 margin: 0px 0px 0px 0px;
}

/*----------------- BLOCKS -----------------*/

.block {
 float: left;
 clear: left;
 width: 82%;
 margin: 5px 4%;
 padding: 5%;
 background-color:#efefef;
}

.block img {
 float: left;
 margin: 0 10px 0 0;
}

/*----------------- MAIN LEFT COL -----------------*/

#content_wrapper h1 { font-size:1.8em; } 

#content_wrapper img.gallery { margin: 5px; padding: 5px; border: 1px solid #CCC; float: left; width: 80px; height:80px;}

/*----------------- RIGHT COL -----------------*/ 

#rightcol img.social { margin: 2px; float:left; }

#rightcol img.gallery { margin: 5px; padding: 1px; border: 1px solid #CCC; float: left; width: 100px; height:100px;}

/*----------------- FOOTER -----------------*/

#footer {
 padding: 20px 0px 10px 15px;
}

#ftnav, #ftbuiltby {
 display: none;
}

#ftcontact {
 float: left;
 margin: 0px 10px;
}

#ftcontact li {
 display: list-item;
 margin: 0 25px 10px 0;
}

#ftdisc {
 float: left;
 margin: 0px 10px;
}

#ftdisc li {
 display: list-item;
 margin: 0 25px 10px 0;
}

		
}