/*-----------------------------------------------------------------------------
Website: Van Hoecke Automation nv
Auteur: Webatvantage.be
Laatst gewijzigd: 26-05-2009
-----------------------------------------------------------------------------*/

/*------------------------------- START RESET -------------------------------*/
* { margin: 0; padding: 0; } 
table { border-collapse: collapse; }
/*------------------------------- END RESET -------------------------------*/

/*------------------------------- START HTML / BODY -------------------------------*/
html, body { background: #eaf2f2 url(../Graphics/Header_bg.gif) repeat-x top left; }
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%; }
/*------------------------------- END HTML BODY -------------------------------*/

/*------------------------------- START BROWSER WARNING -------------------------------*/
div#browserWarning { background: #693; width: 100%; padding: 15px 0px 15px 0px; border-top: solid 6px #568637; border-bottom: solid 6px #568637; color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; text-align: center; }
div#browserWarning a { color: #fff; }
/*------------------------------- END BROWSER WARNING -------------------------------*/

/*------------------------------- START HEADINGS -------------------------------*/
h1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 16px; font-weight: bold; color: #b5191f; margin: 0 0 10 0; }
h2 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 14px; font-weight: bold; color: #b5191f; margin: 0 0 10px 0; }
h3 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 13px; font-weight: bold; color: #b666; margin: 0 0 10px 0; }
/*------------------------------- END HEADINGS -------------------------------*/

