/*
   ypos.css
   YPOS
   
   Created by Ronald Werring on 2011-09-01.
   Copyright 2011 YPOS internettoepassingen BV. All rights reserved.
*/
body { margin:0; padding:0; background:url(../gfx/bg_pattern.gif); background-attachment:fixed; font:12px 'Trebuchet MS', Arial; color:#414040; }
div#webetui_body { background:url(../gfx/bg_pattern.gif); }

div#wrapper    { width:980px; position:relative; margin:0px 0 0px 0;  background:white; box-shadow:0px 0px 18px rgba(0, 0, 0, 1) }
div#head       { margin-bottom:20px; }
div#head p img { margin-left:20px;}

div#page       { padding:0 20px 50px 25px;   }

/* LEFT */
div#left { width:580px; }
div#left div.text img { margin-right:24px; }

/* RIGHT */
div#right { width:280px; float:right; margin:0 25px 25px 0; }
div#right ul { margin:0; padding:0; }
div#right ul li { list-style-type:none; padding:6px 0 6px 20px; background-image:url(../gfx/vinkje.png); background-repeat:no-repeat; background-position:0 9px; font-size:13px; border-top:1px solid #DDD; }
div#right em { display:block; text-align:center; color:#888;}
div#right ol { margin:0 0 1em; padding:0;}
div#right ol li { list-style-type:none; padding:6px 0 6px 30px; font-size:13px; border-top:1px solid #DDD; position:relative;}
div#right ol li em { color:white; position:absolute; left:0; width:22px; height:22px; background:; 
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  
  background:#ff7103;
  background-image:-moz-linear-gradient(0% 100% 90deg,#e84f03, #ff8315);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8315), to(#e84f03));
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);

  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}


div#page div.slideshow { margin:0 0 20px; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
 }
div#page div.slideshow img { border-radius:0;}

body#portfolio div.slideshow img { width:900px; height:600px;}

div.slideshow ul, div.album ul, div.slideshow_desc ul { display:none;}
div.slideshow_desc ul.payoffs { display:block;}

div.clear { clear:both; }

h1 {
  color:white; 
  
  width:920px; font:24px; font-weight:normal; margin:0 0 20px 20px;
  
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  
  background:#ff7103;
  background-image:-moz-linear-gradient(0% 100% 90deg,#e84f03, #ff8315);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8315), to(#e84f03));
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);

  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  letter-spacing:1px;
  height:auto;
  width:auto;
  padding:12px 20px;
  margin-right:20px;
}

h1 em {
  display:block;
  float:right;
  font-style:normal;
  font-size:16px;
  line-height:32px;
}

