/*
 Master Stylesheet
 Site: Bergmark Architects
*/

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* Basic Elements  */
html{font-size:100%;}
body {background: #fff;font-size: 62.5%;font-family: Arial, Helvetica, sans-serif; line-height: 1.33; color: #737373; }
input, select, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #737373; margin: 0; }
:focus {outline: 1px;}
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
strong{font-weight:800;}
hr { display: none; }
.left { float: left;}
.right { float: right;}
.center { text-align: center; }
a img { border: none }
.clearer { clear: both; height: 0; line-height: 0;}

/* Links */
a:link, a:visited, a:active { color: #11b3f0;text-decoration: none; }
a:hover { color: #11b3f0; text-decoration:underline }
a.bold:link { font-weight: 800; }
a.underline:link{ text-decoration: underline; }

/* Headers / Paragraph */
h1 { font-size: 1.4em; margin: 0 0 1em;}
h2 { font-size: 1.4em; margin: 0 0 1em;}
h3 { font-size: 1.4em; margin: 0 0 1em;}
h4 { font-size: 1.4em; margin: 0 0 1.2em; font-weight: 400; }
h5 { font-size: 1.2em; margin: 0 0 1.5em; font-weight: 400; }
p {font-size:1.2em; margin: 0 0 1.5em 0; line-height: 1.4;}

/* Site Structure */
body#home #wrap { width: 398px; margin: 30px auto 0; }
#wrap { width: 970px; margin: 30px auto 0; }
#content { clear: both; padding: 30px 0 0; }
#sidenav { width: 198px; float: left;margin: 0 15px 0; }
#main { width: 200px; float: left; }
#profile-gallery { width: 490px; float: right; }

/* General */
#main ul { font-size: 1.2em;margin: 0 0 1.5em; }
#main ul li { background: url(../images/bullet.gif) no-repeat 0 5px; padding: 0 0 0 15px; line-height: 1.5;}

/* Header */
#header { height: 137px; position: relative;margin:0;padding:0;}
h1#logo { width: 219px; height: 85px;font-size: 1em; overflow: hidden; position: relative; margin: 0 0 0 30px;}
body#home h1#logo { margin: 0 auto 48px;  }
h1#logo span{ background: url(../images/bergmark-architects.png) no-repeat 0 0;display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
h1#logo a { cursor: pointer; display: block; height: 100%; width: 100%; }

/* Homepage Navigation */
#hp-nav ul { padding: 15px 0 0; clear:both;}
#hp-nav ul  li { text-align: center; font-size: 2.4em; width: 126px; float: left; margin: 0 10px 0 0;}
#hp-nav ul  li a { color: #bcbec0; display: block; width: 126px; float: left; }
#hp-nav ul li a:hover { color:#fff; background: #bfc1c3; text-decoration: none; }
#hp-nav ul li.last { margin: 0; padding: 0; }

/* Main Navigation */
#nav ul { height: 23px; padding: 18px 0 0; }
#nav ul li { text-align: center; font-size: 2.4em;  float: left; margin: 0 0px 0 0;}
#nav ul li a { color: #bcbec0; display: block; float: left; padding: 0 30px; }
#nav ul li a:hover { color:#fff; background: #bfc1c3; text-decoration: none; }
#nav ul li.nav-active a { color:#fff; background: #bfc1c3; text-decoration: none; }

/* Side Navigation */
#sidenav { }
#sidenav ul { padding: 0; }
#sidenav ul li { font-size: 1.4em; width: 126px; margin: 0 0 10px; }
#sidenav ul li a { color: #898b8d; display: block; width: 126px; padding: 3px 0 3px 30px; }
#sidenav ul li a:hover { color:#fff; background: #bfc1c3; text-decoration: none; }
#sidenav ul li.nav-active a { color:#fff; background: #bfc1c3; text-decoration: none; }
#sidenav ul li a.sidenav-active { color:#fff; background: #bfc1c3; text-decoration: none; }

/* 2nd level */
#sidenav ul li ul { padding: 10px 0 0; }
#sidenav ul li ul li { font-size: 1em; }
#sidenav ul li ul li a{ padding-left: 46px; }

/* 3rd level */
#sidenav ul li ul li ul { padding: 10px 0 0; }
#sidenav ul li ul li ul li{ font-size: 1em; }
#sidenav ul li ul li ul li a{ padding-left: 61px; }

/* Footer */
#footer { clear: both; color: #898b8d; text-align: left;font-size: 1.2em; margin: 30px 0 20px;padding-left: 34px;  }
body#home #footer { clear: both; color: #898b8d; text-align: center; font-size: 1.2em; margin: 90px 0 20px; padding-left: 0;  }

/*
Page Specific Styles 
*/

/* Homepage */
img#hp-profile { float: left; margin: 0 10px 0 0; width: 126px; }
img#hp-projects { float: left; margin: 0 10px 0 0; width: 126px; }
img#hp-contact { float: left; margin: 0; width: 126px; }

/* Forms */
form#form p{ margin: 0 0 1em; }
form#form input#submit-btn { float: right; }
input.field { border: 1px solid #bfc1c3; font-size: .92em; line-height: 1em;padding: 3px; }
p.val-error { color: #fff;background: #70d1f6; padding: 3px; font-size: 1.1em; }

/* Image replacement */
.ir { font-size: 1em; margin: 0; overflow: hidden; position: relative; }
.ir span { background-repeat: no-repeat; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.ir a { cursor: pointer; display: block; height: 100%; width: 100%; }

/* auto-clear floats */
.auto-clear:after { content: ".";display: block;height: 0;clear: both;visibility: hidden; }