/*
	Main parts in container for layout.tpl
	This uses #M0_container to put the following in
	---------------------------------
	-           M1_top				-
	---------------------------------
	-           M1_banner           -
	---------------------------------
	-          M1_topmenu           -
	---------------------------------
	-					            -
	-					            -
	-         M1_middle             -
	-					            -
	-					            -
	---------------------------------
	-         M1_bottommenu			-
	-         M1_adminmenu			-
	---------------------------------
	-         M1_disclaimer         -
	---------------------------------
	             M1_buffer              

	M1_middle consists of:
	---------------------------------
	-					  -         -
	-					  -         -
	-	  M2_content 	  - M2_menu -
	-					  -         -
	-					  -         -
	---------------------------------

	M2_content frontpage consists of:
	----------------------------------
	- M3_frontcontent - M3_frontleft -
	----------------------------------

	M2_content consists of:
	-----------------------
	-	  M3_heading	  -
	-----------------------
	-	   M3_error	      -
	-----------------------
	-	  M3_browser	  -
	-----------------------
	-	  M3_content	  -
	-----------------------
	-	  M3_browser	  -
	-----------------------
*/
html, body {
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 11px;
	word-spacing: 95%;
	font-family: verdana, arial;
	background-color: #f1ddca;
}

body {
	background-image: url('/styles/beschuitje/logo_back.gif');
	background-repeat: no-repeat;
	background-position: top center;
}

* html #M1_middle { height: 100%; width: 100%; }

img {
	border: 0px;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

label {
	clear: both;
	float: left;
	margin: 0;
	width: 25%;
	height: 22px;
	line-height: 22px;
	vertical-align: middle;
	padding: 2px;
} 

fieldset p {
	margin: 0;
	padding: 0;
	float: left;
	width: 70%;
	height: 22px;
	line-height: 22px;
	vertical-align: middle;
	padding: 2px;
}

.errorfield {
	border: 1px solid red;
}

.errormessage {
	color: red;
	padding: 0 0 0 10px;
	line-height: 22px;
	vertical-align: middle;
}

.texta {
	width: 492px;	
}

#M0_container {
	width: 773px;
	margin: 0px auto;
	padding: 0;
}

#M1_top_shade {
	height: 3px;
	width: 773px;
	background-image: url('/styles/beschuitje/banner_top_shade.jpg');
	background-repeat: repeat-x;
}

	#M2_top_nav {
		position: absolute;
		text-align: center;
		z-index: 60;		
		width: 773px;
		height: 10px;
		padding: 3px 0 0 0;
	}

#M1_top {
	height: 70px;
	width: 773px;
	background-color: #FFF;	
}

	#M2_top_shade {
		width: 100%;
		height: 3px;
	}
	
#M1_top_content {
	width: 100%;
	height: 70px;
	background-image: url('/styles/beschuitje/banner_background.jpg');
	background-repeat: no-repeat;
}

#M1_admin_top_content {
	width: 100%;
	height: 70px;
	background-image: url('/styles/beschuitje/admin_banner_background.jpg');
	background-repeat: no-repeat;
}


		#M2_addvert {
			left: 5px;
			position: relative;
			z-index: 15;
			width: 240px;
			float: left;
			background-repeat: no-repeat;				
			height: 70px;
		}
		
		#M2_telephone {
			position: relative;
			z-index: 40;
			width: 300px;
			float: left;		
			height: 70px;
			background-image: url('/styles/beschuitje/telnr.jpg');
			background-repeat: no-repeat;
			background-position: bottom;			
		}
		
		#M2_logo {
			position: relative;
			z-index: 30;
			width: 220px;
			float: left;		
			height: 70px;
			background-image: url('/styles/beschuitje/banner_logo.jpg');
			background-repeat: no-repeat;
			background-position: center;
		}
		
		#M2_logo a {
			display: block;
			width: 100%;
			height: 100%;
		}

		#M2_addvert a {
			display: block;
			width: 100%;
			height: 100%;
		}

	
