/**
 * Auger.nl website stylesheet.
 *
 * You may adapt elements of this CSS in your own projects,
 * but the unique combination of images, colors, sizes,
 * typography, and positioning ("the design") is
 *
 *   copyright (C) 2009-2010 Auger
 *
 * and may not be reproduced.
 *

 CSS selectors are sorted in order of appearance
 Text and borders are placed in a 120x20px grid.
 Box sizes rounded to 10px

 Editor styleguide:
 - .twocols:        two cols with .textcol + .sidecol or .imgcol
 - .border-bottom   end the div (e.g. .twocols) with a border)
 - h2:              blue semi-main title
 - h3:              uppercase subtitle
 - blockquote       quote text
 - p, ol            text elements.'

 - imgcol:

    <div class="img"><div class="border"><div><!-- --></div></div>
      <img src="..." width="220" height="160" alt="" />
    </div>

*/

html, body {
  height: 100%;
}

html {
  background: #ffda01 url(img/bg-yellow-grid.png) repeat-y 0 100%;
}

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 62.5%; /* Reset 1em naar 10px */
  color: #333;
  
  background-repeat: no-repeat;
}

#wrapper {
  position: relative;
  min-height: 100%;
  background-repeat: repeat-x;
}

* html #wrapper { height: 100%; }


/* -------- reset default browser styles -------- */

html, body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4 {
	font-size: 100%;
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

:focus       { outline: 0; }       /* Firefox 3 */
a[name]      { padding: 0; }       /* Firefox 3, Safari 3 */
textarea     { overflow: auto; }   /* IE */
* html table { font-size: 100%; }  /* IE 5.5 */

img, a img, object {
  border: 0;
  vertical-align: bottom;          /* avoid space by line-height */
}


/* -------- utils -------- */

.clearfix:after {
  content:      "."; 
  font-size:    0;
  line-height:  0;
  display:      block; 
  height:       0;
  clear:        both; 
  visibility:   hidden;
}

* html .clearfix { height:     1%; } /* 1% of nothing makes IE 6 do the right thing. */
*+html .clearfix { min-height: 0;  } /* and IE7 has new tricks to trigger hasLayout. */


/* -------- themes -------- */

/* pattern themes */
.default  #wrapper { background: #fff url(img/logo-largewhite.gif) no-repeat; }
.grid     #wrapper { background: #fff url(img/bg-white-grid.png)  repeat-y; }

/* image themes */
.koe      #wrapper { background-image: url(img/bg-koe.jpg); }
.kantoor  #wrapper { background-image: url(img/bg-kantoor.jpg); }
.scrum    #wrapper { background-image: url(img/bg-scrum.jpg); }

/* always make the full image visible. */
.fullimage-theme        #main { min-height: 780px; }  /* 900px - 120px #header */
* html .fullimage-theme #main { height: 780px; }
.googlemaps-theme       #main { margin-bottom: 200px; }  /* 120px + footer. */

/* IE6+7 fixes */
* html .googlemaps-theme #main { background-color: #fff; }
*+html .googlemaps-theme #main { background-color: #fff; }


/* -------- header -------- */

#header {
  height: 120px;
  overflow: auto;  /* for h1 margin */
  width: 720px;
}

#header h1 {
  margin: 46px 0 0 120px;
  
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
}

#header h1 span {
  background-color: #FDD600;
  padding: 1px;
}

#header h1 a {
  color: #333;  /* IE6 */
  text-decoration: none;
}

hr {
  display: none;
}

#contents hr {
  display: block;
}


/* -------- menu -------- */

#menu {
  position: fixed;
  left: 0;           /* IE7 needs this */

  width: 100px;
  margin: 100px 10px 0 10px;
  padding-top: 20px;
  z-index: 2;
  vertical-align: baseline;
}

* html #menu { position: absolute; top: 0; }   /* IE6 has no fixed support */

