@charset "utf-8";

/**
 * global
 */

  body, html {
    margin:0;
    padding:0;
    width:3000px;
    height:100%;
    overflow-x:hidden;
  }
  body {
    font-size:13px;
    line-height:1.5;
    color:#666;
    font-family:arial,verdana,sans-serif;
    overflow-y:hidden;
    background-color:#ccc;
  }

  /* headers */
    
    h1, h2, h3, h4, h5, h6 {
      margin:0px;
      padding:0px;
    }
    h1 {
      font-size:25px;
    } 
    h2 {
      margin-top:14px;
      margin-bottom:14px;
      font-size:17px;
    }
    h3 {
      margin-top:8px;
      font-size:18px;
    }
    h1.first, h2.first, h3.first, h4.first, h5.first, h6.first {
      margin-top:0px;
    }

  /* links */
    
    a {
      color:#666;
      text-decoration:underline;
    }
    a:hover {
      text-decoration:none;
    }
    a img {
      border:none;
    }

    h2 a {
      color:#000;
    }

  /* forms */
    
    label {
      font-weight:bold;
    }

    input {
    }

/**
 * containers
 */

  #container {
    z-index:10;
  }

  .header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:75px;
    background:#fff;
    z-index:10;
  }

  .door_wrap {
    padding-top:92px;/* was 107px, nu 92px (17px margin) */
    padding-left:3px;/* a total margin of 17px (17px - 14px of .door) */
    z-index:10;
  }

  #bg_img {
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:-10;
  }

/**
 * header
 */

  /* logo */

    .header h1 a#logo {
      float:left;
      margin-left:15px;
      width:210px;
      height:75px;
      background:url('../../img/logo_lt.png') left center no-repeat;
      text-indent:-1000px;
      font-size:0px;
      border:none;
    }

  /* menu */

    .header #menu {
      float:right;
    }
    .header #menu ul {
      margin:0px;
      margin-top:42px;
      padding:0px;
      list-style-type:none;
      text-align:left;
    }
    .header #menu ul li {
      float:left;
      margin-right:10px;
    }
    .header #menu ul li a {
      display:block;
      height:26px;
      font-size:0px;
      border:none;
    }
    .header #menu ul li a span {
      display:none;
    }
  
  /* menu items */

    #menu .btn_aangenaam {width:84px;background:url('../../img/menu/button__aangenaam0.png') left top no-repeat;}
    #menu .btn_aangenaam:hover, #menu .btn_aangenaam.active, #menu .btn_aangenaam.hover {background:url('../../img/menu/button__aangenaam1.png') left top no-repeat;}
  
    #menu .btn_tuxion {width:84px;background:url('../../img/menu/button__tuxion0.png') left top no-repeat;}
    #menu .btn_tuxion:hover, #menu .btn_tuxion.active, #menu .btn_tuxion.hover {background:url('../../img/menu/button__tuxion1.png') left top no-repeat;}
  
    #menu .btn_diensten {width:62px;background:url('../../img/menu/button__diensten0.png') left top no-repeat;}
    #menu .btn_diensten:hover, #menu .btn_diensten.active, #menu .btn_diensten.hover {background:url('../../img/menu/button__diensten1.png') left top no-repeat;}
  
    #menu .btn_portfolio {width:62px;background:url('../../img/menu/button__portfolio0.png') left top no-repeat;}
    #menu .btn_portfolio:hover, #menu .btn_portfolio.active, #menu .btn_portfolio.hover {background:url('../../img/menu/button__portfolio1.png') left top no-repeat;}
  
    #menu .btn_blog {width:47px;background:url('../../img/menu/button__blog0.png') left top no-repeat;}
    #menu .btn_blog:hover, #menu .btn_blog.active, #menu .btn_blog.hover {background:url('../../img/menu/button__blog1.png') left top no-repeat;}
  
    #menu .btn_contact {width:59px;background:url('../../img/menu/button__contact0.png') left top no-repeat;}
    #menu .btn_contact:hover, #menu .btn_contact.active, #menu .btn_contact.hover {background:url('../../img/menu/button__contact1.png') left top no-repeat;}

