/*------------------------------------
--------------------------------------
1. Typography
**
kleuren array
blauw ->   #00ADEF
oranje ->  #00ADEF
roze   ->  #ED008C
groen ->   #A7CD39
**

*/
/* General element settings */
* {
	margin: 0; 
	padding: 0;
}
html{
} 
body{
	font-family: verdana;
 	font-size:14px;
	color:#000066;
  	padding: 0px;
  	margin: 50px;
 	background-color: cyan;
	background: #00ADEF url("../img/content/Head.gif") repeat-x;
 	text-align: center;
}
table{
	width: auto;
	border-width: 0px;
	border-style: solid;
	border-color: #F78F1E;
	padding: 0px;
	margin: 0px;
}
td {
	border: 1px solid #F78F1E;	
}
#mainContent td {	width: 200px;}
div, p {margin: 0; padding: 0;}
td{	font-size: 11px;}
td.text { min-width: 200px; color: #ffffff; background-color: #F78F1E;}
ul, ol { margin: 0; padding: 0;}
li { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
li a { margin: 0; padding: 0;}
h4 span { display: none;}

/*  specific elements settins */
#contact {	line-height: 17px;}
.small{	font-size: 9px;}

input.blue_button { border: 2px outset #00ADEF; font: bold 11px/13px Verdana;}
span.flash_product {display: block; font-size: 10px; margin: 0; padding: 4px 1px;  }
span#language_shortcut { 
	display: block; 
	margin: 0; padding:0; 
	position: absolute; top: 142px; right: 1px; 
	z-index: 600;
	height: 18px; max-width: 50px;
	background-color: #ccc;
	border: 1px solid #aaa; border-width: 0 1px 1px 1px;
}
span#language_shortcut a img {border: 0;}

/*----------------------------------------- 
3. Site Layout :: POSITIONING elements  !!!!!!!!!!!
------------------------------------------------*/

#siteContainer{
	position: relative;	
	width: 964px; margin: 0 auto;
	text-align: left;
	/*background: #D1D2D4 url("../img/assets/nav.right.gif") -3px 0 repeat-y;*/
	/**background-color: #D1D2D4;
	/*border: 1px solid red; border-width: 0px 1px;*/
}

#mainContent{
	width: 624px; min-height: 285px;
	position: relative;
	text-align: left;
	font-family:"Century Gothic";
	float: left; 
	margin: 0px; padding: 20px 0 20px 20px;
	background-color: #a8cde5;
}

#right_column {	
	position: relative; 
	width: auto; height: auto;
	margin:0 0 0 644px;
	background-color: #999;
}

/* 30% brede grijze zijkant (winkelmandje en login)  */
#winkelmantje {
	padding: 2px;
	width:auto;
	text-align: left;
	margin: 0px;
	font: 400 9px Verdana, Helvetica, san-serif;
}
#stats, #statistics, #login, #language { 
	position: relative;
	padding: 2px;
	margin: 0px;
	width: auto;
	font: bold 11px Verdana, Helvetica, san-serif;
}
#mailinglist{
	margin-top:0px; clear: none;
	margin-bottom:20px;
}

/*
---------------------------------------------------- 
4. Header Layout
-------------------------------------------------------------------------------------------------------------------*/
#header{
	background: transparent url("../img/content/header.gif") 50% 0 no-repeat ;
	height:271px;	

	position: relative;
}
#header h1{
	display:block; 
	max-width: 300px; max-height: 70px;
	position: absolute; left: 0px; top: 40px;
	z-index: 512;
}
#header h1 span{
	display: none;
}

#mainContent h2{
  	font-size:18px;
}
#footer {	font-size: 12px;  }
#mainContent .showItem h3{
	font-size:16px;
}
#mainContent #invullen { background-color: #D1D2D4; margin: 10px 0;}
#mainContent #invullen a{
	font-weight:bold;
}
#mainContent #invullen a:hover{
	color:#000066;
}




/* 
------------------------------------------------
5.nav Layout
-------------------------------------------------------------------------------------------------------------------*/

