/* 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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
background:transparent;
}
img {border:0; outline:0; font-size:100%; background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
/* tables benodigen nog 'cellspacing="0"' in de markup */
table {border-collapse:collapse; border-spacing:0;}
/* MAIN */
html, body {font-family:"Verdana"; font-size:10px; line-height:20px; color:#fff;}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index:-10;
}
/* LAYOUT */
#header-wrap {height:60px; background:url("../images/header-bg.png") repeat-x top;}
#header {width:960px; margin:0 auto; padding:0 30px 0 10px; position:relative;}
#logo {display:block; width:212px; height:75px; background:url("../images/logo-urbanfietsen.png") no-repeat; text-indent:-9999px; float: left;}
#sublogo {display:block; width:368px; height:27px; background:url("../images/sub-logo-urbanfietsen.png") no-repeat; text-indent:-9999px; float: right; margin-top: 35px;}
#outer-wrap {width:1000px; margin:0 auto; background:url("../images/outer-wrap-bg.png") repeat;}
#inner-wrap {width:980px; padding:10px 10px 0 10px; min-height:617px; background:url("../images/inner-wrap-bg.png") no-repeat;}
#wrap {padding:10px 20px 0 20px; min-height:620px; position:relative; background:#454545 url("../images/wrap-bg.jpg") no-repeat 100% 100%;}
#footer-wrap {border-top:#ccc 1px solid; background:#fff;}
#footer {width:940px; padding:15px 30px; margin:0 auto; background:url("../images/footer-bg.png") no-repeat center 1px; min-height:200px;}
#main {background:url("../images/main-bg.png") no-repeat top; position:relative;}
#content {width:606px; min-height:620px; padding:50px 25px 0 15px;}
#homepage #content {min-height:284px; position:relative;}
/* SHOPSMENU */
#shopsmenu {position:absolute; right:30px; top:0px; line-height:14px; color:#fff;}
#shopsmenu li {float:left; margin:0 3px;}
#shopsmenu a {color:#fff; float:left; text-decoration:none; text-transform:lowercase;}
#shopsmenu a:hover {text-decoration:underline;}
/* MAINMENU */
.level-A {border-bottom:#fff 1px solid; background:#fff; position:absolute; left:20px; top:10px; padding-right:1px; z-index:5;}
.level-A li {border-left:#fff 1px solid; float:left; position:relative;}
.level-A a {display:block; width:auto; background-image:url("../images/mainmenu-a-bg.png"); background-repeat:no-repeat; background-position:top left; height:auto; line-height:35px; padding:0 15px; font-size:12px; color:#B7101D; letter-spacing:1px; float:left; text-transform:lowercase; text-decoration:none;}
.level-A a:hover {background-position:bottom left; color:#fff;}
.level-A a.selected {background-position:bottom left !important; color:#fff !important;}
/* Subs */
.level-A li li {float:none; border:none;}
.level-A li li a {color:#fff !important; background-image:url("../images/mainmenu-sub-a-bg.png"); font-size:11px; line-height:17px; width:156px; padding:3px 15px; float:none;}
.level-A ul {display:none; padding:0 12px 12px 12px; width:186px; background-image:url("../images/mainmenu-sub-bg.png"); background-repeat:no-repeat; background-position:bottom; position:absolute; left:-12px; top:35px; z-index:1;}
.level-A ul ul {left:174px; top:0; background-image:url("../images/mainmenu-subsub-bg.png"); z-index:2;}
/* Mouse-overs */
.level-A li:hover ul {display:block;}
.level-A li:hover ul ul {display:none;}
.level-A li:hover ul ul ul {display:none;}
.level-A ul li:hover ul {display:block;}
.level-A li:hover a, .level-A li.hover a {background-position:bottom left; color:#fff;}
.level-A li:hover li a, .level-A li.hover li a {background-position:top left; color:#969696;}
.level-A li:hover li a:hover, .level-A li.hover li a:hover {background-position:bottom left; color:#fff;}
.level-A li:hover li:hover a, .level-A li.hover li.hover a {background-position:bottom left; color:#fff;}
.level-A li:hover li:hover li a, .level-A li.hover li.hover li a {background-position:top left; color:#969696;}
.level-A li:hover li:hover li a:hover, .level-A li.hover li.hover li a:hover {background-position:bottom left; color:#fff;}
/* BANNER ROTATOR */
#banner-rotator {margin:9px 0; height:310px; position:relative; z-index:1; background:#000; overflow:hidden;}
.banner-item {width:940px; height:310px;}
.banner-txt {color:#fff; letter-spacing:1px; position:absolute; top:27px; right:0; height:223px; width:264px; padding:30px 15px; background: url("../images/banner-txt-bg.jpg") no-repeat;}
.banner-txt .content {font-size:11px; height:225px; overflow:hidden;}
.banner-txt .content p {padding-bottom:20px;}
.banner-txt .content a {color:#0080ff; text-decoration:none;}
.banner-txt .content a:hover {border-bottom:1px solid;}
.banner-txt .content h2, .banner-txt .content h3 {font-size:14px; font-weight:normal; color:#fff; font-style:italic; padding-bottom:20px;}
/* BANNER RIGHT */
#banner-right {position:absolute; right:-30px; top:0; width:333px; height:334px;}
#twitter-right {position:absolute; right:-1px; top:0; width:292px; height:334px; z-index: 100;}
#twitter-right {*right:20px;}
/* BREADCRUMBS */
#breadcrumbs {position:absolute; top:330px; left:-10px; font-size:11px; line-height:18px; color:#fff; width:601px; height:20px; padding:0 0 0 45px; background:url("../images/breadcrumbs-bg.png") no-repeat; z-index:2;}
#breadcrumbs a {font-size:11px; color:#fff; text-decoration:none; text-transform:lowercase;}
#breadcrumbs a:hover {border-bottom:1px solid;}
#breadcrumbs span {padding:0 5px;}
#breadcrumbs a.selected {border-bottom:1px solid;}
/* LATEST NEWS (frontpage) */
#latest-news {padding:15px 0 0 0; background:url("../images/latest-news-bg.png") no-repeat top;}
#latest-news .news-item {width:278px; padding:0 30px 0 15px; float:left; background:url("../images/news-item-separator.png") no-repeat;}
#latest-news .last {width:279px; padding:0 0 0 15px;}
#latest-news .news-item h2 {font-size:10px; text-transform:uppercase; font-weight:bold;}
#latest-news .readon {text-align:right;}
#latest-news .readon a {text-transform:lowercase; border:0;}
/* NEWS */
#news {margin-top:36px; position:relative; margin-left:-30px;}
#news h2 {font-size:14px; font-weight:normal; padding-bottom:20px;}
#news p {padding-bottom:20px;}
#news .news-item {padding:0 0 20px 30px; background:url("../images/news-item-bg.png") no-repeat; position:relative;}
#news .date {display:block; color:#fff; font-size:11px; line-height:18px; padding:0 0 12px 15px;}
#news .content {width:623px; float:left; padding:5px 0 0 0;}
#news .image {width:317px; float:left; position:relative;}
#news .image img {padding:4px;}
#news .mask-top {display:none; position:absolute; top:0px; left:0; width:306px; height:130px; background:url("../images/mask-top.png") no-repeat;}
#news .mask-bottom {display:none; position:absolute; bottom:6px; left:0; width:306px; height:160px; background:url("../images/mask-bottom.png") no-repeat;}
.news-overview .content {width:770px !important;}
.news-overview .image {width:170px !important;}
.news-overview .mask-top {width:159px !important; background:url("../images/mask-top-small.png") no-repeat !important;}
.news-overview .mask-bottom {width:159px !important; background:url("../images/mask-bottom-small.png") no-repeat !important;}
/* FIETSFINDER */
#fietsfinder {width:273px; height:143px; padding:8px 0 0 19px; background:url("../images/fietsfinder-bg.jpg") no-repeat; z-index:3;}
#fietsfinder h3 {padding:0 0 6px 10px; color:#fff; font-size:14px; font-weight:normal; text-transform:lowercase;}
#fietsfinder form {position:relative;}
#fietsfinder input, #fietsfinder label {font-style:italic; font-size:11px; letter-spacing:1px; text-transform:lowercase;}
#fietsfinder .button {position:absolute; color:#fff; border:0; background:none; cursor:pointer; top:93px; left:170px;}
#fietsfinder .button:hover {color:#7d8916;}
#fietsfinder select {text-transform:lowercase;}
/* Positioes fietsfinder */
#homepage #fietsfinder {position:absolute; right:20px; top:177px; border-left:#fff 1px solid; border-bottom:#fff 1px solid; border-top:#fff 1px solid;}
#bikes #fietsfinder {position:absolute; right:0; top:-10px; border-left:#fff 1px solid;}
/* Style select boxes */
.stylish-select ul.newList {left:-9999px;}
ul.newList * {margin:0; padding:0;}
ul.newList a {color:#646464 !important; padding-left:10px; background-color:#f5f5f5; text-decoration:none; border:0 !important; display:block;}
ul.newList {margin:0; padding:0; list-style:none; color:#646464; width:254px; background:#fff; position:absolute; top:29px; left:0; overflow:hidden; z-index:9999;}
.newListSelected {font-style:italic; font-size:11px; letter-spacing:1px; text-transform:lowercase; width:244px; padding-left:10px; color:#646464; height:29px; line-height:29px; float:left; background:url("../images/select-bg.png") no-repeat; margin-bottom:1px;}
.newListSelected span {width:254px; display:block;}
ul.newList li a {display:block;}
.selectedTxt {width:254px; height:29px; overflow:hidden;}
.hiLite {background:#cdcdcd !important; color:#fff !important;}
.hiLite a {background:#cdcdcd !important; color:#fff !important;}
.newListHover {background:#e6e6e6 !important; cursor:default;}
.newListSelHover, .newListSelFocus {background-position:0 -29px; cursor:default;}
.newListOptionTitle {font-weight:bold;}
.newListOptionTitle ul {margin:3px 0 0;}
.newListOptionTitle li {font-weight:normal;}
/* select landen dealerfinder */
#searchdealer .newListSelected {width:110px; background:url("../images/select-bg.png") no-repeat right 0px;}
#searchdealer .newListSelHover, #searchdealer .newListSelFocus {background-position:right -29px; cursor:default;}
#searchdealer ul.newList {width:120px;}
/* DEALERFINDER */
#dealerfinder { position:absolute; width:273px; height:88px; padding:8px 0 0 19px; background:url("../images/dealerfinder-bg.jpg") no-repeat; z-index:2;}
#dealerfinder h3 {padding:0 0 6px 10px; color:#fff; font-size:14px; font-weight:normal; text-transform:lowercase;}
#dealerfinder form {position:relative;}
#dealerfinder input, #dealerfinder label {font-style:italic; font-size:11px; letter-spacing:1px; text-transform:lowercase;}
#dealerfinder .field {width:232px; height:19px; padding:5px 10px; color:#646464; background:url("../images/dealerfinder-field-bg.jpg") no-repeat; border:0;}
#dealerfinder input, #dealerfinder select, #dealerfinder span, #dealerfinder label {position:absolute;}
#dealerfinder label {left:10px; z-index:2;}
#dealerfinder #label-postalcode {top:4px; color: #000;}
#dealerfinder #label-captcha {top:34px;}
#dealerfinder .postalcode {top:0; left:0;}
#dealerfinder span {color:#fff; font-style:italic; top:35px; left:110px;}
#dealerfinder .captcha {top:30px; left:0;}
#dealerfinder .button {color:#fff; border:0; background:none; cursor:pointer; top:38px; left:170px;}
#dealerfinder .button:hover {color:#f67982;}
.dealerfinder-country {position:absolute; top:-23px; right:20px;}
.dealerfinder-country input {position:static !important;}
.dealerfinder-country label {width:50px; position:static !important; text-transform:uppercase !important; color:#fff;}
/* Posities dealerfinder */
#homepage #dealerfinder {position:absolute; top:18px; right:20px; border-left:#fff 1px solid; border-top:#fff 1px solid; z-index: 500;}
#bikes #dealerfinder {position:absolute; right:0; top:152px; border-left:#fff 1px solid;}
#dealers #dealerfinder {position:absolute; top:208px; left:20px; border-right:#fff 1px solid; border-top:#fff 1px solid;}
/* BIKES OVERVIEW */
#bikes #main {margin-top:46px;}
#bikes #breadcrumbs {top:46px;}
#bikes #banner-right {top:282px;}
#bikes #content {width:637px; padding:20px 0 0 0;}
.bike {width:302px; height:302px; float:left; margin:0 10px 10px 0; background:url("../images/bike-bg.jpg") no-repeat; position:relative;}
.bike a {display:block; width:285px; height:288px; padding:14px 0 0 17px; color:#646464 !important; border:0 !important;}
.bike .image {position:absolute; top:59px; left:1px; z-index:0;}
.bike h2, .bike span {z-index:1; position:relative;}
.bike h2 {font-size:14px; color:#646464; font-weight:normal;}
.bike h2 span {color:#B7101D; display:inline;}
.bike span {display:block;}
.bike .description {line-height:10px;}
.bike .color {position:absolute; top:273px; left:17px;}
.bike .price {letter-spacing:1px; position:absolute; top:273px; left:203px; color:#B7101D; font-weight:bold;}
.last {margin-right:0;}
/* BIKE PAGE */
#bike #main {margin-top:46px;}
#bike #breadcrumbs {top:46px;}
#bike-image {width:616px; height:339px; padding-top:10px; float:left;}
#bike-info {width:266px; float:left; padding:16px 14px 14px 44px; margin-top:15px;}
#bike-info h1 {font-size:20px; font-weight:normal; padding-bottom:2px;}
#bike-info h2 {font-size:14px; font-weight:normal; padding-bottom:20px;}
#bike-info h3 {text-transform:uppercase;}
#bike-info ul {padding-bottom:20px;}
#bike-info p {padding:0 !important;}
#bike-top {position:relative; z-index:1;}
#bike-bottom {height:560px; background:url("../images/main-bg.jpg") no-repeat; margin-top:-8px; position:relative; z-index:0;}
.backbutton {position:absolute; right:0; top:-45px; display:block; height:33px; line-height:33px; background:url("../images/backbutton-bg.png") no-repeat; font-size:12px; border:0 !important;}
.backbutton:hover span {border-bottom:2px solid;}
.backbutton span {margin-left:43px;}
.zoom-icon {position:absolute; top:33px; left:537px; width:38px; height:38px; background:url("../images/zoom-icon.png") no-repeat; text-indent:-9999px; border:0 !important;}
/* Accessoires & close-ups */
#bike-extra {position:absolute; left:0; top:10px; letter-spacing:1px;}
#bike-extra li {float:left; margin-left:5px;}
#bike-extra a {display:block; height:33px; background:url("../images/bike-bottom-link-bg.png") no-repeat; font-size:11px; padding-left:5px; line-height:33px; float:left; text-align:center; color:#646464 !important; border:0 !important;}
#bike-extra a:hover {color:#B7101D !important;}
#bike-extra a.selected {font-size:10px; color:#B7101D !important; font-weight:bold; text-transform:uppercase;}
#bike-extra #acc-button {width:110px;}
#bike-extra #closeups-button {width:90px;}
#accessoires, #closeups {position:absolute; top:50px; left:0; width:630px;}
#accessoires img, #closeups img {float:left; margin:0 10px 10px 0; border:#d0d0d0 1px solid !important;}
#closeups {display:none;}
/* Geslacht info */
#bike-types {position:absolute; left:640px; top:10px; letter-spacing:1px;}
#bike-types li {float:left; margin-left:5px;}
#bike-types a {display:block; width:65px; height:33px; background:url("../images/bike-bottom-link-bg.png") no-repeat; padding-left:5px; line-height:33px; float:left; text-align:center; color:#646464 !important; border:0 !important;}
#bike-types a:hover {color:#B7101D !important;}
#bike-types a.selected {color:#B7101D !important; font-weight:bold; text-transform:uppercase;}
#bike-types #button-heren {width:63px;}
#bike-types #button-dames {}
#bike-types #button-overige {}
.genderinfo {position:absolute; top:60px; left:660px; letter-spacing:1px;}
.genderinfo p {padding:0 !important; font-weight:bold;}
.colorsample {width:15px; height:15px; display:block; border:#e5e5e5 1px solid !important; padding:4px; float:left; margin:10px 5px 0 0;}
#bike-bottom .colorsample:hover, #bike-bottom .genderinfo .selected {border:#646464 1px solid !important;}
.colorsample span {width:15px; height:15px; display:block;}
.genderinfo.not-selected {display:none;}
/* SUPERBOX */
/* Base Superbox Styles */
#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;margin:0;padding:0;vertical-align:middle;}
#superbox{margin:0 auto;padding:0;}
#superbox-container .loading{margin:0;text-align:center; height:92px; background:url("../images/loading-bg.png") no-repeat top center;}
/* IE7 */
*:first-child+html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
*:first-child+html #superbox{position:relative;top:-50%;display:block;}
/* IE6 - Thanks to Thickbox for IE expressions */
* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
* html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight + 'px' : document.body.offsetHeight + 'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
/* Default Theme */
#superbox-overlay{background:#000;}
#superbox-container .loading{text-align:center;font-size:40px;color:#fff;}
#superbox{background:transparent url("../images/superbox-bg.png") no-repeat; padding:10px; z-index:10;}
#superbox-innerbox{padding:0;}
#superbox.image{text-align:center;}
#superbox .close {width:80px; margin-left:800px; padding-top:10px;}
#superbox .close a {color:#B7101D; cursor:pointer; display:block; height:33px; line-height:33px; background:url("../images/backbutton-bg.png") no-repeat; font-size:12px; border:0 !important;}
#superbox .close a:hover span {border-bottom:2px solid;}
#superbox .close strong {font-weight:normal;}
#superbox .close span {margin-left:43px;}
.accessoires #superbox {background:transparent url("../images/superbox-acc-bg.png") no-repeat; padding-top:0;}
.accessoires #superbox .close {margin-left:520px;}
/* FOOTER */
#footer ul {min-height:200px; width:210px; padding:0 15px; background:url("../images/footer-separator.png") no-repeat left -20px; float:left;}
#footer a {color:#969696; text-transform:lowercase; text-decoration:none;}
#footer a:hover {border-bottom:1px solid;}
#footer ul li:first-child, #footer ul li:first-child a {font-weight:bold; color:#b7101d; letter-spacing:1px; text-transform:lowercase;}
#footer ul.last {width:205px; padding:0 0 0 15px;}
/* FORMS */
.basicForm {padding-bottom:20px;}
.basicForm label {width:100px; display:inline-block; vertical-align:top;}
.basicForm input, .basicForm textarea {font-family:"Verdana"; font-size:11px; color:#646464;}
.basicForm .field, .basicForm textarea {border:#B7101D 1px solid; padding:3px; width:200px;}
.basicForm textarea {height:80px;}
.basicForm .button {margin-top:10px; padding:3px; font-weight:bold; background:#B7101D; color:#fff; border:0; cursor:pointer;}
.basicForm .button:hover {background:#899618;}
.basicForm .row {padding-bottom:5px;}
.basicForm span.required {font-weight:bold;}
#main .basicForm p {padding-bottom:0;}
.basicForm ul, .basicForm h3, .basicForm .requiredFields,
.basicForm #captcha, .basicForm .form_element_onlytext p, .basicForm .button {margin-left:103px;}
.basicForm .requiredFields {margin-top:10px;}
/* ELEMENTS */
h1 {color:#b7101d; font-size:22px; letter-spacing:1px; font-weight:normal; padding-bottom:20px;}
h2 {color:#b7101d; letter-spacing:1px;}
h3 {color:#b7101d; letter-spacing:1px;}
#main a, #news a {color:#b7101d; border-bottom:1px dotted; text-decoration:none;}
#main a:hover, #news a:hover {border-bottom:2px solid;}
#main p {padding-bottom:20px;}
#main h2 {font-size:12px;}
/* CLEARFIX */
.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
.jqmWindow {
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (