/* Credits

   Copyright (c) 2008 New Angle Media.

   Blueprint CSS Framework 0.7.1
   http://blueprintcss.googlecode.com
   Copyright (c) 2007-2008
   
   Son of Suckerfish Dropdowns
   By Patrick Griffiths and Dan Webb
   http://htmldog.com/articles/suckerfish/dropdowns/
   
   IE5.5+ PNG Alpha Fix
   (c) 2004-2008 Angus Turnbull http://www.twinhelix.com
   

TABLE OF CONTENTS
	-Fixes, hacks, etc
	-Reset
	-Layout
	-Nav
	-Typography
	-Images/Flash
	-#leftCol forms
	
*/


/*Generic  Classes. Fixes, hacks, etc
=============================================================*/

.clear {clear: both;}

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

/*Reset
=============================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, #leftCol form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  padding: 0;  margin: 0;
  border: 0;
  font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;
  vertical-align: baseline;
}

body { line-height: 1.5; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a, a:hover, a:active, a img { border: none; outline: 0; }

/*Layout
=============================================================*/

body {
	background: #002740 url(../images/bg.gif) repeat-x 0 0;
}


div#header {
	background: url(../images/header.jpg) no-repeat center 0;
	width: 100%; height: 104px;
	text-align: center;
}

div#content {
	position: relative;
	background: url(../images/content_bg.jpg) no-repeat center 0;
	width: 800px;
	padding: 0px 100px 40px 100px; margin: 0 auto;
	text-align: left;
}

div#social {
	width: 200px;
	float: right;
	margin: -43px -57px 0 0;
}

div#movie {
	position: relative;
	width: 800px;
	height: 224px;
	padding: 16px 0 0 0; margin: 0 0 .3em 0;
}

#leftCol {
	width: 520px;
	float: left;
	margin: 1.6em 0 0 0;
}

#rightCol {
	width: 250px;
	float: left;
	margin: 1.6em 0 0 30px;
}

#socCol {
	width: 250px;
	float: left;
	margin: 1.6em 0 0 30px;
}

#rightCol .rightColBox {
	width: 210px;
	padding: 20px;
	background: url(../images/leftCol_boxBg.png) no-repeat 0 0;
}

div#footer {
	position: relative;
	background: url(../images/footer_bg.gif) repeat-x 0 0;
	margin: 0 auto;
	clear: both;
}

div#footer p {
	background: url(../images/footer_img.jpg) no-repeat center 0;
	width: 1000px;
	margin: 0 auto;
}



/*Nav
=============================================================*/

ul#nav {
	position: relative;
	margin: 0 auto;
	width: 800px; height: 92px;
	padding: 0;
	list-style: none;
	z-index: 10;
}

ul#nav li {
	position: relative;
	float: left;
	padding: 0;
	height: 92px;
}

ul#nav li a {
	display: block;
	background: url(../images/nav_bg.jpg) repeat-x 0 0;
	text-indent: -9999px;
	width: 160px; height: 92px;
	padding: 0; margin: 0;
}

ul#nav li.about {z-index: 60}
ul#nav li.about a {background-position: 0 0;}
ul#nav li.about:hover a {background-position: 0 -92px;}

ul#nav li.press {z-index: 50}
ul#nav li.press a {background-position: -160px 0;}
ul#nav li.press:hover a {background-position: -160px -92px;}
ul#nav li.press ul {margin-left: 15px;}

ul#nav li.work {z-index: 40}
ul#nav li.work a {background-position: -320px 0;}
ul#nav li.work:hover a {background-position: -320px -92px;}
ul#nav li.work ul {margin-left: 22px;}

ul#nav li.studio {z-index: 30}
ul#nav li.studio a {background-position: -480px 0;}
ul#nav li.studio:hover a {background-position: -480px -92px;}

ul#nav li.contact {z-index: 20}
ul#nav li.contact a {background-position: -640px 0;}
ul#nav li.contact:hover a {background-position: -640px -92px;}

ul#nav li ul {
	position: absolute; top: 60px; left: -9999em;
	padding: 0; margin: 0;
	list-style: none;
	width: 500px;
	z-index: 100;
}

