/* CSS Document */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+	File		: screen.css
+	Author		: Frismedia
+	Date		: 23-03-2005
+
+	Notes		:
+	-By using different body ID's (red, green etc) different
+	 color themes can be used.
+	-The selected state of a menu item can be set by placing 
+	 the <em> tag around the <a href> tag.
+	 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*>>>>>>>>>>>HTML TAGS<<<<<<<<<<<<<<*/

body
{
	margin:0;
	padding:0;
	color:black
}

body#green { background-image: url(../images/bo/green/bodyBg.gif);}
body#red { background-image: url(../images/bo/red/bodyBg.gif);}
body#purple { background-image: url(../images/bo/purple/bodyBg.gif);}
body#pink { background-image: url(../images/bo/pink/bodyBg.gif);}
body#orange { background-image: url(../images/bo/orange/bodyBg.gif);}
body#blue { background-image: url(../images/bo/blue/bodyBg.gif);}

input, select, option, textarea
{
	border:1px solid #CCCCCC;
	font:inherit; 
}

img
{
	border:none;
}

h1, h2, h3, h4, h5, h6
{
	color:black;
	margin:0;
	padding:0;
}

p
{
	padding:0 0 1em 0;
	margin:0;
}
/*>>>>>>>>>>>END<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>LAYOUT DIV's<<<<<<<<<<<<<<*/

div#wrapper
{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-380px;
	width:760px;
}

div#top
{
	float:left;
	height: 50px;
	width:760px;
	margin:0 0 0 0;
	background:no-repeat left bottom url(../images/bo/logo.gif);
	text-align:right;
}

div#middle
{
	float:left;
	width:760px;
	margin:0;
	padding:0;
	border:1px solid black;
}

body#green div#middle { background:white no-repeat left bottom url(../images/bo/green/bg.gif); }
body#red div#middle { background:white no-repeat left bottom url(../images/bo/red/bg.gif); }
body#purple div#middle { background:white no-repeat left bottom url(../images/bo/purple/bg.gif); }
body#pink div#middle { background:white no-repeat left bottom url(../images/bo/pink/bg.gif); }
body#orange div#middle { background:white no-repeat left bottom url(../images/bo/orange/bg.gif); }
body#blue div#middle { background:white no-repeat left bottom url(../images/bo/blue/bg.gif); }

div#footer
{
	clear:both;
	width:760px;
	height:15px;
	text-align:right;
	margin:0;
	padding:5px 0 0 0;
}

/*>>>>>>>>>>>END<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>CONTENT DIV'S<<<<<<<<<<<<<<*/

/*CONTENT*/
div#main
{
	float:left;
	width:370px;
	margin:0;
	padding:20px 10px 30px 30px;
}

div#content
{
	display:inline;
}

div.contentHeader, div.contentHeaderSub
{
	width:370px;
	padding:0 0 5px 0;
	margin:0 0 5px 0;
	border-bottom:1px solid #CCCCCC;
	clear: both;	
}

div.contentHeader
{
	padding:0 0 10px 0;
	font-weight:800;
}

div.contentColumnHeader
{
	margin:0 0 5px 0;
	background-color: #F4F4F4;
}

div.contentColumn
{
	padding:0 0 0 0;
	width:185px;
	margin-bottom: 10px;
	float: left;
}

div.contentColumnFooter
{
	clear: both;
	border-top: 1px solid #CCCCCC;
	padding: 10px 0 0 0;
	height: 20px;
	
}

div.flash
{
	margin:0 0 10px 0;
	padding:0;
}

/*SIDEBAR*/
div#sideBar
{
	float:right;
	margin:40px 0 0 0;
	padding:0;
}

div#sideBar .bottomRounded
{
	padding:0;
	margin:0;
	background:no-repeat url(../images/bo/sideBarHoekje.gif);
	height:4px;
}

/*KLIKTIPS*/
div#kliktips
{
	width:153px;
	margin:0;
	padding:20px 0 0 0;
	background:no-repeat top url(../images/bo/kliktipsHeader.gif);
}

body#green div#kliktips {background:no-repeat top url(../images/bo/green/kliktipsHeader.gif);}
body#red div#kliktips {background:no-repeat top url(../images/bo/red/kliktipsHeader.gif);}
body#purple div#kliktips {background:no-repeat top url(../images/bo/purple/kliktipsHeader.gif);}
body#pink div#kliktips {background:no-repeat top url(../images/bo/pink/kliktipsHeader.gif);}
body#orange div#kliktips {background:no-repeat top url(../images/bo/orange/kliktipsHeader.gif);}
body#blue div#kliktips {background:no-repeat top url(../images/bo/blue/kliktipsHeader.gif);}

div.tip
{
	padding:0 5px;
	margin:0;
	border-top:1px dashed #CCCCCC;
	border-left:1px solid #CCCCCC;
}

div.tip p
{
	padding:0;
}

/*SEARCH*/
div#search
{
	width:153px;
	margin:20px 0 20px 0; 
	padding:20px 0 0 0;
}