#M1_topline {
	width: 773px;
	height: 3px;
	overflow: hidden;
	background-image: url('/styles/beschuitje/banner_redline.jpg');
	background-repeat: no-repeat;
}

#M1_topmenu {
	height: 20px;
	width: 768px;
	padding: 0 0 0 5px;
	margin: 0;
	background-image: url('/styles/beschuitje/menu_items.jpg');
	background-repeat: no-repeat;
}

#M1_middleshade {
	height: 20px;
	width: 773px;
	background-image: url('/styles/beschuitje/banner_bottom_shade.jpg');
	background-repeat: no-repeat;			
}

#M1_admin_middleshade {
	height: 20px;
	width: 773px;
	background-image: url('/styles/beschuitje/admin_banner_bottom_shade.jpg');
	background-repeat: no-repeat;			
}
	
#M1_middle {
	width: 800px;
	background-image: url('/styles/beschuitje/main_background.jpg');
	background-repeat: repeat-y;
	min-height: 600px;
}

#M1_admin_middle {
	width: 773px;
	background-image: url('/styles/beschuitje/admin_main_background.jpg');
	background-repeat: repeat-y;
	min-height: 600px;
}

	#M2_menu {
		/* 215 max total */
		width: 210px;
		padding: 0 2px 2px 7px;
		z-index: 3;
		float: left;
		background-image: url('/styles/beschuitje/logo_back.jpg');
		background-position: 0 126px;
		background-repeat: no-repeat;
		min-height: 550px;
	}
	
	#M2_contentintro {
		/* 550 max total 24 + 439 */		
		width: 510px;
		padding: 0 12px 0 28px;
		float: left;	
	}

	#M2_contentadmin {
		/* 550 max total 24 + 439 */		
		width: 730px;
		padding: 0 12px 0 8px;
		margin: 0 0 0 10px;
		float: left;
	}	
	
	#M2_content {
		/* 550 max total 24 + 439 */		
		width: 510px;
		padding: 0 12px 0 28px;
		float: left;	
	}
		
		#M3_heading {
			padding: 0 0 12px 0;
		}
		
		#M3_error {
			color: red;
			font-size: 12px;
			padding: 0 0 4px 0;
			text-align: right;
			font-weight: bold;
		}
		
		#M3_content {
			width: 520px;
		}
		
		#M3_browser {
			width: 100%;
			color: black;
		}
		
		#M3_leftbrowser {
			float: left;
			width: 30%;
			color: white;
			padding-left: 2px;
		}
		
		#M3_pagebrowser {
			float: left;
			text-align: center;
			width: 40%;
			color: black;
		}
		
		#M3_rightbrowser {
			float: right;
			text-align: right;
			width: 30%;
			color: white;
			padding-right: 2px;
		}

#M1_bottom {
	width: 773px;
	height: 11px;
	background-image: url('/styles/beschuitje/bottom_shade.jpg');
	background-repeat: no-repeat;
}

#M1_admin_bottom {
	width: 773px;
	height: 11px;
	background-image: url('/styles/beschuitje/admin_bottom_shade.jpg');
	background-repeat: no-repeat;
	text-align: center;
	padding: 8px 0 0 0;
}
		
#M1_disclaimer {
	text-align: center;
	font-size: 11px;
	padding: 0 0 0 235px;
	color: #c0c0c0;
}

#M1_disclaimer .code {
	color: #c0c0c0;
}


#M0_error {
	width: 100%;
	font-family: arial;
	font-size: 8pt;
}

/* Popup layout
-----------------------------------------------------*/
#M0_popupcontainer {
	margin: 0px auto;
	border: 1px solid #c0c0c0;
	width: 500px;
	min-height: 260px;
	background-color: #FFF;
	padding: 10px;
}


/* Boxed boxes ;-)
--------------------------------------------------*/
#boxed {
	padding: 10px 0 0 0;
	margin: 0 0 10px 0;
	border-top: 1px solid #d6d2cf;
	width: 98%;
}

