/* GENERAL STYLES
---------------------------------------------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	font-family: "Verdana", "Arial", sans-serif;
	color: #433623;
	text-align: center;
	background: url("/img/bg-grid.gif")
	}

a { color: #BD3001; }
a:link { color: #BD3001; }
/*a:visited { color: #AC725F; }*/
a:active { color: #AC725F; }
a:hover { color: #7C7565; border-bottom: none;  }

address { font-style: normal; margin-bottom: 20px; padding: 30px; border: 1px dotted #ccc; background: #fff; }
    
.cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: 0; padding: 0; background: transparent; }
.current, .current a:visited, .current a:link { color: #7C7565; text-decoration: none; border: none; }
 
.green { color: #060; }   
hr { color: #999; height: 1px; }

img { border: none; }

p { margin: 8px 0 20px 0; }

h1 { margin: 0 0 0.8em 0; font: 300%/100% "Arial Narrow", "Arial", "Helvetica", sans-serif; }
h2 { font: 180%/120% "Arial", "Helvetica", sans-serif; margin: 0 0 0 0; }
h3 { font: bold 110%/100% "Verdana", "Arial", "Helvetica", sans-serif; margin: 2em 0 0 0; }
h4 { font: 105%/110% "Verdana", "Arial", "Helvetica", sans-serif; margin: 15px 0 5px 0; }


/* OUTER CONTAINER
---------------------------------------------------------------------------------------------- */
#outerspan {
	width: 753px;
	margin: 0 auto 0 auto;
	background: #F7F7F4 url("/img/shadow-right.gif") right top repeat-y;
    }
    
/* BACKGROUND IMAGE CONTAINER 
---------------------------------------------------------------------------------------------- */
#background { height: 250px; }

#diensten-page #background { background: url("/img/stock/bg-diensten.gif") 0px 0px no-repeat; }
#referenties-page #background { background: url("/img/stock/bg-referenties.gif") 0px 0px no-repeat; }
#publicaties-page #background { background: url("/img/stock/bg-publicaties.gif") 0px 0px no-repeat; }
#contact-page #background { background: url("/img/stock/bg-contact.gif") 0px 0px no-repeat; }
#organisatie-page #background { background: url("/img/stock/bg-organisatie.gif") 0px 0px no-repeat; }
#nieuws-page #background { background: url("/img/stock/bg-news.gif") 0px 0px no-repeat; }
#zoeken-page #background { background: url("/img/stock/bg-zoeken.gif") 0px 0px no-repeat; }


/* HEADER
---------------------------------------------------------------------------------------------- */
#header { background: url("/img/bg-header.gif") no-repeat; width: 753px; height: 98px; }
#myAlternativeContent { padding: 1em;} 
#header h1 { margin: 0; }
.skipnavigatie { position: absolute; left: -1000px; width: 990px; font-size: 1%; line-height: 1; }

#logo { background: url("/img/logo.gif") left center no-repeat; height: 110px; width: 335px; display: block; float: right; height: 98px; }
#logo span { display: none; }



/* TOPNAVIGATIE
---------------------------------------------------------------------------------------------- */
#topnav { float: left; padding: 0; margin: -7px 0 0 0; background: url("/img/topnav/off-totaal.gif") left top repeat-x; width: 750px; height: 31px; }
#topnav ul { list-style: none; padding: 0; margin: 0; }
#topnav li { float: left; padding: 0; margin: 0;}
#topnav li span { font-size: 12px; text-align: left; } 
#topnav li a { display: block; float: left; text-decoration: none; font-weight: normal; height: 31px; margin: 0; padding: .5em .66em 0 .66em; }

/* Home */
li#home/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#home a { background: url("/img/topnav/off.gif") top right no-repeat; }
li#home.current a, li#home a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* nieuws */
li#nieuws/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#nieuws a { background: url("/img/topnav/off.gif") top right no-repeat; }
li#nieuws.current a, li#nieuws a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* opdrachten */
li#opdrachten/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#opdrachten a { background: url("/img/topnav/off.gif") top right no-repeat; }
li#opdrachten.current a, li#opdrachten a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* organisatie */
li#organisatie/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#organisatie a { background: url("/img/topnav/off.gif") top right no-repeat;  }
li#organisatie.current a, li#organisatie a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* diensten */
li#diensten/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat;  }
li#diensten a { background: url("/img/topnav/off.gif") top right no-repeat; }
li#diensten.current a, li#diensten a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* referenties */
li#referenties/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#referenties a { background: url("/img/topnav/off.gif")  top right no-repeat; }
li#referenties.current a, li#referenties a:hover { background: url("/img/topnav/on.gif")  top right no-repeat; }

/* publicaties */
li#publicaties/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#publicaties a { background: url("/img/topnav/off.gif")  top right no-repeat; }
li#publicaties.current a, li#publicaties a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }

/* contact */
li#contact/* hide ie5 */{ background: url("/img/topnav/on.gif") transparent top right no-repeat; }
li#contact a { background: url("/img/topnav/off.gif") top right no-repeat; }
li#contact.current a, li#contact a:hover { background: url("/img/topnav/on.gif") top right no-repeat; }


/* CONTENT (ALL CONTENT IN THIS DIV CONTAINER)
---------------------------------------------------------------------------------------------- */
#content { background: url("/img/bg-breadcrumbs.gif") left top no-repeat; float: left; text-align: left; width: 750px; }
#content .breadcrumbs { font-size: 60%; color: #969290; padding: 15px 0 0 25px; width: 750px; }
#content .breadcrumbs a { color: #969290; }

/* SIDEBAR (SUBNAV LEFT, ON SOME PAGES)
---------------------------------------------------------------------------------------------- */
#sidebar { float: left; width: 230px; padding: 35px 0 35px 0; font-size: 70%; line-height: 130%; }
#sidebar h2 { font-size: 150%; font-weight: bold; color: #8D8A81; padding-left: 20px; border-bottom: 1px dotted #8D8A81; width: 183px; }
#sidebar h3 { margin-top: 10px; font: bold 110% "Verdana", sans-serif; }
#sidebar p, #sidebar h3 { padding-left: 20px; margin-top: 8px; width: 183px; }

#sidebar img { padding: 3px; border: 1px solid #ccc; }

#sidebar ul { margin: 5px 0 0 0; padding: 5px 0 0 0; text-indent: 0; list-style: none; width: 183px; }
#sidebar li { margin: 0; padding: 5px 0 9px 27px; text-indent: 0; border-bottom: 1px dotted #9D998E; }
#sidebar li.current { background: url("/img/icons/list-arrow.gif") 12px 7px no-repeat; }
#sidebar li.current a { color: #7C7565; }	
#sidebar li a { text-decoration: none; border: none; }
#sidebar li:hover { background: url("/img/icons/list-arrow.gif") 12px 7px no-repeat; }

/* zoeken */
#zoeken { border-top: 4px solid #E7E7E4; margin: 2px 0 15px 0; width: 183px; }
.background { background: #F1F1ED; margin: 5px 0 2px 0; padding: 10px 0 10px 0; }
#zoeken input { font: 100%/100% "Verdana", "Arial", "Helvetica", sans-serif; vertical-align: middle; margin-left: 5px; }   
#zoeken p { margin: 0; padding: 0; }
input#search { width: 100px; margin-left: 15px; }

/* balk */
#sidebar ul.bar {
    position: relative;
    }
    #sidebar ul.bar li {
        border: 0;
        margin: 0 0 3px 10px; 
        padding: 0;
        height: 20px;
        width: 184px; 
        }
    html #sidebar ul.bar li {
        border: 0;
        margin: 0 0 3px 20px; 
        padding: 0;
        height: 20px;
        width: 184px; 
        }
        #sidebar ul.bar li a {
            display: block;
            height: 20px;
            width: 184px;
            }
    #sidebar ul.bar li.idm {
        background: url("/img/balk/idm-balk.png") right top no-repeat; 
        }
    #sidebar ul.bar li.tmc {
        background: url("/img/balk/tmc-balk.png") right top no-repeat; 
        }

    #sidebar ul.bar li.mc {
        background: url("/img/balk/mc-balk.png") right top no-repeat; 
        }

        #sidebar ul.bar li span {
            position: absolute;
            top: 0;
            left: -9999px;
            }

