/*   
Theme Name: Rattle	
Theme URI: http://www.rattlecentral.com
Description: Website design
Author: Team Rattle
Author URI: http://www.rattlecentral.com
Version: 0.2
.
Design for the Rattle website
.
*/
/*
---------------------------------------------------------------------------------
rattlecentral - 20/11/08
---------------------------------------------------------------------------------*/

#article a img {border: none;}

/*
EASY CLEAR - based on http://www.positioniseverything.net/easyclearing.html
---------------------------------------------------------------------------------*/
	
/*easy clear*/
.clearfix:after, .project:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
	visibility: hidden;
	}

/*
RESET - based on http://developer.yahoo.com/yui/reset/
---------------------------------------------------------------------------------*/

body,div,p,a,img,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,label,textarea,blockquote,pre,table,th,tr,td,address,caption,cite,code,dfn,em,strong,var,abbr,acronym {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

ul {
	list-style: none;
	}

caption,th {
	text-align: left;
	}
	
strong {
	font-weight: bold;
	}
	
em {
	font-style: italic;
	}
	
/*
BASE FONT SIZE - LINE HEIGHT
---------------------------------------------------------------------------------*/	

body {
	font-size: 75%;
	/*font-size: 82%;*/
	/*font-size: 91%;*/
	line-height: 1em;
	font-family: "Lucida Grande", "Verdana", sans-serif;
	/*font-family: "Verdana", "Lucida Grande", sans-serif;*/
	}

/*
HIDE IN ALL
---------------------------------------------------------------------------------*/
	
hr, form br {
	display: none;
	}

/*
HIDE IN VISUAL BROWSERS (DISPLAY IN SCREENREADERS)
---------------------------------------------------------------------------------*/
	
#skiplinks, .label {
	position: absolute;
	left: -9000px;
	top: -9000px;
	}

#skiplinks a:focus, #skiplinks a:active {
	position: absolute;
	left: 9010px;
	top: 9010px;
	background-color: #fff;
	color: #000;
	padding:5px;
	border: 1px solid #000;
	width: 11em;
	line-height: 1.5em;
	}
	
