/* ----------------------------------------------------------------------------- 
COLOR

White				#FFFFFF
Dark Gray			#333333
Medium Gray			#666666
Light Gray			#DEDEDE
Red					#730324
Dark Blue			#456382
Medium Blue			#8BA2BD
Light Blue			#B4C4D4
White Blue			#DFE3E5

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


/* ----------------------------------------------------------------------------- 
RESET CSS http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
----------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;}
body {
	line-height: 1;}
ol, ul {
	list-style: none;}
blockquote, q {
	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;}

/* remember to define focus styles! */
:focus {
	outline: 0;}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;}
del {
	text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;}


/* ----------------------------------------------------------------------------- 
GLOBAL
----------------------------------------------------------------------------- */
body {
	background:#fff;
	color:#333333;
	font-family:"Calibri", tahoma, arial, sans-serif;
	margin:0 auto;
	line-height:1.2;}

hr {
	background:none;
	border:0px;
	height:0px;
	clear:both;}


/* ----------------------------------------------------------------------------- 
STRUCTURE
----------------------------------------------------------------------------- */
#header-outer, #main-outer, #footer-outer {
	width:990px;
	margin:0 auto;}

#header-outer {
	margin-top:20px;}

#main-outer {
	margin-top:20px;}

.home #content {
	background:#DFE3E5 url(../img/superhero-home.jpg) 0 0 no-repeat;}

.about #content {
	background:#DFE3E5 url(../img/canoe-about.jpg) 0 0 no-repeat;}

.services #content {
	background:#DFE3E5 url(../img/feet-dock-services.jpg) 0 0 no-repeat;}

.clients #content {
	background:#DFE3E5 url(../img/businessman-clients.jpg) 0 0 no-repeat;}

.case-studies #content {
	background:#DFE3E5 url(../img/lifesaver-portfolio.jpg) 0 0 no-repeat;}

.contact #content {
	background:#DFE3E5 url(../img/skyline-contact.jpg) 0 0 no-repeat;}

.post {
	width:575px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:20px;
	float:right;
	background:rgb(255,255,255); /* The Fallback */
	background-color:rgba(255,255,255,0.9);
	min-height:450px;}

#footer-outer {
	clear:both;
	margin-top:40px;
	margin-bottom:30px;}


/* ----------------------------------------------------------------------------- 
TYPOGRAPHY
----------------------------------------------------------------------------- */
p {
	font-size:14px;
	line-height:1.4;
	margin-bottom:10px;}

h1#logo {
	text-indent:-9999px;
	height:75px;
	margin-bottom:20px;
	background:url(../img/logo-dc-screen.png) 0 0 no-repeat;}

h1#logo a {
	width:250px;
	height:75px;
	display:block;}

h2 {
	font-size:30px;
	margin-bottom:6px;
	color:#730324;}

h3 {
	font-size:22px;
	margin-bottom:6px;
	color:#666666;}

h4 {
	font-size:18px;
	margin-bottom:4px;
	color:#8BA2BD;}

ul {
	margin-left:30px;
	margin-bottom:10px;}

ul li {
	list-style:disc;
	font-size:14px;
	margin-bottom:3px;}

.item {
	font-size:12px;
	text-align:center;}


/* ----------------------------------------------------------------------------- 
LISTS
----------------------------------------------------------------------------- */
#footer ul li {
	font-size:12px;}

#footer ul, #footer ul li {
	list-style-type:none;
	margin:0px;}


#nav ul {
	text-align:center;}

#nav ul li {
	display:inline;
	text-transform:uppercase;
	padding:32px;
	font-size:14px;}

#nav ul li a {
	color:#666666;
	text-decoration:none;}

#nav ul li a:hover {
	color:#333333;
	text-decoration:none;}


/* ----------------------------------------------------------------------------- 
LINKS
----------------------------------------------------------------------------- */
a {
	color:#456382;
	text-decoration:underline;}

a:hover {
	color:#8BA2BD;
	text-decoration:none;}

a.item {
	text-decoration:none;}

a:hover.item {
	color:#8BA2BD;}

a.twitter {
	width:20px;
	height:20px;
	display:block;
	float:left;
	text-indent:-9999px;
	background:url(../img/icn-twitter-20x20.png) 0 0 no-repeat;}

a.facebook {
	width:20px;
	height:20px;
	display:block;
	text-indent:-9999px;
	background:url(../img/icn-facebook-20x20.png) 0 0 no-repeat;}


/* ----------------------------------------------------------------------------- 
IMAGES
----------------------------------------------------------------------------- */
.slideshow {
	height:375px;
	width:990px;
	margin:10px auto 30px;}

.slideshow img {
	}

img.portrait {
	float:right;
	margin:0 0 10px 20px;
	padding:2px;
	border:solid 2px #B4C4D4;}


/* ----------------------------------------------------------------------------- 
CLEAR
----------------------------------------------------------------------------- */
.clear {
	clear: both;}

* html .clearfix, * html .section, * html .navi,  * html #content {
	display: inline-block;}

.clearfix:after, .section:after, .navi:after,  #content:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	visibility: hidden;}



/* ----------------------------------------------------------------------------- 
CASE STUDIES
----------------------------------------------------------------------------- */
.section .item {
	border:8px #DEDEDE solid;
	display:inline;
	float:left;
	height:115px;
	margin:30px 0 0 30px;
	overflow:hidden;
	position:relative;
	width:175px;}

.section .item span {
	color:#EFEFEF;
	/*display: none;}

.section .item:hover span {*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* first */
	filter: alpha(opacity = 100); /* second */
	opacity: 1.00;
	background:#9D687A /*#C0C0C0 #730324*/;
	bottom: 0;
	display: block;
	font-size: 1.4em;
	font-weight:bold;
	padding:16px 8px 8px;
	position: absolute;
	width: 159px;
	height:99px;}

.section .item:hover span {
	background:#F3F3F3;
	color:#8BA2BD;}

* html .section .item:hover span {
	width: 175px;}

.section .item span strong, .section .item:hover span strong {
	display: block;}

a.gallery {
	 display:none;}