/*
Title: [style.css] Optic.
Root URL: www.madebyoptic.com
Last Update: 20100208 Mon 17.10
*/

/*	=EM-RESET
	---------------------------------------------------- */
	
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section{ display: block; }


/*	=BODY&WRAPPER
	---------------------------------------------------- */

html {
overflow-x: hidden;
}	

body{
color:#333;
font-weight:500;
font-family: Helvetica;
background:#fff;
position:relative;
text-shadow: rgb(255, 255, 255) 1px 1px 1px;
}

#top {
background-image: url(../img/border.png);
height: 15px;
}

#left {
background-image: url(../img/border.png);
width: 15px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#right {
background-image: url(../img/border.png);
width: 15px;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}

#bottom {
background-image: url(../img/border.png);
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

.container{
width:940px;
margin: 0 auto;
position: relative;
}

#container-showcase{
width:940px;
margin: 0 auto;
}


/*	=NAVIGATION
	---------------------------------------------------- */
	
header{
display: block;
height: 300px;
margin-top: 5px;
}

header.no-showcase {height:220px;}


nav {float: right;height: 45px;width: 327px;margin: 0 -5px 0 0;}
nav li {display: inline;float: left;line-height:20px;}
nav li a {background: url(../img/nav.png);display: block;height: 45px;text-indent: -9999px;width: 107px;opacity:0.85; -webkit-transition: opacity 0.2s linear;}
nav li a:hover {opacity: 1;}
nav li.home a {background-position-x: 0px; background-position-y: 0px;}
nav li.blog a { background: transparent url(../img/nav.png) repeat scroll -107px 0; }
nav li.case-studies a {background: transparent url(../img/nav.png) repeat scroll -214px 0; width: 109px;}
nav ul li.home a:active {background: transparent url(../img/nav.png) repeat scroll 0 -186px;}
nav ul li.blog a:active {background: transparent url(../img/nav.png) repeat scroll 217px -186px;}
nav ul li.case-studies a:active {background: transparent url(../img/nav.png) repeat scroll 110px -186px;}
nav li.home.selected a {background: transparent url(../img/nav.png) repeat scroll 0 -94px;}

.home, .blog, .case-studies{margin-top: 68px;}
.home p, .blog p, .case-studies p{font-size:12px;}
.home p {background: rgba(180, 180, 180, 0.35);left: 0px !important;margin-left: -9px;padding: 5px;width: 120px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;text-align: center;}
.blog p {background: rgba(180, 180, 180, 0.35);left: 0px !important;margin-left: -25px;padding: 5px;width: 148px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;text-align: center;}
.case-studies p {background: rgba(180, 180, 180, 0.35);left: 0px !important;margin-left: -36px;padding: 5px;width: 168px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;text-align: center;}

.blog{margin-left: 107px;}
.case-studies{margin-left: 214px; }

/*	=TYPOGRAPHY
	---------------------------------------------------- */

h1 a{
background: url(../img/optic-logo.png) no-repeat;
display: block;
float: left;
height: 139px;
margin: 20px 0px;
position: absolute;
text-indent: -9000px;
width: 139px;
}

h1 a:active{
margin-top: 21px;
}

h1.red-logo a {background: url(../img/optic-logo-case-studies.png) no-repeat;}

h2.lift-pitch{
font-size:19px;
position: absolute;
margin:155px 0 0 160px;
width:780px;
line-height:30px;
}

a { color:#3ea9f5; text-decoration:none; }

h2.lift-pitch a {text-shadow:none;}
h2.lift-pitch a:hover { padding-bottom:2px; border-bottom:1px solid #3ea9f5; text-decoration:none; }
h2.lift-pitch a:active {top:1px; position: relative;}

.block{display:block;}

h3.tagline{
position: absolute;
margin:82px 0 0 160px;
font-style:italic;
}

h3.team{
background: url(../img/title-team.png) no-repeat;
height:99px;
width:99px;
text-indent: -9999px;
margin: 60px 0px 40px 0px;
}

#team h4{
font-style: italic;
margin-left: 120px;
margin-top: -98px;
position: absolute;
}

#process h4{
font-style: italic;
margin-left: 120px;
margin-top: -118px;
position: absolute;
}

h3.contact{
background: url(../img/title-contact.png) no-repeat;
height:99px;
width:99px;
text-indent: -9999px;
margin: 20px 0px 50px 0px;
}

