/* X-MEDIA */

/* BASICS */


@font-face {
    font-family: 'PremieraBook';
    src: url('../fonts/premiera-book-webfont.eot');
    src: url('../fonts/premiera-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/premiera-book-webfont.woff') format('woff'),
         url('../fonts/premiera-book-webfont.ttf') format('truetype'),
         url('../fonts/premiera-book-webfont.svg#PremieraBook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PremieraBold';
    src: url('../fonts/premiera-bold-webfont.eot');
    src: url('../fonts/premiera-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/premiera-bold-webfont.woff') format('woff'),
         url('../fonts/premiera-bold-webfont.ttf') format('truetype'),
         url('../fonts/premiera-bold-webfont.svg#PremieraBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PremieraItalic';
    src: url('../fonts/premiera-italic-webfont.eot');
    src: url('../fonts/premiera-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/premiera-italic-webfont.woff') format('woff'),
         url('../fonts/premiera-italic-webfont.ttf') format('truetype'),
         url('../fonts/premiera-italic-webfont.svg#PremieraItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, body, container {
	margin: 0;
	padding: 0;
	
	height: 100%;
	width: 100%;
	
	/*standard font */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #333333;
	
	min-width: 1020px;
}

body {
	background-image: url(images/background.jpg);
	background-repeat: repeat-y;
	background-position: center;
	
	behavior: url("../css/htc/csshover3.htc"); 
	/* relative to page, not to css like background-image*/
}

container {
	background-image: url(images/background.jpg);
	background-repeat: repeat-y;
	background-position: center;
}

/*standard font */
p, ul, li, div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #333333;
  	margin:0; /* Roelof, testje */
}

a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #666666;
	
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a img {
	border: none;
}

h1 {	
	font-family: "PremieraBook", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 20px;
	color: #34b233;
	font-weight: bolder;
	
	margin: 0;
	padding: 0;
	
}
h1.header_filter {
	font-family: "PremieraItalic", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 100;
}

h2 {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #34b233;
	font-weight: bold;
	
	margin: 0;
	padding: 0;
}

h3 {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #34b233;
	font-weight: bold;
	
	margin: 0;
	padding: 0;
}



/* TOP */

/* ================================================================================================= */

#top_wrapper {
	height: 130px;
	width: 100%;
	
	background-image: url(images/top_wrapper_background.png);
	background-repeat: no-repeat;
	background-position: center;
}

#top {
	margin: 0 auto;
	width: 1020px;
}

#logo {
	height: 108px;
	width: 660px;
	
	float: left;
		
	background-color: #FFFFFF;
}

#logoImg {
	float: left;
}


#divBNO {
	margin: 0;
	padding: 0;
	
	width: 150px;
	height: 108px; 
	float: right;
}

#divBNO a {
	position: absolute;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 18px;
	color: #999999;
	
	height: 108px; 
	width: 150px;
	
	background-image: url(images/bno.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

#divBNO a span {
	display: none;
}



/* MENU */


#menu {
	height: 130px;
	width: 330px;
	
	float: left;
	display: block;
}

#mainmenu {
	position: absolute;
	list-style-type: none;
	margin: 78px 0 0 0;
	padding: 0;
	width: 330px;
	display: block;
	background-color: #000000;
}

#mainmenu li {
	position: relative;
	float: left;
	display: block;
	height: 30px;
}

#mainmenu a {
	color: #999999;
	text-decoration: none;
	
	display: block;
	height: 30px;
}

#mainmenu a span {
	display: none;
}

#mainmenu #projecten { width: 95px; }
#mainmenu #actueel { width: 78px; }
#mainmenu #bureau { width: 73px; }
#mainmenu #contact { width: 84px; }

#mainmenu #projecten a { background-image: url(images/btns/btn_projecten.gif); background-repeat: no-repeat; }
#mainmenu #actueel a { background-image: url(images/btns/btn_actueel.gif); background-repeat: no-repeat; }
#mainmenu #bureau a { background-image: url(images/btns/btn_bureau.gif); background-repeat: no-repeat; }
#mainmenu #contact a { background-image: url(images/btns/btn_contact.gif); background-repeat: no-repeat; }

#mainmenu #projecten a:hover { background-image: url(images/btns/btn_over_projecten.gif); background-repeat: no-repeat; }
#mainmenu #actueel a:hover { background-image: url(images/btns/btn_over_actueel.gif); background-repeat: no-repeat; }
#mainmenu #bureau a:hover { background-image: url(images/btns/btn_over_bureau.gif); background-repeat: no-repeat; }
#mainmenu #contact a:hover { background-image: url(images/btns/btn_over_contact.gif); background-repeat: no-repeat; }


#mainmenu #projecten a.active { background-image: url(images/btns/btn_active_projecten.gif); background-repeat: no-repeat; }
#mainmenu #actueel a.active { background-image: url(images/btns/btn_active_actueel.gif); background-repeat: no-repeat; }
#mainmenu #bureau a.active { background-image: url(images/btns/btn_active_bureau.gif); background-repeat: no-repeat; }
#mainmenu #contact a.active { background-image: url(images/btns/btn_active_contact.gif); background-repeat: no-repeat; }

#mainmenu #projecten a.active:hover { background-image: url(images/btns/btn_over_active_projecten.gif); background-repeat: no-repeat; }
#mainmenu #actueel a.active:hover { background-image: url(images/btns/btn_over_active_actueel.gif); background-repeat: no-repeat; }
#mainmenu #bureau a.active:hover { background-image: url(images/btns/btn_over_active_bureau.gif); background-repeat: no-repeat; }
#mainmenu #contact a.active:hover { background-image: url(images/btns/btn_over_active_contact.gif); background-repeat: no-repeat; }


#mainmenu #bureau:hover #submenu { 
	display:block;
}

/* SUBMENU */

#mainmenu li #submenu {
	display:none; /* hide sub */
	
	position: absolute;
	top: -72px;
	left: -40px;
	float: left;
}

#mainmenu li #submenu a {
	color: #999999;
	text-decoration: none;
}

#mainmenu li #submenu a span {
	display: none;
}

#mainmenu #profiel { width: 158px; height: 21px; }
#mainmenu #disciplines { width: 158px; height: 21px; }
#mainmenu #opdrachtgevers { width: 158px; height: 30px; }

#mainmenu #profiel a { background-image: url(images/btns_sub/btn_profiel.png); background-repeat: no-repeat; }
#mainmenu #disciplines a { background-image: url(images/btns_sub/btn_disciplines.png); background-repeat: no-repeat; }
#mainmenu #opdrachtgevers a { background-image: url(images/btns_sub/btn_opdrachtgevers.png); background-repeat: no-repeat; }

#mainmenu #profiel a:hover { background-image: url(images/btns_sub/btn_over_profiel.png); background-repeat: no-repeat; }
#mainmenu #disciplines a:hover { background-image: url(images/btns_sub/btn_over_disciplines.png); background-repeat: no-repeat; }
#mainmenu #opdrachtgevers a:hover { background-image: url(images/btns_sub/btn_over_opdrachtgevers.png); background-repeat: no-repeat; }


#mainmenu #profiel a.active { background-image: url(images/btns_sub/btn_active_profiel.png); background-repeat: no-repeat; }
#mainmenu #disciplines a.active { background-image: url(images/btns_sub/btn_active_disciplines.png); background-repeat: no-repeat; }
#mainmenu #opdrachtgevers a.active { background-image: url(images/btns_sub/btn_active_opdrachtgevers.png); background-repeat: no-repeat; }

#mainmenu #profiel a.active:hover { background-image: url(images/btns_sub/btn_active_profiel.png); background-repeat: no-repeat; }
#mainmenu #disciplines a.active:hover { background-image: url(images/btns_sub/btn_active_disciplines.png); background-repeat: no-repeat; }
#mainmenu #opdrachtgevers a.active:hover { background-image: url(images/btns_sub/btn_active_opdrachtgevers.png); background-repeat: no-repeat; }



/* show or hide sub according to css tag*/

#mainmenu #bureau.show #submenu { 
	display:block;
}


#left {
	background-color: #FFFFFF;
}