/*
NAVIGATION LISTS
---------------------------------------------------------------------------------*/


	
	/*
	---------------------------------------------------------------------------------
	rattlecentral - 20/11/08
	---------------------------------------------------------------------------------*/

	/*
	GENERIC
	---------------------------------------------------------------------------------*/

	body {
		background: #eee;
		}

	/*layout*/

	.wrap {
		max-width: 970px;
		min-width: 770px;
		margin: 0 auto;
		}

	#page {
		background: #fff;
		border-left: 5px solid #fff;
		border-right: 5px solid #fff;
		margin-left: 10px;
		margin-right: 10px;
		}

	/*links*/

	a {
		text-decoration: none;
		}

	a:hover {
		text-decoration: underline;
		}

	/*typography*/

	abbr {
		border-bottom: 1px dashed #666;
		cursor: help;
		}

	a abbr {
		border-bottom: 0;
		}

	strong {
		font-weight: bold;
		}

	p {
		line-height: 1.5em;
		}

		.nav li {
			display: inline;
			}


	/*
	HEADER
	---------------------------------------------------------------------------------*/	


	#navbox {
		background: url('images/transparent.png');
		border-bottom: 1px dotted #fff;
		padding: 8px 6px 12px 6px;
		font-family: "Georgia", "Times New Roman", serif;
		text-transform: lowercase;
		font-size: 120%;
		line-height: 1.2em;
		}

	#navbox a {
		color: #fff;
		text-decoration: underline;
		margin: 0 14px;
		}

	#navbox a:hover, #navbox a.on {	
		color: #ABDFF7;
		}

	#mainnav {
		width: 70%;
		float: left;
		}

	#secondnav {
		width: 30%;
		float: right;
		text-align: right;
		}

	#logo {
		padding-top: 55px;
		}

	#logo h1 a, p#rattle a {
		float: left;
		display: block;
		text-indent: -9999px;
		overflow: hidden;
		width: 270px;
		height: 138px;
		background: url('images/rattle.png') top left no-repeat;
		margin-left: -15px;
		}

	#tag {
		display: none;
		}

	#photo {
		position: absolute;
		bottom: 39px;
		right: -15px;
		background: url('images/transparent.png');
		padding: 9px 20px 11px 20px;
		color: #D3D2D2;
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 120%;
		}

	#photo a {
		color: #fff;
		text-decoration: underline;
		}

	#photo a:hover {	
		color: #ABDFF7;
		}

	/*
	CONTENT
	---------------------------------------------------------------------------------*/	

	#content {
		border-top: 1px dotted #CFCCC6;
		color: #444;
		}

	#content a {
		color: #2D99CB;
		}

	h2.title, p#header2 {
		background: #CFCCC6 url('images/arrow_heading.gif') bottom left no-repeat;
		color: #524D44;
		padding: 13px 20px 19px 20px;
		text-transform: uppercase;
		}

	#intro {
		width: 60%;
		float: left;
		}

	#intro p {
		padding: 0px 20px 20px 20px;
		}

	#intro p:first-child, 
	#intro p.first {
		padding: 20px 30px 10px 20px;
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 170%;
		line-height: 130%;
		}

	#intro p.links a, #project p.links a {
		background: #444;
		color: #fff;
		padding: 3px 6px;
		}

	#latest {
		width: 40%;
		float: right;
		}

	#blog {
		padding: 5px 20px 20px 20px;
		clear: left;
		}

	#latest h3 {
		font-family: "Georgia", "Times New Roman", serif;
		line-height: 120%;
		font-size: 135%;
		padding-top: 10px;
		margin-bottom: .5em;
		}

	#latest li {
		clear: left;
		margin-bottom: .5em;
		}

	.meta {
		padding-top: 5px;
		}

	#page #sidebar .meta p {
		background: #F4F4F4 url('images/bg_meta_end.gif') right center no-repeat;
		text-transform: uppercase;
		padding: 2px 15px 2px 5px;
		color: #7E7E7E;
		font-size: 79%;
		margin-bottom: 5px;
		}

	#content .meta a {
		color: #7E7E7E;
		}

	.meta p.date {
		background: #F4F4F4 url('images/bg_meta.gif') right center no-repeat;
		}

	#blognav {
		padding: 15px 20px 20px 20px;
		clear: left;
		position: relative;
		}

	.archive {
		border-right: 1px solid #CFCCC6;
		padding-right: 10px;
		margin-right: 5px;
		}

	.subscribe a {
		background: url('images/subscribe.gif') right center no-repeat;
		padding-right: 20px;
		}

	/*
	FEATURED-HOMEPAGE
	---------------------------------------------------------------------------------*/

	#featured {
		clear: both;
		position: relative;
		padding: 0 20px;
		}

	#featured2 {
		border-top: 1px solid #CFCCC6;
		}

	#featured h2 {
		position: absolute;
		top: 20px;
		left: 480px;
		text-transform: uppercase;
		color: #444;
		}

	#featured h3 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 200%;
		line-height: 130%;
		padding: 5px 0 8px 0;
		color: #2D99CB;
		}

	#featured p {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 135%;
		line-height: 130%;
		padding-bottom: 15px;
		}

	#featured p.more, #project p.links {
		font-family: "Lucida Grande", "Verdana", sans-serif;
		/*font-family: "Verdana", "Lucida Grande", sans-serif;*/
		font-size: 100%;
		}

	#featured .pic img {
		border: 0;
		}

	#featured .pic a {
		display: block;
		float: left;
		width: 436px;
		height: 175px;
		position: relative;
		border: 2px solid #ccc;
		z-index: 2;
		}

	#featured .pic a:hover {
		border: 2px solid #797979;
		}

	#featured .desc {
		float: right;
		width: 100%;
		margin-left: -460px;
		}

	#featured .desc div {
		margin-left: 460px;
		padding-top: 1.5em;
		}

	#featured .project {
		clear: both;
		margin: 0px 0px 20px 0px;
		padding: 20px 0 0 0;
		position: relative;
		}

	/*
	J-QUERY NAVIGATION
	---------------------------------------------------------------------------------*/

	#featurednav {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 100%;
		text-align: right;
		z-index: 1;
		}

	#photonav {
		padding: 20px 0 0 0;
		}

	#featurednav a, #photonav a {
		background: #F3F3F3;
		padding: 2px 5px;
		color: #797979;
		line-height: 1.2em;
		}

	#featurednav a:hover, #photonav a:hover {
		text-decoration: none;
		background: #797979;
		color: #fff;
		}

	#featurednav .ui-tabs-selected a, #photonav .ui-tabs-selected a {
		text-decoration: none;
		background: #797979;
		color: #fff;
		}

	.ui-tabs-hide {
		display: none;
		}

	/*
	PROJECT
	---------------------------------------------------------------------------------*/

	#project {
		background: #FDFDFD;
		}

	#project h2.title, .project p#header2 {
		background: #CFCCC6 url('images/arrow_heading2.gif') bottom left no-repeat;
		}

	#photos {
		padding: 20px 0 20px 20px;
		float: left;
		min-height: 300px;
		display: block;
		}

	#photos img {
		border: 1px solid #D5D2CE;
		}

	#project .desc {
		padding: 10px 20px 20px 0px;
		}

	#project .desc {
		float: right;
		width: 100%;
		margin-left: -580px;
		}

	#project .desc2 {
		margin-left: 580px;
		}

	#project .desc h3, .project h1, #project h1 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 200%;
		line-height: 130%;
		padding: 5px 0 8px 0;
		}

	#project .desc p, #project .desc ul {
		padding-bottom: 15px;
		line-height: 130%;
		}

	#project .desc p.overview, #project .desc h4, #project .detail h3, .project .desc h2, .project .detail h2, #article #sidebar h4, #project .detail h2 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 135%;
		line-height: 130%;
		}

	#project .desc h4, .project .desc h2 {
		clear: left;
		}

	#project .desc .client a {
		font-weight: bold;
		}

	#project .meta li, #project p.meta, #article #sidebar .meta li, #content ul.post-categories li,  #content ul.post-tags li {
		padding: 2px 15px 2px 5px;
		color: #7E7E7E;
		font-size: 79%;
		margin-bottom: 15px;
		}

		#content ul.post-categories li a,
		#content ul.post-tags li a
		 {
			background: #F4F4F4 url('images/bg_meta2.gif') right center no-repeat;
			padding: 2px 20px 2px 5px;			
		}



	#project p.meta {
		margin-top: 5px;
		}

	#project p.last, #project .meta li.last, #article #sidebar .meta li.last {
