/*
Name: Satellite7_2010
Author: Jon Packman
Author URI: http://satellite7.com
*/
/* RESET - based on html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */
html, body, div, span, 
h1, h2, p, blockquote, 
cite, img,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input,
article, aside, footer, header, 
nav, section {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, footer, header, nav, section {display:block;}
ul, li, div{ list-style:none; position: relative }
a img { border:none } /* Gets rid of IE's blue borders */
body { font: 100% "lucida sans unicode", "lucida sans", "lucide grande", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; min-height: 100%; width: 100%; color: #909090; background: #272727 url("images/darkside.jpg") repeat-y right top; }
br.clearMe{ clear:both; display:block; height:1px; margin:-1px 0 0 0 }

/*TYPOGRAPHY */
a {text-decoration: none; color: #f8f1de;}
p {font-size: 14px;  line-height: 1.5; }
h1{font-size: 16px; color: #5d616b; font-weight: normal;}
h2 {font: bold 22px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; margin: 0 0 12px ; color: #403f3d; text-shadow: 0px 1px 0px #fff;}
a:hover, a:focus {color: #fff}

/* LAYOUT  */
header {position: absolute; left: 40px; top: 40px; z-index: 99999}
body.short header {position: relative; width: 550px; left: -1px; top: 0px; margin: 40px auto 0px auto; height: 105px; z-index: 99999}
#container {position: relative; margin: 150px auto 0 auto;  width: 900px; min-width: 900px; padding: 0 43px}
.liquified #container {position: absolute; right: 0; top: 50%; left: 0; margin: -180px 0 0 0; height: 360px; width: 100%; padding: 0}
body.short #container {position: relative; clear: left; top: 0; margin: 0; height: 360px; width: 100%; padding: 0}
nav {position: fixed; top: 148px; left: 50%; bottom: 0; margin: 0 0 0 140px; width: 310px}
.liquified nav {position: absolute; width: auto; top: 30px; height: 300px; left: 50%; right: 0; margin: 0 0 0 272px; z-index: 999; }
section { position: relative; float: left; width: 546px; clear: left;}
.liquified section { height: 100%; width: 100%; }
article {position: relative; margin: 0 0 30px; }
#work-section article {border-bottom: 20px solid #737373; padding-bottom: 60px}
.liquified #work-section article {border-bottom: 0; padding-bottom: 0px}
.liquified article {display: none}
.liquified article.active-art {display: block; position: absolute; left: 50%; margin: 0 0 0 -273px; z-index: 999; border-bottom: 0; padding-bottom: 0; width: 546px; height: 360px; }
article .article-inner  {width: 480px; -moz-box-shadow: 0px 0px 20px #181818; -webkit-box-shadow: 0px 0px 20px #181818; box-shadow: 0px 0px 20px #181818; background: #f8f1de url(images/noise.png) repeat; padding: 27px 33px;}
.liquified article .article-inner  {position: absolute; height: 306px; z-index: 9998}
.liquified footer{position: absolute; bottom: 5px; right: 40px;}
.short footer{ bottom: 0; right: 0; top: 590px; left: 0; text-align: center}
footer p{clear: both; margin-left: 43px; padding: 30px 0; font-size: 11px}
.short footer p{margin-left: 0px;}
noscript {position: fixed; top: 40px; left: 50%; bottom: 0; margin: 0 0 0 140px; width: 310px; color: #fff}


/* Header */
h1 { height: 39px; width: 150px; padding-right: 400px; overflow: hidden;}
h1 span { background: url("images/sat7webcraft.png") no-repeat 0 0; position: absolute; left: 0; top: 0;  z-index: 999;height: 39px; width: 550px; }
header p {margin: 10px 0 0 3px; font-size: 12px; text-shadow: 0px 1px 0px #141414; min-width: 330px}
body.narrow h1 { float: left; padding-right: 420px; overflow: hidden;}
body.narrow header p {margin: 21px 0 0 3px; float: left; }
body.short header p {margin: 5px 0 0 3px; clear: both }

/* Logo */
.liquified #logo {position: absolute; bottom: 30px; left: 50%; right: 0; height: 43px; margin: 0 0 0 273px; background: #a94646; border: 1px solid #262422;  border-width: 1px 0; z-index: 999}
.liquified #logo #s7 { background: url("images/7logo.png") no-repeat center center; width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; margin: -74px 0 0 -72px}
.narrow #logo {display: none}

/* Portfolio thumbs */
.liquified #container > ul {position: absolute; left: 0; top: 30px; bottom: 30px; right: 50%; margin-right: 273px; border-bottom: 1px solid #262422; z-index: 997}
.liquified #container > ul  li{float: left; position: relative; width: 20%; height: 128px; overflow: hidden; }
.liquified #container > ul  li img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter:alpha(opacity=20); opacity: 0.2; }
.liquified #container.wkon > ul  li img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); opacity: 0.4; }
.liquified #container > ul  li:hover img, .liquified #container > ul  li:focus img{filter:alpha(opacity=90);opacity: 0.9; cursor: pointer; }
.liquified #container.wkon > ul  li.current-thumb img{filter:alpha(opacity=100); opacity: 1;}
.liquified #container > ul  li img {position: absolute; top: 0px; left: 0px; border-left: 1px solid #262422; border-top: 1px solid #262422;}

/* Portfolio content */
article dt.title{ font: bold italic 20px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; text-shadow: 0px 1px 0px #141414;  margin: 0 0 20px; }
.liquified article dt.title{ position: absolute; top: 403px; left: -142px; background: #403f3d; padding: 0px 20px; height: 43px; line-height: 43px; margin: 0; border: 1px solid #262422; width: 647px}
body.short.liquified article dt.title{left: -1px; width: 506px; top: 390px; }
.liquified article dt.title:before { content: 'Featured work:';  font: normal 15px "lucida sans unicode", "lucida sans", "lucide grande", "Helvetica Neue", Helvetica, Arial, sans-serif; padding-right: 9px}
article dd.imgwrap {width: 546px; height: 360px; -moz-box-shadow: 0px 0px 20px #181818; -webkit-box-shadow: 0px 0px 20px #181818; box-shadow: 0px 0px 20px #181818; margin: 0 0 35px; }
.liquified article dd.imgwrap {position: absolute; z-index: 9998; margin: 0; }
.liquified article dd.imgwrap:hover  {}
.liquified article dd.imgwrap img {}
.liquified article dd.imgwrap a {outline: none}

/* show and hide testmonials */
dt.showhide {display: none}
dt.collapsible-heading {display: block; position: fixed; top: 50%; margin-top: 180px; right: 50%; margin-right: -243px; bottom: 0; background: #3b5667; border: 1px solid #262422; border-width: 0px 1px 1px 1px; width: 100px; font-size: 14px}
body.short dt.collapsible-heading {position: absolute; top: 360px; margin-top: 0px; height: 103px;}
dt.collapsible-heading a{display: block; width: 100%; height: 100%;  padding-top: 47px;}
body.short dt.collapsible-heading a{padding-top: 37px; height: 66px}
dt.collapsible-heading a span.imgrep {background: url("images/menu.png") no-repeat -302px 0px; width: 100px; height: 30px; position: absolute; top: 50px; left: 0; z-index: 9999}
body.short dt.collapsible-heading a span.imgrep {top: 37px;}
dt a:focus {outline: none }
dt.collapsible-heading a:hover, dt.collapsible-heading a:active{background: #5c725d;}
dt.collapsible-heading a:hover span.imgrep, dt.collapsible-heading a:active span.imgrep {background-position: -302px -30px}
dt.collapsible-heading-collapsed a  {background-position: center 0 !important}
dt.collapsible-heading-collapsed a:hover, dt.collapsible-heading-collapsed a:active  {background-position: center -101px !important}
dt span.collapsible-heading-status {position:absolute; left:-99999px;}
dd.collapsible-content-collapsed {display:none;}

/* Work details */
dl dd.details {font-size: 13px; color: #ababab; line-height: 1.5;}
.liquified dl dd.details {position: absolute; bottom: 0; left: 0; width: 480px; padding: 30px 33px; background: #272727; background: rgba(42,42,42,0.95); height: 300px; overflow: auto; z-index: 9999;}
dl dd.details dt {margin: 7px 0 25px; font: bold 15px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; text-shadow: 0px 1px 0px #141414;  }
dl dd.details dt.review {margin: 0 0 7px; color: #aa9f89;}
dl dd.details dd{margin: 0 0 15px}
dl dd.details dd:last-child {margin: 0}
dl dd.details a.visit {background: #3b5667; border: 1px solid #262422; padding: 7px 10px; }
dl dd.details a.visit:hover  {background: #5c725d;}
dl dd.details a.visit:focus  {border: 1px dotted #f8f1de;}
dl dd.details cite {font-size: 12px; line-height: 1;  color: #aa9f89; float: right; margin-top: 10px;}
dl dd.details blockquote p{color: #aa9f89; padding: 0 20px; position: relative; font-size: 12px; }
dl dd.details blockquote p:before {content: "\201C"; font-size: 40px; position: absolute; top: 12px; left: 0; height: 15px;  line-height: 15px; text-shadow: 0px 1px 0px #141414;  }
dl dd.details blockquote p:after {content: "\201D"; font-size: 40px; position: absolute; bottom: -10px;left: 0;height: 15px;  line-height: 15px; text-shadow: 0px 1px 0px #141414;   }

/* Work scroller */
.liquified a.next-tab {position: absolute; left: -9999px; bottom: 30px; right: 546px; border: 1px solid #262422; border-width: 1px 0; height: 43px; line-height: 43px; padding: 0 23px 0 0; background: #3b5667; text-transform: uppercase; font-size: 14px; text-align: right;}
.liquified a.next-tab:hover, .liquified a.next-tab:focus {background: #5c725d; }
.liquified a.next-tab:active {outline: none; background: #5c725d; }
.liquified a.next-tab span.imgrep{position: absolute; top: 5px; right: 0px; width: 100px; height: 30px; background: url("images/menu.png") no-repeat -400px 0; }
.liquified a.next-tab:hover span.imgrep, .liquified a.next-tab:focus span.imgrep{background-position: -400px -30px}
.liquified a.next-tab span#triangle{position: absolute; top: -20px; right: 80px; width: 62px; height: 80px; background: url("images/tri-right.png") no-repeat 0 0; }
.liquified a.next-tab span#shaft{position: absolute; top: 0; left: 0; right: 120px; height: 43px; background: #a94646; z-index: 999}

/* About and contact sections */
aside {position: relative; margin: 0 0 30px; border-bottom: 20px solid #737373; padding-bottom: 30px }
.liquified aside { position: absolute; bottom: 30px; border-bottom:  1px solid #262422; left: 0; right: 50%; margin: 0 273px 0 0; padding: 0; z-index: 998}
.stretch {position: relative; }
.liquified .stretch {position: absolute; right: 0; bottom: 0; left: 0; z-index: 999; background: #a94646; border-top: 1px solid #262422; height: 43px;}
dl.in-brief {position: relative; font-size: 12px;  }
.liquified dl.in-brief {position: absolute; right: 0px; bottom: 44px; text-align: right;  background: #272727 ; background: rgba(42,42,42,0.95); padding: 15px 33px 30px; text-shadow: 0px 1px 0px #000 }
body.short dl.in-brief {position: absolute; right: -584px; bottom: -80px; text-align: left; padding: 0; background: none; width: 620px; }
dl.in-brief dt {float: left;  margin: 15px 5px 0 0; clear: both; font: bold 14px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; line-height: 14px }
body.short dl.in-brief dt {clear: none; margin-top: 0; margin-left: 15px}
dl.in-brief dd{float: right; margin-top: 15px; line-height: 14px}
body.short dl.in-brief dd{float: left; margin-right: 5px; margin-top:0px}
dl.in-brief dd + dd {clear: both; margin-top: 5px}
body.short dl.in-brief dd + dd {clear: none; margin-top:0px; margin-right: 5px}
/* main text */
article .article-inner p{ font-size: 15px ; line-height: 1.5; color: #403f3d; padding: 0 0 13px; text-shadow: 0px 1px 0px #fffcf3}
article .article-inner p a{ color: #403f3d;text-decoration: underline}
img#pic {position: absolute; right: 20px; top: -60px}

#four-oh-four {width: 500px; margin: 0 auto; font-size: 25px}

/* NAVIGATION */
nav ul{float: left; height: 100%; width: 100%;  }
nav li {font-size: 16px; float: left; width: 33.3%; text-transform: uppercase; overflow: hidden;}
nav li#contact { width: 33.4%}
nav li a {text-align: center; display: block; border-left: 1px solid #262422; border-top: 1px solid #262422; padding-top: 21px; height: 278px; background: #3b5667;}
nav li a span.imgrep {position: absolute; top: 21px; left: 50%; margin: 0 0 0 -50px; text-align: center; width: 100px; height: 30px; background: url(images/menu.png) no-repeat center 0; display: block;}

.narrow nav li {font-size: 16px; float: left; width: 100%; text-transform: uppercase; overflow: hidden;}
.narrow nav li a {text-align: center; display: block; border-left: 1px solid #262422; border-top: 1px solid #262422; padding-top: 35px; height: 64px; background: #3b5667;}
.narrow nav li#contact  {width: 100%}
.narrow nav li#contact a {height: 63px; }
.narrow nav li a span.imgrep {position: absolute; top: 35px; left: 50%; margin: 0 0 0 -50px; text-align: center; width: 100px; height: 30px; background: url(images/menu.png) no-repeat center 0; display: block;}

nav li.active a{background: #a94646; outline: none}
nav li a:hover, nav li a:focus { color: #e6dcc8; background: #5c725d;}
nav li.active a:hover, nav li.active a:focus{background: #a94646; outline: none}
nav li#contact a span.imgrep{background-position: -200px 0; }
nav li#about a span.imgrep{background-position: -100px 0;}
nav li#portfolio a span.imgrep{background-position: 0 0; }
nav li#contact a:hover span.imgrep, nav li#contact a:focus span.imgrep{background-position: -200px -30px;}
nav li#about a:hover span.imgrep, nav li#about a:focus span.imgrep {background-position: -100px  -30px;}
nav li#portfolio a:hover span.imgrep, nav li#portfolio a:focus span.imgrep{background-position: 0  -30px; }
nav li#contact.active  a span.imgrep, nav li#contact.active a:hover span.imgrep, nav li#contact.active a:focus span.imgrep {background-position: -200px -60px;}
nav li#about.active  a span.imgrep, nav li#about.active a:hover span.imgrep, nav li#about.active a:focus span.imgrep  {background-position: -100px -60px;}
nav li#portfolio.active  a span.imgrep, nav li#portfolio.active a:hover span.imgrep, nav li#portfolio.active a:focus span.imgrep {background-position: 0 -60px;}




/* FORM */
#contactForm, #contactForm fieldset{width: 100%; height: 300px;}
legend {color: #3f3221; position: absolute; top: -99999px}
#contactForm li.inline {float: left; width: 225px; margin-bottom: 10px}
#contactForm li.inline.two-thirds {width:342px; }
#contactForm li.send {position: absolute; top: 260px; right: 0;}
#contactForm li.inline.right {float: right; }
#contactForm label { font: bold 18px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; color: #403f3d; text-shadow: 0px 1px 0px #fff; line-height: 18px}
input, textarea { border: 1px solid #a5a5a5;  cursor : text; padding: 5px; margin: 6px 0; color: #0d0d0c; line-height: 1.4; background: #f9f5e8; font: 14px "lucida sans unicode", "lucida sans", "lucide grande", "Helvetica Neue", Helvetica, Arial, sans-serif;}
#contactForm li.inline input{ width: 213px}
#contactForm li.inline.two-thirds input { width: 320px}
textarea {clear: both; width: 320px; height: 182px; color: #0d0d0c; padding: 10px;}
input:focus, textarea:focus { background: #fff;  border: 1px solid #909090; outline: none}
input.submit { font: bold 17px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; cursor : pointer; color: #f8f1de; text-align: center; border : 1px solid #2a2a28; padding: 9px 0; text-transform: uppercase;  background: #3b5667;  text-shadow: 0px 1px 0px #141414; width: 100px; line-height: normal; margin: 0}
input.submit:hover, input.submit:focus  {border : 1px solid #191714; color: #fff; background: #5c725d; }
label.error {position: absolute; top: 2px; right: 0px; font: bold 13px "lucida sans unicode", "lucida sans", "lucide grande", "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #a94646 !important; line-height: 20px !important }
.success, .failure {top: -41px; position: absolute; left: 50%; height: 40px; background: #5c725d; width: 480px; padding: 0 33px; margin: 0 0 0 -273px}
.failure {background: #a94646; }
.success p, .failure p {color: #fff !important; font-size: 13px !important; line-height: 40px !important; }
.success p strong{font: bold 15px Cambria, "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;}