/*-----------------------------------------------------------------*/
/* [Table of contents]

1. 	Main
2. 	Body
3. 	Content
4. 	Floats left & right (Webdesign, Portfolio)
5. 	Portfolio
6. 	Navigation #navbar
7. 	Column left #columnleft
8. 	ML2 logo css image replacement
9. 	Diversen
10. 	Footer #footer
	
/*-----------------------------------------------------------------*/
/* [1. Main] */

* { margin:0; padding:0; }
a { color: #006FA4; font-weight: bold; outline: none; text-decoration: none; cursor: pointer; }
a:hover{ text-decoration: underline; }
ul, li{ list-style: none; }

/*-----------------------------------------------------------------*/
/* [2. Body] */

body{
	background: #262626 url(../images/layout/bg_body.png) repeat-y;
	color: #8C8C8C;
	font: 62.5% Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: left;
}

a #top{
	position: absolute;
	top: -25px;
}

/*-----------------------------------------------------------------*/
/* [3. Content] */

#content{	
	border-bottom: 1px solid #343434;
	border-top: 1px solid #343434;
	margin: 118px 0px 0px 354px;
	padding: 20px 0px 0px 0px;
	width: 560px;
}

#content h1{
	color: #8C8C8C;
	font: bold 1em/1.75em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 20px 0px;
}

#content h2{
	color: #8C8C8C;
	font: bold 1em/1.75em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
}

#content p{
	/* background: #262626; */
	color: #8C8C8C;
	font: 1em/1.75em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 20px 0px;
}

#content p strong{ font-weight: normal; }

#content ul{
	/* background: #262626; */
	color: #8C8C8C;
	font: 1em/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 20px 0px;
	padding: 0;
}

#content ul.list{ margin: -20px 0px 20px 0px; }

#content ul ul{ margin: 0px 0px 0px 20px; }

#content li{ 
	background: url(../images/layout/bg_li.gif) no-repeat 0px 7px;
	padding: 0px 0px 0px 10px;
}

#content li.margin{
	background: url(../images/layout/bg_li.gif) no-repeat 20px 7px;
	padding: 0px 0px 0px 30px;
}

#content hr{
	margin: 0px 0px 20px 0px;
	background: #343434;
	border: 0;
	color: #343434;
	height: 1px;
}

#content #clear{
	background: #262626;
	clear: both;
	height: 0;
	margin: 0;
	overflow: hidden;
}

/*-----------------------------------------------------------------*/
/* [4. Floats left & right (Webdesign, Portfolio) */
#content .left{
	border-right: 1px solid #343434;
	float: left;
	margin: 0px 0px 20px 0px;
	padding: 20px 20px 20px 0px;
	position: relative;
	width: 259px; /* 280-20-1 */
}

#content .right{
	float: left;
	margin: 0px 0px 20px 0px;
	padding: 20px 0px 20px 20px;
	position: relative;
	width: 260px; /* 280-20 */
}

#content .left h1, #content .right h1{
	color: #8C8C8C;
	font: bold 1em/1.75em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 20px 0px;
}

#content .left img, #content .right img{
	background: White;
	border: 1px solid #181818;
	height: 150px;
	width: 260px;
}

#content .left a img, #content .right a img{
	background: White;
	border: 1px solid #181818;
	height: 150px;
	width: 260px;
	cursor: pointer;
}

#content .clear{
	background: #343434;
	clear: both;
	height: 1px;
	margin: 0px 0px 20px 0px;
	overflow: hidden;
}

/*-----------------------------------------------------------------*/
/* [5. Portfolio] */

#content .screenshot{
	border-bottom: 1px solid #343434;
	border-top: 1px solid #343434;
	margin: 0px 0px 20px 0px;
	padding: 20px 0px 20px 0px;
}

#content .screenshot a img{
	background: White;
	border: 1px solid #181818;
	height: 315px;
	width: 560px;
}

/*-----------------------------------------------------------------*/
/* [6. Navigation #navbar] */

#navbar{
	left: 303px;
	position: absolute;
	top: 0px;
	width: 24px;
}

#navbar ul li a{
	background: #0F0F0F;
	border-bottom: 1px solid #0F0F0F;
	display: block;
	height: 201px;
	overflow: hidden;
	padding-left: 24px;
	width: 0px;	/* 24-24 */
	color: #181818;
}

#navbar ul li a:hover{ background: #181818; color: #0F0F0F; }

#navbar ul li a.webdesign{ background: transparent url(../images/layout/nav_webdesign.png) no-repeat 0px 0px; }
#navbar ul li a.webdesign:hover{ background: transparent url(../images/layout/nav_webdesign.png) no-repeat -24px 0px; }

#navbar ul li a.portfolio{ background: transparent url(../images/layout/nav_portfolio.png) no-repeat 0px 0px; }
#navbar ul li a.portfolio:hover{ background: transparent url(../images/layout/nav_portfolio.png) no-repeat -24px 0px; }

#navbar ul li a.homepage{ background: transparent url(../images/layout/nav_homepage.png) no-repeat 0px 0px; }
#navbar ul li a.homepage:hover{ background: transparent url(../images/layout/nav_homepage.png) no-repeat -24px 0px; }

/*-----------------------------------------------------------------*/
/* [7. Column left] */

#column_left_flash{
	height: 606px;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 302px;
}

/*-----------------------------------------------------------------*/
/* [8. ML2 logo css image replacement] */

#logo a{
	display: block;
	height: 105px;
	background: #262626 url(../images/layout/logo_ml2webdesign.png) no-repeat 0px 0px;
	line-height: 1000px;
	overflow: hidden;
	position: absolute;
	left: 764px;
	top: 20px;
	width: 151px;
}

/*-----------------------------------------------------------------*/
/* [9. Diversen] */

#ML2Adress{
	border-top: 1px solid #343434;
	margin: 0px 0px -20px 0px;
	padding: 20px 0px 20px 0px;
	background: url(../images/layout/nederland.gif) no-repeat 200px 5px;
}

a.linkint{
	color: #8C8C8C;
	font: 1em/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*-----------------------------------------------------------------*/
/* [10. Footer #footer] */
#footer{
	clear: both;
	margin: 20px 0px 0px 354px;
	width: 560px;
}

#footer p{
	background: #262626;
	color: #8C8C8C;
	font: 1em/1.75em Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0px 0px 20px 0px;
	text-align: justify;
}