/*
#
#	project : hans.nl
#	version : v.1 (26-03-2009)
#   author  : KEGA
#
*/

/* ############## GENERAL ############# */
button {
	cursor: pointer;
}
.structural {
	position: absolute;
	left: -9999px;
}
body {
	color: #707173;
	background: #d4d5d7;
	font: 0.8em arial, verdana sans-serif;
}

/* ############## HASLAYOUT FIX ############# */
#scroll-navi:after, #flowpanes:after, #products:after, #products li:after, .clear:after,
#locator ul:after, #locator li:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* ############## CONTAINER ############# */
#container {
	margin: 0 auto;
	width: 935px;
	padding: 0px 10px 0px 10px;
	background: #ffffff;
}


/* ############## HEADER ############# */
#header {
	position: relative;
}
	#header h1 {
		padding: 10px 0;
	}
	#header h1 a {
		display: block;
		width: 188px;
		height: 47px;
		text-indent: -9999em;
		background: url(images/logo.png) top left no-repeat;
	}

#top-image {
    position: absolute;
    top: 2px;
    right: 0;
    width: 266px;
    padding: 5px 20px; 
    font-size: 1em;
    color: #fff;        
}

#newsletter-banner {
	position: absolute;
	top: 0;
	right: 0;
	width: 266px;
	padding: 5px 20px; 
	font-size: 1em;
	line-height: 1.7;
	text-transform: uppercase;
	color: #fff;		
	background: #00336d url(images/bg-newsletter-banner.png) top left no-repeat;
}
	#newsletter-banner a {
		color: #fff;
	}

/* ================ header menu =================== */

	#header ul {
		width: 500px;
		list-style: none;
		padding: 0px 0px 30px 220px;
		margin: -30px 0px 0px 0px;
	}
	#header li {
		display: inline;
		padding: 0 6px;
	}
	#header li.last {
		background: none;
	}
	#header a {
		color: #333;
		text-decoration: none;
	}
	#header a:hover {
		text-decoration: underline;
	}

/* ############## MENU ############# */
#nav {
	float: left;
	width: 177px;
	margin: 9px 0;
	padding-top: 8px;
}
	#nav ul {
		list-style: none;
	}
	#nav li a {
		display: block;
		padding: 4px 9px;
		color: #60605e;
		text-decoration: none;
		font-size: 1.2em;
	}
	#nav li ul li a {
		font-size: 0.9em;
		padding: 2px 9px 2px 30px;
	}
	#nav li ul li a:hover, 
	#nav li ul li ul a:focus,
	#nav li ul a.current {
		font-weight: bold;
	}
	#nav li ul li ul {
		margin: 2px 0 5px 0;
	}
	#nav li ul li ul a {
		padding-left: 45px;
		color: #00336d;
		background: url(images/bg_menu_item.gif) 20% 50% no-repeat;
	}
	#nav li ul li ul a:hover, #nav li ul li ul a:focus {
		color: #c43635;
		font-weight: normal;
		background-image: url(images/bg_menu_item_active.gif);
	}

#leftBanner {
	margin: 16px 0 8px 0;
}
#storelocator-search {
	padding: 11px 7px 11px 12px;
	border: 1px solid #57718e;
	background: url(images/bg-storelocator-search.png) top left no-repeat;
}
	#storelocator-search h2 {
		margin-bottom: 10px;
		height: 16px;
		width: 100px;
		text-indent: -9999px;
		background: url(images/bg-storelocator-header.png) top left no-repeat;
	}
	#storelocator-search input {
		padding: 6px 4px 5px 4px;
		font: 0.85em tahoma, verdana, sans-serif;
		color: #858c90;
		border: 1px solid #7d7d7d;
		background-color: #fbfbfc;
	}
	#storelocator-search button {
		position: relative;
		top: 1px;
		margin-left: -4px;
		width: 24px;
		height: 26px;
		border: none;
		text-indent: -9999px;
		background: url(images/icon-storelocator-button.gif) top left no-repeat;
	}
