/*	---------------------------------------------------------------------------------
		|																				|
		|									Johnsons									|
		|																				|
		|							Author: Groenewold Media							|
		|							   Copyright (c) 2009.								|
		|																				|
		--------------------------------------------------------------------------------- */
		
		
		*{
			margin:						0 auto;
			padding:					0px;
			border:						none;
			overflow:					auto;
			font-family:				Arial, Helvetica, sans-serif;
			color:						#FFF;
			font-size:					10px;			
			list-style:					none;
		}
		
		html, body{
			width:						100%;
			height:						100%;
			background:					#000000;
			overflow:					hidden;
		}
		
		#website_container{
			width:						990px;
			height:						100%;
			/*background:					url(/images/layout/background_footer.png) no-repeat bottom center;*/
			overflow:					hidden;
		}
		
	
	/* TYPOGRAFIE */
	
		h1{ font-size:					18px; }
		h2{ font-size:					13px; }
		p {font-size:					9px; }
		div.p_padding{ padding: 		3px 0 3px 5px; }
	
	
	
	/* CONTENT HOLDER BORDERS */
	
		.border_lu{ background:			url(/images/layout/border/lu.png) top left no-repeat; }
		.border_u{ background:			url(/images/layout/border/u.png) top repeat-x; }
		.border_ru{ background:			url(/images/layout/border/ru.png) top right no-repeat; }
		.border_ld{ background:			url(/images/layout/border/ld.png) bottom left no-repeat; }
		.border_d{ background:			url(/images/layout/border/d.png) bottom repeat-x; }
		.border_rd{ background:			url(/images/layout/border/rd.png) bottom right no-repeat; }
		.border_r{ background:			url(/images/layout/border/r.png) right repeat-y; }
		.border_l{ background:			url(/images/layout/border/l.png) left repeat-y; }

		
		.border_height{ height:			20px; float: left; }
		.border_width{ width:			20px; float: left; }
		.holder_content{ overflow:		hidden; background:#000 url(/images/layout/background_content_holder.png) repeat; }		
		
		.border_lu.hovBground, .border_u.hovBground, .border_ru.hovBground{
			background-position:		bottom;
		}
		
		.border_ld.hovBground, .border_d.hovBground, .border_rd.hovBground{
			background-position:		top;
		}
		
		.border_ld.hovBground{
			background-position:		top left;	
		}
		
		.border_r.hovBground{
			background-position:		left;
		}
		
		.border_l.hovBground{
			background-position:		right;
		}
		
		.contentItem{
			position:						relative;
			overflow:						hidden;
			margin:							0px 20px 20px 0;
			-moz-border-radius: 			10px;
			-webkit-border-radius: 			10px;			
			border:							#000000 1px solid;
		}
		
		.contentBorder{
			position:						relative;
			filter:							alpha(opacity=30);
			-moz-opacity:					0.30;
			-khtml-opacity:					0.30;
			opacity:						0.30;
			-moz-border-radius: 			10px;
			-webkit-border-radius: 			10px;			
			border:							#000000 10px solid;
			background:						#000000 url(/images/layout/dubbelklik.gif) center no-repeat;
			cursor:							pointer;
		}
		
		.contentItemHolder{
			position:						relative;
			background:						#000 url(/images/layout/background_content_holder.png) repeat;
			overflow:						hidden;
			cursor:							pointer;
		}
		
		.contentItemHolder:hover{
			background:						#000000 url(/images/layout/dubbelklik.gif) center no-repeat;
			filter:							alpha(opacity=50);
			-moz-opacity:					0.50;
			-khtml-opacity:					0.50;
			opacity:						0.50;
		}
		
		.borderSize1{
			width:							77px;
			height:							77px;
		}
		
		.borderSize2{
			width:							152px;
			height:							77px;
		}
		
		.borderSize3{
			width:							194px;
			height:							194px;
		}
		
		.contentMargin1{
			margin:							-87px 0 0 10px;
			width:							77px;
			height:							77px;
		}
		
		.contentMargin2{
			margin:							-87px 0 0 10px;
			width:							152px;
			height:							77px;			
		}
		
		.contentMargin3{
			margin:							-204px 0 0 10px;
			width:							194px;
			height:							194px;
		}
		
		.contentItemHolder img{
			border:							#5D5D5D 1px solid;
		}
		
		.contentSize1{
			width:							97px;
			height:							97px;
		}
		
		.contentSize2{
			width:							172px;
			height:							97px;
		}
		
		.contentSize3{
			width:							214px;
			height:							214px;
		}

		.contentRowSize1{
			width:							117px;
			height:							214px;
		}
		
		.contentRowSize2{
			width:							192px;
			height:							214px;
		}
		
		.contentRowSize3{
			width:							234px;
			height:							214px;
		}
				
		.size2{
			position:					relative;
			width:						190px;
			height:						117px;
			overflow:					hidden;			
		}
		
		.size2_border_height{ height:	73px; float: left; }
		.size2_border_width{ width:		148px; float: left; }

		.size1{
			position:					relative;
			width:						115px;
			height:						115px;
			overflow:					hidden;
		}
		
		.size1_border_height{ height:	73px; float: left; }
		.size1_border_width{ width:		73px; float: left; }
		

		.size3{
			position:					relative;
			width:						232px;
			height:						232px;
			overflow:					hidden;
		}
		
		.size3_border_height{ height:	190px; float: left; }
		.size3_border_width{ width:		190px; float: left; }


	/* CONTENT HOLDER */
	
		#content_holder{
			position:					absolute;
			left:						0px;
			bottom:						175px;
			height:						254px;
			width:						100%;
			overflow:					hidden;
		}
		
		#content_holder_inside{
			overflow:					hidden;
		}
		
		.content_row{
			height:						254px;
			float:						left;
			overflow:					hidden;
		}
		
		.size2{
			width:						192px;
		}
		
		.size1{
			width:						117px;
		}
		
		.size3{
			width:						234px;
		}
		
		
	
	/* MAIN MENU */
	
		#main_menu{
			position:					absolute;
			bottom:						470px;
			width:						745px;
			padding:					0 123px 0 123px;
		}
	
		.menu_item{
			padding-left:				149px;
			float:						left;
			width:						0px;
			height:						53px;
			overflow:					hidden;
			cursor:						pointer;
		}
		
		.small{
			padding-left:				74px;
			height:						53px;
			float:						left;
		}
		
		#collectieMenu{
			float:						left;
			height:						53px;
			width:						149px;
			overflow:					hidden;
		}
		
		#collectieSubMenu{
			height:						106px;
			overflow:					hidden;
		}
		
		#collectieSubMenu li.menu_item{
			height:						53px;
		}
		
		.menu_item.home{
			background:					url(/images/menu/menu_home.png) top left no-repeat;			
		}

		.menu_item.nieuws{
			background:					url(/images/menu/menu_nieuws.png) top left no-repeat;			
		}
		
		.menu_item.contact{
			background:					url(/images/menu/menu_contact.png) top left no-repeat;			
		}
		
		.menu_item.klantenpas{
			background:					url(/images/menu/menu_klantenpas.png) top left no-repeat;			
		}
		
		.menu_item.nieuwsbrief{
			background:					url(/images/menu/menu_nieuwsbrief.png) top left no-repeat;			
		}		
		
		.menu_item.collectie{
			background:					url(/images/menu/menu_collectie.png) top left no-repeat;
		}
		
		.menu_item.small.women{
			background:					url(/images/menu/menu_women.png) top left no-repeat;
		}
		
		.menu_item.small.men{
			background:					url(/images/menu/menu_men.png) top left no-repeat;
		}		

		.menu_item:hover{
			background-position:		bottom left;
		}
		
		.menu_item.small:hover{
			background-position:		bottom left;
		}		
	

	/* TITLE / PAYOFF */
	
		#main_header{
			position:					absolute;
			width:						168px;
			height:						71px;
			bottom:						75px;
			padding:					0px 0 0 408px;
			overflow:					hidden;
		}
		
		h1#title{
			background:					url(/images/layout/main_logo.png) no-repeat center top;
			padding:					71px 0 0 0;
			height:						0px;
			overflow:					hidden;
		}
		
		h2#payoff{
			width:						0px;
			height:						0px;
			overflow:					hidden;
		}
		


	/* FOOTER LOGO'S */
		
		#footer{
			position:					absolute;
			bottom:						15px;
			width:						1020px;
			height:						50px;
			padding:					0;
			overflow:					hidden;
		}
		
		#footer a{
			float:						left;
			padding:					10px;
			text-transform:				uppercase;
			color:						#464646;
		}
		
		#footer a:hover{
			color:						#FFF;
		}
		
		.merk_item{
			float:						left;
			overflow:					hidden;
			cursor:						pointer;
			height:						50px;
			width:						70px;
		}
		
		.merk_10feet{background:			url(/images/merken/10feet.nl.png) 0px 0px no-repeat; width: 90px; }
		.merk_castiron{background:			url(/images/merken/castiron.nl.png) 0px 0px no-repeat; }
		.merk_dept{background:				url(/images/merken/dept.nl.png) 0px 0px no-repeat; }
		.merk_gauditrade{background:		url(/images/merken/gauditrade.com.png) 0px 0px no-repeat; }
		.merk_jcrags{background:			url(/images/merken/jcrags.nl.png) 0px 0px no-repeat; }
		.merk_mac-mode{background:			url(/images/merken/mac-mode.com.png) 0px 0px no-repeat; }
		.merk_mcgregor{background:			url(/images/merken/mcgregor.nl.png) 0px 0px no-repeat; }
		.merk_vanguard-clothing{background:	url(/images/merken/vanguard-clothing.com.png) 0px 0px no-repeat; }
		.merk_supertrash{background:		url(/images/merken/supertrash.us.png) 0px 0px no-repeat; }
		.merk_nolita{background:			url(/images/merken/nolita.it.png) 0px 0px no-repeat; }
		.merk_ra-re{background:				url(/images/merken/ra-re.it.png) 0px 0px no-repeat; }		
		
		.merk_item:hover{
			background-position:			0px -50px;
		}
	
	/* SCROLLBAR */
		
		#scrollBar_holder{
			position:					absolute;
			bottom:						160px;
			width:						768px;
			padding:					0 111px 0 111px;
			height:						40px;
			overflow:					hidden;
			visibility:					hidden;
		}
		
		.scroll_arrow{
			width:						16px;
			height:						16px;
			position:					relative;
			float:						left;
			cursor:						pointer;
			overflow:					hidden;
			z-index:					1000;
		}
		
	
		#scrollBar{
			background:					url(/images/layout/slider/bar.png) center repeat-x;
			height:						16px;
			width:						718px;
			z-index:					999;
			float:						left;
			overflow:					hidden;			
		}
		
		#handle{
			position:					relative;
			float:						left;
			height:						16px;
			width:						16px;
			text-align:					center;
			cursor:						pointer;
			z-index:					2000;
			background:					url(/images/layout/slider/slider.png) center no-repeat;
		}
		
		#scroll_left{
			background:					url(/images/layout/slider/left.png) center no-repeat;
		}
		
		#scroll_right{
			background:					url(/images/layout/slider/right.png) center no-repeat;
		}
		
	/* PRELOADING */
	

		#preloadCont{
			top:						0px;
			left:						0px;
			width:						100%;
			height:						100%;
			position:					absolute;
			background:					#000000;
			z-index:					50000;
		}
		
		#preloadText{
			position:					absolute;
			width:						100%;
			text-align:					center;
			bottom:						2px;
		}
		
		#preloadBar{
			position:					absolute;
			width:						100%;
			height:						12px;
			border:						#FFF 1px solid;
			border-width:				1px 0 0 0;
			padding:					1px 0 1px 0;
			bottom:						0px;
			overflow:					hidden;
		}
		
		#preloadBarFill{
			position:					relative;
			float:						left;
			width:						0px;
			height:						12px;
			background:					#787878;
		}
		
	
		
	/* OVERIGE */

		.bgBut{
			position:					absolute;
			bottom:						5px;
			cursor:						pointer;			
		}
		
		#nextImgBut{
			right:						5px;
		}
		
		#prevImgBut{
			left:						5px;
		}		


		#music{
			position:					absolute;
			top:						-4px;
			padding-left:				477px;
			height:						14px;
			overflow:					hidden;
			text-align:					center;
		}

		.error_java {
			position:					absolute;
			top:						0;
			left:						0;
			width: 						100%;
			background-color: 			red;
			color: 						white;
			z-index:					65009;
		}
		
		.error_java p {
			padding: 					10px;
			font-size:					12px;
			font-weight:				bold;
		}
		
		.error_java p a{
			font-size:					12px;
			font-weight:				bold;
		}
		
		.loading{
			background:					url(/images/layout/loading.gif) center no-repeat;
		}
		
		.dubbelklik{
			background:					#000000 url(/images/layout/dubbelklik.gif) center no-repeat;
			cursor:						pointer;
		}
		
		.hidden{
			visibility:					hidden;
			display:					none;
		}
		
		input[type=text]{
			background:					none;
			color:						#FFFFFF;
			border-bottom:				#FFFFFF 1px dashed;
			height:						15px;
		}
		
		input[type=submit]{
			background:					#606060;
			color:						#FFFFFF;
			border:						#FFFFFF 1px dashed;
			height:						18px;
			width:						25px;
			text-align:					center;
			overflow:					hidden;
			font-weight:				bold;
		}
		
		input[type=submit]:hover{
			background:					#FFFFFF;
			color:						#000000;
		}
		