ul#nav li ul li {
	float: left;
	padding: 10px 0 0 0;
	background: none;
	height: 40px;
}

ul#nav li ul li a {
	background: none;
	font: .75em/18px Verdana, Arial, Helvetica, sans-serif; color: #aee7ff; text-indent: 0; text-decoration: none;
	border-right: 1px dotted #488daa;
	padding: 0px 25px 0px 25px;
	width: auto; height: 17px;
	float: left;
	vertical-align: top;
}

ul#nav li ul li a:hover {color: #fff;}

ul#nav li ul li a.first {border-left: 1px dotted #488daa;}

ul#nav li:hover ul {left: auto;}

ul#nav li:hover ul, ul#nav li.sfhover ul {left: 0px;}

#rightCol ul.navL2 {
	position: relative; top: -10px;
	list-style: none;
	width: 250px;
	margin-bottom: 30px;
}

#rightCol ul.navL2 li {
	background: url(../images/navL2li_bg.png) no-repeat 0 bottom; 
	padding: 0; margin: 0;
}

#rightCol ul.navL2 a {
	display: block;
	background: url(../images/navL2_bg.png) repeat-x 0 0;
	width: 250px; height: 43px;
	padding: 0; margin: 0;
	font: .85em/39px Verdana, Arial, Helvetica, sans-serif;color: #aee7ff;text-decoration: none;
	cursor: pointer;
}

#rightCol ul.navL2 a:hover {
	color: #fff;
	background-position: 0 -43px;
}

#rightCol ul.navL2 li.active a {
	color: #ff9a5a;
	background-position: 0 -86px;
}


#rightCol ul.navL2 li ul {
	background: url(../images/navL2_ul_bg.png) no-repeat 0 0;
	list-style: none;
	padding: 0; margin: 0;
}

#rightCol ul.navL2 li ul li {
	background: none;
	margin: 1px 0;
	padding: 0;
	height: auto;
}

#rightCol ul.navL2 li ul li a , #rightCol ul.navL2 li.active ul li a {
	background: url(../images/navL2_a_bg.png) repeat 0 0;
	display: block;
	width: 230px; height: auto;
	padding: 4px 10px; margin: 0;
	font: .7em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #aee7ff; text-decoration: none;
}

#rightCol ul.navL2 li ul li a.first {padding-top: 14px;}

#rightCol ul.navL2 li ul li a.last {padding-bottom: 18px;}

#rightCol ul.navL2 li ul li a:hover {color: #ff9a5a;}

#rightCol ul.navL2 li ul li a.active {color: #ff9a5a;}




/*Typography
=============================================================*/

h1 {
	height: 33px;
	padding-top: 20px;
	font: normal 1.5em/26px Georgia, "Times New Roman", Times, serif; color: #6cb0cd;
}

h1 span.active {color: #fff;}

h1.infocus {
	font: italic  1.0em/1.2em Arial, Helvetica, sans-serif; color: #fff; text-align: right;
	background: url(../images/logo_infocus.png) no-repeat 0 0;
	height: 83px;
	border-bottom: 1px solid #377e9e;
	padding: 0; margin: 0 0 10px 0;
}

h2 {
	font: normal 1.4em/1.2em Georgia, "Times New Roman", Times, serif; color: #fff;
	margin: 0 0 .3em 0;
}


h2.infocus {
	background: url(../images/newsletter_icon1.png) no-repeat left 0;
	font: italic 1.2em/1.2em Georgia, "Times New Roman", Times, serif; color: #fff;
	padding: 17px 0 10px 36px; margin: 1.2em 0 .3em 0;
	clear: both;
}

#movie h2 {
	font: normal 1.3em/1.2em Georgia, "Times New Roman", Times, serif; color: #aee7ff;
	width: 440px;
	margin: 0 0 0 20px;
}


#leftCol h3.leadIn {
	position: relative;
	line-height: 1.2em;
	padding: 0 100px 8px 140px; margin: 1.2em 0 .3em 0;
	border-bottom: 1px solid #295b78;
}

