/* ------------------------------------ *
 alle opmaak drukkerij
 start: september 2009
 laatste aanpassing: 15/09/2009
 * ------------------------------------ */

*
{
 padding: 0;
 margin: 0;
}

* :focus { outline: 0; }

.clear { clear: both; }

.alert { color: #7e003f; font-weight: bold; }

html, body
{
 margin: 0;
 padding: 0;
 height: 100%; /* héél belangrijk */
}

body
{
 background: #fbf7f4;  /* OF #eae2e1 TE CHECKEN */
 font-family: Myriad, Verdana, sans-serif;
 font-size: 75%;
 text-align: center;
}

#container
{
 position: relative;
 min-height: 100%;
 height:auto !important; /* voor moderne browsers */
 height:100%; /* voor IE */
 background: #fcfbfb url(../images/bg_drukkerij.jpg) no-repeat top left; /* TE CHECKEN top left */
 width: 1003px;
 margin: 0 auto;
 text-align: left;
 z-index: 2;
}

#branding   /* OK - bovenbalk tot aan begin wit kader met daarin toplinks en link naar startpagina */
{
 height: 180px;
 font-size: 11px;
 letter-spacing: 1px;
 position: relative;
 top: 0;
 left: 0;
}

#logo  /* OK */
{
 position: absolute;
 width: 130px;
 height: 130px;
 left: 50px;
 top: 60px;
}

#logo h1  /* onzichtbaar element voor  niet-css-browsers en zoekmachines */
{
 display: none;
}

#logo a  /* onzichtbare link naar startpagina */
{
 display: block;
 width: 130px;
 height: 130px;
 text-indent: -1000em;
}


/* ------------------------------------ *
   navigatie boven
 * ------------------------------------ */

#navTop
{
 position: absolute;
 top: 35px;
 right: 80px;
 list-style: none;
 margin: 0;
 padding: 0;
}

#navTop li
{
 float: left;
 margin-left: 25px;
}

#navTop li a
{
 color: #989a9d;
 font-weight: normal;
 display: block;
 text-decoration: none;
 width: 92px;
 line-height: 75px;
 background: url(../images/boogje_grijs.png) no-repeat top left !important;
 background: url(../images/boogje_grijs.gif) no-repeat top left;
}

#navTop li a:hover
{
 color: #000;
 background: url(../images/boogje_zwart.png) no-repeat top left !important;
 background: url(../images/boogje_zwart.gif) no-repeat top left;
}

#navTop li a.uitgeverij
{
 padding-left: 15px;
}

#navTop li a.portaal
{
 padding-left: 0;
}

#navTop li a.schooltv
{
 padding-left: 20px;
}

/* ------------------------------------ *
   navigatie boven bis
 * ------------------------------------ */

#navTop2
{
 position: absolute;
 top: 130px;
 left: 245px;
 width: 680px;
 height: 30px;
 text-align: right;
}

#navTop2 a
{
 color: #771417;
 font-weight: normal;
 letter-spacing: 2px;
 font-size: 1.1em;
 line-height: 3em;
 display: block;
 float: right;
 text-decoration: none;
 padding-left: 23px;
 margin-left: 10px;
}

#navTop2 a:hover
{
 font-weight: bold;
 background: url(../images/uitroepteken_klein.png) no-repeat bottom right !important;
 background: url(../images/uitroepteken_klein.gif) no-repeat bottom right;
 padding-right: 30px;
}

/* ------------------------------------ *
   navigatie links
 * ------------------------------------ */

#navLeft  /* ul */
{
 float: left;
 margin-top: 60px;
 margin-left: 35px;
 letter-spacing: 2px;
 font-size: 1.1em;
 list-style-type: none;
}

#navLeft li.ontwerp,
#navLeft li.opmaak,
#navLeft li.prepress,
#navLeft li.prints,
#navLeft li.drukwerk,
#navLeft li.afwerking,
#navLeft li.verzending
{
 margin-left: 15px;  /* extra insprong zogezegd subniveau */
}


#navLeft a  /* basisstijl voor links */
{
 font-weight: normal;
 text-decoration: none;
 color: #000000;
 line-height: 33px;
 display: block;
}

#navLeft .home a { width: 6em; }
#navLeft .aanbod a { width: 12.5em; }
#navLeft .ontwerp a { width: 8em; }
#navLeft .opmaak a { width: 8em; }
#navLeft .prepress a { width: 8.5em; }
#navLeft .prints a { width: 9em; }
#navLeft .drukwerk a { width: 8.5em; }
#navLeft .afwerking a { width: 9.5em; }
#navLeft .verzending a { width: 10.5em; }
#navLeft .referenties a { width: 10.5em; }
#navLeft .offerte a { width: 7.5em; }
#navLeft .duurzaamheid a { width: 12.5em; }
#navLeft .contact a { width: 8em; }

#navLeft a:hover
{
 font-weight: bold;
 background: url(../images/uitroepteken_klein.png) no-repeat bottom right !important;
 background: url(../images/uitroepteken_klein.gif) no-repeat bottom right;
}

/* actieve stijl voor hoofdonderdeel */

#home #navLeft .home a,
#aanbod #navLeft .aanbod a,
#ontwerp #navLeft .ontwerp a,
#opmaak #navLeft .opmaak a,
#prepress #navLeft .prepress a,
#prints #navLeft .prints a,
#drukwerk #navLeft .drukwerk a,
#afwerking #navLeft .afwerking a,
#verzending #navLeft .verzending a,
#referenties #navLeft .referenties a,
#offerte #navLeft .offerte a,
#duurzaamheid #navLeft .duurzaamheid a,
#contact #navLeft .contact a
{
 font-weight: bold;
 background: url(../images/uitroepteken_klein.png) no-repeat bottom right !important;
 background: url(../images/uitroepteken_klein.gif) no-repeat bottom right;
}

#contact #navTop2 .contact a
{
 font-weight: bold;
 background: url(../images/uitroepteken_klein.png) no-repeat bottom right !important;
 background: url(../images/uitroepteken_klein.gif) no-repeat bottom right;
 padding-right: 35px;
}
/* ------------------------------------ *
   main content
 * ------------------------------------ */

#mainContent
{
 position: relative;
 width: 700px;
 margin: 30px 10px 20px 226px;
 line-height: 1.5em;
 padding-bottom: 100px;
 z-index: 3;
}

#mainContent p
{
 margin: 10px 60px 10px 45px;
}

#aanbod #mainContent p,
#prepress #mainContent p
{
 margin: 10px 110px 10px 45px;
}

#mainContent ul
{
 list-style-type: circle;
 margin: 10px 45px;
}

#mainContent li
{
 margin-left: 30px;
}

#mainContent h1
{
 font-size: 1.2em;
 letter-spacing: 2px;
 color: #771417;
 margin: 0px 45px 20px 45px;
 font-weight: normal;
 text-transform: uppercase;
}

#mainContent img
{
 border: 0;
}

a, a:visited, a:hover {color:#000;}

#uitroepteken
{
 position: absolute;
 right: 0;
 bottom: 80px;
 z-index: 11;
}

#ontwerp #uitroepteken,
#opmaak #uitroepteken,
#drukwerk #uitroepteken,
#home #uitroepteken
{
 position: absolute;
 right: 0;
 bottom: 180px;
 z-index: 11;
}

#uitroepteken img
{
 border: 0;
}

#open
{
 margin-left: 320px;
 position: absolute;
}

#googlekaart
{
 margin-left: 45px;
 margin-top: 50px;
}

a.offertecontact
{
 color: #771417;
 font-weight: bold;
 letter-spacing: 2px;
 font-size: 1.1em;
 line-height: 3em;
 display: block;
 width: 15em;
 text-decoration: none;
 background: url(../images/uitroepteken_klein.png) no-repeat bottom right !important;
 background: url(../images/uitroepteken_klein.gif) no-repeat bottom right;

}



/* ------------------------------------ *
   offerteformulier
 * ------------------------------------ */

fieldset 
{
 padding: 1em;
 border: 1px solid #771417;
 margin: 20px;
 background-color: #fcfbfb;
}

fieldset#contact {
 width: 500px;
}

fieldset#werk {
 width: 650px;
}

