/* link blue: #0597cd  */


/*--------GLOBAL STYLES---------*/

body {
background:#f5f5f5 url('/images/scribbles_bg.png') repeat-y center -70px;
}

div.cms_edit_container {
min-height:30px;
z-index:50;
float:left;
min-width:200px;
}




* {
padding:0px;
margin:0px;
font-family:helvetica, arial;
outline:none;
text-shadow: 0px 1px 0px #fff;
}

* a {
text-decoration:none;
color:#0597cd;
}

* a:hover {
text-decoration:none;
color:#005E7F;
}

* input, * input:active, * input:focus {
outline:none;
}


* img {
border:none;
}

* ul {
list-style:none;
}

h1 {
text-align:center;
overflow:hidden;
text-indent:-10000px;
}

h2 {
font-weight:normal;
color:#333;
font-size:20px;
margin:0px 0px 30px 0px;
}

h3 {
font-weight:normal;
color:#333;
font-size:14.5px;
}

img.x {
width:100%;
height:100%;
}

p.green_button {
border:none;
color:#fff;
font-size:13px;
padding-bottom:3px;
width:102px;
height:27px;
background:url('/images/main_sprite_gray.png') no-repeat -390px -858px;
}

p.green_button:active {
outline:none;
padding-bottom:2px;
background:url('/images/main_sprite_gray.png') no-repeat -390px -900px;
}



/*-----LAYOUT---------*/


div#container {
width:778px;

margin:10px auto;
background:url('/images/light_gray_bg.png');
}

div#header {
	background:url('/images/area_logo_thin_3d.png') no-repeat 4px top;
	height:196px;
	width:800px;
position:relative;
margin-bottom:0px;
margin-left:-16px;
}

div#header img#home_link {
width:260px;
height:70px;
margin:40px;
}

div#main_nav {
position:absolute;
width:350px;
top:85px;
left:464px;
}

div#main_nav ul li {
float:left;
height:80px;
padding:0px 0px 0px 0px;
text-align:center;
}


div#main_nav ul li span {
height:80px;
width:100%;
float:left;
}

div#main_nav ul li .fadeThis span {
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

div#content {
padding:20px 0px 0px 0px;
position:relative;
}



div#footer {
width:100%;
height:260px;
margin:50px 0px 0px 0px;
float:left;
background:#e9e9e9 url('/images/footer_bg.png');
border-top:1px solid #dedede;
}

div#footer_content {
width:785px;
margin:0px auto;
padding-top:30px;
height:230px;
}


/*----FOOTER----*/

div#footer div.column {
height:200px;
margin:0px;
border:none;
width:224px;
padding:0px 0px 0px 22px;
}

div#footer div#site_map,
div#footer div#recent_work {
margin:0px 23px 0px 0px;
}

div#footer div#extras.column p{
width:200px;
color:#666;
}

div#footer ul li {
border-top:1px solid #fff;
border-bottom:1px solid #ccc;
text-align:left;
padding:6px 0px;
}


div#footer ul li a {
color:#666;
}

div#footer ul li a:hover {
color:#0597cd;
}

div#footer ul li.first {
border-top:none;
}

div#footer ul li.last {
border-bottom:none;
}

div#footer h3 {
margin-bottom:20px;
color:#333;
}


/*-------HOME--------*/



#parallax{position:relative; overflow:hidden; width: 765px; height: 330px;}
#screen1 {width:900px;height:328px;
}

#screen1 img {
	width:1000px;
	margin:-20px 60px 0px -20px;
}

#screen2 {width:1300px;height:328px;}

#screen2 img {
	width:300px;
	margin:150px 60px;
}


div#main_nav li#home {
width:75px;
}

.home div#main_nav:hover ul li#home {
background:none;
}

.home div#main_nav ul li#home,
div#main_nav ul li#home span {
background:url('/images/area_logo_thin_3d.png') no-repeat -460px -229px;
}

div#main_nav:hover ul li#home span:active {
background:url('/images/area_logo_thin_3d.png') no-repeat -460px -332px;
}

.home h1 {
background:url('/images/main_title_2.png') no-repeat 0px 0px;
height:46px;
width:830px;
position:absolute;
top:-10px;
left:18px;
}

.home h2 {
height:46px;
width:750px;
color:#121212;
margin:30px 0px -30px 20px;
font-size:16px;
letter-spacing:-1px;
line-height:24px;
text-align:center;
font-family:lucida grande, helvetica;
}
 
.home h4 {
width:740px;
position:absolute;
top:296px;
left:5px;
background:#f3e2db;
padding:5px 10px 2px 10px;
font-size:14px;
word-spacing:-1px;
color:#7f1a01;
}

div#featured,
div.preview {
height:335px;
position:relative;
margin:0px 0px 20px 0px;

}

