@charset "utf-8";
/* Main CSS Document */

@import "base.css";

/* ------- [ Wrappers ] ------- */
.wrap940    { width: 940px; margin: 0 auto; position: relative; }
.wrap650    { width: 650px; float:left; border-right: 1px dotted #ccc;}
.wrap325    { width: 275px; margin-right: 50px; float: left; position: relative;}
.wrap240    { width: 240px; margin-right: 20px; }
.wrapLast   { margin-right: 0; }

.red        { color:#d20b11; font-size: 1.1em; }
.em1        { font-size:1em; }

/* ------- [ Fonts ] ------- */
/* True Type */

@font-face { font-family: Rockwell; src:  url("fonts/ROCK.TTF") format("truetype"); font-weight: normal; }
@font-face { font-family: Rockwell; src:  url("fonts/ROCKB.TTf") format("truetype"); font-weight: bold;  }
@font-face { font-family: Rockwell; src:  url("fonts/ROCKBI.TTf") format("truetype"); font-weight: bold; font-style: italic; }

/* Open Type */
@font-face { font-family: Rockwell; src: url('fonts/ROCK.eot'); }
@font-face { font-family: Rockwell; src: url('fonts/ROCKB.eot'); font-weight: bold; }
@font-face { font-family: Rockwell; src: url('fonts/ROCKBI.eot'); font-weight: bold; font-style: italic; }

/* ------- [ Top ] ------- */

#top                { height: 200px; position: relative; z-index:900; margin-bottom: 50px;}
.logoWrap           { overflow: hidden; position: absolute; left: 0; top:35px; }
.balloonSmall       { position: absolute; left: 400px; top: 55px; }
.balloonLarge       { position: absolute; right: 5px; top: -10px; z-index: 400;}

/* MENU */

#mainNav { margin: 0; padding: 1px; padding:2px\9; background: url('../images/opa/opa20b.png') repeat; position: absolute; top: 145px;
          font-family: Rockwell,"Myriad Pro",Myriad,Tahoma,"Gill Sans","Gill Sans MT","Helvetica Neue",Helvetica,Arial, sans-serif;
          font-size: 14px; font-weight: normal; width:100%; z-index: 300; 
          -moz-box-shadow:0 3px 5px #222; -webkit-box-shadow:0 3px 5px #222; -box-shadow:0 3px 5px #222;
         }

#mainNav li a, #mainNav li  { float: left; z-index: 200; }
#mainNav li                 { list-style: none; position: relative; }
#mainNav .lastLi            { height:23px; position:absolute; right:1px; right:2px\9; width:800px; z-index:100; }

#mainNav li a, #mainNav .lastLi { background: #333 url('../images/mainnav-bg.png') repeat-x top left; padding: 13px 38px 15px; text-decoration: none; color: white;
                                  border-left: 1px solid #3f3f3f; border-right: 1px solid #161616; }

#mainNav li a span  {display: block;}
#mainNav li a:hover, #mainNav li a.selected { background: url('../images/mainnav-bg-hover.png') repeat-x top left; }

/* Submenu */

#mainNav li ul              { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; -moz-box-shadow: 0 5px 5px #111; -webkit-box-shadow: 0 5px 5px #111; }
#mainNav li:hover > ul      { display:block; overflow:hidden;}
#mainNav li ul li, #mainNav li ul li a { float: none; }
#mainNav li ul li           { display: inline; /* for IE6 */ }
#mainNav li ul li a         { background: #222\9; background: rgba(0,0,0,0.9); display: block;  *min-width:100%; /* IE Fix */ border:none; padding: 10px 50px 12px 38px;}
#mainNav li ul li a:hover   { background: url('../images/mainnav-bg-hover.png') repeat-x top; color: #fff; }

/* SUBSUB Menu */

#mainNav li ul li ul       { display: none; }
#mainNav li ul li:hover ul { left: 100%; top: 0; }

/* ------- [ Sub Top ] ------- */
#subTop                             { background: url('../images/bg-subtop.jpg') no-repeat center 0; margin-top:-77px; padding:77px 0 0; overflow:hidden;}
#subTop.portfolioBG, #subTop.pageBG { background-position:center -190px ; height:400px; padding-bottom:50px; border-top:2px solid rgba(0, 0, 0, 0.1); }
#subTop.pageBG                      { height:auto; padding-bottom:25px;}
.pageBG h2                          { color: #fff; text-shadow: 1px 1px 3px #222; font-size:17pt; font-weight:bold; line-height:35px; font-style:italic; text-align:center;}
.pageBG h2 span                     { font-weight:normal;font-style:normal; }

/* Featured */
#featured                       { position:relative; height:350px; overflow:hidden; font-size:14px; /* background: url('../images/featured-slider-bg.png') no-repeat top right; */ }
#featured ul.ui-tabs-nav        { position: absolute; top:35px; left:0; list-style: none; padding:0; margin:0; width:260px; height:250px; overflow:auto; overflow-x:hidden; z-index:200;}
#featured ul.ui-tabs-nav li     {  }
#featured ul.ui-tabs-nav li img { float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; }
#featured ul.ui-tabs-nav li span{ margin-left:-9999px; overflow:hidden; }
#featured li.ui-tabs-nav-item a { display:block; height:71px; text-decoration:none; outline:none; }
#featured li.ui-tabs-selected a { background:transparent; }
#featured .ui-tabs-panel        { position:relative; margin-left:220px; padding: 0 0 0 60px; z-index:100; height:100%; /* 100% height for disappearing images IE7 */}
#featured .ui-tabs-hide         { display:none; }

#featured li.ui-tabs-nav-item a { background-image: url('../images/featured-slider-nav-sprite.png'); }
#featured .ontwerp              { background-position: -286px  -3px; }
#featured .ontwikkeling         { background-position: -286px  -79px; }
#featured .onderhoud            { background-position: -286px -155px; }

#featured li.ui-tabs-selected a.ontwerp /*, #featured li.ui-tabs-nav-item a.ontwerp:hover */            { background-position: 0  -3px; }
#featured li.ui-tabs-selected a.ontwikkeling /*, #featured li.ui-tabs-nav-item a.ontwikkeling:hover */  { background-position: 0  -79px; }
#featured li.ui-tabs-selected a.onderhoud /*, #featured li.ui-tabs-nav-item a.onderhoud:hover */        { background-position: 0  -155px; }

#featured h2 { color: #fff /*#003448*/; text-shadow: 1px 1px 3px #222; font-size:24pt; font-weight:bold; }
#featured p  { margin-bottom: 35px; color:#fff;}
#featured .ui-tabs-panel img  { float: right; }

/* ------- [ Buttons ] ------- */
a.button                 { display: block; height: 32px; background-image: url('../images/buttons-sprite.png'); text-indent:-9999px; overflow:hidden;}
a.buttonOfferte          { background-image: url('../images/button-offerte-sprite.png'); background-position:0 0; height:41px; width:207px; float:left;  }
a.buttonOfferte:hover    { background-position: 0  -41px;  } a.buttonOfferte:active   { background-position: 0  -39px; }

a.button.meer            { background-position: 0  -32px; width:133px; }
a.button.meer:hover      { background-position: -200px  -32px; } a.button.meer:active       { background-position: -200px  -30px; }
a.button.verder          { background-position: 0  -64px; width:117px; }
a.button.verder:hover    { background-position: -200px  -64px; } a.button.verder:active     { background-position: -200px  -62px; }
a.button.blog            { background-position: 0  -96px; width:144px; }
a.button.blog:hover      { background-position: -200px  -96px; } a.button.blog:active       { background-position: -200px  -94px; }
a.button.twitter         { background-position: 0  -128px; width:164px; }
a.button.twitter:hover   { background-position: -200px  -128px; } a.button.twitter:active   { background-position: -200px  -126px; }
a.button.portfolio       { background-position: 0  0; width:166px; }
a.button.portfolio:hover { background-position: -200px  0; } a.button.portfolio:active      { background-position: -200px 2px; }
a.button.bekijk          { background-position: 0  -160px; width:112px; clear:both; }
a.button.bekijk:hover    { background-position: -200px  -160px; } a.button.bekijk:active    { background-position: -200px -158px; }

/* ------- [ Main ] ------- */
#main           { background: #fff url('../images/bg-main.jpg') no-repeat center -855px; color: #555; padding-top:50px; 
                  /* -moz-box-shadow:0 0 50px #888; -webkit-box-shadow:0 0 50px #888; width: 1000px; margin:0 auto */}
#main h3 span   { font-size:16pt; }
#main h3 .normal{ color:#222; font-weight:normal; }
#main h3 .color { color:#01779a; font-weight:bold; }
#main .serif, #twitterCol a, #result a { font-style: italic; color:#01779a; font-family: Georgia, serif; }
#main #diensten ul li { background: url('../images/bullets.png') no-repeat left -45px; list-style-type:none; padding-left:3em; font-style:italic;}
#main #colWrap  { background: url('../images/separator-bg-sprite.png') no-repeat -649px 0; height:300px; margin-top:15px; padding-top:92px; }
#main .Page h3  { display:block; border-bottom:1px dotted #aaa; padding-bottom:50px; }

/* Banners */
.banner                 { display: block; height: 111px; background-image: url('../images/banners-sprite.png'); text-indent:-9999px; overflow:hidden; position:absolute; right:-20px; top:-65px; width:100px;}
.banner.hallo           { background-position: 0  -15px;  }
.banner.diensten        { background-position: -110px  -15px;  }
.banner.twitter         { background-position: -210px  -15px;  }
.banner.portfolio       { background-position: -305px  -15px; right:22px; top:14px; }
.banner.rss             { background-position: -405px  -15px; right:-30px; }
.banner.comment         { background-position: -505px  -15px; right:-30px; }

.portfolioPage .banner.portfolio       { right:-18px; top:-65px; }
.dienstenPage  .banner.diensten        { right:-18px; top:-65px; }
.contactPage   .banner.comment         { right:-30px; top:-65px; background-position: -609px  -15px;}

/* Twitter Col */
#twitterCol         { position: absolute; right:0; }
#twitterCol img     { display:none; }
#twitterCol ul li   { list-style-type:none; padding:0; margin:0 0 2em; }
#twitterCol a       { text-decoration:none; font-style:normal;} #twitterCol a:hover { text-decoration:underline;}
a.twitterLink       { display:block; font-size: 9px; letter-spacing:3px; text-transform:uppercase; border-top:1px dotted #ccc; margin-top:1em;  text-align:right}
a.twitterLink:hover { border-top:1px dotted #444; text-decoration:none !important; color: #222 !important}
a.extLink           { font-size: 12px; }

/* Portfolio Widget */
#portfolio { position: relative; margin: 35px 5px 0 0; padding:70px 50px 0 0; background: url('../images/separator-bg-sprite.png') no-repeat left 0; clear:both;
             *padding-top: 35px; /* double padding fix */
}
.contentslider  { position:relative; display:block; width:900px; height:400px; margin:0; overflow:hidden; }
.cs_wrapper     { position:relative; display:block; width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
.cs_slider      { position:absolute; width:10000px; height:100%; margin:0; padding:0; }
.cs_article     { float:left; position:relative; top:0; left:0; display:block; width:900px; height:400px; margin:0 ; padding: 0; }
.cs_leftBtn, .cs_rightBtn { position:absolute; top:45%; height:19px;width:19px; padding:0 2px; z-index:10000; overflow:hidden; background: url('../images/selectie-nav-sprite.png') no-repeat 0 0}
.cs_leftBtn     { left:0; }
.cs_rightBtn    { right:0; background-position:0 -19px; }
.cs_article img { border:1px solid #cfcfcf; }
.cs_article img:first-child { margin: 0 10px 0 38px; }
.cs_leftBtn img, .cs_rightBtn img { display:none; }

/* RSS Widget */
#result a   { text-decoration:none; display:block; } #result a:hover { color:#333; }
#result li  { background: url('../images/bullets.png') no-repeat left 7px; padding-left:3em; list-style-type:none; margin-bottom:2em; }

/* Testimonials Widget */
#testimonials                       { position:relative; }
#testimonials ul.ui-tabs-nav        { position:absolute; top:170px; left:100px; width:100%; list-style: none; padding:0; overflow:auto; overflow-x:hidden; z-index:200;}
#testimonials ul.ui-tabs-nav li     { list-style-type:none; float:left;}
#testimonials ul.ui-tabs-nav li span{ margin-left:-9999px; overflow:hidden; }
#testimonials li.ui-tabs-nav-item a { display:block; height:10px; width: 10px; float:left; text-decoration:none; outline:none; }
#testimonials li.ui-tabs-selected a { background:transparent; }
#testimonials .ui-tabs-panel        { position:relative;  z-index:100; }
#testimonials .ui-tabs-hide         { display:none; }

#testimonials li.ui-tabs-nav-item a { background: url('../images/testimonials-sprite.png' ) no-repeat 0 -13px; padding:1px; margin-right:10px; }
#testimonials li.ui-tabs-selected a, #testimonials li.ui-tabs-nav-item a:hover           { background-position: 0  0; }

#testimonials .right        { text-align:right; font-weight:bold; }
#testimonials .right span   { display:block; font-weight:normal; font-style:italic; }

/* ------- [ Footer ] ------- */
#footer             { clear:both; background-color:#eee; border-top:1px dotted #aaa; font-size:11px; line-height:22px; color:#777;}
#footer .wrap940    { padding:35px 0;}
#footer .copyright  { float:left; } #footer strong { color:#333; }
#footer p           { margin:0; } #footer a  { color:#777; }
#footerNav          { float:right; color:#333; }
#footerNav li       { float:left; display:block;}
#footerNav li a     { float:left; display:block; margin-left: 20px; font-weight:bold; text-decoration: none;} #footerNav li a:hover { text-decoration: underline;}
#footer a.voorwaarden, a.terug { clear:right; display:block; float:right; margin-top:-2em; text-align:right; width:180px; text-decoration:underline; } a.terug { margin-top:0; width:100px; }

/* ------- [ Nivo Slider ] ------- */
#nivoSlider                     { margin-bottom:50px; /* -moz-box-shadow: 0 0 40px #333; -webkit-box-shadow:0 0 40px #333; box-shadow:0 0 40px #333; */ background: url('../images/loading.gif') no-repeat 50% 50%; height:300px; }
.nivoSlider                     { position:relative; }
#nivoSlider img                 { position:absolute; top:0; left:0; display:none; }
.nivoSlider a.nivo-imageLink    { position:absolute; top:0; left:0; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; }
.nivo-slice                     { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption                   { position:absolute; left:0; bottom:0; background:#000; color:#fff; opacity:0.8; width:100%; z-index:89; }
.nivo-caption p                 { padding:5px; margin:0; }
.nivo-directionNav a            { position:absolute; top:45%; z-index:99; cursor:pointer; }
.nivo-prevNav, .nivo-nextNav    { background: url('../images/nivoslider-arrows-sprite.png') no-repeat 0 0; display:block; width:60px; height:70px; text-indent:-9999px}
.nivo-prevNav                   { left:-30px; } .nivo-nextNav { right:-30px; background-position: 0 -73px;}
.nivo-controlNav                { position:absolute; bottom:-55px; left:46%; *position:relative; }
.nivo-controlNav a              { background: url('../images/nivoslider-nav-sprite.png') no-repeat 0 -10px; display:inline-block; width: 8px; height: 8px; margin-right: 10px; position:relative; z-index:99; cursor:pointer; text-indent:-9999px; overflow:hidden; }
.nivo-controlNav a.active       { background: url('../images/nivoslider-nav-sprite.png') no-repeat 0 0; font-weight:bold; }

/* ------- [ Portfolio Item ] ------- */
.portfolioItem              { height:320px; border-top: 1px dotted #ccc; padding-top:50px } .portfolioItem:first-child { border:0; padding:0; }
.portfolioinfo              { float:right; width: 283px;}
.portfolioinfo h4           { color: #333;margin-bottom:1em; }
.portfolioinfo p            { font-style: italic; color:#01779a; font-family: Georgia, serif; }
.portfolioinfo > span       { display:inline-block; background: url('../images/portfolio-files-sprite.png') no-repeat 0 0; width: 56px; height:61px; margin-bottom:2em; float:left; text-indent:-9999px; }
span.itemsAll               { width: 283px; }
span.itemPSD                { background-position: 0 0; }
span.itemHTML               { background-position: -59px 0; }
span.itemCSS                { background-position: -116px 0; }
span.itemPHP                { background-position: -175px 0; }
span.itemJS                 { background-position: -232px 0; }

/* Portfolio Slider */
.portfolioSlider                                 { background: url('../images/loading.gif') no-repeat 50% 50%; margin-bottom:50px; float:left; width:620px; height:270px; -moz-box-shadow: 0 5px 25px #888; -webkit-box-shadow:0 5px 25px #888; box-shadow:0 5px 25px #888; }
.portfolioSlider .nivoSlider                     { position:relative; }
.portfolioSlider img                             { position:absolute; top:0; left:0; display:none; }
.portfolioSlider .nivoSlider a.nivo-imageLink    { position:absolute; top:0; left:0; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; }
.portfolioSlider .nivo-slice                     { display:block; position:absolute; z-index:50; height:100%; }
.portfolioSlider .nivo-caption                   { position:absolute; left:0; bottom:0; background:#000; color:#fff; opacity:0.8; width:100%; z-index:89; }
.portfolioSlider .nivo-caption p                 { padding:5px; margin:0; }
.portfolioSlider .nivo-directionNav a            { position:absolute; top:49%; z-index:99; cursor:pointer; }
.portfolioSlider .nivo-prevNav, .portfolioSlider .nivo-nextNav    { background: url('../images/portfolioslider-arrows-sprite.png') no-repeat 0 0; display:block; width:16px; height:19px; text-indent:-9999px}
.portfolioSlider .nivo-prevNav                   { left:25px; } .portfolioSlider .nivo-nextNav { right:25px; background-position: 0 -21px;}
.portfolioSlider .nivo-controlNav                { position:absolute; bottom:-55px; left:48%; }

/* ------- [ Diensten Item ] ------- */
#leftCol                    { float:left; width:440px; } #rightCol { float:right; width:440px;}
.dienstenItem               { padding-left:160px; position:relative; height:465px;}
.dienstenItem h4            { color:#111; margin-bottom:1.0em;font-size:21px;}
.dienstenItem p.serif       { font-size:0.9em; } .dienstenItem p a { text-decoration:underline; font-weight:bold; }
.dienstenImage              { background: url('../images/diensten-sprite.png') no-repeat 0 0; width:150px; height:150px; display:block; position:absolute; top:0; left:0; text-indent:-9999px;}
.dienstenImage.ontwerp      { background-position:0 0; }
.dienstenImage.ontwikkeling { background-position:0 -150px; }
.dienstenImage.cms          { background-position:0 -300px; }
.dienstenImage.seo          { background-position:0 -450px; }
.dienstenImage.onderhoud    { background-position:0 -600px; }
.dienstenImage.verhuizing   { background-position:0 -750px; }
.dienstenImage.photoshop    { background-position:0 -900px; }
.dienstenImage.html         { background-position:0 -1050px; }
.cursus { height:auto; }

/* ------- [ Contact ] ------- */
#contactWrap            { width:780px; } .contactPage { padding-bottom:35px; }
.contactPage form       { font-family: Rockwell, serif; font-weight:bold; font-size:13px; padding-left:180px; background: transparent url('../images/contact-sprite.png') no-repeat 0 -370px; margin-top:3em;}
.contactPage p.serif    { font-size:0.9em; width:640px; }
.contactPage label      { width:160px; display:inline-block; position:absolute; left:0; color:#075a72; }
.contactPage form p     { position:relative; padding-left:160px; margin:0; }
.contactPage input, .contactPage #toelichting, .contactPage select      { width:275px; height:31px; border:none; padding:17px 0 0 25px; background: transparent url('../images/contact-sprite.png') no-repeat 0 -32px; font-family: Rockwell, serif; font-size:13px; font-weight:bold; }
.contactPage input:focus, .contactPage #toelichting:focus { outline:none; }
.contactPage #toelichting    { width:410px; height:203px; padding:17px 25px; background-position: 0 -80px; font-weight:normal;}
.contactPage input.submit    { width:200px; height:53px; padding:0; background-position: 0 -317px; text-indent:-9999px; cursor:pointer; font-size: 0; display:block; line-height: 0; }
.contactPage select     { background-position: 0 0; width:160px; height:32px; padding:8px 8px 8px 25px;}
label.betreft           { padding-top:6px; }

.contactInfo            { position:absolute; right:0; top:110px; width:140px; }
.contactInfo h5         { color: #222; margin:0;}
.contactInfo p          { margin:0; font-family: Rockwell, serif}
label.error             { color:red; font-size:12px; font-weight:normal; line-height:14px; top:2em; width:140px; }
img.inbox			{ background:#fefefe; border:1px solid #ccc; display:block; margin:59px auto; padding:50px; }