legend
{
 color: #771417;
 padding: 0 5px;

}

label
{
 float: left;
 width: 10em;
 color: black;
}

input, select
{
 width: 220px;
}

select.formaat,
select.papiersoort
{
 margin-right: 20px;
}

select.papiersoort
{
 width: 280px;
}

label.ander
{
 margin-left: 10em;
}

input.submit, input.radio, input.checkbox
{
 width: auto;
}

input.radio
{
 float: left;
 margin-right: 1em;
}

fieldset.inner
{
 margin: 10px 0px;
 padding: 5px;
 border: 1px solid #eae2e1;
 width: 400px;
}

fieldset.inner2
{
 margin: 10px 0px;
 padding: 5px;
 border: 1px solid #eae2e1;
 width: 630px;
}

fieldset div
{
 padding: 5px;
 margin: 1px 0;
}

/* ------------------------------------ *
   photogallery Stu Nichols
   http://www.cssplay.co.uk/menu/gallery.html
 * ------------------------------------ */

#fotocontainer {position:relative; width:610px; height:500px;
                margin:30px auto; font-family:Myriad, Verdana, sans-serif;
                }
#afwerking #fotocontainer
{
 background: url(../drukkerij/images/afwerking_displays_3328.jpg) 79px 110px no-repeat;
}

