/*Stylesheet for boilerroomdigital.co.uk version 2*/
/*Check out my CSS, work out how it works by all means, but please don't steal*/

/*Padding and margin reset*/
	html, body, p, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, blockquote, address, table, tr, td, th, form, fieldset, img{
		margin: 0;
		padding: 0;
		font-size: 1em;
		list-style: none;
		font-style: normal;
		border: 0;
	}

	a{
		text-decoration: none;
		color: #000;
	}
	
	a:hover{
		text-decoration: underline;
	}
	
	abbr{
		border: none;
	}
	
/*Accessibility*/
	#nav_access{
		position:absolute;
		left:-999em;
	}
	
/*Scaffolding and lovely backgrounds*/
	.container{
		width:870px;
		margin:0 auto;
		padding:16px 0 12px;
		position: relative;
	}
	
	#content .container{
		width:570px;
		padding-left:300px;
	}
	
	body{
		background:#704848;
		font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, sans-serif;
		color:#444;
		font-size:75%;
		line-height: 1.5em;
	}

	html>body{
		font-size:12px;
	}
	
	p{
		margin:1.5em 0;
	}
	
	h3{
		margin:1em 0 2em;
	}
	
	#about, #hello, #work, #blog, #contact{
		border-bottom:2px solid #fff;
		position: relative;
	}
	
	#branding {
		background:#fff url(../images/bg_body.jpg) repeat-x top left;
	}
	
	#about, #hello{
		background: #846363 url(../images/bg_about.gif) repeat-x top left;
		color: #fff;
	}
	
	#work {
		background: #eadac3 url(../images/bg_work.gif) repeat-x top left;
	}
	
	#blog {
		background: #fcf6dd url(../images/bg_blog.gif) repeat-x top left;
	}
	
	#contact{
		background: #704848 url(../images/bg_contact.gif) repeat-x top left;
		color: #fff;
		border-bottom: none;
	}
	
	#about h2, #hello h2, #work h2, #blog h2, #contact h2{
		width:270px;
		position:absolute;
		padding-right:10px;
		left:0;
	}
	
	#hello h2{
		width:260px;
	}
	
/*Branding*/
	#branding {
		height: 124px;
	}

	#branding h1 a{
		background: url(../images/boilerroomdigital.gif);
		display: block;
		width:479px;
		height:102px;
		text-indent:-999em;
		position:absolute;
		top: 0;
		left: 0;
	}
	
	#branding h2{
		background: url(../images/strapline.gif);
		width:365px;
		height:102px;
		text-indent: -999em;
		position:absolute;
		top:0;
		right:0;
	}

/*Main nav*/
	#nav_main{
		position:absolute;
		top:0;
		right:0;
	}

	#nav_main li{
		background: #c9b8a4 url(../images/bg_toptab_l.gif) no-repeat bottom left;
		float:left;
		margin-right:10px;
	}
	
	#nav_main li.contact{
		margin-right: 0;
	}
	
	#nav_main li a{
		display: block;
		background: url(../images/bg_toptab_r.gif) no-repeat bottom right;
		padding:3px 12px 6px;
		float:left;
		color:#fff;
	}
	
	body.home #nav_main li.home,
	body.about #nav_main li.about,
	body.work #nav_main li.work,
	body.blog #nav_main li.blog,
	body.contact #nav_main li.contact{
		background: #b09986 url(../images/bg_toptab_l_on.gif) no-repeat bottom left;
	}
	
/*Subnav*/
	.subnav{
		position:absolute;
		top:5.8em;
		text-align:right;
		left:0;
		width:270px;
	}
	
	#content .container .subnav li {
		margin:0;
	}

/*Image replacement on the h2s*/
	#hello h2, #work h2 a, #blog h2 a, #contact h2 a, #about h2 a{
		display: block;
		height:35px;
		text-indent: -999em;
	}
	
	#hello h2{
		background: url(../images/h2_hello.gif) no-repeat top right;
	}
	
	#work h2 a{
		background: url(../images/h2_work.gif) no-repeat top right;
	}
	
	#blog h2 a{
		background: url(../images/h2_blog.gif) no-repeat top right;
	}
	
	#contact h2 a {
		background: url(../images/h2_contact.gif) no-repeat top right;
	}
	
	#about h2 a{
		background: url(../images/h2_about.gif) no-repeat top right;
	}

/*About*/
	.about #about li{
		margin:1.5em 0;
	}
	
	.about #about img{
		float:right;
		margin:-2em 0 1em 1em;
	}

/*Work*/
	#work a img{
		border:2px solid #e6d4ba;
		margin-right:30px;
	}
	
	#work a:hover img{
		border:2px solid #fff;
	}
	
	.work #work .container img{
		display: inline;
		margin-bottom:30px;
	}
	
/*Blog*/
	#blog dt.main{
		margin-top:1em;
	}
	
	#blog dt{
		font-weight: bold
	}

	#blog dd.main{
		width:auto;
		float: none;
	}
	
	dd.main p{
		margin-top:0;
	}
	
	#blog dd{
		width:40%;
		margin-right:9%;
		float: left;
	}
	
	#blog .container:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	
	.home #blog .container{
		padding-bottom:1em;
	}
	
	.posted {
		font-size:.9em;
		font-weight: normal;
	}
	
/*Contact*/
	#contact .adr{
		float:left;
		width:40%;
		margin-right:10%;
		margin-bottom:1em;
	}
	
	#contact .tel, #contact .email{
		display: block;
	}
	
	#contact .type{
		display: none;
	}
	
	#contact .vcard-link{
		clear:both;
	}
	
	#contact .vcard-link img{
		position:relative;
		top:3px;
	}
	
	#contact a{
		color:#fff;
	}