h2 { font-size:16px; color:#414040; margin:0 0 1ex 0;}
h3 { font-size:14px; color:#ff6c00; margin:0 0 12px 0; }
h4 { font-size:12px; }

img.left  { float:left; margin-right:10px; }
img.right { float:right; margin-left:10px; }
img {
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
}

body#bedrijf div.text img { float:right; margin:0 0 0 24px; }
body#bedrijf.werkplek-te-huur div.text img { float:none; margin:0 0 0 0; }

/*body#index img, div#head img { box-shadow:0 0 0 0; border-radius:0; }*/
body#index img, div#head img { box-shadow:0 0 0 0; border-radius:0; }
body#index div#head img      { border-radius:6px }
body#index div.slideshow { border-radius:6px; margin-left:20px; }

p { margin:0 0 3ex 0; line-height:3.2ex; }
div.intro p { font-size:16px; line-height:24px; }

a        { color:#4F7BD4; font-weight:bold; }
a:hover  { color:#FF5A00  }
a img    { border:0; }

#page ul { margin:0 0 3ex 20px; padding:0;}
ul,
ol { }
li { line-height:3.2ex; }

/* ======== */
/* = LOGO = */
/* ======== */
div#logo   { padding:20px; }
div#logo a { width:129px; height:44px; background:url(../gfx/logo.png) no-repeat left top; text-indent:-5000px; display:block; overflow:hidden;}

/* ======== */
/* = MENU = */
/* ======== */
div#menu    { position:absolute; top:29px; left:240px; z-index:100; }
div#menu ul { list-style-type:none; margin:0; padding:0; }
div#menu li { display:block; float:left; position:relative; }
div#menu ul li a { display:block; float:left; padding:0 0 0 0; margin:0 8px; font:13px Futura, Arial; color:#637589; padding-bottom:5px; text-transform:uppercase; text-decoration:none;
  padding:2px 12px;
  background-image:none;
  border-radius:6px;
  -moz-transition:all 0.5s ease-in-out;
   }
div#menu ul li a.selected { 
  color:#ff6c00;
}
div#menu ul li a:hover    { 
  background:rgba(99,117,137,0.1);
  background:#eff1f3;
  box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
}

/* submenu */
div#menu li ul { display:none; }
div#menu li.selected ul { position:absolute; left:-90px;  top:25px; display:block; width:600px;  }
div#menu li.selected ul li a { text-transform:none; margin:0 4px; padding:1px 8px; font-size:12px; }

body#portfolio div#menu li.selected ul { left:-326px; width:800px;}
body#portfolio div#menu li.selected ul { left:-326px; width:800px;}
body#bedrijf   div#menu li.selected ul { width:300px }
body#contact   div#menu li.selected ul { width:300px }

/* ======== */
/* = ZOEK = */
/* ======== */
div#zoek { position:absolute; top:30px; left:810px; width:149px; height:20px; background:#f3f4f9; border:1px solid #a7adb4; border-radius:6px; 
  background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#fff));
  background-image: -moz-linear-gradient(0% 12% 90deg, #f3f4f9, #d4d4d4);
}
div#zoek form { margin:0; padding:0; }
div#zoek input.text { width:125px; height:20px; background:none; border:none; padding:0 0 0 5px; border:0; box-shadow:0 0 0 0; }
div#zoek input.submit { padding:0; height:20px; width:20px; position:absolute; right:0; top:1px; margin:0; box-shadow:0 0 0 0; background-image:url(../gfx/zoekbtn.png); background-color:transparent; border:none; cursor:pointer; }

/* ============= */
/* = Formulier = */
/* ============= */
label { width:160px; float:left; display:block; text-align:right; margin-right:12px; }
input.text, textarea { font:13px 'Trebuchet MS', Arial; width:280px; border:1px solid #888; box-shadow:3px 3px 4px rgba(0, 0, 0, 0.1); margin:0 0 12px;
}
textarea { height:140px;}
div.radiogroup { margin:0 0 12px 172px;}
div.radio_item { margin:0 0 4px;}

input.submit { display:block; 
  margin:12px 0 12px 172px;
  cursor:pointer;
  color:white;
  border:0;
  text-transform:uppercase;
  padding:3px 12px;
  background:#ff7103;
  background-image:-moz-linear-gradient(0% 100% 90deg,#e84f03, #ff8315);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8315), to(#e84f03));
  box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
  border-radius:6px;
}

/* =========== */
/* = contact = */
/* =========== */
body.routebeschrijving div#wrapper { width:auto; }
div#map_canvas { height:500px; margin:0 20px; border:1px solid #888;  
  -moz-border-radius:6px;  -webkit-border-radius:6px;  border-radius:6px;
  box-shadow:3px 3px 4px rgba(0, 0, 0, 0.3);
}

/* ====================== */
/* = HEADER / SLIDESHOW = */
/* ====================== */

/*div.slideshow     { position:relative; top:0; left:0; width:940px; height:299px; overflow:hidden; margin:0 0 0 20px; }*/
div.slideshow       { position:relative; overflow:hidden;}
div.slideshow img { position:absolute; display:block; top:0; left:0; z-index:8; }
div.slideshow img.bovenop    { z-index:10 }
div.slideshow img.erachter   { z-index:9  }
div.slideshow div.bullets    { z-index:21; position:absolute; top:252px; left:620px; width:277px; text-align:center }
div.slideshow div.bullets a  { display:inline-block; width:12px; height:12px; background:url(../gfx/home_bullets.png) no-repeat bottom left; margin-right:10px; cursor:pointer; }
div.slideshow div.bullets a:hover,
div.slideshow div.bullets a.active { background-position:top left; }

div.slideshow ul.payoffs { display:none; }
div.slideshow_desc ul.payoffs { display:block; margin:0; padding:0; list-style-type:none; }
div.slideshow_desc ul.payoffs li { display:none;}
div.slideshow_desc ul.payoffs li.bovenop { display:block; }
div.slideshow_desc ul.payoffs li { position:absolute; left:30px; top:80px; width:160px; line-height:1.3em; text-align:center; z-index:20;
  color:white; font-size:28px; text-shadow:4px 4px 4px rgba(0,0,0,0.5);
}

div.slideshow_desc ul.payoffs li.ronald-laptop    { left:500px; top:286px; width:250px;}
div.slideshow_desc ul.payoffs li.modekwartier_01  { top:110px; }
div.slideshow_desc ul.payoffs li.mobiele-website  { left:78px; top:190px; }
div.slideshow_desc ul.payoffs li.kcwz_01          { left:680px; top:190px; width:220px; }
div.slideshow_desc ul.payoffs li.ronald-demo-webetui { left:254px; top:280px; width:190px; }
div.slideshow_desc ul.payoffs li.hgw_02           { top:130px; }
div.slideshow_desc ul.payoffs li.werkoverleg      { left:480px; top:330px; width:500px; }
div.slideshow_desc ul.payoffs li.webetui-versie-4 { left:600px; top:180px; width:300px; font-size:20px; line-height:1.6em; }
div.slideshow_desc ul.payoffs li.kcwz_02          { left:780px; top:120px; }
div.slideshow_desc ul.payoffs li.hgw_01           { left:700px; top:160px; width:210px; font-size:24px; line-height:2em; }


/* ======================== */
/* = INDIVUDUELE PAGINA's = */
/* ======================== */
/*body#index div#left { padding-bottom:100px; }
body#index div#left p { border-top:1px solid #ccc; padding:15px 0; height:40px; }
body#index div#left p strong { color:#ff6c00; }
body#index div#left .intro p { border:none; margin-bottom:4ex; }
*/

/* ==================== */
/* = portfolio pagina = */
/* ==================== */
/*body#portfolio div#wrapper { width:auto; }*/
body#portfolio div#page { margin:0; background:#7c808e; padding:60px 40px 20px;}
body#portfolio p { margin:0; }
body#portfolio div#left    { width:auto; margin:0 0px 0 0; }
/*body#portfolio div#head,*/
body#portfolio div#head,
body#portfolio div#right   { display:none; }
div.album { margin-right:0px;}
div.album img { width:210px; width:264px; width:112px; display:block; float:left; margin:0 50px 44px 0; margin:0 20px 20px 0; cursor:pointer; }
/*body#portfolio div#head img { display:block; float:left; margin:0 0 40px 40px; }*/

body#portfolio div.slideshow_desc ul { display:block; list-style-type:none; margin:0; padding:10px 20px; height:20px; background:white; border-radius:6px;
box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
 }