#leftMenuContainer {
	min-height: 295px;
	_height: 295px;
}
/* ############## CONTENT -- GENERAL ############# */
#content {
	float: left;
	width: 561px;
	margin: 9px 0 9px 10px;
}

#content-full-width {
    float: left;
    width: 745px;
    margin: 9px 0 9px 10px;
}

/* ############## CONTENT -- BREADCRUMBS ############# */
#breadcrumbs {
	margin-bottom: 16px;
	list-style: none;
}
	#breadcrumbs li {
		float: left;
		margin-right: 9px;
		font: 0.85em arial, verdana, sans-serif;
	}
	#breadcrumbs a {
		color: #201d21;
		text-decoration: none;
	}
	#breadcrumbs a:hover {
		text-decoration: underline;
	}

/* ############## CONTENT - BRANDCAROUSEL ############# */
#brand-carousel-wrap {
	position: relative;
	height: 440px;
	/*background-image: url(images/home_brands_bg.jpg);*/
	background-position: top left;
	background-repeat: no-repeat; 
}
	#carousel-transition {
		height: 440px;
		background-position: top left;
		background-repeat: no-repeat; 
	}
	#brand-carousel {
		position: absolute;
		left: 16px;
		bottom: 11px;
		background: url(images/bg-banner-carousel.png) top left repeat;
		z-index: 100;
	}
	#brand-carousel li {				
		list-style: none;
		float: left;
	}
	#brand-carousel a {
		display: block;	
	}
	#brand-carousel a:hover, #brand-carousel .active a {
		background-color: #ffffff;
	}
	#brand-carousel img {
		border: none;
	}

/* ############## CONTENT -- PRODUCT-CATEGORY ############# */
.content p {
	margin-bottom: 10px;
}

#product-category .content {
	padding: 10px 0 10px 197px; 
	background: #f5f6f6 top left no-repeat;
	/*height: 465px;*/
	min-height: 500px;
	_height: 500px;
}
#product-category #no-banner {
	padding-left: 15px;
}

#product-category #full-width {
    padding-left: 15px;
}

.product-category .content {
    /*height: 465px;*/
}
	#product-category h2 {
		padding: 6px 7px 8px 9px;
		font-size: 1.2em;
		font-weight: bold;
		text-transform: uppercase;
		
		/* default styling for title */
		background-color: #ba001b;
        color: #fff;
	}
	.brand-category .content, .product-category .content, .vacancy-reaction .content,
	.newsletter-form .content {
	    /*
		padding: 10px 0 10px 197px; 
		background: #f5f6f6 top left no-repeat;
		height: 465px;
		*/
	}
    #product-category #search {
        padding: 10px 15px; 
    }
    #product-category #stores {
        padding: 10px 15px; 
    }
    #product-category #folder {
        padding: 0px;
        background-color: #FFF;
    }
#products {
	list-style: none;
}
	#products h3 {
		font-size: 1.2em;
		margin: 5px 0 1px 0;
		padding-left: 9px;
		color: #bc0027;
	}
	#products li {
		position: relative;
		float: left;
		width: 177px;
		margin-bottom: 10px;
		font-family: tahoma, verdana, sans-serif;
	}
	#products li.left-col {
		margin-right: 10px;
	}
	#products p {
		float: left;
		width: 71px;
		padding-left: 9px;
		font-size: 1.1em;
		line-height: 1.5;
	}
	#products .price-box {
		float: right;
		margin-top: 10px;
		height: 60px;
		width: 60px;
		padding: 5px;
		text-align: center;
		background-color: #ba001b;
	}
	#products .price-box del {
		display: block;
		width: 60px;
		color: #ba001b;
		text-decoration: none;
		background: #fff url(images/icon-price-strikethrough.gif) 50% 50% no-repeat;
	}
	#products .price-box ins {
		display: block;
		margin-top: 5px;
		color: #fff;
		font-size: 2.2em;
		font-weight: bold;
		text-decoration: none;
	}

