/*------------------------------------------------------------

Basic Style Sheet

version:	1.0
author:		derek allard
email:		derek@gravityswitch.com
website:	http://www.gravityswitch.com

------------------------------------------------------------*/

/*
go to when creating the master:
http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

Here is how i want this structured ... all the elements that need to be defined shoudld be placed in here but left blank ... for hacks and such those should be included here but be commented out in a special hacks section.  For categories ... global, header, body, forms, footer with hacks annotated as needed
*/

/* COLORS
   Body Background:       #ececec
   Main Text:             #535353
   Links:                 #5486cd
   Links Hover: 		  #0356d0
   Nav/Subnav Links:	  #88ce00
   Nav/Subnav Hover:	  #b7f441
   Lines on Gray:		  #b1b1b1
   Lines on White:		  #d9d9d9	  
*/

/* SECTIONS
	GLOBAL
	TOP
	MAIN BODY
	FOOTER
	FORMS
	TABLES
*/

/* ======= GLOBAL STYLES ======= */

/* 1 line tricks
http://www.cssglobe.com/post/1392/8-premium-one-line-css-tips

VERTICALLY CENTERS CONTENT IN BOX (IN THIS CASE THE BOX WOULD BE 24 PIXELS TALL)
line-height:24px; 

= = =

PREVENTS OVERSIZED CONTENT TO BREK FIXED WIDTH FLOATED LAYOUTS
#main{overflow:hidden;}

= = =

PREVENTS LINE BREAKS IN LINKS  
a{white-space:nowrap;}

= = =

ALWAYS SHOW FIREFOX SCROLLBAR
html{overflow:-moz-scrollbars-vertical;}

= = =

REMOVE VERTICAL TEXTAREA SCROLLBAR IN IE
textarea{overflow:auto;}

= = =

FORCE PAGE BREAKS WHEN PRINTING YOUR DOCUMENT
h2{page-break-before:always;}

= = =

REMOVE ACTIVE LINK BORDERS
a:active, a:focus{outline:none;}

= = = 

INDENT SECOND LINE OF LIST ITEMS
li {  
	text-indent: -1em;
    margin-left: 1em;
}

= = = 

BULLETPROOF OPACITY WITH COLORS

div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

*/

@font-face {
    font-family: 'BebasRegular';
    src: url('/images/fonts/BEBAS___-webfont.eot');
    src: url('/images/fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/fonts/BEBAS___-webfont.woff') format('woff'),
         url('/images/fonts/BEBAS___-webfont.ttf') format('truetype'),
         url('/images/fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
	font: normal 100% arial, helvetica, sans-serif; /* SETS TO 16PX */
	background: #ececec url('/images/bg-body-sandstone.png') repeat left top;
	color: #535353;
	line-height: 2em;
}

#wrap {  
	width: 100%;
	padding-top: 15px;
	background: transparent url('/images/bg-body-pylons-new.png') no-repeat center top; 
	min-height: 1053px;  /* height of bg image */ 
}

h1 { /* 36px */
	font: normal 2.25em BebasRegular, arial, helvetica, sans-serif;
	margin-bottom: 0.7em;
	color: #535353;
	text-transform: uppercase;
	border-bottom: 1px solid #d9d9d9;
	padding-bottom: 7px;
}
 
h2 { /* 24px */ 
	font: bold 1.5em arial, helvetica, sans-serif; 
	color: #88ce00;
	margin: 1.5em 0 .7em;
}

h3 {  /* 22px */
	font: bold 1.375em arial, helvetica, sans-serif; 
	color: #535353;
	margin: 1.5em 0 .7em;
}

h4 {  /* 18px */
	font: normal 1.125em arial, helvetica, sans-serif; 
	color: #535353; 
	text-transform: uppercase;
	margin: 1.5em 0 .7em;
}

h5 {  /* 18px */
	font: normal 1.125em arial, helvetica, sans-serif; 
	color: #535353; 
	text-transform: uppercase; 
	margin: 1.5em 0 .7em;
}

h6 {  /* 18px */
	font: normal 1.125em arial, helvetica, sans-serif; 
	color: #535353; 
	text-transform: uppercase; 
	margin: 1.5em 0 .7em;
}

p, ul, ol, dl, blockquote, form, table {
       margin: 1em 0;
} 

li ul,
li ol { /* if nested remove top and bottom margin */
	margin-top: 0;
	margin-bottom: 0;
}

#content li ul li,
#content li ol li { /* nested li should not have smaller font */
	font-size: 1em;
}



ul li { /* put back bullets */
	margin-left: 2em;
	list-style: disc inside;
}

ol li { /* put back numbers */
	margin-left: 2em;
	list-style: decimal inside;
}

ul.nobullet li {
	margin-left: 0;
	list-style: none;
}

a:link, a:visited {
	color: #5486cd; 
	text-decoration: none;
}

a:hover, a:active {
	color: #0356d0;
}

