@import url('zero.css');
@import url('jquery.lightbox.css');

@font-face {
  font-family: 'OCRA';
  src: url('../fonts/ocra10.ttf') format('truetype');
}

/* http://orderedlist.com/articles/thining-text-in-safari-under-snow-leopard */
.content, #footer { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {
  .content, #footer {-webkit-text-stroke:0 #404040;}
}

body, table { font: 12px/1.4 Helvetica, Arial, sans-serif; color: white; }
  body { background: fixed black url(../images/bg.jpg) no-repeat top center; }

img { border: 0; }

a { text-decoration: none; color: #E50687; }
    a:hover { text-decoration: underline; }

small { font-size: 90%; }

.first { margin-top: 0 !important }
.hilite { color: #E50687 }
.bg-fade { opacity: 0; filter: alpha(opacity=0); display: block; }

.content { font-size: 12px; line-height: 1.4; color: white; }
  .content h1 { font-family: "OCRA"; text-transform: lowercase; font-size: 140%; margin: 0 0 0.7em 0; }
  .content h2 { font-family: "OCRA"; text-transform: lowercase; font-size: 120%; margin: 1.5em 0 0.5em 0; }
  .content h3 { font-family: "OCRA"; text-transform: lowercase; font-size: 100%; margin: 1.5em 0 0.6em 0; }
  .content h4 { }
  .content h5 { }
  .content h6 { }
  .content a { color: #E50687; }
  .content strong { font-weight: bold; }
  .content p { margin-bottom: 0.7em; }
  .content blockquote { background-color: #141414; padding: 0.9em; font-style: italic; border: 1px solid #282828; margin: 1em 0; color: #d0d0d0; }
    .content blockquote cite { display: block; text-align: right; font-style: normal; color: #f0f0f0; }
  .content ul,
  .content ol { margin: 0 0 0.7em 2em; }
  .content li { display: list-item; margin: 0.1em 0; }
  .content ul li { list-style-type: disc; }
  .content ol li { list-style-type: decimal; }
  .content code { font-family: monospace; }
  .content table { }
    .content table tr { }
    .content table td,
    .content table th { padding: 2px; }
    .content table th { font-weight: bold; }
    .content table td { }

.c { clear: both; }

.curvy-box { }

.main { padding: 15px 15px 34px 15px; }

.box { padding: 15px; background: black url(../images/paperclip.gif) no-repeat top right; }
  .box { -moz-box-shadow: 0 0 20px #282828; -moz-border-radius: 10px; }
  .box { -webkit-box-shadow: 0 0 5px #242424; -webkit-border-radius: 10px; }
  .box.no-clip { background-image: none; }
  .box.header { margin-bottom: 15px; }
    .box.header h1,
    .box.header h2 { margin: 0; }

.pagebar { padding: 15px; background: black; font: 10px "OCRA"; }
  .pagebar { -moz-box-shadow: 0 0 20px #282828; -moz-border-radius: 10px; }
  .pagebar { -webkit-box-shadow: 0 0 5px #242424; -webkit-border-radius: 10px; }
  .pagebar .active:before { content: ">"; }
  .pagebar .active:after { content: "<"; }

.post { margin-bottom: 15px; }
  .post-date { font-family: "OCRA"; font-size: 10px; }
  h2.post-title { margin-top: 0; }
    h2.post-title a { color: white; }
    h2.post-title a:hover { text-decoration: none; color: #E50687; }
  .post-meta { margin-top: 15px; padding: 5px; background: #141414; font-family: 'OCRA'; font-size: 10px; }
    .post-meta .left { float: left; }
    .post-meta .right { float: right; }
  
dl.contact-details { }
  dl.contact-details dt { font-weight: bold; float: left; clear: left; width: 5em }
  dl.contact-details dd { margin-left: 6em; }
  
.code-block { border: 1px solid #252525; margin: 1em 0; }
  .code-block .code-caption { background: #252525; font-size: 11px; padding: 5px 10px; color: #b0b0b0; font-weight: bold; }
  .code-block pre { padding: 0; margin: 0; }
  .code-block ol { padding: 10px 0; margin: 0 0 0 3.5em; }
  .code-block ol li { padding: 0; margin: 0; display: list-item; list-style-type: decimal-leading-zero; list-style-position: outside; }
  .code-block .kw1, .code-block .kw2 { color: #E50687; }
  .code-block .re0 { color: #00FF00; }
  .code-block .st_h { color: #a0a0a0; }
  .code-block .ln-xtra { background: #202020; }

html, body { height: 100%; }
  #non-footer { min-height: 100%; }
  * html #non-footer { height: 100%; }

#header { background: rgba(0,0,0,0.5); font-size: 11px; line-height: 14px; text-transform: lowercase; }
  #header-inner { height: 36px; position: relative; }
  #header .abs-text { position: absolute; top: 50%; margin-top: -7px; }

  #paperclip { position: absolute; left: 20px; top: 50%; margin-top: -8px; width: 15px; height: 16px; background: url(../images/logo-small-gray.gif) no-repeat top left; }

  #music-player { }
  
    #music-player .controls { position: absolute; left: 50px; top: 50%; margin-top: -4px; }
    #music-player .controls li { float: left; margin-right: 5px; }
    #music-player .controls a { display: block; height: 7px; text-indent: -5000px; background-image: url(../images/player-controls.gif); background-repeat: no-repeat; line-height: 7px; }
      #music-player .controls a.active,
      #music-player .controls a:hover { background-image: url(../images/player-controls-active.gif);; }
    
    #music-player .controls .prev { width: 7px; background-position: -28px 0; }
    #music-player .controls .stop { width: 6px; background-position: -18px 0; }
    #music-player .controls .play { width: 4px; background-position: 0 0 }
    #music-player .controls .next { width: 7px; background-position: -38px 0; }
    
    #music-player .player-status { left: 103px; color: #CBCBCB; }
    
    #music-player .playlist { display: none; }
    
  #social-links { right: 20px; }
    #social-links .item { float: left; margin-left: 15px; position: relative; }
    
    #social-links .item-link { color: #cbcbcb; padding: 0 1px; display: block; }
      #social-links .item-link:hover { color: black; text-decoration: none; background-color: white; }
      
    #social-links .retweet { color: #F2309C; }
      #social-links .retweet:hover { color: black; background-color: #F2309C; }
      
    #social-links #contact-actuator { color: #1ED820; }
      #social-links #contact-actuator:hover { color: black; background-color: #1ED820; }
      
    
    #social-links .subscribe .item-link { padding-left: 16px; background-image: url(../images/rss-white.png); background-repeat: no-repeat; background-position: 1px center; }
      #social-links .subscribe .item-link:hover { background-image: url(../images/rss-black.png); }
    
    #social-links .dialog { background: black; display: none; position: absolute; top: 25px; right: 0; width: 125px; padding: 10px; background: rgba(0, 0, 0, 0.8); border: 5px solid #1a1a1a; }
      #social-links .dialog { -moz-box-shadow: 0 0 20px black; -moz-border-radius: 10px; }
      #social-links .dialog { -webkit-box-shadow: 0 0 20px black; -webkit-border-radius: 10px; }
      #social-links .dialog li { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #202020; }
        #social-links .dialog li .icon { vertical-align: middle; margin-right: 3px;}
      #social-links .dialog .arrow { position: absolute; right: 15px; top: -13px; width: 15px; height: 8px; background: url(../images/dialog-arrow.gif); }
      
    #social-links .twitter .dialog { width: 350px; }
    #social-links .twitter .date { text-transform: none; color: #E50687; }
    
    #social-links .elsewhere li { line-height: 1; }
      #social-links .elsewhere li a { color: white; }

  #lifestream { position: absolute; top: 46px; right: 10px; padding: 15px; background: black; font-size: 11px; }
    #lifestream { -webkit-border-radius: 10px; }

#footer { position: relative; margin-top: -34px; background: rgba(0,0,0,0.4); text-transform: lowercase; }
  #footer-inner { height: 21px; font-size: 11px; line-height: 1; padding: 10px 10px 0 10px; }
  #footer .align-left { float: left; }
  #footer .align-right { float: right; }
  
#pixels { width: 100%; }
  #pixels td { width: 1px; height: 3px; }

#sidebar { float: left; width: 140px; }
  #sidebar .nav { text-align: right; font: 12px "OCRA"; text-transform: lowercase; margin-top: -30px; }
  #sidebar .nav li { margin-bottom: 3px; }
  #sidebar .nav .separated { margin-top: 15px; }
  #sidebar .nav a { color: white; background: black; }
    #sidebar .nav a:hover { text-decoration: none; }
    #sidebar .nav a.selected { background: #eb008b; color: black; }
      #sidebar .nav a.selected:before { content: "*"; }
    
#blog, #labs, #labs-project, #about, #projects, .middle { float: left; margin-left: 20px; width: 640px; margin-bottom: 15px; }
#blog { width: 540px; }
#labs { width: 540px; }
#labs-project { width: 735px; }
#about { }

#blog-sidebar { float: left; margin-left: 20px; width: 175px; }
  #blog-sidebar h2 { margin-top: 0; font-size: 12px; }
  #blog-sidebar a { color: white; }
    #blog-sidebar a.active { color: #E50687; }
  #blog-sidebar .link-list { text-transform: lowercase; }
  .blog-sidebar-item { margin-bottom: 15px; }
  
/* Labs */

#labs-projects { }
  #labs-projects .labs-project { padding: 15px; margin-top: 15px; position: relative; }
  #labs-projects .odd { background: #181818; }
  #labs-projects .even { background: #202020; }
  #labs-projects .image { width: 120px; height: 80px; background: black; float: left; }
  #labs-projects .text { font-size: 11px; margin-left: 135px; }
  #labs-projects h2 { font-family: "OCRA"; font-size: 12px; text-transform: lowercase; margin-bottom: 3px; }
    #labs-projects h2 a { color: white; }
    #labs-projects h2 a:hover { text-decoration: none; color: #E50687; }
  #labs-projects .post-meta { position: absolute; bottom: 15px; right: 15px }
    
#lab-container { margin-bottom: 15px; }
    
    



/* Boxy!!! */

.boxy-wrapper { position: absolute; }
.boxy-wrapper.fixed { position: fixed; }

  /* Modal */
  
  .boxy-modal-blackout { position: absolute; background-color: black; left: 0; top: 0; }
  
  /* Border */

  .boxy-wrapper { empty-cells: show; }
	.boxy-wrapper .top-left,
	.boxy-wrapper .top-right,
	.boxy-wrapper .bottom-right,
	.boxy-wrapper .bottom-left { width: 10px; height: 10px; padding: 0 }
	
	.boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); }
	.boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); }
	.boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); }
	.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); }
	
	/* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
	/* NB: these must be absolute paths or URLs to your images */
	.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-nw.png'); }
	.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-ne.png'); }
	.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png'); }
	.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); }
	
	.boxy-wrapper .top,
	.boxy-wrapper .bottom { height: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
	
	.boxy-wrapper .left,
	.boxy-wrapper .right { width: 10px; background-color: black; opacity: 0.6; filter: alpha(opacity=60); padding: 0 }
	
	/* Title bar */
	
	.boxy-wrapper .title-bar { background-color: #E50687; padding: 6px; position: relative; }
	  .boxy-wrapper .title-bar.dragging { cursor: move; }
	    .boxy-wrapper .title-bar h2 { font-size: 12px; color: white; line-height: 1; margin: 0; padding: 0; font-weight: normal; }
	    .boxy-wrapper .title-bar .close { color: white; position: absolute; top: 6px; right: 6px; font-size: 90%; line-height: 1; }
		
	/* Content Region */
	
	.boxy-inner { background-color: #181818; padding: 0 }
	.boxy-content { padding: 15px; }
	
	/* Question Boxes */

    .boxy-wrapper .question { width: 350px; min-height: 80px; }
    .boxy-wrapper .answers { text-align: right; }
    
  .boxy-content label { font-size: 11px; display: block; margin-bottom: 3px; }
  .boxy-content .iw { background: #252525; padding: 3px; width: 250px; margin-bottom: 5px; }
  .boxy-content .iw input,
  .boxy-content .iw textarea { padding: 0; display: block; width: 100%; background: none; border: 0; color: white; }
  .boxy-content textarea { height: 80px; }
  .boxy-content .buttons { text-align: right; }