#nav{
	height:140px;
	background-color: #ffffff;
	margin: 0 !important; padding: 0 !important;
}

#topbar{
	height:60px;
	background-image:url(../img/content/Topbar_left.gif);
	background-repeat:no-repeat;
	margin: 0 !important; padding: 0 !important;
}

#topbarright{
	height:60px;
	background-image:url(../img/content/Topbar_right.gif);
	background-repeat:no-repeat;
	margin:-60px 0 0 644px;
}

#left_four {
	width: 644px;
	position: relative;
	/**/ float: left; clear: none;
	background-color: #ffffff;
}
#contact{
	width: 310px; position: absolute; top: 271px; left: 644px; 
	padding-left: 10px; z-index: 300;
	background-color: #CC0;
	font-size:11px; clear: none;
	height: 140px;
}
#productInfo { clear: none; }


/* all settings for navigation blocks  (in #nav !!)*/
#overFunnyMe, #winkel, #bestelInfo, #productInfo {
	margin-right: 2px;
	padding: 0px;
	float:left; clear: none;
	font-size:11px;
	height:140px;
	width: 159px;  
}

#left_four div div ul { }
#left_four div div ul li { list-style: none;  padding-left: 3px; }
	#left_four #winkel div ul ul {	margin:0px;	padding: 0px;}

		#left_four div div ul li.li_submenu { font-weight: bold;}
		#left_four div div ul li.li_submenu ul li { font-weight: normal;}
		#left_four div div ul li.li_submenu ul li {
			list-style: none;
			background: transparent url("../img/assets/itemO.gif") 0 50% no-repeat;
			margin:0px;
			padding: 2px 0px 2px 20px;
		}
	#contact div, #contact ul { margin: 0px; padding: 0px;}
	
	
#overFunnyMe a,
#winkel a,
#bestelInfo a,
#productInfo a {
	padding: 0px 0; margin: 0px;
	text-decoration: none; 
    max-width: 150px; 
    color:#000066;
    font: 500 11px Verdana, san-serif;
}

#overFunnyMe div ul li a:hover{	color:#00ADEF; background-color:#FFF;}
#winkel div ul li a:hover, #winkel div ul li ul li a:hover { color:#F78F1E; background-color:#FFF; }
#bestelInfo div ul li a:hover {color:#ED008C; background-color:#FFF;}
#productInfo div ul li a:hover {color:#A7CD39; background-color:#FFF;}
#contact div ul li a:hover {text-decoration: underline; background-color:#FFF;} 


#overFunnyMe div ul li  a:visited,
#winkel div ul li  a:visited,
#bestelInfo div ul li  a:visited,
#productInfo div ul li  a:visited,
#contact div ul li  a:visited{ 	color:#000066;}

#overFunnyMe, #overFunnyMe_bottom {	background-color:#A7CD39; }
#winkel, #winkel_bottom {	background-color:#F78F1E;}
#bestelInfo, #bestelInfo_bottom {	background-color:#ED008C;}
#productInfo, #productInfo_bottom {	background-color:#099}
#contact_bottom {	background-color: #D1D2D4;}

#overFunnyMe div h4, #winkel div h4, #bestelInfo div h4, #productInfo div h4, #contact div h4 {
	margin: 0px; padding: 0px; 
	height: 20px; 
}


/*  bottom */
#left_four_bottom {
	width: 644px;
	position: relative;
	/**/ float: left; 
	margin: 0px; padding: 0px;
	background-color: #ffffff;}	
#contact_bottom{
	width: auto; position: relative;
	margin-left: 644px;
	background-color: #CC0;
	font-size:11px;
	height: 30px;
}
#overFunnyMe_bottom,#winkel_bottom,#bestelInfo_bottom,#productInfo_bottom {	
	margin:0 0.25% 0 0;
	padding:0px;
	width: 159px; overflow: hidden;
	float:left; clear: none;
	font-size:11px;
	height:30px;
}



