/* -------------------------------------------
project:	24urenvandeblaarmeersen
------------------------------------------- */

/* Reset (a mix of Eric Meyer's & Yahoo's 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse:collapse;border-spacing:0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }
blockquote,
q { quotes: "" ""; }


/* GENERAL
------------------------------------------- */
html { overflow-y: scroll; }
html, body { width: 100%; height: 100%; }
body { text-align: center; /*oldskool center for IE*/ background: #000 url(../images/bgpattern.png) center 3px repeat; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 140%; color: #fff; margin: 0; padding: 0; }
a, a:visited { color: #cc0000; text-decoration: none; font-weight: bold; }
a:hover, a:active { color: #ff0000; border-bottom: 1px dotted #ff0000 }
a img, a:hover img {border: 0; border-bottom: 0;}
p { margin: 0 0 20px 0; color: #ccc; }
strong {font-weight: bold; }
em { font-style: italic; }
blockquote { font-family: Georgia, "Times New Roman", Times, serif; line-height: 160%; font-style: italic; margin: 0 0 10px 25px; padding: 0 0 0 20px; display: block; color: #666; }
form {color: #ccc;}
form input, form textarea, form select { font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #000; padding: 4px; border: 1px solid #333; }

/* HEADINGS
------------------------------------------- */
h1 {}
h2 { margin: 0 0 29px 0; padding: 0; color: #fff; font-weight: normal; font-size: 36px; line-height: 110%;  }
h3 { font-weight: bold; font-size: 14px; padding: 0; color:#fff; margin:0 0 5px 0; }
h4 { font-weight: bold; font-size: 12px; padding: 0; color:#fff; margin:0 0 0 0; }


/* LAYOUT
------------------------------------------- */

#page { text-align: center; /*oldskool center for IE*/ background: url(../images/photo-home.jpg) center 0 no-repeat; } /* photo home here */
.not-front #page { background: url(../images/photo-pages.jpg) center 3px no-repeat; } /* photo for pages here */

#header {text-align: center; /*oldskool center for IE*/}
/*#header {  background:url(../images/mainnav-back.png) center bottom no-repeat; }*/ /* semi-transparent background of main navigation bar here */
.front #header {  background:url(../images/mainnav-back-home.png) center bottom no-repeat; } /* semi-transparent background of main navigation bar here */
.not-front #header {  background:url(../images/mainnav-back-pages.png) center bottom no-repeat; } /* semi-transparent background of main navigation bar here */
#header .wrap { height: 557px; }
.not-front #header .wrap { height: 205px; }

#header #logo { padding: 22px 0 0 0; float: left; display: inline;}
#header a, 	#header img { display: block; border-bottom: 0;}

#header .language { float: left; display: inline; margin: 0 0 0 10px; }
#header .language li { float: left; display: inline; margin: 0 1px 0 0; height: 50px; text-transform: uppercase; font-size: 11px; }
#header .language li a, #header .language li a:visited { float: left; display: inline; color: #fff; font-weight: normal; line-height: 100%; padding: 34px 7px 5px 7px }
#header .language li a:hover, #header .language li a:active, #header .language li.active a { background: url(../images/white-40.png) left top repeat; color: #000; } /* transp png */

#header .funcnav { float: right; display: inline; padding: 33px 0 0 0; }
#header .funcnav li { float: left; display: inline; margin:0 0 0 18px; padding: 0 0 0 18px; border-left: 1px solid #fff; line-height: 110%; }
#header .funcnav li.first-child { margin-left:0; padding-left:0; border: 0 none; }
#header .funcnav li a, #header .funcnav li a:visited { float: left; display: inline;  font-weight: normal; color: #fff;  }
#header .funcnav li a:hover, #header .funcnav li a:active, #header .funcnav li.active a { color: #ff0000; }

#header h1 { position: absolute; left: 0; /*top: 148px;*/ top: 188px; width:300px; height: 130px; text-indent: -9999px; background:url(../images/slogan.png);}

#header .verlof_nl{ position: absolute; left: 0; /*top: 148px;*/ top: 358px; width:750px; height: 200px; text-indent: -9999px; background:url(../images/slogan_verlof_nl.png) no-repeat;}
#header .verlof_fr{ position: absolute; left: 0; /*top: 148px;*/ top: 358px; width:750px; height: 200px; text-indent: -9999px; background:url(../images/slogan_verlof_fr.png) no-repeat;}
#header .verlof_en{ position: absolute; left: 0; /*top: 148px;*/ top: 358px; width:750px; height: 200px; text-indent: -9999px; background:url(../images/slogan_verlof_en.png) no-repeat;}


/*#header h1 { position: absolute; left: 0; top: 188px; width:382px; height: 130px; font-size: 32px; color: #fff; font-weight: normal; }
#header h1 em { clear: both; background-color: #C00; float: left; display: inline; font-style: normal; padding: 4px 28px 4px 7px; margin: 0 0 5px 0; }*/
.not-front #header h1 { display: none; }

#header .mainnav { height: 105px; width: 960px; position: absolute; left:0; top: 452px; border-left: 1px solid #fff;}
.not-front #header .mainnav {top: 100px;}
#header .mainnav li { float: left; display: inline; width: 239px; border-right: 1px solid #fff; height: 105px; overflow: hidden; }
#header .mainnav li a, #header #mainnav li a:visited { float: left; display: inline; padding: 0 0 0 20px; height: 105px; width: 219px; line-height: 140%; font-weight: normal; color: #ccc; width: 239px\9; } /* every IE fucked up the box model for some reason, so here's a hack*/
	.fr #header .mainnav li a { padding: 0 0 0 15px; width: 224px; width: 244px\9; } /* every IE fucked up the box model for some reason, so here's a hack*/
#header .mainnav li a:hover, #header #mainnav li a:active,
#header .mainnav li.active a { background: url(../images/repeat-y.jpg) left top repeat-x; cursor: hand; cursor: pointer; } 
#header .mainnav li a h2 { width: 209px; font-size: 24px; margin: 0 0 5px 0; padding: 20px 0 0 0; text-transform: uppercase;  cursor: hand; cursor: pointer; }
.nl #header .mainnav li a h2 {  }
.en #header .mainnav li a h2 { }
.fr #header .mainnav li a h2 { width: 225px; font-size: 23x; letter-spacing: -1px; }
#header .mainnav li a h2 a, #header .mainnav li a:visited h2 a { float: none; display: block; width: auto; height: auto; padding: 0;  cursor: hand; cursor: pointer; }
#header .mainnav li a h2 a:hover, #header .mainnav li.active a h2 a { background-image: none; cursor: hand; cursor: pointer; }
#header .mainnav li a span { display: block; cursor: hand; cursor: pointer; line-height: 16px; }
	.fr #header .mainnav li a span { }

#middle { text-align: center; /*oldskool center for IE*/ }
#middle .wrap { padding: 25px 0 0 0; }
.not-front #middle .wrap { padding: 45px 0 0 0; }
#middle #content { float: left; display: inline; width: 720px;  min-height: 400px; height: auto !important; height: 400px; margin: 0 10px 0 0; background-image:url(../images/black-85.png); } /* transp png */
#middle #content-inner { padding: 15px 0 20px 20px; } /* transp png */

.column { width: 310px; margin: 0 15px 0 0; float: left; display: inline; }
#content-inner .column { width: 330px; margin: 0 23px 23px 0; float: left; display: inline; }

#middle #sidebar-right { float: left; display: inline; width: 230px; background-image :url(../images/black-85.png); } /* transp png */
.contact #middle #sidebar-right { min-height: 400px; height: auto !important; height: 400px; }
#middle #sidebar-inner { padding: 10px 10px 0 10px; } /* transp png */
.contact #middle #sidebar-inner { padding: 15px 20px 0 20px;}

#footer { clear: both; text-align: center; /*oldskool center for IE*/}
#footer .wrap { text-align: center; }
#footer p { position: relative; width: 960px; border-top: 1px solid #333; margin: 25px 0 0 0; padding: 20px 0 10px 0; font-size: 11px; color: #fff; }
#footer ul { display: block; padding: 0 0 20px 0; }
#footer ul li { display: inline; color: #ccc; font-size: 11px;}
#footer ul li a { font-weight: normal; color: #ccc; }
#footer ul li a:hover { border-bottom: 1px dotted #ccc; }


/* ELEMENTS
------------------------------------------- */
#content-inner img { border: 1px solid #333; padding: 1px; }
.openingsuren #content-inner img { border:0; padding:0; }
a.goto { float: left; display: inline; font-size: 14px; font-weight: bold; margin: 0 0 25px 0; padding: 0 0 0 8px; background: url(../images/icons-arrows.png) -10px 5px no-repeat; }
a.goto:hover { border-bottom: 0; background-position: 0 -20px; }
#sidebar-right a.goto { font-size: 12px; }
.intro { padding: 0 20px 0 0; }
.intro img { float: left; margin: 0 30px 30px 0; border: 1px solid #333; }
img.right { float: right; display: inline; margin: 5px 20px 25px 20px; border:1px solid #333333 }
.intro table { color: #ccc; }
.openingsuren-left { float: left; display: inline; width:100px; padding: 38px 0 0 0; }
.openingsuren-left p { margin: 0 0 6px 0; line-height: 16px; height: 16px; }
.openingsuren-right { float: left; display: inline; width:543px; }
.openingsuren-right img { display: block; margin: 0 0 10px 0; }
.openingsuren-right p { padding: 0 0 0 14px; }
ul.linklist { padding: 0 0 20px 0; position: relative; }
ul.linklist li { padding: 0 0 0 8px; background: url(../images/icons-arrows.png) -10px 4px no-repeat; color: #ccc;}
ul.linklist li a {  }
ul.linklist li:hover {  background-position: 0 -21px; border-bottom: 0; }
ul.linklist li:hover a { border-bottom: 0; }

.block-front { }
.block-front h2 { font-size: 21px; padding: 5px 13px 12px 13px; margin: 0; }
	.fr .block-front h2 { padding-left: 9px; padding-right: 9px; font-size: 20px;  }
.block-front a, .block-front a:visited {  position: relative; display: block; background: #333; border: 5px solid #333; height: 170px; height: 180px\9; } /* every IE fucked up the box model for some reason, so here's a hack*/
.block-front a:hover {  background: #CC0000; border: 5px solid #CC0000; }
.block-front img { display: block; position: absolute; left: 0px; top: 34px; }

.teaser { margin: 0 0 20px 0; }
.teaser a { display: block; padding: 0 0 0 79px; border: 4px solid #333; height: 72px; height: 80px\9; } /* every IE fucked up the box model for some reason, so here's a hack*/
.teaser a:hover { border: 4px solid #cc0000; }
.teaser h2 { margin:0; padding: 25px 0 0 0; line-height: 110%; font-size: 21px; }
.teaser-carparts { background: url(../images/icons-teasers.png) 17px -66px no-repeat; }
.teaser-carparts h2 { padding: 12px 0 0 0; }
.teaser-contact { background: url(../images/icons-teasers.png) 17px 23px no-repeat; }

#sidebar-right .teaser { margin: 0 0 14px 0; background-image: url(../images/icons-teasers.png); background-repeat: no-repeat; }
#sidebar-right .teaser a { padding: 0 0 0 79px; height: 60px; height: 68px\9; } /* every IE fucked up the box model for some reason, so here's a hack*/
	.fr #sidebar-right .teaser a { padding: 0 0 0 75px; } 
	.fr #sidebar-right .teaser-carparts a { height: 78px; height: 96px\9; }
#sidebar-right .teaser h2 { font-size: 18px; line-height: 20px; }
#sidebar-right .teaser-carparts { background-position: 23px -145px; }
#sidebar-right .teaser-contact { background-position: 19px 18px; }
#sidebar-right .teaser-contact h2 { padding: 21px 0 0 0; }
#sidebar-right .teaser-more { background-position: 17px -229px; }
#sidebar-right .teaser-more a { height: auto; padding: 0 0 0 42px; }
#sidebar-right .teaser-more h2 { font-size: 16px; padding: 10px 0; }

.rule { clear: both; border-top: 1px solid #333; padding-bottom: 24px; width: 680px; height:1px; }

.gallery { overflow: hidden; width: 700px; }
.gallery2 { overflow: hidden; width: 700px; }
#sidebar-right .gallery { width:210px; }
.gallery li { float: left; display: inline; width: 210px; position: relative; margin: 0 23px 23px 0; }
.gallery2 li { float: left; display: inline; position: relative; margin: 0 23px 23px 0; margin-right: 20px\9; }
.gallery2 li.intro { width: 412px; margin: 0; margin-right:0px; margin-right:0px\9; }
.gallery2 li.intro p { margin-left: 0; padding: 0; }
.gallery2 li img { float: left; display: inline; }
.gallery2 li p { margin-left: 267px; }
.gallery li a { position: relative; float: left; display: inline; width: 208px; height: 170px; overflow: hidden; border: 1px solid #333; }
.gallery li a:hover { border: 1px solid #cc0000; }
.gallery li h3 { position: absolute; bottom: 0px; left: 0px; background: #333; margin: 0; color: #fff; font-weight: bold; font-size: 11px; padding: 10px 8px 9px 8px; width: 192px; width: 210\9px } /* every IE fucked up the box model for some reason, so here's a hack*/
#content-inner .gallery li img { border: 0; padding: 0;}
.gallery li a:hover h3 { background: #cc0000; }
.gallery li .arrow { display: block; background-image: url(../images/icons-gallery.png); background-position: left -50px; width: 44px; height: 44px; position: absolute; top:0; left:165px; }
.gallery li a:hover .arrow { background-position: left top; }
.sold { position: absolute; right: 358px; top:2px; z-index: 10; float: left; display: inline; height: 44px;padding: 0 10px 0 44px; background: url(../images/sold.png) left top no-repeat; color: #fff; line-height: 44px; font-size: 14px; font-weight: bold; }
.gallery li .sold { float: right; position: absolute; height: 44px; position: absolute; top:0; right:0; margin: 0;  }

#sidebar-right .gallery li { margin: 0 0 20px 0; }

.info { float: right; width: 310px; margin: 0 20px 0 0; position: relative; }

a.infobutton { background: url(../images/repeat-y.jpg) left -120px repeat-y; color: #fff; font-size: 12px; font-weight: bold; padding: 4px 10px; float: left; border: 1px solid #B00000; }
a.infobutton:hover { color: #fff; border: 1px solid #B00000; cursor: hand; cursor: pointer; background: url(../images/repeat-y.jpg) left -150px repeat-y; border: 1px solid #990000; }

.navigation { clear: both; margin: 0 20px 0 0; border-top: 1px solid #333; padding: 15px 0 25px 0; text-align: center; }
.navigation a { color: #fff; }
.navigation a:hover { color: #fff; border-bottom: 1px dotted #fff; }
.nav_left { float: left; font-weight: normal; }
.nav_right { float: right; font-weight: normal }

.required { font-weight: normal; color: #cc0000; }
.form-contact .left { float: left; display: inline; width: 330px; margin: 0 35px 0 0;}
.form-contact .right { float: left; display: inline; width: 330px; margin: 0;}
.form-contact .form-row { height: 25px; margin: 0 0 13px 0; clear: both; overflow: hidden; }
.form-contact #textarea-vraag { height: auto; }
.form-contact label { float: left; display: inline; width: 100px; font-weight: bold;  }
.form-contact .right label { width: 95px; }
.form-contact input, .form-contact textarea, .form-contact select { float: left; display: inline; width: 220px; height: 24px; padding: 2px; background: #fff;  }
.form-contact .right input, .form-contact .right textarea, .form-contact .right select { width: 210px;  }
.form-contact textarea { height: 130px; margin: 0; }
.form-contact .right .form-submit { margin: 0 0 0 95px; width: auto; height: auto; background: url(../images/repeat-y.jpg) left -120px repeat-y; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 10px 3px 10px; border: 1px solid #B00000; cursor: hand; cursor: pointer;  }
.form-contact .right .form-submit:hover { color: #fff; border: 1px solid #B00000; background: url(../images/repeat-y.jpg) left -150px repeat-y; border: 1px solid #990000; }
.form-contact .description { padding: 10px 0 0 95px; }

#logoesign { width:100px; height:30px; position: absolute; left: 860px; top: 16px; background:url(../images/logoesign.png) left -30px no-repeat; }
a:hover#logoesign, a:active#logoesign  { background:url(../images/logoesign.png) left top no-repeat; border-bottom: 0; }


/* HELPERS
------------------------------------------- */
.wrap { width: 960px; position: relative; margin: 0 auto; text-align: left; /*fix textflow after the IE center on body tag*/ }
.nomargin, #middle .nomargin { margin: 0; }


/* Browser Fixes
-------------------------------------------------------------- */
.clearfloat { clear: both; }