div#featured {
border:1px solid #ccc;
margin-top:50px;
}

div.trim {
border:1px solid #fff;
height:333px;
background:#f9f9f9;
}

div.macbook, div.logo {
width:267px;
height:170px;
position:absolute;
left:10px;
top:30px;
overflow:hidden;
}

.home div.macbook {
width:436px;
height:261px;
top:-20px;
position:relative;
z-index:10;
left:-38px;
background:transparent;
background:url('/images/clean_energy_thumb.png') no-repeat 55px 22px;
}

div.icon img { 
width:100%;
height:100%;

}

div#featured div#details,
div.preview div.abstract {
width:400px;
height:175px;
position:absolute;
left:365px;
top:30px;
font-size:18px;
color:#444;
line-height:40px;
}

div#featured div#details a {
color:#74DF00;
font-weight:bold;
}

div#featured div#details ul li {
font-size:20px;
color:#555;
padding:0px 0px 0px 40px;
margin:0px 0px 24px 0px;
background:url('/images/main_sprite_gray.png') no-repeat -760px -393px;
}

div#featured div#details img#bullets {
position:absolute;
top:-47px;
left:2px;
}



/*------Coda Popup-----*/

div#featured div.bubbleInfo .popup {
z-index:20;
background: url('/images/featured_popup.png') no-repeat 10px 0px;
width:240px;
height:160px;
padding:50px 30px 50px 50px;
position:absolute;
margin:40px 70px 70px 28px;
}

div#featured p#work_details {
font-size:11px;
color:#444;
line-height:20px;
margin:10px 0px;
}

div#featured p.icon_link {
width:100px;
text-align:center;
float:left;
font-size:12px;
}

div#featured p#screenshots {
margin-right:30px;
background:url('/images/featured_icons.png') no-repeat 5px 0px;
}

diV#featured p#case_study {
background:url('/images/featured_icons.png') no-repeat -135px 0px;
}

div#featured p.icon_link img {
width:70px;
height:70px;
}

/*-----*/


div#teasers {
margin:40px 0px 0px -10px;
width:840px;
}

div#teasers h3{
background:url('/images/little_plank.png') no-repeat;
height:28px;
width:210px;
margin:0px 0px 0px -25px;
padding:5px 0px 0px 25px;
color:#fff;
}

div#code_and_design.column h3 {
background:url('/images/home_column_titles.png') no-repeat;
height:37px;
overflow:hidden;
text-indent:-1000px;
width:228px;
margin:0px 0px 0px -29px;
padding:5px 0px 0px 25px;
color:#fff;
}

div#marketing_and_seo.column h3 {
background:url('/images/home_column_titles.png') no-repeat 0px -42px;
height:37px;
overflow:hidden;
text-indent:-1000px;
width:228px;
margin:0px 0px 0px -29px;
padding:5px 0px 0px 25px;
color:#fff;
}

div#volume_lab.column h3 {
background:url('/images/home_column_titles.png') no-repeat 0px -84px;
height:37px;
overflow:hidden;
text-indent:-1000px;
width:228px;
margin:0px 0px 0px -29px;
padding:5px 0px 0px 25px;
color:#fff;
}

div.column {
width:240px;
height:507px;
float:left;
padding:0px 0px 0px 0px;
margin:0px 12.4px;
border:1px solid #ccc;
font-size:12px;
line-height:20px;
color:#555;
text-align:left;
}

div.column div.trim {
width:213px;
height:490px;
float:left;
padding:15px 5px 0px 20px;
}

div.column div.icon {
width:240px;
height:205px;
margin:50px 0px 20px -28px
}

div.column p {
margin:0px 0px 20px 0px;
}

div.column div#design {
background:url('/images/area_volume_graphics3.png') no-repeat 50px 0px;
}

div.column div#code {
background:url('/images/area_volume_graphics3.png') no-repeat -230px -3px;
}

div.column div#project {
background:url('/images/area_volume_graphics3.png') no-repeat -528px -3px;
}

div#teasers div#left.column {
padding-left:0px;
}

div#teasers div#right.column {
padding-right:0px;
}






/*---CASE STUDIES-----*/

div#case_study *{
font-family:"Lucida Grande", verdana, helvetica;
}

div#back_to_work {
height:40px;
width:170px;
background:url('/images/back_to_work_sprite.png');
margin:10px 0px;
}

div#back_to_work:active {
background:url('/images/back_to_work_sprite.png') 0px -39px;
}

div#case_study {
border:1px solid #ccc;
position:relative;
height:auto;
float:left;
}

div#case_study img#case_study_ribbon {
position:absolute;
z-index:10;
top:-3px;
left:-3px;

}

div#case_study div.trim {
height:auto;
float:left;
}