#boxed .boxtitle {
	padding: 0 2px 0 2px; 
	margin: 0 0 0 0;
	font-size: 13px;
	/* line-height = height */
	line-height: 13px;
	color: #c32d33;
	font-weight: bold;
}

#boxed .boxcontent {
	padding: 2px; 
	margin: 0 0 0 0;
	color: #231f20;
}

.boxed .boxcontent dl	{ margin: 0; padding: 0; }
.boxed .boxcontent dd	{ float: left; width: 25%;  margin: 0; padding: 0; min-height: 20px; text-align: left; }
.boxed .boxcontent dt	{ float: left; width: 70%;  margin: 0; padding: 0; min-height: 20px; text-align: left; }

#boxed .boxsubcontent {
	width: 70%;
	margin: 7px;
	padding: 5px;
	float: left;
}
/*
 * ADMIN M2_contentadmin BOXED
 */

	#M2_contentadmin .boxed {
		width: 720px;
	}

#boxed .boximage {
	width: 120px;
	min-height: 123px;
	text-align: center;
	float: left;
	padding: 2px; 
	margin: 5px;
	overflow: hidden;
	font-weight: bold;
	border-left: 1px solid #000;
	border-top: 2px solid #000;
	border-bottom: 2px solid #A2A;
	border-right: 1px solid #000;
	background: #efa;
}

#boxed .boximageleft {
	text-align: center;
	float: left;
	margin: 2px;
	overflow: hidden;
	font-weight: bold;
}


.boxed {
	padding: 0 0 0 0;
	margin: 0 0 10px 0;
	border-top: 1px solid #d6d2cf;
	width: 96%;
}

.boxed .boxtitle {
	padding: 4px 2px 0 2px; 
	margin: 0;
	font-size: 13px;
	/* line-height = height */
	line-height: 13px;
	color: #c32d33;
	font-weight: bold;
}

.boxed .boxcontent {
	padding: 2px; 
	margin: 0 0 0 0;
	color: #231f20;
}

.boxed .boxsubcontent {
	width: 70%;
	margin: 7px;
	padding: 5px;
	float: left;
}

.boxed .boximage {
	width: 120px;
	min-height: 123px;
	text-align: center;
	float: left;
	padding: 2px; 
	margin: 5px;
	overflow: hidden;
	font-weight: bold;
	border-left: 1px solid #000;
	border-top: 2px solid #000;
	border-bottom: 2px solid #A2A;
	border-right: 1px solid #000;
	background: #efa;
}

.boxed .boximageleft {
	text-align: center;
	float: left;
	margin: 2px;
	overflow: hidden;
	font-weight: bold;
}
/* End Boxed boxes ;-) */

/*Clears the floated menu items.
Assigned to a BR tag placed just before
menuwrapper's closing DIV tag*/
.clearit {
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
}
/*
p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
We set padding and margin to zero to eliminate all indentation, turn bullets off,
and set a font-family different from the global font-family declared for the
body element above. This sets font for just the menu. Do not add a font-size here.
*/
#p7menubar {
	width: 756px;
}
#p7menubar, #p7menubar ul {
	padding: 0;
	margin: 0;
}
/*
Root-Level Links.  Do not change the first two properties.
Adjust padding values to make the root links taller and to offset them
from the left and right edges of the link box. The border right creates a
separator between links. Font-size is set here and will apply to all menu levels.
Font color is set to light gray.
*/
#p7menubar a {
	display: block;
	text-decoration: none;
	border-right: 1px solid #fff;
	font-size: 10px;
	color: #fff;
	height: 16px;
	width: 78.5px;
}
/*
Class assigned to those Root-Level links that have associated Sub-Menus.
The top and bottom padding assigned this element must be the same as
that assigned to the p7menubar a element. The right padding is increased
to accomodate the display of background image depicting a downward
pointing arrow.
*/
#p7menubar a.trigger {
	background-image: url(images/p7PM_dark_south.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

#p7menubar li {
	float: left;
	width: 90px;
	height: 20px;
}
#p7menubar li a {
	padding: 3px 6px 0 5px;
}
#p7menubar li ul li a {
	padding: 2px 2px 0 5px;
}

