/* -------------------------------------------------------------- 

  Boondoggle - Yves Van Broekhoven
	
  1. Structure
  2. Statistics
  3. Navigation
  4. Content
  	4.1 Post
		4.2 Box
		4.3 Logo
		4.4 Comments
		4.5 Google search
		4.6 Extra gray zone on the homepage
		4.7 Button Jobs
		4.8 Del.icio.us
		4.9 tv.boondoggle.eu
		4.10 Our offices
		4.11 Page template
  5. Custom Boxes
	
  always include reset.css, it will reset your style
  for all browers, it includes the clearfix	
  
  typography specs must be specified in typography.css
  form specs must be specified in forms.css
  
  ID en class naming => use capitals for seperation: navHome
  
/*-------------------------------------------------------------- */


/*------------ imports -----------*/
@import url(typography.css);
@import url(forms.css);

/*------------ Testborders -----------*/
#wrapper 	{ border: 0px solid red; }
#container 	{ border: 0px solid green; }

#statistics { border: 0px solid blue; }
div.innerColumn { border: 0px solid purple; }

/*-------------------------------------------------------------------------------------  1. Structure --------------------------------*/

body       { background: #FFF url(../img/css_backgrounds/10YBDwall.jpg) fixed 0 0; overflow-x: hidden; }
#wrapper   { z-index: 2; position: relative; width: 960px; float: right; padding: 0; }

/* To switch the background color of the content part, change this image */
#container { z-index: 3; position: relative; background: url(../img/css_backgrounds/bg-red.gif); padding: 0; }

#background { z-index: 1; position: fixed; width: 100%; height: 850px; background-position: 0 0;}

#header     {  }
#navigation { margin: 30px 0 0 20px; padding: 0 20px 0 20px; }
#content    {  }
#statistics { margin: 0; padding: 0 0 10px 0; background: #000; }

#column01   { float: left; width: 655px; overflow: hidden; }
#column01 div.innerColumn { float: left; margin: 0 0 0 20px; width: 290px; display: inline; }
#column01 div.innerColumn.twitterbox { width: 600px;}
#column02   { float: right; padding: 0 20px 0 0; width: 280px; overflow: hidden; }

#footer     {  }

#toggle { width: 10px; height: 90px; background: url(../img/buttons/btn-toggle.gif); position: absolute; left: -10px; cursor: hand; cursor: pointer; }

.left 	{ float: left; }
.right  { float: right; }
.clear  { clear: both; }
.hide   { display: none; }
.first  { margin-top:0; padding-top:0; }
.last	{ margin-bottom:0; padding-bottom:0; }


/*-------------------------------------------------------------------------------------  2. Statistics --------------------------------*/

#statistics ul { list-style-type: none; margin: 0 0 0 25px; }
#statistics li { float: left; border-left: 1px solid #FFFFFF; padding: 5px 25px 3px 5px; }
#statistics li span { display: block; margin: 0.5em 0 0 0; }
#statistics #numberOfPosts 			{ background: url(../img/css_backgrounds/ttl-number-of-posts.gif); width: 40px; height: 48px; text-indent: -9999px; }
#statistics #numberOfComments 		{ background: url(../img/css_backgrounds/ttl-number-of-comments.gif); width: 51px; height: 48px; text-indent: -9999px; }
#statistics #mostActiveCommenter 	{ background: url(../img/css_backgrounds/ttl-most-active-commenter.gif); width: 58px; height: 48px; text-indent: -9999px; }
#statistics #mostActiveAuthor 		{ background: url(../img/css_backgrounds/ttl-most-active-author.gif); width: 33px; height: 48px; text-indent: -9999px; }
#statistics #numberOfFeedreaders 	{ background: url(../img/css_backgrounds/ttl-number-of-feedreaders.gif); width: 59px; height: 48px; text-indent: -9999px; }
#statistics #numberOfDaysRunning 	{ background: url(../img/css_backgrounds/ttl-number-of-days-running.gif); width: 39px; height: 48px; text-indent: -9999px; }
#statistics #lazyBlogBitch 			{ background: url(../img/css_backgrounds/ttl-lazy-blog-bitch.gif); width: 24px; height: 48px; text-indent: -9999px; }


/*-------------------------------------------------------------------------------------  3. Navigation --------------------------------*/

#navigation a.previous { float: left; background: url(../img/buttons/btn-previous.gif); display: block; width: 18px; height: 18px; text-indent: -9999px; }
#navigation a.next { float: right; background: url(../img/buttons/btn-next.gif); display: block; width: 18px; height: 18px; text-indent: -9999px; }


/*-------------------------------------------------------------------------------------  4. Content --------------------------------*/
/*--- 4.1 Post ---*/
div.post { margin: 30px 0 0 20px; padding: 0 20px 2em 20px; border-bottom: 1px solid #c9c9c9; }
#index div.post object, 
#index div.post embed 	{ float: left; padding: 5px 15px 1em 0; width: 270px; height: auto; }
#index div.post p img 	{ float: left; padding: 5px 15px 1em 0; max-width: 270px; height: auto; }
div.post div.details 	{ clear: both; padding: 2em 0 0 35px; background-position: left 2em; /*background: url(../img/general/authors/default-thumb.gif) no-repeat left top;*/}
div.post div.details span.author { display: block; }

body#index div.post { border: none; }

#index div.innerColumn div.post 		{ margin: 0 0 3em 0; padding: 0 0 0 15px; }
#index div.innerColumn div.post object, 
#index div.innerColumn div.post embed 	{ float: left; margin: 0; padding: 5px 7px 7px 0; display: block; width: 90px; height: 60px; }
#index div.innerColumn div.post img 	{ float: left; margin: 0; padding: 5px 7px 7px 0; display: block; width: 90px; height: auto; }
div.innerColumn div.post p 				{ display: inline; }
div.innerColumn div.post div.details 	{ margin: 1em 0 0 0; }

#index div.post embed.twitter { width: 300px; height: 400px; }

/*--- 4.2 Box ---*/
div.boxInner input.formBtn { margin: 0; width: 85px; }

#column01 div.box 	 { margin: 0 0 1em 20px; }
#column01 div.box ul { margin: 5px; }
#column01 div.box li { list-style-type: none; background: url(../img/icons/ico-plus.gif) no-repeat 8px 6px; margin: 0 0 0.5em 0; padding: 0 0 0 20px }

#column01 div#extra div.box object,
#column01 div#extra div.box embed 	{ background: none; width: 270px; height: 225px; }

#column02 div.box 		  { background: url(../img/css_backgrounds/bg-darker.png) left top; margin: 0 0 1.5em 0; }
#column02 div.boxInner 	  { padding: 10px 15px 10px 20px; }
#column02 div.boxInner ul { margin: 0; }
#column02 div.boxInner li { list-style-type: none; margin: 0 0 0.6em 0; }
#column02 div.boxInner input.txtField { width: 140px; margin: 0; }


/*--- 4.3 Logo ---*/
#logo { background: url(../img/css_backgrounds/logo.png) no-repeat left top; display: block; margin: 0 0 0 15px; width: 263px; height: 130px; text-indent: -9999px; }


/*--- 4.4 Comments ---*/
div.comments { margin: 30px 0 0 20px; padding: 0 0 2em 0; border-bottom: 1px solid #c9c9c9; }
#column01 div.comments div.box { border-left: 7px solid #ececec; margin: 0 0 3em 20px; padding: 0 0 0 15px; }
div.comments div.details { margin: 2em 0 0 0; padding: 0; }
div.comments div.details span.author-comments { display: block; }

div.commentsForm { margin: 30px 0 0 20px; padding: 2em 20px 2em 20px; }


/*--- 4.5 Google search ---*/
form#cse-search-box { margin: 0 0 2em 0; padding: 0 0 0 20px; }
form#cse-search-box input { margin: 0; }
form#cse-search-box input.txtField { width: 140px; }


/*--- 4.6 Extra gray zone on the homepage ---*/
div#extra { clear: both; background: #e5e5e5; margin: 0 0 0 5px; padding: 20px 0; }
div#extra div.innerColumn, div#extra div.innerColumn.twitterbox { margin: 0 5px 0 15px; }


/*--- 4.7 Button Jobs ---*/
a#btnJobs { background: url(../img/buttons/btn-jobs.gif) no-repeat; display: block; height: 114px; margin-top: 18px; outline: none; text-indent: -9999px; width: 268px; }


/*--- 4.8 Del.icio.us ---*/
#column01 div#delicious ul { margin: 0; padding: 0; }
#column01 div#delicious ul li { background: none; padding: 0; }


/*--- 4.9 tv.boondoggle.eu ---*/
#tv {}


/*--- 4.10 Our offices ---*/
#ourOffices { background: #d9d9d9; padding: 10px; }

/*--- 4.11 Page template --*/
#page ul {list-style:none; margin:3px 0}
#page #statistics ul {margin-left:25px}
#page ul.pageList li {background:url(../img/icons/ico-list-page.gif) no-repeat left 5px; padding:0 0 0 12px}

#page div.post {border:none;}
#page div.post img {float:none; padding:0; margin:0; width:auto; height:auto}
#page div.post img.authorImg {float:left; padding:0; margin:0 15px 15px 0;  border:6px solid #000}

#page div#footprints {padding:0 0 8px 0; clear:both;}
#page div#footprints li {padding:0 10px 0 0}

#page #column01 h3 {display:inline; padding:1px 10px 1px 35px;}
#page #column01 div.box {margin:25px 0 1em 0;}
#page #column01 div.box ul {clear:both; margin:8px 0 0 12px}

#page .entry-body hr { display: block; margin: 3em 0; border: none; border-bottom: 1px solid #CCC;}
#page .entry-body iframe { height: 1100px; overflow-y: auto; }


/*-------------------------------------------------------------------------------------  5. Custom Boxes --------------------------------*/

div#recentReaders h3 { background: none #000000; padding-left: 20px; }
div#recentReaders div.boxInner { background: #000000; padding: 0 0 0 20px; height: 80px; overflow: hidden; }
div#recentReaders div.boxInner table#MBL_COMM { background: none; border: none; }
div#recentReaders div.boxInner table#MBL_COMM td.mbl_img { background: none; }
div#recentReaders div.boxInner table#MBL_COMM td.mbl_fo_hidden,
div#recentReaders div.boxInner table#MBL_COMM tr#tr0 { display: none; }

div#boondoggleBloggers input.formBtn { padding: 2px; width: 25px; }

#column02 div#hitBoondoggle { background: none; margin:-10px 0 0 0 }
div#hitBoondoggle a { background: url(../img/css_backgrounds/hit-boondoggle.png); width: 200px; height: 58px; display: block; float: left;  }
div#hitBoondoggle span { display: block; float: left; height: 58px; font-weight: bold; line-height: 58px; }

div#footprints li { float: left; padding: 0 5px; }
div#footprints a { width: 16px; height: 16px; display: block; text-indent: -9999px; }

.google { background: url(../img/icons/ico-google.gif) no-repeat left top; }
.technorati { background: url(../img/icons/ico-technorati.gif) no-repeat left top; }
.slideshare { background: url(../img/icons/ico-slideshare.gif) no-repeat left top; }
.facebook { background: url(../img/icons/ico-facebook.gif) no-repeat left top; }
.lastfm { background: url(../img/icons/ico-lastfm.gif) no-repeat left top; }
.flickr { background: url(../img/icons/ico-flickr.gif) no-repeat left top; }
.twitter { background: url(../img/icons/ico-twitter.gif) no-repeat left top; }
.delicious { background: url(../img/icons/ico-delicious.gif) no-repeat left top; }
.youtube { background: url(../img/icons/ico-youtube.gif) no-repeat left top; }
.linkedin { background: url(../img/icons/ico-linkedin.gif) no-repeat left top; }
.tumblr { background: url(../img/icons/ico-tumblr.gif) no-repeat left top; }

#subscribe a { margin: 10px 5px 0 0; }
#subscribe a.btnRss { margin: 0; width: 100%; text-indent: 25px; line-height: 16px; }
#subscribe p { padding: 0.5em 0; }

.btnTechnorati { float: left; background: url(../img/buttons/btn-technorati.gif) no-repeat left 3px; width: 78px; height: 15px; display: block; text-indent: -9999px; }
.btnXml { float: left; background: url(../img/buttons/btn-xml.gif) no-repeat left 3px; width: 49px; height: 17px; display: block; text-indent: -9999px; }
.btnRss { float: left; background: url(../img/buttons/btn-rss.gif) no-repeat left top; width: 18px; height: 18px; display: block; text-indent: -9999px; }

#youAreSelfABlogYou { background: url(../img/css_backgrounds/bg-you-are-self-a-blog-you.jpg) no-repeat 0 0; padding: 80px 6px 10px 4px; }
#youAreSelfABlogYou h4 { background: #000000; padding: 4px 6px; }
#youAreSelfABlogYou h4 a { color: #FFFFFF; display: block; text-decoration: none; }


#column02 div.twitter 	 { background: none; }

div.twitter h3 { background: #000000 url(../img/titles/ttl-twitter.gif) no-repeat 20px center !important; padding: 5px 0 10px 0; text-indent: -9999px; }

.twtr-widget {margin:0 0 10px 20px;}
.twtr-widget h4 {color:#fff}

#twitter			{ list-style: none; }
#twitter li			{ background:none !important; padding:0 0 0 0px !important; }
#twitter h4			{ margin-top: 0.75em; }
#twitter span.top 	{ background: url(../img/css_backgrounds/bg-twitter-top.png) no-repeat 0 0; display: block; width: 600px; height: 14px; }
#twitter p			{ background: url(../img/css_backgrounds/bg-twitter-mid.png) repeat-y 0 0; margin: 0; padding: 0 12px; width:555px; font-size: 0.92em; }
#twitter span.btm	{ background: url(../img/css_backgrounds/bg-twitter-btm.png) no-repeat 0 0; margin-bottom: 1.5em; display: block; width: 600px; height: 6px; }

#crossLinking   {background:none repeat scroll 0 0 #E5E5E5; color:#333333; font-size:11px; margin:0 0 0 5px; padding:0 0 8px 5px; text-align:center;}
#crossLinking a {color:#333;}

#jobs {padding:15px 0 0 0}