html {background:#27292a url('../images/bg_tile.gif');font-family:Arial, Helvetica, sans-serif;font-size:62.5%;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
* html .clearfix {zoom:1;} /* IE6 */
*:first-child+html .clearfix {zoom:1;} /* IE7 */

/* BLACK #27292a */
/* DARK GREY #4f5253 */
/* LIGHT GREY #c1c1c1 */
/* BLUE #2a95ca */
/* LIGHT BLUE #f4fafc */

/* KENYAN COFFEE FONT */
@font-face {
    font-family: 'KenyanCoffeeRegular';
    src: url('../fonts/kenyan_coffee_rg-webfont.eot');
    src: url('../fonts/kenyan_coffee_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kenyan_coffee_rg-webfont.woff') format('woff'),
         url('../fonts/kenyan_coffee_rg-webfont.ttf') format('truetype'),
         url('../fonts/kenyan_coffee_rg-webfont.svg#KenyanCoffeeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ROCKWELL FONT */
@font-face {
    font-family: 'RockwellRegular';
    src: url('../fonts/rock-webfont.eot');
    src: url('../fonts/rock-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rock-webfont.woff') format('woff'),
         url('../fonts/rock-webfont.ttf') format('truetype'),
         url('../fonts/rock-webfont.svg#RockwellRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* COMMON ELEMENTS */
a {outline:none;}
strong {font-weight:bold;}
.dotted-line {background:#fff url('../images/dotted_line.gif');width:660px;height:11px;}
.small-dotted-line {background:#fff url('../images/dotted_line.gif');width:200px;height:11px;}
.right {float:right;}
.left {float:left;}
.blue {color:#2a95ca;}

/* SITE STYLES */
body {border-top:6px solid #2a95ca;padding-bottom:60px;}
#page {background-color:#fff;border:1px solid #000;width:660px;margin:25px auto;padding:0 30px 15px;overflow:hidden;}
#header {position:relative;padding-bottom:20px;margin-top:10px;}
h1 {color:#27292a;font-family:'KenyanCoffeeRegular';font-size:5em;height:56px;width:180px;text-transform:uppercase;letter-spacing:-0.01em;;white-space:nowrap;}
h1 a {color:#27292a;text-decoration:none;}
h2 {color:#2a95ca;font-family:'RockwellRegular';font-size:1.1em;text-transform:uppercase;width:180px;}
h4 {color:#2a95ca;font-family:'RockwellRegular';font-size:2em;}
ul.social-links {width:70px;height:15px;position:absolute;left:186px;top:36px;}
ul.social-links li {float:left;}
ul.social-links li a {background-image:url('../images/social_links.gif');text-indent:-6666px;height:15px;margin-right:3px;display:block;}
ul.social-links li.last a {margin-right:0;}
ul.social-links li.item1 a {width:16px;background-position:0 0;}
ul.social-links li.item1 a:hover {background-position:0 -15px;}
ul.social-links li.item2 a {width:12px;background-position:-19px 0;}
ul.social-links li.item2 a:hover {background-position:-19px -15px;}
ul.social-links li.item3 a {width:16px;background-position:-34px 0;}
ul.social-links li.item3 a:hover {background-position:-34px -15px;}
ul.social-links li.item4 a {width:17px;background-position:-53px 0;}
ul.social-links li.item4 a:hover {background-position:-53px -15px;}
ul#nav {position:absolute;top:-10px;right:0;background-image:url('../images/nav_divider.gif');background-repeat:no-repeat;background-position:left 32px;z-index:200;cursor:pointer;}
ul#nav li {float:left;}
ul#nav li.current a {background-color:#f4fafc;border-bottom:3px solid #2a95ca;}
ul#nav li a {background-image:url('../images/nav_divider.gif');background-repeat:no-repeat;background-position:right 32px;color:#27292a;font-family:'RockwellRegular';font-size:1.6em;height:15px;text-decoration:none;display:block;padding:30px 17px;}
ul#nav li a span {color:#2a95ca;font-size:0.6em;text-transform:uppercase;}
#header .hover-block {height:75px;background-color:#f4fafc;border-bottom:3px solid #2a95ca;position:absolute;z-index:100;top:-10px;cursor:pointer;}
#content {overflow:hidden;position:relative;z-index:100;}
#content p.intro-text {color:#4f5253;background-color:#f4fafc;font-family:'RockwellRegular';font-size:2.2em;padding:15px 0;margin:5px 0;}
#content p.about-intro-text {color:#4f5253;background-color:#f4fafc;font-family:'RockwellRegular';font-size:2.4em;padding:15px 0;margin:5px 0;}
#content p.about-intro-text span {color:#2a95ca;font-size:0.55em;text-transform:uppercase;}
#content .work-preview {width:200px;margin:25px 30px 25px 0;float:left;position:relative;}
#content .work-preview.last {margin-right:0;}
#content .work-preview h3 {color:#fff;font-family:'RockwellRegular';font-size:1.7em;line-height:1.1em;padding:9px 0 3px 12px;text-transform:uppercase;position:absolute;width:10px;z-index:20;}
#content .work-preview img.hover {position:absolute;top:0;left:0;z-index:10;opacity:0;-webkit-transition: opacity 250ms ease-in-out;-moz-transition: opacity 250ms ease-in-out;-o-transition: opacity 250ms ease-in-out;-ms-transition: opacity 250ms ease-in-out;}
#content .work-preview a:hover img.hover {opacity:1;}
#content .work-preview p {color:#4f5253;font-size:1.1em;margin:7px 0;}
#content .work-preview a.view-more {background-image:url('../images/link_icons.gif');background-repeat:no-repeat;background-position:right 2px;color:#4f5253;float:right;font-family:'RockwellRegular';font-size:1.1em;text-decoration:none;padding-right:15px;}
#content .work-preview a:hover, #content #work-nav a.back:hover, #content #work-nav a.prev:hover, #content #work-nav a.next:hover {text-decoration:underline;}
#content #work-nav {}
#content #work-nav a.back {float:left;background-image:url('../images/link_icons.gif');background-repeat:no-repeat;background-position:left -18px;color:#4f5253;font-family:'RockwellRegular';font-size:1.1em;text-decoration:none;padding-left:15px;display:block;}
#content #work-nav ul {float:right;}
#content #work-nav li {float:left;margin-right:5px}
#content #work-nav li.last {margin-right:0;}
#content #work-nav a.prev {background-image:url('../images/link_icons.gif');background-repeat:no-repeat;background-position:left -18px;color:#4f5253;font-family:'RockwellRegular';font-size:1.1em;text-decoration:none;padding-left:15px;}
#content #work-nav a.next {background-image:url('../images/link_icons.gif');background-repeat:no-repeat;background-position:right -37px;color:#4f5253;font-family:'RockwellRegular';font-size:1.1em;text-decoration:none;padding-right:15px;}
#content #work-info {width:200px;float:left;margin-top:15px;}
#content #work-info h3 {color:#2a95ca;font-family:'RockwellRegular';font-size:1.4em;margin-bottom:12px;text-transform:uppercase;}
#content #work-info h4 {color:#27292a;font-family:'RockwellRegular';font-size:1.4em;}
#content #work-info p {color:#4f5253;font-size:1.1em;margin-bottom:12px;}
#content #work-info a {color:#2a95ca;text-decoration:none;}
#content #work-info a.site-link {color:#2a95ca;font-size:1.1em;text-decoration:none;margin-bottom:15px;display:block;}
#content #work-info a.site-link.first {margin-bottom:0px;}
#content #work-info a:hover {text-decoration:underline;}
#content #work-images {width:430px;float:right;margin-top:15px;}
#content #work-images img {margin-bottom:30px;}
#content p.about-text {font-size:1.3em;line-height:1.7em;margin:15px 0;}
#content p.about-text a {color:#2a95ca;text-decoration:none;}
#content p.about-text a:hover {text-decoration:underline;}
#content #twitter {background-color:#f4fafc;width:380px;float:left;margin:10px 0;padding:10px 0;}
#content #flickr {background-color:#f4fafc;width:250px;float:right;margin:10px 0;padding:10px 0;}
#content #twitter h4,#content #flickr h4 {color:#2a95ca;font-family:'RockwellRegular';font-size:1.3em;text-transform:uppercase;margin-bottom:10px;}
#content .white-block {background-color:#fff;width:660px;display:none;position:absolute;left:0;top:0;z-index:1000;}
#twitter .tweet {margin-bottom:10px;}
#twitter .tweet p.update {font-size:1.3em;font-style:italic;}
#twitter .tweet p.update a {color:#2a95ca;}
#twitter .tweet p.date {color:#c1c1c1;font-size:1.2em;font-style:italic;}
#content #flickr img {display:block;float:left;width:75px;height:75px;margin:0 12px 12px 0;}
#content #flickr img.last {margin-right:0;}
#content.illustrations h3 {font-family:'RockwellRegular';font-size:2.4em;margin:15px 0 5px 0;}
#content.illustrations h3 span {color:#2a95ca;font-size:0.5em;}
#content.illustrations img {margin-bottom:20px;}
#content.illustrations p.more {font-family:'RockwellRegular';font-size:2.4em;margin:15px 0;}
#footer {color:#9b9b9b;position:relative;padding-top:20px;font-size:1.1em;}
#footer a {color:#27292a;text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#footer ul.social-links {top:18px;left:183px;}