/**
* This stylesheet is for all layout styles
* version 1.0 - feb 2010
* copyright info.nl Amsterdam
*
* index:
* Grid
* Header & logo
* Navigation
*/

/* Grid
------------------------------------------------------------------------ */
	/* 
		basis grid 
		4 koloms grid
	*/
	#page {margin:0 auto; padding-left:20px; position:relative;  width:960px;}

	#header {height:110px;}
		#header.no-sub {height:78px;}
	
	#contentwrapper {width:100%; overflow:hidden; clear:left;}
	#maincontent {float:left; width:720px;}
	
	.wrapper {float:left; width:100%; overflow:hidden;}
	.wrapper-two {float:left; overflow:hidden; width:480px;}
	.wrapper-three {float:left; overflow:hidden; width:720px;}
		.wrapper-two.right, .wrapper-three.right, #maincontent.right {float:right;}
	
	.columns-two-var {overflow:hidden;}
		.columns-two-var .column {width:340px;}
		.columns-two-var div.hr {clear:both; height:5px; width:700px; background:transparent url('../../images/Vestia.Branding/lines/dot3_grey_h.gif') repeat-x scroll 0 bottom;}
	.columns-four {width:940px;}
		#maincontent .columns-four {width:720px;}
			#maincontent .columns-four .column {width:160px;}
	.columns-three {width:700px;}
	.basis .columns-two {width:460px;}
	.column {float:left; margin-right:20px; width:220px;}
		.column.form-steps {margin-right:0; width:240px;}
	
	#aside {}
	
	/* 
		variant grid 
		Grid met twee brede kolommen en 1 smalle
	*/
	.variant #maincontent .column {float:left; margin-right:20px; width:340px;}
	.variant .columns-two {float:left; width:700px;}
	

/* header & logo
------------------------------------------------------------------------ */
#header #topheader {background:url('../../images/Vestia.Branding/lines/dot_grey_h.gif') 0 bottom repeat-x; height:72px; position:relative; width:100%; padding-bottom:1px;}
#header #logo {float:left; padding:20px 5px 0 0; width:134px; background:url('../../images/Vestia.Branding/lines/dot_h60_gradient.png') right bottom no-repeat;}
	#header #logo a:hover, #header #logo a  {background:none; cursor:pointer;}
	#header #logo h1 span {position:absolute; left:-999px;}
	#header #logo h1 {height:52px; background:url('../../images/Vestia.Branding/logos/logo.png') left 5px no-repeat}

/* navigatie 
------------------------------------------------------------------------ */
#nav-main ul li, #nav-sub ul li {float:left; list-style:none; margin-left:0; position:relative; z-index:100; line-height:1em;}
	#nav-sub ul li a span.nav {background:url('../../images/Vestia.Branding/nav/dots_subnav.png') no-repeat 0 6px; padding: 7px 8px; display:block;}
		#nav-sub ul li a:hover span.nav {background:none;}
		#nav-sub ul li.first a span.nav, #nav-sub ul li.active a span.nav, #nav-sub ul li.after a span.nav, #nav-sub ul li a span.clean {background:none;}
#nav-main ul li, #nav-sub ul li {float:left; list-style:none; margin-left:0; position:relative; z-index:100; line-height:1em;}
	#nav-sub ul li a span.nav {background:url('../../images/Vestia.Branding/nav/dots_subnav.png') no-repeat 0 6px; padding: 7px 8px; display:block;}
		#nav-sub ul li a:hover span.nav {background:none;}
	#nav-main ul li a, #nav-sub ul li a {color:#333; display:block; font-weight:bold; padding:9px 8px 9px; position:relative; text-decoration:none; z-index:150; background:url('../../images/Vestia.Branding/nav/bg_mainnav_grad.png') repeat-x 0 0;}
		#nav-main ul li a.active, #nav-sub ul li a.active {color:#fff; font-weight:bold; background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat-x 0 bottom;}
#nav-main {position:absolute; left:159px; top:0px; height:72px; z-index:200;}
#nav-main ul {position:relative; left:0; top:43px; z-index:130;}
	#nav-main ul li a:focus, 
	#header ul li a:active {background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat-x;color:#fff;background-position:0 bottom !important;}
	#nav-main ul li a:hover {color:#fff; background-position:0 -70px; border-bottom:1px solid #444;}
		#nav-main ul li a.active span {background:url('../../images/Vestia.Branding/nav/arrow_down.gif') no-repeat; height:5px; position:absolute; left:50%; margin-left:-5px; bottom:-6px; width:10px; z-index:101;}
	#nav-main ul li a.active {background:url('../../images/Vestia.Branding/nav/bg_mainnav_grad.png') repeat-x 0 -68px; color:#fff; border-bottom:1px solid #444;}
	#nav-main ul li a.current  {background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat-x 0 0; color:#fff; border:none;}
		#nav-main ul li a.current:hover {border:0;}
		#nav-main ul li a.current span {background:none}
		
#nav-sub {height:24px; width:100%; display:block; padding-bottom:1px; position:absolute; top:72px; width:940px; z-index:150; background:url('../../images/Vestia.Branding/nav/bg_subnav_bar.png') repeat-x left bottom;}
	#nav-sub ul {height:25px; background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat 0 -28px; padding-bottom:0;}
		#nav-sub ul li a {color:#fff; padding:0; font-weight:normal; background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat 0 -28px;}
		#nav-sub ul li a:focus, #nav-sub ul li a:active {background:url('../../images/Vestia.Branding/nav/bg_nav_grad.png') repeat-x;color:#fff;background-position:0 bottom !important;}
		#nav-sub ul li a:hover {background-position:0 -90px;}
			#nav-sub ul li a.active span span {background:url('../../images/Vestia.Branding/nav/arrow_down.gif') no-repeat; height:5px; position:absolute; left:50%; margin-left:-5px; bottom:-5px; width:10px; z-index:101;}

#nav-content li {list-style:none; margin:0;}			
	#nav-content li a {display:block; padding:7px 9px; background:transparent url(../../images/Vestia.Branding/lines/dot_grey_h.png) repeat-x scroll 0 bottom; }
	#nav-content li a:hover {color:#333;}
	
	.enlarge #nav-sub {height:25px; top:73px;}
	.enlarge #header #topheader {height:73px;}
	
	.largest #nav-sub {height:28px; top:74px;}
	.largest #header #topheader {height:74px;}