body#ab #about a, body#nw #news a, body#sv #services a, body#pf #portfolio a, body#ct #contact a {  
	color: #e2e3dd;
}
 

#topwrap:after, #main:after, #contentwrap:after, #content:after, #footer:after { /* to ensure there is a character written after so that element contains floated elements */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
 
#accessnav { 
	display: none;  
}



/* ======= TOP STYLES ======= */

#topwrap {
	margin: 0 auto 10px;
	width: 960px;
	height: 135px;
	background-color: #fff;
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	
}

#top {

}

#logo { 
	float: left;
	margin: 25px 0 0 26px;
}

#linkedin {
	float: right;
	margin: 47px 70px 0 0;
}

#navwrap { 
	margin: 0 auto 10px;
	width: 960px;
	height: 50px;
	background-color: #535353;
	background: rgba(83, 83, 83, 0.93);  
	/* opacity: 0.93;
	-moz-opacity: 0.93;
	-khtml-opacity: 0.93;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
	filter: alpha(opacity=93); */
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	 
}

#navigation ul#nav-main {
	margin: 0; 
	float: left;
	display: block;
}

#nav-main li {  
	float: left;
	display: block;
	font: normal 1.25em BebasRegular, arial, helvetica, sans-serif; /* 20px */ 
	margin: 0;
}

#nav-main li a:link, #nav-main li a:visited {
	text-decoration: none;
	color: #88ce00; 
	height: 30px; /* +10px +10px padding = 50px height (and ensures here state fills nav) */
	padding: 10px 32px;
	/* border-right: 1px solid #7c7c7c; */
	background: transparent url('/images/bg-nav-border.png') no-repeat right top;
	display: block;
}

#nav-main li.last a {
	border-right: none;
	background: none;
}
 
#nav-main li a:hover, #nav-main li a:active { 
	color: #b7f441;
}

#nav-main li.here a, #nav-main li.parent-here a {
	background-color: #5486cd; 
	color: #fff;
	border-right: none;
	background-image: none;
}

.about #nav-main li.here a, .about #nav-main li.parent-here a {
	border-radius: 7px 0 0 7px;
}



/* ======= MAIN CONTENT STYLES ======= */

#main {
	margin: auto;
	width: 960px;
	background-color: transparent;
	padding-bottom: 50px;
}

#subnavwrap,
.homeboxes {
	float: left;
	width: 260px; /* +25 +25 padding = 310px */
	padding: 37px 25px 75px 25px;
	color: #fff;
	background-color: #535353;
	background: rgba(83, 83, 83, 0.93); 
	/* opacity: 0.93;
	-moz-opacity: 0.93;
	-khtml-opacity: 0.93;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
	filter: alpha(opacity=93); */
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	
}

.homeboxes {
	color: #d9d9d9;
	height: 269px; /* for uniform height (+ padding above = 381) */
}

#subnavwrap h2,
.homeboxes h2 { /* 16px */
	font: normal 1em BebasRegular, arial, helvetica, sans-serif;
	text-transform: uppercase; /* this is here for fallback fonts */
	color: #fff;
	border-bottom: 1px solid #7c7c7c;
	padding: 0 0 10px 19px;
	margin: 0;
}

#subnavwrap ul,
.homeboxes ul {
	margin-bottom: 2em;
}

#subnavwrap ul li,
.homeboxes ul li {
	font-size: 0.875em; /* 14px */
	list-style: none;
	background: transparent url('/images/blue-bullet.png') no-repeat 0 50%; 
	padding-left: 20px; /* moves text to write off of bullet */
	margin-left: 19px; /* to align with h2 */
}

#subnavwrap a:link, #subnavwrap a:visited,
.homeboxes a:link, .homeboxes a:visited {
	color: #88ce00;
	text-decoration: none;
}

#subnavwrap a:hover, #subnavwrap a:active,
.homeboxes a:hover, .homeboxes a:active {
	color: #b7f441;
}

#subnav {

}

#subnav li.here a {
	
}

#homebox1, #homebox2 {
	margin-right: 15px;
}


#contentwrap {
	float: left;
	width: 570px; /* +30px +30px padding = 630px */
	padding: 30px 30px 57px 30px;
	margin-left: 20px;
	background-color: #fff; 
	background: rgba(255, 255, 255, 0.83); 
	/* opacity: 0.83;
	-moz-opacity: 0.83;
	-khtml-opacity: 0.83;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=83)";
	filter: alpha(opacity=83); */
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	
}

.home #contentwrap {
	padding: 0;
	width: 960px;  
	height: 340px; /* height of bg image */
	margin: 0 0 27px 0;
	background: transparent url('/images/bg-home-feature.jpg') no-repeat left top; 
	-moz-border-radius: 15px; 
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 0 5px 0 0 #a8a8a8;
	-webkit-box-shadow: 0 5px 0 0 #a8a8a8;
	box-shadow: 0 5px 0 0 #a8a8a8;
}

