/***********************************************************************
screen.css

This CSS file, originally created by Frismedia, is rather a muddle. When 
initially delivered there was no print spreadsheet, so printed pages
looked horrible. Atlis wrote a quick-and-dirty print spreadsheet
to fix the worst problems.

Pieces of the CSS are gradually being tidied up and moved to common.css 
if they are applicable to both screen and print.

Rules which are probably, but not certainly, superfluous have been
commented out.
************************************************************************/

@import url("common.css");

/*++++++++++++++++++++++++*/
/*      HTML ELEMENTS     */

body  /* other rules in common.css */
{
	background-color:#B0B0B0;
}


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

a.more
{
	background:url(../img/more.gif) no-repeat right center;
	padding-right:10px;
	white-space:nowrap;
	text-decoration:none;	
      display: inline-block;  
}
/* a.more:hover {text-decoration:underline;} Adding underline on hover is pointless. SP */

a.bck
{
	background:url(../img/bck.gif) no-repeat left center;
	padding-left:10px;
	white-space:nowrap;
	text-decoration:none;	
}
/* a.bck:hover {text-decoration:underline;} */

div#oplossingen a.more {
	background:url(../img/more_white.gif) no-repeat right center;
	padding-right:10px;
	color:#FFFFFF;
	/*text-decoration:none;	*/
}
/* div#oplossingen a.more:hover {text-decoration:underline;} */



p.logo img {
		margin-right:10px;
		margin-bottom:10px;
		}

hr {

	border-bottom : 1px solid #d1d1d1;
	border-top : none; 
	border-left:none; 
	border-right:none;
	color : #d1d1d1;
	padding:0;
	display:block;
	margin:10px;
	height:1px;
}



/*      HTML ELEMENTS     */
/*++++++++++++++++++++++++*/


/*++++++++++++++++++++++++*/
/*    GENERAL CLASSES     */
.clearfix:after, div#wrapper:after, div#header ul:after, div#main:after, div#oplossingen:after, div.row:after, div#footer:after, div#main ul#sub:after, div#header ul li.sub:after,div#main div.column ul.referentie:after, div#main div.column ul.referentie li:after, div.column:after,  div.wrap:after 
/*  a.more:after,          Probably not wanted. Produces unwanted space after. SP. */
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac and IE-win \*/
* html .clearfix, div#wrapper, div#header ul, div#main, div#oplossingen, div.row, div#footer, div#main ul#sub, div#header ul li.sub,div#main div.column ul.referentie,div#main div.column ul.referentie li, div.column, a.more, div.wrap {height: 1%;}
/* End hide from IE-mac */
/*    GENERAL CLASSES     */
/*++++++++++++++++++++++++*/


/*++++++++++++++++++++++++*/
/*      MAIN  DIV'S       */

div#wrapper
{
	position:relative;
	margin:10px auto 0 auto;
	padding:14px 20px 0 25px;
	width:911px;
	background:url(../img/wrapper_bck_top.gif) no-repeat top left white;
}

div#header
{

}

div#main
{
	background:url(../img/main_bck.gif) no-repeat left bottom;
	padding:0 0 20px 0;
	margin:0;
}

div#wrapper div.sub  {padding-top:20px;}

div#footer
{
	margin:0 -25px;
	width:932px;
	padding:10px 24px 10px 0;
	font-size:0.9em;
	background:url(../img/wrapper_bck_bottom.gif) no-repeat bottom left;
}

/*      MAIN  DIV'S        */
/*++++++++++++++++++++++++*/

div#logo {float:left;}

div#banner {float:right;width:325px;}
div#banner img {float: left; margin: 0 10px 0 0;}


/*++++++++++++++++++++++++*/
/*       NAVIGATIE        */

/* In the main navigation <ul> (within div "header") the <li> which applies to the present page
and which has a submenu attached should be given class "sub". If however there is no submenu 
for this page, i.e. there is no div with id "nav", then the <ul> should be given class "nosub" 
in order to give it sufficient spacing.
*/

div#header ul
{
	display:block;
	clear:both;
	list-style-type:none;
	background:url(../img/nav_bck.gif) no-repeat;
	padding:15px 0 0 0;
	margin:0
}

div#header ul.nosub { padding-bottom: 10px; }