body#portfolio div.slideshow_desc li {  display:none; }
body#portfolio div.slideshow_desc li.bovenop {  display:block; }
body#portfolio div.slideshow_desc li a { float:right; }

body#portfolio div.arrows a       { display:block; position:absolute; top:102px; width:24px; height:20px; background-position:0 0; background-repeat:no-repeat; background-image:url(../gfx/btn-slideshow.png); color:#ddd; text-decoration:none; padding:4px 0 0 28px; font-weight:normal; }
body#portfolio div.arrows a:hover { color:#ff5a00; }
body#portfolio div.arrows a.left  { left:430px; background-position:0 -112px }
body#portfolio div.arrows a.right { left:530px; background-position:0 -167px }
body#portfolio div.arrows a.play  { left:40px;   background-position:0  0     }
body#portfolio div.arrows a.pause { left:40px;   background-position:0 -57px  }

body#portfolio div.arrows a.left:hover  { background-position:0 -139px }
body#portfolio div.arrows a.right:hover { background-position:0 -194px }
body#portfolio div.arrows a.play:hover  { background-position:0 -27px  }
body#portfolio div.arrows a.pause:hover { background-position:0 -84px  }

body#portfolio div.arrows div.slideshow_numbers { position:absolute; top:105px; left:449px; color:#ddd; text-align:center; width:80px; }

body#portfolio a.close { position:absolute; right:2px; top:2px; width:22px; height:20px; text-decoration:none; background-image:url(../gfx/close.png); background-position:2px 2px; background-repeat:no-repeat; }
body#portfolio a.close:hover { background-position:2px -17px;}

body#portfolio div#footer { border-top:1px solid #999;}

body#portfolio a#overzicht { position:absolute; right:50px; top:102px; color:#ddd; text-decoration:none; font-weight:normal; }
body#portfolio a#overzicht:hover { color:#ff5a00; }


body#portfolio div.thumbs { margin-right:-40px;}
body#portfolio div.thumbs img { width:195px; margin:0 40px 40px 0; cursor:pointer; }
body#portfolio div.overzicht ul { display:none; }

/* ========== */
/* = Footer = */
/* ========== */
div#footer { padding:14px 20px 0px 25px; color:#ddd; background:#7c808e; position:relative; clear:both; min-height:170px;}
div#footer a { color:#fff; }
div#footer a:hover { color:#FF5A00;}
#footer h2 { color:#CCC; font-size:110%; font-style:italic; }
#footer .kolom { width:280px; float:left; margin-right:32px; }
#footer .adres { position:absolute; left:676px;  top:14px;}