/*   
Theme Name: LBi
Theme URI: http://www.lbi.com
Description: LBi Theme
Author: LBi
Author URI: http://www.lbi.com
Template: lbi
Version: 1.0
.
General comments/License Statement if any.
.
*/
 
/* Eric Meyer reset */
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, 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-weight: inherit; font-style: inherit; 
font-size: 100%; font-family: inherit; 
vertical-align: baseline;
}
:focus {outline: 0}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left;font-weight: normal}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
strong {  font-weight: bold; }
em { font-style: normal; }

body { background: #fff; font-size: 62.5%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; color: #333; line-height: 1.5; }
.meta { position: absolute; left: -9999px; height: 0;  }

/* Typography
-------------------------------------------------------*/

@font-face {
	font-family: "Lbi";
	src: url('assets/fonts/LBIFedra-Regular.otf') format("opentype");
}

@font-face {
	font-family: "LBi";
	font-weight: bold;
	src: url('assets/fonts/LBIFedra-Bold.otf') format("opentype");
}

#headline h2, 
#headline h1,
#tagline,
#overview .panel h3,
#address p { /*font-family: "LBi", Arial, "Helvetica Neue", Helvetica, sans-serif;*/ }

h1, h2, h3, h4, h5, h6, p { font-size: 1.1em; font-weight: normal; margin-bottom: 1em;}
ul li { font-size: 1.1em; }
ul li li { font-size: 1em;  }

#logo { background: transparent url(assets/img/h1-lbi.png) no-repeat top left; width: 317px; height: 172px;  position: absolute; top: 9px; left: 21px; z-index: 1; }
	h1 a { width: 317px; height: 172px; text-indent: -9999px; display: block;}
	
	#tagline { position: absolute; display: block; left: 371px; top: 30px; text-indent: 0 !important; font-size: 1.4em; color: #858585;  }
	#tagline span { color: #f1001c; }

h2 { font-weight: bold; }
	#content-secondary h2 {  margin-bottom: .5em;  }
	#content-secondary h3 { font-size: 1em;  }
	
.page h3, .job h3 { font-weight: bold; font-size: 1.8em;}

h4 { font-size: 1.1em;}
h5 { }
h6 { }
p {  }
#footer p { margin-left: 24px; margin-bottom: 5px; }

/* Sprites & Images
-------------------------------------------------------*/
.sprite { background-image: url(assets/img/sprite.png); background-repeat: no-repeat; text-indent: -9999px; display: block; }

.entry .comment-count { float: left; background-color: #000; background-position: 0 18px; color: #fff; display: block; width: 20px; padding-bottom: 7px;text-indent: 0px; text-align: center;  }
.entry .add-this { background-position: 0px -25px ; width: 78px; height: 17px; float: left; margin-left: 5px; }
.post-controls-alt .add-this { margin-left: 0px; }
.entry a.add-this:hover { background-position: 0px -45px   }

#footer a.add-this { background-position: 0px -438px; width: 78px; height: 17px; float: left; margin-left: 15px; }
#footer a.add-this:hover { background-position: 0px -458px;  }
#footer .rss { margin-top: 2px; width: 30px; height: 14px; background-position: 0 -410px; float: left; }
#footer a.rss:hover { background-position: -31px -410px;   }
	
/* Links 
-------------------------------------------------------*/
a { color: #f1001c; text-decoration: none; }
a:hover { text-decoration: underline; color: #000; }
a img { padding: 0; border: 0; margin: 0; }
p.tags a { font-weight: normal; } 
#footer a { color: #fff; text-decoration: underline;  }

.entry h3 a:hover, .job .url a:hover { background: #f1001c; color: #fff; text-decoration: none; }
.job .url a { font-weight: bold; font-size: 1.8em;  } 

.comment-count a:hover { color: #fff; text-decoration: none;}

/* Lists  
-------------------------------------------------------*/
#nav-primary { display: block; float: right; margin-top: 131px; position: relative; z-index: 400; background: #f1001c; padding-right: 24px; }
#nav-primary li { display: inline; }
#nav-primary a { display: block; width: 119px; text-indent: 12px; line-height: 25px; background: #f1001c; color: #fff; float: left;  }
#nav-primary a:hover, 
#nav-primary li.active a { background: #000 !important; color: #fff !important; }


#breadcrumb { background: #fff; line-height: 25px; float: left; margin-bottom: 0; }
#breadcrumb li { float:left; display: block; width: auto; background: #fff; padding-right: 5px; }
#breadcrumb li:first-child { margin-left: 24px; }
#breadcrumb li:last-child { padding-right: 15px; }
#breadcrumb li:before {  }
#breadcrumb li:first-child:before {  }
#breadcrumb a {  }

.inner ul { margin-bottom: 2em;   }


/* Core Layout
-------------------------------------------------------*/
#wrapper { width: 980px; margin: 0 auto; text-align: left; background: url(assets/img/bg-title.png) repeat top left; }	
#header, #footer { width: 100%; float: left;  }

#header { background: transparent url(assets/img/bg-head.png) no-repeat top left; position: relative; z-index: 150000; }

#content { clear: both; width: 980px; float: left; position: relative; z-index: 1;  }

/* Content Primary */
#content-primary { width: 700px; float: left; }
	#blog #content-primary {  background:  #666; }
	#join #content-primary { width: 600px;  }
	#orientation { position: absolute; top: 55px; left: 0px; z-index: 10; }
	#contact #orientation { top: 315px; }
	#breadcrumb { padding-left: 24px; }

/* Secondary Content */
#content-secondary { position: absolute; top: 55px; right: 0px; width: 248px; padding: 40px 0; background: #fff;  z-index: 8;}
	#case-study #content-secondary, 
	#join #content-secondary, 
	#contact #content-secondary { top: 560px; }
	#join #content-secondary { width: 380px; }
	#case-study.work-overview #content-secondary { top: 220px;  }

#content-secondary ul, 
#content-secondary ol, 
#content-secondary h2, 
#content-secondary h3     ,
#content-secondary p { margin-left: 32px; margin-right: 12px;  }
#content-secondary ul { margin-bottom: 40px; }

/* Footer */
#footer {  background: url(assets/img/bg-footer.gif) no-repeat top left; padding-top: 53px; clear: both; color: #fff; position: relative;}
	#footer div { background: #f1001c; padding-bottom: 250px; padding-top: 55px; }
	#page-controls { float: right; display: block; width: 127px; margin-right: 24px;  }
	
#home #footer { position: relative; top: -58px; margin-bottom: -58px; z-index: 4;}
#home #footer div { padding-top: 185px; padding-bottom: 20px; }
	
	/* Pages 
	---------------------------------*/
	
		#img-feature { position: relative; top: 0; left: 0; z-index: 3; width: 980px; height: 527px; overflow: hidden;  }
			
		/* Main Headline */
		#headline { width: 400px; line-height: 1.1; margin-bottom: 60px; background: url(assets/img/bg-headline.gif) repeat-y top left; padding-left: 24px; clear: both;}
		#headline h2, headline h1 { display: inline; clear: both; background: #fff; color: #000; font-size: 5.3em;  font-weight: normal }
		
		/* Blog Layout */
		
			#featured-post { position: relative; top: -195px; margin-bottom: -195px !important;  z-index: 4; background: red; }
			#standard-posts {background:  blue;  }
			
			/* Entry Layout */
			.entry { clear: both;  }
			#featured-post .entry {/* background: #ccc; */ }
			#standard-posts .img { background: #ccc; }
			
			#blog .entry {/* margin-bottom: 40px; */ }
			#blog .alt { position: relative; top: 0; right: -145px; padding-bottom: 40px; }
			#contact #featured-post .entry { top: -100px; }
			
			/* Entry Content */
			.entry .content { background: #fff; padding: 40px 0; width: 600px; margin-left: 36px; }
			#standard-posts .img .content { position: relative; top: -135px !important; margin-bottom: -135px !important;}
			#standard-posts .alt .content { top: 0 !important; margin-bottom: 0 !important; }
			
			/* Content Inner */
			.entry .content .inner { margin-left: 32px; margin-right: 24px;  }
			#blog .entry .content .inner { padding-bottom: 0; }
			#standard-posts .entry .content .inner { margin-bottom: 40px !important; }
			#single .entry .content .inner, #case-study .entry .content .inner { padding-bottom: 100px; }
			
			.entry .author { color: #f1001c; font-weight: bold; }	
			#blog .entry h3 { font-size: 3.8em; color: #f1001c; line-height: 1; width: 85%; }
			.post-controls, .post-controls-alt { float: left; width: 100%; }
		
		#pagination { width: 722px; padding: 20px 0; background: #fff; overflow: auto; text-align: center; margin-left: 130px;}
		#work-pagination, #work-pagination-btm {  width: 224px; background: #fff; overflow: auto; padding: 5px 0; position: absolute; }
		#work-pagination { top: -40px; right: 2px }
		#work-pagination-btm { bottom: -28px; right: 2px }
		.older { float: left; margin-left: 15px; width: 15%;}
		.newer { float: right; }
		.older a, .newer a { display: block; line-height: 17px; font-size: 1.1em; }
		.older a { background: url(assets/img/previous.gif) no-repeat center left; padding-left: 20px; text-align: left;  } 
		.newer a { background: url(assets/img/next.gif) no-repeat center right; text-align: right; padding-right: 20px; }
		#pagination .older { margin-left: 15px; width: 15%;}
		#pagination .newer { margin-right: 15px; width: 15%; }
		#work-pagination .older, #work-pagination-btm .older { margin-left: 5px; width: 45%;}
		#work-pagination .newer, #work-pagination-btm .newer { margin-right: 5px; width: 45%; }
		
		
		/* Video Post */
		.entry .video { width: 600px; padding-top: 10px; }
		.entry .video .inner { margin-right: 130px; padding-top: 20px;}
		#preview { width: 580px; height: 350px; margin-left: 10px; }
		 
		/* Work Overview */
		#case-study #content-primary { width: 720px; }
		#work-overview { width: 710px; display: block; float: left; position: relative; top: -306px; margin-bottom: -306px; left: 12px; z-index: 20000; }
		#work-overview li { float: left; background: #fff; width: 224px; margin: 0 0 12px 12px; padding: 0 0 30px 0; }
		#work-overview li img { margin-bottom: 10px; }
		#work-overview li p { margin: 0 6px; /*vmodha: this is the old value: margin: 0 11px; */ }
		
		/* Jobs */  
		#join .entry .content { width: 460px; }
		#join .entry .inner {  padding-bottom: 40px; }
		#join .entry h3 { font-size: 1.8em; }
		#jobs-listing { width: 500px; float: left; position: relative; top: -100px; left: 100px; z-index: 40000; padding-bottom: 200px;}
		#jobs-listing h3 { text-indent: 10px; font-size: 1.8em;}
		#jobs-listing li.panel { width: 224px; height: 113px; background: #fff; display: block; float: left; margin-right: 15px; margin-bottom: 15px;  }
		#jobs-listing li.panel:hover { background-color: #f1001c;  }
		#jobs-listing li.panel:hover * { color: #fff; }
		#jobs-listing li.panel:hover h4 { font-weight: bold; }
		#jobs-listing ul ul, #jobs-listing ul h4 { margin: 10px;  }
		#jobs-listing li li { width: auto; }
		
			/* Staff */
			#staff li { margin-bottom: 20px;  }
			#staff img { float: left; margin-right: 10px;  }
			#staff h2 { font-size: 1.4em; margin-bottom: 25px; overflow: auto;}
			#staff h3 { font-weight: bold; margin: 0; padding: 0; }
			#staff h3, #staff p { font-size: 1em; }
			#staff p { padding-bottom: 0; margin-bottom: 5px; line-height: 1.3; overflow: auto;}
			
		 
		/* Homepage */
		#overview { position: absolute; top: 390px; z-index: 40000; width: 944px; left: 24px; float: left; }
		#overview .panel { width: 225px; float: left; margin-right: 12px; background: #fff; display: inline; text-align: centre;  padding-bottom: 10px; }
		#overview img { margin: 10px 0 10px 10px; } 
		#overview .panel h3 {  }
		#overview .panel h3, #overview .panel h4, #overview .panel p { width: 201px; margin: 0 auto 5px auto; text-align: left; }
		#overview .panel h4 { font-size: 1.2em;  }  
		#overview #case-study, #overview #showreel { position: relative; top: -25px;  } 
		#overview .panel .post-meta { color: #666; font-size: .9em; }
		#overview #showreel { margin-right: 0;  }
		
		/* About */
		#about #intro { margin-bottom: 40px;  }
		#about #intro h2 { font-size: 3.8em; font-weight: normal; margin-bottom: 0; line-height: 1.1; margin-bottom: 15px;  }
		#about #content-secondary h3 { font-size: 1em; font-weight: normal; margin-bottom: 0; margin-left: 0; padding-bottom: 0;}
		#about #content-secondary li { margin-bottom: 10px;  }
		#about #content-secondary li p { padding: 0; margin: 0; font-size: 1em; }
		#about #content-secondary .post-meta { color: #666; font-size: .9em; }
		#about .entry .video .inner { margin-right: 20px; padding-top: 10px;}
		
		#services { width: 700px ; height: 350px; margin: 12px 0 0 24px; position: relative; }
		#services .panel { display: block; width: 225px; height: 100px; background: #fff; position: absolute; }
		#services h3 a { display: block; width: 215px; height: 90px; padding: 10px 0 0 10px; }
		#grid-1 { top: 0px; left: 0px;  }
		#grid-2 { top: 0px; left: 237px;  }
		#grid-3 { top: 0px; left: 474px;  }
		#grid-4 { top: 112px; left: 0px;  }
		#grid-5 { top: 112px; left: 237px;  }
		#grid-6 { top: 112px; left: 474px;  }
		#grid-7 { top: 224px; left: 0px;  }
		#grid-8 { top: 224px; left: 237px;  }
		#grid-9 { top: 224px; left: 474px;  }
		
		#services li { font-size: 1.1em; }
		#services li .sub-content { display: none; }
		#services li.active .sub-content { display: block; }
		#services li h3 {  font-weight: normal; font-size: 1.8em; }
		#services h4 { font-weight: bold; }
							
			#services li.active { background: #eee; position: relative; width: 400px; height: auto; z-index: 400; float: left; cursor: default;}
				#services li.active h3 { margin: 10px 0 0 0; float: left; width: 400px; background: #fff; position: relative; z-index: 10; text-indent: 10px;}
				#services li.active h3 a { display: block; width: 400px; padding: 0; height: auto; color: #000; background: #fff url(assets/img/about/close.gif) no-repeat 385px 5px; margin-left: 0  }
				#services li.active h3 a:hover { background: #fff url(assets/img/about/close.gif) no-repeat 385px 5px;; color: #f0001b;  }
				#services li.active .sub-content .inner { float: left; width: 210px; margin: 10px 0 10px 10px;  }
				.sub-content img { float: right; }
	
		/* Contact Us */
		#address { width: 356px; margin-left: 24px; background: #fff; padding: 40px 0; }
		#address p { font-size: 3.6em; margin: 0 30px 0 30px; line-height: 1.2; color: #b2b2b2;  }
		#contact .entry .content { position: relative; top: -40px; left: 95px; width: 484px; }
		#contact .entry .content h3, #contact .entry .content h4 { font-size: 1.1em; font-weight: bold; }
	
		/* Comments */
		#comments { width: 460px; position: relative; left: 140px; top: -100px; margin-bottom: -100px; z-index: 100000;} 
		#comments li { padding-top: 19px; margin-bottom: 5px; background: url(assets/img/bg-comment.png) no-repeat top left; zoom: 1;  }
		#comments div{ background: #d1ccc4; padding-bottom: 24px; }
		#comments p { margin-left: 24px; margin-right: 12px; color: #333; }
		#comments p.author { font-weight: bold; margin-bottom: 5px;}
		#comments p.author span { color: #f1001c; }
		
		/* Twitter */
		#twitter { position: absolute; bottom: -300px; left: -20px; width: 276px; height: 252px; display: block; background: url(assets/img/twitter.png) no-repeat top left;}
		#twitter .content { width: 210px; height: 170px; position: relative; top: 50px; left: 30px; }
		#twitter h2, #twitter p { padding: 3px;  }
		#twitter h2 { color: #000; font-size: 1em; background: #fff; text-transform: uppercase; width: auto; }
		#twitter p { background: #fff; clear: both; }
	
	
/* Forms
-------------------------------------------------------*/
	
	textarea, input.text, select { font-size: 1em;  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  }

	/* Search */
	#search { position: absolute; top: 28px; right: 24px; width: 218px; }
	#search input { display: block; background: #000; height: 25px; line-height: 25px; border: none; color: #fff; font-weight: bold; font-size: 1.1em;}
	#search-box { float: left; width: 160px; text-indent: 5px; }
	#search input[type="submit"] { height: 27px; line-height: 27px; }
	
	legend { padding: 0; margin: 0;}
	legend span { display: block; width: auto; font-size: 1.8em; font-weight: bold; position: relative; left: 24px; margin-bottom: 12px; }
	
	.fieldwrap { padding: 0; float: left; clear: both; margin-bottom: 5px; width: 460px; position: relative; }
	.fieldwrap label { width:83px; float: left; margin-right: 10px; text-align: right; }
	.fieldwrap .text { float: left; width: 170px; }
	.required { position: absolute; left: 280px; }
	.fieldwrap .textarea { width: 362px; margin-left: 93px }
	.submit { background: #000; border: 0px; width: auto; color: #fff; clear: both !important; float: right; padding: 3px 5px; display: inline; font-size: 1.1em;}
	
	#comments-form, #contact-form, #success { width: 555px; background: #a9a095; position: relative; padding: 24px 0; margin-bottom: 24px; }
	
	/* Comments Form */
	#comments-form { left: 140px; }
	#comments-form p.message { margin-left: 24px; }
	
	/* Contact  Form */
	#contact-form { margin-left: 24px; margin-bottom: 100px;  }
	
	#success { margin: 0 0 80px 24px;  }
	#success h2 { font-size: 1.8em;  }
	#success h2, #success p { margin-left: 24px; }
	
	
/* Tables 
-------------------------------------------------------*/
table { margin-bottom: 2em;  }
td, th { font-size: 1.2em; text-align: center;  } 
	
	
/* Clearing
-------------------------------------------------------*/
.clearing:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearing {display: inline-table;}
/* Hides from IE-mac \*/
  * html .clearing {height: 1%; }
  .clearing {display: block;}
/* End hide from IE-mac */