/*------------  Global reset  ------------------------------------------------*/

body, h1, h2, h3, p {
margin:0;
padding:0;
}

/*------------  Body/HTML  ------------------------------------------------*/

html, body {
height: 100%;
text-align:left;
}
body {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size:11px;
line-height: 15px;
text-align:left;
color:#333333;
}
#body { /*------------  Deze Div dient als Body van de gehele pagina. Dit voorkomt dat de tekst gecentreerd word in het CCMS beheer gedeelte  ------------------------------------------------*/
text-align:center;
background: url(/grafix/bg_body.jpg) repeat-x;
height: 100%;
width:100%;
}

/*------------  Opmaak  ------------------------------------------------*/
td {
font-size:11px;
line-height: 15px;
}
h1 {
font-size:16px;
font-weight:bold;
margin-bottom:6px;
color: #F67811;
}
.kop {
font-size:16px;
font-weight:bold;
margin-bottom:6px;
color: #F67811;
}
.kopzwart {
font-size:13px;
font-weight:bold;
color:#333333;
margin-bottom:6px;
}
h2 {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
a:link, a:active, a:visited {
color: #F67811;
text-decoration: none;
}
a:hover {
color: #F67811;
text-decoration: underline;
}
li {
list-style-image: url(/grafix/bullet.gif);
margin-left: 16px;
}
.oranje {
font-weight:bold;
}
ul.listhome  {
margin:0;
padding:0;
}
ul.listhome li {
background: url(/grafix/bullet_home.gif) left center no-repeat;
height:24px;
padding-left:24px;
line-height:24px;
}
/*------------  Clearfix  ------------------------------------------------*/

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#push {
height:120px;
}
/*------------  Container  ------------------------------------------------*/

#container {
width:922px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
text-align:left;
/*Navigatie fix: position: relative;*/
background: url(/grafix/bg_container.png) repeat-y;
}

/*------------  Header  ------------------------------------------------*/

#header {
background:url(/grafix/bg_top.jpg) no-repeat;
height:124px;
}

/*------------  Columns  ------------------------------------------------*/

#content_wrap {
width: 677px;
margin-right:15px;
background:url(/grafix/bg_main.jpg) no-repeat;
float: right;
min-height: 400px;
height: auto !important;
height: 300px;
display:inline;
}
#content p {
padding-bottom:10px;
}
#content {
padding:5px;
}

/*-------------------- Kruimelspoor ----------------------------------------*/

#kruimelspoor {
height:28px;
line-height:28px;
margin-left:5px;
padding-left:20px;
background:url(/grafix/icon_kruimelhuis.png) no-repeat;
}
#kruimelspoor a:link, #kruimelspoor a:active, #kruimelspoor a:visited  {
color:#333333;
font-weight:bold;
text-decoration:underline;
}
#kruimelspoor a:hover {
text-decoration:none;
}

/*------------  Left Column  ------------------------------------------------*/

#left{
width: 200px;
padding:5px;
margin-left:20px;
display:inline;
float: left;
}
#left ul, li {
list-style:none;
padding:0;
margin:0;
}
#left  li {
margin-bottom:3px;
}
#left li a:link, #left li a:active, #left li a:visited {
background:url(/grafix/subnavi_knop.jpg) no-repeat;
display:block;
width:195px;
height:36px;
line-height:36px;
text-decoration:none;
color:#FFF;
padding-left:3px;
font-weight:bold;
}
#left li a:hover {
background:url(/grafix/subnavi_knop_hover.jpg) no-repeat;
}

/*------------  Navigatie  ------------------------------------------------*/

#siteNavigation {
height:34px;
background:url(/grafix/bg_navi.jpg) repeat-x;
padding-left:10px;
text-align:left;
}
/*#siteNavigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#siteNavigation li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}*/

ul#hoofdmenu {
float:left;
position:relative;
height:34px;
width:800px;
margin:0;
padding-left:8px;
list-style: none;
z-index: 100;
}
ul#hoofdmenu li {
width:164px;
border-left:1px solid #67584F;
position:relative;
float:left;
list-style:none;
text-align:center;
}
ul#hoofdmenu li a {
font-weight:bold;
font-size:12px;
color:#FFF;
display:block;
line-height:34px;
height:34px;
text-decoration:none;
}
ul#hoofdmenu li a:hover {
background:url(/grafix/navi_hover.jpg) repeat-x;
}

