/*
* DIZAJN.NL
* Author:			Damir Tursunovic
* Date:				09/06/10
* URL:				http://www.dizajn.nl
* Version:			1.4.2
*/
 
/* HI THERE, WZUP? YOU KNOW I DONT LIKE WHEN PEOPLE SNEAK INTO MY CSS! */
 
/* RESET & BASIC */
*{margin:0; padding:0}

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, 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-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}

body{background:url(images/bg.jpg) repeat; line-height:18px; font-family:Arial,"MS Trebuchet",sans-serif; font-size:14px; color:#454545}

a {text-decoration:none; color:#417fc9; font-weight:bold; text-shadow: 1px 1px 1px #eee;}
a:hover{color:#69c}

/* DIZAJN.NL's BONES */
#wrapper{width:860px; margin:0 auto}
#header{width:860px; height:110px; background:url(images/headerBackground.png) repeat-y}
#header img{position:relative; left:15px; top:2px}
#footer{height:300px; clear:both; text-align:center; padding-top:300px}

#pageHome{width:860px; padding-top:30px; background:url(images/pageHomeTop.png) top center no-repeat}
	.pageDivider{clear:both; width:860px; height:1000px; }
	.backHome{width:40px; float:right; margin-bottom:100px}
	.comingSoon { float:right; display:block; width:123px; height:121px; background:url(images/comingSoon.jpg) no-repeat; }

/* NAVIGATION */
#nav{float:right; position:relative; top:40px; margin-right:15px}
	#nav li{display:inline; list-style-type:none}
	#nav li a{display:block; float:left; height:70px; margin-left:45px}

a#navHome{width:110px;  background:url(images/nav/home.png) top left no-repeat}
a#navWie{width:92px;  background:url(images/nav/wiewat.png) top left no-repeat}
a#navWie:hover{background-position:bottom left}
a#navPortfolio{width:87px;  background:url(images/nav/portfolio.png) top left no-repeat}
a#navPortfolio:hover{background-position:bottom left}
a#navContact{width:76px; background:url(images/nav/contact.png) top left no-repeat}
a#navContact:hover{background-position:bottom left}

.navSmall{float:right; margin:40px 0; clear:both}
	.navSmall li{display:inline; list-style-type:none}
	.navSmall a{display:block; float:left; height:21px; margin-left:15px}
	.navSmall a:hover{background-position:bottom left}

	a.smallWie{width:90px;  background:url(images/nav/smallWie.png) top left no-repeat}
	a.smallWieActive{width:90px;  background:url(images/nav/smallWie.png) bottom left no-repeat}
	a.smallPortfolio{width:90px;  background:url(images/nav/smallPortfolio.png) top left no-repeat}
	a.smallPortfolioActive{width:90px;  background:url(images/nav/smallPortfolio.png) bottom left no-repeat}
	a.smallContact{width:80px;  background:url(images/nav/smallContact.png) top left no-repeat}
	a.smallContactActive{width:80px;  background:url(images/nav/smallContact.png) bottom left no-repeat}

/* HOME */
#mainTeaser{width:840px; height:429px; position:relative; top:10px; left:10px}
	#mainTeaser li{width:840px; height:429px; list-style-type:none}
	#mainTeaser img{}
	.homeTeaserBox{width:860px; height:449px; background:url(images/homeTeaserBox.jpg) no-repeat; margin-top:20px}
	.homeTeaserShadow{width:860px; height:19px; background:url(images/homeTeaserShadow.png) top center no-repeat; margin-bottom:56px}
	.homeTeaserNavigation{width:860px; text-align:center; margin:0 auto; margin-top:26px}

.fullBoxTop{width:860px; height:12px; background:url(images/fullBoxTop.png)  no-repeat}
.fullBoxMiddle{width:860px; background:url(images/fullBoxMiddle.png) repeat-y; clear:both}
.fullBoxMiddle p{font-family:Arial,"MS Trebuchet",sans-serif; font-size:14px; font-style:italic; color:#454545; padding:0 20px; margin-top:20px}
.fullBoxBottom{width:860px; height:12px; background:url(images/fullBoxBottom.png)  no-repeat}

a.nav{display:block; width:64px; height:54px}
#nextBtn{float:left; display:block; background:white; position:absolute; top:200px; left:770px; width:61px; height:62px; background:url(images/homeTeaser/next.png) top left no-repeat; text-decoration:none}
#nextBtn:hover{background-position:bottom left}
#prevBtn{float:left; display:block; background:white; position:absolute; top:200px; left:12px; width:61px; height:62px; background:url(images/homeTeaser/previous.png) top left no-repeat; text-decoration:none}
#prevBtn:hover{background-position:bottom left}

.threecolumnsLeft{width:286px; float:left}
.threecolumnsMiddle{width:266px; float:left; padding-left:20px; background:url(images/homeColumnDivider.png) left repeat-y}
.threecolumnsRight{width:266px; float:left; padding-left:20px; background:url(images/homeColumnDivider.png) left repeat-y}


/* WIE & WAT */
.twitterBox{width:370px; height:222px; float:right; background:url(images/twitterBird.png) top left no-repeat}
	.twitterStatus{width:310px; position:relative; top:100px; left:100px}
	.twitterStatusTop{width:310px; height:10px; background:url(images/twitterStatusTop.png) no-repeat}
	.twitterStatusMiddle{width:310px; background:url(images/twitterStatusMiddle.jpg) repeat}
	.twitterStatusMiddle li{width:290px; height:60px; padding:0 10px; font-family:Arial,"MS Trebuchet",sans-serif; font-size:12px; font-style:italic; color:#fff; list-style-type:none}
	.twitterStatusMiddle p{position:relative; top:5px}
	.twitterStatusMiddle a{font-family:Arial,"MS Trebuchet",sans-serif; font-size:12px; font-style:italic; color:#fff; font-weight:bold; text-decoration:none}
	.twitterStatusBottom{width:310px; height:62px; background:url(images/twitterStatusBottom.png) no-repeat}
	.twitterStatusBottom p{float:right; position:relative; top:40px; font-family:Arial,"MS Trebuchet",sans-serif; font-size:12px; font-style:italic; color:#06f}

.dienstenColumnBox{width:860px; margin-top:25px}
	.dienstenColumnBox a{text-decoration:none; color:#333; font-weight:bold}
	.dienstenColumnBox a:hover{color:#666}

.twocolumnsLeft{width:430px; float:left; background:url(images/homeColumnDivider.png) right repeat-y}
	.twocolumnsLeft p{margin:36px 20px 0 20px; font-family:Arial,"MS Trebuchet",sans-serif; font-size:14px; line-height:20px; color:#454545}
.twocolumnsRight{width:430px; float:left}
	.twocolumnsRight ul { margin:36px 60px 0 44px; padding-left:16px; }
	.twocolumnsRight h3 { margin:36px 60px 0 44px; padding-left:16px; font-weight:bold; font-style:normal; font-size:16px; color:#333; text-shadow: 1px 1px 1px #eee;}
	.twocolumnsRight p { margin:10px 60px 0 44px; padding-left:16px; }

.box{margin:36px 60px 0 44px; padding-left:16px}
	.box h3{font-weight:bold; font-style:normal; font-size:14px; color:#333; margin-bottom:10px; text-shadow: 1px 1px 1px #eee;}
	.box img{float:left; padding:0 10px 10px 0}
	
img.wieRight { margin-left:32px;}


/* PORTFOLIO */
ul.dienstenList{margin:30px 0 0 60px}
	ul.dienstenList li{margin:0 0 10px 25px; padding-left:5px; font-weight:bold; list-style-image:url(images/listCheck.png)}

.itemBox{padding-bottom:100px; clear:both}
	.itemImage{width:615px; height:339px; float:left; background:url(images/itemImage.png) no-repeat; }
	.itemImage img{margin:13px 0 0 13px; }
	.itemDescription{width:180px; min-height:321px; padding-left:20px; text-align:left; float:right; background:url(images/homeColumnDivider.png) left repeat-y; font-style:italic; font-size:12px}
	.imageNav{clear:both; width:615px; text-align:center}
	
	p.itemCat{display:block; font-weight:bold; font-style:normal; font-size:10px; color:#39c; padding:10px; background:url(images/black10.png) repeat; margin-bottom:30px; text-shadow: 1px 1px 1px #ccc;}
	p.itemDescr{margin-bottom:50px}
	a.itemHref{margin:3px 0 0 15px; display:block; background:url(images/itemHref.png) left center no-repeat; padding-left:20px; font-weight:bold; text-decoration:none; color:#333}
	a.itemHref:hover{color:#999; padding-left:15px}
	.portfolioHeader{display:block; font-weight:bold; font-style:normal; font-size:10px; color:#999; background:url(images/black10.png) repeat}	

a#showFotografie{display:block; width:309px; height:48px; background:url(images/showFotografie.png) top left no-repeat; margin:0 0 200px 200px}
	a#showFotografie:hover{background-position:bottom left}


/* CONTACT */
.contactForm{width:615px; float:left}
	.contactFormMessage h4{font-weight:bold; font-size:14px; margin-bottom:15px}
	img.check{display:block; text-align:center; margin:0 auto; padding:20px}
	
	.contactData{width:180px; min-height:321px; padding-left:20px; text-align:right; float:right; background:url(images/homeColumnDivider.png) left repeat-y; font-style:normal; font-size:11px}
	.contactData li{list-style:none; padding:1px 0}

.leftColumn{float:left; width:50%}
.rightColumn{float:right; width:50%}

.textInput{width:219px; height:39px; background:url(images/textInput.png) no-repeat; margin-bottom:20px}
.textInput input{width:200px; position:relative; top:10px; margin-left:10px; font-size:14px; color:#333}
.textareaInput{width:300px; height:157px; background:url(images/textareaInput.png) no-repeat}
.textareaInput textarea{background:0; width:280px; height:140px; position:relative; top:10px; border:0; margin-left:10px; font-size:14px; color:#333; font-family:Arial,"MS Trebuchet",sans-serif; font-style:italic}
input.submitButton{display:block; width:142px; height:40px; background:url(images/submitButton.png) no-repeat; clear:both; margin-top:20px; font-size:12px; color:#fff}
input.submitButton:hover{background-position:bottom left}

label.test{display:block; padding:10px; color:#c36}
label.error{display:block; padding:10px; color:#c36}
span.attention{color:#c36; font-weight:bold; font-size:20px}
input{background:0; border:0}

a.homeWiewat{display:block; width:250px; height:50px; margin-left:20px; background:url(images/headings/homeWiewat.png) no-repeat}
a.homePortfolio{display:block; width:250px; height:50px; margin-left:20px; background:url(images/headings/homePortfolio.png) no-repeat}
a.homeContact{display:block; width:250px; height:50px; margin-left:20px; background:url(images/headings/homeContact.png) no-repeat}

h2.dienstenWie{display:block; width:235px; height:33px; margin-left:20px; background:url(images/headings/portfolioWie.png) no-repeat}
h2.dienstenDiensten{display:block; width:150px; height:33px; margin-left:60px; background:url(images/headings/portfolioDiensten.png) no-repeat}
h2.portfolioPortfolio{display:block; width:230px; height:50px; background:url(images/headings/portfolioPortfolio.png) no-repeat; clear:both; margin:0 0 120px 0}
h4.portfolioDescription{font-size:18px; color:#333; padding:10px; text-shadow: 1px 1px 1px #ddd;}
h2.contactContact{display:block; width:230px; height:50px; background:url(images/headings/contactContact.png) no-repeat; clear:both; margin:0 0 120px 0}
h4.contactVraagje{display:block; width:240px; height:33px; background:url(images/headings/contactVraagje.png) no-repeat; margin-bottom:50px}
h4.contactGegevens{float:right; display:block; width:240px; height:33px; background:url(images/headings/contactGegevens.png) no-repeat; margin-bottom:50px}

/* REST */
a.backHomeHref{display:block; width:40px; height:12px; background:url(images/backHome.png) no-repeat}
img.breakeven{margin-bottom:56px}
a.waarom{width:180px; height:57px; float:right; clear:both; background:url(images/waarom.png) no-repeat; margin-top:300px}
#portfolio01{width:615px; height:321px}

span.displayNone{display:none}
.clear{clear:both}
strong{font-weight:bold}
p.small{font-size:12px; margin-bottom:30px}


.QOverlay{background:#000; z-index:9999}
.QLoader{background-color:#3c5e92; height:1px}
.QAmt{color:#444; font-family:Arial,Helvetica,sans-serif; font-size:50px; font-weight:bold; margin-top:50px}

/* RETOUCH INLINE */
#inlineRetouch{display:none}
a.rollover{display:block; width:401px; height:600px; background:url(images/portfolio/retouch_before_S.png) no-repeat}
a.rollover:hover{background:url(images/portfolio/retouch_after_S.png)}
#retouchVideo{background-color:#000; width:500px; height:400px; margin:0 auto; text-align:center}
.videoBox{padding:20px}


#currentHome{position:fixed; top:0; left:0; z-index:1000; width:155px; height:155px; background:url(images/currentHome.png) no-repeat}
#currentContact{position:fixed; top:0; left:0; z-index:1000; width:155px; height:155px; background:url(images/currentContact.png) no-repeat}
#currentWie{position:fixed; top:0; left:0; z-index:1000; width:155px; height:155px; background:url(images/currentWie.png) no-repeat}
#currentPortfolio{position:fixed; top:0; left:0; z-index:1000; width:155px; height:155px; background:url(images/currentPortfolio.png) no-repeat}

.footerSocialBar{height:83px; background:url(images/black20.png) repeat; position:relative; top:100px; text-align:center}
	.socialBarBox{width:500px; margin:0 auto}
.footerSocialBar li{list-style-type:none}
	.footerSocialBar a{margin-left:50px; position:relative; top:28px}

a.footerTwitter{display:block; float:left; width:115px; height:23px; background:url(images/footer/twitter.png) top left no-repeat}
a.footerTwitter:hover{background-position:bottom left}
a.footerFacebook{display:block; float:left; width:113px; height:23px; background:url(images/footer/facebook.png) top left no-repeat}
a.footerFacebook:hover{background-position:bottom left}
a.footerHyves{display:block; float:left; width:63px; height:23px; position:relative; top:31px; background:url(images/footer/hyves.png) top left no-repeat}
a.footerHyves:hover{background-position:bottom left}
a.footerFlickr{display:block; float:left; width:74px; height:23px; background:url(images/footer/flickr.png) top left no-repeat}
a.footerFlickr:hover{background-position:bottom left}

#footer p{clear:both; position:relative; top:189px; font-size:10px}
	#footer a{text-decoration:none; color:#369; font-weight:bold}
	#footer a:hover{color:#69c}


#sb-container, #sb-wrapper{text-align:left}
#sb-container, #sb-overlay{position:absolute;  top:0;  left:0;  width:100%;  margin:0;  padding:0}
#sb-container{height:100%;  display:none;  visibility:hidden;  z-index:999}
body >#sb-container{ position:fixed}
#sb-container >#sb-overlay{ height:100%}

#sb-wrapper{position:relative}
#sb-wrapper img{border:none}

#sb-body{position:relative;  margin:0;  padding:0;  overflow:hidden}
#sb-body-inner{position:relative;  height:100%}
#sb-content.html{height:100%;  overflow:auto}

#sb-loading{position:absolute;  top:0;  width:100%;  height:100%;  text-align:center;  padding-top:10px}
#sb-body, #sb-loading{background-color:#060606}

#sb-title, #sb-info{position:relative;  margin:0;  padding:0;  overflow:hidden}
#sb-title-inner, #sb-info-inner{position:relative;  font-family:'Lucida Grande',Tahoma,sans-serif;  line-height:16px}
#sb-title, #sb-title-inner{height:26px}
#sb-title-inner{font-size:16px;  padding:5px 0;  color:#fff}
#sb-info, #sb-info-inner{height:20px}
#sb-info-inner{font-size:12px;  color:#fff}

#sb-nav{ float:right;   height:16px;   padding:2px 0;   width:45%}
#sb-nav a{ display:block;   float:right;   height:16px;   width:16px;   margin-left:3px;   cursor:pointer}
#sb-nav-close{ background-image:url(images/resources/close.png);   background-repeat:no-repeat}
#sb-nav-next{ background-image:url(images/resources/next.png);   background-repeat:no-repeat}
#sb-nav-previous{ background-image:url(images/resources/previous.png);   background-repeat:no-repeat}
#sb-nav-play{ background-image:url(images/resources/play.png);   background-repeat:no-repeat}
#sb-nav-pause{ background-image:url(images/resources/pause.png);  background-repeat:no-repeat}

#sb-counter{float:left;  padding:2px 0;  width:45%}
#sb-counter a{padding:0 4px 0 0;  text-decoration:none;  cursor:pointer;  color:#fff}
#sb-counter a.sb-counter-current{text-decoration:underline}

div.sb-message{font-family:'Lucida Grande',Tahoma,sans-serif;  font-size:12px;  padding:10px;  text-align:center}
div.sb-message a:link, div.sb-message a:visited{color:#fff;  text-decoration:underline}


#countDown { position:fixed; width:100%; bottom:0; height:116px; background:url(images/black75.png) repeat; }