body.home div#header ul, body.home_detail div#header ul
{
	padding:15px 0 25px 0;
	margin:0;
}


div#header ul li
{
	float:left;
}
div#header ul li a
{
	display:block;
	padding:0 13px 0 10px;
	text-decoration:none;
	background:url(../img/nav_separator.gif) right 6px no-repeat;
}
div#header ul li a:hover{text-decoration:underline;cursor:pointer;}
div#header ul li em {font-weight:bold;font-style:normal; }
div#header ul li.sub {background: url(../img/menu_punt.gif) no-repeat center bottom ; padding-bottom: 10px; margin-bottom: 0;
display:block; font-weight:bold; }

div#header ul li.last a {background: none;}

div#header ul li.other {float:right;}
div#header ul li.other a {background-image:none;
font-size:0.95em;}

div#nav {
padding:5px 0 0 0;
background:  url(../img/sub_corners_top.gif) top left no-repeat #424892;
}

div#main ul#sub {
	width:585px;
	display: block;
	list-style-type:none;
	padding:0 10px 0 0;
	background:  url(../img/sub_corners_bottom.gif) bottom left no-repeat #424892;	
	font-size: 0.95em;
	margin:0 0 10px 0;
/*	left:-10px;*/
	position:relative;
}

/*div#main ul#sub li.top {background: url(../img/sub_top.gif) top left no-repeat;
height:4px;
}*/

div#main ul#sub li
{
	float: left;
	background-color: #444a94;
	display:block;
	margin:0;
	padding:0;
	background:url(../img/nav_separator.gif) left 35% no-repeat;
}

div#main ul#sub li a
{
	display:block;
	padding: 0 10px 5px 10px;
	color: #FFFFFF;
	text-decoration:none;
}
div#main ul#sub li.first {background: none;}

div#main ul#sub li a:hover {text-decoration:underline;}

div#main ul#sub li a em {
	font-style: normal;
	text-decoration:underline;
/*	font-weight: bold;*/
}

/*       NAVIGATIE        */
/*++++++++++++++++++++++++*/
div.row {background:url(../img/home_row_bck.gif) no-repeat bottom left;}

div.column {
	width:595px;
	padding:0 0 10px 0;
	float:left;
	background: url(../img/column_bottom.gif) no-repeat bottom center;
	clear:both;}

div.column hr {clear:both;}


div.column img.right {float:right;}

body.home div.column img {
	padding-top: 0;
	float:none;
}

div#main div.first {margin-left:10px;}

body.home div.column {
	width:285px;
	clear: none;
	margin:15px 15px 0 0;
	background: none;
}


div#main div.column {
	margin-top:0;
	padding:0 0 10px 0;
}


div#main ol
{
	list-style:outside;
	list-style-type:decimal;
	padding: 0 0 0 0;
	margin:0 0 10px 30px;
}
div#main ol li {padding:0;margin: 0;}

div#main ul {
	list-style: none outside;
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
}
div#main ul li
{	
	background: url(../img/ul_streep.gif) 2px 6px no-repeat;
	padding: 0 0 0 10px;
	margin: 0;}

div#main div.column ul.referentie {
	list-style:none; 
	margin: 0 0 0 10px;
	padding: 0;
}

div#main div.column ul.referentie li
{
	background: none;
	display:block;
	padding: 10px 0 10px 0;
	margin: 0 10px 0 0;
	border-top: 1px solid #d1d1d1;
}

div#main div.column ul.referentie li img
{
	float:left;
	margin:0 10px 0 0;
	padding: 0;
}

div#main div.column ul.referentie p, div#main div.column ul.referentie h2 {
	padding-left: 10px;
	display: block;
	margin:0 0 0 129px;
}


div#oplossingen {
	background:url(../img/oplossingen_bck.jpg) no-repeat top left;
	width: 297px;	
	padding:0;
	margin:0;
	float:left;
	margin-left:14px;
	color:#FFFFFF;
}


body.home div#oplossingen {
	background:url(../img/home_oplossingen_bck.jpg) no-repeat top left;
	width:auto;
	margin:0;
	padding:0 0 0 10px;
}

div#oplossingen span
{
	display:block;
	height:10px;
	margin:0;
}

body.home div#oplossingen span
{
	margin:0 0 0 -10px;
}

