/*
Theme Name: bogardusLAB 
Theme URI: http://bogarduslab.com 
Description: Theme for bogardusLAB Online Portfolio. 
Author: Lisandro Vico 
Author URI: http://bogarduslab.com 
Version: 1.0  
*/

/*  ===========================================  */
/*
/*	Font families:
/*	- Sans-serif: Arial, Helvetica, sans-serif
/*	- Serif: Georgia,"Times New Roman",Times,serif
/*
/*	Font size:
/*	- 28px -> 2.333em
/*	- 24px -> 2em
/*	- 20px -> 1.666em
/*	- 16px -> 1.333em
/*	- 14px -> 1.166em
/*	- 12px -> Deafult -> body { font-size: 75% }
/*	
/*	Colors:
/*	- #55a7c3 - Dark Blue
/*	- #b2dfee - Light Blue
/*  - #efefef - light Gray
/*
/*  ===========================================  */

/*  ==========  RESET  ==========  */
/*  Eric Meyers Reset v1.0 | 20080212
/*  http://meyerweb.com/eric/tools/css/reset/index.html  */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; 
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }

body {
	font: 75%/1.5em Arial, Helvetica, sans-serif; /* font-size: 12px; line-height: 18px; */
	background: #efefef url('images/bgBody.gif') repeat;
	color: #333;
}