/* MAIN (CONTENT)
---------------------------------------------------------------------------------------------- */
#main {
	margin: 0;
	padding: 30px 0 20px 0;
	font: 70%/150% "Verdana", "Arial", "Helvetica", sans-serif;
    text-align: left;
    width: 500px;
    float: right;
	}
	
/* GENERAL STYLES */
#main #innerdiv { padding: 0 75px 0 0;/* margin-left: 70px;*/ }
#main .intro { font-weight: bold; font-size: 110%; line-height: 150%; }  
#main ul { margin: 10px 0 15px 15px; text-indent: 0; padding: 0; }
#main ul li { margin: 0 0 7px 0; line-height: 130%; background: url("/img/icons/list-bullet3.gif") 0px 4px no-repeat; list-style: none; padding: 0 0 0 17px; text-indent: 0; }

/* external links */
.external/**/ {
	background: url("/img/icons/external.gif") 0 70% no-repeat;
	padding-left: 14px;
	}
	
/* QUOTES */

.impuls #main em { display: inline; float: none; font-style: normal; text-decoration: underline; margin: 0; padding: 0;}

.impuls #main cite { display: inline; float: none; font-weight: bold; margin: 0; padding: 0;}

#main cite { display: block; float: right; margin: 8px -35px 0 8px; width: 253px; }
    