#leftCol h3, #leftCol a.headerLink {
	font: normal 1.2em/1.2em Georgia, "Times New Roman", Times, serif; color: #fff;
	margin: .9em 0 .2em 0;
	display: block;
	position: relative;
}

 #leftCol a.headerLink { clear: both;}

#leftCol a span, #leftCol h3.leadIn a  {
	position: absolute; top: 3px; right: 0;
	width: auto; height: 25px;
	padding: 0 27px 0 0;
	background: url(../images/btn_linkBlue_orange.png) no-repeat right 0;
	font: italic .55em/23px Verdana, Arial, Helvetica, sans-serif; color: #aee7ff; text-decoration: none; text-align: right;
	display: block;
	cursor: pointer;
}


#leftCol a.headerLink:hover {color: #ff9a5a; text-decoration: none;}

#leftCol a.headerLink:hover span, #leftCol h3.leadIn a:hover {
	background: url(../images/btn_linkBlue_orange.png) no-repeat right -25px;
	color: #ff9a5a;
}


#leftCol a.inlineLink, #rightCol a.inlineLink, #movie a.inlineLink {
	display: block;
	width: auto; height: 25px;
	padding: 0 0 0 30px ; margin: .6em 0 2.4em 0;
	background: url(../images/btn_linkBlue.png) no-repeat 0 0;
	font: italic .75em/24px Verdana, Arial, Helvetica, sans-serif;	 color: #aee7ff; text-align: left; 	text-decoration: none;
}

#leftCol a.inlineLink:hover, #rightCol a.inlineLink:hover, #movie a.inlineLink:hover {
	background: url(../images/btn_linkBlue.png) no-repeat 0 -25px;
	color: #fff; text-decoration: none;
}

h4 {
	font: normal .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #fff;
	margin-bottom: .2em;
}

h4.deck, h4.dateline, h5 {
	font: italic normal .9em/1.2em Verdana, Arial, Helvetica, sans-serif; color: #aee7ff;
	margin-bottom: .6em;
}

h4.deck {clear: left;}

h4.dateline {font-size: .8em;}

h5 {font-size: .7em;}

#leftCol a {font: .75em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #ff9a5a; text-decoration: none;}

#leftCol a:hover {text-decoration: underline;}

#leftCol p a {font-size: 1.0em;}

#leftCol p.leadIn {
	position: relative; top: 0; left: 140px;
	font: .7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #e8f0f3;
	width: 380px;
	margin: .6em 0 2.4em 0;
	min-height: 4.2em;
}

#leftCol h4.leadIn {
	position: relative; top: 0; left: 140px;
	font: italic .7em/1.4em Verdana, Arial, Helvetica, sans-serif;
	width: 380px;
	margin: .6em 0 0 0;
}

#movie p {
	font: .75em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #fff;
	width: 440px;
	margin: 20px;
}

#leftCol p, #leftCol li  {
	font: .75em/1.6em Verdana, Arial, Helvetica, sans-serif; color: #d1e1e8;
	margin-bottom: 10px;
}

#leftCol ul {padding-left: 16px; margin-bottom: 10px;}

#leftCol li {margin: 0;}

#leftCol li a {font-size: 1.0em;}

#rightCol  h3 {border: 0;}

#rightCol  h6 {
	font: bold .7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #fff;
	margin: .6em 0 0 0;
}

#rightCol .rightColBox  h3 {
	font: normal 1.1em/1.1em Georgia, "Times New Roman", Times, serif; color: #fff;
	margin: 0 0 .3em 0;
}

#rightCol .rightColBox p, #rightCol .rightColBox li  {
	font: .7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #aee7ff;
	margin: 0 0 1.2em 0;
}

#rightCol .rightColBox p.dateline {
	font-style: italic;
	margin: 0;
}


#rightCol .rightColBox p.highlight {
	font-weight: bold;
	color: #ff9a5a;
}

#rightCol .rightColBox ul {padding-left: 16px; margin-bottom: 1.2em;}

#rightCol .rightColBox ul li {margin: 0;}

#rightCol .rightColBox a:hover {text-decoration: underline;}