/*		background: #F4F4F4 url('images/bg_meta_end2.gif') right center no-repeat; */
		}

	#project .detail {
		clear: both;
		border-top: 1px solid #CFCCC6;
		background: #fff;
		padding: 20px;
		}

	#project .detail h3, .project .detail h2, #project .detail p {
		margin-bottom: 15px;
		}

	#project .detail h3, #project .detail h2 {
		font-size: 170%;
		}

	#project .detail #main {
		float: left;
		width: 100%;
		margin-right: -380px;
		}

	#project .detail #main2 {
		margin-right: 380px;
		}

	#project .detail #sidebar {
		width: 320px;
		padding: 40px 20px 20px 20px;
		float: right;
		}

	#project #sidebar h3, .project #sidebar h2 {
		font-family: "Lucida Grande", "Verdana", sans-serif;
		color: #202020;
		font-weight: bold;
		}


	#article #main h3 {
		padding-bottom: 0;
	}
		

	#page #sidebar ul {
		list-style-type: none;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
	}
	
	#page #sidebar ul li {
		margin: 0 0 0 0;
		padding: 0;
	}

	#sidebar h2 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 1.5em;
		line-height: 1.2em;
		margin-bottom: 0.5em;
	}

	blockquote, cite {
		line-height: 1.5em;
		font-family: "Georgia", "Times New Roman", serif;
		font-style: italic;
		color: #666;
		font-size: 110%;
		}

	cite {
		color: #444;
		}

	/*
	ARTICLE
	---------------------------------------------------------------------------------*/

	.article p#header2 {
		background: #CFCCC6;
		color: #524D44;
		padding: 13px 20px 13px 20px;
		text-transform: uppercase;
		}

	#article {
		background: #fff url('images/bg_article.gif') top right repeat-y;
		}

	#article #main2 {