/* 

--------------------------------------

6. content Layout

-------------------------------------------------------------------------------------------------------------------*/


#mainContent .showItem h3{
	background-color: #D1D2D4;
	margin-bottom:0px;
	padding:2px;
}





#mainContent .field{
	margin-left:200px;
}

/*Gasten boek invul deel*/ 

#mainContent .field{
	margin-left:200px;
}

#mainContent #sender{
	margin-left:55px;
} 

#mainContent #sender #name,
#mainContent #sender textarea{
	padding:0px;
	width:270px;
}



#mainContent #sender td{
	border-width:0px;
}



#mainContent #sender #btn{
	margin-top:90px;
}

.image{
	margin: 0px 2px  2px 0;
}


/* 

-------------------

7.   wiki layouts
----------------------------------------------------------------------------------------------------------float: right; clear: none;
---------*/


#mainContent h3, #mainContent h4, #mainContent h5 { margin-top: 20px; margin-bottom: 10px; }


#mainContent table { margin-top: 5px; margin-bottom: 5px; }
#mainContent div { margin-top: 5px; margin-bottom: 5px; padding: 5px; }

#mainContent p { margin-top: 5px; margin-bottom: 5px; }

#mainContent ul { margin-top: 5px; margin-bottom: 20px; }

#mainContent form { margin-top: 5px; margin-bottom: 20px; }












/* 

-------------------

7. Right colum Layout

----------------------------------------------------------------------------------------------------------float: right; clear: none;
---------*/
#right_column a { color: #00ADEF; margin-left: 14px;}


#winkelmantje h3, #mailinglist h3, 
#stats h3, #login h3, #language h3 { 
	margin: 12px 0px 10px 0px; padding: 8px 2px 0px 40px; 
	height: 18px; width: auto; 
	vertical-align: middle;
	font: bold 13px Verdana, san-serif;
}
#winkelmantje h3 { background: white url('../img/assets/cart_klein.gif') 0 50% no-repeat; }
#login h3 { background: white url('../img/assets/member_klein.gif') 0 50% no-repeat; }
#stats h3 { background: white url('../img/assets/stats_klein.gif') 0 50% no-repeat; }
#language h3 { background: white url('../img/assets/language.gif') 0 50% no-repeat; }
#login {position: relative;}
span.topalign { position: absolute; top: 10px; right: 10px; }

#language ul { margin: 0; padding: 0;}
#language ul li { margin: 5px 0 5px 25px; list-style-image: url(../img/assets/itemX.gif);}
#right_column a { text-decoration: none; }
#language ul li a img { border: 0; }

#winkelmantje fieldset, #winkelmantje form { border: 0; padding: 0; margin: 0;}
table#tbl_cart { background-color: white;}
table#tbl_cart, 
 table#tbl_cart th, 
 table#tbl_cart td { margin: 0; padding: 0; border: 0;border: 1px solid #D1D2D4;}
 
table#tbl_cart th { border: 1px solid #D1D2D4; background-color: #F78F1E;}

input.cart_btn { 
	border-color: #F78F1E; 
	background-color: #f7eee5; 
	font: 300 10px/11px Verdana, san-serif;
	letter-spacing: 0px;
	padding: 2px;
	margin: 3px 0px 3px 3px;
	width: 225px;
	word-spacing: 0px;
}
td.checkbox { max-width: 14px; }
input.cart_checkbox { width: 12px; height: 12px; font-size: 7px;}
td.td_cart_name {font: 600 9px Verdana, san-serif;  width: 100px;}
td.td_cart_price {font: normal 9px Verdana, san-serif;  width: 45px;}
td.td_cart_number {max-width: 30px;}
input.cart_number { width: 30px; height: 16px; font: normal 9px Verdana, san-serif;}