body#green div#search {background:no-repeat top url(../images/bo/green/zoekHeader.gif);}
body#red div#search {background:no-repeat top url(../images/bo/red/zoekHeader.gif);}
body#purple div#search {background:no-repeat top url(../images/bo/purple/zoekHeader.gif);}
body#pink div#search {background:no-repeat top url(../images/bo/pink/zoekHeader.gif);}
body#orange div#search {background:no-repeat top url(../images/bo/orange/zoekHeader.gif);}
body#blue div#search {background:no-repeat top url(../images/bo/blue/zoekHeader.gif);}


div#search form
{
	border-left:1px solid #CCCCCC;
	padding:5px;
	margin:0;
}

div#search input
{
	width:138px;
}

body#green div#search input {background:url(../images/bo/green/bodyBg.gif); color:#1CB51C;}
body#red div#search input {background:url(../images/bo/red/bodyBg.gif); color:#EC0000;}
body#purple div#search input {background:url(../images/bo/purple/bodyBg.gif); color:#9905CC;}
body#pink div#search input {background:url(../images/bo/pink/bodyBg.gif); color:#FF0999;}
body#orange div#search input {background:url(../images/bo/orange/bodyBg.gif); color:#FF9B04;}
body#blue div#search input {background:url(../images/bo/blue/bodyBg.gif); color:#0202FF;}

/*FLAG*/
div#flag
{
	position:absolute;
	display:block;
	top:65px;
	left:762px;
	width:31px;
	height:37px;
}

body#green div#flag {background:no-repeat url(../images/bo/green/flag.gif)}
body#red div#flag {background:no-repeat url(../images/bo/red/flag.gif)}
body#purple div#flag {background:no-repeat url(../images/bo/purple/flag.gif)}
body#pink div#flag {background:no-repeat url(../images/bo/pink/flag.gif)}
body#orange div#flag {background:no-repeat url(../images/bo/orange/flag.gif)}
body#blue div#flag {background:no-repeat url(../images/bo/blue/flag.gif)}

/*>>>>>>>>>>>END<<<<<<<<<<<<<<*/

/*>>>>>>>>>NAVIGATION<<<<<<<<<<<<*/

div#menu
{
	float:left;
	width:196px;
	margin:0;
	padding:0 0 225px 0;
}

body#green div#menu {background:no-repeat top left url(../images/bo/green/navHeader.gif);}
body#red div#menu {background:no-repeat top left url(../images/bo/red/navHeader.gif);}
body#purple div#menu {background:no-repeat top left url(../images/bo/purple/navHeader.gif);}
body#pink div#menu {background:no-repeat top left url(../images/bo/pink/navHeader.gif);}
body#orange div#menu {background:no-repeat top left url(../images/bo/orange/navHeader.gif);}
body#blue div#menu {background:no-repeat top left url(../images/bo/blue/navHeader.gif);}


div#menu a
{
	color:black;
	text-decoration:none;
	padding:0 0 0 5px;
}

div#menu a:hover
{
	text-decoration:underline;
}

div#nav
{
	width:196px;
	margin:19px 0 5px 0;
	padding:0 0 4px 0;
	background:no-repeat bottom  url(../images/bo/navBottom.gif) white;
}



div#nav ul
{
	display:block;
	margin:0;
	padding:0;
    list-style:none;
}

div#nav ul li
{
	display:block;
	margin:0;
	padding:0;
}

div#nav ul li a
{
	display:block;
	width:190px;
	border-right:1px solid #CCCCCC;
	border-top:1px solid #F4F4F4;
	text-decoration:none;
	line-height:19px;
	color:black;
}

div#nav ul ul
{
	display:block;
	background:#F4F4F4;
	padding:0 0 0 10px;
	margin:0;
	border-right:1px solid #CCCCCC;
}

div#nav ul ul li
{
	display:block;
	margin:0;
	padding:0;
}

div#nav ul ul li a
{
	display:block;
	width:175px;
	text-align:left !important;
	border:none;
}

div#nav ul li em, div#nav ul ul li em
{
	display:block;
	height:1%;
}

div#nav ul li em a, div#nav ul ul li em a
{
	font-style:normal;

}
div#nav ul li em a, div#nav ul ul li em a
{	
	text-indent:12px;
	background-repeat: no-repeat;
	background-position:0 4px;
}

body#green div#nav ul li em a, body#green div#nav ul ul li em a {
	color:#1CB51C;
	background-image: url(../images/bo/green/menuArrow.gif);
}
body#red div#nav ul li em a, body#red div#nav ul ul li em a {
	color:#EC0000;
	background-image: url(../images/bo/red/menuArrow.gif);
}
body#purple div#nav ul li em a, body#purple div#nav ul ul li em a {
	color:#9905CC;
	background-image: url(../images/bo/purple/menuArrow.gif);
}
body#pink div#nav ul li em a, body#pink div#nav ul ul li em a {
	color:#FF0999;
	background-image: url(../images/bo/pink/menuArrow.gif);
}
body#orange div#nav ul li em a, body#orange div#nav ul ul li em a {
	color:#FF9B04;
	background-image: url(../images/bo/orange/menuArrow.gif);
}
body#blue div#nav ul li em a, body#blue div#nav ul ul li em a {
	color:#0202FF;
	background-image: url(../images/bo/blue/menuArrow.gif);
}