/*------------------------------- START LINKS -------------------------------*/
a:link, a:visited, a:hover, a:active { color: #b6191f; }
a:focus, a:active { outline: none; }
/*------------------------------- END LINKS -------------------------------*/

/*------------------------------- START WRAP -------------------------------*/
#wrap { width: 900px; margin: 0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; background: url(../Graphics/Tekening.png) no-repeat bottom left; }
/*------------------------------- END WRAP -------------------------------*/

/*------------------------------- START MAIN -------------------------------*/
#main { padding-bottom: 60px; }
/*------------------------------- END MAIN -------------------------------*/

/*------------------------------- START HEADER -------------------------------*/
div#header { position: relative; height: 155px; background: url(../Graphics/Header_gradient.gif) repeat-x bottom left; }

/* Logo */
div#header a#logo { position: absolute; top: 30px; left: 28px; display: block; width: 312px; height: 63px; }

/* Language */
div#header ul#language { position: absolute; top: 27px; right: 110px; width: auto; height: 17px; list-style: none; }
div#header ul#language li { display: inline; }
div#header ul#language li a { float: left; display: block; width: 22px; height: 17px; margin: 0 0 0 5px; text-indent: -9999px; }
div#header ul#language li a#lang_NL { background-image: url(../Buttons/Lang_NL.gif); }
div#header ul#language li a#lang_FR { background-image: url(../Buttons/Lang_FR.gif); }
div#header ul#language li a#lang_EN { background-image: url(../Buttons/Lang_EN.gif); }
div#header ul#language li a#lang_PL { background-image: url(../Buttons/Lang_PL.gif); }
div#header ul#language li :hover, div#header ul#language li a.active { background-position: bottom left; }

/* Certificaten */
div#header div#certificaten {  position: absolute; top: 0; right: 0; width: 86px; height: 118px; }

/* Standaardnav */
div#header ul#standaardnav { position: absolute; top: 60px; right: 110px; width: auto; height: 20px; list-style: none; }
div#header ul#standaardnav li { display: inline; }
div#header ul#standaardnav li a { float: left; display: block; width: auto; height: 20px; line-height: 20px; padding: 0 10px; color: #666; border-right: 1px solid #ddd; }
div#header ul#standaardnav li a:hover, div#header ul#standaardnav li a.active { color: #b6191f; }

/* Search */
div#header form#search { position: absolute; bottom: 8px; right: 0; }
div#header form#search fieldset { border: none; }
div#header form#search .input { width: 150px; padding: 4px 3px; background: #fff; border: none; color: #666; font-size: 11px; }
div#header form#search #submit { width: 22px; height: 22px; background: url(../Buttons/Search.gif) no-repeat top left; border: none; cursor: pointer; } 

/* Breadcrumbs */
div#breadcrumbs { position: absolute; bottom: 2px; left: 0; height: 36px; line-height: 36px; color: #fff; }
div#breadcrumbs a { color: #fff; }
/*------------------------------- END HEADER -------------------------------*/

/*------------------------------- START BANNER -------------------------------*/
div#banner { width: 900px; height: 142px; border-bottom: 2px solid #fff; position: relative; }

div#banner ul.kwicks { width: 868px; height: 175px; list-style: none; position: relative; margin: 0; padding: 0; }
div#banner ul.kwicks li { float: left; display: block; width: 288px; height: 175px; margin-right: 0; padding: 0; cursor: pointer; overflow: hidden; }

div#banner a#extranet { position: absolute; top: 0; right: 0; display: block; width: 36px; height: 175px; background: url(../Graphics/Extranet.png) no-repeat top left; text-indent: -9999px; }
/*------------------------------- END BANNER -------------------------------*/

/*------------------------------- START TEKSTBLOK -------------------------------*/
div.tekstblok { margin: 0 0 30px 0; line-height: 16px; }
div.tekstblok ul { margin: 10px 0 10px 15px; list-style-type:square; }
div.tekstblok ol { margin: 10px 0 10px 20px; }
div.tekstblok div.photo { float: right; width: 200px; height: 150px; border: 2px solid #cbd3d4; margin: 0 0 10px 10px; padding: 1px; }
/*------------------------------- END TEKSTBLOK -------------------------------*/

/*------------------------------- START SLOGAN -------------------------------*/
div#slogan { width: 900px; height: 40px; line-height: 40px; font-family: Arial, Helvetica, Verdana,sans-serif; font-size: 18px; color: #999; font-weight: bold; }
div#slogan p { text-align: center; }
/*------------------------------- END SLOGAN -------------------------------*/

/*------------------------------- START PRODUCTS -------------------------------*/
div#productcontainer { float: left; width: 550px; margin: 0 0 20px 0; }
div.photo2 { float: right; width: 200px; height: auto; margin: 50px 0 20px 20px; padding: 1px; }
div.photo2 img { margin-bottom: 10px; }
div.product { float: left; width: 650px; margin: 0 0 10px 0; padding: 10px; background: #f1f9f9;  border: 1px solid #cbd3d4; }
div.product a.title { font-weight: bold; }
div.product p {}
div.product_description ul { list-style-position: outside; }
div.downloads { margin: 20px 0 10px 0; padding: 10px; border-top: 1px solid #cbd3d4; border-bottom: 1px solid #cbd3d4; }
/*------------------------------- END PRODUCTS -------------------------------*/

/*------------------------------- START CONTACTFORM -------------------------------*/
#contactform {}
#contactform fieldset { background: #f1f9f9; border: 1px solid #cbd3d4; padding: 10px; }
#contactform p { margin: 3px 0; padding: 3px; }
#contactform p.info { margin: 3px; font-style: italic; border-bottom: 1px dotted #cbd3d4; }
#contactform p.error { margin: 3px; font-style: italic; font-weight: bold; color: #c00; border-bottom: 1px dotted #c00; }

#contactform label { display: inline-block; width: 100px; height: 18px; line-height: 18px; vertical-align: top	; }
#contactform .input { display: inline-block; width: 200px; height: 15px; padding: 5px 3px; background: #fff; border: 1px solid #cbd3d4; }
#contactform .inputred { display: inline-block; width: 200px; height: 15px; padding: 5px 3px; background: #fff; border: 1px solid #c00; }

#contactform .textarea { width: 296px; height: 140px; padding: 5px; border: 1px solid #cbd3d4; overflow: auto; }
#contactform .textareared { width: 296px; height: 140px; padding: 5px; border: 1px solid #c00; overflow: auto; }

#contactform .label,
#contactform .input,
#contactform .inputred,
#contactform .textarea,
#contactform .select { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  }

#contactform .select { padding: 3px; }
#contactform .submit { float: left; display: block; width: auto; height: 30px; margin: 0px 10px 10px 5px; padding: 0 5px; background: #333; border: none; cursor: pointer; color: #fff; } 
/*------------------------------- END CONTACTFORM -------------------------------*/

/*------------------------------- START GEGEVENS -------------------------------*/
div#gegevens { float: right; width: 538px;  padding: 2px; background: #f1f9f9; border: 1px solid #cbd3d4; overflow: hidden; }
div#gegevens p { padding: 10px; }
div#gegevens #route { display: none; }
/*------------------------------- END GEGEVENS -------------------------------*/

/*------------------------------- START TABS -------------------------------*/
ul.tabNavigation { width: auto; height: 30px; list-style: none; margin: 0 0 10px 0 !important; padding: 0 !important; border-top: 1px solid #cbd3d4; border-bottom: 1px solid #cbd3d4; border-right: 1px solid #cbd3d4; }
ul.tabNavigation li { display: inline; }
ul.tabNavigation li a { float: left; display: block; height: 30px; text-decoration: none; line-height: 30px; padding: 0 10px; color: #666; background: url(../Graphics/Tab_bg.gif) repeat-x top left; border-left: 1px solid #cbd3d4; border-bottom: 1px solid #cbd3d4; } 
ul.tabNavigation li a:hover { color: #b6191f; text-decoration: underline; }
ul.tabNavigation li a.selected { border-bottom: 1px solid #eaf2f2; background: none; }
ul.tabNavigation li a:focus { outline: 0; }
ul.tabNavigation li a.last { border-right: 1px solid #cbd3d4; }

div.tab { float: right; width: 540px; margin: 0 0 10px 0; padding: 5px; }

div.tab ul { list-style-position: inside; list-style-type:square; }

div.tabs > div h2 { margin-top: 0; }
div.tabs p { padding: 5px; }
/*------------------------------- END TABS -------------------------------*/

/*------------------------------- START STYLED LIST -------------------------------*/
ul.styled { list-style: none !important; margin: 10px 0; }
ul.styled li a { display: inline-block; padding: 5px 5px 5px 25px; background: url(../Graphics/Arrow.png) no-repeat center left; }
/*------------------------------- END STYLED LIST -------------------------------*/

/*------------------------------- START SIDENAV -------------------------------*/
ul#sidenav { float: left; width: 350px; height: auto; min-height: 320px; margin: 0; padding: 0; list-style: none; }
ul#sidenav li a { clear: both; display: block; width: 320px; min-height: 32px; height: auto; line-height: 32px; padding: 0 0 0 30px; background: url(../Graphics/Sidenav_blokje.gif) no-repeat center left; color: #666; text-decoration: none; overflow: hidden; font-weight: bold; }
ul#sidenav li a#sidenav_active { background-image: url(../Graphics/Sidenav_blokje_rood.gif); }

ul#sidenav li a.sub { width: 290px; padding: 0 0 0 60px; background: none; color: #666; border-bottom: 1px solid #eaf2f2; font-weight: normal; }
ul#sidenav li a:hover.sub { color: #333; text-decoration: underline; } 
ul#sidenav li a.sub_active { width: 290px; padding: 0 0 0 60px; background: url(../Graphics/Sidenav_arrow.gif) no-repeat 45px 14px; color: #333; border-bottom: 1px solid #eaf2f2; text-decoration: underline; font-weight: normal; }
/*------------------------------- END SIDENAV -------------------------------*/

/*------------------------------- START NIEUWS HOMEPAGE -------------------------------*/
ul#nieuws_homepage { list-style: none; margin: 10px 0 20px 0; padding: 0; }
ul#nieuws_homepage li a { display: inline-block; margin: 0 0 5px 0; padding: 5px 5px 5px 30px; min-height: 30px; text-decoration: none; background: url(../Graphics/Sidenav_blokje.gif) no-repeat center left; }
ul#nieuws_homepage li a:hover{ background: url(../Graphics/Sidenav_blokje_rood.gif) no-repeat center left; }
ul#nieuws_homepage li .datum { color: #666; text-decoration: none !important; }
ul#nieuws_homepage li .titel { font-weight: bold; text-decoration: underline; }
/*------------------------------- END NIEUWS HOMEPAGE -------------------------------*/

/*------------------------------- START SITEMAP -------------------------------*/
.sitemap_kolom { float: left; width: 250px; height: auto; margin: 0 20px 20px 0; }
/*------------------------------- END SITEMAP -------------------------------*/

/*------------------------------- START PARTNERS -------------------------------*/
div.partner { float: left; width: 545px; margin: 0 0 5px 0;}
div.partner p { float: left; } 
/*------------------------------- END PARTNERS -------------------------------*/

/*------------------------------- START FOOTER -------------------------------*/
div#footer { position: relative; margin-top: -60px; height: 60px; clear: both; background: #fff url(../Graphics/Footer_bg.gif) repeat-x top left; }
div#footer div#inner_footer { width: 900px; height: 40px; margin: 0 auto; padding: 10px 0; } 
div#footer div#inner_footer p { height: 40px; line-height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999; text-align: center; }
div#footer div#inner_footer p a { color: #999; text-decoration: underline; }
div#footer div#inner_footer p a:hover { color: #666; }
/*------------------------------- END FOOTER -------------------------------*/

/*------------------------------- START OTHER CLASSES -------------------------------*/
a.back { display: inline-block; margin: 5px 0; padding: 5px 5px 5px 25px; background: url(../Graphics/Arrow_back.gif) no-repeat center left; }
a.arrow { display: inline-block; margin: 5px 0; padding: 5px 5px 5px 25px; background: url(../Graphics/Arrow.png) no-repeat center left; }
a.flag { display: inline-block; height: 32px; line-height: 32px; margin: 5px 0; padding: 0 0 0 40px; background: url(../Graphics/Flag.png) no-repeat center left; }
div.boxright { float: right; margin-right: -5px; padding: 10px; background: #f1f9f9; border: 1px solid #cbd3d4; }
div.box { float: left; width: 522px; margin: 10px 0; padding: 10px; background: #f1f9f9; border: 1px solid #cbd3d4; }
a.button { clear: both; display: inline-block; width: 163px; height: 35px; line-height: 35px; background: url(../Buttons/Button.png) no-repeat top left; border: none; text-align: center; color: #666; text-decoration: none; }
a:hover.button { background-position: bottom left; }
/*------------------------------- END OTHER CLASSES -------------------------------*/

/*------------------------------- START CLEARFIX -------------------------------*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/*------------------------------- END CLEARFIX -------------------------------*/

a.link_logo { float: left; width: 198px; height: 78px; margin: 0 10px 10px 0; background: #fff; padding: 2px; border: 2px solid #d4ddde; }