#menu ul {
  list-style: none;
  position: relative;
}

#menu li {
  font-size: 12px;
  position: relative;
  text-align: right;
  text-transform: uppercase;
}

#menu li.homepage {
  padding-bottom: 20px;
  border-bottom: 1px solid #333;
  margin-bottom: 20px;
}

* html #menu li { height: 1%; }


/* submenu */

#menu li ul {
  position: absolute;
  top: 0;
  left: 120px;
  width: 100px;
  margin-right: 0;
}

#menu li li {
  text-align: left;
}

#menu li a.current {
  font-weight: bold;
}


/* -------- main -------- */

#main {
  position: relative;
  min-height: 300px;
  margin-bottom: 80px;  /* reserved for footer */
  width: 960px;

  line-height: 20px;
  font-size: 12px;
}

* html #main { height: 300px; }

#main a,
.infowindow a {
  color: #333;
  text-decoration: none;
}

#main a:hover,
#main .toc a:hover,
.infowindow a:hover {
  background-color: #00f;
  color: #fff;
}


/* -------- contents -------- */

#contents {
  padding: 20px 0 0 240px;
  z-index: 1;
  padding-bottom: 25px;
  
  min-height: 300px;  /* for absolute menu */
  position: relative; /* for all absolute content */
}


/* -------- variation: horizontal-white -------- */

.hwhite #contents {
  background: #fff url(img/logo-largewhite.gif) no-repeat 0 -120px;
}

.contact .hwhite #contents {
  background-image: none;
}

.hwhite #menu {
  position: absolute;
}


/* -------- variation: vertical-large-white -------- */

.vlwhite #header {
  width: 960px;
  background: #fff url(img/logo-largewhite.gif) no-repeat 0 0;
}

.vlwhite #contents {
  background: #fff url(img/logo-largewhite.gif) no-repeat 0 -120px;
}


/* reasonable defaults */

.vlwhite #contents .entry { max-width: 600px; }
* html .vlwhite #contents .entry { width: 600px; }

.vlwhite .twocols { max-width: 600px; }
* html .vlwhite .twocols { width: 600px; }



/* -------- variation: vertical-white -------- */

/* this is one big IE6 workarround (partially deprecated now that #menu is positioned fixed).
   Ideally, #main provides the white background, and #contents expands outside of it.
   
   Instead:
   - the #sidebar needs to be outside, so #contents needs to float.
   - #contents draws the background, so #menu needs to be absolute so #contents get the whole left space.
   - #main is larger to contain everything, but can't be used for backgrounds anymore.
*/

.vwhite #contents {
  float: left;
  display: inline;
  width: 480px;  /* fits in #main */
  
  background: #fff url(img/logo-largewhite.gif) no-repeat 0 -120px;
}

* html .vwhite .pagetitle { width: 480px; }        /* fix wider contents flash, overflow is already set. */
* html .vwhite #contents .entry { width: 460px; }  /* reset max-width hack */

.vwhite #sidebar {
  margin-left: 10px;  /* at pages with vwhite background */
}

.vwhite #contents .entry {
  margin-right: 20px;  /* like .textcol */
}


/* remaining changes */

.vwhite #header {
  width: 720px;
  background-color: #fff;
  background-image: url(img/logo-largewhite.gif);
}

.vwhite #contents h2.pagetitle {
  /* small #content, prevent to overflow the #sidebar */
  width: 480px;
  overflow: hidden;
}


/* ---- Page title ---- */

#contents .pagetitle {
  /* sub title */
  margin: 0 0 20px 0;
  height: 141px;   /* avoid reflow collapse when replacing the flash header */
}

#contents .pagetitle h2 {
  /* fallback title when no flash is installed */
  font: normal 40px/40px sans-serif;
  color: #777;
  max-width: 600px;
  
  /* border effect. use image as IE6 workaround */
  background-image: url(img/bg-pagetitle.png);
  background-repeat: no-repeat;
  padding: 6px 0 13px 0;
  height: 122px; /* +padding = 141px */
  overflow: hidden;  /* avoid expanding text before switching to flash */
  text-transform: uppercase;
  /* white-space: nowrap; */
}