/*HERO*/

div#case_study div#hero div.right img {
position:absolute;
left:30px;
top:-45px;
}

div#case_study div#hero {
background:url('/images/hero_divider.png') no-repeat bottom;
padding:0px 0px 70px 0px;
width:100%;
float:left;
margin:0px 0px 10px 0px;
}

div#case_study div.left,
div#case_study div.right {
float:left;
position:relative;
}

div#case_study div.left {
width:352px;
}

div#case_study div.left img {
margin:25px 0px 0px 50px;
max-width:310px;
}

div#case_study div.left div#services_provided {
float:left;
width:320px;
height:191px;
padding:70px 0px 0px 110px;
margin:30px 0px 0px -45px;
background:url('/images/services_card.gif') no-repeat;
}


div#services_provided ul li {
font-size:14px;
color:#333;
font-weight:bold;
margin-bottom:3px;
background:url('/images/service_check.png') no-repeat 0px -2px;
padding:5px 0px 5px 40px;
}

/*INTRO*/

div.intro {
float:left;
margin:0px 0px 60px 0px;
text-align:center;
} 

div.intro h2 {
text-align:center;
font-size:30px;
}

div.intro p {
text-align:left;
margin:-30px 70px 0px 70px;
color:#555;
line-height:23px;
}


/*FEATURES*/

div#features {
float:left;
margin:0px 10px 40px 10px;
}

div.fancy_thumb {
float:right;
}

div#features div.rail { 
float:left;
width:335px;
padding:0px 20px;
}

div#features div.feature img{
float:right;
}

div#features div.feature {
margin: 0px 0px 50px 0px;
}

div#features div.feature h4 {
margin-bottom:10px;
font-size:14px;
}

div#features div.feature p {
font-size:12px;
line-height:16px;
}


/*-------BLOG-------*/

div#main_nav li#blog {
width:80px;
}

.blog div#main_nav:hover ul li#blog {
background:none;
}

.blog div#main_nav ul li#blog,
div#main_nav:hover ul li#blog span {
background:url('/images/area_logo_thin_3d.png') no-repeat -535px -229px;
}

div#main_nav:hover ul li#blog span:active {
background:url('/images/area_logo_thin_3d.png') no-repeat -535px -332px;
}

div#container {
	position:relative;
}

.blog div#container h1 {
background:url('/images/blog_title.png') no-repeat 27px 0px;
height:45px;
margin:0px 0px -30px 0px;
top:260px;
left:0px;
}

.blog div.section {
	margin:00px 0px 20px 0px;
	width:775px;
	float:left;
border:1px solid #ccc;

}


.blog div.section div.trim {
height:100%;
padding:5px;
}

.blog .trim .narrowcolumn .post {
	text-align:left;
}


/*-------ABOUT-------*/


.about h1 {
background:url('/images/about_headline.png') no-repeat 27px 0px;
height:45px;
}

.about .section h1 {
background:url('/images/about_process_header.png') no-repeat 120px 0px;
height:95px;
}

div#main_nav li#about {
	width:78px;
}

.about div#main_nav:hover ul li#about {
background:none;

}

.about div#main_nav ul li#about,
div#main_nav:hover ul li#about span {
background:url('/images/area_logo_thin_3d.png') no-repeat -615px -229px;
}

div#main_nav:hover ul li#about span:active {
background:url('/images/area_logo_thin_3d.png') no-repeat -615px -332px;
}

div#about_content {
	width:800px;
	margin:30px 0px 0px 2px;
float:left;
}

.about div.section {
	margin:20px 0px;
	width:775px;
	float:left;
border:1px solid #ccc;
}


.about div.section div.trim {
height:100%;
padding:5px;
}


.about .subsection {
background:url('/images/about_section_header.png') no-repeat -2px 0px;
padding:30px;
}

.about .subsection .overview {
height:180px;
}

.about .subsection .overview p {
line-height:24px;
font-family:"Lucida Grande", helvetica, arial;
}

.about .subsection .title_and_icon {
float:left;
width:300px;
}



.about #project_assessment .title_and_icon {
height:160px;
background:url('/images/area_volume_graphics3.png') no-repeat 50px 20px;
}

.about #area_expansion .title_and_icon {
height:220px;
background:url('/images/area_volume_graphics3.png') no-repeat -230px 30px;
}

.about .subsection .title_and_icon h2 {
font-size:30px;
font-weight:normal;
color:#636262;
}

.about .subsection .main_content #project_assessment_graphic_1 {
width:100%;
height:340px;
background:url('/images/project_assessment_graphic_1.png') no-repeat 30px 30px;
}


.about .subsection .main_content #area_expansion_graphic_1 {
width:100%;
height:340px;
background:url('/images/area_expansion_graphic_1.png') no-repeat -20px 30px;
}