#p7menubar li ul, #p7menubar ul li  {
	width: 104px;
	padding: 4px 0 3px 0;
}

#p7menubar ul li a  {
	color: #565656;
	border-right: 0;
	width: 180px;
}

#p7menubar li ul {
	position: absolute;
	display: none;
	color: #a00;
	background: #fbf5ee;
	background-image: url('/styles/beschuitje/dropdown_menu.jpg');
	background-repeat: repeat-x;
	border-left: 1px solid #8b5d2a;
	border-right: 1px solid #8b5d2a;
	border-bottom: 1px solid #8b5d2a;		
	width: 190px;	
}

#p7menubar li:hover {
	background-image: url('/styles/beschuitje/dropdown.jpg');
	background-repeat: repeat-x;
}
#p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a {
	color: #000000;
}
#p7menubar li:hover li:hover {
	background-image: none;
}

#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
	display: block;
}

#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
	color: #000000;
	background-color: transparent;
}

#p7menubar ul a:hover {
	color: #c0c0c0!important;
}
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#p7menubar li {width: auto;}

#p7menubar li ul {
	list-style: none;
}

#p7menubar2, #p7menubar2 ul {
	padding: 0;
	margin: 0;
}

#p7menubar2 a {
	display: block;
	text-decoration: none;
	border-right: 1px solid #fff;
	font-size: 10px;
	color: #fff;
	width: 104px;
}

#p7menubar2 li {
	float: left;
	width: 110px;
	height: 14px;
	padding: 0;
}
#p7menubar2 li a {
	padding: 0;
}

#p7menubar2 li ul, #p7menubar2 ul li  {
	width: 104px;
}

#p7menubar2 ul li a  {
	color: #565656;
	border-right: 0;
	width: 104px;
}

#p7menubar2 li ul {
	position: absolute;
	display: none;
	color: #a00;
	background: #fbf5ee;
	background-image: url('/styles/beschuitje/dropdown_menu.jpg');
	background-repeat: repeat-x;
	border-left: 1px solid #8b5d2a;
	border-right: 1px solid #8b5d2a;
	border-bottom: 1px solid #8b5d2a;		
	/*HOOVER BOTTOM IMAGE HERE */
	width: 104px;	
	padding: 4px;
}

#p7menubar2 li:hover {
	/*HOOVER TOP IMAGE HERE */

}
#p7menubar2 a:focus, #p7menubar2 a:active, #p7menubar2 li.p7hvr a {
	/*HOOVER TOP IMAGE HERE */
	color: #000000;
}
#p7menubar2 li:hover li:hover {
	background-image: none;
}

#p7menubar2 li:hover ul, #p7menubar2 li.p7hvr ul {
	display: block;
}

#p7menubar2 li:hover ul a, #p7menubar2 li.p7hvr ul a {
	color: #000000;
	background-color: transparent;
}

#p7menubar2 ul a:hover {
	color: #c0c0c0!important;
}
/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#p7menubar2 li {width: auto;}

#p7menubar2 li ul {
	list-style: none;
}

/* custommenu Menu */
.custommenu {
	padding: 70px 10px 0 10px;
	width: 190px;
	height: 60px;
	text-align: right;
	background-image: url('/styles/beschuitje/map.jpg');
	background-repeat: no-repeat;
}

.producttitle {
	font-size: 14px;
	font-weight: bold;	
	color: #5b3e1e;
	padding: 0 0 6px 0;
}

	.producttitlesmall {
		font-size: 12px;
		font-weight: bold;	
		color: #5b3e1e;
		padding: 0 0 6px 0;
	}

	.productspecs {
		min-height: 170px;
	}
	
	.productdesc {

	}

	.productpricesmall {
		font-size: 10px;
		font-weight: bold;
		text-align: right;
	}

	.productpricecart {
		text-align: right;
	}

	.productprice {
		font-size: 14px;
		font-weight: bold;
	}

	.productcart {
		
	}
	
	.productspecial {
		padding: 10px 0 0 0;
	}

