/* CSS Document */
body {
	background-color: #FFFFFF;
	background-image: url("images/bg.gif");
	background-repeat: repeat;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding: 30px 0 2em 0;
}

#container {
	margin: 0 auto;
	width: 780px;
/*	background-color: #666666;*/
/*	background-image: url("images/logo-kort-voor-kids.gif");
	background-repeat: no-repeat;
	background-position: left top;*/
}

#header {
/*	border: 1px solid #FF66CC; /* DEBUG */
}

#logo {
	text-indent: -99em;
	position: absolute;
	width: 300px;
	height: 120px;
	display: block;
	overflow: hidden;
	background-image: url("images/logo-kort-voor-kids.gif");
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0;
	padding: 0;
}

#logo a {
	display: block;
	width: 300px;
	height: 120px;
	margin: 0;
	padding: 0;

}

#menu, #menu ul, #quickmenu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu {
	width: 177px;
	float: left;
	position: absolute;
}

#quickmenu {
	text-align: right;
	font-weight: bold;
	width: 415px;
	min-height: 115px;
}

#quickmenu li {
	margin-right: 1em;
}

#quickmenu a {
	text-decoration: none;
	font-family: Arial, Courier, mono;
	font-size: 100%;
	line-height: 1.5em;
	color: #C50606;
}

#menu ul {
	display: none;
}

body#modernart #menu ul {
	display: block;
}

#menu li {
/*	background-color: transparent;*/
	background-image: url("images/bg-submenu.gif");
	background-position: center bottom;
	background-repeat: no-repeat;
}

#menu li li {
	background-image: none;
	background-color: #FFFFFF;
}

#menu li {
	margin-bottom: 10px;
}

#menu-1 a, #menu-2 a, #menu-3 a, #menu-4 a { text-indent: -100em; display: block; background-repeat: no-repeat; background-position: left top; width: 177px; height: 125px; 	overflow: hidden; } 
#menu-1 a { background-image: url("images/btn1.gif"); color: #9900CC; }
#menu-2 a { background-image: url("images/btn2.gif"); color: #00BA34; }
#menu-3 a { background-image: url("images/btn3.gif"); color: #1B6AFA; }
#menu-4 a { background-image: url("images/btn4.gif"); color: #A18501; }
#modernart #menu-1 a { background-image: url("images/btn1-mo.gif"); }
#modernart #menu-1 li a { background-image: none; }
#menu-1 a:hover { background-image: url("images/btn1-mo.gif"); }
#menu-2 a:hover { background-image: url("images/btn2-mo.gif"); }
#kort #menu-2 a { background-image: url("images/btn2-mo.gif"); }
#menu-3 a:hover { background-image: url("images/btn3-mo.gif"); }
#quiz #menu-3 a { background-image: url("images/btn3-mo.gif"); }
#menu-4 a:hover { background-image: url("images/btn4-mo.gif"); }
#loep #menu-4 a { background-image: url("images/btn4-mo.gif"); }

#menu ul {
	margin: 0 5px;
	padding: 0;
	padding-bottom: 1em;
}

#menu ul li {
	padding: 7px 0;	
	margin: 1px 0.5em;
}

#menu ul li a {
	display: block;
	text-decoration: none;
	background-image: none; 
	height: auto; 
	width: 150px;
	text-indent: 0;
	font-weight: bold;
	font-size: 85%;
}

#menu ul li a:hover {
	text-decoration: underline;
	color: #000000;
}

#content {
	border: 10px solid #FAF21B;
	background-color: #C70404;
	-moz-border-radius: 15px 0 15px 15px;
	margin-left: 177px;
	padding-bottom: 10px;
}

#content h1 {
	border: 10px solid #FAF21B; /* same color as #content border-color */
	border-bottom-width: 0;
	background-color: #C70404;
	background-image: url("images/header-home.gif");
	background-repeat: no-repeat;
	background-position: 10px 10px;
	-moz-border-radius: 15px 15px 0 0;
	-webkit-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
	width: 325px;
	height: 115px;
	margin: 0;
	padding: 10px 10px 0 10px;
	margin-top: -135px;
	margin-right: -10px;
	margin-left: 228px;
	margin-bottom: 1em;
	text-indent: -100em;
	overflow: hidden;
}

