/*
 * Stylesheet for Glow
 * Author Dieter Orens dieter@dio5.com
 *
 */

html { 
	background: #000;
	height: 100%; 
	margin-bottom: 1px; 
}

body {
    background: #000;
    font: 11px Helvetica, Arial, sans-serif;
    color: #6e737b;
    line-height: 1.4;
	text-align:center;
}

.container{
	position:relative;
	width:950px;
	text-align:left;
	margin:0 auto;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
}

#logo{
	position:absolute;
	top:10px;
	left:0;
}

/* General styles
 * ------------------------------------------ */

a{
	color:#a8b25b;
	text-decoration:none;
}

a:hover{
	border-bottom:1px solid #e9e9e9;
}

a.noBorder:hover{
	border:none;
}

p{
	padding-bottom:12px;
}

.Page p, .StaffPage p{
	font-size:12px;
}

p.big{
	font-size:15px;
	line-height:1.3;
}

p.small{
	font-size:11px;
}

blockquote{
	font-style:italic;
}

em{
	font-style:italic;	
}

strong{
	font-weight:bold;
}

p.small strong{
	color:#000;
}

.Page #mainContent ul,
.Page #mainContent ol
{
	font-size:12px;
	margin:0 0 12px;
	padding-left:20px;
}

.Page #mainContent ul li{
	list-style:disc;
	margin-bottom:12px;
}

.Page #mainContent ol li{
	list-style:decimal;
	margin-bottom:12px;
}

/* Headings I wish there was consistency!
 * ------------------------------------------ */

h1, .HomePage h2, em#section{
	font-size:15px;
	font-style:normal;
	padding:11px 0 13px;
	line-height:1;
	color:#000;
	margin-bottom:14px;
	display:block;
}

.Page #mainContent h1,
.StaffPage #mainContent h1, 
h2, h3{
	font-size:15px;
	line-height:1.1;
	color:#000;
	margin-bottom:12px;
	padding:0;
}

/* Navigation
 * ------------------------------------------ */

/* MainNav
 * -------------------------------------- */

#mainNav{
	position:relative;
	background:#000;
	font-size:15px;
	line-height:1.5;
	height:52px;
	z-index:100;
}

#mainNav ul{
	padding:18px 0 0 275px;
}

#mainNav li{
	float:left;
	margin-right:16px;
}

#mainNav a{
	border:none;
	color:#6e737b;
}

#mainNav a:hover,
#mainNav a.current,
#mainNav a.section{
	color:#a8b25b;
}

#mainNav h1{
	padding:0;
	margin:0;
}

/* SubNav
 * -------------------------------------- */

#subNav a{
	font-size:15px;
	border:none;
	color:#6e737b;
	line-height:1.3;
}

#subNav ul{
	margin-bottom:8px;	
}

#subNav ul li{
	line-height:1.2;
}

#subNav ul a{
	font-size:11px;
}

#subNav a:hover,
#subNav a.current,
#subNav a.section{
	color:#000;
}

/* Column system from small to wide
 * ------------------------------------------ */

.col-1{ width:200px; float:left; }
.col-2{ width:234px; float:left; margin-right:42px; }
.col-3{ width:400px; float:left; }
.col-4{ width:447px; float:left; margin-right:27px; }
.col-5{ width:674px; float:left; }
.col-6{ width:722px; float:left; margin-right:27px; }

.col-small{ width:124px; float:right; }

/* Content
 * ------------------------------------------ */

#content{
	position:relative;
	background:#fff url(../images/content-bg.gif) repeat-x left top;
	min-height:300px;
	padding-bottom:36px;
	z-index:99;
}

.HomePage #content{
	padding-bottom:0;
}

#strapline{
	font-size:32px;
	line-height:1.5;
	color:#a8b25b;
	padding:10px 0 10px 275px;
}

#strapline strong{
	font-weight:normal;
}

#backLink{
	position:absolute;
	right:0;
	top:44px;
}