* html #contents .pagetitle h2 { width: 600px; }
* html #contents .textcol .pagetitle h2 { width: auto; }

#contents .pagetitle h2 a {
  color: #777;
}

#contents .pagetitle h2 a:hover {
  background: none;
  color: #a2a2a2;
}


/* ---- Blue subtitle (blog list, who is who) ---- */

#contents .post h2,
#contents .entry h2,
#tinymce h2 {
  font: normal 18px/20px Georgia, sans-serif;
  margin: 0 0 20px 0;
  color: #0099cc;
}

#contents .post h2 a,
#tinymce h2 a {
  color: #0099cc;
  text-transform: none;
}

#contents .post h2 a:hover {
  color: #000;
  background-color: transparent;
}

#contents span.moreinfo {
  display: block;
  height: 20px;
  margin: 20px 0;
}


/* ---- Basic inline markup ---- */

#contents p,
#tinymce p {
  margin: 0 0 20px 0;
}

#contents a,
#tinymce a {
  color: #00f;
}

#contents ul,
#contents ol,
#tinymce ul,
#tinymce ol {
  /* have some defaults for lists */
  list-style-position: outside;
  padding-left: 20px;
  margin: 0 0 20px 0;
}

blockquote {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 16px;
  margin: 20px 0;
  color: #0099cc;
}

#contents address,
#tinymce address {
  font-style: normal;
  margin: 5px 0 15px 0;
}

#contents h3,
#tinymce h3,
.infowindow h3 {
  font-size: 16px;
}

#contents h3,
#tinymce h3 {
  margin: 20px 0 0 0;
  text-transform: uppercase;
}


/* -------- column layouts -------- */

.twocols {
  overflow: auto;    /* also clearfix effect */
  max-width: 720px;
}

* html .twocols { width: 720px; }

.textcol,
.sidecol,
.imgcol,
.contactcol1,
.contactcol2 {
  float: left;
  display: inline;
}

.textcol { width: 340px; margin-right: 20px; }  /* bedrijf pagina */
.sidecol { width: 240px; margin: 0; }
.imgcol  { width: 220px; margin: 0 0 20px 20px; }

.post .textcol { width: 460px; }  /* not set by default, for .textcol in #tinymce */
#contents.bloglist .imgcol { margin-left: 10px; }  /* easiest way to fix */

#contents .sidecol h3,
#tinymce .sidecol h3 {
  margin-top: 0;
}

.contactcol1 { width: 220px; margin-right: 20px; }
.contactcol2 { width: 460px; }


/* -------- image column -------- */

.img {
   position: relative;
   margin-bottom: 10px;
   
   width: 220px;
   height: 160px;
   overflow: hidden;
}

.img .border {
  position: absolute;
  left: 0;
  right: 0;
  width: 218px;
  height: 158px;
  border: 1px solid #ccc;
}

.img .border div {
  position: absolute;
  left: 0;
  right: 0;
  width: 214px;
  height: 154px;
  border: 2px solid #fff;
}


/* -------- project page -------- */

.threecols {
  margin: 20px 0;
}

.expander .threecols { margin-top: 0; }  /* expander already provides top margin */

.threecols .col {
  float: left;
  display: inline;
  width: 220px;
  margin-right: 20px;
}

#contents .threecols ul {
  list-style: none;
  padding-left: 11px;  /* align with #projectcols .col */
}

.threecols ul a {
  color: #333;
}

#projectcols.threecols .col {
  border: 1px solid #ccc;
  padding: 9px;
  width: 200px;
  height: 80px;
}

#otherProjects {
  overflow: hidden;  /* keep margin inside. */
}


/* -------- expander -------- */

