/* # Import # */
@import url("typography.framework.css");

/* # Base # */
html { background: #eceff2 url(/static/gfx/textures/blue_noise.gif); font-family: Helvetica, sans-serif; }

/* # Header # */
div#header { background: #fff url(/static/gfx/textures/wood_broad.jpg) repeat-x; font-size: 1em; overflow: hidden; }
	div#header div {Êwidth: 54em; position: relative; }

	/* Title */
	h1 { width: 120px; height: 14px; position: absolute; top: 25px; padding: 0; overflow: hidden; text-indent: -999em; }
		h1 a { display: block; height: 14px; background: url(/static/gfx/logo.png) no-repeat; text-decoration: none; }
			h1 a:hover { background-position: 0 -14px; }

	/* Navigation */
	div#header ul { padding: 7.8em 0 2.5em; font-size: 1em; }
		div#header li { font-size: 1.2em; float: left; list-style-type: none; margin: 0 2em 0 0; padding: 0; }
		div#header li a,
		div#header strong { text-decoration: none; color: #4a4a4a; font-weight: bold; font-size: 0.9em; text-transform: uppercase; display: block; padding: 2px 0; height: 16px; text-align: center; text-shadow: 1px 1px 1px #fff; }
		
			div#header li a:hover { color: #000; /*background: url(/static/gfx/navigation/hover.gif) no-repeat;*/ }
			div#header li.active a,
			div#header li.active strong { margin-right: 0; width: 82px; background: url(/static/gfx/navigation/active.gif) no-repeat; }
			
			/* Search input */
			div#header li.search { float: right; width: 140px; margin: 0; }
			 div#header li.search input { width: 140px; }
	

/* # Content # */
div.content-block { color: #333; text-shadow: 1px 1px 1px #fff; padding: 40px 0; _height: 1%; }
	div.content-block:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

	/* Content parts */
	div.content-block.second { background: #d3dce5 url(/static/gfx/textures/blue_noise_darker.gif); }
	div.content-block.third { background: #f1f4f7 url(/static/gfx/textures/blue_noise_lighter.gif); }
	
	/* Grid */
	div.grid { float: left; }
		div.grid.wide { width: 540px; margin-right: 20px; }
		div.grid.thin { width: 140px; margin-left: 80px; }
		div.grid.one-third { /*width: 37em; margin-right: 2em;*/ width: 30%; }
		div.grid.half { width: 380px; }
		  div.grid.half.odd { margin-right: 20px; }
		  div.grid.half.extra { padding-top: 53px; }

	/* Common elements */
	blockquote { color: #666; }
	pre { -webkit-border-radius: 5px; display: block; background: #f9f9f9; padding: 0; margin: 2em 0 3em; width: 540px; overflow-x: auto; }   
	   pre code { padding: 1.5em;  margin: 0; display: block; }
	   div.content-block.third pre { background: #fff; }
	p img,
	ul.img img,
	p object { margin: 1em auto; display: block; padding: 10px; background: #d3dce5; }
	
	p.img.right { float: right; margin: 0 0 0 2em; }
	   p.img.right img,
	   p.img.left img { margin: 0; }

    p.img.left { float: left; margin: 0 2em 0 0; }
	
	img.big { margin-left: 0; }
	
	h2.quote { margin-left: -0.5em; }
	
	.lesser { color: #999; }
		span.lesser { color: #ccc; }
	
	blockquote p.cite { text-align: right; }
	
	div.content-block a { color: #000; font-weight: bold; padding-bottom: 0.1em; border-bottom: 1px solid #ccc; text-decoration: none; }
		div.content-block a:hover { color: #666; }
		div.content-block a:visited { color: #666; }
		
		div.content-block h2 a,
		div.content-block h2 a:visited { color: #000; border: 0; padding: 0; }
			div.content-block h2 a:hover { color: #666; }

    /* Home specific */
    div.fresh-tunes { position: relative;  }
        div.content-block.fresh-tunes a { border: 0; }
        div.fresh-tunes h2 { padding: 0; padding-bottom: 0px; margin: 40px 0; }
        div.fresh-tunes ul { font-size: 1em; position: absolute; top: 20px; margin-left: 22em; margin-bottom: 0; }
            div.fresh-tunes ul li { list-style-type: none; float: left; margin-right: 15px; }
                div.fresh-tunes ul li.last { margin: 0; }
                div.fresh-tunes ul li.spinner { padding-top: 60px; background: url(/static/gfx/spinners/spinner.gif) 100% 100% no-repeat; width: 32px; height: 32px; float: none; margin: 0 auto; }
            div.fresh-tunes ul img { width: 135px; height: 135px; background: #fff; border: 1px solid #ddd; padding: 4px; }

	/* Notebook specific */
	p.date { color: #999; }
	div.content-block.information { padding: 0; }
		div.content-block.information h3 { color: #546a78; padding: 1.5em 0; }
		
		/* Comments */
		div.content-block.comments { padding-bottom: 22px; }
		ol#comments { font-size: 1em; margin: 0; }
			ol#comments li { list-style-type: none; min-height: 7.9em; }
				ol#comments li + li { margin-top: 1.5em; padding-top: 3.5em; }
			ol#comments dl { font-size: 1em; margin: 0; }
			
			ol#comments dt a,
			ol#comments dt a:visited { float: right; display: block; width: 140px; margin-top: 0.2em; font-size: 11px; color: #aaa; border: 0; }
				ol#comments dt a:hover { color: #666; }
			ol#comments img.avatar { float: left; padding: 5px; background: #d3dce5; }
		
			ol#comments dl { font-size: 1em; }
			ol#comments dd { margin: 0 240px 0 80px; }
			
			ol#comments h3,
			ol#comments h3 a,
			ol#comments h3 a:visited { color: #333; padding-top: 0; border: 0; }
				ol#comments h3 a:hover { color: #666; }
				
			div.comment-info { color: #666; padding-top: 1.8em; }
				div.comment-info a,
				div.comment-info a:visited { color: #333; }
					div.comment-info a:hover { color: #999; }

            /* markdown */
            ol#comments ul { }
                ol#comments ul li { min-height: 0; list-style-type: disc; }
                ol#comments ol li { min-height: 0; list-style-type: decimal; }
                    ol#comments ul li + li,
                    ol#comments ol li + li { margin-top: 0; padding-top: 0; }
		
		/* Notebook info column */
		div.notebook-info h3:first-child { padding-top: 5.7em; }
		div.notebook-info ul { font-size: 1em; }
		div.notebook-info ul li { list-style-type: none; }
			div.notebook-info ul.related li { margin-bottom: 0.5em; }
			
			div.notebook-info ul a,
			div.notebook-info ul a:visited { font-size: 1.5em; color: #94b2d0; border: 0; }
				div.notebook-info ul a:hover { color: #7597b9; }
				div.notebook-info ul.related a { font-size: 1.2em; }
		
		/* Big note list */
		dl.note-list { _height: 1%; font-size: 1em; padding-top: 2em; margin-bottom: 0; line-height: inherit; }
			dl.note-list dd { margin: 0 0 3em; padding-bottom: 1.5em; zborder-bottom: 1px dashed #ccc; position: relative; }
				dl.note-list dd.last { border: 0; margin-bottom: 0; }
			
			dl.note-list h4 { z-index: 999; position: absolute; padding-top: 3px; font-weight: bold; font-size: 110%; margin-left: 540px; width: 80px; text-transform: none; }
				dl.note-list h4.article { padding-top: 14px; }
				
                    dl.note-list h4 a,
                    dl.note-list h4 a:visited { color: #999; border: none; }
                        dl.note-list h4 a:hover { color: #666; }
				
			dl.note-list h2 { padding-top: 0; zfloat: left; width: 530px; }
				dl.note-list h2 a,
				dl.note-list h2 a:visited { color: #444; }
					dl.note-list h2 a:hover { color: #666;  }
			
			dl.note-list div.item-wrapper { width: 470px; margin-left: 0; }
			
			dl.note-list blockquote { margin: 0; }
					dl.note-list blockquote p.cite { font-size: 1.2em; }
			
				dl.note-list p.date { position: absolute; top: 1.5em; left: 0; width: 150px; margin-left: 540px; padding-top: 0.1em; font-weight: bold; color: #ccc; font-size: 1.1em; }
					dl.note-list dd.article p.date { padding-top: 0.95em; }
					dl.note-list dd.link p.date { padding-top: 0.2em; }
				
				dl.note-list ul.tags { position: absolute; top: 0; right: 0; width: 80px; }
					dl.note-list dd.article ul.tags { top: 12px; }
					dl.note-list dd.link ul.tags { top: 0.1em; }
					
					dl.note-list ul.tags li { list-style-type: none; }
					dl.note-list ul.tags a { color: #b9b9b9; border: 0; }
						dl.note-list ul.tags a:hover { color: #7597b9; }
						
        /* Date note list */
        body.archive_index h2.year { position: absolute;  }
        body.archive_index h3,
        body.archive_index ul.note-date-list { margin-left: 100px;}
            body.archive_index h3.first { padding-top: 1.35em; }
        
        ul.note-date-list { font-size: 1em; }
            ul.note-date-list li { list-style-type: none; }
            
                ul.note-date-list dl { margin: 0; font-size: 1em; line-height: normal; }
                    ul.note-date-list dt { float: left; width: 2em; margin: 0 1em 0 0; color: #999; padding-top: 0.4em; }
                    ul.note-date-list dd { float: left; }
            
                ul.note-date-list h4 { font-size: 1.3em; line-height: 1.5em; float: left; width: 380px; margin-right: 120px; padding: 0; }
                ul.note-date-list p { font-size: 1.1em; font-weight: bold; float: left; padding: 0; }
                
                ul.note-date-list a { border: 0; color: #555; }
                    ul.note-date-list a:visited { color: #999; }
                    ul.note-date-list h4 a { font-weight: normal; }
                        ul.note-date-list h4 a:hover { color: #999; }
                    
                    ul.note-date-list p a,
                    ul.note-date-list p a:visited { color: #999; }
                        ul.note-date-list p a:hover { color: #666; }
		
		/* Tag detail */
		body.tag_detail h3 { color: #666; }
			body.tag_detail ul li { list-style-type: none; }
			body.tag_detail ul a,
			body.tag_detail ul a:visited { border: 0; color: #666; }
				body.tag_detail ul a:hover { color: #999; }
			
			body.tag_detail blockquote { margin: 0; }	
				body.tag_detail blockquote a { font-weight: normal; }
				
    /* Portfolio specific */
    img.thumbnail,
    img.icon,
    ul.work.websites img,
    ul.screenshots img { background: #fff; padding: 4px; border: 1px solid #ddd; }
    
        /* frontpage */
        dl.recent-project { padding: 20px 0; }
            dl.recent-project dt { float: left; margin-right: 50px; }
                dl.recent-project dt a { display: block; }
            dl.recent-project dd { position: relative; margin-left: 380px; display: block; }
            
                dl.recent-project h3,
                dl.recent-project p { margin-right: 160px; }
                    dl.recent-project p.info { width: 80px; margin: 0; color: #b9b9b9; position: absolute; right: 0; top: 10px; font-weight: bold; }
                
                dl.recent-project a,
                dl.recent-project a:visited { border: 0; color: #333; }
                    dl.recent-project a:hover { color: #666; }
                dl.recent-project h4 { font-size: 70%; margin-left: 10px; color: #999; }
        
        /* Item list */
        div.work h3 { padding-bottom: 20px; }
        
        ul.work li { float: left; list-style: none; position: relative; }
            ul.work li.odd { margin-right: 20px; }
            
            ul.work strong { padding-top: 0.5em; display: block; text-align: center; }
                ul.work span.title { font-weight: bold; display: block; }
                ul.work span.info { color: #888; display: block; }
                    
            ul.work a,
            ul.work a:visited { color: #222; padding: 0; border: 0; display: block; }
                ul.work a:hover { color: #777; }
        
            /* Websites */
            ul.work.websites li { margin-bottom: 20px; width: 380px; }
                ul.work.websites a:hover img { opacity: 0.8; }
                ul.work.websites a:hover span.info { color: #aaa; }
            
            /* Widgets */
            ul.work.widgets li { margin-right: 20px; width: 120px; text-align: center; }
            ul.work.widgets a { padding: 15px 1px; }
                ul.work.widgets a:hover { background: #fff; padding: 14px 0; border: 1px solid #ddd; }
        
        /* Detail */
        ul.screenshots {Êbackground: #fff; }
            ul.screenshots li { float: left; list-style: none; margin: 0; padding: 0; }
                ul.screenshots li.odd { margin-right: 20px; }
            ul.screenshots a { border: 0; padding: 0; }
    
    /* About specific */
    body.about p.img.left { padding-top: 14px; }
        body.about p img { display: inline; }

    body.about div.grid.half { width: 300px; }
    body.about div.grid.half.odd { width: 380px; margin-right: 100px; }

    /* Search specific */
    ul.search-results { font-size: 1em; }
        ul.search-results b { font-weight: bold; }
        ul.search-results h3 a { color: #444; border: 0; }
            ul.search-results h3 a:visited { color: #888; }
            ul.search-results h3 a:hover { color: #666; }
        ul.search-results p { float: left; width: 540px; }
            ul.search-results p.date { margin-left: 100px; width: 80px; font-weight: bold; color: #aaa; }
    
    div.pagination p,
    div.more p { padding: 0; }
    div.pagination span.current { margin-right: 1em; font-weight: bold; color: #666; }
        div.pagination a,
        div.pagination a:visited { color: #333; background: #cad7e4; padding: 0.2em 0.6em; margin-right: 1em; border: 0; }
            div.pagination a:hover { color: #222; background: #dae2ea; }

	/* Forms */
	form { margin: 1em 0; }
		form p { padding: 0.75em 0; }
		label { font-size: 0.9em; float: left; display: block; width: 6.2em; width: 6.9em; }
		  form p.checkbox label { float: none; display: inline; width: auto; height: auto; vertical-align: middle; }
		  form p.checkbox img { vertical-align: middle; line-height: 1.5em; }
		form span { margin-left: 0.5em; font-size: 0.9em; color: #999; }
		form em { color: #999; margin-left: 0.3em; font-size: 90%; font-weight: bold; }
		form p img { margin: 0; display: inline; padding: 0; background: none; }
		
		input[type=submit] { font-weight: bold; font-size: 11px; color: #444; text-shadow: 1px 1px 1px #fff; }
		
		input[type=text] { width: 17.25em; font-size: 1em; padding: 0.2em 0; }
		textarea { width: 34.5em; font-family: inherit; font-size: 1em; }
		
		form p.checkbox div { vertical-align: middle; }
		
			/* border */
			input[type=text],
			textarea { border: 1px solid #999; border-left-color: #bbbaba; border-right-color: #ccc; border-bottom-color: #ccc; }
			
			/* focus */
			input[type=text]:focus,
			textarea:focus { border-color: #999; outline: 2px solid #d3dce5; outline-offset: 0; }
	
	   form.settings { margin: 0; }
	       form.settings p { float: left; width: 80px; margin-right: 20px; }

        form ul { margin: 0 0 0.5em 6.67em; }
            form ul li { background: none; padding: 0 0.6em; margin: 0.1em 0; border-left: 0.2em solid #d3dce5; color: #333; font-weight: bold; }

        div#header form { margin: 0; }
	
/* # Footer # */
p#footer { font-size: 1em; padding: 3em 0; background: #d3dce5 url(/static/gfx/textures/blue_noise_darker.gif); }
	p#footer span { color: #5c6f82; text-shadow: 1px 1px 1px #fff; display: block; }

/* # Width # */
div#header div,
div.content-block > div,
p#footer span { width: 78em; margin-left: auto; margin-right: auto; }

/* # Helvetica Neue # */
h2,
h3 { font-family: "Helvetica Neue", Helvetica, sans-serif, verdana; font-weight: 600; }
body { font-family: "Helvetica Neue", Helvetica, sans-serif, verdana; font-weight: 300; }
	code { font-family: monospace; }

/* # Border radius # */
	/* 3px */
	p img,
	ul.img img,
	p object,
	img.thumbnail,
	img.icon,
	ul#last_fm img,
	div.pagination a { -webkit-border-radius: 3px; -moz-border-radius: 3px; }
	
	/* 8px */
	ul.work.widgets a:hover { -webkit-border-radius: 8px; -moz-border-radius: 8px; }
	
/* # Clearfix # */
.clear { clear: both; }
.clearfix { display: inline-block; }
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
hr { width: 10px; height: 1px; border: 0; color: #fff; border-color: #fff; }

/* # IE sucks, yadda yadda yadda # */
*:first-child+html ul.work li.odd,
*:first-child+html ul.screenshots li.odd,
*:first-child+html div.grid.half.odd { margin-right: 15px; }