/* commented backslash hack, hide mac ie5 \*/
#main cite { margin: 8px -20px 0 5px; }
/* end hack */  

    
/* diensten */  
#main .quote-diensten { background: url("/img/quotes/diensten.gif") left top no-repeat; height: 85px; }
#main .quote-identiteitsmanagement { background: url("/img/quotes/identiteitsmanagement.gif") left top no-repeat; height: 85px; }
#main .quote-transactiekosten { background: url("/img/quotes/transactiekosten.gif") left top no-repeat; height: 109px; }
#main .quote-kenniscirculatie { background: url("/img/quotes/kenniscirculatie.gif") left top no-repeat; height: 109px; }
#main .quote-ketenmanagement { background: url("/img/quotes/ketenmanagement.gif") left top no-repeat; height: 109px; }
#main .quote-ppa { background: url("/img/quotes/ppa.gif") left top no-repeat; height: 110px; }
#main .quote-veiligheidsbeleid { background: url("/img/quotes/veiligheidsbeleid.gif") left top no-repeat; height: 109px; }
/* organisatie */
#main .quote-organisatie { background: url("/img/quotes/organisatie.gif") left top no-repeat; height: 63px; }
#main .quote-medewerkers { background: url("/img/quotes/medewerkers.gif") left top no-repeat; height: 108px; }
#main .quote-vakgroepen { background: url("/img/quotes/vakgroepen.gif") left top no-repeat; height: 108px; }
/* partners */
#main .quote-henk { background: url("/img/quotes/henk-hoijtink.gif") left top no-repeat; height: 125px; }
#main .quote-nanko { background: url("/img/quotes/nanko-boerma.gif") left top no-repeat; height: 87px; }
#main .quote-fons { background: url("/img/quotes/fons-knopjes.gif") left top no-repeat; height: 103px; }
#main .quote-ineke { background: url("/img/quotes/ineke-ruiter.gif") left top no-repeat; height: 84px; }
/* float left img */    
#main img { float: left; margin: 5px 12px 5px 0; padding: 2px; border: 1px solid #ccc; } 

/* Bedrijfsbureau foto's float */
div.float { float: left; width: 150px; }
#main div.float img { float: none; margin: 0; }
div.float p { margin: 0 0 15px 0; }
      
