/* Setting the Basic styles of the document */

body,html {
	margin:0px;
	padding:0px;
}

body {
	font-family:helvetica;
	font-size:12px;
	color:#5c5c5c;
	background:#f7f6f4;
	background-image:url(../images/mosselbg01.jpg);
	background-repeat:repeat-x;
	background-position:top center;
}

/* Setting the basic hover style */

a img { border:0px;}
a,a:active,a:visited { color:#df1849;text-decoration:none;}
a:hover {text-decoration:underline;}


/* This contains the complete website */

#mainwrapper {
	width:1000px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}

/* Contains the logo, menu and shopping cart */

#topwrapper {
	height:124px;
	width:1000px;
	background-image:url(../images/headerbg.jpg);
	background-repeat:repeat;
}

/* Placing the logo on the heqder */

#logowrapper {
	position:absolute;
	left:0px;
	top:10px;
	background:#dcdcdc;
	width:400px;
	height:100px;
}

/* Make a link block for the logo. The logo will be loaded as a background image. SEO friendly. */

#logowrapper a {
	display:block;
	width:400px;
	height:100px;
	text-indent:-9999px;
	background-image:url(../images/logokaatmossel.jpg);
	background-repeat:no-repeat;
}

/* To build the top menu. We gonna control this using a list attribute. */

#tmwrapper {
	position:absolute;
	height:110px;
	top:0px;
	left:500px;
	width:200px;
	border-left:2px dotted #dcdcdc;
}


#tmwrapper li,#cartwrapper li {
	list-style:none;
	
}

#tmwrapper li a,#cartwrapper li a {
	background:transparent url(../images/buttons.gif) no-repeat top left;
	display:block; 
	float:left;
	height:22px;  
	margin-right:15px;
	margin-bottom:2px;
	color:#878787;
}

#tmwrapper li a span,#cartwrapper li a span {
	background:transparent url(../images/buttons.gif) no-repeat right top;
	cursor:pointer;
	display:inline; 
	float:left;
	height:18px; 
	padding:4px 10px 0 0; 
	margin-left:10px;	
}

#tmwrapper li a:hover,#cartwrapper li a:hover{
	background-position:0px bottom; color:#fff;text-decoration:none;
}

#tmwrapper li a:hover span,#cartwrapper li a:hover span {
	background-position:right bottom;
}

#tmwrapper #current a {background-position:0px bottom; color:#fff;text-decoration:none; }
#tmwrapper #current a span {background-position:right bottom }


/* Placing the top cart or additional content */

#cartwrapper {
	position:absolute;
	height:100px;
	top:0px;
	width:260px;
	right:0px;
	background-image:url(../images/info_winkel.gif);
	background-repeat:no-repeat;
	background-position:right bottom;
	padding-top:0px;
}

/* We love social media, so this is gonna be placed as an absolute div, directly under the top wrapper. */

#socialwrapper {
	position:absolute;
	width:143px;
	height:48px;
	background-image:url(../images/socialbg.jpg);
	background-repeat:no-repeat;
	top:123px;
	left:530px;
	padding-left:40px;
	padding-top:6px;
}


/* Lets fake the browser, with a transparent stroke. This is to keep the banner visable after collapsing. */

#tussenwrapper {
	height:120px;
	width:100%;
}

/* This is just a place holder for the collapsing element. Contains nothing just a space for IE. */

#bannerwrapper {
	width:100%;
	height:270px;
}

/* The overwrapper is the main content placeholder. This wrapper can overlap the bannerwrapper */

#overwrapper {
	background:#f7f6f4;
	width:100%;
	height:280px;
	margin-top:0px;
	background-image:url(../images/contentbg.jpg);
	background-repeat:repeat-x;
	background-position:center top;
}

#wallbanner {
	width:1000px;
	height:347px;
	background-image:url(../images/banner01.jpg);
	background-repeat:no-repeat;
	position:absolute;
	top:124px;
	z-index:-1
}

a.uplink {
	float:left;
	display:block;
	width:20px;
	height:17px;
	background-image:url(../images/ico-up.jpg);
	background-repeat:no-repeat;
	text-decoration:none;
}

a.downlink {
	float:left;
	display:block;
	width:20px;
	height:17px;
	background-image:url(../images/ico-down.jpg);
	background-repeat:no-repeat;
	text-decoration:none;
}

#contentwrapper {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	margin-top:-45px;
}


#leftframe {
	width:500px;
	float:left;
	margin-top:40px;
}

.page {font-family:georgia}
.post {width:440px;font-family:georgia;background-image:url(../images/onderpost.jpg);background-position:bottom center;background-repeat:no-repeat;padding-bottom:60px;}
.posthead {font-size:22px;font-family:georgia;padding-bottom:12px;}

#centerframe {
	width:158px;
	float:left;
	margin-top:40px;
	border-left:1px solid #dcdcdc;
	border-right:1px solid #dcdcdc;
	padding-left:20px;
	padding-right:20px;
}

.small_heading {font-weight:bold;font-family:verdana;font-size:11px;padding-bottom:10px;padding-top:10px;}
.cat_men a {color:#5c5c5c;padding-top:1px;padding-bottom:1px;padding-left:4px;padding-right:4px;line-height:16px;}
.cat_men a:hover {background:#f74a86;color:#fff;text-decoration:none;}

.menu {padding:0px;margin:0px;border-bottom:1px solid #dcdcdc;padding-bottom:12px;}
.menu li { list-style:none;line-height:18px;}
.menu li a { color:#5c5c5c; }
.menu li a span { padding:2px;}
.menu li a:hover span { padding:2px;background:#f74a86;color:#fff;}
#current a span  {background:#f74a86;color:#fff;}

#rightframe {
	width:300px;
	float:left;
	margin-top:40px;
}

#ontour {
	position:absolute;
	margin-top:-90px;
	height:186px;
	width:359px;
	right:0px;
}

ul.pagination { border-top:1px solid #dcdcdc;padding-top:20px;}
ul.pagination li { list-style:none;display:inline;padding-right:6px;}