/*  ==========  TYPOGRAPHY  ==========  */
	
	/****  Headings  ****/
	h1, h2, h3, h4, h5, h6 {
		font-weight:bold;
		color: #333;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		letter-spacing: -.01em;
		line-height: 1.1em;
		margin: 0 0 .5em;
		}
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #333; border: none; }
	
	h2 { font-size: 2.333em; line-height: 1em; margin: 0 0 0.7em; }
	p.sectionTitle {
		clear: both;
		color: #55a7c3;
		font-weight: bold;
		font-size:1.1em;
		text-align: right;
		border-top: 2px solid #55a7c3;
		text-transform: uppercase;
		margin-bottom: 20px;
	}
	
	h3 { color: #333; font-size:1.666667em; letter-spacing: -.01em; margin: 0 0 1em; }
	h3.itemTitle { text-transform: uppercase; }
	h3.tagLine { font-size: 1.4em; margin-top: -.8em; font-family: Georgia, Times, "Times New Roman", serif; font-style: italic; color: #55a7c3; }
	
	h4 { font-size: 1.3333em; font-family: Georgia, Times, "Times New Roman", serif; color: #55a7c3;}
	h5 { font-size: 1.1em; }
	h6 { font-size: 1em; }
	
	/****  Links  *****/
	a { color: #000; font-weight: bold; text-decoration: none; border-bottom: 2px solid #000; }
	a:hover { color: #55a7c3; border-bottom: 2px solid #55a7c3; cursor: pointer; }
	a:focus { background-color: #b2dfee; }
	
	a.button {
		background-color: #b2dfee;
		border: 1px solid #55a7c3;
		color: #333;
		font-weight: bold;
		padding: 4px 6px;
		margin: 20px 0 0;
		color: #333;
		}
		a.button:hover { color: #55a7c3; }

	/****  Text  ****/
	p { font-size: 1.1em; margin:0 0 1em; text-align:left; }
		p.link { margin-bottom: 0; }
		
	blockquote { clear: both; color:#777; font-style:italic; margin: 0; background: url(images/quoteOpen.gif) top left no-repeat; }
		blockquote p { padding: 5px 30px; margin: 0; background: url(images/quoteClose.gif) bottom right no-repeat; }
		blockquote p.quoteInfo { background: none; display: block; text-align: right; font-weight: bold; font-size: 1.1em; margin-top: 5px; }
	
	small { display: block; font-size:12px; line-height: 14px; margin-bottom: 5px; }
	strong { font-weight:bold; }
	em, dfn { font-style:italic; }
	dfn { font-weight:bold; }
	sup { font-size: 0.5em; vertical-align:super;}
	abbr, acronym { border-bottom:1px dotted #666; }
	address { margin:0 0 1.5em;font-style:italic;}
	del { text-decoration: line-through; color: #666; }
	ins { text-decoration: none; color: green; }
	pre { margin:1.5em 0; white-space:pre;}
	pre, code, tt { font:1em 'andale mono', 'lucida console', monospace; line-height:1.5;}
	li ul, li ol { margin:0 1.5em; }
	ul, ol { margin:0 1em 1em 1em;}
	ul { list-style-type:disc;}
	ol { list-style-type:decimal;}
	dl { margin:0 0 1.5em 0;}
	dl dt { font-weight:bold;}
	dd { margin-left:1.5em;}
	table { margin-bottom:1.4em;width:100%;}
	th { font-weight:bold;}
	thead th { background:#c3d9ff;}
	th, td, caption { padding:4px 10px 4px 5px;}
	tr.even td { background:#e5ecf9;}
	tfoot { font-style:italic;}
	caption { background:#eee;}
	hr { 
		clear:both;
		display: block;
		height: 1px;
		width:100%;
		border: none; 
		margin: 0 0 30px 0;
	}
	
	hr.divider { 
		background: url(images/hDivider.gif) left top repeat-x;
		border: none;
		clear:both;
		display: block;
		width:100%;
		height: 2px;
		margin: 10px 0 20px;
	}
	
	/****  Images  ****/
	p img { max-width: 100%; margin: 0; padding: 0; }
	
	img.alignleft { margin: 0 1em 0 0; display: inline; }
	img.alignright { margin: 0 0 0 1em; display: inline; }
	img.centered { display: block; margin-left: auto; margin-right: auto; }
	
	.alignleft { float: left }
	.alignright { float: right; }
	.aligncenter,	div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	
/*  ==========  GENERAL STYLES  ==========  */
	
	.clear:after { content: ""; display: block; clear: both;}
	div.clear { zoom:1; }
	
	/****  Lists  ****/
	ul.items { list-style-type: none; margin: 0 0 10px; }
	ul.items li { 
		padding: 0 0 6px 20px;
		background: url(images/tick.gif) left 2px no-repeat;
		}
	
	#bars { list-style-type: none; margin: 0 0 25px; padding: 0 0 0 3px; }
	
	#bars li a.tag {
  	padding: 3px 15px;
  	margin-bottom: 7px;
  	color: #fff;
  	text-transform: uppercase;
  	font-weight: normal;
  	font-size: 1.2em;
  	border: none;
  	display:block;
  	width:100%;
		}
  	#bars li a.tag:hover { background: #000; }  
  
	.tag_1 { background: #2847bc; }  
	.tag_2 { background: #386cc0; }  
	.tag_3 { background: #529ddc; }  
	.tag_4 { background: #7cbdf4; }  
	.tag_5 { background: #62cdec; }
	.tag_6 { background: #90e0f7; }
	
	/****  Breadcrumbs  ****/
	#crumbs {
	height:2.3em;
	border:1px solid #ccc;
	background: #efefef;
	list-style-type: none;
	padding: 0;
	margin: 0 0 20px;
	}
	#crumbs li {
		float:left;
		line-height:2.3em;
		color:#333;
		padding-left:.75em;
		}		
	#crumbs li a {
		background:url(images/crumbs.gif) no-repeat right center;
		display:block;
		border: none;
		padding:0 15px 0 0;
		}							
	#crumbs li a:link,
	#crumbs li a:visited {
		color:#777;
		text-decoration:none;
		border: none;
		}	
	#crumbs li a:hover,
	#crumbs li a:focus {
		color:#55a7c3;
		}		

	/****  Grid Styles  ****/
	.width-215, .width-460, .width-705 { display: block; float:left; margin-bottom: 30px; margin-right: 30px;}
	.width-215 { width: 215px; }
	.width-340 { width: 340px; display: block; float:left; margin: 0 25px 0 0; }
	.width-460 { width: 460px; }
	.width-705 { width: 705px; }
	.width-950 { width: 950px; margin: 0 auto; overflow: hidden; }
	
	.last { margin-right: 0; }
	
	/****  Self Clearing Trick  ****/
	.width-215:after, .width-460:after,
	.width-705:after, .width-950:after { content:"."; display:block; height:0; clear:both; visibility:hidden; margin: 0; }

/*  ==========  LAYOUT  ==========  */

/****  HEADER  ****/
div#header { background: #efefef url(images/bgHeader.png) bottom left repeat-x; padding: 15px 0; margin-bottom: 20px; }
	div#header h1 { float: left; }
		div#header h1 a {
			background: transparent url('images/logo.png') no-repeat;
			border: none;
			display: block;
			height: 64px;
			overflow: hidden;
			text-indent: -999em;
			width: 264px;
		}
	
	/****  Intro  ****/
	div#intro { 
		background: url(images/bgIntro.png) top right no-repeat;
		position: relative; margin-bottom: 30px; min-height: 292px;
		}
		div#intro div#introText { margin-top: 25px; width: 400px; }
			div#intro div#introText h2 { font-family: Helvetica, Arial, sans-serif; font-size: 2.8em; }
			div#intro div#introText h3.tagLine { margin-top: -1.2em; margin-bottom: 30px; }
			div#intro div#introText p { font-size: 1.25em; line-height: 1.4em; margin-bottom: 1.2em; font-weight: bold; }
		
		/****  Portfolio Item  ****/
		div.portfolioItem {}	
			div.portfolioItem a {
				display: block;
				background-color: #b2dfee;
				border: 1px solid #55a7c3;
				padding: 5px;
				}
				div.portfolioItem a img {
					display: block;
					border: 1px solid #55a7c3;
				}
				div.portfolioItem a:hover img { background-color: #b2dfee; opacity: .5; filter:alpha(opacity=50); }
				
				/* width: 460px = 446px img + left & right space (2px border img + 2px border a + 10px padding a) */
				div.portfolioItem a img {
					width: 446px;
					height: 250px;
				}
					
		/****  Single Portfolio Page  ****/
		
			/****  Portfolio Detail  ****/
			/* width: 705px = 699px img + left & right space ( 2px border img + 4px padding img) */
				div#portfolioDetail img { display: block; border: 1px solid #ccc; padding: 2px; margin-bottom: 20px; }
		
/****  CONTACT FORM  ****/	
div#content div#ct-info div#contact {
	background-color: #ccc;
	margin: 0;
	padding: 52px 66px;
	}
	div#content div#ct-info div#contact p.linklove { display: none; }
	
	div#content div#ct-info div#contact div#usermessageb { color: #333; font-weight: bold; }	
	div#content div#ct-info div#contact div#usermessageb.failure { border: 2px solid #ccc; clear: both;	padding: 4px; }
	
	div#content div#ct-info div#contact form { font-size: 1em; }
		div#content div#ct-info div#contact form fieldset.cf_hidden { display: none; }
		div#content div#ct-info div#contact form legend {
			display: block;
			color: #333;
			font-size:1.666667em;
			font-weight: bold;
			letter-spacing: -.01em;
			line-height: .9em;
			padding-bottom: .9em; 
			}
			div#content div#ct-info div#contact form fieldset label { color: #333; font-weight: bold; }
			div#content div#ct-info div#contact form fieldset ol { margin: 0; padding: 0; }
				div#content div#ct-info div#contact form fieldset ol li.textonly { margin-bottom: 18px; text-align: justify; }
				div#content div#ct-info div#contact form fieldset ol li { list-style: none; margin: 0; }
					div#content div#ct-info div#contact form fieldset ol li input {
						border: 0;
						font-size: 1em;
						margin-bottom: 14px;
						padding: 4px;
						width: 480px;
					}
					div#content div#ct-info div#contact form fieldset ol li textarea { 
						border: 0;
						font-size: 1em;
						padding: 4px;
						width: 480px;
						margin-bottom: 18px;
					}
			div#content div#ct-info div#contact form fieldset span.reqtxt,
			div#content div#ct-info div#contact form fieldset span.emailreqtxt { 
				color: #666;
				font-weight: normal;
				padding-left: 4px;
				}
		div#content div#ct-info div#contact form p input {
			background-color: #000;
			border: 0;
			color: #fff;
			cursor: pointer;
			height: 36px;
			width: 66px;
		}

/****  404  ****/
div#content div#error h2 { background: none; padding-left: 0; }
div#content div#error h3 { font-weight: normal; }
	
/****  SIDEBAR  ****/
div#content div#sidebar { 
	display: inline;
	float: right;
	margin-top: 4.2em;
	text-align: left;
	width: 264px;
	}
	div#content div#sidebar h2,
	div#content div#sidebar h3 { font-size:1.666667em; letter-spacing: -.01em; line-height: .9em; }
	div#content div#sidebar h2{margin: 0 0 .9em; padding: 0;}
	div#content div#sidebar h3 {margin-top: 1.6em;}
	
	div#content div#sidebar dl dt { float: left; display: inline; }
	div#content div#sidebar dl dd {
		margin-bottom:8px; /* we have change margin-bottom:18px; by 8px */
		padding-bottom:0.75em;
		border-bottom: 1px solid #333;
		}
		div#content div#sidebar ul { margin-top: -8px; /* After dl */ }
		div#content div#sidebar ul li { display: inline; }
			div#content div#sidebar ul li a { border-bottom: 1px solid #333; display: block; padding: 9px 0 8px; }
			
	div#content div#sidebar div.vcard img { margin-bottom: 1.6em; }
	div#content div#sidebar div.vcard a.card {
		background: transparent url('../images/vcard.png') no-repeat 0 100%;
		padding-left: 24px;
	}
	div#content div#sidebar div.vcard span { margin: 0; padding: 0; }

/****  FOOTER  ****/
div#stickyInfo { 
	background: url(images/bgFooter.gif) 0 0 repeat-x;
	width: 100%;
	padding: 30px 0 0;
	}
	div#footer { background: #efefef url(images/hDivider.gif) left top repeat-x; }
		div#foot { padding: 20px 0 20px; position: relative; }
		div#foot p { text-align: right; padding-right: 40px; line-height: 1.2em; color: #55a7c3; font-family: Georgia, Times, "Times New Roman", serif; margin: 0; }
			div#foot p#footerInfo {
				border-bottom: 2px solid #55a7c3;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 0.8em;
				line-height: 1.1em;
				font-weight: bold;
				text-transform: uppercase;
				color: #55a7c3;
				margin: 0; padding: 0;
				position: absolute;
				bottom: 0; left: 0;
				}