/*-----------------------------------------------------------------------------
Website: motorenversnellingsbak.be
Auteur: Webatvantage.be
Laatst gewijzigd: 24-03-2010
-----------------------------------------------------------------------------*/

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

/* HEADINGS
----------------------------------------------------------------------------------*/
h1 { font-family: "Arial Rounded MT Bold", Arial, Verdana, Helvetica, sans-serif; font-size: 18px; color: #981212; margin: 0 0 15px 0; padding: 0 0 10px 0; border-bottom: 1px solid #ddd; }
h2 { font-family: "Arial Rounded MT Bold", Arial, Verdana, Helvetica, sans-serif; font-size: 18px; color: #333; margin: 0 0 15px 0; }

/* LINKS
----------------------------------------------------------------------------------*/
a:link, a:visited, a:active { color: #333; text-decoration: underline;}
a:hover { color: #981212; }

/* CONTAINER
----------------------------------------------------------------------------------*/
#container { width: 960px; height: auto; margin: 0 auto; }

/* HEADER
----------------------------------------------------------------------------------*/
#header { position: relative; width: 960px; height: 396px; }

/* Navigation */
ul#navigation { position: absolute; top: 0; left: 0; width: 960px; height: 62px; background: transparent url('../Graphics/Navigation_bg.gif') no-repeat top left; z-index: 2; }
ul#navigation li { display: inline; }
ul#navigation li a:link,
ul#navigation li a:visited,
ul#navigation li a:active { float: left; display: block; width: auto; height: 62px; line-height: 55px; padding: 0 30px; font-family: "Myriad Pro", Arial, Verdana, Helvetica, sans-serif; font-size: 16px; color: #333; text-decoration: none; text-transform: uppercase; text-shadow: 1px 1px 2px #fff; }
ul#navigation li a:hover { background: url('../Graphics/Navigation_hover.gif') repeat-x top center; }
ul#navigation li a.active { background: url('../Graphics/Navigation_active.png') no-repeat top center; color: #fff; text-shadow: 1px 1px 2px #666; }

/* Logo */
a#logo { position: absolute; top: 118px; left: 0; width: 504px; height: 51px; background: url('../Graphics/Logo.png') no-repeat top left; overflow: hidden; z-index: 50; text-indent: -9999px; }
	
/* Features */
ul#features { position: absolute; top: 195px; left: 0; width: 504px; height: 51px; z-index: 51; }
ul#features li { display: block; margin: 0 0 10px 0; padding: 0 0 0 10px;  color: #afafaf; background: url('../Graphics/Features_arrow.png') no-repeat center left; }
ul#features li a { color: #afafaf; text-decoration: underline; }

/* Banner */
#banner { position: absolute; bottom: 45px; left: 0; width: 960px; height: 296px; overflow: hidden; z-index: 1; }

/* Sub navigation */
ul#subnav { position: absolute; bottom: 0; left: 0; width: 960px; height: 45px; }
ul#subnav li { display: inline; }
ul#subnav li.divider { float: left; display: block; width: 2px; height: 45px; background: url('../Graphics/Subnav_divider.gif') repeat-y top left; }
ul#subnav li a:link,
ul#subnav li a:visited,
ul#subnav li a:active { float: left; display: block; width: auto; height: 45px; line-height: 45px; padding: 0 20px; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #444; text-decoration: none; }
ul#subnav li a:hover { text-decoration: underline; }
ul#subnav li a:hover.active { text-decoration: none; }
ul#subnav li a.active { color: #931a1a; background: #f5f5f5; }

/* MAIN
----------------------------------------------------------------------------------*/
#main { padding: 0 0 170px 0; overflow: hidden; }

/* SIDEBAR
----------------------------------------------------------------------------------*/
#sidebar { float: left; width: 300px; height: auto; margin: 30px 20px 30px 0; }

/* Album */
#sidebar #album { width: 300px; height: auto; margin: 0 0 30px 0; overflow :hidden; }
#sidebar #album .large  { width: 294px; height: 196px; padding: 3px; background: #fff; -moz-box-shadow: 2px 2px 2px #ddd; -webkit-box-shadow: 2px 2px 2px #ddd; overflow: hidden; }
#sidebar #album .thumbs { width: 300px; height: auto; }
#sidebar #album .thumbs a { float: left; width: 90px; height: 60px; margin: 15px 15px 0 0; -moz-box-shadow: 2px 2px 2px #ddd; -webkit-box-shadow: 2px 2px 2px #ddd; }
#sidebar #album .thumbs a.last { margin-right: 0; }

/* Brands */
#sidebar #brands { margin: 0 0 30px 0; }
#sidebar #brands ul { float: left; width: 140px; height: auto; list-style: none; margin: 0 20px 0 0; padding: 0; }
#sidebar #brands ul.last { margin-right: 0; }
#sidebar #brands ul li { height: 30px; }
#sidebar #brands ul li a { display: block; height: 29px; line-height: 29px; background: url('../Graphics/Brands_list_bg.gif') no-repeat top left; border-bottom: 1px solid #ddd; color: #333; text-decoration: none; padding: 0 0 0 20px; }
#sidebar #brands ul li a.active { height: 30px; line-height: 30px; background: #901818; border: none; color: #fff; }

/* Info */
#sidebar #info { margin: 0 0 30px 0; }

/* CONTENT
----------------------------------------------------------------------------------*/
#content { float: left; width: 632px; height: auto; margin: 30px 0; }

#content_wide { width: 960px; height: auto; margin: 30px 0; }

/* List styling */
#content ul { margin: 10px 0 10px 15px; }
#content ul li { list-style-type: disc; margin: 0 0 5px 0; }
#content_wide ul { margin: 10px 0 10px 15px; }
#content_wide ul li { list-style-type: disc; margin: 0 0 5px 0; }

#content ol { margin: 10px 0 10px 25px; }
#content ol li { list-style-type: decimal; margin: 0 0 5px 0; }
#content_wide ol { margin: 10px 0 10px 25px; }
#content_wide ol li { list-style-type: decimal; margin: 0 0 5px 0; }

#content #documents { margin: 15px 0; }
#content #documents ul { margin: 10px 0; }
#content #documents ul li { height: 25px; line-height: 25px; list-style-type: none; padding: 2px 5px 2px 30px; background: url('../Graphics/Icon_download.png') no-repeat center left; }
#content #documents ul li.dark { background-color: #eee; }
#content #documents ul li a:link,
#content #documents ul li a:visited,
#content #documents ul li a:active { color: #333; }
#content #documents ul li a:hover { color: #981212; }

#content .news_item { margin: 0 0 20px 0; }
#content .news_item h3 { margin: 0 0 10px 0; font-weight: bold; }

/* LINKS
----------------------------------------------------------------------------------*/
#links .item { margin: 0 0 15px 0; }
#links .item h2  { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }

/* LINKS
----------------------------------------------------------------------------------*/
#faq .item { margin: 0 0 15px 0; }
#faq .item h2  { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }

/* FOOTER
----------------------------------------------------------------------------------*/
#footer { position: relative; margin: -170px 0 0 0; height: 170px; clear: both; background: url('../Graphics/Footer_bg.gif') repeat-x top left; }
#footer .content { width: 960px; height: 170px; margin: 0 auto; overflow: hidden; }

#footer .content a:link,
#footer .content a:visited,
#footer .content a:active { color: #debcbc; text-decoration: underline; }
#footer .content a:hover { color: #fff; }

#footer .content .column { float: left; width: 450px; margin: 0 60px 0 0; color: #debcbc; }
#footer .content .last { margin-right: 0; }
#footer .content .column h2 { font-family: "Arial Rounded MT Bold", Arial, Verdana, Helvetica, sans-serif; font-size: 18px; color: #fff; margin: 0 0 20px 0; padding: 20px 0 12px 0; background: url('../Graphics/Footer_title_border.gif') repeat-x bottom left; }

/* FORMS
----------------------------------------------------------------------------------*/
form.contact { margin: 30px 0; }
form.contact .item { margin: 0 0 5px 0; overflow: hidden; clear: left; }

.info_message { margin: 0 0 15px 0; font-weight: bold; color: #333; }
.error_message { margin: 0 0 15px 0; font-weight: bold; color: #981212; }
.error_message h3 { color: #981212; }
.success_message { margin: 0 0 15px 0; font-weight: bold; color: #1b596b; }

form.contact .item label { float: left; width: 150px; height: 25px; line-height: 25px; }

form.contact .item .inputfield,
form.contact .error .inputfield { float: left; width: 193px; height: 18px; padding: 3px; border: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #333; }
form.contact .item .inputfield:focus { border-top: 1px solid #999; border-left: 1px solid #999; }
form.contact .error .inputfield,
form.contact .error .inputfield:focus { border-top: 1px solid #981212; border-left: 1px solid #981212; }

form.contact .item .width_5,
form.contact .error .width_5 { float: left; width: 189px; height: 89px; padding: 5px; overflow: auto; border: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #333; }
form.contact .error .width_5 { border: none; border-top: 1px solid #981212; border-left: 1px solid #981212; }

form.contact .item .submit { clear: left; float: left; width: auto; height: 25px; margin: 10px 0 0 150px; background: #333; border: none; color: #fff; cursor: pointer; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; }

/* BUTTONS
----------------------------------------------------------------------------------*/
.buttons { clear: both; height: 24px; margin: 20px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid #ddd; overflow: hidden;  }
.buttons a { float: right; margin-right: 10px; }

a.print { display: block; width: 70px; height: 24px; text-indent: -9999px; background: url('../Graphics/Print.gif') no-repeat top left; }
a:hover.print { background-position: bottom left; }

a.mail_to_a_friend { display: block; width: 225px; height: 24px; text-indent: -9999px; background: url('../Graphics/Mail_to_a_friend.gif') no-repeat top left; }
a:hover.mail_to_a_friend { background-position: bottom left; }

/* OTHER CLASSES
----------------------------------------------------------------------------------*/
.clear { clear: both; }
.hide { display: none; }
.left { float: left; }
.right { float: right; }

/* 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 */