@charset "utf-8";

body {background: #fff url(../_images/bg.jpg) 0 0 repeat-x; background-attachment:fixed; margin:0;font-family:Helvetica, Arial, sans-serif;font-size:10px;line-height:20px;color:#454545;height:100%;}
html {height:100%;}

*::selection {background:#c533a4; color:#fff;}
*::-moz-selection {background:#c533a4; color:#fff;}

a {color:#276fed; text-decoration:none;}
a:hover {text-decoration:underline;color:#b0b0b0;}
a:active, a:focus {color:#666;}

p {padding-top:15px;}
.fleft {float:left;}
.fright {float:right;}
.clear {clear:both;}

.greentext {color:#0d0;}

/*******************************/
/******** layout *********/
/*****************************/

#top {width:100%;background-color:#000;height:8px;position:fixed;z-index:10;}

#sidebar {width:227px;padding:116px 40px 0 0; float:left;position:fixed;}
#sidebar a.logo {width:164px; height:90px; display:block; float:right; background:transparent url(../_images/logo.png) 0 0 no-repeat;}

#sidebar ul {clear:right;float:right;margin-top:40px;}
#sidebar li {padding:10px;border-bottom:1px dotted #c9c9c9;color:#666;text-align:right;}
#sidebar li:last-child {border:0;}
/*#sidebar .sidebox {padding:20px; background-color:#000;-moz-border-radius: 7px; -webkit-border-radius: 7px; width:70%;float:right; color:#fff;margin-top:40px;font-family: 'Josefin Sans Std Light', arial, serif; font-size:14px;}*/
#sidebar .sidebox {padding:20px;width:70%;float:right; color:#454545;margin-top:40px;font-family: 'Josefin Sans Std Light', arial, serif; font-size:18px;}

#container {width:1000px;min-height:100%;background: transparent url(../_images/bg.png) top left repeat-y;}
#folio #container {background: transparent url(../_images/foliobg.png) top left repeat-y;}
* #container {height:100%;}
#content {width:733px; float:right;}

#col1, #col2, #col3, #col4 {float:left;clear:right;padding:0 18px;}
#col1 {width:214px;padding-top:30px;font-size:12px;color:#959595;}
#col1 h1 {font-size:18px;color:#454545;font-weight:normal;}

.col {width:114px;}
.col h1 {font-family: 'Tangerine', arial, serif;/*text-shadow: 1px 1px 1px #c9c9c9;*/ font-size:30px;text-transform:capitalize;text-align:right;color:#000;font-weight:lighter;margin-bottom:15px;}
#home .col:last-child img {filter:alpha(opacity=30); opacity:0.3;margin-bottom:5px;border-bottom:5px solid transparent;}
#home .col:hover img {filter:alpha(opacity=100); opacity:1.0;}
#home .col a:hover img {border-bottom:5px solid #000;}

/*******************************/
/******** navigation *********/
/*****************************/

/*
#navigation {float:right;margin:20px 0 94px;}
#navigation a {color:#b0b0b0;font-size:10px;text-decoration:none;padding:0 18px;border-right:1px solid #e5e2e2;}
#navigation a:last-child {border-right:0;padding-right:5px;}
#navigation a:hover {color:#333;}
*/

#navigation {float:right;margin:8px 10px 20px;}
#navigation a {color:#fff;font-size:10px;text-decoration:none;padding:7px 18px;border-right:1px solid #333;background-color:#000;margin:0;display:block;float:left;}
#navigation a:last-child {border-right:0;-webkit-border-bottom-right-radius: 7px;-moz-border-radius-bottomright: 7px;border-bottom-right-radius: 7px;}
#navigation a:first-child {-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomleft: 7px;border-bottom-left-radius: 7px;}
#navigation a:hover {color:#333;padding-top:8px;padding-bottom:6px;filter:alpha(opacity=90); opacity:0.9;}

#hmimg {margin-bottom:40px; text-align:center;}
/*******************************/
/******** portfolio *********/
/*****************************/

.item {position:relative;}
.item span {position:absolute; background: transparent url(../_images/vertlines.png) 0 0 repeat;height:114px;width:114px;}
.item:hover span {display:none;}

#folio #col2 {width:95%;}
#folio .tab {padding-top:10px;}
#folio .tab>div {width:390px;height:500px; float:right;border-left:1px dotted #cecece;padding-left:10px;}
#folio .tab h3 {font-size:16px;margin-top:10px;font-weight:lighter;}
#folio .tab h3 span {display:block;color:#b0b0b0;font-size:12px;font-weight:normal;margin-top:0;line-height:12px;}
#folio .projectsimg {display:block; height:200px;width:380px;position:relative; overflow:hidden;}
#folio .projectsimg span {position:absolute; background: transparent url(../_images/vertlines.png) 0 0 repeat;height:200px;width:380px;filter:alpha(opacity=30); opacity:0.3;}
#folio #web .projectsimg img {margin-left:-200px;}
#folio #web .projectsimg:hover span {background: transparent url(../_images/zoom.png) center no-repeat;filter:alpha(opacity=60); opacity:0.6;}
#folio .tab a.action {color:#fff; background:#333; padding:2px 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px;font-size:9px; float:right;margin-right:5px;}
#folio .tab a.action:hover {background:#276fed;text-decoration:none;}
#folio .tab a.zoom {background:#666;}

ul.htabs li {float:left; margin:10px; }
ul.htabs li:first-child {margin-left:0;}
.tab ul {margin-right:10px;}
.tab ul li:before {content:"\00BB \0020" ;}
.tab ul li {margin-bottom:15px;line-height:12px;}
.tab ul li a {color:#333; font-family:Georgia, "Times New Roman", Times, serif; text-transform:uppercase; font-size:10px; font-style:oblique;}
div.tabs {clear:both;}

.htabs li h2 a {
   border-top: 1px solid #d4d4d4;background: #575757;background: -webkit-gradient(linear, left top, left bottom, from(#bfbfbf), to(#575757));background: -moz-linear-gradient(top, #bfbfbf, #575757);padding: 4px 15px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0;color: #ffffff;font-size: 10px;font-family: Helvetica, Arial, Sans-Serif;text-decoration: none;vertical-align: middle; }
.htabs li h2 a:hover {border-top-color: #6e6e6e; background: #6e6e6e; color: #ccc;}
.htabs li h2 a:active { border-top-color: #454545;background: #454545;}


/*******************************/
/******** misc *********/
/*****************************/

p.title, {font-size: 12px; text-align:right; color:#666;}
p.title span {color:#fff; background:#333; padding:2px 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px;font-size:9px;}

.time {color:#b0b0b0;font-style:italic;}

#lastfm {line-height:12px;}
#lastfm dl {margin-top:10px;padding-bottom:5px;border-bottom:1px dotted #c9c9c9;}
#lastfm dd.lfm_artist {font-weight:bold;color:#333;}
#lastfm dd.lfm_song {color:#666;}
img[alt^=Artwork] {width:34px;height:34px;}

/*******************************/
/******** Footer *********/
/*****************************/


#footer {font-size:9px; color:#666; margin-top:40px; line-height:12px;border-top:1px dotted #c9c9c9;padding-top:10px;clear:right;text-align:right;}
#footer p {padding-top:10px;}
#footer a {color:#515151;}
#footer a:hover {text-decoration:underline;}
#footer a:active, #footer a:focus {color:#666;}

/*******************************/
/******** Form Fields *********/
/*****************************/

input, textarea {font-size:14px; color:#b0b0b0; padding:5px; border:0;margin: 3px 0; font-family: Helvetica, Arial, sans-serif; text-transform:lowercase;-moz-border-radius: 5px; -webkit-border-radius: 5px;background-color:transparent;border:1px solid #e7e7e7;box-shadow:inset 1px 1px 2px #cecece;-moz-box-shadow:inset 1px 1px 2px #cecece;-webkit-box-shadow:inset 1px 1px 2px #cecece;}
input:hover, textarea:hover {color:#454545;font-weight:bold;border: 1px solid #666;}
input:focus, textarea:focus {border:1px solid #276fed;}
input {width:200px;height:20px;}
textarea {width:200px; height:70px;}
button {width:80px; height:30px; color:#fff; padding:5px; background-color: #276fed;border:1px solid #fff;-moz-border-radius: 5px; -webkit-border-radius: 5px;font-size:12px;line-height:30px;text-align:center; text-shadow:1px 1px 2px #333;}
button:focus {color:#cecece;}