@charset "utf-8";

/*
//////////////////////////////////////////////////////////////////
//                                                              //
//  CSS DESIGNPHUNK3  door                                      //
//  DESIGNPHUNK - interactief ontwerpwerk                       //
//                                                              //
//  www.designphunk.com                                         //
//  post@designphunk.com                                        //
//  06 - 21 55 79 16                                            //
//                                                              //
//  Kijken en leren mag, stelen niet                            //
//                                                              //
//////////////////////////////////////////////////////////////////
*/

/* -------------------- MASTER RESET --------------------  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; 	outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; font-size: 62.5%; /* 10px */ line-height: 1.5em; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table /*cellspacing="0" */ { border-collapse: collapse; border-spacing: 0; }
/* Float: display: inline; & overflow:hidden; */

/* -------------------- DESIGNPHUNK 3 --------------------  */
body { background: #000 url("http://www.designphunk.com/i/bgBody.jpg") top center no-repeat fixed; font-family: Arial, Helvetica, sans-serif; }

#container { margin: 0px auto; position: relative; width: 968px; }

#topLine { height: 12px; width: 960px; background: url("http://www.designphunk.com/i/bgZwart.png") top center; margin-left: 4px;}

#containerTop { height: 140px; width: 100%; margin: 0px auto; position:relative; }

#logo { float: left; background: url("http://www.designphunk.com/i/logo.png") center center; height:140px; width:540px; margin-left: 4px; }

#navigatie { float: right;  height:140px; width:420px; margin-right: 4px;  }
#navigatie ul#ulLinks { list-style:none; width: 151px; height: 72px; float: right; margin-top: 40px; margin-right: 21px;}
#navigatie ul#ulRechts { list-style:none; width: 151px; height: 72px; float: right; margin-top: 40px;}
#navigatie li span { display: none;}
#navigatie li.home a { background: url("http://www.designphunk.com/i/btnHome.png"); height:31px; width:151px; display: block; }
#navigatie li.designwie a { background: url("http://www.designphunk.com/i/btnDesignwie.png"); height:31px; width:151px; display: block;}
#navigatie li.showcase a { background: url("http://www.designphunk.com/i/btnShowcase.png"); height:31px; width:151px; display: block;}
#navigatie li.contact a { background: url("http://www.designphunk.com/i/btnContact.png"); height:31px; width:151px; display: block;}
#navigatie li.designwie, #navigatie li.contact { margin-top: 10px; height:31px; width:151px; display: block;}
#navigatie li.home a:hover, #navigatie li.homeActive { background: url("http://www.designphunk.com/i/btnHomeOver.png"); height:31px; width:151px; display: block; }
#navigatie li.designwie a:hover,#navigatie li.designwie a:active { background: url("http://www.designphunk.com/i/btnDesignwieOver.png"); height:31px; width:151px; display: block; }
#navigatie li.showcase a:hover, #navigatie li.showcase a:active, #navigatie li.showcaseActive { background: url("http://www.designphunk.com/i/btnShowcaseOver.png"); height:31px; width:151px; display: block;}
#navigatie li.contact a:hover, #navigatie li.contact a:hover, #navigatie li.contactActive { background: url("http://www.designphunk.com/i/btnContactOver.png"); height:31px; width:151px; display: block;}
#navigatie li.designwieActive { background: url("http://www.designphunk.com/i/btnDesignwieOver.png"); height:31px; width:151px; display: block; margin-top: 10px; }
#navigatie li.showcaseActive { background: url("http://www.designphunk.com/i/btnShowcaseOver.png"); height:31px; width:151px; display: block;}
#navigatie li.contactActive { background: url("http://www.designphunk.com/i/btnContactOver.png"); height:31px; width:151px; display: block; margin-top: 10px;}

#introText { height: 188px; width: 920px; margin-left: 4px; background:url("../i/bgZwart.png"); padding: 31px 0 0 40px; }
#introText img.btnLeesMeer { float:right; margin-right: 39px; margin-bottom: 8px;}

#homeProject { background: url("http://www.designphunk.com/i/homeProject.png"); height:335px; width:968px; font: 1.2em/1.8em Arial, Helvetica, sans-serif;}
#homeProjectFlash { height:337px; width:968px; font: 1.2em/1.8em Arial, Helvetica, sans-serif;}
#homeProject403 { background: url("http://www.designphunk.com/i/homeProject403.png"); height:335px; width:968px; font: 1.2em/1.8em Arial, Helvetica, sans-serif;}
#homeProject404 { background: url("http://www.designphunk.com/i/homeProject404.png"); height:335px; width:968px; font: 1.2em/1.8em Arial, Helvetica, sans-serif;}
#homeProject img.btnBekijkAlles { margin-top: 5px;}
#homeProject p { margin-top: 25px;}
#homeProjectLinks { width: 194px; float: left; padding-left: 47px;}
#homeProjectMid { width: 383px; float: left; height: 100%;}
#homeProjectRechts { width: 305px; height: 100%px; float: right; padding-right: 39px;}

#blackBottom { background:url("http://www.designphunk.com/i/bgZwart.png") repeat;  width:960px; margin-left: 4px; overflow:hidden; color: #fff; font: 1.2em/2.0em Arial, Helvetica, sans-serif; }
#blackBottom .lineSitemap { background:url("http://www.designphunk.com/i/lineSitemap.png"); height: 11px; width: 88px; margin-bottom: 9px; margin-left: -5px;}
#blackBottom .lineProjecten { background:url("http://www.designphunk.com/i/lineProjecten.png"); height: 11px; width: 104px; margin-bottom: 9px; margin-left: -5px;}
#blackBottom .lineBeheerst { background:url("http://www.designphunk.com/i/lineBeheerst.png"); height: 11px; width: 208px; margin-bottom: 9px; margin-left: -5px;}
#blackBottom .linePhunkyNews { background:url("http://www.designphunk.com/i/linePhunkyNews.png"); height: 11px; width: 128px; margin-bottom: 9px; margin-left: -3px;}
#blackBottom .lineBezoekt { background:url("http://www.designphunk.com/i/lineBezoekt.png"); height: 11px; width: 256px; margin-bottom: 9px; margin-left: -3px;}
#blackBottom .lineSocial { background:url("http://www.designphunk.com/i/lineSocial.png"); height: 11px; width: 176px; margin-bottom: 9px; margin-left: -5px;}
#blackBottomLinks { width: 190px;  float: left; padding-left: 33px; margin-left: 14px;}
#blackBottomLinks li { background: url("http://www.designphunk.com/i/listBulletPaars.png") center left no-repeat; padding-left: 18px;}
#blackBottomLinks li a { color: #fff; text-decoration:none;}
#blackBottomLinks li a:hover { border-bottom: 1px solid #fff;}
#blackBottomLinks li:hover { background: url("http://www.designphunk.com/i/listBulletPaarsOver.png") center left no-repeat; padding-left: 18px;}
#blackBottomMid { width: 225px; float: left; margin-left: 26px; margin-right: 26px; }
#blackBottomMid li { background: url("http://www.designphunk.com/i/listBulletRood.png") center left no-repeat; padding-left: 18px;}
#blackBottomMid li a { color: #fff; text-decoration:none;}
#blackBottomMid li a:hover { border-bottom: 1px solid #fff;}
#blackBottomMid li:hover { background: url("http://www.designphunk.com/i/listBulletRoodOver.png") center left no-repeat; padding-left: 18px;}
#blackBottomRechts { width: 407px;  float: right; padding-right: 39px; margin-bottom: 40px;}
#blackBottomRechts a.news { color: #fff; text-decoration:none; border-bottom: 1px solid #87314e; font-weight: bold;}
#blackBottomRechts p { margin: 10px 0 10px 0;}
#blackBottomLinksOver { width: 257px;  float: left; padding-left: 33px; margin-left: 14px;}
#blackBottomMidOver { width: 258px; float: left; margin-left: 50px; margin-right: 26px; }
#blackBottomRechtsOver { width: 257px;  float: right; padding-right: 39px; margin-bottom: 40px;}
#blackBottomLinksContact { width: 415px;  float: left; padding-left: 33px; margin-left: 14px;}
#blackBottomLinksContact .lineSocial { background:url("http://www.designphunk.com/i/lineSocial.png"); height: 11px; width: 176px; margin-bottom: 9px; margin-left: -5px;}
#blackBottom a { color: #fff; text-decoration: underline;}
#blackBottom a:hover {text-decoration: none;}

#footer { height:50px; width:968px; background: url("http://www.designphunk.com/i/footer.png");}
#footer p { margin-left: 35px; padding-top: 12px; font-size: 1.2em; float: left; }
#footer img.imgTop { float: right; margin-top: 12px; margin-right: 35px;}
#footer img.imgNext { float: right; margin-top: 12px; margin-right: 35px;}

#subPage { height: 30px; width: 920px; margin-left: 4px; background:url("http://www.designphunk.com/i/bgZwart.png"); padding: 31px 0 0 40px; }
#subPage h2 { margin-top:-14px;}
#subPageTop { background: url("http://www.designphunk.com/i/subContentTop.png") top center; height:46px; width:968px;}
#subPageContent { background: url("http://www.designphunk.com/i/subContentInner.png") top center repeat-y; width: 882px; height: 375px; font: 1.2em/1.8em Arial, Helvetica, sans-serif; padding-left: 47px; padding-right: 39px; }
#subPageContentLeft { width: 257px; margin-right: 5px; float: left; height: 100%;} 
#subPageContentMid { width: 258px; margin-right: 5px; margin-left: 50px; float: left; height: 100%;} 
#subPageContentRight {width: 257px; margin-left: 5px; float: right; height: 100%;} 
.subPageShowcase { background: url("http://www.designphunk.com/i/homeProject.png"); height:335px; width:968px; font: 1.2em/1.8em Arial, Helvetica, sans-serif; }
.subPageShowcaseDivi { height: 20px; background:url("http://www.designphunk.com/i/bgZwart.png"); width: 960px; margin-left: 4px;}
.subPageShowcaseLeft { width:355px; height:100px; float: left;  margin-left: 4px; padding-left: 25px;}
.subPageShowcaseRight { width:544px; height:100px; float:right;  margin-right: 40px; z-index:99;}
.showcaseToTop { height: 26px; width: 26px; float: right; bottom: 0px; right: 0px;}
.subPageShowcaseRight a.ext { padding-right: 15px; background:url("http://www.designphunk.com/i/link.gif") right center no-repeat; color: #87314e; text-decoration: none; border-bottom: 1px dotted #87314e; font-weight: bold; }
.subPageShowcaseRight a.none { display: none; }
.subPageShowcaseRight a.ext:hover { border-bottom: 1px solid #87314e;}
#subPageContentContact { background: url("http://www.designphunk.com/i/subContentInner.png") top center repeat-y; width: 882px; height: 480px; font: 1.2em/1.8em Arial, Helvetica, sans-serif; padding-left: 47px; padding-right: 39px; }
#subPageContent h3, #subPageContentContact h3 { margin-top: -25px; margin-bottom: 18px;}
#subPageContent p, #subPageContentContact p, .subPageShowcaseRight p { margin-top: 25px;}
#subPageContentContactRight { width: 410px; margin-left: 5px; float: right;}
#subPageContentContactLeft { width: 430px; margin-right: 5px; float: left; height: 100%;} 
#subPageContentContactLeft  p { margin-top: 0px; }
#subPageContentContactLeft  form p.label { margin-top: 25px; *margin-top: 10px;}
#subPageContentContactRight {}
#subPageBottom { background:url("http://www.designphunk.com/i/subContentBottom.png") top center; height: 46px; width: 968px;}

h1 { background:url("http://www.designphunk.com/i/h1.png"); height:134px; width:827px; color: #fff; font: 2.4em/2em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; }
h1.viernuldrie { background:url("http://www.designphunk.com/i/h403.png"); height:134px; width:716px; color: #fff; font: 2.4em/2em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; }
h1.viernulvier { background:url("http://www.designphunk.com/i/h404.png"); height:134px; width:818px; color: #fff; font: 2.4em/2em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; }
h1 span { display: none; margin-top: 31px; }
h2 { margin-top: 20px; margin-bottom: -3px; font: 2.4em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; color: #fff;}
h3 { margin-top: 32px; font: 2.2em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; color: #8b3955;}
h4 { margin-top: 35px; font: 1.4em "Arial Narrow", Arial, Helvetica, sans-serif; font-weight: bold; color: #8b3955;}

/* -------------------- FORMULIEREN --------------------  */
form { text-align: left; }
label {font-weight: bold; display: block; float: left; width: 20%; text-align: right; margin: 0 10px 0 0; padding-bottom: 15px;	clear: left; }
.verplicht { color: #cc0000; }
select { float: left; display: block; width: 298px; margin-bottom: 15px; padding: 3px; font: 1.1em Arial, Helvetica, sans-serif; }
textarea { float: left; position: relative; width: 294px; margin-bottom: 15px; padding: 3px; font: 1.1em Arial, Helvetica, sans-serif;  }
input { font: 1.1em Arial, Helvetica, sans-serif; width: 295px; height: 16px; padding: 3px;}
fieldset { border: 1px solid #ccc; background: url("http://www.designphunk.com/i/bgFieldset.png") center bottom no-repeat; margin-top: -10px; padding-bottom: 15px;}
fieldset.bericht { margin-top: 15px;}
legend { padding: 0 6px 0 6px; margin: 0 0 0 10px; text-transform:uppercase;}
.btnFormulier {	background: url("http://www.designphunk.com/i/btnVerzenden.png") center top; width: 80px; height: 31px; float: right; margin-right: 26px; border: none; cursor:pointer; color: #fff;}