#login fieldset {margin: 0; padding: 0; border: 0;}
form#frmLogin { margin: 0; padding: 0; }
table.frmLogin { padding: 0; margin: 0; border: 0;}
table.frmLogin td { padding: 0; margin: 0; border: 0;}
td.labeler { 
	max-width: 150px; width: 130px; 
	letter-spacing: -1px; 
	font: normal 10px/10px Verdana, san-serif; 
	padding-left: 14px !important;
	background: transparent url('../img/assets/itemX.gif') 0 50% no-repeat; 
}
td.labeler:first-letter {font-weight: bold;}
td.inputter { width: auto; text-align: right; }
.inputter input { 
	width: 100px; 
	height: 14px; 
	text-align: left;
	background-color: #DDD;
	font: normal 10px/10px Verdana, san-serif;
	border-width: 2px; border-style: ridge groove;
	border-color:  #00ADEF;
}
/*
kleuren array
blauw ->   #00ADEF
oranje ->  #F78F1E
roze   ->  #ED008C
groen ->   #A7CD39
*/


#mailinglist .textveld{
	width: 120px; border: 1px solid #A7CD39;
}

/*

-------------------------------------------------------------------------------------------------------------------

8. Shop Layout with products (name, text, picture, date, type)

-------------------------------------------------------------------------------------------------------------------*/


#products_sorts { position: relative; width: auto; min-height: 100px;}
#products_sorts div.product_sorts { 
	margin: 0px; padding:0px;
	text-align: left; clear: both;
}
#products_sorts div.product_sorts a { 
	color: #F78F1E; 
	display: block;
	margin: 5px 10px; padding: 2px 10px 0px 10px;
	border-left: 5px solid #F78F1E;
	font: 600 14px/18px Verdana, san-serif;
}
#products_sorts div.product_sorts a:hover { 
	color: #A7CD39; 
	border-left: 5px solid #A7CD39;
}

#products { position: relative; }
#products div.product { margin: 20px 0 10px 0; padding: 0 10px 0 0;  position: relative; clear: left; height: auto; min-height: 285px; }
#products div.product dl {border-top: 1px dashed #000066;  padding: 5px 0 25px 0; }
#products div.product dl dt.prod_name { width: auto; height: 20px;  font: bold 1.2em/1em Verdana; text-decoration: underline; color: #A7CD39; }
#products div.product dl dd { min-height: 20px;}
#products div.product dl dd.prod_text {  margin: 5px 250px 5px 5px; font-size: 11px; }
#products div.product dl dd.prod_picture {float: right; text-align: right; clear: right; width: 220px; height: 250px; overflow: hidden; margin-top: 10px; }
#products div.product dd.prod_type { 
	color: #F78F1E; 
	margin-top: 25px;	
}
#products div.product dl dd.prod_price {
	font-weight: bold; 
	color: white; 
	border: 2px groove #00ADEF; 
	background-color: #00ADEF;
	width: 75px;
}
#products div.product dl dd.prod_to_cart { }

dd.prod_price, dd.prod_to_cart, dd.prod_type {
	padding: 3px; 
	display: block;
	position: relative; 
	font-weight: bold; 
	width: auto; 
	text-align: left; 
}	
#products div.product dl dd.prod_to_cart a img { padding: 0px; margin: 0px; border: 0px;}
#products div.product dl dd.prod_to_cart a { 
	font-weight: bold; font-size: 14px; 
	text-decoration: none; 
	padding: 0px; margin: 0px; 
	color: #00ADEF;
}





#order {width: auto;}
/* checkout cart specific */
#order table#tbl_checkout {
	margin: 15px 0 15px 0; padding: 0; width: 100%;
	border-width: 2px 0 5px 0; border-color: #A7CD39;
}
#order table#tbl_checkout tr td {border-color: #A7CD39;}
#order table#tbl_checkout tr th {font-weight: bold; background-color: #A7CD39;}

/*  normal form specific */
#order table#tbl_client_order { 
	margin: 25px 0 15px 0; padding: 0; width: 100%; 
	border-width: 2px 0 5px 0; border-color: #F78F1E;
}
#order table#tbl_client_order tr td {border-color: #F78F1E;}
#order table#tbl_client_order tr th {font-weight: bold; background-color: #f7cea2;}