/* PortfolioPage/Home
 * ------------------------------------------ */

.PortfolioPage #mainContent .col-2,
.HomePage #content .col-2{
	height:354px;
	overflow:hidden;
	width:200px;
	padding-right:34px;
}

.PortfolioPage #content{
	padding-bottom:10px;
}

.PortfolioPage em#section,
.HomePage h2{
	margin-bottom:0;
}

.PortfolioPage h1{
	margin:0;
	padding-top:16px;
}
.HomePage .col-2 h3{
	padding-top:16px;
	line-height:1;
}

.PortfolioPage #secondaryContent{
	border-top:1px solid #d6d6d6;
	padding-top:14px;
}

.PortfolioPage blockquote{
	color:#a8b25b;
	font-size:15px;
}

#imageTitle{
	position:absolute;
	padding:0;
	top:79px;
	left:276px;
	color:#6e737b;
}

#slides{
	height:354px;
	overflow:hidden;
}

#slidesNav{
	overflow:hidden;
	position:absolute;
	top:78px;
	right:0;
}
#slidesNav li{
	float:left;
	margin-left:6px;
}
#slidesNav li a{
	font-size:12px;
	color:#6e737b;
}
#slidesNav li a:hover,
#slidesNav li a.activeSlide{
	color:#000;
	border:none;
}

#caseStudy{
	margin:0 0 0 24px;
	width:250px;
}

#caseStudy p{
	width:116px;
}

#caseStudy .viewPast{
	width:auto;
	clear:both;
	padding:20px 0 0;
}

#caseStudy img{
	float:right;
}

/* Portfolio Holder
 * ------------------------------------------ */

#portfolio{
	overflow:hidden;
	position:relative;
}

#portfolio li{
	position:relative;
	float:left;
	width:230px;
	height:94px;
	margin-right:10px;
	padding-top:138px
}

#portfolio li.last{
	margin-right:0;
}

#portfolio h2{
	margin-bottom:8px;
}

#portfolio p{
	padding-bottom:6px;
}

#portfolio img{
	position:absolute;
	top:0;
	left:0;
}

/* Staff
 * ------------------------------------------ */

.StaffPage #mainContent h1{
	margin:12px 0 0;
}

.StaffHolderPage h2{
	margin:10px 0 6px;
	line-height:1.2;
}
.StaffPage .col-1 h2{
	color:#6e737b;
	margin:14px 0 10px;
}

#staff{
	position:relative;
	overflow:hidden;
}

#staff li{
	position:relative;
	width:220px;
	height:250px;
	float:left;
	margin-right:7px;		
}

#staff li img{
	background:#8f9295;
	width:220px;
	height:125px;
	display:block;
}

#staff li.last{
	margin-right:0;
}

#staff h2 span{
	display:block;
	font-size:12px;
	font-weight:normal;
	color:#6e737b;
}

#staff p{
	padding-bottom:6px;
}

/* Clients
 * ------------------------------------------ */

#clients{
	position:relative;
	overflow:hidden;
}

#clients li{
	position:relative;
	width:180px;
	height:99px;
	float:left;	
}

.ClientHolderPage h2{
	margin:0;
	line-height:1;
}

/* Page Aside
 * ------------------------------------------ */

#aside h2{
	margin-bottom:0;
	font-size:11px;
	line-height:1.5;
}

#aside p
{
	padding-bottom:6px;
	font-size:11px;
	line-height:1.4;
}

.item{
	margin-bottom:32px;
}

/* Contact
 * ------------------------------------------ */

#contact{
	background:#8f9295;
	color:#fff;
	height:136px;
	display:none;
}

#contact .container{
	padding-top:26px;
	height:110px;
}

#contact h3{
	color:#fff;
}

#contactTitle{
	background:url(../images/contact.png) no-repeat left top;
	width:179px;
	height:22px;
	color:#fff;
	font-size:13px;
	padding:3px 0 0 14px;
	margin:0 0 0 -14px;
	position:absolute;
	top:52px;
	left:0;
	text-align:left;
	z-index:1000;
}

