/*
Theme Name: Beccle Design
Theme URI: http://www.rebeccagale.co.uk
Description: Beccle Design - Landscape Architecture & Garden Design
Version: 1.0
Author: Ben White
Author URI: http://www.thewhitesite.co.uk
*/

/* ########################################################################### */
/* ##### RESET     #####*/
/* ########################################################################### */
body,div,span,ul,ol,li,h1,h2,h3,h4,h5,h6,p,a,blockquote,table,tbody,tr,td,dl,dt,dd,fieldset,legend,input,label,select,option,textarea{margin:0;padding:0;}a{text-decoration:none;}a:hover{text-decoration:none;}a img{border:none;}a:focus,a:active{outline:none;}ul li{list-style-type:none;}.clear{clear:both;height:1px;font-size:1px;line-height:1px;}

/* ########################################################################### */
/* ##### BODY / WRAPPER      #####*/
/* ########################################################################### */

html, body {
	background-color: #ffffff;
	color: #58585a;
	font-family: "Arial";
	font-size: 12px;
 	line-height: 140%;
}

#container {

}

.wrap {
	margin: 0 auto;
    width: 960px;
}

/* ########################################################################### */
/* ##### STYLE CLASSES #####*/
/* ########################################################################### */

a { color: #b1b1b1; font-style: italic; }

a:hover, a:active { color:#f7d800; }

h1 {
	font-size: 12px;
	font-weight: bold;
	line-height: 140%;
}

h2 {
	font-size: 12px;
	line-height: 140%;
	font-weight: normal;
}

.bold { font-weight: bold;}

.pullout {
	font-size: 18px;
	line-height: 120%;
}

.pageTitle {
	position: relative;
	display: block;
	margin-top: 70px;
	font-size: 14px;
}

.bodyTitle { font-size: 14px; }

.blogArchive {
	font-size: 14px; 
	margin-top: -30px;
	margin-bottom: 30px;
}

/* ########################################################################### */
/* ##### HEADER #####*/
/* ########################################################################### */

#header { width: 100%; }

#logo {
	position: relative;
	width: 285px;
	height: 23px;
	top: 30px;
	margin-left: auto;
	margin-right: auto;
}

/* ######## NAVIGATION ######### */

#navContainer {
	position:relative;
	width: 100%;
	height: 30px;
	top: 45px;
	border-bottom: solid 1px #e5e5e5;
	border-top: solid 1px #e5e5e5;
}

.nav { padding-left: 4px; padding-top: 5px;}

.nav li {display: inline;}

.nav li a {
	height: 20px;
	color: #797772;
	float: left;
	text-align: left;
	letter-spacing: 1px;
	margin: 3px 13px 0 13px;
	font-style: normal;

}

.nav li#blog a{margin: 3px 17px 0 16px;}
.nav li#home a{margin: 3px 15px 0 15px;}

.nav li a:hover, .nav li.active a { color: #f7d800;}

.nav li.divider {
	position: relative;
	float: left;
	width: 6px;
	height: 6px;
	margin-top: 2px; 
}

/* ######## BREADCRUMB ######### */

#breadcrumbContainer {
	position:relative;
	width: 100%;
	height: 30px;
	top: 45px;
	border-bottom: solid 1px #e5e5e5;
	float: left;
}

#breadcrumbButton {
	position: relative;
	display: block;
	top: 7px;
	margin-left: 3px;
	float:left;
}


/* ########################################################################### */
/* ##### BODY #####*/
/* ########################################################################### */


.mainImage {
	position: relative;
	width: 960px;
	margin-top: 65px;	
}

.bodyText {
	position: relative;
	width: 470px;
	float: left;
	margin-top: 30px;
}

.bodyText#home { width: 450px;}

.bodyText#column1 { width: 450px; }

.bodyText#column2 { margin: 66px 0 0 30px; }

.bodyText#blog {
	width: 540px;
	border-top: solid 1px #e5e5e5;
	margin-top: 10px;
	padding-top: 20px;
}

.imageInColumn { width:480px; margin: -8px 0 0 30px;}

/* ######## HOMEPAGE ######### */

.featureWrapper {
	position: relative;
	margin: 30px 0 0 40px;
	float: left;
	width: 220px;
}

.featureWrapper#blog { width:230px; margin-left: 20px;}

.featureImage {
	position: relative;
	float: left;
	width: 220px;
	height: 140px;
	margin: 12px 0 12px 0;
}

.featureImage#blog { width:230px; }

/* ######## PROJECTS ######### */

#projectWrapper {
	position:relative;
	width: 980px;
	float: left;
	left: -20px;
}

.projectContainer {
	position: relative;
	margin: 20px 0 20px 20px;
	float: left;
}

.projectThumbnail {
	position: relative;
	width: 225px;
	float: left;
	margin-bottom: 5px;	
}

.projectImage {
	position: relative;
	width: 225px;
	height: 140px;
}

.projectSlider {
	position: relative;
	width: 575px;
	height: 390px;
	float: left;
	margin: 20px 0 0 0;
	border: solid 1px #e5e5e5;
}

.projectInfo {
	position: relative;
	width: 350px;
	float: left;
	margin: 17px 0 0 30px;
}

/* ######## BLOG / NEWS ######### */

.blogImage {
	position: relative;
	width: 540px;
	margin: 20px 0 20px 0;
}

.archiveWrapper {
	position: relative;
	width: 350px;
	float: left;
	border-top: solid 1px #e5e5e5;
	margin: 10px 0 0 70px;
	
}

.archiveEntry {
	position: relative;
	width: 350px;
	margin-bottom: 20px;
}

/* ########################################################################### */
/* ##### FOOTER #####*/
/* ########################################################################### */

#footerWrapper {
	position: relative;
	width: 100%;
	height: 100px;
	border-top: solid 1px #e5e5e5;
	padding-top: 10px;
	top: 60px;
}


/* ########################################################################### */
/* ##### UTILITIES #####*/
/* ########################################################################### */

.clear {
  clear: both;
}

.left { float: left;}

.right { float:right; }