.about .subsection .main_content #area_expansion_graphic_2 {
width:100%;
height:340px;
background:url('/images/area_expansion_graphic_2.png') no-repeat 5px 0px;
}


div.section p {
font-size:14px;
color:#333;
line-height:30px;
margin:20px 0px 20px 0px;
}

/*-------CONTACT-------*/

.contact h1 {
background:url('/images/main_sprite_gray.png') no-repeat -20px -245px;
height:45px;
}

div#main_nav li#contact {
width:100px;
height:70px;
overflow:hidden;
}


div#main_nav li#contact span {
	width:80px;
}

.contact div#main_nav:hover ul li#contact {
background:none;
}


.contact div#main_nav ul li#contact,
div#main_nav:hover ul li#contact span {
background:url('/images/area_logo_thin_3d.png') no-repeat -693px -229px;
}

div#main_nav:hover ul li#contact span:active {
background:url('/images/area_logo_thin_3d.png') no-repeat -693px -332px;
}

.contact div#contact_content {
margin:50px 0px 100px 5px;
float:left;
position:relative;
}

.contact div#container div#contact_content form div.form_element {
margin:10px 0px 0px 0px;
width:780px;
float:left;
}

.contact .field {
float:left;
width:auto;
}

.contact .field input {
width:355px;
height:23px;
float:left;
margin-left:15px;
padding:24px 20px 30px 35px;
border:none;
font-size:23px;
color:#333;
background:url('/images/main_sprite_gray.png') no-repeat -330px -443px;

}


.contact .label{
width:240px;
float:left;
height:70px;
margin:0px 58px 0px 20px;
background:url('/images/main_sprite_gray.png') no-repeat -508px -310px;
}

.contact .label label,
.contact .label span {
margin:14px 0px 5px 15px;
display:block;
font-size:20px;
color:#333;
}

.contact .label span {
display:block;
font-size:12px;
margin-top:5px;
color:#888;
}


.contact div#container div#contact_content form input#contact_submit {
border:none;
color:#999;
font-size:1px;
text-indent:-1000px;
overflow:hidden;
position:absolute;
top:360px;
left:605px;
padding-bottom:3px;
width:144px;
height:42px;
background:url('/images/main_sprite_gray.png') no-repeat -601px -526px;
}

.contact input#contact_submit:active {
background:url('/images/main_sprite_gray.png') no-repeat -574px -393px;
}






/*------ Anything Slider--------*/

.anythingSlider a.arrow.back {
position:absolute;
top:296px;
left:6px;
overflow:hidden;
background:url('/images/slider_buttons.png');
width:30px;
height:28px;
}

.anythingSlider a.arrow.forward {
position:absolute;
top:296px;
left:734px;
background:url('/images/slider_buttons.png') -90px 0px;;
width:30px;
height:28px;
}

.anythingSlider ul li div.slide {
width:100%;
height:100%;
}

.anythingSlider                         { width: 830px; height: 360px; position: relative; margin: 5px auto 10px; }
.anythingSlider .wrapper                { width: 750px; overflow: auto; height: 285px; margin: 7px 40px 0px 12px; position: absolute; top: 0; left: 0;border-left:1px solid #ddd; border-right:1px solid #fff; border-bottom:1px solid #fff; }
.anythingSlider .wrapper ul             { width: 19999px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0; height: 287px; width: 750px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }

#thumbNav                               { position: relative; top: 300px; text-align: left;left:40px; width:50px; display:inline;  }
#thumbNav a , #thumbNav a:hover         { color: black; font: 11px/18px; Georgia, Serif; display: inline-block; padding: 2px 10px; height: 18px; margin: 0 5px 0 0; background:url(/images/slider_buttons.png) no-repeat -35px -2px;text-indent:-1000px;overflow:hidden; }
                     {  }
#thumbNav a.cur                         { background:url(/images/slider_buttons.png) no-repeat -63px -2px;text-indent:-1000px;overflow:hidden; }

#start-stop                             { display:none; background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { display:none; background-color: red; }
#start-stop:hover                       { display:none; background-image: none; }

/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }



/*----------Image Overlay----------*/


.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay a
{
overflow:hidden;
background:none;
border:none;
    margin: 0px;
    float: left;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #222;
    width:750px;
	cursor: pointer;
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .9;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
	margin: 10px 0 10px 2px;
    font-size: 20px;
    font-weight: normal;
color:#7FFF00;
	padding: 0 0 0 5px;
text-shadow: 0px -1px 0px #000;
}
.image-overlay p
{
	text-indent: 0;
	margin: 10px;
	font-size: 14px;
line-height:19px;
text-shadow: 0px -1px 0px #000;
}