/**************************/
/******* STRUCTURE ********/
/**************************/
* {
margin: 0;
padding: 0;
}
/*classes that are useful*/
.floatleft {
float: left;
}
.floatright {
float: right;
}
.margin-top {margin-top:10px;}
.clearboth {
clear: both;
}
/*good for debugging*/
.debug {
border: 5px solid #f00;
}
body {
font: 100%/1.5em "Myriad Pro", "Lucida Grande", "Helvetica Neue", "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
text-align: center;
color: #262626;
color: #121212;
height:100%;
background: #fff url(../img/body-small-bg.gif) repeat-x top left;

}

body#home {
background: #fff url(../img/body-bg.gif) repeat-x top left;
height:100%;
}

#package {
width: 816px;
min-height:830px;
height:100%;
text-align: left;
margin: 0 auto;
/*background: url(../img/package-bg.gif) repeat-y top right;
*/}

#header {
height: 264px;
background: url(../img/superman.jpg);
}

#home #header {
border-bottom: none;
}

#blog-header {
height: 172px;
background: url(../img/blog-bg.jpg);
background-color:#223051;
border-bottom: 1px solid #ccc;
}
#project-header {
height: 172px;
background: url(../img/gander.jpg);
border-bottom: 1px solid #ccc;
}
#content,#about-overview {
float: left;
clear: right;
margin: 30px 0 20px 20px;
width: 420px;
}

#content h3 {
margin: 20px 0 0 105px;
width: 350px;
}

/*
/* the following sets the margins for h2's to flow pretty
#content h2,#project-content h2,#about-overview h2,#blog-overview h2,#squad-overview h2,#contact h2 {
margin: 24px 0 15px 120px;
width: 350px;
}
/*the following sets the margins for paragraph text to flow nicely
#content p,#project-content p,#about-overview p,#blog-overview p,#about-overview ul,#client-overview p,#contact form,#contact p, #home ul {
margin: 10px 0 0 119px;
width: 320px;
}
*/
#content p.subfooter,#contact p.subfooter,#content p.copyright,#contact p.copyright {
margin: 0;
padding: 0;
margin-left: 2px;
}
/* Use the following if your page doesn't have a sidebar and you want the paragraph to stretch to 500px wide*/
#about-overview p,#client-overview p,#about-overview li,#about-overview ul,#blog-overview p,#contact p {
width: 500px;
}
/*
#content li,#project-content li,#about-overview li {
margin: 20px 0 20px 20px;
}
*/
#spacer {
clear: left;
height:1px;overflow:hidden;font-size:0.1em;
}
#arsenal {
height: 150px;
background-color: #fff;
clear: left;
}
.parsenal {
font: bold italic 1.1em;
margin: 0px 0 15px 120px;
}
.arsenal {
float: left;
margin: 0 0 0 33px;
}
.arrow {
margin: 2px 5px 0 -38px;
}
.arrow2 {
margin: 2px 0 0 -38px;
}
.logo {
float: left;
margin: -40px 0 0 -54px;
}

a.more-info {
font-size: 1.4em;
font-style: bold;
color: #fff;
}


#headerText {
float: left;
width: 490px;
}

#home #headerText {
margin-left: 300px;
color: #fff;
}
#home #headerText p a.more-info {
font-size: 1.4em;
font-style: bold;
color: #fff;
margin-left: 160px;
}
#home #headerText h2, #home #headerText ul, #home #headerText a {
margin-left: 26px;
}

a.header {
/*margin: 5px 0 0 7px;
*/float: left;
color: #069;
font-size: 110%;
font-weight: bold;
}
#check-out {
color: #069;
border-bottom: 1px dotted #069;
}
#check-out:hover {
color: #69c;
border-bottom: 1px dotted #69c;
}
/**************************/
/********** NAV ***********/
/**************************/
#nav {
width: 800px;
height: 64px;
text-align: right;
margin: 0 auto;
clear: none;
position: relative;
}
#logo {
width: 340px;
height: 35px;
text-align: left;
margin: 0 auto;
clear: none;
float: left;
position: relative;
}
#logo img {
margin: 35px 0 0 38px;
}
#logo p {
margin: -200px 0 0 210px;
font-size: 0.8em;
font-family: "Myriad Pro", "Lucida Grande", Lucida, Arial, sans-serif,serif;
font-style: italic;
color: #069;
display: none;
}

#logo:hover p {
/*display: block;
margin: 18px 0 0 0;*/
}
ul#menu {
list-style: none;
margin: 0;
padding-top: 10px;
float:right;
margin-top:22px;
}
ul#menu li {
display: inline;
}
ul#menu a {
font: 15px "Myriad Pro", "Lucida Grande", "Trebuchet MS", Tahoma, Arial, sans-serif,serif;
border-bottom: none;
color: #333;
padding:10px 10px 6px 10px;
margin-right:0;margin-left:0;
}
ul#menu a:hover {
color: #000;
background-color: #E3E9E9;
border-bottom: 1px solid #D9D9D9;
}
.spacer {
border-right: 1px solid #999;
padding-right: 1px;
}
#about .about,#clients .clients,#work .work,#blog .blog,#squad .squad,#contact .contact {
color:#C00902;
font-size:18px;
}
/**************************/
/******* SIDEPANEL ********/
/**************************/
#sidelinks {
float: right;
width: 162px;
margin: 15px 60px 0 0;
background-color: #fff;
}
#sidelinks p {
margin: 0px;
margin-bottom:0;
}
#sidelinks img {
float: left;/*width:100px;*/
/*	border:1px solid #999;
*/margin: 10px 0px 10px 0px;
}
/*Sidelinks a is slightly below here,sorry!*/
.text {
float: left;
}
.side {
float: left;
margin: 15px 0px 0px 0px;
width: 160px;
}
#recent-post {
margin-bottom: 100px;
}
/*.border {
padding: 4px 0 4px 15px;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
background: url(../img/arrow.gif) no-repeat;
background-position: left 5px;
margin: 0 0 0 0;
}*/
.border p {
/*line-height: 0.8em;
*//*padding: 4px;
*/}

.border p em {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #282828;
line-height:1.2em;

}
/*Sidelinks a is here because it's so tied up with short text,they're like close friends or naughty cousins*/
/******************************************/
/* Brady your CSS comments are ridiculous */
/******************************************/
#sidelinks a {
float: left;
margin: 5px 0 0 0;
border:none;
}
.short-text,#sidelinks a {
font-size: 12px;
line-height: 1.35em;
clear: both;
float: left;
}


#sidelinks a img {
margin: 0px 0 30px 0;
text-decoration:none;
padding: 0
}
.short-text {
color: #666;/*The devil made me do it*/
width:150px;
/*padding: 8px 0 0 18px;
*/}
/**************************/
/******** Contact *********/
/**************************/
#contact-header {
height: 172px;
background: url('../img/spam.jpg');
border-bottom: 1px solid #ccc;
}

.success {
	color: #0d4;
	font-size: 1.5em;
	font-weight: bold;
}

/**************************/
/******** CLIENTS *********/
/**************************/
#client-header {
height: 172px;
width: 816px;
background: url('../img/clientele.jpg');
border-bottom: 1px solid #ccc;
}

#client-list, #project-list {
width: 730px;
position: relative;
float: left;
}
#client-list p, .project-display p {
color: #2A2A2A;
margin-bottom:0px;
margin-top:10px;
}
#client-list a {
font-size: 1.1em;

}
.client-overview, .project-overview, #blog-overview {
width: 450px;
float: left;
margin: 00px 0 30px 00px;
list-style: none;
}
/*
.client-overview img {
margin: 0 20px 0 0;
}
*/

.client, .project-display {
/*padding: 0px 20px 20px 20px;
*/margin-top: 10px;
float: left;
width: 600px;
height: 11em;
border: 1px solid #fff;
}
.client img, .project-overview img {
margin-right: 50px;
}

#client-img-div {
    float: left;
    margin-right: 100px;
    width: 100px;
    height: 150px;
}

li.project-display h2{margin-top:0px;}

.client:hover, .project-display:hover {
/*border: 1px solid #D9D8E1;
*/}
.client h2,.client p {
display: none;
}

.client:hover h2,.client:hover p {
display: block;
margin-bottom:10px;
}
/**************************/
/****** PROJECT LIST ******/
/**************************/
/*
#project-list {
width: 730px;
position: relative;
background-color: #fff;
float: left;
}
/*
.project-overview {
width: 450px;
float: left;
margin: 50px 0 30px 100px;
list-style: none;
}
*/
/*
.project-overview img {
margin: 0 20px 0 0;
border: solid 1px #999;
}
*/

.project-display:hover p {
color: #000;
}
/**************************/
/******* SINGLE PROJ ******/
/**************************/
#details {
margin-top: 30px;
}
#details .short-text {
text-align: left;
color: #222;
/*font-style: italic;
*/margin: 5px 0 0 0px;
line-height:1.4em;

}

#single-header {
background: url(../img/header-blank.jpg);
height: 172px;
width: 816px;
}

.floaty {
margin: 10px 0 0 38px;
}
/*
#project-content {
float: left;
clear: right;
width: 500px;
background-color: #fff;
margin: 0 0 10px 0;
}
#project-content {
padding-bottom: 30px;
}
#project-content h3 {
margin: 20px 0 0 105px;
width: 350px;
}
#project-content p {
margin: 10px 0 0 119px;
width: 350px;
}
*/
#quote {
padding: 20px 0 20px 50px;
margin: 20px 0 0 20px;
width: 420px;
background-color:#eee;
}
#quote p {
font:  italic normal normal 14px/1.6em "Myriad Pro", "Lucida Grande", Arial, sans-serif,serif;
margin-left: 10px;margin-top:20px;width:340px;
}
.quote-open {
float: left;
margin: -5px 0px 0 -36px;
padding: 0;
}

.quote-close {
float: right;
margin: -15px 8px 0px 0;
padding: 0;
}
/**************************/
/******* SQUAD PAGE *******/
/**************************/
#squad-header {
height: 164px;
background: url(../img/jetpack.png) no-repeat;/*border-bottom:1px solid #ccc;*/
}

#squad-overview p {
float: left;
width: 450px;
margin: 0px 0 0 120px;
}
#squad-overview h3, #blog-overview h3 {
margin-bottom: 10px;
}
.member-left {
float: left;
clear: left;
padding:0;
margin:0;
}
.member-right {
float: left;
width: 360px;
margin:-10px 0 0 30px;
padding:0;
}


#squad-all, #client-all {
width: 816px;
position: relative;
float: left;
/*margin-top:-70px;
*/margin-top:-40px;}

#client-all {
margin-top:0;
}

.squad-list p {
margin: 0;
display: inline;
color: #1A1A1A;
/*font-size: 0.8em;
*/}
.squad-list h2 {
clear: left;
display: block;
font-size: 1.1em;
margin: 5px 0 0 0;
color: #000;
font-weight: bold;
}
.squad-list h3 {
margin: 0;
float: left;
font-size: 0.85em;
color: #999;
font-style: italic;
}
.squad-list a {
font-size: 0.85em;
border-bottom: 1px dotted #069;
}
.squad-list {
width: 440px;
float: left;
margin: 30px 0 30px 100px;
list-style: none;
}
.squad-list img {
margin: 0 30px 5px 0;
border: solid 1px #999;
}
.member {
float: left;
margin: 0px 0 50px 0;
width: 550px;
}
/**************************/
/****** about page ********/
/**************************/
#about-all {
width: 816px;
/*background: url(../img/package-bg.gif) repeat-y top right;
*/position: relative;
background-color: #fff;
float: left;
}
#about-header {
height: 172px;
background: url(../img/coffee.jpg);
border-bottom: 1px solid #ccc;
}
/**************************/
/********** 404 ***********/
/**************************/
.monster-text {
width: 250px;
float: right;
margin: 40px 60px 0 0;
}
#monster {
float: left;
width: 730px;
background-color: #fff;
}
#monster img {
float: left;
margin: 0 0 200px 0;
}
#monster h1 {
margin: 100px 30px 0;
width: 100%;
font-size: 3em;
color: #069;
}
/**************************/
/********* LINKS **********/
/**************************/
a {
font: 0.9em "Myriad Pro", "Lucida Grande", Arial, sans-serif;
font-style: italic;
color: #069;
text-decoration: none;
border-bottom: 1px dotted #069;
}
a:hover {
color: #69c;
border-bottom: 1px dotted #69c;
}
/**************************/
/********* forms **********/
/**************************/
form {
width: 550px;;
text-align: left;
margin-bottom: 40px;
color: #191919;
font: bold 1.1em/1.5em "Myriad Pro", "Lucida Grande", Arial, sans-serif,serif;
}
fieldset {
border: 0;
border: 1px solid #999;
padding: 18px;
margin: 30px 0 0 0;
background-color: #FFFCFF;
}
legend {
	font-size:1.2em;
}
form h3 {
clear: both;
padding: 5px 0px 10px 0px;
font-size: 14px;
}
form label {
display: block;
width: 310px;
margin-bottom: 2px;
margin-top:10px;
}
form input, textarea {
display: block;
margin-top: 4px;
font-size: 1.4em;
width: 400px;
color: #242424;
margin-bottom: 14px;
}
form select {
float: left;
display: block;
}
form input#submit{width:200px;}

/**************************/
/******* TYPOGRAPHY *******/
/**************************/
h1 {
font: 1em arial,sans-serif;
margin-bottom: 10px;
background-position: 46px 36px;
}
h2 {
font: 24px/1.2em "Myriad Pro", "Myriad Pro", "Lucida Grande", Arial, sans-serif,serif;
margin-bottom: 1em;
/*margin-top:1.8em;
*/font-weight: bolder;
color: #1A1A1A;

}
h2 a {

}
h3 {
font: 1.2em "Myriad Pro", "Lucida Grande", "Helvetica Neue", Arial, sans-serif,serif;
color: #111;
}
p {
margin-bottom: 24px;
margin-top:14px;
font: normal normal normal 14px/1.8em "Myriad Pro", "Helvetica Neue", "Lucida Grande", Arial sans-serif;
color:#2D2D2D;
color:#444;
letter-spacing:normal;
}

em {
font-style: italic;
}
strong {
font-weight: bold;
}
img {
float: left;
border: none;
margin: 0;
}
/**************************/
/********** LISTS *********/
/**************************/

ul {
margin: 20px 0 40px 0px;
}

li {
/*font-weight: bold;
*/font-size:14px;
line-height: 1.7em;
}
#home h2 {margin-top:30px;}
#home #content{margin-top:0px;}
#package li {
margin-left: 0;
padding-left: 1.5em;
position: relative;
left: -1.5em;
/*font-weight:bold;
*/line-height:2.1em;
color:#444;
}


#headerText h2 {
margin-top: -36px;
margin-left: 5px;
width: 290px;
font-size: 100%;
color: #404040;
line-height: 1.4em;
font-family: arial,sans-serif;
font-style: normal;
}

/**************************/
/********* FOOTER *********/
/**************************/
#footer, #footerwrapper {
clear: both;
width: 860px;
height:270px;
background-color: #11243E;
margin: 0 auto 0 auto;
position: relative;
border-bottom: 10px solid #000;
padding:0;
}

#footerwrapper {
	width:100%;
	border-top: 10px solid #0D0D0D;
	border-bottom: 10px solid #000;
	height:290px;
}

#footer dl {
width: 110px;
margin-left: 40px;
margin-right: 40px;
}

#subfooter, #subfooterwrapper {
width: 760px;
margin: 0 auto 0 auto;
position: relative;
height: 20px;
background-color: #22252a;
text-align: center;
}
#subfooter{padding-top:10px;}
#subfooterwrapper {width:100%;height:40px;}

p.subfooter {
font-family: arial,verdana,sans-serif;
margin:3px 0 0 2px;padding: 0;
text-align: left;
font-size: 10px;
color: #999;
font-style: italic;
float: left;
}
p.copyright {
/*font-family: arial,verdana,sans-serif;
*//*font-size: 0.8em;
*/text-align: right;
color: #999;
margin-top:0px;
clear: none;
}
.list {
list-style: none;
text-align: left;
padding: 0;
margin: 10px 40px 0 40px;
float: left;
}
.right {
list-style: none;
text-align: left;
padding: 0;
margin: 10px 0 0 10px;
float: left;
}
.list dd {
margin: 0;
padding: 0;
}
#footer h3 {
margin: 20px 0 20px 0px;
color: #DAE9E4;
font-size: 12px;
text-align: left;
}

#footer dt {
font: 1.3em/1.6em "Myriad Pro", "Lucida Grande", Arial, sans-serif,serif;
color: #fff;
font-style: italic;
}
#footer dd {
font: 14px/1.4em "Myriad Pro", "Lucida Grande", Arial, sans-serif,serif;
color: #C1E3E3;
}
#footer dd a {
color: #C1E3E3;
border-bottom: none;
}
#footer dd a:hover {
color: #fff;
border-bottom: 1px dotted #fff;
}
/*Image Replace the H1's*/
#about h1,#blog h1,#contact h1,#squad h1,#work h1,#clients h1,#home h1 {
text-indent: -9000px;
height: 100px;
}
#about h1 {
background: url(../img/h1/about.png) no-repeat;
background-position: 46px 36px;
height: 120px;
}
#home h1 {
background: url(../img/h1/home-header.png) no-repeat;
height: 140px;
background-position: 50px 0px;*/
width: 468px;
}
#blog h1 {
background: url(../img/h1/blog.png) no-repeat;
background-position: 46px 36px;
height: 200px;
}
#contact h1 {
background: url(../img/h1/contact.png) no-repeat;
background-position: 46px 36px;
height: 120px;
}
#squad h1 {
background: url(../img/h1/squad.png) no-repeat;
background-position: 46px 36px;
height: 200px;
}
#work h1 {
background: url(../img/h1/work.png) no-repeat;
background-position: 46px 36px;
height: 120px;
}
#clients h1 {
background: url(../img/h1/clients.png) no-repeat;
background-position: 46px 36px;
height: 120px;
}
#h1-image {
margin: 36px 0 0 44px;
}
#headerText h1.nobg {
background: none;
}