#contact h4{
font-style: italic;
margin-left: 120px;
margin-top: -108px;
position: absolute;
}

#home h4{
color:#999;
position:absolute;
margin-top:-115px;
margin-left:120px;
}

p { line-height:20px; }



a:active {
  outline: none;
}

article{
display:block;
clear:both;
position:relative;
}


/*	=TWITTER
	---------------------------------------------------- */

#twitter-header{
background: url(../img/twitterfeed-bg.jpg);
border-bottom: 1px solid rgb(51, 51, 51);
border-top: 1px solid rgb(51, 51, 51);
color: white;
display: block;
font-size: 13px;
height: 19px;
padding: 10px 0px 5px;
text-align: left;
box-shadow:0px 1px 2px #111;
-moz-box-shadow:0px 1px 2px #111;
-webkit-box-shadow:0px 1px 2px #111;
}

#twitter-header a{
color:#000;
}

#twitter-header a:hover {color:#fff;}
#twitter-header a:active {position:relative; top:1px;}

ul#twitter-update-list{
padding-left:30px;
}

#twitter_update_list li {
text-shadow: none;
height:13px;
}

.twitter-bird{
background: url(../img/twitter-bird.png) no-repeat;
height:41px;
width:47px;
position:absolute;
top: -46px;
opacity:0.9;
-webkit-transition: opacity 0.2s linear;
}

.twitter-bird:hover{
opacity:1;
}

.twitter-bird:active{
top:12px;
}


/*	=SHOWCASE
	---------------------------------------------------- */

section#showcase{
background: #333;
border-bottom:1px solid #aaa;
height:400px;
margin-top: -20px;
position: relative;
z-index: 5;
text-align:right;
text-shadow: none;
box-shadow:0px 1px 2px rgb(102, 102, 102);
-moz-box-shadow:0px 1px 2px rgb(102, 102, 102);
-webkit-box-shadow:0px 1px 2px rgb(102, 102, 102);
}

#scrubber{
background: url(../img/showcase-bg-gradient.png) no-repeat;
position: relative;
width:940px;
overflow: hidden;
height: 320px;
}

#viewer {
width: 2000px;
overflow: hidden;
height: 320px;
position: relative;
}

#slider {
top: 0;
position: relative;
}

#slider li {
float: left;
width: 867px;
display: block;
height: 280px;
position: relative;
z-index: 1;
color:#fff;
top:50px;
margin-left: 37px;
margin-right: 50px;
}

#slider p {
font-weight:100;
letter-spacing:0.15em;
}

#slider a {
color: #cecece;
}

#slider a:hover{
padding-bottom:2px; 
border-bottom:1px solid #cecece;
}

.buttons {
width: 48px;
height: 40px;
}

#buttons {
padding: 0;
background: transparent;
list-style: none;
font-size: 40px;
line-height: 40px;
margin: 0;
}

#buttons li a {
float: left;
margin-right: 10px;
color: rgb(148,148,148);
background: transparent;
cursor: pointer;
text-shadow: rgba(51,51,51,0.7) 2px 2px 2px;
}

#buttons li.active a, #buttons li a:hover {
color: rgba(255,255,255,1);
background: transparent;
}

#showcase h1{
float: right;
font-size: 32px;
font-weight: 400;
line-height: 45px;
margin-bottom: 13px;
padding-top: 62px;
text-align: right;
width: 423px;
}

#showcase p{
clear: right;
float: right;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.1em;
text-align: right;
width: 367px;
position: relative;
}

.edge.left {
background-image: url(../img/fade-edge.png);
width: 37px;
position: absolute;
z-index: 100;
top: 85px;
height: 315px;
}

.edge.right {
background-image: url(../img/fade-edge-r.png);
width: 37px;
position: absolute;
z-index: 100;
top: 84px;
margin-left: 903px;
height: 315px;
}

.case-study {
background: url(../img/btn-case-study.png) no-repeat 0 -49px;
height:44px;
width:164px;
margin-top: -102px;
margin-right: -204px;	
opacity: 1;
-webkit-transition: opacity 0.2s linear;
}