#contactTitle a{
	color:#fff;
	display:block;
	font-size:13px;
	width:179px;
	height:22px;
}

#contactTitle a:hover{
	color:#ccc;
}

.col{
	width:330px;
	float:left;
}

.fn{
	display:none;
}

/* ShowReel
 * ------------------------------------------ */

a#showReel{
	position:absolute;
	right:0;
	top:18px;
	color:#a8b25b;
}

#reel{
	display:none;
}

.ui-widget-overlay{
	background:#000;
	opacity:.8;
	position:absolute;
	left:0;
	top:0;
}

/* Footer
 * ------------------------------------------ */

#footer{
	position:relative;
	background:#000 url(../images/footer-bg.gif) repeat-x left top;
	padding-top:80px;	
}

#footer .container{
	padding-left:275px;
	width:675px;
}

#footer .col-1{
	margin-right:42px;
}

#footer h2{
	color:#6e737b;
	line-height:1.1;
	margin:0 0 6px;
	padding:0;
}

#footer h3{
	font-size:11px;
	line-height:1.5;
	font-weight:normal;
	color:#fff;
	padding:0;
	margin:0;
}

#footer p{
	font-size:11px;
	line-height:1.2;
	padding-bottom:4px;
}

#footer a{
	border:none;
}

p#copy{
	clear:both;
	position:relative;
	background:url(../images/g.gif) no-repeat right 40px;
	height:16px;
	padding:87px 0 40px;
}

h2#linkedIn{
	background:url(../images/linkedIn.png) no-repeat left top;
	text-indent:-30000px;
	width:83px;
	height:22px;
	margin-top:0px;
}

/* Forms
 * ------------------------------------------ */

legend{
	display:none;
}

input.text,
textarea{
	border:1px solid #e4e4e4;
	width:150px;
	padding:2px;
	margin:2px 0 6px;
}

textarea{
	height:50px;
}

input.action{
	border:none;
	color:#a8b25b;
	background:#fff;
}

input:focus, textarea:focus {
    background: #fefeda;
    border-color: #aaa;
    box-shadow: 0px 0px 8px #99ffff;
    -webkit-box-shadow: 0px 0px 8px #66ccff;
    -moz-box-shadow: 0px 0px 8px #66ccff;
}

.error, .message{
	color:#ff0000;
	display:block;
}

/* Footer - Form
 * ---------------- */

#footer form{
	margin-top:8px;
}

#footer .field{
	position:relative;
	overflow:hidden;
	clear:both;
	padding-bottom:4px;
}

#footer label{
	width:40px;
	display:block;
	float:left;
	margin-top:2px;
}

#footer input.text{
	background:#2d2d2d;
	color:#fff;
	border:1px solid #2d2d2d;
	padding:1px;
	float:right;
}

#footer input.action{
	background:#000;
}

/* Contact - Form
 * ---------------- */
#contact form{
	position:relative;
}

#contact input.text,
#contact textarea{
	width:154px;
	background:#eee;
	padding:1px;
	margin-bottom:12px;
}

#contact textarea{
	width:276px;
	height:62px;
}

#contact .field{
	float:left;
	position:relative;
}

#contact #Email,
#contact #Company{
	float:right;
}

#contact #colMessage{
	margin-left:14px;
}

#contact input.action{
	background:#8f9295;
	color:#fff;
	position:absolute;
	right:0;
	bottom:0;
}

#contact label.error, #contact .message{
	color:#ff9999;
	position:absolute;
	left:0;
	bottom:-2px;
}

/* wysiwyg styles
 * ------------------------------------------ */

img.right {	float: right; margin:0 0 10px 20px; }
img.left { float: left;	margin:0 20px 10px 0; }
img.leftAlone {	display:block; clear:both; }
img.center { float: none; margin-left: auto; margin-right: auto; display: block; }