div#oplossingen span.top {background:url(../img/oplossingen_top.gif) top left no-repeat;}
div#oplossingen span.bottom {background:url(../img/oplossingen_bottom.gif) bottom left no-repeat;}

body.home div#oplossingen span.top {background:url(../img/home_oplossingen_top.gif) top left no-repeat;}
body.home div#oplossingen span.bottom {background:url(../img/home_oplossingen_bottom.gif) bottom left no-repeat;}

body.home div#oplossingen h3
{
	background:url(../img/home_oplossingen_tab.gif) top right no-repeat;
	font-size:1.1em;
	padding: 5px 10px 5px 7px;
	margin:0;
	width:100%;
	display:inline;
	color:#FFFFFF;
	top:-20px;
	position:relative;
}
div#oplossingen h1 {color:white;}
div#oplossingen h2, div#oplossingen h3
{
	font-size:1.1em;
	padding: 0px 10px 0 10px;
	margin:0;
	color:#FFFFFF;
}
div#oplossingen p {
	margin: 0 10px 10px 10px;
	padding: 0;
}

body.home div#oplossingen p {
	margin:0;
	padding-bottom: 0;
}

div#oplossingen a {
	color: #FFFFFF;
	text-decoration: underline;
}

div#oplossingen a:hover {
	text-decoration: none;
}

div#oplossingen em a{
	text-decoration: none;
	font-weight: bold;
	font-style:normal;
}

div#oplossingen img {
	margin-bottom: -20px;
}


div#oplossingen ul li {background: url(../img/sub_separator.gif) 2px center no-repeat;}

div#oplossingen ul, div#oplossingen ol
 { padding-right: 10px; }

/*
   div#oplossingen ul, div#oplossingen ol 
   {
   	margin: 0 0 10px 0;
   	padding: 0 0 0 10px;
   }

   div#oplossingen ul li
   {	list-style: none outside;
   	background: url(../img/sub_separator.gif) 2px center no-repeat;
   	padding: 0 10px 0 10px;
   	margin: 0;
   }
   	
   div#oplossingen.link ul li {background-image:url(../img/more_white.gif);}
   div#oplossingen.link ul li a {text-decoration:none;}
   div#oplossingen.link ul li a:hover {text-decoration:underline;}
*/

div#oplossingen div.column {
	margin-top:0;
	padding:0;
}

div#oplossingen div.row {background:none;}

div#footer { color:#313888; }
div#footer table { border-collapse: collapse; 
                   margin-left: 25px; } /* undo footer -ve margin and add p margin */
div#footer th { text-align: left; padding-right: 5px; }

div#footer p {float:left; margin-left:15px; }
div#footer a {margin-left:25px; float:left; }
div#footer span { padding-left: 2em; }
div#footer address {float:right; font-style:normal; }
div#footer address a {float:none; margin:0; }


div.img
{
	position:relative;
	padding:0;
	margin-bottom:10px;
	width:595px;
	height:174px;
}

div.wrap div.img
{
	width:290px;
	float:left;
	margin:0 15px 0 0;
}
div.wrap div.img.last {margin-right:0;}

body.home div.img {width:285px;
margin:0;}

div.img img {margin:0;}
div.img span.top
{
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	height:10px;
	background:url(../img/sub_corners_top.gif) top left no-repeat;
	width:100%;
}

div.wrap div.img span.top {background-image:url(../img/sub_corners_top_small.gif);}
body.home div.img span.top {background:url(../img/home_corners_top_small.gif) no-repeat!important;left:10px;}
div.img span.bottom
{
	position:absolute;
	bottom:0;
	left:0;
	background:url(../img/sub_corners_bottom.gif) bottom left no-repeat;
	height:10px;
	width:100%;
}
body.home div.img span.bottom {background:url(../img/home_corners_bottom_small.gif) bottom no-repeat!important;left:10px;}
div.wrap div.img span.bottom {background-image:url(../img/sub_corners_bottom_small.gif);}

/**** Added by Stephen Poley ****/

form table { background-color:#ececec; padding: 0.5em; border: 1px solid #A0A0A0; }

div#main .spaced li { padding-top: 0; padding-bottom: 0; margin-top: 1em; margin-bottom: 0; }

/* TODO: work out why important is needed here and remove */
.flright { float: right!important; margin-left: 0.5em; margin-bottom: 1em; }