/* Product pagination */
#flowpanes {
    position:relative;
    overflow:hidden;
    clear:both;
    height: 550px;
    width:364px;
}
	#flowpanes ul {
	    float:left;
	    display:block;
	    width:364px;
	    cursor:pointer;
	    font-size:14px;
	}
	#flowpanes .items {
	    width:20000em;
	    position:absolute;
	    clear:both;
	    margin:0;
	    padding:0;
	}
	#flowpanes .less, #flowpanes .less a {
	    color:#999 !important;
	    font-size:11px;
	}
#scroll-navi {
	width: 100%;
}
	#scroll-navi .prev,
	#scroll-navi .next {
	    display: block;
	    float: left;
	    padding: 0 10px;
	    margin-right: 10px;
	    height: 20px;
	    line-height: 18px;
	    background-image: url('images/bg_button.jpg');
	    
	    color: #FFF;
	    font-weight: bold;
	    text-decoration: none;
	}
	#scroll-navi .navi {
		margin-top: 5px;
		float: right;
	    height:20px;
	}
	#scroll-navi .disabled {
		background-image: url('images/bg_button_grey.jpg');
	}
	#scroll-navi .navi a {
	    background:transparent url(http://flowplayer.org/tools/img/scrollable/arrow/navigator.png) no-repeat scroll 0 0;
	    display:block;
	    float:left;
	    font-size:1px;
	    height:8px;
	    margin:3px;
	    width:8px;
	}
	#scroll-navi .navi a.active{
	    background-position:0 -16px;
	}

/* ############## STORES ############# */
#route td{
    height:20px;
    padding:5px;
}

#route .nr, #route b{
    color:#d50057;
    font-weight:bold;
}

#route .point{
    background:#efefef;
    height:30px;
    border:solid 1px #000;
}
#locator li{
	list-style: none;
}
#locator li:hover {
    color: #BA001B;
}
#locator li a {
    color: #000;
}
#locator li a:hover {
    color: #BA001B;
    text-decoration: none;
}

.store-details p {
	margin-bottom: 10px;
}
.store-details .vacancies li {
	margin-left: 12px;
}
.store-details .vacancies a {
    color: #000;
    text-decoration: none;
}
.store-details .vacancies a:hover {
    text-decoration: underline;
}
.store-details h3 {
	clear: both;
}
#store-hours {
	float: left; 
	width: 150px;
}	
#store-image {
	display: block;
	float: right; 
	width: 220px;
	margin-bottom: 15px;
}
.store-details address {
	font-style: normal;
	margin-bottom: 10px;
}

#stores .btn-send {
	width:72px;
    height:20px;
    
	background-color:transparent;
	background-image:url(/public/layout/images/btn_submit.jpg);
	
	border: none;
	
	margin-top:6px;
	text-indent:-9000px;
}

/* ############## VACANCIES ############# */
.vacancy-list .content {
        padding: 10px 0 10px 197px; 
        background: #fff top left no-repeat;
        /*min-height: 300px;*/
    }
    .vacancy-list {
        clear:both;
    }
	.vacancy-list a {
       color: #616161;
       text-decoration: none
    }
    .vacancy-list a:hover {
       color: #616161;
       text-decoration: underline
    }
	.vacancy-list .accordion-head {
	    display: block;
	    background-color: #EEF0EB;
	    color: #5B5D58;
	    padding: 3px 8px;
	    text-decoration: none;
	    margin-top: 3px;	
	}
	.vacancy-list .accordion-head:hover {
	   text-decoration: none;
	}
	.vacancy-list table {
       width: 100%;
       clear: both;
    }
	.vacancy-list th {
	   text-align: left;
	   padding-left: 8px;
	}
	.vacancy-list .location-head {
	   padding-left: 0px;
	}
	.vacancy-list #region-select {
	   text-align: right;
	}
	.vacancy-list p {
	   padding-top: 1em;
	}