/*------------  Footer  ------------------------------------------------------------*/

#footer {
height: 106px;
width:922px;
text-align:right;
margin: 0 auto;
background: url(/grafix/bg_footer.jpg) no-repeat;
position: relative;
}
#footer a:link, #footer a:active, #footer a:visited {
color:#FFF;
}
#footer a:hover {
color:#FF9D42;
}
#footer_bg {
height: 106px;
margin-top:-105px;
background: url(/grafix/bg_footer_body.jpg) repeat-x;
}
#placeholder {
padding-top:35px;
padding-right:6px;
}

/*-------------------- ContactForm ----------------------------------------*/

.form {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 11px;
}
.knop {
background: url(/grafix/submit.jpg) no-repeat;
width: 80px;
height: 25px;
cursor: pointer;
border: 0;
}
.knop:hover {
background: url(/grafix/submit_hover.jpg) no-repeat;
}
.input {
border: 1px solid #CECBBD;
background: #F8F8F8;
width: 200px;
}
.field {
border: 1px solid #CECBBD;
background: #F8F8F8;
}

/*-------------------- Sitemap ----------------------------------------*/

.sitemap {
padding:0;
margin-bottom: 10px;
line-height: 20px
}
.sitemapmain {
font-weight: bold;
color:#1B2D5F;
text-decoration: none;
}
.sitemap li {
background: url(/grafix/bullet_li.gif) no-repeat;
list-style: none;
padding-left: 20px;
}
.sitemap li a:link, .sitemap li a:active, .sitemap li a:visited {
text-decoration:underline;
color:#545454;
}
.sitemap li a:hover {
color:#F67811;
}
.sitemap li li li {
background: url(/grafix/bullet_lili.gif) no-repeat;
list-style: none;
padding-left: 20px;
}

/*-------------------- Productoverzicht ----------------------------------------*/
div#products{
padding-bottom:110px\9;
float:left;
}
.product {
float: left;
height: 248px;
overflow: hidden;
margin:0 0 20px 20px;
display:inline;
width: 193px;
}
.product_name {
height: 24px;
line-height: 24px;
padding-left:4px;
background: url(/grafix/bg_productgroep_top.jpg) no-repeat;
}
.product_name a:link, .product_name a:active, .product_name a:visited {
color: #ffffff;
font-style: normal;
text-decoration: none;
font-weight: bold;
}
.product_name a:hover {
color:#E06400;
}
.product_img {
height:186px;
background: url(/grafix/bg_productgroep_middle.jpg);
text-align:center;
}
.product_link {
height:38px;
background: url(/grafix/bg_productgroep_bottom.jpg);
}
.product_link span {
visibility:hidden;
}
.product_link a:link, .product_link a:active, .product_link a:visited {
background: url(/grafix/button_detail.jpg) repeat-x;
width:74px;
height:31px;
line-height:31px;
display:block;
float:right;
margin-right:4px;
}
.product_link a:hover {
background: url(/grafix/button_detail_hover.jpg) repeat-x;
}
.clear {
clear:both;
}


/*-------------------- Productdetail ----------------------------------------*/

#productdetail_img img {
border:1px solid #EFEFEF;
width:336pxpx;
float:left;
margin-left:10px;
}
#productdetail_right {
float:right;
width:300px;
margin-right:10px;
display:inline;
}
#productdetail_main {
background: url(/grafix/bg_productdetail_main.jpg) repeat-y;
padding:5px;
min-height:200px;
margin-bottom:8px;
border:1px solid #EFEFEF;
}