/* mediaboxAdvanced - black theme */

#mbOverlay {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#mbOverlay.mbOverlayFF {
	background: transparent url(/images/layout/popbox/80.png) repeat;
}

#mbOverlay.mbOverlayIE {
	position: absolute;
}

#mbCenter {
	position: absolute;
	z-index: 9999;
	left: 50%;
	overflow: hidden;
	background-color: #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
	-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
}

#mbCenter.mbLoading {
	background: #000 url(/images/layout/popbox/BlackLoading.gif) no-repeat center;

/*	This style is applied only during animation.	*/
/*	For example, the following turns off shadows,	*/
/*	helping browser performance on slow systems.	*/
/*	To leave shadows on, just remove these lines:	*/
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#mbImage {
	position: relative;
	left: 0;
	top: 0;

/*	Begin styles for inline content, if no style is given	*/
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	text-align: left;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 10px;
	overflow:hidden;
}

#mbImage a, #mbImage a:link, #mbImage a:visited {
	color: #ddd;
}

#mbImage a:hover, #mbImage a:active {
	color: #fff;
}

/*	End inline content styles	*/

#mbBottom {
	min-height: 20px;
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #999;
	text-align: left;
	padding: 0 10px 10px;
}

#mbTitle {
	display: inline;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	font-size: 12px;
}

