/* 	HTTP://WWW.ARTFORM.ORG
	html/css by artform media
	comments by ken @ artform media
========================================================================== */

body { background:#ffffff; } 
.bg1 { background:#ffffff url('../images/bg1.jpg') top left repeat-x; }
.bg2 { background:#ffffff url('../images/bg2.jpg') top left repeat-x; }
.bg3 { background:#ffffff url('../images/bg3.jpg') top left repeat-x; }
.bg4 { background:#ffffff url('../images/bg4.jpg') top left repeat-x; }
.bg5 { background:#ffffff url('../images/bg5.jpg') top left repeat-x; }
.bg6 { background:#ffffff url('../images/bg6.jpg') top left repeat-x; }

/* div container for graphical user interface
========================================================================== */
#layout { position:relative; width:770px; height:900px; margin:0 auto; border:0px solid #ff0000; }

#top { position:relative; width:770px; padding-top:11px; border:0px solid #ff0000; }

/* top menu
========================================================================== */
#menu { position:relative; left:0; top:15px; margin:0; width:auto; height:50px; }
#menu li { display:block; float:left; }
#menu ul, #menu ul li { list-style:none; margin:0; padding:0; }
#menu a { 
	display:block; 
	font-family:arial; 
	color:#fff; 
	font-size:11pt; 
	text-align:right; 
	padding:5px 10px 5px 10px;
	text-decoration:none;
	text-transform:lowercase;
}
#menu ul ul { display:none; }
#menu a:hover { border-bottom:10px solid #fff; }
#menu a.currentPage { border-bottom:10px solid #fff; }

/* header
========================================================================== */
#header { position:relative; width:750px; height:200px; background:#fff; border:10px solid #fff; }
#header_left { position:relative; float:left; width:545px; height:191px; background:#fff; border-right:10px solid #fff; }
#header_right { position:relative; float:left; width:193px; height:191px; background:#f0f0f0 url('../images/bg_logo.jpg') top right no-repeat; }
#naw { position:relative; padding:80px 15px 15px 15px; float:right; text-align:right; font-size:8pt; line-height:13pt; }
#naw a { font-size:8pt; } 

/* supercool min height hack, thanks to GreyWyvern (http://www.greywyvern.com/)*/
.prop { float:right; width:0px; }
.clear { clear:both; height:1%;	overflow:hidden; }
.min700 { height:700px; }
.min350 { height:350px; }

/* content
========================================================================== */
#content { 
	position:relative; 
	width:758px;
	height:auto;
	background:#fff; 
	border:0px solid #ff0000; 
	padding-left:10px;
}

#content_home_left { position:relative; float:left; width:555px; border:0px solid #ff0000; }
#content_home_left p { width:545px; }

#content_home_right { position:relative; float:left; width:190px; border:0px solid #ff0000; }

#content_home_full { position:relative; float:left; width:754px; border:0px solid #ff0000; }
#content_home_full p { width:100%; }

div.border { float:left; background:#fff url('../images/bg_hr.jpg') bottom left repeat-x; width:545px; height:35px; border:0px solid #ff0000; }
div.border_full { float:left; background:#fff url('../images/bg_hr.jpg') bottom left repeat-x; width:748px; height:35px; border:0px solid #ff0000; }

/* =======================================================================
   PAGE: WELKOM
========================================================================== */

#random_projecten { padding-top:10px; height:392px; position:relative; overflow:hidden;  }
#random_projecten ul { width:100%; margin:0; padding:0; list-style:none; overflow:hidden; }
#random_projecten ul li { list-style-type:none; width:190px; height:auto; float:left; text-align:center; padding:0 0 15px 0;  }
#random_projecten ul li a { background-position:0 0; float:left; width:190px; height:83px; margin:0;  }
#random_projecten ul li a:hover { background-position:-190px 0; }

div.scrollable { display:block; overflow:hidden; padding-top:10px; width:190px; height:620px; border:0; } 
div.scrollable div.slideshow { height:20000em; position:absolute; width:190px; height:532px; } 
div.scrollable div.slideshow ul { width:100%; margin:0; padding:0; list-style:none; overflow:hidden; }
div.scrollable div.slideshow ul li { list-style-type:none; width:190px; height:auto; float:left; text-align:center; padding-top:5px; padding-bottom:5px; }
div.scrollable div.slideshow ul li a { background-position:0 0; float:left; width:190px; height:83px; margin:0;  }
div.scrollable div.slideshow ul li a:hover { background-position:-190px 0; }
a.next { 
	position: relative;
	display: block;
	float: left;
	width: 190px;
	height: 30px;
	text-decoration: none;
	background-color: #fff;
	background-image: url('../images/bt-previous.gif');
	background-repeat: no-repeat;
	background-position: 0 0;
}
a.prev {
	position: relative;
	display: block;
	float: left;
	width: 190px;
	height: 30px;
	text-decoration: none;
	background-color: #fff;
	background-image: url('../images/bt-forward.gif');
	background-repeat: no-repeat;
	background-position: 0 0;
}

#nieuws { position:relative; float:left; width:555px; height:auto; border:0px solid #ff0000; }
span.news_date { font-size:10px; font-weight:bold; }

#laatste_ontwikkelingen { position:relative; float:left; width:300px; height:auto; border:0px solid #ff0000; }
#laatste_ontwikkelingen li { display:block; }
#laatste_ontwikkelingen ul, #laatste_ontwikkelingen ul li { list-style:none; margin:0; padding:0; }
#laatste_ontwikkelingen a { 
	font-family:arial; 
	color:#0a9dff; 
	font-size:8pt; 
	text-align:left; 
	line-height:15pt;
	text-decoration:none;
}
#laatste_ontwikkelingen a:hover { text-decoration:underline; }

#recente_websites { position:relative; float:left; width:255px; height:auto; border:0px solid #ff0000; }
#recente_websites li { display:block; }
#recente_websites ul, #recente_websites ul li { list-style:none; margin:0; padding:0; }
#recente_websites, #recente_websites a { 
	font-family:arial; 
	font-size:8pt; 
	text-align:left; 
	line-height:15pt;
	text-decoration:none;
}
#recente_websites a { color:#0a9dff; }
#recente_websites a:hover { text-decoration:underline; }

.webdesign { position:relative; float:left; width:275px; height:auto; border:0px solid #ff0000; }
.webdesign li { display:block; }
.webdesign ul, .webdesign ul li { list-style:none; margin:0; padding:0; }
.webdesign, .webdesign a { 
	font-family:arial; 
	font-size:8pt; 
	text-align:left; 
	line-height:15pt;
	text-decoration:none;
}
.webdesign a { color:#0a9dff; }
.webdesign a:hover { text-decoration:underline; }

#nieuwsbrief {
	position:relative; 
	width:726px; 
	height:70px; 
	/*background:#f0f0f0; 
	border:1px solid #bcbcbc; */
	margin:0;
	padding:10px;
	font-size:8pt; 
}
#nieuwsbrief a { font-size:8pt; line-height:9pt; color:#4d4d4d; text-decoration:underline; }

#footer {
	position:relative; 
	width:750px; 
	height:70px; 
	background:#fff; 
	padding:10px;
}
#footer p { text-align:center; font-size:8pt; color:#999999; float:none; }
#footer a, #footer b { font-size:8pt; color:#666666; }

/* =======================================================================
   PAGE: OVER HET BEDRIJF
========================================================================== */

div.referenties { position:relative; float:left; width:180px; height:auto; border:0px solid #ff0000; }
div.referenties li { display:block; }
div.referenties ul, div.referenties ul li { list-style:none; margin:0; padding:0; }
div.referenties a { 
	font-family:arial; 
	color:#0a9dff; 
	font-size:8pt; 
	text-align:left; 
	line-height:15pt;
	text-decoration:none;
}
div.referenties a:hover { text-decoration:underline; }

#client_logos { padding-top:10px; }
#client_logos ul { width:100%; margin:0; padding:0; list-style:none; overflow:hidden; }
#client_logos ul li { list-style-type:none; width:190px; height:auto; float:left; text-align:center; padding:0 0 15px 0;  }
#client_logos ul li a { background-position:0 0; float:left; width:190px; height:83px; margin:0;  }
#client_logos ul li a:hover { background-position:-190px 0; }

/* =======================================================================
   PAGE: DIENSTEN
========================================================================== */

div.diensten { position:relative; float:left; width:250px; height:auto; border:0px solid #ff0000; padding-bottom:10px; }
div.diensten li { display:block; }
div.diensten ul, div.referenties ul li { list-style:none; margin:0; padding:0; }
div.diensten ul li,
div.diensten ul li a { 
	font-family:arial; 
	font-size:8pt; 
	text-align:left; 
	line-height:15pt;
	text-decoration:none;
}
div.diensten a.h2 { font-family:Arial; color:#4d4d4d; font-size:11pt; line-height:12px; text-align:left; margin:0 0 10px 0; }
div.diensten a.h2:hover { color:#0a9dff; text-decoration:none; }

/* =======================================================================
   PAGE: PORTFOLIO
========================================================================== */

.case_pf_small_left { position:relative; float:left; width:370px; height:83px; padding:0 0 20px 0; }
.case_pf_small_right { position:relative; float:right; width:370px; height:83px; padding:0 0 20px 0; }

.case_pf_left { position:relative; float:left; width:190px; height:83px; }
.case_pf_left a.case { position:relative; background-position:0 0; float:left; width:190px; height:83px; margin:0;  }
.case_pf_left a.case:hover { position:relative; background-position:-190px 0; }

.case_pf_right { position:relative; float:left; width:159px; height:67px; padding:7px; }
.case_pf_right { border-top:1px solid #cfcfcf; border-bottom:1px solid #cfcfcf; border-right:1px solid #cfcfcf; }
.case_pf_right a { font-size:8pt; }
.case_pf_right span.title { font-family:arial; color:#4d4d4d; font-size:8pt; line-height:16px; text-align:left; margin:0; font-weight:bold; }
.case_pf_right p { line-height:10pt; margin:0; padding:0; float:left; }

span.pagenav { position:relative; float:left; width:755px; text-align:center; }

/* =======================================================================
   PAGE: JMAP
========================================================================== */

#map { display:block; width:545px; height:320px; margin-bottom:10px; border:1px solid #000; }

/* =======================================================================
   CSS3 BUTTONS
========================================================================== */

/* orange */
.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

a.button {
    cursor: pointer;
    display: inline-block;
    font: 13px/100% Arial,Helvetica,sans-serif;
    margin: 0;
	margin-right: 10px;
	margin-bottom: 6px;
    outline: medium none;
    padding: 0.3em 2em 0.33em;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}