/*-----------------------------------------------------------------------------
Website: www.helicat.be
Auteur: Webatvantage.be
Laatst gewijzigd: 10-06-2009
-----------------------------------------------------------------------------*/

/*------------------------------- START HTML / BODY -------------------------------*/
html, body { height: 100%; background: #fff url(../Graphics/Body_bg.gif) repeat-x top left; }
body > #container { height: auto; min-height: 100%; }
body { text-align: center; overflow: -moz-scrollbars-vertical; color: #333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 16px; }
/*------------------------------- END HTML BODY -------------------------------*/

/*------------------------------- START HEADINGS -------------------------------*/
h1{ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000; margin: 0 0 17px 0; }
h1 span { color: #e12322; }
h1 a { text-decoration:none; color: #000 !important; }
h2{ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #000; margin: 0 0 10px 0; }
/*------------------------------- END HEADINGS -------------------------------*/

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

/*------------------------------- START CONTAINER -------------------------------*/
div#container { width: 960px; height: auto; margin: 0 auto; text-align: left; }
/*------------------------------- END CONTAINER -------------------------------*/

/*------------------------------- START HEADER -------------------------------*/
div#header { position: relative; height: 240px; }

/* Logo */
div#header a#logo { position: absolute; display: block; width: 205px; height: 65px; bottom: 65px; left: 10px; background: url(../Graphics/Logo.png) no-repeat top left; text-indent: -9999px; }

/* Taalkeuze */
div#header ul#taalkeuze { position: absolute; top: 0px; right: 10px; width: auto; height: 30px; line-height: 30px; }
div#header ul#taalkeuze li { display: inline; }
div#header ul#taalkeuze li a { float: left; display: block; width: 45px; height: 30px; line-height: 30px; margin: 0 0 0 5px; color: #666; text-decoration: none; text-align: center; }
div#header ul#taalkeuze li a:hover { text-decoration: underline; color: #e12322; }
div#header ul#taalkeuze li a:hover.active { text-decoration: none; color: #666; }
div#header ul#taalkeuze li a.active { background: url(../Graphics/Taalkeuze_active.gif) no-repeat top left; font-weight: bold; }

/* Mainnav */
div#header ul#mainnav { position: absolute; top: 27px; left: 0; width: auto; height: 61px; }
div#header ul#mainnav li { display: inline; }
div#header ul#mainnav li.divider { float: left; display: block; width: 2px; height: 61px; background: url(../Graphics/Mainnav_divider.gif) no-repeat bottom left; }
div#header ul#mainnav li a { float: left; display: block; width: auto; height: 41px; padding: 20px 20px 0 20px; font-size: 13px; color: #000; text-decoration: none; font-weight: bold; }
div#header ul#mainnav li a span { display: block; font-size: 11px; font-weight: normal; color: #555; }
div#header ul#mainnav li a:hover { color: #e12322; }
div#header ul#mainnav li a.active { background: url(../Graphics/Mainnav_hover.gif) repeat-x top left; }
/*------------------------------- END HEADER -------------------------------*/

/*------------------------------- START CONTENT -------------------------------*/
div#content { padding-bottom: 139px; }
#content ul { margin: 10px 0 10px 15px; list-style-type: circle; }
#content ol { margin: 10px 0 10px 0; }
/*------------------------------- END CONTENT -------------------------------*/

/*------------------------------- START HOMEPAGE -------------------------------*/

/* Tabs */
div#tabcontainer { width: 960px; height: auto; max-height: 242px; }
div#tabcontainer div#tab1 { float: left; width: 310px; min-height: 242px; height: auto; margin: -40px 0 0 -5px; background: url(../Graphics/Home_tab_bg.gif) no-repeat; }
div#tabcontainer div#tab2 { float: left; width: 310px; min-height: 242px; height: auto; margin: -40px 0 0 20px; background: url(../Graphics/Home_tab_bg.gif) no-repeat; }
div#tabcontainer div#tab3 { float: right; width: 310px; min-height: 242px; height: auto; margin: -40px -5px 0 0; background: url(../Graphics/Home_tab_bg.gif) no-repeat; }

div#tab1 a.foto, div#tab2 a.foto, div#tab3 a.foto { display: block; width: 280px; height: 60px; margin: 10px auto 15px auto; }
div#tab1 h1, div#tab2 h1, div#tab3 h1 { margin-left: 15px; }
div#tab1 p, div#tab2 p, div#tab3 p { margin: 0 0 10px 0; padding: 0 15px; line-height: 18px; }

div#tabcontainer div#tab1 a.button, div#tabcontainer div#tab2 a.button, div#tabcontainer div#tab3 a.button { margin-left: 15px; }

/* Nieuws */
div#nieuws_home { clear: both; float: none; width: 940px; height: 160px; margin: 0 0 30px 0; padding: 10px; background: url(../Graphics/Nieuws_home_bg.gif) no-repeat top left; overflow: hidden; }

div#nieuws_home div.nieuws_item { float: left; width: 280px; margin: 0 50px 0 0; }
div#nieuws_home div.nieuws_item h2  { margin: 0 0 10px 0; font-size: 12px; font-weight: bold; }
div#nieuws_home div.nieuws_item h2 a { color: #000; }
div#nieuws_home div.nieuws_item h2 a:hover { color: #e12322; }
div#nieuws_home div.nieuws_item a { color: #e12322; }
div#nieuws_home div.nieuws_item a img { float: left; margin: 0 10px 10px 0; padding: 2px; border: 1px solid #ccc; }
div#nieuws_home div.nieuws_item a:hover img { border: 1px solid #e12322; }
div#nieuws_home div.last { margin-right: 0; }
/*------------------------------- END HOMEPAGE -------------------------------*/

/*------------------------------- START MAIN -------------------------------*/
div#main { width: 945px; min-height: 242px; height: auto !important; /* IE6 */ margin: -40px 0 0 -5px; padding: 10px; background: transparent url(../Graphics/Main_bg.gif) no-repeat top left; }
div#main h1 { margin-left: 5px; }

div#main div.tekstblok { padding: 0 5px; }
div.tekstblok table { float: left;background:red; }

div#main div#fotobox { float: right; position: relative; width: 310px; height: 260px; margin: -18px -5px 0 20px; background: url(../Graphics/Fotobox_bg.png) no-repeat; }
div#main div#fotobox img { position: absolute; left: 15px; top: 28px; }

/* Breadcrumbs */
div#main div#breadcrumbs { position: relative; width: 940px; height: 30px; margin: 0px 5px 15px 5px; background: url(../Graphics/Breadcrumbs_bg.gif) no-repeat; z-index: 20 }
div#main div#breadcrumbs p { height: 30px; line-height: 30px; padding: 0 10px; }
div#main div#breadcrumbs p a#home_icon { display: inline-block; width: 11px; height: 30px; margin: 0 5px; background: url(../Graphics/Home_icon.png) no-repeat top left; text-indent: -9999px; }
div#main div#breadcrumbs p a { color: #555; }
div#main div#breadcrumbs p a:hover { color: #e12322; }
div#main div#breadcrumbs a:hover#home_icon { background-position: bottom left; }

/* Subnav */
div#main div#subnav { margin: 0 0 20px 0; padding: 0 5px; overflow: hidden; }
div#main div#subnav a { float: left; display: block; height: 31px; margin-right: 6px; padding-right: 20px; background: transparent url(../Buttons/Subnav_a.gif) no-repeat scroll top right; font-size: 11px; font-weight: bold; color: #555; text-decoration: none; }
div#main div#subnav a:hover { background-position: bottom right; }
div#main div#subnav a:hover span { background-position: bottom left; color: #fff; text-align: center; }
div#main div#subnav a span { display: block; padding: 8px 0 7px 20px; line-height: 16px; background: transparent url(../Buttons/Subnav_span.gif) no-repeat; }

div#main div#subnav a.active { background-position: bottom right; color: #fff; }
div#main div#subnav a.active span { background-position: bottom left; color: #fff; }

/* Disclaimer */
div#disclaimer { margin: 0 0 30px 5px; }
/*------------------------------- END MAIN -------------------------------*/

/*------------------------------- START PRODUCTEN -------------------------------*/
div#producten, div#over_helicat, div#links { overflow: hidden; margin: 0 0 30px 5px; }

/* Productnav */
div#producten ul#productnav,
ul#sidenav { float: left; width: 180px; list-style: none; margin: 0 20px 0 0; }
div#producten ul#productnav li a,
ul#sidenav li a { display: block; width: 170px; height: 30px; line-height: 30px; padding: 0 0 0 10px; color: #333; text-decoration: none; }
div#producten ul#productnav li a:hover,
ul#sidenav li a:hover { font-weight: bold; }
div#producten ul#productnav li a.active,
ul#sidenav li a.active { background: url(../Graphics/Productnav_bg.png) no-repeat top left; color: #fff; }
div#producten ul#productnav li a:hover.active
ul#sidenav li a:hover.active { font-weight: normal; }

/* Product overzicht */
div#product_overzicht, div.intro, #linkcontainer { float: left; width: 740px; overflow: hidden; }
div#product_overzicht div#product_overzicht_intro { margin: 0 0 20px 0; overflow: hidden; }
div#product_overzicht div#product_overzicht_intro div.fader { float: left; width: 300px; height: 200px; margin: 0 20px 20px 0; overflow: hidden; border: 2px solid #eee; }

div#product_overzicht div.product { float: left; position: relative; width: 178px; height: 190px; margin: 0 12px 12px 0; padding: 0px; overflow: hidden; }
div#product_overzicht div.last { margin-right: 0; }
div#product_overzicht div.product p { width: 190px; position: absolute; bottom: 0; left: 0; min-height: 30px; height: auto !important; line-height: 30px; }
div#product_overzicht div.product p a { display: block; width: 190px; height: 30px; line-height: 30px; background: #333; color: #fff; font-weight: bold; text-align: center; }
div#product_overzicht div.product p a:hover { background: #e12322; }

/* Product detail */
div#product_detail div#product_detail_foto { float: left; width: 250px; height: 167px; margin: 0 20px 10px 0; border: 2px solid #ddd; overflow: hidden; }
div#product_detail div#product_detail_description { float: left; width: 665px; }
/*------------------------------- END PRODUCTEN -------------------------------*/

/*------------------------------- START CONTACT -------------------------------*/

/* Contactform */
form#contactform { float: left; width: 300px; margin: 0 0 30px 0; padding: 0 15px 0 0; }

form#contactform p { margin: 0 0 10px 5px; }

form#contactform p#validation { font-weight: bold; font-style: italic; } 
form#contactform label,
form#contactform .input,
form#contactform .inputred,
form#contactform .textarea,
form#contactform .textareared { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #333; }

form#contactform label { display: block; margin: 0 0 4px 0; height: 18px; line-height: 18px; }

form#contactform .input,
form#contactform .inputred { display: block; width: 100%; height: auto; padding: 5px; background: #fff; border: 1px dotted #ccc; }
form#contactform .input:focus { border: 1px dotted #666; }
form#contactform .inputred { border: 1px solid #c00; }

form#contactform .textarea,
form#contactform .textareared { width: 100%; height: 100px; padding: 4px; overflow: auto; border: 1px dotted #ccc; } 
form#contactform .textareared { border: 1px solid #c00; }

form#contactform .submit { display: block; width: 120px; height: 32px; background: url(../Buttons/Versturen.gif) no-repeat top left; border: none; cursor: pointer; text-align: center; color: #555; font-weight: bold; font-size: 11px; }
form#contactform .submit:hover { background-position: bottom left; color: #f6f6f6; }

/* Tweedehands aanvraag */
div#tweedehands_aanvraag { width: 98%; margin: 0 0 10px 5px; background: #fff; padding: 5px; border: 1px dotted #ddd; }

/* Gegevens */
div#gegevens { float: left; width: 600px; margin: 0 0 30px 30px; }
div#gegevens div#map { width: 600px; height: 158px; }
div#gegevens div.tekstblok { margin: 10px 0; }

/*------------------------------- END CONTACT -------------------------------*/

/*------------------------------- START NIEUWS -------------------------------*/
div.nieuws_box, div.product_item { margin: 0 0 10px 5px; padding: 10px; border: 1px solid #ddd; overflow: hidden; }
div:hover.nieuws_box, div:hover.product_item { border: 1px solid #ccc; }
div.nieuws_box img, div.product_item img { float: left; margin: 0 15px 0px 0; }
div.product_item { margin-left:0; }
/*------------------------------- END NIEUWS -------------------------------*/

/*------------------------------- START VACATURES -------------------------------*/
div#vacatures {	margin: 0 0 30px 5px; }
div#vacatures p { margin: 0 0 10px 0; padding: 10px; }
div#vacatures .title_arrow { display: block;  height: 18px; line-height: 18px; padding: 0 0 0 12px; background: url(../Graphics/Arrow.gif) no-repeat center left; font-weight: bold; }
div#vacatures div#interesse { margin: 20px 0; padding: 10px; background: #eee url(../Graphics/Mail.png) no-repeat 860px 4px; border: 1px solid #ddd; }
div#vacatures div#interesse p { margin: 0; }
/*------------------------------- END VACATURES -------------------------------*/

/*------------------------------- START TWEEDEHANDS -------------------------------*/
div#tweedehands { margin: 0 0 30px 5px; }
/*------------------------------- END TWEEDEHANDS -------------------------------*/

/*------------------------------- START STYLED TABLED -------------------------------*/
table.styled_table { margin: 0 0 10px 0; background: #fff; border-collapse: collapse; }
table.styled_table thead tr th { font-size: 13px; font-weight: bold; background: #333; color: #fff; padding: 5px; }

table.styled_table tbody tr td { padding: 3px; }
table.styled_table tbody tr.titel td { font-style: italic; }

table.styled_table tbody tr.even { background: #eee; }
table.styled_table td, table.styled_table th { border: 1px solid #ddd; }

table.styled_table tbody tr td.price { text-align: right; }
table.styled_table tbody tr td.attachment { background: url(../Graphics/Attachment.png) no-repeat 5px 3px; padding: 3px 3px 3px 25px; }
/*------------------------------- END STYLED TABLE -------------------------------*/

/*------------------------------- START SITEMAP -------------------------------*/
div#sitemap { margin: 0 0 30px 5px; overflow: hidden; }
div.sitemap_column { float: left; width: 200px; margin: 0 10px 0 0; padding: 0 10px 0 0;  }
div#sitemap ul li ul li a { color: #666; }
div#sitemap ul li ul li a:hover { color: #333; }
/*------------------------------- END SITEMAP -------------------------------*/

/*------------------------------- START FOOTER -------------------------------*/
div#footer { position: relative; height: 139px; margin-top: -139px; background: url(../Graphics/Footer_bg.gif) repeat-x top left; clear: both; }
div#footer div#inner_footer { width: 960px; height: 139px; margin: 0 auto; text-align: left; }
div#footer div#inner_footer div.column { float: left; width: 280px; height: 123px; margin: 0 30px 0 0; padding: 16px 10px 0 10px;  }
div#footer div#inner_footer div.column h1 { margin: 0 0 20px 0; font-size: 16px; color: #fefefe; }
div#footer div#inner_footer div.column p { color: #ccc; }
div#footer div#inner_footer div.column p a { color: #ccc; text-decoration: underline; }

div#footer div#inner_footer div.last { margin: 0; }

div#footer div#inner_footer div.column p a.niveau1,
div#footer div#inner_footer div.column p a.niveau2,
div#footer div#inner_footer div.column p a.niveau3,
div#footer div#inner_footer div.column p a.niveau4 { float: left; text-decoration: none; padding: 2px; }
div#footer div#inner_footer div.column p a:hover.niveau1,
div#footer div#inner_footer div.column p a:hover.niveau2,
div#footer div#inner_footer div.column p a:hover.niveau3,
div#footer div#inner_footer div.column p a:hover.niveau4 { text-decoration: underline; }
div#footer div#inner_footer div.column p a.niveau1 { font-size: 16px; font-weight: bold; }
div#footer div#inner_footer div.column p a.niveau2 { font-size: 14px; font-weight: bold; }
div#footer div#inner_footer div.column p a.niveau3 { font-size: 12px; }
div#footer div#inner_footer div.column p a.niveau4 { font-size: 10px; }
/*------------------------------- END FOOTER -------------------------------*/

/*------------------------------- START BUTTONS -------------------------------*/
a.button { float: left; display: block; height: 31px; margin-right: 6px; padding-right: 18px; background: transparent url(../Buttons/Button_a.png) no-repeat scroll top right; font-size: 11px; font-weight: bold; color: #555; text-decoration: none; }
a:hover.button { background-position: bottom right; }
a:hover.button span { background-position: bottom left; color: #fff; }
a.button span { display: block; padding: 8px 0 7px 18px; line-height: 16px; background: transparent url(../Buttons/Button_span.png) no-repeat; }
/*------------------------------- END BUTTONS -------------------------------*/

/*------------------------------- START OTHER CLASSES -------------------------------*/
.left { float: left; }
.right { float: right; }
.alignleft { text-align: left; }
.aligncenter { text-align: center; }
.alignright { text-align: right; }
.underline { text-decoration: none; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.foto_links { float: left; margin: 15px 15px 15px 0; }
.foto_rechts { float: right; margin: 15px 0px 15px 15px; }
.warning { padding: 10px 10px 10px 30px; background: #fff url(../Graphics/Warning.gif) no-repeat 5px 11px; border: 1px solid #ddd; font-weight: bold; font-style: italic; }
.info { padding: 10px 10px 10px 30px; background: #fff url(../Graphics/Info.gif) no-repeat 5px 10px; border: 1px solid #ddd; font-weight: bold; font-style: italic; }
/*------------------------------- 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 CLEARFIX -------------------------------*/