.case-study a {
color: rgb(51, 51, 51) !important;
display: block;
font-size: 20px;
font-weight: 400;
letter-spacing:0;
height: 24px;
padding: 9px 34px 9px;
text-align:left;
text-decoration: none;
text-shadow: rgb(255, 255, 255) 1px 1px 1px;
width: 164px;
}

.case-study.disabled, .case-study.disabled:hover, .case-study.disabled:active {
opacity:0.3;
}

p.case-study a:hover{border:0 !important;}
.case-study:hover {opacity:0.9;}
.case-study a:active {background: url(../img/btn-case-study.png) no-repeat 0 -2px;}


/*	=PROCESS
	---------------------------------------------------- */
	
#process{
background: url(../img/arrows.png) no-repeat 0% 38%;
display:block;
width:940px;
position: relative;
}

#process p {height:110px;}

#process h3{
background: url(../img/title-process.png) no-repeat;
height:99px;
width:99px;
text-indent: -9999px;
margin:0 0 60px 0;
}

#process h5{
font-size:24px;
font-weight:bold;
margin-top:40px;
margin-left: 120px;
padding-bottom: 55px;
}

#process img{
float:left;
margin-right: 10px;
margin-bottom:5px;
opacity:0.9;
-webkit-transition: opacity 0.2s linear;
}

#process img:hover{
opacity:1;
}

.process-img{
height: 0 !important; 
}

#process ul { height:530px; margin-top:80px; }

.second-row{
margin-top:100px !important;
height:260px;
}

.eureka{color:#3ea9f5;}
.research{color:#ff5b71;}
.plan{color:#ffae6e;}
.design{color:#52d436;}
.build{color:#a357d9;}
.publish{color:#333333;}


/*	=TEAM
	---------------------------------------------------- */

section#team{
display:block;
clear:both;
height: 495px;
margin-top: -1px;
}

section#team p{
margin-bottom:20px;
}

.column{
display: inline;
float: left;
font-size:14px;
line-height: 20px;
margin-right: 20px;
position: relative;
width: 300px;
}

.last{
margin-right:0px;
}

.left{float:left;}
.right{float:right;}

#team-process{
width:480px;
float:left;
}

#team-process p{line-height: 1.5em;}


/*	=VENN DIAGRAM CSS3 MAGIC
	---------------------------------------------------- */

#venn-diagram {
/*background: url(../img/venn-diagram.png);*/
display: block;
height: 315px;
margin-left: 535px;
margin-top: -280px;
position: absolute;
width: 405px;
}

#team-bio{
clear: both;
float: left;
font-size: 14px;
margin: 100px 0px 50px 0px;
}

#team-bio p { margin-bottom: 30px !important; }
#team-bio a:hover{padding-bottom:2px; border-bottom:1px solid #3ea9f5;}
#team-bio a:active {top:1px; position: relative;}

a.portfolio-btn{
background: url(../img/btn-portfolio.png) no-repeat -1px -47px;
display:block;
height: 24px;
width:307px;
opacity:0.85; 
-webkit-transition: opacity 0.2s linear;
font-size: 20px;
color:rgb(51,51,51);
}

a.portfolio-btn:hover{
opacity:1;
}

a.portfolio-btn:active{
background: url(../img/btn-portfolio.png) no-repeat -1px 0;
}

.brian-btn { border:0 !important; padding: 10px 86px 13px 87px !important; }
.danny-btn { border:0 !important; padding: 10px 81px 13px !important; }
.jonny-btn { border:0 !important; padding: 10px 85px 13px !important; }


#dannyturley h3, #brianburns h3, #jonnycampbell h3{font-size:20px; font-weight:600; padding-bottom: 10px;}
#dannyturley h3 {color:#333;}
#brianburns h3 {color:#3ea9f5;}
#jonnycampbell h3 {color:#ff5b71;}



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

.info-container { clear: both; margin-bottom:70px; min-height:202px; width: 456px; }
.info-container a:hover {border-bottom: 1px solid rgb(62, 169, 245);padding-bottom: 2px;text-decoration: none;}
.info-container a:active {top:1px; position:relative;}
.padding-left { margin-left: 20px; }
.padding-right { margin-right: 20px; }

h4.case-study-1 { background: url(../img/case-study-1.png); height:89px; width:61px; text-indent:-9999px; float: left; margin-right: 15px;}
h4.case-study-2 { background: url(../img/case-study-2.png); height:90px; width:68px; text-indent:-9999px; float: left; margin-right: 15px;}
h4.case-study-3 { background: url(../img/case-study-3.png); height:91px; width:68px; text-indent:-9999px; float: left; margin-right: 15px;}
.info-container h2 { font-size:36px; font-weight: 600; margin-bottom: 10px; margin-top: 20px;}

/*.call-to-action-btn { color: rgb(51, 51, 51); background: #52d436 url(../img/alert-overlay.png) repeat-x;display: inline-block; padding: 7px 10px 8px;font-size: 14px;text-decoration: none;line-height: 1;-moz-border-radius: 8px;-webkit-border-radius: 8px; border-radius:8px; -moz-box-shadow: 0 1px 3px #999;-webkit-box-shadow: 0 1px 3px #999;text-shadow: 0 -1px 1px #222;border-bottom: 1px solid #222;position: relative;cursor: pointer; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 1px;border: 1px solid rgb(102, 102, 102); top: -33px; opacity:0.9; -webkit-transition: opacity 0.2s linear;}
.left-btn {left: -141px;}
.right-btn {left: 819px;}
.call-to-action-btn:hover { opacity:1; }
.call-to-action-btn:active { top:-42px; }*/

.made-by-optic {display:block; margin:40px auto; width:120px; background-image: url(../img/optic-fin.png); height: 62px; width: 135px; background-position: left;}
.made-by-optic:hover {border:0 !important; padding:0 !important; background-position: right;}
.made-by-optic:active {top:1px;position: relative; background-position: right;}


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

#contact{
display:block;
clear:both;
margin:10px 0 0px 0;
position: relative;
min-height: 365px;
}