/**
 * doors
 */

  /* door */

    .door_wrap .door {
      float:left;
      width:250px;
      height:330px;
      max-height:100%;
      margin-left:14px;
      padding-left:20px;
      padding-top:11px;
      padding-right:11px;
      /*padding-bottom:20px;*/
      background:#fff center center no-repeat;
      overflow-x:hidden;
      overflow-y:auto;
    }
  
    .door_wrap .door .inner {
      background-color:#fff;
      padding-right:20px;
      width:100%;
      min-height:100%;
      cursor:default;
    }
    .door_wrap .door .inner h2 {
      font-size:23px;
    }


  /* intro text */

    .door_wrap .door .inner h1#intro {margin-top: 10px; margin-bottom: 0;}
    .door_wrap .door .inner h2#intro {color: #000; font-weight: normal; line-height: 1.2; margin-top: 5px;}

  /* close & next buttons */

    .door_wrap .door .inner .close, .next {text-align:right;font-size:12px;color:#999;background-position:right center;background-repeat:no-repeat;}
    .door_wrap .door .inner .close a, .next a {padding-right:20px;text-decoration:none;}
    .door_wrap .door .inner .close a:hover, .next a:hover {text-decoration:underline;}
    .next {color:#808080;}
    .next b {color:#666;}

    .door_wrap .door           .inner .close a {color:#fff;}  
    .door_wrap .door           .inner .close a:hover {color:#666;}  

    .door_wrap .door#aangenaam .inner .close, .dot1 {background-image:url('../../img/icons/dot1s.png');}
    .door_wrap .door#tuxion    .inner .close, .dot2 {background-image:url('../../img/icons/dot2s.png');}
    .door_wrap .door#diensten  .inner .close, .dot3 {background-image:url('../../img/icons/dot3s.png');}
    .door_wrap .door#portfolio .inner .close, .dot4 {background-image:url('../../img/icons/dot4s.png');}
    .door_wrap .door#blog      .inner .close, .dot5 {background-image:url('../../img/icons/dot5s.png');}
    .door_wrap .door#contact   .inner .close, .dot6 {background-image:url('../../img/icons/dot6s.png');}

  /* doors */

    .door_wrap #aangenaam {
      background-image:url('../../img/doors/door1__0.png');
    }
    .door_wrap #aangenaam:hover,
    .door_wrap #aangenaam.active {
      background-image:url('../../img/doors/door1__1.png');
      cursor:pointer;
    }
    .door_wrap #aangenaam .inner {
      width:400px;
      min-height:410px;
    }
    .door_wrap #aangenaam .inner h6 {
      color:#019ee0;
    }
  
    .door_wrap #tuxion {
      background-image:url('../../img/doors/door2__0.png');
    }
    .door_wrap #tuxion:hover,
    .door_wrap #tuxion.active {
      background-image:url('../../img/doors/door2__1.png');
      cursor:pointer;
    }
    .door_wrap #tuxion .inner {
      width:700px;
      min-height:400px;
    }
    .door_wrap #tuxion .inner h6 {
      color:#6cc5bc;
    }
  
    .door_wrap #diensten {
      background-image:url('../../img/doors/door3__0.png');
    }
    .door_wrap #diensten:hover, 
    .door_wrap #diensten.active {
      background-image:url('../../img/doors/door3__1.png');
      cursor:pointer;
    }
    .door_wrap #diensten .inner {
      width:650px;
      min-height:390px;
    }
    .door_wrap #diensten .inner h6 {
      color:#c7d82e;
    }
  
    .door_wrap #portfolio {
      background-image:url('../../img/doors/door4__0.png');
    }
    .door_wrap #portfolio:hover,
    .door_wrap #portfolio.active {
      background-image:url('../../img/doors/door4__1.png');
      cursor:pointer;
    }
    .door_wrap #portfolio .inner {
      width:900px;
      min-height:400px;
    }
    .door_wrap #portfolio .inner h6 {
      color:#fbb619;
    }
    .door_wrap #portfolio h3 {
      margin-top:-11px;
      padding-left:5px;
    }

    .door_wrap #blog {
      background-image:url('../../img/doors/door5__0.png');
    }
    .door_wrap #blog:hover,
    .door_wrap #blog.active {
      background-image:url('../../img/doors/door5__1.png');
      cursor:pointer;
    }
    .door_wrap #blog .inner {
      width:450px;
      min-height:100%;
    }
    .door_wrap #blog .inner h6 {
      color:#ef5a26;
    }
    .door_wrap #blog .inner .item {
      clear:both;
      position:relative;
      background-color:#fff;
      padding:5px;
    }
    .door_wrap #blog .inner .item h3 {
      background:#fff url('../../img/border_blog.png') left bottom repeat-x;
    }
    .door_wrap #blog .inner .item h3 a {
      color:#f05a22;
      text-decoration:none;
    }
    .door_wrap #blog .inner .item h3 a:hover {
      color:#ff6600;
    }
    .door_wrap #blog .inner .item h3 a.active {
      background-image:none;
    }
    .door_wrap #blog .inner .item h3 a .toggle  {
    }
    .door_wrap #blog .inner .item img {
      margin-right:8px;
    }
    .door_wrap #blog .inner .item .author {
      color:#808080;
      font-size:10px;
    }

    .door_wrap #contact {
      background-image:url('../../img/doors/door6__0.png');
    }
    .door_wrap #contact:hover,
    .door_wrap #contact.active {
      background-image:url('../../img/doors/door6__1.png');
      cursor:pointer;
    }
    .door_wrap #contact .inner {
      cursor:default;
      width:760px;
      min-height:418px;
    }
    .door_wrap #contact .inner h6 {
      color:#b42866;
    }
    .door_wrap #contact form label {
      display:block;
      float:left;
      width:100px;
      font-weight:normal
    }
    .door_wrap #contact form input[type="text"],
    .door_wrap #contact form textarea,
    .door_wrap #contact form select {
      display:block;
      width:200px;
      border:none;
      background:url('../../img/border_blog.png') repeat-x left bottom;
    }
    .door_wrap #contact form .submit {
      display:block;
      width:300px;
      height:25px;
      background:url('../../img/forms/contact/submit1.png') left top no-repeat;
      border:none;
      text-indent:-1000px;
      font-size:0px;
      cursor:pointer;
    }
    .door_wrap #contact form input.error {
      background-image:url('../../img/border_blog1.png');
    }