/*		background: url('images/arrow_heading.gif') top left no-repeat; */
		}

	#article #main {
		float: left;
		width: 100%;
		margin-right: -320px;
		}

	#article #main2 {
		margin-right: 320px;
		padding: 20px;
		}

	#article #sidebar {
		float: right;
		width: 260px;
		padding: 20px;
		}

	#article h3, .article h1, .article h2 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 200%;
		line-height: 130%;
		padding: 0px 0 10px 0;
		}

	#page div.post h1 {
		font-size: 1.8em;
		line-height: 1.3em;
		margin-bottom: 1em;
	}

	#article.text h3 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 170%;
		line-height: 130%;
		padding: 0px 0 10px 0;
		}
		
		#article.text h3 a, .text #article h2 a {
		color: #2D99CB;
		}
		
	.div {
		border-top: 1px solid #CFCCC6;
		padding-top: 15px;
		}

	#article p {
		padding-bottom: 15px;
		}

	#article p.intro, .article #main2 h1+p {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 170%;
		line-height: 130%;
		}

	.article #main2 #comments p:first-child, .article #main2 #commentform p:first-child {
		/*font-size: 100%;
		font-family: "Lucida Grande", "Verdana", sans-serif;
		line-height: 150%;*/
		}

	.text #main2 blockquote p:first-child {
		font-size: 100%;
		line-height: 150%;
		}

	.social a {
		color: #2D99CB;
		margin-right: 20px;
		}

	.social {
		padding-bottom: 15px;
		}

	.digg {
		padding-left: 22px;
		background: url('images/digg.gif') left center no-repeat;
		}

	.delicious {
		padding-left: 22px;
		background: url('images/delicious.gif') left center no-repeat;
		}

	#comments, #commentform {
		border-top: 1px solid #CFCCC6;
		padding-top: 10px;
		clear: both;
		}

	#page #comments ul li {
		clear: both;
		color: #767676;
		background: none;
		padding: 0;
		}

	#page #comments ul {
		padding: 0;
		list-style-type: none;
		margin: 0;
		}

	.commenter {
		float: left;
		width: 200px;
		line-height: 1.5em;
		position: relative;
		}

	.commenter span {
		display: block;
		}

	.article #comments li {
		background: none;
		padding: 0;
		}

	.comment {
		float: right;
		width: 100%;
		margin-left: -220px;
		}

	.comment div {
		margin-left: 220px;
		padding: 0px 0 2em 0;
		}

	#commentform form {
		margin: 10px 0;
		}

	#commentform label {
		display: block;
		text-transform: uppercase;
		margin-bottom: 3px;
		}

	#commentform label .required {
		color: #9C9994;
		text-transform: none;
		margin-left: 5px;
		}

	#commentform .txt {
		border: 3px double #CDCDCD;
		width: 256px;
		font-size: 100%;
		font-family: "Lucida Grande", "Verdana", sans-serif;
		padding: 2px;
		}

	#commentform textarea {
		width: 283px;
		border: 3px double #CDCDCD;
		font-size: 100%;
		font-family: "Lucida Grande", "Verdana", sans-serif;
		padding: 2px;
		}

	#commentform .txt:focus, #commentform textarea:focus {
		border-color: #8E8E8E;
		}

	#commentform .checkbox label {
		display: inline;
		margin-left: 7px;
		text-transform: none;
		}

	#commentform .checkbox input {
		vertical-align: text-top;
		}

	#commentinfo, #yourcomment {
		float: left;
		}

	#commentinfo {
		padding-right: 20px;
		}

	#submitbox {
		clear: both;
		}

	#submitbox input {
		margin-right: 10px;
		}

	#article #sidebar h4, .article #sidebar h2, .text #sidebar h2 {
		clear: both;
		padding-bottom: 0;
		}

	#article #sidebar #blognav {
		padding-left: 0;
		}

	#article #main ul, #article #main h4, #article #main h5, .article #main h2, .article #main h3, .text #main h3, .text #main h4 {
		line-height: 1.5em;
		}

	#article h4, .article #main h3, .text #main h3 {
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 135%;
		color: #202020;
		padding-bottom: 5px;
		}

	.article #main h3 {
		padding-bottom: 0px;
		}

	.text #main h3 {
		padding: 15px 0 5px 0;
		}

	#article h5, .article #article h4, .text #article h4 {
		color: #202020;
		font-weight: bold;
		padding-bottom: 5px;
		font-size: 100%;
		font-family: "Lucida Grande", "Verdana", sans-serif;
		}

	#article ul li {
		background: url('images/bullet.gif') 0 5px no-repeat;
		padding-left: 20px;
		color: #666;
		margin-bottom: 8px;
		line-height: 1.5;
		}
		
	#sidebar ul li {
		background: none;
	}
		
	#article ol {
		margin-left: 20px;
		margin-bottom: 1em;
	}
	
	#article ol li {
		list-style-position: outside;
		margin-bottom: 8px;
		color: #666;
		line-height: 1.5
	}

	#article ul {
		margin-bottom: 1em;
	}
	
	#article ul li ul {
		margin-bottom: 0;
	}

	#article ul.nav li, ul.post-categories li {
		background: none;
		padding-left: 0px;
		padding-bottom: 0px;
		color: #000;
		}

	#article #main cite {
		margin-bottom: 15px;
		}

	#article blockquote, #article cite {
		padding-left: 40px;
		background: url('images/blockquote.gif') top left repeat-y;
		}

	cite {
		font-size: 100%;
		}

	#article #main blockquote p {
		padding-bottom: 0;
		}

	#article .image {
		float: left;
		margin: 10px 20px 15px 0;
		clear: both;
		padding: 0 3px 3px 0;
		background: url('images/bg_image.gif') bottom right no-repeat;
		}

	#article .image div {
		border: 1px solid #D5D2CE;
		padding: 12px;
		}

	#article .image p {
		padding: 0;
		}

	#article .image img {
		padding-bottom: 5px;
		}

	#article .image p.caption {
		color: #202020;
		font-style: italic;
		font-family: "Georgia", "Times New Roman", serif;
		font-size: 100%;
		}

	#article .image p.info {
		color: #767676;
		font-size: 90%;
		}

	#article p {
		clear: both;
		}

	.thumbnails {
		padding: 15px 0;
		}

	#article .thumbnails li {
		display: inline;
		background: none;
		padding: 0;
		}

	.thumbnails li a {
		float: left;
		width: 99px;
		margin: 0 17px 17px 0;
		}

	.thumbnails img {
		border: 0;
		padding: 11px 13px 13px 11px;
		background: #fff url('images/thumbnail.gif') top left no-repeat;
		}
		
	/*
	TABLE - Within posts
	---------------------------------------------------------------------------------*/
	
	.post table {
		border-bottom: 1px solid #cfccc6;
		border-collapse: collapse;
		width: 100%;
		margin: 1em 0 2em 0;
		border-left: 1px solid #ccc;
		overflow: hidden;
		}
		
	.post table th, .post table td {
		padding: 5px;
		border-bottom: 1px solid #cfccc6;
		border-right: 1px solid #cfccc6;
		}
		
	.post table th {
		font-weight: bold;
		border-top: 2px solid #cfccc6;
		background: #ebebeb;
		}
		
	.post table tr:nth-child(even) {
		background: #f4f4f4;
		}
		
	.post tr:hover td {background-color: #f7f5e2;}
	
	/* where table data is figure based rather than text entries - align the columns to the right */	
	table.figures th, table.figures td, table td.figures, table th.figures {text-align: right;}
	
	tr.total td {
	font-weight: bold;
	border-top: 2px solid #979899;
	}	
		
	
		
	

	/*
	FOOTER
	---------------------------------------------------------------------------------*/

	#footer {
		clear: both;
		color: #7E7E7E;
		background: url('images/footer.gif') top left no-repeat;
		padding-top: 7px;
		line-height: 1.5em;
		overflow: hidden;
		zoom: 1;
		}

	#footer2 {
		background: #000 url('images/footer2.gif') top right repeat-y;
		overflow: hidden;
		}

	#footer a {
		color: #CFCCC6;
		}

	#address, #contact, #company {
		padding: 10px 20px 13px 20px;
		}

	#address {
		float: left;
		}

	#meta {
		float: right;
		width: 550px;
		}

	#contact {
		width: 199px;
		float: left;
		}

	.tel {
		color: #CFCCC6;
		}

	a#downloadvcard {
		color: #CCE772;
		padding-left: 20px;
		background: url('images/microformat.gif') center left no-repeat;
		}

	#company {
		width: 271px;
		float: left;
		}

	/*
	FOOTERNAV
	---------------------------------------------------------------------------------*/	

	#footernav {
		clear: both;
		background: #363232;
		border-top: 1px dotted #737070;
		color: #fff;
		padding: 14px 10px 15px 10px;
		}

	#footernav a {
		color: #CFCCC6;
		padding: 0 10px;
		}

	#footernav a.copyright {
		color: #fff;
		}


	/* HEADER */
	

	#header {
		position: relative;
		background: #fff url('images/header-background.jpg') top left no-repeat;
		height: 298px;
		}
	

	/* Wordpress styles */
	
	
	#page #sidebar ul.post-categories li,
	#page #sidebar ul.post-tags li {
		padding: 2px 15px 2px 5px;
		color: #7E7E7E;
		font-size: 79%;
		margin-bottom: 15px;
		background: none;
		}

	#article #main2 h2 {
		font-size: 1.7em;
		line-height: 1.3em;
		font-family: 'Georgia', serif;
		margin-bottom: .2em;
	}

	ul.services_provided {
		margin-top: .5em;
	}
	
	ul.services_provided li {	
		margin-top: 1em;
		text-transform: uppercase;
		color: #7E7E7E;
		font-size: .9em;
	}

	#project .about p {
		margin-top: .5em;
	}
	
	#project .about h2 {
		font-size: 1.4em;
		font-family: 'Georgia', serif;
	}