div#nav ul li a:hover
{
	text-decoration:none;
	font-style:normal;
}

body#green div#nav ul li a:hover {color:#1CB51C;}
body#red div#nav ul li a:hover {color:#EC0000;}
body#purple div#nav ul li a:hover {color:#9905CC;}
body#pink div#nav ul li a:hover {color:#FF0999;}
body#orange div#nav ul li a:hover {color:#FF9B04;}
body#blue div#nav ul li a:hover {color:#0202FF;}

/*SUBNAV*/

div#subNav
{
	width:350px;
	height:25px;
	margin:20px 0 0 0;
	padding:0px;
}

div#subNav ul
{
	margin:0;
	padding:0;
	list-style:none;
}

div#subNav li
{
	float:left;
	margin:0;
	padding:0;
	white-space:nowrap;
}

div#subNav li a
{
	display:block;
	color:black;
	text-decoration:none;
	text-indent:5px;
	margin:0 10px 5px 0;
	padding:0 10px 5px 0;
	background:no-repeat center left url(../images/bo/subNavSeperator.gif)
}

div#subNav ul li a:hover, div#subNav ul li em a
{
	text-decoration:none;
	font-style:normal;
	text-indent:5px;
	background-repeat: no-repeat;
	background-position:left center;
}

div#subNav ul li em a, div#subNav ul li em a:hover
{
	text-indent:15px;
}

body#green div#subNav ul li em a {
	color:#1CB51C;
	background-image: url(../images/bo/green/subNavSeperator.gif);	
}
body#red div#subNav ul li em a {
	color:#EC0000;
	background-image: url(../images/bo/red/subNavSeperator.gif);	
}
body#purple div#subNav ul li em a {
	color:#9905CC;
	background-image: url(../images/bo/purple/subNavSeperator.gif);	
}
body#pink div#subNav ul li em a {
	color:#FF0999;
	background-image: url(../images/bo/pink/subNavSeperator.gif);		
}
body#orange div#subNav ul li em a {
	color:#FF9B04;
	background-image: url(../images/bo/orange/subNavSeperator.gif);		
}
body#blue div#subNav ul li em a {
	color:#0202FF;
	background-image: url(../images/bo/blue/subNavSeperator.gif);		
}

body#green div#subNav ul li a:hover {color:#1CB51C;}
body#red div#subNav ul li a:hover {color:#EC0000;}
body#purple div#subNav ul li a:hover {color:#9905CC;}
body#pink div#subNav ul li a:hover {color:#FF0999;}
body#orange div#subNav ul li a:hover {color:#FF9B04;}
body#blue div#subNav ul li a:hover {color:#0202FF;}
/*>>>>>>>>>>>END<<<<<<<<<<<<<<*/

/*>>>>>>GENERAL CLASSES<<<<<<<<<<*/

.link
{
	display:block;
	text-align:right;
	padding:5px 25px 5px 0;
	background:no-repeat right url(../images/bo/linkArrow.gif);
	text-decoration:none;
	color:black;
}

body#green .link:hover { background:no-repeat right url(../images/bo/green/linkArrowHover.gif); }
body#red .link:hover { background:no-repeat right url(../images/bo/red/linkArrowHover.gif); }
body#purple .link:hover { background:no-repeat right url(../images/bo/purple/linkArrowHover.gif); }
body#pink .link:hover { background:no-repeat right url(../images/bo/pink/linkArrowHover.gif); }
body#orange .link:hover { background:no-repeat right url(../images/bo/orange/linkArrowHover.gif); }
body#blue .link:hover { background:no-repeat right url(../images/bo/blue/linkArrowHover.gif); }

.externalLink
{
	padding:0 0 3px 8px;
	background:no-repeat left url(../images/bo/bullitExternalLink.gif);
	text-decoration:none;
	color:black;
}


#content a {	text-decoration:none;}
#content a:hover {text-decoration:underline;}

body#green .externalLink:hover, body#green #content a {color:#1CB51C;}
body#red .externalLink:hover, body#red #content a {color:#EC0000;}
body#purple .externalLink:hover, body#purple #content a {color:#9905CC;}
body#pink .externalLink:hover, body#pink #content a {color:#FF0999;}
body#orange .externalLink:hover, body#orange #content a {color:#FF9B04;}
body#blue .externalLink:hover, body#blue #content a {color:#0202FF;}

.green {color:#1CB51C;}
.red {color:#EC0000;}
.purple {color:#9905CC;}
.pink {color:#FF0999;}
.orange {color:#FF9B04;}
.blue {color:#0202FF;}

/*>>>>>>>>>>>END<<<<<<<<<<<<<<*/