/* OK 15.10.09 */

html, body {margin: 0; padding:0}
body {font-size:100%; background: white url('images/main_bg.jpg') left 90px repeat-y}
body, td, input, textarea {font-family:sans-serif; font-size: 90%; }

div#content {
	position: absolute; top: 9em; left: 220px; right:0}	/* right:0 om de content-div even breed als de view-port te maken */
div#content td {
	font-size: .9em;}

div#bottom {
	width: 8em;
	position: absolute;
	bottom: 0;
	right:10px;
	/* Fixed tbv IE. Uit: http://www.howtocreate.co.uk/fixedPosition.html: (Probleem met Opera!)*/
	top: expression( ( -10 - bottom.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); 
	height: 3em; padding-top: 8px; /* Anders geen border-top van link in IE6 */
	margin:0;
	text-align:center;}

div#bottom[id] {
	position: fixed;
	right:4em;}

h1 {
	font-size: 1.8em;
	font-weight: bold;
	color: #ba2634;}
h2 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom:-.3em;
	margin-top:0;
	color: #0C479D;}
h3 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom:-.5em;
	color: #0C479D;}
h4 {
	font-size: 1em;
	margin-left: 3px;
	font-weight: bold;
	margin-bottom:0em;
	color: #0C479D;}

/* De naam van WSW in de kop: */
span#wsw {position: absolute; top: 0px; left:20px; color: #415589; font-size: 4em; font-style: italic}
span#wsw_space {font-size: .1em}
span#wsw_winkel{color:#ba2634}
span#wsw_nl {font-size: 90%}

table {border-collapse: collapse; width: 100%}
td {vertical-align: top}
table.border td {border: 1px solid #E0E0E0}

img {border: none;}

.rechts	{float: right; margin-left: 15px; margin-right: 2px}
.links	{float: left; margin-right: 15px}
.center {text-align: center}
.tdrechts {text-align: right}
.tdlinks {text-align: left}

.hide {display: none}
span.small {font-size: .1em}
.strong {color: #0C479D;}

/*<b> (mede door beheerder gebruikt) minder nadrukkelijk: */
b {font-size: .9em}


/*Alerts:*/
.warning, span.warning, p.warning, .rood, span.rood {color: red}

/*meldingen */
.groen {color: green}
.grijs, p.grijs, span.grijs {color: gray}

div.links {border: 1px solid black}

div#inlogform {width: 90%; border: 1px solid #CCC; margin-bottom: 10px; padding:0; text-align: center}
div#inlogform p, div#inlogform input {margin-top: 5px} 
p#welkom {
	margin: auto;
	color:blue; 
	background: white;
	border: 1px solid gray;
	font-size: 12px;
	width: 90%}

div#content a {color: #0C479D; }
div#content a:visited {color: #0C479D;}
div#content a:hover {color: #EC0C14;}

div#menu {width: 210px; position: absolute; top: 9em; left: 0; margin:0; padding-left: 5px; padding-right: 5px; padding-top: 10px;} 

div#zoekform {
	float: right; width: 32%; margin:0; padding:0;
	text-align: right;
	padding-right: 4px}
div#zoekform form {margin:0; padding:0;}
div#zoekform p {margin-top:5px; margin-bottom:0}

form#toon {
	 width: 95%; border: 1px solid blue; background: white}

table.artikel {
	border-collapse: collapse; clear: both; width:95%}	

table.artikel td {padding-left: 5px; border-top: 1px solid black; padding-bottom: 5px}

/* ---------- CSS voor de kop:  -----------*/

div#kop {height: 8em; background: white; padding:0}

div#menutop {position: absolute; top: 6em; right: 120px}
div#menutop div {float: right; border: 1px solid #BBB; background: white; margin-left: 10px; padding-left: 8px; padding-right: 4px}
div#menutop a {color: #5e5e5e; text-decoration: none; background: url('images/arrow-red.png') no-repeat left center; padding-left: 8px}
div#menutop a:hover {color: red; background: url('images/arrow-gray.png') no-repeat left center;} 

/* ----------- CSS voor hoofdmenu: -------------- */
#menu ul {
	list-style: none;
	margin-left:0;
	padding: 0;
	border: none;}

ul.main {}
ul.sub {display: none}		

ul.main li {
	margin-left:10px;
	width: 9em;}
ul.sub li {
	padding-left: 15px;
	/* font-style: italic; */
	width: 10em;}


/* De .menu wordt gebruikt voor het hoofdmenu. Zowel <a> als <span>, voor de links in de kop en de bestelwagenbutton */
a.menu, span.menu {
	display: block;
	text-decoration: none; color: #0C479D; padding-left: 12px; padding-right: 2px;
	background: url('images/arrow-red.png') no-repeat left center;
	width: 100%;
	margin-top:1px;}
a.menuspecial {color:#ba2634; font-weight: bold} /* Aanbiedingen */

a.menu:hover {background: url('images/arrow-gray.png') no-repeat left center;
	color: red}

.expand {cursor: pointer}
a.expand:hover {cursor: pointer; 
	color: red}

/* ----------- Einde CSS voor hoofdmenu: -------------- */

/* Submenu catalogus; ook de merken op watersport.php. Tzt combineren met CSS van div#zoekgroep1 en  */
div#submenu {float: left; text-align: center;}	
div#submenu div {width: 17.5em; float: left; border: 1px solid #BBB; background: white; margin-left: 5px; margin-bottom: 5px}
div#submenu a, div#submenu a:visited {color: #0C479D; text-decoration: none; background: url('images/arrow-red.png') no-repeat left center; padding-left: 8px}
div#submenu a:hover {color: red; background: url('images/arrow-gray.png') no-repeat left center;} 


/* Button met inhoud winkelwagentje. In aanvulling op a.menu!! */
div#bottom a {color: #ba2634; font-weight: bold; font-size: 1.3em; padding: 5px; background: white; border: 1px solid red}
/* background: white url('images/cart.png') no-repeat left center */
div#bottom a:hover {color: red}

/* Info (klein, grijs) voor beheerder */
span.showbeheerder {color:#CCC; font-size: 90%}

/* Periomelding bij vakanties en eindejaar:  contact, bestelling, lev.bestelling*/
p.periodemelding {color: #ba2634; font-weight: bold}

span.duits_ontbreekt {font-weight: bold; color: red}
span.duits_ok {color: green}