/* ############## SEARCH ############# */
.search-form button {
    width: 72px;
    height: 20px;
    background-image: url(/public/layout/images/btn_submit.jpg);
    background-color: transparent;
    border: none;
    text-indent: -9000px;
    margin-top: 0px;
}
#searchResults li {
	list-style: none;
	margin-bottom: 10px;
}

#searchResults {
	margin-top: 10px;
}
.searchResultsPagination a {
	text-decoration: none;
	padding: 0px 3px;
}
.searchResultsPagination .active {
    font-weight: bold;
}
.searchResultsPagination a:hover {
    text-decoration: underline;
}
/* ############## STORES ############# */
#stores {
    margin-top: 10px;
    
}


/* ############## GENERIC FORMS ############# */
.form p {
    clear: both;
    padding: 5px 0px;;
}
.form label {
    display: block;
    float: left;
    width: 100px;
}
.form .textInput {
	display: block;
	float: left;
	border: 1px solid #EDEFEC;
	width: 246px;
}
.form .error input{
    border-color: #FF0000;	
}
.form .checkboxes input {
	float: left;
	margin-right: 10px;
	margin-left: 0px; 
}
.form .checkboxes label {
	width: 330px;
}
.form .fileInput {
    width: 250px;
    display: block;
    float: left;
    border: 1px solid #EDEFEC;
    background-color:#FFF;
}
.form .submitContainer {
	text-align: right;
	padding-right: 15px;
}
.submitContainer button {
	width: 72px;
	height: 20px;
	background-image: url(/public/layout/images/btn_submit.jpg);
	background-color: transparent;
	border: none;
	text-indent: -9000px;
	margin-top: 5px;
}
/* ############## GENERAL PAGE ############# */
.intro {
    margin: 5px 0;	
}
.errors {
	margin-top: 5px;
	margin-bottom: 5px;
	color: #F00;
}
.errorList {
    margin-left: 15px;
    	
}
/* ############## ASIDE ############# */
#aside {
	float: right;
	margin-top: 9px;
	width: 177px;
	padding-top: 30px;
}
.page_1 #aside {
	padding-top: 0px;
}
	#aside img {
		display: block;
	}
	#aside .banner {
		margin-bottom: 9px;
	}
	#aside .banner img {
	   border: 0px;
	}
	#aside .folder-banner {
		height: 103px;
		cursor: pointer;
		padding: 17px 5px 8px 9px;
		background: #e8e9eb url(images/bg-folder-banner.png) top left no-repeat;
		
	}
	#aside .folder-banner h2 {
		float: left;
		margin-bottom: 8px;
		text-indent: -9999px;
		background: url(images/bg-folder-header.png) top left no-repeat;
		height: 19px;
		width: 67px;
	}
	#aside .folder-banner p {
		width: 70px;
		font: 0.85em tahoma, verdana, sans-serif;		
	}
	#aside .folder-banner img {
		float: right;
	}

#search {
	margin-bottom: 9px;
}
	#search input {
		margin: 0;
		padding: 3px 3px 2px 3px;
		width: 118px;
		font-size: 0.8em;
		border: 1px solid #727272;
		background-color: #f0f0ef;
	}
	#search button {
		width: 50px;
		height: 20px;
		position: relative;
		top: 1px;
		margin-left: -4px;
		text-indent: -9999em;
		background: url(images/bg-search-button.png) top left no-repeat;
		border: none;
	}

/* ############## FOOTER ############# */
#footer {
	clear: both;
	padding-top: 5px;
	font: 0.8em tahoma, verdana, sans-serif;
}
	#footer ul {
		float: left;
		width: 500px;
		list-style: none;
	}
	#footer li {
		float: left;
		padding: 0 6px;
		background: url(images/bg-footer-links.gif) 100% 50% no-repeat;
	}
	#footer li.last {
		background: none;
	}
	#footer a {
		color: #333;
		text-decoration: none;
	}
	#footer a:hover {
		text-decoration: underline;
	}
#copyright {
	float: right;
}