#rightCol a {font: .7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #ff9a5a; text-decoration: none;}

#rightCol .rightColBox dl {margin-bottom: 1.2em;}

#rightCol .rightColBox dl dt {font:.7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #aee7ff;}

#rightCol .rightColBox dl dd {
	font: .7em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #d1e1e8;
	margin-bottom: .6em;
}

div#footer p {
	font: .8em/1.0em Verdana, Arial, Helvetica, sans-serif; color: #488daa;
	text-align: center;
	padding: 25px 0 60px 0;
}

hr {
	line-height: 1px;
	height: 1px;
	border: 0;
	background-color: #377e9e;
	color: #377e9e;
	clear: both;
	display: block;
	margin: 0 0 .6em 0;
}

blockquote {
	background: url(../images/quote_left.png) no-repeat 0 0;
	font: normal 1.2em/1.2em Georgia, "Times New Roman", Times, serif; color: #f5e4c0; 
	padding: 6px 20px;
}

blockquote p {
	position: relative; top: -26px;
	background: url(../images/quote_right.png) no-repeat right 0;
	font: italic .6em/1.2em Verdana, Geneva, sans-serif; color: #d1e1e8; 
	padding: 3.6em 0 0 0;
}
strong.white {
	color: #FFF;
}


/*Images/Flash
=============================================================*/

.video320 {position: absolute; top: 0; right: -1px;}

#logo {margin: 17px auto 0 auto;}

h3.leadIn img, #leftCol a.headerLink img {
	position: absolute; top: 0; left: 0;
	border: 1px solid #295b78;
}

img.imgBody {
	background: url(../images/imgBg.png) no-repeat bottom center;
	float: right;
	padding-bottom: 6px; margin: 4px 0 10px 10px;
}

img.sideBar {
	background: url(../images/imgBg.png) no-repeat bottom center;
	padding-bottom: 6px; margin: 4px 0 10px 0px;
}

#leftCol ul.thumbs {
	display: block;
	width: 540px;
	padding: 0; margin: 0 0 2.0em 0;
	list-style-type: none;
	float: left;
}

#leftCol ul.thumbs li {
	position: relative;
	width: 160px; height: 126px;
	float: left;
	padding: 0; margin: 0 20px 15px 0;
	background: url(../images/case_study/thumbBg.png) no-repeat 0 0;
}

.hidden, input[type=hidden] {display: none; visibility: hidden; height: 0px; line-height: 1px; padding: 0; margin: 0; position: absolute; top: 0; left: 0;}

#leftCol ul.thumbs li img {
	width: 158px;
	border: 1px solid #4591b4;
}

#leftCol ul.thumbs li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 126px;
	padding: 0;
	background: url(../images/case_study/thumb_overlay.png) no-repeat 0 1px;
	cursor: pointer;
	z-index: 10;
}

#leftCol ul.thumbs li a:hover {background: url(../images/case_study/thumb_overlay.png) no-repeat 0 -125px;}

h3 img.icon {position: absolute; top: -5px; right: -15px;}

/*#leftCol forms
=============================================================*/

#leftCol form {position: relative; left: -20px;}

#leftCol form fieldset {}
	
#leftCol form legend {
    font: 1em/1.2em Georgia, "Times New Roman", Times, serif; height: auto;}
	
#leftCol form label {
	font: bold .9em/1.2em Verdana, Geneva, sans-serif; color: #aee7ff;
	display: block;
	margin: 0 0 2px 0;
	width: 235px;
}

#leftCol form input, #leftCol form select, #leftCol form textarea {
	font: 1.0em/1.2em Verdana, Geneva, sans-serif; color: #000;
	display: block;
	width: 235px;
	padding: 3px 0 3px 0; margin: 2px 0 4px 0;
	background: #dfeff7 url(../images/input_bg.jpg) repeat-x 0 0;
	border-bottom: 1px solid #fff; border-top: 1px solid #00476a; border-left: 1px solid #6da0ba; border-right: 1px solid #6da0ba;
}

#leftCol form select {width: 239px; }

#leftCol form textarea {
	height: 110px;
	background-image:url(../images/textarea_bg.jpg)
}

#leftCol form ol {padding: 0;margin: 0;}

#leftCol form li {
	list-style-type: none;
	padding: 4px 0 0 0; margin: 0 0 0 20px;
	line-height: 1.2em;
	float: left;
	display: inline;
}

#leftCol form li.clear {
	width: 95%; height: 1px;
	list-style-type: none;
	border-top: 1px solid  #256a8d;
	paddinh: 0; margin: 10px 0 5px 20px;
	/*
	line-height: 3em;
	margin: .3em 0px .6em 5px;
	*/
}

#leftCol form li.span {
	width: 95%; height: auto;
	list-style-type: none;
	/*
	line-height: 3em;
	margin: .3em 0px .6em 5px;
	*/
	float: left; clear: both;
}

#leftCol form fieldset fieldset {
	border: none;
  	padding:0; margin: 3px 0 0 0;
	background: none; 
}

#leftCol form fieldset fieldset legend {
	font: bold .7em/1.2em Verdana, Geneva, sans-serif; color: #fff;
	padding: 10px 0 3px 0;
}

#leftCol form fieldset fieldset label {
	position: relative;
	padding: 1px 0 4px 0; margin: 0 0 0 18px;
	font-weight: normal;
}

#leftCol form fieldset fieldset.yn {padding-top: 0; margin-top: 0;}

#leftCol form fieldset fieldset.yn label {
	float: left;
	width: 35px;
	padding: 2px 0 0 0; margin-top: 1px;
}

#leftCol form fieldset fieldset.yn legend {padding-top: 0; margin-top: 0;}

#leftCol form label input  {
	position: absolute; top: 1px; left: -18px;
	width: 16px; height: 16px;
	margin: 0;
}
	
#leftCol form input.btnSubmit {
	display: block;
	width: auto; height: 25px;
	padding: 0 0 0 30px ; margin: 10px 0 2.4em -3px;
	background: url(../images/btn_linkBlue_orange.png) no-repeat 0 0;
	font: bold .9em/24px Verdana, Arial, Helvetica, sans-serif; color: #aee7ff; text-align: left; 	text-decoration: none;
	border: 0;
	cursor: pointer;
}

#leftCol form input:hover.btnSubmit {
	background-position: 0 -25px;
	color: #ff9a5a; 
}

/* Infocus opt-in form
=============================================================*/

form#infocus {}

form#infocus fieldset {}
	
form#infocus legend {font: 1em/1.2em Georgia, "Times New Roman", Times, serif; height: auto;}
	
form#infocus label {
	font: bold .9em/1.2em Verdana, Geneva, sans-serif; color: #aee7ff;
	display: block;
	margin: 0 0 2px 0;
		width: 210px;
}

form#infocus input {
	font: 1.0em/1.2em Verdana, Geneva, sans-serif; color: #000;
	display: block;
	width: 210px;
	padding: 3px 0 3px 0; margin: 2px 0 4px 0;
	background: #dfeff7 url(../images/input_bg.jpg) repeat-x 0 0;
	border-bottom: 1px solid #fff; border-top: 1px solid #00476a; border-left: 1px solid #6da0ba; border-right: 1px solid #6da0ba;
}

form#infocus ol {padding: 0;margin: 0;}

form#infocus li {
	list-style-type: none;
	padding: 4px 0 0 0; margin: 0 0 0 20px;
	line-height: 1.2em;
	float: left;
	display: inline;
}

form#infocus input.btnSubmit {
	display: block;
	width: auto; height: 25px;
	padding: 0 0 0 30px ; margin: 0;
	background: url(../images/btn_linkBlue_orange.png) no-repeat 0 0;
	font: bold .9em/24px Verdana, Arial, Helvetica, sans-serif; color: #aee7ff; text-align: left; 	text-decoration: none;
	border: 0;
	cursor: pointer;
}

form#infocus input:hover.btnSubmit {
	background-position: 0 -25px;
	color: #ff9a5a; 
}


/* Success, notice and error boxes*/

.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a   { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }