/* Reset -----------------------------------------------------*/

* {
	padding			: 0; 
	margin			: 0;
}

img {	
	border			: none;
}

a {
	outline			: none;
}

/* Zofa basiskleuren -----------------------------------------*/

.zzwart {
	color			: #000000;
}
.zgrijs1 {
	color			: #c1c1c1;
}
.zgroen {
	color			: #898600;
}
.zoranje {
	color			: #e85d10;
}

.zblauw {
	color			: #33ccff;
}

/* Basisboxen ------------------------------------------------*/

body {
	background		: #ffffff;
}

/* Basisitems pagina -----------------------------------------*/

#main {
	background		: none;
	position		: relative;
	width			: 920px;
	margin			: 0 auto;
}

#header {
	float			: left;
	width			: 920px;
	height			: 75px;
	margin-top		: 15px;
	background		: #ffffff;
}

#menu {
	float			: left;
	width			: 920px;
	height			: 35px;
	margin-top		: 5px;
	display			: inline;
}
#submenu {
	float			: left;
	width			: 920px;
	height			: 20px;
	padding-bottom		: 20px;
	margin-bottom		: 15px;
	border-bottom		: 1px solid #999999;
	display			: inline;
}

#mid {
	float			: left;
	width			: 920px;
	display			: inline;
}

#context {
	float			: left;
	width			: 200px;
	display			: inline;
}

#content {
	float			: left;
	width			: 720px;
	background		: #ffffff;
	display			: inline;
	margin-bottom		: 45px;
}

.contentkolom {
	float			: left;
	width			: 200px;
	margin-right		: 40px;
}

.content2kolom {
	float			: left;
	width			: 440px;
	margin-right		: 40px;
}

#logo {
	float			: left;
	width			: 300px;
	height			: 60px;
}

#metanav {
	float			: left;
	width			: 300px;
	margin-left		: 320px;
	text-align		: right;
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 9pt;
	line-height		: 12pt;
	color			: #cccccc;
	display			: none;
}

/* Hoofdmenu -------------------------------------------------*/

#menu ul {
	list-style		: none;
}

#menu ul li {
	float			: left;
	text-align		: left;
	margin-right		: 20px;
}

#menu ul li:not(:last-child):after {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 20pt;
	line-height		: 20pt;
	color			: #999999;
	content			: "|";
}

#menu ul li a {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 20pt;
	line-height		: 20pt;
	text-decoration		: none;
	text-transform		: lowercase;
	margin-right		: 20px;
	color			: #33ccff;
}	

#menu ul li a:hover {
	color			: #78ddff;
}

#menu .actueel {
	color			: #33ccff;
}
#menu ul li a.actueel:hover {
	color			: #78ddff;
}

#menu .projecten {
	color			: #898600;
}
#menu ul li a.projecten:hover {
	color			: #a9a505;
}

#menu .bureau {
	color			: #e85d10;
}
#menu ul li a.bureau:hover {
	color			: #ff823d;
}

/* Submenu ---------------------------------------------------*/

#submenu ul {
	list-style		: none;
}

#submenu ul li {
	float			: left;
	text-align		: left;
}

#submenu ul li {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 12pt;
	line-height		: 12pt;
	color			: #999999;
}

#submenu ul li a {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 12pt;
	line-height		: 12pt;
	text-decoration		: none;
	text-transform		: lowercase;
	margin-right		: 5px;
}	

#submenu.actueel ul li a {
	color			: #33ccff;
}
#submenu.actueel ul li a:hover {
	color			: #78ddff;
}
#submenu.projecten ul li a {
	color			: #898600;
}
#submenu.projecten ul li a:hover {
	color			: #a9a505;
}
#submenu.bureau ul li a {
	color			: #e85d10;
}
#submenu.bureau ul li a:hover {
	color			: #ff823d;
}


/* Metanavigatie menu ----------------------------------------*/

#metanav ul {
	list-style		: none;
}

#metanav ul li a {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 9pt;
	line-height		: 12pt;
	color			: #cccccc;
	text-decoration		: none;
}

#metanav ul li a:hover {
	color			: #999999;
}

/* Standaard inhoud ------------------------------------------*/
p {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 9pt;
	line-height		: 12pt;
	color			: #666666;
}

p a {
	color			: #000000;
	text-decoration		: underline;
}

/* Contextboxen ----------------------------------------------*/

.contextbox {
	float			: left;
	width			: 200px;
	padding-bottom		: 15px;
	margin-bottom		: 15px;
	border-bottom		: 1px solid #999999;
}