/*-------------------- Productdetail Formulier ----------------------------------------*/
.productdetail_contact p {
margin:5px;
padding: 0;
}
.productdetail_contact form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
font-size:11px;
margin: 0;
padding: 0;
width: 100%;
}
.productdetail_contact form fieldset {
border: 0;
margin: 0;
}
.productdetail_contact form fieldset legend {
visibility:hidden;
margin:0;
padding:0;
}
.productdetail_contact form label {
display: block;  /* block float the labels to left column, set a width */
float: left;
width: 95px;
padding: 0;
text-align: left;
}
.form_input {
background: url(/grafix/bg_productdetail_input.jpg);
height:20px;
}
.form_input_select {
background: url(/grafix/bg_productdetail_input.jpg);
height:20px;
}
select {
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size:11px;
width: 120px;
line-height:20px;
background-color: #f5f5f5;
border: solid 1px #000;
}
.form_input_pp {
background: url(/grafix/bg_productdetail_input.jpg);
height:20px;
margin:0 0 5px 0; /* set margin on left of form elements rather than right oflabel aligns textarea better in IE */
border:1px solid #999284;
}
.form_input, .productdetail_contact form textarea {
width:175px;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
margin:0 0 5px 0; /* set margin on left of form elements rather than right oflabel aligns textarea better in IE */
border:1px solid #999284;
}
.productdetail_contact a:link, .productdetail_contact a:visited, .productdetail_contact a:active {
color:#333;
font-weight:bold;
text-decoration:underline;
}
.productdetail_contact a:hover {
color:#F67811;
font-weight:bold;
text-decoration:underline;
}
.submit {
width:74px;
height:24px;
border:0;
background: url(/grafix/submit.jpg);
cursor:pointer;
float:right;
}
.submit:hover {
background: url(/grafix/submit_hover.jpg);
}
.productdetail_contact textarea {
overflow: auto;
background: url(/grafix/bg_productdetail_field.jpg);
border:1px solid #999284;
}

/*-------------------- Grafsteendetail  ----------------------------------------*/

#grafsteen_img {
width:647px;
height:625px;
}
#grafsteen_img img {
border:1px solid #FFF;
}
#grafsteen_details {
float:left;
width:290px;
border:1px solid #FFFFFF;
padding:5px;
margin-right:10px;
margin-top:10px;
min-height:200px;
background:url(/grafix/bg_productdetail_main.jpg);
}
#grafsteen_contact {
float:left;
width:340px;

margin-top:10px;

}

/*-------------------- Submenu ----------------------------------------*/
#submenu {
padding-bottom:1px;
}
#submenu ul {
margin: 0 0 4px 0;
padding:0;
list-style:none;
}
#submenu li {
margin-top:4px;
padding:0;
height:20px;
background:#fff;
line-height:20px;
}
#submenu li a:link, #submenu li a:active, #submenu li a:visited {
display:block;
height:20px;
text-decoration:none;
padding-left:4px;
border-bottom:1px solid #EAEAEC;
}
#submenu li a:hover {
color:#F67811;
}

/*-------------------- tabs ----------------------------------------*/

.ui-wrapper { border: 1px solid #50A029; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }
@import "flora.css";

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}

/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 2px;
font-weight: bold;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
float: left; /* fixes dir=ltr problem and other quirks IE */
padding: 0 2px;
}
.ui-tabs-nav a {
width:110px;
top: 0px;
height:27px;
padding-left: 6px;
background:url(/grafix/button_contactform_hover.jpg) no-repeat;
text-decoration: none;
white-space: nowrap; /* @ IE 6 */
outline: 0; /* @ Firefox, prevent dotted border after click */
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
color: #fff;
}
.ui-tabs-nav a:hover {
text-decoration:none;
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
width:110px;
z-index: 2;
margin-top: 0;
background:url(/grafix/button_contactform.jpg) no-repeat;
}
.ui-tabs-nav a span {
padding-right: 0;
height: 28px;
line-height: 28px;
}
.ui-tabs-nav .ui-tabs-selected a span {
height: 27px;
line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
color: #000;
}
.ui-tabs-panel {
border: 1px solid #FFF;
padding: 4px;
width: 300px;
font-size:11px;
background: url(/grafix/bg_productdetail_main.jpg);
}
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
display: inline-block;
}

a:link.afspreken, a:active.afspreken, a:visited.afspreken {
display:block;
width:91px;
height:31px;
cursor:pointer;
background: url(/grafix/button_afspreken.jpg) no-repeat;
text-indent:-2000em;
}
a:hover.afspreken {
background: url(/grafix/button_afspreken_hover.jpg) no-repeat;
}

a:link.aanvragen, a:active.aanvragen, a:visited.aanvragen {
display:block;
width:91px;
height:31px;
cursor:pointer;
text-indent:-2000em;
background: url(/grafix/button_aanvragen.jpg) no-repeat;
}
a:hover.aanvragen {
background: url(/grafix/button_aanvragen_hover.jpg) no-repeat;
}