/** 
 * template.css 
 * 
 * Sets up the available (template) layouts.
 * 
 * @version      1.0.0
 * @date      2009-08-28
 * @lastmodified  2009-09-09 16:34
 * @author      Studio Dumbar (Jonathan van Wunnik)
 * @project      Starters Kit Rijksoverheid
 * @link      http://www.website.com
 * @cssdoc      version 1.0-pre
 *
 */


/** 
 * Drop shadow 
 * 
 * @section      Drop shadow border around canvas area
 */

body { background:#f3f5f6; border-top:1px solid #535353; padding:0; }
#headerwrapper { position: absolute; top: 0px; width: 100%; }
.container { background: #fff url(skin/sh_left.png) left top repeat-y; position: relative; }
.header { background: url(skin/sh_top.png) left top no-repeat; padding: 8px 8px 0 8px; position: relative; }
.header span { background: url(skin/sh_top-right.png) right top no-repeat; height: 100%; width: 16px; position: absolute; top: 0; right: 0; }
.content_wrapper1, .c1 { background: url(skin/sh_right.png) right top repeat-y; padding: 0; position: relative; }
.content_wrapper2, .c2 { margin: 0 18px; position: relative; }
.content { padding:210px 0 0 0; position: relative; }

.container,
.header, .header span,
.content_wrapper1, .c1 { background:#fff; padding:0; }

.footer{ 
  background:#eaebee;
  padding:0;  position:relative;
  overflow:auto; width: 100%;
}

.footer .ref {
  background:#fff url("../images/logos/footer_bg.png") no-repeat center bottom;
  border-bottom:3px solid #4e4e4e; 
  display:block; height:30px; width:100%;
}

/** 
 * Containers
 * 
 * @section      Header, content and footer
 */

.container { margin:auto; width:100%; max-width: 980px; }   /* 4 main columns, width: 956px / 10px = 95.6em */
#login .container { min-width: 516px; max-width: 51.6em; }
#login .content_wrapper2 { border-top: none; }

.wide { max-width: 118.4em;}                      /* 5 main columns, width: 1184px / 10px = 118.4em */
.wider { max-width: 142.2em; }                      /* 6 main columns, width: 1412px / 10px = 142.2em */

.container.fixed { margin: 0 auto; width: 956px; }
.wide.fixed { width: 1184px; }
.wider.fixed { width: 1422px; }

.liquid { margin: 0 20px; max-width: 100%; }    /* max. possible width in given browser window */


/** 
 * Templates
 * 
 * @section      Styles for different template layout configurations
 * @note      Don't mix 'template' and 'grid' styles, although it's possible
 *          to nest 'grid' styles inside 'template' styles (not the other way around!)
 */

.content_main,
.content_add,
.content_supp,
.nav_sub,
.breadcrumb { overflow:hidden; position:relative; }

/* Home template (with and without 'tong') */
.content { overflow: hidden; }
.content_main { float: left; max-width:50%; width: 100%; padding-right:20px; }

.content_supp { float: left; width: 25%; }
.content_main.wide,
.content_add { float: none; overflow: hidden; width: auto;}

/* Content template */
.full {max-width:100%; width: 100%;}
#content .content_main { left: 25%; }
#content .content_main.wide { width: 75%; max-width: 75%;}
#content .nav_sub {  width: 23%; position: absolute; top: 212px; left:0px; }
#content .content_add { max-width:25%; width: 100%; left: 25%; }

/* Login template (smaller content area) */
#login .content_main { width: 100%; }

/* Breadcrumb */
.breadcrumb { margin: -34px 0 0 25%; padding-left: 0; width: 75%; z-index: 10; }
.breadcrumb.left { float: none; margin-left: 0; }
.breadcrumb p { padding: 0 24px 0 0; }


/** 
 * Miscellaneous
 * 
 * @section      Handy miscellaneous box styling classes
 */

.first { margin-left: 0; padding-left: 0; }
.last { margin-right: 0; padding-right: 0; }

.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }

.left { float: left; }
.right { float: right; }

.margin_top_5 { margin-top: 5em; }
.margin_top_3 { margin-top: 3em; }


/** 
 * Clearing floats 
 * 
 * @section      Clear floated elements
 * @see        Clearing floats, ttp://sonspring.com/journal/clearing-floats
 *          Easy clearing, http://www.positioniseverything.net/easyclearing.html
 */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:after, .nav_main:after, .nav_bar:after, .title_bar:after, .search ul:after, .visual:after, .banner:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; }
.clearfix, .nav_main, .nav_bar, .title_bar, .search ul, .visual, .banner { display: inline-block; }
* html .clearfix, * html .nav_main, * html .nav_bar, * html .title_bar, * html .search ul, * html .visual, * html .banner { height: 1%; }
.clearfix, .nav_main, .nav_bar, .title_bar, .search ul, .visual, .banner { display: block; }