.expander {
  margin: 20px 0 26px 0;
  width: 720px;
  
}

.expander .toggle {
  padding-bottom: 3px;
}

.expander .toggle a,
.moreinfo a {
  float: left;
  line-height: 17px;
  vertical-align: middle;
  
  background-image: url(img/expander-icon.png);
  background-repeat: no-repeat;
  padding-left: 26px;
  color: #333;
}

.expander .toggle a { margin-bottom: 20px; }   /* 18 + 5 + 17 = 40 */
.moreinfo a         { margin-bottom: 20px; }

.expander-open .toggle a {
  background-position: 0 100%;
}

.expander .contents {
  clear: left;
  display: none;
  overflow: hidden;  /* during the animation the box has it's own 'block formatting context'.
                        after animation it should stay like that. Otherwise margins collapse. */
}


/* -------- border bottom -------- */

#contents .border-bottom {
  background: url(img/border-entry.png) repeat-x bottom left;
  min-height: 1px;
  margin-bottom: 20px;
}

#contents .border-bottom-short {
  background: url(img/border-entry.png) no-repeat bottom left;  /* diff = no-repeat */
  min-height: 1px;
  margin-bottom: 20px;
}

#contents .line,
#tinymce .line {
  border-top: 1px solid #333;
  width: 720px;
}


/* -------- blog entry -------- */

#contents .post {
  margin-bottom: 20px;
}

#contents.singlepost .entry {
  padding-bottom: 20px;
  margin-bottom: 0;
}

#contents .entry {
  max-width: 720px;
}

* html #contents .entry { width: 720px; }
* html #contents .textcol .entry { width: auto; }

#contents.bloglist .entry {
  overflow: hidden;  /* keep readmore margin inside */
}


/* -------- blog sidebar -------- */

#sidebar.singlepost {
  float: left;
  display: inline;
  width: 220px;
  position: relative;
  margin-top: 20px;
}

#sidebar.bloglist {
  position: absolute;
  left: 730px;
  top: -70px;
}

#sidebar.singlepost #blogPulldowns {
  margin-left: 20px;
  position: absolute;
  top: -90px;
  left: 0;
}

#blogPulldowns select {
  width: 220px;
  margin-bottom: 20px;
}


/* -------- post metadata -------- */

#postmetadata div {
  padding-bottom: 20px;
  background: url(img/border-entry.png) no-repeat bottom left;
}

#respond h3 {
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 100%;
}

h4 {
  margin-bottom: 20px;
}

#postmetadata h4 {
  margin: 0;
}


/* -------- blog comments -------- */

#respond {
  clear: both;
}

#respond .formfield {
  margin-bottom: 20px;
}

#respond .formfield label {
  float: left;
  display: inline;
  width: 120px;
}

#respond .formfield input.text {
  vertical-align: bottom;
  width: 320px;
}

#respond textarea {
  width: 440px;
}

#comments ol.commentlist {
  list-style: none;
  padding-left: 0;
  clear: both;
}


/* -------- wordpress contents -------- */

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
   display: inline;
   margin: 0 10px 10px 0;
}

.alignright {
   float: right;
   display: inline;
   margin: 0 0 10px 10px;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}


/* -------- Metadata -------- */

dl.metadata {
  overflow: auto;  /* new container for floats */
  margin-bottom: 20px;
}

.metadata dt {
  float: left;
  clear: left;
  display: inline;
  width: 100px;
  padding: 0 20px 20px 0;
  background: url(img/border-entry.png) no-repeat bottom left;
}

.metadata dd {
  margin: 0 20px 0 120px;
  padding-bottom: 20px;
  background: url(img/border-entry.png) no-repeat bottom left;
}


/* -------- homepage / table of contents -------- */

.toc {
  text-transform: uppercase;
  overflow: auto;
}

.toc dd {
  font-size: 16px;
  margin-bottom: 15px;
}

