body { background: #fff; color: #000; margin: 0px; padding: 0px; font-family: "Open Sans", Arial, Helvetica, "sans-serif"; font-size: 12px; text-align: center; font-weight: normal; }
img { border: none; }
form { margin: 0px; padding: 0px; }
input, select, textarea { font-family: "Open Sans", Arial, Helvetica, "sans-serif"; font-size: 15px; border: 1px solid #ccc; background: #f8f8f8; color: #000; padding: 5px; -webkit-border-radius: 3px; border-radius: 3px; }
input.checkbox { font-family: "Open Sans", Arial, Helvetica, "sans-serif"; font-size: 15px; border: 0px; background: transparent; color: #000; padding: 0px; }
button { font-family: "Open Sans", Arial, Helvetica, "sans-serif"; color: #fff; cursor: pointer; line-height: 23px; padding: 5px 10px; background: #000; border: 1px solid #000; -webkit-border-radius: 3px; border-radius: 3px; font-size: 15px; font-weight: normal; }
input.invalid, textarea.invalid, select.invalid, input.checkbox.invalid { border: 1px solid #900; background: #fee; color: #000; }
.hidden { display: none; }
.clear { clear: both; }
.relative { position: relative; }
.float_right { float: right; }
b { font-weight: bold; }

body.home { background: #808080; }
body.home #headercontainer { background: url("/images/50white.png"); }
body.home #headercontainer #header #nav ul li a { color: #565758; }
body.home #headercontainer #header #nav ul li a:hover { color: #343536; }
body.home #headercontainer #header #nav ul li a.selected { color: #000; font-weight: bold; }
body.home #footercontainer { background: url("/images/50white.png"); }

#headercontainer { position: fixed; top: 0px; left: 0px; right: 0px; text-align: center; background: #e5e6e7; height: 150px; z-index: 30; }
#headercontainer #header { position: relative; width: 960px; margin: 0px auto; padding: 22px 0px 23px 0px; text-align: left; }
#headercontainer #header #logo {}
#headercontainer #header #logo a { display: block; text-indent: -999em; background: url("/images/westwood-joinery-logo.png") no-repeat center center; width: 111px; height: 105px; }
#headercontainer #header #nav { position: absolute; bottom: 15px; right: 0px; line-height: 30px; }
#headercontainer #header #nav ul { float: right; list-style: none; padding: 0px; margin: 0px; }
#headercontainer #header #nav ul li { float: left; }
#headercontainer #header #nav ul li a { display: block; cursor: pointer; margin: 0px 0px 0px 30px; padding: 0px; text-decoration: none; font-size: 15px; color: #676869; font-weight: normal; text-transform: uppercase; }
#headercontainer #header #nav ul li a:hover { color: #343536; }
#headercontainer #header #nav ul li a.selected { color: #000; font-weight: bold; }

#pagecontainer { padding: 0px; text-align: left; z-index: 9; }
#page { position: relative; width: 960px; margin: 0px auto; padding: 150px 0px 35px 0px; }

#slides .content { position: absolute; bottom: 85px; left: 100px; width: 660px; height: 340px; overflow-y: auto; background: url("/images/65-white.png") repeat center center; text-align: left; z-index: 99999; }
#slides .content .inner { padding: 20px 100px 20px 20px;  }
#slides .content h1 { color: #000; font-size: 20px; margin: 0px 0px 10px 0px; font-weight: bold; }
#slides .content h2 { color: #000; font-size: 15px; margin: 0px; font-weight: normal; }
#slides .content p { color: #000; font-size: 12px; margin: 10px 0px 0px 0px; font-weight: normal; }

#left { width: 180px; float: left; padding: 60px 0px; }
#left h2 { font-size: 14px; font-weight: normal; padding: 0px 0px 5px 10px; margin: 0px; }
#left h2 a { color: #ccc; text-decoration: none; }
#left ul { list-style: none; margin: 0px 0px 20px 0px; padding: 0px; border-top: 1px solid #eee; }
#left ul li {}
#left ul li a { display: block; padding: 5px 10px; border-bottom: 1px solid #eee; text-decoration: none; color: #999; font-size: 13px; font-weight: bold; }
#left ul li a i { font-weight: normal; font-style: normal; color: #eee; }
#left ul li a.selected { color: #1b3d72; background: #f5f5f5; }

#content { float: right; position: relative; color: #000; text-align: left; padding: 40px 0px; margin: 0px; width: 755px; }
#content .inner h1, #content .inner h2, #content .inner h3, #content .inner p { padding-right: 200px; }
#content h1 { color: #000; font-weight: bold; font-size: 28px; margin: 0px 0px 20px 0px; }
#content h2 { color: #000; font-weight: normal; font-size: 16px; }
#content h3 { color: #666; font-weight: normal; font-size: 15px; line-height: 20px; }
#content form h3 { color: #000; font-weight: bold; font-size: 15px; margin: 10px 0px 5px 5px; }
#content p { line-height: 1.5em; font-size: 12px; }
#content p b, #content p strong { color: #666; font-weight: bold; }
#content hr { border: 0px; color: #32c3de; background-color: #32c3de; height: 1px; }
#content ol, #content ul { width: 515px; color: #999; }
#content ol:after, #content ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#content li { width: 33%; float: left; line-height: 1.5em; }
#content li a { }
#content a { color: #666; text-decoration: none; font-weight: bold; }
#content a:hover { }
#content form { margin: 15px 0px; }
#content .left { float: left; width: 300px; }
#content .right { float: right; width: 300px; }
#content blockquote { margin: 15px 0px; padding: 5px 10px; background: #f5f5f5; }
#content blockquote.alt { background: #f2fafd; }
#content blockquote h2 { margin-top: 5px; }
#content blockquote p { margin: 5px 0px; }
#content input, #content textarea, #content select { width: 240px; }
#content input.invalid, #content textarea.invalid, #content select.invalid, #content .selectBox-dropdown.invalid { border: 1px solid #e00000; background: #fee; }
#content div.invalid { border: 1px solid #e00000; background: #fee; }
#content textarea { margin: 2px 0px 0px 0px; }
#content input.checkbox { width: auto; }
#content label { padding: 0px 5px; line-height: 25px; font-weight: bold; }
#content label.normal { font-weight: normal; }
#content label i { font-weight: normal; padding: 0px 5px; }
#content form b { color: #f00; }
#content table { color: #000; line-height: 1.5em; border-top: 1px solid #eee; }
#content table th { font-weight: bold; text-align: left; border-bottom: 1px solid #eee; padding: 0px 10px 0px 3px; line-height: 30px; }
#content table td { font-weight: normal; text-align: left; border-bottom: 1px solid #eee; padding: 0px 3px; line-height: 30px; }
#content table td i { color: #ccc; font-style: normal; }

#content img { padding: 0px 0px 30px 30px; }

#content .left_col { float: left; margin-right: 30px; }
#content .right_col { float: left; }

#portfolios { margin: 20px 0px; }
#portfolios .item { position: relative; float: left; width: 360px; margin: 20px 0px 0px 0px; padding-top: 15px; border-top: 1px solid #eee; }
#portfolios .item.odd { margin-right: 35px; }
#portfolios .item small a { position: absolute; bottom: 0px; right: 0px; }
#portfolios .item a { font-weight: normal; }
#portfolios .item .heading { font-size: 20px; color: #000; line-height: 20px; margin: 0px 0px 10px 0px; font-weight: bold; }
#portfolios .item .image { float: left; width: 150px; margin-right: 15px; }
#content #portfolios .item .image img { padding: 0px; }
#portfolios .item .text { float: left; width: 180px; }
#portfolios .item .text .description { font-size: 11px; color: #999; line-height: 15px; }

#portfolio {}
#portfolio .image { float: right; width: 400px; }
#content #portfolio .image img { padding: 0px; }
#portfolio .description { float: left; width: 300px; }
#portfolio .description h2 { margin: 0px 0px 15px 0px; }
#portfolio .description h3 { margin: 0px 0px 15px 0px; font-size: 18px; }
#portfolio .description p { margin: 0px 0px 15px 0px; }
#portfolio .images { margin: 25px 0px; }
#portfolio .images .image { float: left; width: 150px; height: 150px; margin: 0px 1px 1px 0px; overflow: hidden; }
#content #portfolio .images .image img { padding: 0px; }

#nextprev { margin: 10px 0px 0px 0px; padding: 10px 0px 0px 0px; }

#footercontainer { position: fixed; bottom: 0px; left: 0px; right: 0px; font-size: 12px; padding: 0px; font-weight: normal; margin: 0px; background: #e5e6e7; height: 35px; z-index: 9; }
#footer { position: relative; color: #343536; font-weight: normal; width: 960px; margin: 0px auto; padding: 0px; text-align: right; line-height: 35px; }
#footer a { text-decoration: none; color: #343536; }
#footer #showhide { float: left; }

/* Dropdown control */
.selectBox-dropdown { font-family: "Open Sans", Arial, Helvetica, "sans-serif"; font-size: 15px; background: #f8f8f8; color: #000; padding: 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 2px 0px; min-width: 280px; position: relative; border: 1px solid #ccc; text-decoration: none; text-align: left; outline: none; vertical-align: middle; display: inline-block; cursor: default; }
.selectBox-dropdown:focus, .selectBox-dropdown:focus .selectBox-arrow { border-color: #ccc; color: #000; }
.selectBox-dropdown.selectBox-menuShowing { -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.selectBox-dropdown .selectBox-label { padding: 0px; font-weight: bold; color: #000; display: inline-block; white-space: nowrap; overflow: hidden; }
.selectBox-dropdown .selectBox-arrow { position: absolute; top: 0; right: 0; width: 23px; height: 100%; background: url(/images/selectBox-arrow.png) 50% center no-repeat; border-left: 1px solid #ccc; }

/* Dropdown menu */
.selectBox-dropdown-menu { position: absolute; z-index: 99999; max-height: 300px; min-height: 1em; border: 1px solid #ccc; /* should be the same border width as .selectBox-dropdown */ background: #f8f8f8; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); overflow: auto; }

/* Inline control */
.selectBox-inline { min-width: 150px; outline: none; border: 1px solid #ccc; background: #fff; display: inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: auto; }
.selectBox-inline:focus { border-color: #666; }

/* Options */
.selectBox-options, .selectBox-options LI, .selectBox-options LI A { text-align: left; list-style: none; display: block; cursor: default; padding: 0; margin: 0; font-weight: bold; }
.selectBox-options LI A { line-height: 1.5; padding: 0 .5em; white-space: nowrap; overflow: hidden; background: 6px center no-repeat; }
.selectBox-options LI.selectBox-hover A { background-color: #eee; }
.selectBox-options LI.selectBox-disabled A { color: #999; background-color: transparent; }
.selectBox-options LI.selectBox-selected A { background-color: #C8DEF4; }
.selectBox-options .selectBox-optgroup { color: #666; background: #eee; font-weight: bold; line-height: 1.5; padding: 0 .3em; white-space: nowrap; }

/* Disabled state */
.selectBox.selectBox-disabled { color: #999 !important; }
.selectBox-dropdown.selectBox-disabled .selectBox-arrow { opacity: .5; filter: alpha(opacity=50); border-color: #666; }
.selectBox-inline.selectBox-disabled { color: #999 !important; }
.selectBox-inline.selectBox-disabled .selectBox-options A { background-color: transparent !important; }