/*  delivery form specific  */
#order table#tbl_client_delivery {
	margin: 25px 0 15px 0; padding: 0; width: 100%;
	border-width: 2px 0 5px 0; border-color: #00ADEF;
}
#order table#tbl_client_delivery tr td {border-color: #00ADEF;}
#order table#tbl_client_delivery tr th {font-weight: bold; background-color: #00ADEF; margin: 0; padding: 0;}


table tr td.td_auto { 
	background: #ffffff none/*url('../img/assets/pijl.gif') 0px 50% no-repeat*/; 
	padding: 0 0 0 40px;
	border-width: 0 0 0 2px;
}
#order table tr td.td_200, #order table tr td.td_200b { 
	width: 200px; 
	margin: 0; padding: 0;
	height: 25px;
	font: 800 13px/1em Verdana, san-serif;
}
#order table tr td.td_200 {
	background-color: #f7cea2;
	border-right: 5px solid #f78f1e;}
#order table tr td.td_200b { 
	background-color: #8dd4ef;
	border-right: 5px solid #00ADEF;
}	
td.td_50 { 
	max-width: 50px; 
	margin: 0; padding: 0; 
	height: 25px;
	font: 800 13px/1em Verdana, san-serif;
	background-color: #fff;
}
td.td_30 { 
	max-width: 30px; 
	margin: 0; padding: 0;
	background-color: #fff;
	height: 25px;
	font: 800 13px/1em Verdana, san-serif;
}
td.td_auto { 
	width: auto; 
	margin: 0; padding: 0;
	height: 25px;
	font: 800 13px/1em Verdana, san-serif;
}


td.td_vauto, th.td_vauto {min-width: 200px; width: auto; text-align: left;}
td.td_v50, th.td_v50 {max-width: 60px; width: 50px;}
td.td_checkbox, th.td_v30 {max-width: 35px; width: 30px;}

#order table tr td input.fld300 { width: 300px;}
#order table tr td input.fld100 { width: 200px;}
#order table tr td input.fld30 { width: 30px;}
#order table tr td input.fld50 { width: 70px; padding: 0px; margin: 0;}
#order table tr td select.fld100 {width: 221px;}

#order fieldset, #order fieldset form { border: 0; margin: 0; padding: 0;}
.subtotal { font-weight: bold; font-variant: small-caps; background-color: #f7cea2;}


/*

-------------------------------------------------------------------------------------------------------------------

9. Footer Layout

-------------------------------------------------------------------------------------------------------------------*/

#footer {
	clear: both;
	min-height: 25px;
	text-align: right;
	margin-bottom: 20px;
	border-top: 3px solid white;
}


/***** (    FADER styles    )****************/


.picture {}
.fader {}
.fader_closer { 
	display: block;  position: absolute; top: 2px; right: 2px; 
	cursor: pointer; _cursor: hand; 
}
#close_fader { position: relative; display: block; width: auto; text-align: right;}
.fader_loader { 
	display: block; 
	/*position: absolute; left: 50%; top: 50%;margin-left: -110px; */ 
	margin-top: -10px; 
}
/** specific for this fader   **/
div#fader span { width: 100%;}
div#fader img.fader_picture {  }

div#fader {
	padding: 0;
	border: 1px dotted #DDDDDD;
	top: 0; left: 0; height: auto;
	display: none; z-index: 1000; position: fixed; /**/
	background: #FFFFFF;
	/**  section seen on a Bramus! project **/
	filter:alpha(opacity=90); 	/* IE - not using the underscore here as we want IE7 to read this property too! */
	-moz-opacity:0.90;			/* FX */
	opacity: 0.90;				/* ZE OTHERZ */	
	/* "position:fixed" fix for IE */
	_position: absolute;
	_text-align: center;			/* IE FIX */
	vertical-align: top;
}

div#fader #fader_holder #fader_clip{
	text-align: center; z-index: 9999;  vertical-align: middle;
}