/* 
rood: color: #ba2634;
blauw: color: #0C479D;
*/

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%; }

/*right:10px om de content-div even breed als de view-port te maken 
max-width werkt niet in IE??!! */
div#content {
	position: absolute; top: 9em; left: 220px; right:10px;  max-width: 1250px;}	
div#content td {
	font-size: .9em;}

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 en de taal-vlag 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}
div#vlag {position: absolute; top: 55px; left: 100px;}
div#vlag a img {display:block; text-decoration: none;}
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: #ba2634}

/*meldingen */
.groen {color: green}
.grijs, p.grijs, span.grijs {color: gray}
.blauw {color: #0C479D}

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  
width: auto werkt niet in FF, daarom hier 80% en voor IE conditional comments*/
div#submenu {float: left; text-align: center; width: 80%}	
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.  */
div#bottom {
	position: absolute; bottom: 20px; right:20px;
	/* 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' ); 
	width: 12em; height: auto;padding: 0;
	margin:0; }
div#bottom[id] {
	position: fixed;}
div#bottom a {display: block; width:99%; height: 100%; color: #ba2634; background: white;
	font-weight: bold; font-size: 1.3em; text-decoration: none; padding:5px; text-align: center; 
	border: 1px solid red; }
div#bottom a:hover {color: red}
div#bottom a span {font-size: 70%; }

/* 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; font-size: 110%; border: 1px solid #CCC; padding: 5px; text-align: center}

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

/*ACTIE (op linkermenu) */
table#acties{width:140px; margin-left: 20px; }
table#acties td{text-align: center; padding:0; border: none }
table#acties h2{color: #ba2634; padding:0; margin:0; font-size: 14px}
table#acties a{font-size:12px;  width:100%; display: block; padding-top: 80px} 
table#acties td#actie_img{height:50px; vertical-align: bottom}