/**
 * portfolio
 */

  /* */

    #portfolio .list {
      float:left;
      width:264px;
    }
    #portfolio .info {
      float:left;
      margin-left:17px;
      width:600px;
      height:850px;
      background-color:#fff;
    }

  /* list */

    #portfolio .list .item {
      float:left;
      margin-right:8px;
      margin-bottom:8px;
      width:120px;
      height:60px;
      border:solid #e6e6e6 2px;
    }
    #portfolio .list .item:hover {
      border-color:#fcb813;
    }
    #portfolio .list .item img {
    }

  /* info */

    #portfolio .info .left {
      float:left;
      padding-left:5px;
      width:300px;
      background-color:#fff;
    }
    #portfolio .info .right {
      float:right;
      text-align:right;
      width:175px;
    }
    #portfolio .info .right label {
      display:block;
    }

    /* slideshow style rules */

      #portfolio .info #screenshot {
        margin:0 auto;
        width:600px;
        height:305px;
        background:#e6e6e6;
      	position:relative;
      	overflow:hidden;
      	text-align:center;
      }
      #screenshot #slidesContainer .slide {
        margin:0 auto;
        width:580px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
        height:305px;
      }

    /* slideshow controls style rules */

      .control {
        display:block;
        height:305px;
        text-indent:-10000px;
        position:absolute;
      }
      #leftControl {
        top:0;
        left:0;
        width:300px;
        cursor:pointer;
      }
      #leftControl:hover {
        background:transparent url(../../img/slideshow_previous.png) no-repeat left center;
      }
/*
      #centerControl {
        top:0;
        left:225px;
        width:150px;
      }
      #centerControl:hover {
        background:transparent url(../../img/slideshow_zoom.png) no-repeat center center;
      }
*/
      #rightControl {
        top:0;
        right:0;
        width:300px;
        cursor:pointer;
      }
      #rightControl:hover {
        background:transparent url(../../img/slideshow_next.png) no-repeat right center;
      }

    /* item dots */

      #portfolio .item_dots {
        float:right;
        margin-top:8px;
        margin-right:5px;
      }

      #portfolio .dot {
        display:block;
        float:left;
        margin-left:11px;
        width:12px;
        height:12px;
        background:transparent url(../../img/icons/dot4_small0.png) no-repeat center center;
        text-indent:-2000px;
        cursor:pointer;
      }
      #portfolio .dot.active,
      #portfolio .dot:active,
      #portfolio .dot:hover {
        background-image:url(../../img/icons/dot4_small1.png);
      }

/**
 * custom classes
 */

  .reset            {clear:both;}
  .float_right      {float:right;}
  .hidden           {visibility:hidden;}
  .no_decoration    {border:none;}
  .no_background    {background:none;}
  .nobr             {white-space:nowrap;}

  .preloadRollOver {background-repeat:no-repeat;background-position:-1000px -1000px;}
  .preloadRollOver #_door1 {background-image:url("../../img/doors/door1__1.png")}
  .preloadRollOver #_door2 {background-image:url("../../img/doors/door2__1.png")}
  .preloadRollOver #_door3 {background-image:url("../../img/doors/door3__1.png")}
  .preloadRollOver #_door4 {background-image:url("../../img/doors/door4__1.png")}
  .preloadRollOver #_door5 {background-image:url("../../img/doors/door5__1.png")}
  .preloadRollOver #_door6 {background-image:url("../../img/doors/door6__1.png")}
  .preloadRollOver #_menu1 {background-image:url("../../img/menu/button__aangenaam1.png")}
  .preloadRollOver #_menu2 {background-image:url("../../img/menu/button__tuxion1.png")}
  .preloadRollOver #_menu3 {background-image:url("../../img/menu/button__diensten1.png")}
  .preloadRollOver #_menu4 {background-image:url("../../img/menu/button__portfolio1.png")}
  .preloadRollOver #_menu5 {background-image:url("../../img/menu/button__blog1.png")}
  .preloadRollOver #_menu6 {background-image:url("../../img/menu/button__contact1.png")}
  .preloadRollOver #_btnLeft {background-image:url("../../img/slideshow_previous.png")}
  .preloadRollOver #_btnRight {background-image:url("../../img/slideshow_next.png")}
  .preloadRollOver #_blogborder1 {background-image:url("../../img/border_blog1.png")}