/* 	
	Kolstein		CSS Stylesheet
	Auteur			Mike Schenkel
	Versie			v1.0 | 14-05-2010
..................................................................................*/

@import "reset.css";

/*	=Main Styles
..................................................................................*/
html, body { height: 100%; }
body {
	color: #000;
	font: 62.5% Helvetica, "Helvetica Neue", Arial, sans-serif;
}

#container { min-height: 100%; margin-bottom: -65px; position: relative; }

/*	=Background
..................................................................................*/
img.bg {
	height: auto;
	left: 0;
	min-height: 100%;
	min-width: 1024px;
	position: fixed;
	top: 0;
	width: 100%;	
}
@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; }
}

/*	=Header
..................................................................................*/
#header { background: #fff; position: relative; }
.header { margin: 0 auto; width: 915px; }
.header img { float: left; margin-left: 50px; padding-top: 20px; }
.sponsors { float: left; margin-top: 15px; }

/*	=Navigation
..................................................................................*/
#nav { width: 800px; margin: 0 auto; list-style: none; }
#nav li { float: left; margin-right: 30px; }
#nav li a {
	color: #fff;
	display: block;
	font-size: 18px;
	height: 30px;
	letter-spacing: 2px;
	line-height: 30px;
	padding: 5px 15px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
#nav li.home { background: #ff9600; }
#nav li.boekhandel { background: #ff0000; }
#nav li.drogisterij { background: #3b6fd1; }
#nav li.kledingzaak { background: #b00068; }
#nav li.webshop { background: #ff9600; }
#nav li.openingstijden { background: #ff9600; margin-right: 15px; }
#nav li.contact { background: #ff9600; margin-right: 0; }

#nav li.home a, li.openingstijden a, #nav li.contact a { height: 30px; text-indent: -9999px; width: 16px; }
#nav li.home a { background: url('../images/sprite.png') center no-repeat; background-position: 0px -443px; }
#nav li.openingstijden a { background: url('../images/sprite.png') center no-repeat; background-position: 0px -487px; }
#nav li.contact a { background: url('../images/sprite.png') center no-repeat; background-position: 0px -529px; }

/*	=Content
..................................................................................*/
#content { font-size: 1.1em; margin: 50px auto; width: 875px; }
#content p { padding: 10px; line-height: 1.3em; }
#content img  { margin: 0 10px 7px; }

#boekhandel .border { border-color: #ff0000; }
.boekhandel h2 { background: #ff0000; }

#drogisterij .border { border-color: #3b6fd1; }
.drogisterij h2 { background: #3b6fd1; }

#kledingzaak .border { border-color: #b00068; }
.kledingzaak h2 { background: #b00068; }

.left, .middle, .right {  background: #fff; height: 417px; width: 255px;  }
.left, .middle { float: left; margin-right: 50px; }
.right { float: left; }

#index .left img, #index .middle img { margin-top: 10px; }
#index #content .right img { margin: 10px 10px 7px; }
#content .right .top { float: left; margin: 0 10px 0 0; }
#content .right img.assortiment { margin: 10px; }

/*	=Footer
..................................................................................*/
.clearfooter { clear: both; height: 65px; }
.border { border-bottom: 25px solid #ff9600; width: 100%; }
#footer { height: 65px; position: relative; width: 100%; }

/*	=Headings
..................................................................................*/
h1 a { 
	background: url('../images/sprite.png') no-repeat; 
	background-position: -10px -10px;
	height: 127px;
	text-indent: -9999px;
	width: 202px;
	float: left;
}
#drogisterij h1 a { background: url('../images/sprite.png') no-repeat; background-position: -10px -157px; }
#kledingzaak h1 a { background: url('../images/sprite.png') no-repeat; background-position: -10px -304px; }

h2 {
	background: #ff0000;
	color: #fff;
	font-size: 20px;
	padding: 5px 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

h3 { font-size: 1.3em; font-weight: bold; margin: 10px 10px 0; }
#kledingzaak #content .right h3 { text-align: center; margin-bottom: 10px; }

/*	=Links
..................................................................................*/
a { color: #FF0000; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }

/*	=Lists
..................................................................................*/
#content ul { list-style: disc; margin-left: 15px; padding: 10px 10px 5px; }
#content ul li { padding-bottom: 2px; }

#content ul.kleding { margin: 0; }
#content ul.kleding li {
	font-size: 1.8em;
	list-style: none;
	margin-bottom: 10px;
	text-align: center;
}

/*	=Misc
..................................................................................*/
small { font-size: 0.95em; }
.clear { clear: both; }

#header:after, .header:after, #content:after, #nav:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}