/** 
 * template.css 
 * 
 * Sets up the available (template) layouts.
 * 
 * @version			1.1.1
 * @date			2009-08-28
 * @lastmodified	2009-11-24 15:47
 * @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: 2.1em 0; }
.container { background: #fff url(skin/sh_left.png) left top repeat-y; position: relative; margin: 0 auto; min-width: 956px; /*max-width: 95.6em;*/ } 	/* 4 main columns, width: 956px / 10px = 95.6em */
.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 { background: url(skin/sh_right.png) right top repeat-y; padding: 0; position: relative; }
.content_wrapper2 { margin: 0 8px; position: relative; }
.content { padding: 0 4px 50px 24px; position: relative; min-width: 940px; top: -10px; overflow: hidden; }
.footer { background: url(skin/sh_bot.png) left bottom no-repeat; position: relative; }
.footer span { background: url(skin/sh_bot-right.png) right bottom no-repeat; height: 100%; width: 16px; position: absolute; bottom: 0; right: 0; }


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

#login .container { min-width: 516px; max-width: 51.6em; }
#login .content_wrapper2 { border-top: none; }

.container.wide { max-width: 118.4em; }											/* 5 main columns, width: 1184px / 10px = 118.4em */
.container.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 { padding-top: 50px; overflow: hidden; position: relative; }

/* Home template (with and without 'tong') */
.content_main { float: left; width: 98%; }
.content_main.wide,
.content_add { float: none; overflow: hidden; width: auto; } 
.content_supp { float: left; width: 25%; overflow: visible; }

/* Content template */
#content .content_main { left: 25%; }
#content .content_main.wide { width: 75%; }
#content .nav_sub { width: 25%; position: absolute; top: 0; left: 0; }
#content .content_add { width: 25%; left: 25%; }

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

/* Breadcrumb */
.breadcrumb { margin: 0 0 -50px 25%; padding-left: 0; padding-top: 16px; width: 75%; z-index: 999; }
.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, .toolbox:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; }
.clearfix, .nav_main, .nav_bar, .title_bar, .search ul, .visual, .banner, .toolbox { display: inline-block; }
* html .clearfix, * html .nav_main, * html .nav_bar, * html .title_bar, * html .search ul, * html .visual, * html .banner, * html .toolbox { height: 1%; }
.clearfix, .nav_main, .nav_bar, .title_bar, .search ul, .visual, .banner, .toolbox { display: block; }