#main .toc a {
  color: #333;
}

/* reset links */
#main .toc dd.tags         { font-size: 12px; }
#main .toc dd.tags a       { color: #00f; }
#main .toc dd.tags a:hover { color: #fff; }


/* pagetitle prefix */

.home #contents .pagetitle {
  background: url(img/bullets-pagetitle-home.png) no-repeat 0 55px;
  margin-left: -36px;
  padding-left: 36px;
}


/* bullets outside */

.home .toc {
  margin-left: -16px;
}

.home .toc dt,
.home .toc dd {
  padding-left: 16px;
}

.home .toc dd {
  background: url(img/bullets-toc-home.png) no-repeat 0 50%;
}


/* -------- contact, google maps -------- */

#googlemaps {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 80px;
  
  background-color: #e5e3df;
}

* html #googlemaps {
  width: 100%;
  height: 100%;
}

#googlemaps.incompatible {
  display: none;
}

#augerDirectionsPanel {
  display: none;
  width: 460px;

  font-size: 12px;
  z-index: 99;
  overflow: auto;  
  background-color: #fff;
}

#augerInfoWindowTemplate {
  display: none;
}

.infowindow {
  padding-right: 12px;
  /* can't use #googlemaps prefix, balloon size is calculated outside that div. */
}

.infowindow h3 {
  margin: 0 0 6px 0;
}

.infowindow address {
  font-size: 12px;
}


/* -------- contact, contents -------- */

#contactpage h3 {
  margin: 0;
}

#contactpage form h3 {
  margin: 0 0 20px 0;
}

#contactpage h3.phonenumber {
  margin-top: 40px;
}

form .hint {
  color: #999;
}

form .error {
  color: #f00;
}

form .submit {
  background: #fff;
  border: 1px solid #00f;
  color: #00f;
}


/* ---- Slide up effect ---- */

#slideUpButton {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 960px;
  
  text-align: center;
  display: none;   /* hide until googlemaps is loaded */
}

#slideUpButton a {
  display: block;
  height: 18px;
  font-size: 0;
  line-height: 0;
  background: url(img/slider.png) no-repeat 0 100%;
}

.slided-up #slideUpButton a {
  /* different background */
  background-position: 0 0;
}

.slided-up #contents h2.pagetitle {
  overflow: hidden;   /* prevent scrollbars when the title is hidden */
}

html.jsenabled .googlemaps-theme #slideUpButton {
  display: block;
}


/* ---- directions ---- */

#contactpage .expander {
  border: 0;
  margin: 0;
  padding: 0;
  width: auto;
}

#routeForm .text {
  width: 260px;
}

#showDirectionsLink { display: none; }


/* -------- footer -------- */

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #FFDB01 url(img/bg-yellow-grid.png) repeat-y;
  overflow: hidden;
}

#footerContents {
  width: 1201px;
  min-height: 80px;
  background: #FFDB01 url(img/bg-footer.gif) no-repeat;
}

* html #footerContents { height: 80px; }

#footer span {
  position: relative;
  left: 120px;
  top: 5px;
  
  font-size: 12px;
  line-height: 20px;
  vertical-align: bottom;
  text-transform: uppercase;
}


/* -------- print CSS -------- */

@media print {

  #wrapper #header,
  #wrapper #googlemaps,
  #wrapper #menu,
  #wrapper #routeForm,
  #wrapper #slideUpButton {
    display: none;
  }
  
  #wrapper #main {
    min-height: 0;
    height: auto;
    margin-bottom: 40px;
  }
  
  #wrapper #footerContents {
    min-height: 0;
    height: auto;
  }
  
  #wrapper .twocols {
    overflow: visible;  /* overflow: auto forces content at a new page in Firefox 3.5 */
  }
  
  #wrapper #footer span {
    left: 0;
  }
  
  #wrapper #contents {
    padding-left: 0;
    padding-bottom: 0;
  }

}