#content p, #content h2, #content h3 {
	margin-right: 1em;
	margin-left: 1.5em;
	padding-left: 0;
	padding-right: 0;
}

#content p {
	margin-top: 0;
	margin-bottom: 1em;
}


#content h2 {
	font-size: 120%;
	clear: left;
	text-transform: uppercase;
}

#content h3 {
	font-size: 100%;
	clear: left;
	margin-bottom: 0;
}

#content p.special, #content ul.special {
	color: #000000;
	background-color: #FFFFFF; /* gets overwriting by body#id classes */
	padding: 0.5em;
}

#content img.left {
	float: left;
	margin: 0 1em 0.5em 0;
	border: 1px solid #000000;
}

#content img.right {
	float: right;
	margin: 0 0 0.5em 1em;
	border: 1px solid #000000;
}

body#home #content p.special, #content ul.special { background-color: #FB3131; }
body#links #content, body#info #content, body#mail #content { background-color: #10B2B6; }
body#links #content h1 { background-color: inherit; background-image: url("images/header-links.gif");}
body#info #content h1 { background-color: inherit; background-image: url("images/header-info.gif");}
body#mail #content h1 { background-color: inherit; background-image: url("images/header-mail.gif");}
body#teacherstuff #content { background-color: #D33CD7; }
body#teacherstuff #content h1 { background-color: inherit; background-image: url("images/header-teacherstuff.gif");}
body#loep #content { background-color: #008822; }
body#loep #content h1 { background-color: inherit; background-image: url("images/header-loep.gif");}
body#loep #content p.special {color: #FFFFFF; background-color: #0AA932;}

body#modernart #content { background-color: #9A00CF; }
body#modernart #content h1 { background-color: inherit; background-image: url("images/header-modernart.gif");}
body#modernart #content p.special, body#modernart #content ul.special { background-color: #DF80FF; }
/* submenu */
body#modernart.a #content h1 { background-image: url("images/header-modernart-a.gif");}
body#modernart.b #content h1 { background-image: url("images/header-modernart-b.gif");}
body#modernart.c #content h1 { background-image: url("images/header-modernart-c.gif");}
body#modernart.d #content h1 { background-image: url("images/header-modernart-d.gif");}

body#kort #content { background-color: #008822;}
body#kort #content h1 { background-color: inherit ; background-image: url("images/header-kort.gif");} 
body#kort #content p.special { color: #000000; background-color: #62AE64;}

body#quiz #content { background-color: #186BFF; }
body#quiz #content h1 { background-color: inherit; background-image: url("images/header-quiz.gif");}

#content a {
	color: #FFFFFF;
}

#content p {
	clear: left;
}

#content p.clear {
	padding-bottom: 1em;
	margin-bottom: 0;
	clear: both;
}


#content p.right {
	clear: none;
}


#content p.special {
	width: 40%;
	float: left;
	clear: none;
}

#content p.narrow , #content h3.narrow {
	width: 40%;
}


#content p.wide {
	width: auto;
	float: none;
	clear: both;
}

#content p.special img {
	border: 1px solid #000000;
	margin: 0.5em 0;
}


#content p span.small {
	font-size: 80%;
}

#content a img {
	border-color: #008822;
}


#content a:hover img {
	border-color: #FFFFFF;
}


/* FORMS: */
form {
	margin: 0;
	padding: 0;
	margin-left: 1.5em;
}

form fieldset {
	border: 0;
	margin-left: 0;
	padding-left: 0;
}

form fieldset legend {
	font-weight: bold;
	
}

form dd input, form dd textarea {
	background-color: #FFFFFF;
	color: #000000;
}

form fieldset dl {
	margin-left: 2em;
	margin-top: 0;
}

form fieldset dl dt {
	margin-top: 0.2em
}

form fieldset dl dd {
	margin-bottom: 0.5em;
	margin-left: 0;
}

form fieldset p {
	text-align: right;
}

form textarea {
	font-family: inherit;
	font-size: inherit;
}

p.buttons {
	/*text-align: right;*/
	margin-left: 0;
}

p.buttons input {
	background-color: #009999;
	border: 1px solid #FFF;
	color: #FFFFFF;
	font-weight: bold;
}


/* TEMP */