#mbNumber {
	display: inline;
	color: #999;
	line-height: 14px;
	font-size: 10px;
	margin: auto 10px;
}

#mbCaption {
	display: block;
	color: #999;
	line-height: 14px;
	font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
	display: block;
	float: right;
	height: 20px;
	margin: 0;
	outline: none;
}

#mbPrevLink {
	width: 69px;
	background: transparent url(/images/layout/popbox/BlackPrevious.gif) no-repeat center;
}

#mbNextLink {
	width: 41px;
	background: transparent url(/images/layout/popbox/BlackNext.gif) no-repeat center;
}

#mbCloseLink {
	width: 46px;
	height: 46px;
	background: transparent url(/images/layout/popbox/closebox.png) no-repeat center;
}

/*	Styles for flash version alert	*/

#mbError {
	position: relative;
	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	border: 10px solid #700;
	padding: 10px 10px 10px;
	margin: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
	color: #d00;
	font-weight: bold;
	text-decoration: underline;
}

			
			.popupHolder{
				display:					none;
			}
			
			#popupActie{
				position:					absolute;
				bottom:						350px;
				padding:					155px 0 0 155px;
				width:						0;
				height:						0;
				background:					url(../images/button_jonsons.png) no-repeat;
				margin:						0 0 0 750px;
				overflow:					hidden;
				cursor:						pointer;
				z-index:					9997;
			}