/* 

@override http://wil-linssen.com/styles/screen.css 

Definition:	Screen CSS for wil-linsen.com
Author:			Wil Linssen [http://www.wil-linssen.com]
Revision:		00.00.00

----------------------------------
Table of contents
----------------------------------
	1.BODY
	2.GLOBALS ELEMENTS
	3.HEADINGS
	4.LINKS
	5.IMAGES & VIDEOS
	6.LAYOUT
	7.BRANDING/MASTHEAD
	8.NAVIGATION
	9.SITEINFO/FOOTER
	10.FORMS
	
	INDIVIDUAL PAGES
	--------------------------------
		11.HOME
		12.MUSINGS
		13.SEARCH
		14.PORTFOLIO

----------------------------------
COLOURS
----------------------------------
	grey:		    #333a3d
	light grey:	#e8eced
	blue:       #00aeef
	yellow:     #fff200
	
*/

@import url(/styles/reset.css); /* RESET CSS */

/* @group 1 BODY
-------------------------------------------------------------------------------------------------------------------- */
body { background: url(/images/site/body-bg.jpg) repeat #d7dbdd; font: 0.813em Helvetica, arial, sans-serif; color: #333a3d; line-height: 1.4em; }
/* @end */


/* @group 2 GLOBALS ELEMENTS
-------------------------------------------------------------------------------------------------------------------- */
.clear { clear: both; }

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#content hr { margin: 30px 0 40px 0; }

.alignleft {  float: left; margin: 0 10px 5px 0; }
.alignright {  float: right; margin: 0 0 5px 5px; }

ul.inline li { display: inline; }
ul.bullet { margin: 0 0 10px 20px; }
ul.bullet li { display: list-item; margin: 5px 0 0 0; list-style: disc outside; }

ul.boxes { clear: both; width: 425px; margin: 0 auto 25px auto; overflow: hidden; }
ul.boxes li a { float: left; margin: 0 10px 0 0; }
ul.boxes li.first a { clear: left; margin-bottom: 10px; }
ul.boxes li.last a { margin-right: 0; }

ul.category_list { clear: both; margin-bottom: 40px; }

#content ol { margin: 0 0 10px 20px; }
#content ol li { display: list-item; margin: 5px 0 0 0; list-style: decimal outside; }
#content ol li ol li { list-style-type: lower-roman; }

p { margin-bottom: 10px; }
p.date { color: #b44290; margin: -20px 0 10px 0; clear: both; }
p.pagination { clear: both; margin-bottom: 40px; background-color: #e8eced; padding: 5px; }

blockquote { display: block; padding-left: 10px; margin: 30px 10px 40px 20px; border-left: 2px solid #e8eced; color: #5A6266; font-family: Georgia, serif; font-style: italic; }
blockquote cite { font-size: 0.9em; }

code { display: block; clear: both; border-left: 5px solid #e8eced; padding: 10px; background-color: #2f2f2f; color: #f4efec; font: normal 1em "Consolas","Lucida Console","Monaco","Courier New",Courier,mono,serif; overflow-x: scroll; margin-bottom: 1em;  }

/* @end */



/* @group 3 HEADINGS
-------------------------------------------------------------------------------------------------------------------- */
h1 { display: block; text-indent: -99999px; background: no-repeat 0 0; float: left; margin: 0 -40px 40px 0; }
div#content.home h1 { background-image: url(/images/site/h1_home.png); width: 493px; height: 235px; margin: 0 -160px 40px -48px; }
div#content.about h1 { background-image: url(/images/site/h1_about.png); width: 330px; height: 134px; margin: 0 3px 40px -48px; }
div#content.musings h1 { background-image: url(/images/site/h1_musings.png); width: 360px; height: 95px; margin: 0 -33px 40px -48px; }
div#content.search h1 { background-image: url(/images/site/h1_generic.png); width: 493px; height: 235px; margin: 0 -160px 40px -48px; }
div#content.portfolio h1 { background-image: url(/images/site/h1_portfolio.png); width: 493px; height: 69px; margin: 0 -160px 40px -48px; }
div#content h1.not_found { background-image: url(/images/site/h1_404.png); width: 322px; height: 118px; margin: 0 -37px 40px 0; }


h2 { font-size: 1.385em; text-transform: uppercase; background-color: #e8eced; padding: 4px 1px 1px 1px; float: left; clear: both; margin-bottom: 40px; }
h3 { font-size: 1.077em; font-weight: bold; clear: both; margin-bottom: 20px; }
h3 a,
h3 a:hover { background: none; color: #333a3d; }

div#content.portfolio h2 { font: bold 3em Helvetica, Arial, sans-serif; background: none; float: none; line-height: 0.95em; margin-bottom: 10px; }
div#content.portfolio h3 { font: 1.6em normal Helvetica, Arial, sans-serif; line-height: 0.95em; color: #BC1C79; margin-bottom: 40px; }
div#content.portfolio h3 a { font-weight: bold; color: #BC1C79; border-color: #BC1C79; }
div#content.portfolio h3 a:hover { color: #fff; background: #00aeef; border: none; }
div#content.portfolio h4 { font-weight: bold; background-color: #e8eced; padding: 4px 1px 1px 1px; float: left; clear: both; margin-bottom: 20px; }
div#content.portfolio div#credits h4 { float: right; }

/* @end */


/* @group 4 LINKS
-------------------------------------------------------------------------------------------------------------------- */
/*a { background-color: #5A6266; color: #fff;  }*/
a { color: #333a3d; border-bottom: 1px dashed #5A6266;}
a:hover { background-color: #fff200; color: #333a3d; }

a.icon { padding-left: 18px; background: no-repeat 0 0; }
a.icon.download { background-image: url(/images/site/ico_download.png); }
a.icon.download:hover { background-color: #fff200; color: #333a3d; }

a.shadow-box { background: url(/images/site/shadowBox_large_bg.png) no-repeat 50% 100%; padding: 0 0 19px 0; display: block; width: 465px; border: none; }
div.col.left a.shadow-box { margin: 0 0 10px -40px; }
div.col.right a.shadow-box { margin: 0 -45px 10px 0; }

div.col a.shadow-box.small { background-image: url(/images/site/shadowBox_small_bg.png); padding: 0 0 10px 0; margin: 0 10px 0 0; width: 135px; }
div.col a.shadow-box.gravatar { background-image: url(/images/site/shadowBox_avatar_bg.png); width: 60px; height: 60px; padding: 0 0 8px 0; margin: 0; }

div.col ul li.last a.shadow-box.small { margin: 0; }
a.shadow-box img { width: 455px; border: 5px solid #e8eced; }
a.shadow-box.small img { width: 125px; }
a.shadow-box.gravatar img { width: 50px; }
a.shadow-box:hover img { border-color: #fff; }

div#footer a,
div#collateral a { background: none; border-bottom: 1px dashed #9ba1a5; color: #9ba1a5; }
div#footer a:hover,
div#collateral a:hover { color: #e8eced; border-color: #e8eced; }

/* @end */


/* @group 5 IMAGES & VIDEO
-------------------------------------------------------------------------------------------------------------------- */

/* @end */


/* @group 6 LAYOUT
-------------------------------------------------------------------------------------------------------------------- */
div.wrapper { width: 970px; margin: 0 auto; clear: both; }
div#content { background: url(/images/site/bg-wrapper.jpg) no-repeat; position: relative; padding: 10px 0 0 0;  }

/*div#content { background: url(/images/site/bg-grid.png) repeat-y; 0 0; }*/

div.col { float: left; width: 425px; margin-left: 40px; }
div.col.last { margin-right: 0; }
div.col.c1 { width: 125px; }
div.col.c2 { width: 200px; }
div.col.c3 { width: 425px; }
div.col.c6 { width: 890px; }

/* @end */


/* @group 7 BRANDING/MASTHEAD
-------------------------------------------------------------------------------------------------------------------- */
div#masthead { }

/* @end */


/* @group 8 NAVIGATION
-------------------------------------------------------------------------------------------------------------------- */
ul#nav-main { text-align: right; width: 140px; float: left; margin: 11px 0 40px 0; }
ul#nav-main li a { text-transform: uppercase; font-size: 1.385em; color: #333a3d; padding: 4px 1px 1px 1px; background: none; border: none; }
ul#nav-main li a:hover { color: #fff; background-color: #00aeef; }
ul#nav-main li a.current { color: #e8eced; background-color: #333a3d; }

body#portfolio ul#nav-main { width: auto; text-align: left; margin: 0 0 40px 0; }
body#portfolio ul#nav-main li { display: inline; margin: 0; }
body#portfolio ul#nav-main li a { font-size: 1em; text-transform: none; margin: 0; background-color: #e8eced; padding: 5px; }
body#portfolio ul#nav-main li a:hover { background: #00aeef; }
body#portfolio ul#nav-main li a.current { color: #e8eced; background-color: #333a3d; }

/* @end */


/* @group 9 FOOTER
-------------------------------------------------------------------------------------------------------------------- */
div#footer { background: url(/images/site/footer-bg.jpg) repeat-x #2b3134 0 0; color: #9ba1a5; font-size: 0.92em; }
div#footer div.wrapper,
div#collateral div.wrapper { width: 890px; margin: 0 auto; padding: 40px 20px; position: relative; }

div#footer div.col { width: 209px; margin: 0; padding: 0; }
div#footer div.col.three { margin: 0; padding: 0; width: 435px; }

div#footer div.box { padding: 10px; }
div#footer div.col.one div.box { padding-left: 0; }
div#footer div.col.two div.box { border-right: none; }

div#footer h4 { color: #e8eced; text-transform: uppercase; margin-bottom: 5px; }

div#footer div.whereabouts h4.twitter { background: url(/images/site/footer_comment_bg.png) no-repeat 175px 10px; padding-bottom: 5px; margin: 0; }
div#footer div.whereabouts div.tweet { padding: 5px; background-color: #464d52; }
div#footer div.whereabouts div.tweet p.follow { text-align: right; margin: 0; }
div#footer div.whereabouts div.tweet p.follow a { padding: 3px 30px 2px 0; background: url(/images/site/footer_twitter_link.jpg) no-repeat 100% 0; border-bottom: 1px dashed #9ba1a5; }

div#footer div.contact form input.input-text,
div#footer div.contact form textarea { width: 425px; padding: 5px; font: 1em "Helvetica", arial, sans-serif; border: 1px solid #333a3d; background-color: #464d52; color: #9ba1a5; }
div#footer div.contact form input.input-text:focus,
div#footer div.contact form textarea:focus { border: 1px dashed #9ba1a5; }

div#footer div.flickr_badge_image {	margin-left: -10px; }
div#footer div.flickr p { clear: both; }
div#footer div.flickr_badge_image a { border: none; }
div#footer div.flickr_badge_image a img { border: 1px solid #464d52; width: 51px; height: 51px; padding: 3px; float: left; margin: 0 0 10px 10px;}

div#footer a#back-to-top { text-indent: -99999px; display: block; border: none; width: 47px; height: 44px; background: url(/images/site/footer_backup.jpg); position: absolute; right: 17px; top: -13px; }

div#collateral { background: #23282b; border-top: 1px dashed #424649; color: #626669; overflow: auto; clear: both; } 
div#collateral div.wrapper { padding: 10px 0; }

div#collateral div.col { width: 445px; margin: 0; padding: 0; }
div#collateral div.col.two { text-align: right; }

/* @end */


/* @group 10 FORMS
-------------------------------------------------------------------------------------------------------------------- */
span.required { color: #00aeef; }
span.info { font-size: 0.9em; color: #727d81;}
input[type="text"], textarea { padding: 3px 5px; font: 1em Helvetica, arial, sans-serif; color: #535e63; }
textarea { width: 415px; }
input.search_box { background: url(/images/site/search_box.png); width: 163px; height: 20px; border: 0; padding: 6px 30px 0 20px; }

/* @end */


/* @group 11 HOME
-------------------------------------------------------------------------------------------------------------------- */
div#content.home #portfolio-poster { margin-bottom: 21px; }
div#loader { height: 100%; background: #efefef url(/images/site/loading.gif) 50% 50% no-repeat; }

/* @end */


/* @group 12 MUSINGS
-------------------------------------------------------------------------------------------------------------------- */
div.musing { clear: both; margin: 0 0 10px 40px; position: relative; }
div.musing div.content { display: none; }
div.musing.hero { padding-bottom: 20px; margin: 0 0 40px 0; }
div.musing.hero div.content { display: inline; }

h3.month { color: #B44290; margin-top: 20px; clear: both; }
div.musing p.date { position: absolute; left: -40px; top: 0px; clear: none; margin: 0; padding: 0; color: #5a6266; }
div.musing.hero p.date { color: #b44290; position: static; margin: -20px 0 10px 0; clear: both; }

div.musing ul { margin-bottom: 1em; }
div.musing ul li { list-style: disc outside; margin: 0 0 0.5em 20px; }

div.comment { clear: both; border-bottom: 1px dotted #fff; padding: 20px 20px 10px 20px; word-wrap:break-word   }
div.comment.even { background-color: rgba(232,236,237,0.2); }
div.comment div.gravatar { display: block; float: left; width: 60px; margin-right: 20px; }
div.comment div.info { display: block; float: left; width: 305px;}
div.comment p.author { font-weight: bold; margin-bottom: 0; }
div.comment p.author a { background: none; color: #333a3d; }
form#comment_form { padding: 20px; background-color: #e8eced; margin: 40px 0; clear: both;}
div#content.musings form#comment_form textarea { width: 373px; }
div.comment p.date { display: static; margin-top: 0;}

div.musing div.meta { background-color: rgba(232,236,237,0.2); font-size: 0.9em; padding: 10px; border-top: 2px solid #fff; border-bottom: 1px dotted #fff; clear: both; }

ul.category_list { margin-bottom: 20px; clear: both; overflow: auto;}
div.musing div.meta ul.category_list { margin: 10px 0 0 0;}
ul.category_list li a,
ul.category_list li span { display: block;  float: left; padding: 2px 5px; margin: 0 5px 5px 0; background: #E8ECED no-repeat 2px 2px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #717b80; border: 1px solid #fff; }
ul.category_list li.icon a,
ul.category_list li.icon span { background-image: url(/images/site/icons_entry.png); padding-left: 25px; }
ul.category_list li a:hover,
ul.category_list li a.current { background-color: #333A3D; color: #E8ECED;}

ul.category_list li.time_since span { background-position: 2px -21px; }
ul.category_list li.short_url a { background-position: 2px 3px; }
ul.category_list li.comments a { background-position: 2px -49px;}

.ac_results {
	padding: 0px;
	border: 1px solid #bbb;
	background-color: #fff;
	overflow: hidden;
	z-index: 99999;
	width: 100%;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	line-height: 16px;
	overflow: hidden;
}

.ac_results li strong { color: #bc1c79;}

.ac_loading {
	background: white url('/images/site/indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #efefef;
}

.ac_over {
	background: #333A3D repeat-x scroll 0 top;
	color: #E8ECED;
}

/* @end */


/* @group 13 SEARCH
-------------------------------------------------------------------------------------------------------------------- */
table { width: 100%; margin-bottom: 20px; clear: both; }
table th,
table td { padding: 5px; }
table th { color: #e8eced; background-color: #333a3d; }
table tr.even td { background-color: rgba(232,236,237,0.2); }

/* @end */


/* @group 14 PORTFOLIO
-------------------------------------------------------------------------------------------------------------------- */
div#credits { text-align: right; }
div#credits ul { clear: both; float: right; margin-bottom: 40px; }
div#credits ul,
div#credits ul a { color: #5e676b; }

/* @end */