/* Customer beschuitje! */
.menumap {
	padding: 12px 10px 10px 12px;
	margin: 0;
	color: #8b5d29;
	border-bottom: 1px solid #d6d2cf;
}

	.menumap h1 {
		font-weight: bold;
		font-size: 14px;
		color: red;
		margin: 0;
		padding: 0 0 4px 0;
	}

	.menumap h2 {
		font-weight: bold;
		font-size: 12px;
		color: #5b3e1e;
		margin: 0;
		padding: 0 0 4px 0;
	}

	.menumap p {
		margin: 0;
		padding: 0 0 2px 0;
		font-size: 10px;
	}

	.menumap li {
		list-style: none;
		background-image: url('/styles/beschuitje/bullet.gif');
		background-repeat: no-repeat;		
		padding: 0 0 1px 10px;
		margin: 0;
		color: #000;
		font-size: 11px;
	}

	.menumap a{
		color: #000
	}

	.menumap a:hover{
		color: gray;
	}

.carth {
	font-weight: bold;
	float: left;
	border-bottom: 1px solid #c0c0c0;
	margin: 0 0 4px 0;
}	


#frontteaser {
	width: 500px;
	padding: 0;
}

	#frontteaser h1 {
		color: #9a7447;
		margin: 0;
		padding: 0;
		font-size: 12pt;
	}

	#frontteaser p {
		padding: 0 0 10px 0;
	}
	
	.promobanner {
		width: 234px;
		height: 156px;
		margin: 0 18px 18px 0;
		padding: 2px 3px 2px 3px;
		background-repeat: no-repeat;
		float: left;
	}
	
/* Tabledata normal place to store data in */
.tabledata {
	width: 728px;
	border: 0px;
	border-collapse: collapse;
	margin: 5px 0 5px 0;
	padding: 0 0 0 0;
}
.tabledata th {
	border-bottom: 1px solid #faf2eb;
	text-indent: 2px;
}
.tabledata td {
	padding: 4px;
}
.tabledatagray {
	color: gray;
}
.tabledatahead {
	color: #000;
}
/* Changing rowcolours! */
.row1 {
	background-color: #ffffff;
}
.row2 {
	background-color: #ebdfd5;
}	


.steps {
	margin: 0 0 0 0;
}

.steps a:hover {
	color: red;
}

.steps li {
	width: 126px;
	float: left;
	text-align: center;
	padding: 4px 0 4px 0;
	margin: 0 1px 0 1px;
	background-color: #c0c0c0;
}

.steps .active {
	background-color: brown;
	color: #fff;
}

.steps .done {
	background-color: #d0d0d0;
	color: #fff;
}

.meneitemding{
	display:block; 
	background-color: #e6d8cb; 
	padding: 0 7px 0 7px; 
	margin: 0 2px 4px 2px;
	line-height: 18px;
	font-size: 9px;
	width: 70px;
}

.meneitemding a{
	font-size: 9px;
	color: #3e3e3e;
	display:block; 
}

.meneitemding a:hover{
	font-size: 9px;
	color: #484039;
}

.news-date {
	color: #c0c0c0;
	font-style: italic;
	text-align: right;
}

.news-img {
	float: left;
	padding: 0 10px 2px 0;
}

.news-sub {
	padding: 10px 0 0 0;
	font-style: italic;
	font-weight: bold;
}

.news-readon {
	font-style: italic;
}

.adminmenu {
	margin: 0 0 10px 0;
}

.adminmenu a {
	display: block;
	float: left;
	padding: 2px 10px 2px 10px;
	border-right: 1px solid #c0c0c0;
}

.adminmenu a:hover {
	background-color: #c0c0c0;
	color: #fff;	
}

.adminmenu .selected {
	background-color: #c0c0c0;
	color: #000;	
}