.contextbox h3 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: normal;
	font-size		: 15pt;
	line-height		: 14pt;
	color			: #000000;
	text-transform		: lowercase;
	margin-bottom		: 15px;
}
.contextbox h4 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: normal;
	font-size		: 13pt;
	line-height		: 14pt;
	color			: #000000;
	text-transform		: lowercase;
}
.contextbox p {
	font-family		: Arial, Helvetica, sans-serif;
	font-size		: 9pt;
	line-height		: 14pt;
	color			: #666666;
	margin-bottom		: 15px;
}
.contextbox p a {
	color			: #666666;
}
.contextbox p a:hover {
	color			: #000000;
}

.smicon {
	margin-top		: 0px;
}

/* Kolomboxen ------------------------------------------------*/

.artikel1kolom {
	float			: left;
	width			: 200px;
	border-bottom		: 1px solid #999999; 
	padding-bottom		: 15px;
	margin-bottom		: 15px;
}

.artikel2kolom {
	float			: left;
	width			: 440px;
	border-bottom		: 1px solid #999999; 
	padding-bottom		: 15px;
	margin-bottom		: 15px;
}

.artikel1kolom h1, .artikel2kolom h1, .artikel3kolom h1 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: bold;
	font-size		: 14pt;
	line-height		: 17pt;
	margin-bottom		: 15px;
}

.artikel1kolom h2, .artikel2kolom h2, .artikel3kolom h2 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: bold;
	font-size		: 14pt;
	line-height		: 17pt;
	margin-bottom		: 15px;
}

.artikel1kolom h3, .artikel2kolom h3, .artikel3kolom h3 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: bold;
	font-size		: 14pt;
	line-height		: 17pt;
	margin-bottom		: 15px;
}

.artikel1kolom h4, .artikel2kolom h4, .artikel3kolom h4 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: bold;
	font-size		: 12pt;
	line-height		: 17pt;
	margin-bottom		: 15px;
}

.artikel1kolom h6, .artikel2kolom h6, .artikel3kolom h6 {
	font-family		: Arial, Helvetica, sans-serif;
	font-weight		: bold;
	font-size		: 10pt;
	line-height		: 12pt;
	text-transform		: lowercase;
}

.artikel2kolom p {
	margin-bottom		: 15px;
}

.artikel1kolom h1 a, .artikel2kolom h1 a, .artikel3kolom h1 a, .artikel1kolom h2 a, .artikel2kolom h2 a, .artikel3kolom h2 a {
	text-decoration		: none;
}
.artikel1kolom h1 a:hover, .artikel2kolom h1 a:hover, .artikel3kolom h1 a:hover, .artikel1kolom h2 a:hover, .artikel2kolom h2 a:hover, .artikel3kolom h2 a:hover {
	text-decoration		: underline;
}

.artikel1kolom h3 a:hover, .artikel2kolom h3 a:hover, .artikel3kolom h3 a:hover {
	text-decoration		: underline;
}

.artikel1kolom img, .artikel2kolom img, .artikel3kolom img {
	padding-bottom		: 15px;
}

.artikel3kolom {
	float			: left;
	width			: 680px;
	margin-right		: 40px;
	border-bottom		: 1px solid #999999; 
	margin-bottom		: 15px;
}

.artikel3kolomtekst {
	float			: left;
	width			: 200px;
	margin-right		: 40px;
	margin-bottom		: 15px;
}
.artikel3kolomfoto {
	float			: left;
	width			: 440px;
}

/* Projecten -------------------------------------------------*/

.margeonder {
	margin-bottom		: 15px;
}

.projectthumbnail {
	float			: left;
	width			: 80px;
	height			: 80px;
	margin-right		: 15px;
}

.projectthumbnailend {
	float			: left;
	width			: 80px;
	height			: 80px;
}

.projectthumbscrollleft {
	float			: left;
	width			: 15px;
	height			: 80px;
}

.projectthumbscrollright {
	top			: 0px;
	left			: 100px;
	float			: left;
	width			: 15px;
	height			: 80px;
}

.project3kolomfoto {
	float			: left;
	width			: 680px;
}

#projectfotobox {
	float			: left;
	width			: 680px;
	margin-bottom		: 15px;
}

/* Twitter integratie ----------------------------------------*/


.timeline-header {
	border-bottom		: #ff0000 !important;
}

.timeline {
	border			: 1px solid #ff0000 !important;