/*  
Theme Name: Bits & Pixels
Theme URI: http://bitsandpixels.eu/
Description: The first version of bits and pixels
Version: 1
Author: Fredrik Wärnsberg
Author URI: http://bitsandpixels.eu

The CSS or imagery may not be used without my written permission.

*/


@import 'reset.css';
@import 'typography.css';
@import 'forms.css';

html { min-height: 101%; overflow-x: hidden; }
body { width: 830px; position: absolute; left: 50%; top: 0; margin-left: -415px; background: url(../images/bg.gif) 13px 0; }
#logo { width: 581px; height: 393px; background: url(../images/logo.jpg) no-repeat; margin-left: -245px; }
#logo h1 { padding: 0; margin: 0; text-indent: -9999px; }
#logo a { position: absolute; top: 37px; left: -9px; display: block; width: 205px; height: 138px; overflow: hidden; cursor: pointer; border: 0; }

#faux-hover { width: 581px; height: 393px; background: url(../images/logo.jpg) no-repeat bottom left; }

#access { position: absolute; left: -9999px; }

#nav {  right: -50px; top: 55px; position: absolute; list-style: none; }
#nav li { text-indent: -9999px; position: relative; display: inline; float: left; background: none; }
#nav li a { display: block; overflow: hidden; float: left; cursor: pointer; border: 0; }
#nav #home { width: 82px; height: 98px; }
#nav #work { margin-left: -25px; width: 82px; height: 99px; }
#nav #about { margin-left: -30px; width: 86px; height: 102px; }
#nav #articles { margin-left: -35px; width: 101px; height: 122px; }
#nav #home a { width: 82px; height: 98px; background: url(../images/home.gif) 0 -200px; }
#nav #work a { width: 82px; height: 99px; background: url(../images/work.gif) 0 -199px; }
#nav #about a { width: 86px; height: 102px; background: url(../images/about.gif) 0 -203px; }
#nav #articles a { width: 101px; height: 122px; background: url(../images/articles.gif) 0 -249px; }

#nav #home a:hover { background: url(../images/home.gif) 0 -100px; }
#nav #work a:hover { background: url(../images/work.gif) 0 -97px; }
#nav #about a:hover { background: url(../images/about.gif) 0 -105px; }
#nav #articles a:hover { background: url(../images/articles.gif) 0 -123px; }

#nav #home.active a,
#nav #home.active a:hover,
.hasJS #nav #home.active a:hover { background: url(../images/home.gif); }
#nav #work.active a,
#nav #work.active a:hover,
.hasJS #nav #work.active a:hover { background: url(../images/work.gif); }
#nav #about.active a,
#nav #about.active a:hover,
.hasJS #nav #about.active a:hover { background: url(../images/about.gif); }
#nav #articles.active a,
#nav #articles.active a:hover,
.hasJS #nav #articles.active a:hover { background: url(../images/articles.gif); }

.hasJS #nav #home a:hover { background: url(../images/home.gif) 0 -200px; border: 0; }
.hasJS #nav #work a:hover { background: url(../images/work.gif) 0 -199px; }
.hasJS #nav #about a:hover { background: url(../images/about.gif) 0 -203px; }
.hasJS #nav #articles a:hover { background: url(../images/articles.gif) 0 -249px; }

/* For the hover javascript */
#nav a#home-hover,
.hasJS #nav a:hover#home-hover { cursor: pointer; display: block; float: left; margin-left: -82px; width: 82px; height: 99px; background: url(../images/home.gif) 0 -100px; }
#nav a#work-hover,
.hasJS #nav a:hover#work-hover  { cursor: pointer; display: block; float: left; margin-left: -82px; width: 82px; height: 99px; background: url(../images/work.gif) 0 -97px; }
#nav a#about-hover,
.hasJS #nav a:hover#about-hover  { cursor: pointer; display: block; float: left; margin-left: -86px; width: 86px; height: 102px; background: url(../images/about.gif) 0 -105px; }
#nav a#articles-hover,
.hasJS #nav a:hover#articles-hover  { cursor: pointer; display: block; float: left; margin-left: -101px; width: 101px; height: 124px; background: url(../images/articles.gif) 0 -123px; }

#wrapper { margin-top: -160px; overflow: hidden; }

.content-overlay { background: #000; opacity: 0.45; position: absolute; top: 0; left: 0; bottom: 0; }
.content { float: left; position: relative; padding: 0 5px 19px 1.5em; overflow: hidden; }


.column-1 { width: 620px; float: left; display: inline; position: relative; overflow: hidden; }
#content-1 { width: 620px; float: left; display: inline; position: relative; }
.column-1 .content-overlay{ width: 620px; }
.column-1 .content { width: 590px; }
.column-1 .round-top { width: 620px; height: 44px; background: url(../images/round-top-small.png); position: absolute; top: 0; left: 0; }
#single .column-1 .content-overlay { top: 44px; }

.column-2 { float: right; width: 200px; position: relative; margin-left: 10px;  overflow: hidden; }
#content-2 { float: right; width: 200px; position: relative; }
.column-2 .content-overlay { width: 200px; }
.column-2 .content { padding: 0 0px 9px 10px; width: 180px; }

#sidebar-search { position:relative; float: right; margin-top: 10px; }
#sidebar-search .content { width: 190px; padding-top: 1em; }
#sidebar-search h3 { color: #8c8c8c; position: absolute; left: -9999px; }

#top-corner { position: relative; width: 830px; background: url(../images/round-top.png) no-repeat top left; height: 44px; margin-bottom: -44px; }
.top-column,
#portfolio-slide { width: 830px; float: left; position: relative; overflow: hidden; margin-bottom: 10px; }
.top-column .content-overlay,
#portfolio-slide .content-overlay { width: 830px; }
.top-column .content-overlay { top: 44px; }
.ajax-loader { margin-left: 45%; margin-top: 90px; }


#portfolio-slide .content { padding: 0; }
#project-info { width: 182px; padding: 0 0 0 1.5em; float: left; display: inline; margin-right: 10px; min-height: 1px; }
#project-info p {  font-size: 0.9167em; line-height: 1.6363em; }
#project-image { width: 610px; float:left; overflow: hidden; margin: 0; position: relative; margin-top: 10px; display: block; height: 246px; margin-bottom: 10px; }
#project-image #controls { position: absolute; height: 35px; width: 100%; bottom: 30px;}
#project-image .overlay { position: absolute; bottom: 0; opacity: 0.5; background: #000; height: 35px; width: 100%; }
#controls { margin-left: 5px; }
#project-image #pagination .active { background: url(../images/pagination.gif) no-repeat top left; }
#project-image #pagination li { margin-top: 38px; display: block; float: left; padding: 0; background: url(../images/pagination.gif) no-repeat top right; width: 20px; height: 20px; text-align:center; font-size: 0.8334em; line-height: 20px; }
#project-image #pagination .active a { color: #000 !important; }
#project-image #pagination a { color: #00d8ff; }
#project-image #pagination a:hover,
#project-image #pagination a:visited:hover { color: #fff; }
#pagination a { border: 0; }

/* IE6 -- needs to compensate margin */
.noscript-projects { margin-top: 3.3em; }

#arrows { text-indent: -9999px; margin-top: 39px; margin-left: 560px; }
#arrows a { overflow: hidden; }
#left a,
#right a { width: 20px; height: 16px; background: url(../images/arrows.png) no-repeat; display: block; float: left; border: 0; }
#right a { background-position: top right; }
#left a:focus {  }
#right a:focus {  }

#drips-left { background: url(../images/drips-left.png) no-repeat top left; height: 149px; display: block; width: 620px; float: left; }
#drips-right { background: url(../images/drips-right.png) no-repeat top right; height: 149px; display: block; width: 200px; float: left; }


.column-2 ul li { border-bottom: 1px solid #2d2f30; padding-bottom: 0.5em; margin-bottom: 0.5em; }

#wrapper { background: url(../images/footer.jpg) no-repeat bottom right; float: left; }
#footer { width: 830px; position: relative; float: left; height: 150px; overflow: hidden; }
#footer-content { position: absolute; bottom: -15px; }
#footer-content .logos { float: left; }
#footer-content .logos img { position: relative; top: -0.5em; }
#footer-content a img { border: 0 !important; }
#footer-content .footer-text { padding: 0; float: left; display: inline; margin-left: 9px;  padding-left: 9px; border-left: 1px solid #6b7275; font-size: 0.8334em; width: 400px; }
#footer-content .footer-text img { position: relative; top: -0.6em; }

.code-type { float: right; background: #2d2f30; color: #909597; margin-top: -5px; margin-right: -5px; padding: 0 4px; text-transform: capitalize; font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 0.8334em; }

.comments { float: left; }
.comments .left { float: left; display: inline; font-size: 0.8334em; margin-right: 10px; width: 84px; }
.bubble { background: url(../images/comment.gif) no-repeat; display: block; width: 84px; height: 82px; position: relative; color: #7d7d7d; margin-right: 10px; letter-spacing: -0.1em; }
.bubble img { border: 2px solid #242424; position: absolute; top: 5px; left: 5px; }
.bubble .number { position: absolute; top: 5px; right: 5px; }
.bubble .date { position: absolute; bottom: 17px; left: 5px; }
.left strong { margin-top: -3px; margin-left: 2px; float: left; }
.comments .right { float: left; width: 480px; margin-top: -0.4em; text-align: justify; }
.comments .comment { border-bottom: 1px solid #27292b; float: left; margin-bottom: 1.5em; padding-bottom: 1.5em; }
.comments a.author,
.comments a:visited.author { color: #EC008C; }
.comments a:hover.author,
.comments a:visited:hover.author { color: #fff; }
.comments a,
.comments a:visited { color: #00d8ff; }
.comments a:hover,
.comments a:visited:hover { color: #cff5fc; border-color: #434648; }

.archive-month { margin-bottom: 1.5em; float: left; width: 100%; }
.archive-month a,
.archive-month a:visited { width: 100%; float: left; clear: left; background: #0d0e10; border: 1px solid #212429; border-bottom-color: #060708; border-right-color: #060708; margin:0; padding: 0.5em 0; color: #00D8FF; }
.archive-month a:hover,
.archive-month a:visited:hover { background: #121316; color: #cff5fc; border: 1px solid #212429; border-bottom-color: #060708; border-right-color: #060708; }
.archive-month li { background: none; padding: 0; clear: left; }
.archive-month a .comments strong { display: none; }
.archive-month .date { float:left; margin-left: -74.5%; }
.archive-month .comments { float:right; margin-right: 1em; }
.archive-month .title { float: left; width: 70%; margin-left: 7%; font-weight: bold; }

.categories-list { float:left; clear:left; width: 580px; }
.categories-list li { background: none; padding: 0; float: left; }
.categories-list a,
.categories-list a:visited { display: inline-block; float: left; padding: 0.5em; border: 0; background: #0e0f12; border: 1px solid #212429; border-bottom-color: #060708; border-right-color: #060708; margin: 0em; width: 10.9167em; }
.categories-list a:hover,
.categories-list a:visited:hover { background: #121316; border: 1px solid #212429; border-bottom-color: #060708; border-right-color: #060708; }
.tags a,
.tags a:visited { display: inline-block; float: left; padding: 0.2em 0.4em; border: 0; background: #0e0f12; border: 1px solid #1b1d21; border-bottom-color: #060708; border-right-color: #060708; margin: 0em; }
.tags a:hover,
.tags a:visited:hover { background: #121316; border: 1px solid #1b1d21; border-bottom-color: #060708; border-right-color: #060708; }
.tags { margin-bottom: 1.8em; float: left; }

.button a,
.button a:visited { display: inline-block; float: left; padding: 0.5em; border: 0; background: #0e0f12; border: 1px solid #1b1d21; border-bottom-color: #060708; border-right-color: #060708; margin: 0em; }
.button a:hover,
.button a:visited:hover { background: #121316; border: 1px solid #1b1d21; border-bottom-color: #060708; border-right-color: #060708; }
.button { margin-bottom: 1.8em; float: none; }
.navigation .button { margin-bottom: 0; padding-bottom: 0; margin-top: 0.75em; }
.alignleft.button a { float:none; }
.alignright.button a { float: none; }

.entry { border-bottom: 1px solid #2D2F30; margin-bottom: 0.75em; padding-bottom: 0.75em; }

/*
	Some styles to align stuff more easily
*/
.left   { float:left; }
.right  { float:right; }

.hide   { display:none; }

.clearleft { clear: left; }
.clear { clear: both; }

.reset-margin   { margin:0; } 
.reset-padding  { padding:0; } 
.reset          { margin:0; padding:0; } 

.align-justify  { text-align:justify; } 
.align-left,
.alignleft     { text-align:left; } 
.align-center   { text-align:center; } 
.align-right,
.alignright    { text-align:right; }