#contact-form{
background:#333333;
width:936px;
border-radius:0.75em;
-moz-border-radius:0.75em;
-webkit-border-radius:0.75em; 
border:2px solid #555555;
box-shadow:1px 1px 1px #888;
-moz-box-shadow:1px 1px 1px #888;
-webkit-box-shadow:1px 1px 1px #888;
position: relative;
margin: 0;
position: relative;
z-index: 1;
}


#contact-form textarea{
background: #555;
color:#FFF;
width: 760px;
margin:20px 14px 19px 20px;
border:0;
padding:0px 5px;
line-height: 2em;
font-weight: 300;
font-size: 18px;
border-radius:0.25em;
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em; 
resize: vertical;
min-height: 36px;
position: relative;
z-index: 0;
}

a:hover.close {padding-bottom:2px; border-bottom:1px solid #3ea9f5;}
a:active.close {top:1px; position: relative;}

label span{
position: absolute;
left: -999em;
}

label.placeholder span{
color: #f7f7f7;
background: transparent;
opacity: 1;
left: 25px;
top: 29px;
z-index: 5;
text-shadow: none;
}

label.faded span{
opacity: 0.4;
}

label.hidden span{
opacity: 0;
z-index: -1;
}

textarea{ 
border: 0;
}

.submit-btn{
background: url(../img/btn-send.png) no-repeat 0 -49px;
color: #333333;
cursor:pointer;
font-size:20px;
height:40px;
width:104px;
border:0;
position: absolute;
right: 22px;
top: 18px;
line-height: 20px;
border-style:none !important;
text-shadow: rgb(255, 255, 255) 1px 1px 1px;
opacity:0.85; -webkit-transition: opacity 0.2s linear;
}

.submit-btn:hover {opacity:1;}
.submit-btn:active {background: url(../img/btn-send.png) no-repeat 0 -2px;}

#cheers {
text-align: center;
margin: auto; 
}

#c-mon {
color: #ff5b70;
}

#message {
color: #52d436;
text-shadow: none;
background: url(../img/pints.png) no-repeat;
background-position: center top;
height: 0px;
display: block;
padding-top: 78px;
position: relative;
top:-78px;
font-size: 20px;
}

/*	=FOOTER
	---------------------------------------------------- */
	
footer{
text-align: center;
position:relative;
clear: both;
}

footer p {
padding-bottom: 60px;
font-size: 12px;
}


/*	=MISC
	---------------------------------------------------- */

.clear{clear:both;}	
.right {float:right;}
.left {float:left;}

hr{
background: url(../img/hr.png) no-repeat;
border:0;
height:40px;
width:940px;
clear:both;
}

.hr-margin {height:70px;}