@charset "UTF-8";
/* CSS Document */


body {
margin: 0;
background: #fff;
}

.c2 {width: 100%;} /*banner*/
.c3 {width: 100%;} /*nav*/
.c5 {width: 95%;} /*main*/
.c8 {width: 77%;} /*portfolio*/
.c9 {width: 13%;} /*portfolio_nav*/
.c10 {width: 13.5%;} /*sidebar images*/
.c11 {width: 46%;} /*2 up highlights*/
.c12 {width: 45%} /*3 up highlights*/

nav { 
	margin: 0 0 20px 15px;
	background-color: #fff;}
	
nav a, nav a:link, nav a:visited {padding:0 15px;}
	
#main {padding: 10px 30px 20px 30px;}
#portfolio, #portfolio_main {padding: 10px 20px 20px 30px;}

.image img {width:100%; 	height:auto;	}
.vertical img {width:90%; height:auto;}


@media (max-width: 695px) {
.c10 {width: 29%;} /*sidebar images*/
}

@media (max-width: 670px) {
	.c8 {width: 92%;} /*portfolio*/
	.c9 {width: 100%;} /*portfolio_nav*/

	#header h1 {	color:#2f6903; padding: 0 10px;}
	
	#portfolio, #portfolio_main {padding: 10px 30px 20px 30px;}
	#portfolio_nav {
		margin: 20px 0 0;
		text-align:center;}
}

@media (max-width: 610px) {
	.c11 {width: 45%;} /*2 up highlights*/
}

@media (max-width: 575px) {
#wrapper {background: #ffffff url(images/beechleaves_header350.jpg) no-repeat left top;}

#header {
	padding: 62px 0 0 0;
	margin: 0;}
	
#header h1 {margin: 0 0 -12px;}
	
#banner {
	background: #acb5af url(images/beechleaf-design350.jpg) no-repeat left top;
	height:34px;
	padding: 0;	}
	
#beechleafdesign {
	position:absolute;
	z-index: -10;
	visibility: hidden;
	width: 350px;
	height: 34px;
	float:left;}

#beechleafdesign img {width:320px;}

#beechleafdesign_sm {
	position:relative;
	z-index: 10;
	visibility:visible;
	width: 350px;
	height: 34px;
	float:left;}
	
nav { margin: 0 0 0 15px;}
	
h1 {	font-size: 200%;}
}

@media (max-width: 475px) {
.c11 {width: 80%;} /*2 up highlights*/
	
nav { margin: 0;}

nav ul ul {
	top: 45px;} /*this relates to line height in nav a. if line height is not defined in nav a then default line height is being used */
	
nav a, nav a:link, nav a:visited {
	padding:0 20px;	
	font-size:120%;
	line-height: 45px;}

h1 {	font-size: 180%;}

#portfolio, #portfolio_main {padding: 10px 30px 20px;}

.vertical img {width:100%; height:auto;}
}

@media (max-width: 460px) {
	.c12 {width: 44%} /*3 up highlights*/
}

@media (max-width: 400px) {
	
.c11 {width: 90%;} /*2 up highlights*/
	
#header h1 {
	color:#20560e;
	font-size:200%;
	margin: 0 0 -11px;}
	
#portfolio_main {padding: 10px 20px 20px;}
}

@media (max-width: 375px) {
	.c12 {width: 43%} /*3 up highlights*/
}

@media (max-width: 360px) {
#header h1 {letter-spacing: 0.03em;}
	
#portfolio_nav {
	text-align:left;
	padding:0 5px 0 10px;}
}

@media (max-width: 350px) {
.c12 {width: 90%} /*3 up highlights*/
	
#header h1 {	color:#18410b;}
	
#banner {
	background: #acb5af url(images/beechleaf-design320.jpg) no-repeat left top;
	height:31px;
	padding: 0;}
	
#beechleafdesign img, #beechleafdesign_sm img {width:100%; height:auto;}
	
#beechleafdesign_sm, #beechleafdesign {
	width: 100%;
	height: auto;}
	
#main {padding: 10px 20px 20px;}
}