/* HOME STYLES */
.columns { border-top: 2px solid #D3D1CB; }
.columns h2 { font-size: 160%; color: #BD3001; font-weight: bold; padding-top: 4px; padding-left: 5px; }
    
.columns p { padding-left: 5px; }  
.columnLeft h2, .columnRight h2 { background: url("/img/bg-newscolumn.gif") left top repeat-x; height: 25px; }
.columnLeft { float: left; width: 200px; padding-right: 0; margin-top: 3px; }
.columnRight { float: right; width: 200px; padding-left: 15px; margin-top: 3px; border-left: 1px dotted #999; }
    
    
/* NIEUWS */
/* overview */
dl { margin-top: 2em; max-width: 350px;  }
dt { font-weight: bold; font-size: 150%; line-height: 120%; font-family: "Arial", sans-serif; margin: 15px 0 5px 0; }
dd { text-indent: 0; margin-left: 0; padding-left: 0; }
dd p { margin: 0; }
   
/* article */ 
p.date { color: #534F4D; margin: 5px 0 20px 0; }

/* archive list */
#news-page li { color: #c30; }


/* TITLE GIFS */
#main h1 { padding-top: 25px; }
h1.home { background: url("/img/titles/home-sm.gif") left top no-repeat; }
h1.nieuws { background: url("/img/titles/nieuws-sm.gif") left top no-repeat; }
h1.organisatie { background: url("/img/titles/organisatie-sm.gif") left top no-repeat; }
h1.diensten { background: url("/img/titles/diensten-sm.gif") left top no-repeat; }
h1.referenties { background: url("/img/titles/referenties-sm.gif") left top no-repeat; }
h1.contact { background: url("/img/titles/contact-sm.gif") left top no-repeat; }
h1.publicaties { background: url("/img/titles/publicaties-sm.gif") left top no-repeat; }

/* CONTACTFORMULIER */
form span {
	width: 120px;
	display: block;
	float: left;
	text-align: right;
    }

.text, textarea { margin-left: 12px; margin-bottom: 5px; width: 200px; font: 100% "Verdana", "Arial", sans-serif; }
textarea { width: 275px; }

.submit { margin: 0.2em 0.4em 0 0; float: left; width: 60px; min-width: 70px; padding: 0 4px 0 4px; }
.copy input { line-height: 0; margin: 5px 0 0 5px; }
fieldset { margin: 15px 0 15px 0; padding: 0 0 15px 0; background: #F1F1ED; text-indent: 0; border: 1px dotted #9D998E; background: #FAFAF9; }
legend { background: #E9E7DF; color: #6C665B; padding: 5px 0 5px 5px; text-indent: 0; float: left; width: 100%; font: bold 120% "Arial", "Arial", "Verdana", sans-serif; margin: 0 0 15px -10px; border-bottom: 1px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
    
/* commented backslash hack, hide mac ie5 \*/
legend { margin-left: 0px; }
/* end hack */   
    
input.error, textarea.error { border: 2px solid #BD3001; }
.error { color: #BD3001; font-weight: bold; }

/* output preview */
.code { color: #069; font-size: 110%; }

/* FOOTER
---------------------------------------------------------------------------------------------- */
#footer {
	color: #BD3001;
	font-size: 70%;
	height: 76px;
	width: 753px;
	margin: 0 auto 0 auto;
	background: url("/img/bg-footer.gif") left top no-repeat;
	text-align: left;
	}

#footer a { padding-left: 2px; padding-right: 2px; }
	
#footer .copyright {
    float: left;
    width: 140px;
    padding: 15px 0 0 20px;
    color: #7B7668;
    font-size: 85%;
    line-height: 140%;
    text-align: left;
    height: 56px;
    }
    
#footer .footernav { padding: 14px 5px 10px 0; }
#footer .footernav2 { padding: 10px 5px 0 0; color: #7B7668; }
#footer .footernav2 a { color: #696457; font-size: 90%; }
#footer hr { display: none; }
#footer img { margin: 0; vertical-align: top; }
#footer .top img { margin-left: 100px; }

.associates {
	background-color: #E2E0D7/*cfcbbd*/;
	border: 1px solid #A6A297;
	margin: 5px 30px 25px 0;
	padding: 5px 15px 0 10px; 
	width: 445px; 
	}
#main .associates img {
	border: 1px solid #fff;
	float: left;
	margin-top: -.125em;
	}
#main .associates p, #main .associates br.clearall {
	clear: left;
	}

.file {
	margin-bottom: 2.5em;
	}

/* FOOTER
---------------------------------------------------------------------------------------------- */
.alert {
	margin-bottom: 1.5em;
	padding: 7px 7px 2px 7px;
	background-color: #E4EDEE;
	color: #3D9EBF;
	border: 3px solid #EDF2F1;
	}
	.alert p {
		margin: 0 0 5px 0;
		}
	.alert h2 {
		font-weight: bold;
		font-size: 150%;
		line-height: 120%;
		font-family: "Arial", sans-serif;
		margin: 0 0 5px 0;
		}

/* STICKER 
---------------------------------------------------------------------------------------------- */
#topnav {
	position: relative;
	}
#sticker {
	position: absolute;
	top: -34px;
	right: 10px;
	height: 98px;
	width: 98px;
	background: url("/img/20jr-mc-sticker.png") right top no-repeat; 
	}
/*  Maatschappelijk
---------------------------------------------------------------------------------------------- */

.maatschappelijk { padding: 0 0 10px 20px; display: block;}



/* responsive layout */

@media only screen and (max-width:767px) {

	html { -webkit-text-size-adjust:none; }
	#outerspan,
	#topnav,
	#content,
	#content .breadcrumbs,
	#main,
	#sidebar,
	#footer,
	#sidebar h2,
	#sidebar h3,
	#sidebar p,
	#sidebar ul,
	#zoeken,
	#footer .copyright,
	form span,
	div.float {
		width: auto;
		float: none;
		}
	#header {
		display: block;
		margin: 0;
		width: 100%;
		background-position: right top;
		}
	#topnav {
		margin: 0;
		background-repeat: repeat;
		background-position: right top;
		}
		#topnav li a {
			height: auto;
			padding: 5px 0.66em;
			}
	#content {
		background-position: right top;
		padding-right: 3px;
		}
	#main {
		font-size: 12px;
		}
	#footer {
		height: auto;
		overflow: hidden;
		padding: 0 3px 0 0;
		background: #e6e5e0 url("/img/shadow-right.gif") right top repeat-y;
		}
		#footer .copyright {
			height: auto;
			padding: 15px;
			border-top: 1px solid #fff;
			}
		#footer .footernav,
		#footer .footernav2 {
			text-align: center;
			padding: 0;
			margin: 15px 0;
			}
		#footer .top {
			display: block;
			margin: 15px 0;
			}
			#footer .top img {
				margin: 0;
				}
	#footer,
	#outerspan {
		margin: 0 8px;
		}
		#topnav {
			overflow: hidden;
			height: auto;
			}
		#main {
			padding: 15px 0;
			overflow: hidden;
			}
			#main #innerdiv {
				padding: 0 15px;
				margin: 0;
				}
			#main img {
				max-width: 100%;
				height: auto;
				}
			#main p.intro img {
				max-width: 33%;
				height: auto;
				}
			.columnLeft,
			.columnRight {
				width: auto;
				float: none;
				padding: 0;
				border: none;
				}
	#sidebar {
		clear: both;
		border-bottom: 1px solid #b9b7af;
		}
		#sidebar h2 {
			margin-top: 40px;
			}
	#content .breadcrumbs {
		padding: 15px 15px 0 15px;
		}
	h1 {
		font-size: 250%;
		}
	dl {
		max-width: 100%;
		}
	input#search {
		width: 62%;
		}
	fieldset {
		}
		form span {
			text-align: left;
			margin: 0 10px;
			}
		.text, textarea {
			margin: 0 10px 5px 10px;
			width: 200px;
			max-width: 70%;
			-webkit-box-sizing: border-box;
	        -moz-box-sizing: border-box;
	        box-sizing: border-box;
			}
		.cleaner {
			display: none;
			}

}