.home #content {
	float: right;
	width: 630px;
	margin-top: 15px;
}

.home #content h1 {
	background-color: #88ce00;
	color: #fff;
	padding: 17px 0 20px 30px;
	border-bottom: none;
}

.home #content .homecontent {
	width: 430px; /* +20px +180px = 630px (width of .home #content */
	padding: 0 20px 20px 180px;
}

.homeboxes p, .homeboxes dt, .homeboxes dd, .homeboxes blockquote {
    margin-left: 19px;
    font-size: 0.875em;		
} 

.homeboxes dt, .homeboxes dd {
	line-height: 1.5;
}

#content p, 
#content li,
#content form,
#content td { /* 14px - affects sidebar as well */
	font-size: 0.875em 
}

#content #sidebar {
	float: right;
	width: 220px;
	margin: 0 0 15px 15px;	
	
}

#content #sidebar p {
	margin-top: 0;
}

/* event listing styles */

.eventitem {
	margin: 2em 0;
}

.home .eventitem {
	margin: 0;
}

.eventitem h2,
.eventitem p.brief {
	margin: 0;	
}

p.date {
	margin: 0;
	font-weight: bold;
}
 


/* ======= FOOTER STYLES ======= */

#footerwrap {
	width: 100%;
	background-color: #535353;
	background: rgba(83, 83, 83, 0.93); 
	/* opacity: 0.93;
	-moz-opacity: 0.93;
	-khtml-opacity: 0.93;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=93)";
	filter: alpha(opacity=93); */
	padding-top: 50px; 
}

#footer {
	margin: auto;
	width: 960px;
	color: #fff; 
	background: transparent url('/images/circle-footer-new2.png') no-repeat 587px top;
	padding-bottom: 40px;
}

#footer p,
#footer li,
#footer form,
#footer td { /* 12px */
	font-size: 0.75em;
	line-height: 1.7;
	margin: top: 0;
}

#footer ul {
	line-height: 1;
}

#footer li {
	list-style: none;
	margin-left: 0;
}

#footer a:link, #footer a:visited {
	color: #88ce00;
	text-decoration: none;
}

#footer a:hover, #footer a:active {
	color: #b7f441;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 { /* 24px */
	font: normal 1.5em BebasRegular, arial, helvetica, sans-serif;
	margin: 0;
	color: #88ce00;
	text-transform: uppercase;
	border-bottom: none;
	padding-bottom: 0;
}

#footer .col1 {
	float: left;
	width: 570px;
	padding-right: 160px; 
	margin-top: 10px;
}

#footer .col2 {
	float: left;
	width: 230px;
	margin-top: 10px;
}

#footer ul.links {
	margin-top: 0;
}

#footer p.copyright {
	margin-bottom: 0;
}

#footer .links li {
	display: inline;
	border-right: 1px solid #fff;
	padding: 0 7px 0 3px;
}

#footer .links li.first {
	padding-left: 0;
}
 
#footer .links li.last {
	border-right: none;
}

/* ======= FORM STYLES ======= */
form input.test { /* to hide test field on forms to prevent spam - may want to text indent it into oblivion - think i read that some browsers choke on display none*/
	display: none;
}

form fieldset {
	border: 1px solid #d9d9d9;
	padding: 30px;
}

form legend {
	padding: 0 5px;
	font-weight: bold;
}

form dl {
	margin-top: 0; 
}

form dd {
	margin-bottom: 1em;
}

form dd input { /* does not affect checkboxes */
	width: 300px;
}

#content form p,
#content form li { /* prevents double shrink */
	font-size: 100%;
}

form input, form select, form textarea { 
	color: #535353; 
	border: 1px solid #d9d9d9;
	font: normal 1em arial, helvetica, sans-serif;
	padding: 7px;
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	 
}

form input:focus, form textarea:focus, form select:focus {
	background-color: #f2fcde;
	border: 1px solid #88ce00;
}

form input.button, form input[type="button"], form input[type="submit"]  {
	padding: 7px;
	background-color: #535353;
	border: 0; 
	font: normal 1em BebasRegular, arial, helvetica, sans-serif;
	color: #fff;
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border-radius: 7px;	
}
  
form input.button:hover, form input[type="button"]:hover, form input[type="submit"]:hover {
	background-color: #88cd00;
	color: #fff;
}

form input[type="radio"], form input[type="checkbox"] { /* remove any border or bg from radios and checkboxes */
	border: none;
	background-color: transparent;
} 

.feedback {
	color: #d80000;
}

/* ======= TABLE STYLES ======= */


/* ======= MISCELLANEOUS ======== */

.login #subnav,
.contact #subnav,
.disclaimer #subnav,
.sitemap #subnav,
.error #subnav,
.thank-you #subnav
 { /* for sections without subnav hide the subnav div entirely */
	display: none;
}