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

* {
margin: 0;
padding: 0;
}

body {
background: #808E84;
color:#555;
font-size:90%;
font-family: 'open_sansregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
margin:30px;
}

p {
margin: 0 0 12px 0;
line-height: 22px;}

strong {
font-family: 'open_sansbold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:normal;}
	
ul {
margin:0 0 10px 10px;
line-height: 18px;}

li {
margin: 0 0 5px 13px;
line-height: 18px;}


a, a:link, a:visited {
color:#48a303;
text-decoration: none;}

a:hover {
color: #99cc00;
text-decoration: none;}

a:focus, a:active {
color: #7CAB24;
text-decoration: none;}



/* responsive mostly fluid layout (each layout div has a class assigned which governs how the divs move when viewport size changes) */

   .container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;    }

	 .c1 {width: 100%;} /*header*/
	 .c2 {width: 54%;} /*banner*/
	 .c3 {width: 46%;} /*nav*/

	 .c5 {width: 70%;} /*main*/
	 .c6 {width: 100%;} /*sidebar*/
	 .c7 {width: 100%;} /*footer*/
	 .c8 {width: 68%;} /*portfolio*/
	 .c9 {width: 16%;} /*portfolio_nav*/
	 .c10 {width: 14.5%;} /*sidebar images*/
	 .c11 {width: 46.5%;} /*2 up highlights*/
	 .c12 {width: 30.5%;} /*3 up highlights*/
	
@media (min-width: 1160px) {
      .container {
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
      }
    }
	
@media (max-width: 1100px) {
      .container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
}


h1 {	
	font-family: 'montserratbold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0 0 20px 0;
	font-size: 220%;
	color:#979e99;
	text-align:left;
	}

h2 {	
	font-family: 'montserratbold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:0 0 20px 0;
	font-size: 220%;
	color:#979e99;
	text-align:left;
	}
	
h3 {	
	font-family: 'montserratregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
	margin:20px 0 5px 0;
	color:#666;
	text-align:left;
	}
	
h4 {
	font-family: 'montserratregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
}

h5 {
	font-family: 'montserratregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:normal;
}

h6 {
	font-size:110%;
	font-weight:normal;
	margin:20px 0 12px 0;
}



#wrapper {
	background: #ffffff url(images/beechleaves_header.jpg) no-repeat left top;
	margin:0 auto;
	min-height: 400px;
	clear:both;
	position:relative;}
	
	
#header {
	padding: 115px 0 0 0;
	margin: 0;}
	
#header h1 {
	padding: 0 30px;
	margin:0 0 -12px 0;
	z-index:1000;
	text-align:right;
	font-family: 'montserratblack', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	font-weight:normal;
	letter-spacing:.07em;
	font-size: 220%;
	color:#429504;}


/* beechleaf design logo set as background image so can be changed out with small or large css */
#banner {
	background: #c2c9c4 url(images/beechleaf-design.jpg) no-repeat left top;
	height:54px;
	padding: 0;
	float:left;	}

#banner img {float:left;}

/* clear png (so link to home works) placed over beechleaf design logo at larger size, hidden under 575px */
#beechleafdesign {
	width: 560px;
	height: 54px;
	float:left;}

/* clear png (so link to home works) placed beechleaf design logo at smaller size, hidden over 575px */
#beechleafdesign_sm {
	position:absolute;
	z-index: -100;
	visibility: hidden;
	width: 350px;
	height: 34px;
	float:left;}
	

/* main navigation */
nav { 
	margin: 0;
	background-color: #c2c9c4;
	z-index:100;
	font-family: 'montserratregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing:.02em;
	text-transform:uppercase;
	float:right;	}

nav:after {
	content:"";
	display:table;
	clear:both;}

nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;}
	
nav ul li {
	margin: 0;
	display:inline-block;
	float: left;
	background-color: transparent;}

nav ul ul {
	display: none;
	position: absolute; 
	top: 54px;} /*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 ul li:hover > ul {display:inherit;}
	
nav ul ul li {
	width:190px;
	float:none;
	display:list-item;
	position: relative;
	background-color: #b9bdba;}
	
nav ul ul li a, nav ul ul li a:link, nav ul ul li a:visited {line-height:40px;}

nav a, nav a:link, nav a:visited {
	display:block;
	padding:0 20px;	
	color: #666;
	font-size:120%;
	line-height: 54px;
	text-decoration:none;}

nav a:hover {
	color:#429504;
	background-color: #d4d7d4;}

.submenu {font-size:90%;}

.on a, .on a:link, .on a:visited {color: #429504;}

.submenu a, .submenu a:link, .submenu a:visited {
	background-color: #b9bdba;}

.submenu a:hover {
	color:#429504;
	background-color: #d4d7d4;}	
	

/* content area */
#main {padding: 40px 165px;}

#sidebar {padding: 20px 10px 0 30px;}

#sidebar img {
	float: right;
	max-height:150px;}
	
.left {float:left; margin: 10px;}
.left img {width:100%; height:auto;}

.border {border:#ccc solid 1px;}
.border2 {border:#fff solid 1px;}


/* portfolio content*/
#portfolio {
	text-align:center;
	padding: 40px 50px 30px 70px;}

#portfolio_main {
	text-align:left;
	padding: 40px 50px 30px 70px;}


/* portfolio right side thumbnail navigation */
#portfolio_nav {
	float:right;
	text-align:right;
	margin: 35px 0 0 0;
	padding:0;}

#portfolio_nav img {margin: 4px 5px;}

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

#portfolio_nav li {
	display:inline;
	margin:0;
	padding:0;}


/* inter portfoilo navigation */

#thumbs {margin:10px 0 0 0;}	

#examples {
	margin:20px 0 0 0;
	font-family: 'open_sansbold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}	

#examples ul, #thumbs ul {
list-style-type:none;
margin:0;
padding:0;}

#examples li, #thumbs li {
display:inline;
margin:0;
padding:0 10px;
line-height:28px;
}

#examples a, #examples a:link, #examples a:visited, #examples a:hover, #examples a:focus, #examples a:active {
	font-family: 'open_sansregular', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;	}


#footer {
	font-size:90%;
	text-align:right;
	padding:30px 40px;}

.clear {clear: both;}




@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold_italic';
    src: url('fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.eot');
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff'),
         url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratlight';
    src: url('fonts/montserrat-light-webfont.eot');
    src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff'),
         url('fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('fonts/montserrat-light-webfont.svg#montserratlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratblack';
    src: url('fonts/montserrat-black-webfont.eot');
    src: url('fonts/montserrat-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-black-webfont.woff2') format('woff2'),
         url('fonts/montserrat-black-webfont.woff') format('woff'),
         url('fonts/montserrat-black-webfont.ttf') format('truetype'),
         url('fonts/montserrat-black-webfont.svg#montserratblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    src: url('fonts/montserrat-bold-webfont.eot');
    src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff'),
         url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;
}