/*======================================
      WELCOME TO THE STYLESHEET
--------------------------------------
     Copyright Mike Crittenden
      Author: Mike Crittenden
======================================*/

/**************************************/
/*              GLOBALS               */
/**************************************/

html { background-color: #848282; }
body { padding-top: 10px; margin: 0; background-color: #fff; color: #555; }

a, a:link { color: #555; }
a:hover { color: #555; text-decoration: none; }

.pull-right { float: right; }
.pull-left { float: left; }


#sb-container #sb-title-inner { font-weight: bold; }

#content a:visited, #secondary a:visited { color: #555; }
#footer .container a:visited { color: #fff; }

#main .box .bottom p, #main .contactbox .bottom p { bottom: 0; left: 0; margin: 0; }
#main .box .bottom p a, #main .contactbox .bottom p a { color: #f00; padding: 6px 0 9px 10px; display: block; font-weight: bold; }
#main .box img { border: 3px solid #ccc; margin: 0 0 10px 0; }
#main .box ul { margin: 0; list-style: none; }
#main .box ul li { margin: 0; border-bottom: 1px solid #ccc; }
#main .box ul li.last { border: none; }
#main .box ul li h3 {  }

/**************************************/
/*              HEADER                */
/**************************************/

#header { position: relative; height: 250px; background: #eee url(../img/header.jpg) top left no-repeat; padding-bottom: 50px; border: none; }
#header h1 { position: absolute; bottom: 14px; left: 10px; margin: 0; font-size: 2.2em; }
#header h1 a { color: #222; text-decoration: none; }
#header h2 { position: absolute; bottom: 13px; right: 10px; margin: 0; font-size: 1.8em; color: #333; }
#header h2 a { color: #333; text-decoration: none }
#header h2 em { font-style: normal; color: #f00; }
#header a.logo { position: absolute; bottom: 0; left: 0px; }
#header img.logo { position: absolute; bottom: 50px; left: 10px; }

/**************************************/
/*            BREADCRUMB              */
/**************************************/

#breadcrumb { }
#breadcrumb span { float: left; margin: 12px 0; }
#breadcrumb ul { margin: 12px 0; float: left; list-style: none; display: inline; }
#breadcrumb ul li { float: left; margin-left: 7px; padding-left: 12px; background: #fff url(../img/breadcrumb-list-item.gif) left 6px no-repeat; }
#breadcrumb ul li.first { background: none; margin-left: 0; padding-left: 6px; }
#breadcrumb ul li a { color: #f00; text-decoration: none; }
#breadcrumb ul li a:hover { text-decoration: underline; }

/**************************************/
/*               MAIN                 */
/**************************************/

#main { clear: both; }
#main h2 { font-weight: normal; color: #f00; margin: 0 0 15px 0; }
#main h2 a, #main h2 a:visited { color: #f00; text-decoration: none; }
#main h2 a:hover { text-decoration: underline; }
#main h3 { color: #555; }
#main h3 a, #main h3 a:visited { color: #555; }

/**************************************/
/*               MENU                 */
/**************************************/

#menu { float: left; width: 200px; background: transparent url(../img/menu-box-top.gif) top left no-repeat; margin: 0 20px 0 0; padding: 12px 0 0 0; }
#menu .content { background: transparent url(../img/menu-box-content.gif) top left repeat-y; }
#menu ul { margin: 0 0 40px 0; list-style: none; }
#menu ul li { margin: 0; border-top: 1px solid #ccc; }
#menu ul li.last { border-bottom: 1px solid #ccc; }
#menu ul li a { display: block; width: 170px; background: transparent url(../img/menu-list-item.gif) 12px 12px no-repeat; text-decoration: none; color: #555; padding: 5px 0 5px 30px; }
#menu ul li a:hover, #menu ul li.active a { color: #f00; background: #fefefe url(../img/menu-list-item-hover.gif) 12px 12px no-repeat;}
#menu ul li a sup { color: #f00; }
#menu .probouwen { clear: both; padding: 10px; background: transparent url(../img/menu-box-bottom.gif) bottom left no-repeat; }

/**************************************/
/*              CONTENT                */
/**************************************/

#content { float: left; width: 440px; }
#content.full { width: 730px; margin: 0; }

#content h2 { }
#content h3 { margin: 10px 0 5px 0; }

#content p.back { border-top: 3px solid #ccc; margin-top: 20px; padding-top: 10px; }
#content p.routeinfo { margin: 10px 0; }
#content #map_canvas { width: 710px; height: 500px; }
#content #directionsPanel { width: 710px; padding: 15px 0 0 0; }

#content table { }
#content table th { text-align: left; }

#content.full .box { background: transparent url(../img/content-box-full-top.gif) top left no-repeat; margin: 0 0 20px 0; padding-top: 11px;  }
#content.full .box .content { background: transparent url(../img/content-box-full-content.gif) top left repeat-y; padding: 3px 10px 0 10px; }
#content.full .box .bottom { margin-left: 0; width: 100%; background: transparent url(../img/content-box-full-bottom.gif) top left no-repeat; height: 12px; }

#content .box { background: transparent url(../img/content-box-top.gif) top left no-repeat; margin: 0 0 20px 0; padding-top: 11px; }
#content .box .content { background: transparent url(../img/content-box-content.gif) top left repeat-y; padding: 3px 10px 0 10px; }
#content .box .bottom { clear: both; margin-left: -10px; width: 440px; background: transparent url(../img/content-box-bottom.gif) bottom left no-repeat; height: 34px; }
#content .box .emptybottom { background: transparent url(../img/content-box-emptybottom.gif) bottom left no-repeat; height: 12px; }

#content ul.news { }
#content ul.news li { margin-bottom: 20px; padding-bottom: 20px; }

#content ul.categories { margin: 10px 0; }
#content ul.categories li { float: left; width: 230px; margin: 0 0 20px 10px; padding: 0; border: none; }
#content ul.categories li.first { margin-left: 0; }
#content ul.categories li h3 { margin: 0; }
#content ul.categories li h3 a { display: block; position: relative; height: 150px; border: 3px solid #ccc; padding: 0; text-decoration: none; }
#content ul.categories li h3 a span { background: transparent url(../img/bg-categories.png) repeat-y top left; color: #fff; position: absolute; bottom: 0; left: 0; padding: 7px 5px; margin: 0; width: 214px; cursor: pointer; }

#content ul.products { margin: 10px 0; }
#content ul.products li { margin: 0 0 20px 0; padding: 0; }
#content ul.products li h3 { margin: 0 0 10px 0; }
#content ul.products li img { float: left; margin: 0 10px 0 0; }

#content #pagination { margin: 20px 0 10px 0; }
#content #pagination li { float: left; margin: 0 8px 0 0; border: none; }
#content #pagination li a { color: #f00; float: left; padding: 0 2px; text-decoration: none; }
#content #pagination li.off { color: #666; padding: 0 2px; }
#content #pagination li.active { background: #f00; color: #fff; font-weight: bold; padding: 0 3px; }

#content ul.images { margin: 10px 0; overflow: hidden; padding: 0; }
#content ul.images li { float: left; width: 170px; margin: 0 0 15px 10px; padding: 0; border: none; }
#content ul.images li.first { margin-left: 0; }

#content ul.documents { margin: 10px 0; overflow: hidden; }
#content ul.documents li { border: none; }
#content ul.documents li a, #sidebar ul.documents li a { background: none; padding-left: 30px; line-height: 2em; margin: 0 0 8px 0; text-align: left; }
#content ul.documents li.doc, #sidebar ul.documents li.doc { background: transparent url(../img/icons/doc.png) 0 4px no-repeat; }
#content ul.documents li.pdf, #sidebar ul.documents li.pdf { background: transparent url(../img/icons/pdf.png) 0 4px no-repeat; }
#content ul.documents li.xls, #sidebar ul.documents li.xls { background: transparent url(../img/icons/xls.png) 0 4px no-repeat; }
#content ul.documents li.ppt, #sidebar ul.documents li.ppt { background: transparent url(http://houthal.nl/static/img/icons/ppt.png) 0 4px no-repeat; }
#content ul.documents li.zip, #sidebar ul.documents li.zip { background: transparent url(http://houthal.nl/static/img/icons/zip.png) 0 4px no-repeat; }

#content form { }
#content form p { margin: 15px 0; }
#content form fieldset { border: none; margin: 0; padding: 0; }
#content form legend { color: #7d7d7d; text-transform: uppercase; padding: 0; font-weight: bold; font-size: 1.2em; }
textarea, input[type='text'], input[type='password'], select { width: 300px; border: 1px solid #dedede; background: #fff; padding: 7px; margin-top: 3px; color: #7d7d7d; font-size: 1.1em; }
textarea { font-family: "Liberation Sans", Helvetica, Arial, sans-serif; width: 370px; height: 200px; }
textarea:hover, input[type='text']:hover, input[type='password']:hover, select:hover { border-color: #eee; }
textarea:focus, input[type='text']:focus, input[type='password']:focus, select:focus { border-color: #dedede; outline: 2px solid #fff; }
input, select { cursor: pointer; }
input[type='text'],input[type='password'] { cursor: text; }
input[type='image'] { padding: 0; }
.submit_button { border: 0; background-image: url(../img/submit-button.jpg); width: 108px; height: 37px; color: #555; font-size: 1em; font-weight: bold; }

/**************************************/
/*         SECONDARY CONTENT          */
/**************************************/

#secondary { float: left; width: 270px; margin-left: 20px; }

#secondary .contactbox { background: #f3f3f3 url(../img/secondary-contactbox-top.gif) top left no-repeat; margin: 0 0 20px 0; }
#secondary .contactbox .content { background: transparent url(../img/secondary-box-content.gif) top left repeat-y; padding: 3px 10px 0 10px; }
#secondary .contactbox .bottom { background: transparent url(../img/secondary-box-bottom.gif) bottom left no-repeat; height: 34px; }

#secondary .contactbox h2 { color: #555; margin: 0; padding: 15px 0 10px 10px; line-height: 1em; }

#secondary .box { background: #eaeaea url(../img/secondary-box-top.gif) top left no-repeat; margin: 0 0 20px 0; padding-top: 12px; }
#secondary .box .content { background: transparent url(../img/secondary-box-content.gif) top left repeat-y; padding: 3px 10px 0 10px; }
#secondary .box .bottom { background: transparent url(../img/secondary-box-bottom.gif) bottom left no-repeat; height: 34px; }

/**************************************/
/*               FOOTER               */
/**************************************/

#footer { margin-top: 30px; padding: 20px 0; color: #eee; background: #aaa url(../img/footer-bg.gif) top left repeat-x; }

#footer a:link { color: #fff; }
#footer a:visited { color: #ddd; }

#footer .menu { float: left; width: 540px; margin-right: 40px; }
#footer .menu h3 { margin-bottom: 20px; }
#footer .menu img { }
#footer ul { margin: 0; list-style: none; }
#footer ul li { float: left; margin: 0 30px 0 0; width: 150px; }
#footer ul li.last { margin: 0; }
#footer ul li ul li { float: none; padding: 5px 0; border-bottom: 1px solid #ccc; }
#footer ul li ul li a { text-decoration: none; }
#footer ul li ul li a:hover { text-decoration: underline; }

#footer .info { float: left; width: 370px; }
#footer .info img { float: right; }

#bottom { padding: 20px 0 10px 0; color: #ddd; background-color: #848282; }
#bottom a:link { color: #ddd; }
#bottom a:visited { color: #bbb; }
#bottom p { margin: 0; }
#bottom p.credits { float: right; }