#drukwerk #fotocontainer
{
 background: url(../drukkerij/images/tijdschriften_geniet.jpg) 79px 110px no-repeat;
}

#ontwerp #fotocontainer
{
 background: url(../drukkerij/images/ontwerp_vad.jpg) 79px 110px no-repeat;
}

#opmaak #fotocontainer
{
 background: url(../drukkerij/images/opmaak_vad.jpg) 79px 110px no-repeat;
}

#prepress #fotocontainer
{
 background: url(../drukkerij/images/prepress_paulverrept_3375.jpg) 79px 110px no-repeat;
}

#fotocontainer a.pics {float:left; margin:7px 5px; display:inline; color:#000;
                       text-decoration:none; width:75px;
                       height:75px;}
#fotocontainer a.pics img.thumb {display:block; border:0;}

#fotocontainer a.pics span {display:none; border:0; width:590px;
                            text-align:center;}
                            /* background:#fff; enkel invoegen indien ook staande foto's worden gebruikt */
#fotocontainer a.pics span img {margin:10px auto; }

#fotocontainer a.pics:hover {white-space:normal; border:1px solid #fff;}
#fotocontainer a.pics:hover span {display:block; position:absolute; left:9px;
                                  top:100px; z-index:10; height:400px;}

#fotocontainer a.pics:active {border:0px solid #fc0;}
#fotocontainer a.pics:active span {display:block; position:absolute; left:9px;
                                   top:100px; z-index:5; height:400px;}

#fotocontainer a.pics:focus {border:0px solid #fc0; outline:0;}
#fotocontainer a.pics:focus span {display:block; position:absolute; left:9px;
                                  top:100px; z-index:5; outline:0;}
#fotocontainer span.info {clear:left; display:block; text-align:center; line-height:20px;
                          margin:0; padding:200px 0 0 0; width:620px; text-align:center;
                          color:#ccc; z-index:2; }
/* #fotocontainer span.info a {color:#000;}
#fotocontainer span.info a:hover {text-decoration:none;}  */

/* ------------------------------------ *
   AANGEPASTE FOTOGALLERIJ HOME
   gebaseerd op
   http://www.webreference.com/programming/css_gallery/2.html
 * ------------------------------------ */

#fotocontainerhome {
      position:relative;
      width:590px;
      height:450px;
      margin:45px auto 0 45px;
      background: #fff url(../drukkerij/images/drukpers_1.jpg) top left no-repeat;
      }

/* Removing the list bullets and indentation */ 
#fotocontainerhome ul {
      padding:0;
      margin:0;
      list-style-type:none;
      width:100px;
      height:386px;
      float: right;
      }
#fotocontainerhome li {
      margin-bottom: 10px;
      margin-left: 0;
      float: left;
      }
#fotocontainerhome li.text {
      font-size: 90%;
      }

/* Remove the images and text from sight */ 
#fotocontainerhome a.gallery span {
      position:absolute;
      width:1px;
      height:1px;
      top:5px;
      left:5px;
      overflow:hidden;
      background:#fff;
      }

/* change the thumbnail border color => geef border zodat beetje beweegt bij hover */
#fotocontainerhome a.gallery:hover {
      border:1px solid #fff;
      }

/* Adding the thumbnail images */ 
#fotocontainerhome a.gallery,
#fotocontainerhome a.gallery:visited {
      display:block;
      color:#000;
      text-decoration:none;
      }
#fotocontainerhome a.slidea {
      background:url(../drukkerij/images/tn_drukpers_collage.jpg);
      height:67px;
      width:100px;
      }
#fotocontainerhome a.slideb {
      background:url(../drukkerij/images/tn_drukpers_2.jpg);
      height:150px;
      width:100px;
      }

/* styling the :hover span */
#fotocontainerhome a.gallery:hover span {
    position:absolute;
    width:450px;
    height:450px;
    top:0;
    left:0;
    background:#fff;
    }