/******************************

thuswonen.nl
TRES internet (c) 2009

******************************/
/******************************
RESET
******************************/

	html, body, div, span, applet, object, iframe, table, caption, tbody,
	tfoot, thead, tr, th, td, del, dfn, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd,
	ol, ul, li, fieldset, form, label, legend {
		vertical-align: baseline;
		font-family: inherit;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		outline: 0;
		padding: 0;
		margin: 0;
		border: 0;
	}

	*:focus { outline: none; }
	body { line-height: 1 }
	ol, ul {list-style: none; }
	table { border-collapse: separate; border-spacing: 0; }
	caption, th, td { font-weight: normal; text-align: left; }
	a img, :link img, :visited img { border: none; }
	iframe { background: transparent; }
	input, select { vertical-align: middle; }
	strong { font-weight: bold; }

	div.clear { clear: both; width: 100%; height: 0px; overflow: hidden; float: none !important; }


/******************************
LAYOUT
******************************/

	body {
		/*background: #e20738;*/
		background: #ffffff url("../images/bgbody.gif") left bottom repeat-x;
	}

	#container {
		width: 100%;
		position: relative;
		z-index: 2;
		}

	#framework {
		width: 100%;
		}

	#framework .framecol1 {
		display: inline;
		overflow: hidden;
		height: 100px;
		}

	#framework .framecol2 {
		width: 1001px;
		margin: 0 auto;
		display: block;
		}

	#framework .framecol3 {
		background: #ffffff url("../images/right.png") repeat-x left top;
		display: inline;
		overflow: hidden;
		}

	.framecol2 {
		background: #fff;
		}

	.framecol3 {
		position: absolute;
		z-index: 0;
		right: 0;
		top: 24px;
		width:50%;
		height: 62px;
		background-color: #06b4d4;
		display: inline;
		overflow: hidden;
		}

	#logo {
		margin: 0 0 0 50px;
		float: left;
		background: #fff;
	}

	#menu {
		margin: 24px 0 0 0;
		float: right;
		background: #06b4d4 url("../images/menu.png") no-repeat left top;
		height: 22px;
		padding: 25px 40px 15px 35px;
		font-size: 14px;
		position: relative;
		display: inline;
	}

	#menu li {
		float: left;
		display: inline;
		padding: 0 10px;
	}

	#menu a {
		position: relative;
		display: block;
		color: #ffffff;
		text-decoration: none;
	}

	#menu li a:hover {
	}

	#menu li a .arrow {
		display: none;
		background: url("../images/menuSelected.png") no-repeat center bottom;
		width: 30px;
		height: 20px;
		position: absolute;
		left: 50%;
		margin-left: -15px;
		bottom: -34px;
	}

	#menu li.selected .arrow {
		display: block;
	}

	#menu li a:hover .arrow {
		display: block;
	}


	#left {
		float: left;
		width: 175px;
		background: #eaf7fa;
		overflow: hidden;
		display: inline;
		position: relative;
		clear: both;
		line-height: 16px;
	}

	#submenu {
		 background: #33b2d2 url("../images/submenu.png") no-repeat left bottom;
		 padding: 15px 5px 15px 4px;
		 color: #ffffff;
	}

	#submenu a {
		color: #ffffff;
		text-decoration: none;
	}

	#submenu .subsubmenu a:hover {
		text-decoration: underline;
	}

	#submenu div.submenu {
		font-size: 15px;
		padding: 5px 0 5px 6px;
		overflow: hidden;
		line-height: 20px;
	}

	#submenu>ul>li.selected {
		background: #45c2e1 url("../images/submenuSelectedTop.png") no-repeat left top;
		min-height: 25px;
	}

	#submenu .subsubmenu {
		list-style: disc inside;
		padding: 0 0 8px 0;
		background: url("../images/submenuSelectedBottom.png") no-repeat right bottom;
	}

	#submenu .subsubmenu li {
		padding: 2px 0 0 10px;
	}

	#submenu .subsubmenu li.selected {
		font-weight: bold;
	}

	#leftContent {
		padding: 13px 10px 5px 13px;
		color: #605d5d;
	}

	#leftContent .subtitle {
		color: #06b4d4;
		font-size: 14px;
	}

	#leftContent a {
		color: #06b4d4;
		text-decoration: none;
	}

	#leftContent a:hover {
		color: #605d5d;
		text-decoration: underline;
	}

	#leftFooter .top {
		width: 175px;
		height: 20px;
		background: url("../images/leftFooter.png") no-repeat left top;
		position: absolute;
	}

	#leftFooter .bottom {
		width: 175px;
		height: 17px;
		background: url("../images/leftFooterBottom.png") no-repeat left top;
		position: absolute;
		bottom: 0;
	}

	#content {
		float: left;
		width: 566px;
		padding: 5px 10px;
		overflow: hidden;
		display: inline;
	}

	#breadcrumb {
		color: #b0b1ae;
		padding: 0 0 15px 0;
	}

	#right {
		float: left;
		width: 229px;
		margin: 15px 0 0 0;
		padding: 0 0 35px 10px;
		border: 1px solid #a3dceb;
		border-width: 0 0 0 1px;
		overflow: hidden;
		display: inline;
	}

	#header {
		float: left;
		clear: both;
		background: #fff;
		height: 160px;
	}

	#header img{
		float: left;
		display: inline;
	}

	#payoff {
		float: right;
	}

	#footer {
		clear: both;
		width: 100%; height: 41px;
		background: url("../images/footer.png") repeat-x;
	}

/******************************
TYPO
******************************/

	body {
		font-family: Verdana;
		font-size: 11px;
	}

	a {
		color: inherit;
		text-decoration: underline;
	}

	#content {
		line-height: 16px;
	}

	#content a {
		color: #eb202c;
		text-decoration: underline;
	}

	#content a:hover {
		color: #06b4d4;
	}

	#breadcrumb a {
		color: #b0b1ae;
		text-decoration: none;
	}

	#breadcrumb a:hover {
		color: #000000;
		text-decoration: underline;
	}

	#content h1 {
		font-size: 18px;
		color: #06b4d4;
		padding: 0 0 12px 0;
	}
	#content UL{padding-bottom:12px}

	#content h2 {
		font-size: 16px;
		color: #06b4d4;
		padding: 0 0 2px 0;
	}

	div.paragraph {
		padding: 0 0 15px 0;
	}

	div.paragraph .top {
		display: none;
	}

	div.paragraph.background {
		padding: 0 10px 20px 10px;
		background: #eaf7fa url("../images/paragraphBottom.png") no-repeat left bottom;
		margin: 5px 0 15px 0;
	}

	div#content div.paragraph.background{
		width: 542px;
		}

	div.paragraph.background .top {
		display: block;
		background: url("../images/paragraphTop.png") no-repeat right top;
		width: 542px;
		height: 19px;
		padding: 0 0 0 10px;
		position: relative;
	}

	div.descriptionImage {
		float: right;
		padding: 0 0 10px 10px;
	}

	div.description {
		padding: 0 0 15px 0;
	}

	#right {
		line-height: 16px;
	}

	#right h3, h3 {
		color: #06b4d4;
		font-size: 14px;
		padding: 0 0 5px 0;
		position: relative;
	}

	h4 {
		font-size: 14px;
		color: #000000;
	}

	#right a {
		color: #000000;
		text-decoration: underline;
	}

	#right a:hover {
		color: #06b4d4;
	}

	#right a.readMore, a.readMore {
		margin: 5px 0 0 0;
		display: block;
		padding: 0;
		background: url("../images/leesVerder.png") no-repeat left top;
		height: 16px;
		width: 77px;
	}

	#right a.readMore:hover, a.readMore:hover {
		background-position: left bottom;
	}

	#right .article {
		padding: 0 5px 5px 5px;
		margin: 0 0 15px 0;
		position: relative;
	}

	#right .article.background h3 {
		padding: 15px 0 5px 0;
	}

	#right .article.background {
		background: #eaf7fa url("../images/rightArticleBottom.png") no-repeat right bottom;
		padding: 0 5px 15px 5px;
	}

	#right .article.background .top {
		background: url("../images/rightArticleTop.png") no-repeat left top;
		width: 100%;
		height: 18px;
		position: absolute;
		margin: 0 0 0 -5px;
	}

	#right .item {
		padding: 0 0 15px 0;
	}

	div.onderschrift {
		padding: 5px 0 12px 0;
		font-style: italic;
		color: #06B4D4;
	}

	#footerMenu {
		clear: both;
		position: absolute;
		bottom: -20px;
		line-height: 20px;
	}

	#footerMenu a {
		color: #e20738;
		text-decoration: none;
		padding: 0 15px 0 0;
	}

	#footerMenu a:hover {
		color: #33b2d2;
	}

/******************************
FORMULIER
******************************/

	#content .formulier h2 {
		padding: 0 0 15px 0;
	}

	.formulier .form {
		margin: 0 0 0 3px;
		padding: 0 15px 0 15px;
		border: 1px solid #bade3f;
		border-width: 0 1px;
	}

	.formulier .top {
		width: 100%;
		height: 28px;
		background: url("../images/formTop.png") no-repeat top right;
	}

	.formulier .bottom {
		width: 100%;
		height: 28px;
		background: url("../images/formBottom.png") no-repeat top right;
	}

	table.formulier input {
		background: #fff;
		background-image: none;
		padding: 1px 5px;
		height: 14px;
		border: 1px solid #06B4D4;
		width: 286px;
		margin: 0 0 5px 0;
	}

	div.actualForm input.invalid {
		background: #fff;
		background-image: none;
		padding: 1px 5px;
		height: 14px;
		border: 1px solid #ff0000;
		width: 286px;
		margin: 0 0 5px 0;
	}

	.formulier input.checkbox, .formulier input.radio {
		width: 20px;
	}

	table.formulier select, select {
		margin: 0 0 5px 0;
		border: 1px solid #06B4D4;
		height: 20px;
	}

	table.formulier hr {
		height: 1px;
		border: 0;
		color: #B1D398;
		background-color: #B1D398;
	}

	.formulier div.label,
	.actualForm div.label{
		width: 200px;
		float: left;
		clear: both;
		padding: 0 0 5px 0;
	}

	.actualForm div.value {
		width: 300px;
		float: left;
		padding: 0 0 5px 0;
	}

	.formulier input.continue {
		background: url("../images/formContinue.png") no-repeat left top;
		width: 100px;
		height: 20px;
		border: 0;
		cursor: pointer;
		float: right;
		display: inline;
		outline: 0;
		margin-top: 10px;
	}

	.formulier input.continue:hover {
		background-position: left bottom;
	}


	.formulier div.value,
	.formulier div.value1,
	.formulier div.value2,
	.formulier div.value3{
		/*margin: 0 0 5px 0;*/
	}

	.formulier div.value4{
		height: 22px;
		margin: 0 0 5px 0;
	}

	span.verplicht {
		font-size: 9px;
		color: #06B4D4;
	}


	/*INPUT*/
	.value1 input,
	.value2 input,
	.value3 input,
	.value input{
		float: left;
		display: inline;
		font: normal 11px/12px Verdana, Arial, sans-serif;
		background: #fff url("../images/bg_input1.jpg") left top no-repeat;
		width: 70px;
		height: 16px;
		padding: 6px 6px;
		border: 0;
	}

	.value input.radio,
	.value input.checkbox{
		float: none;
		display: inline;
		background: none;
		width: 16px;
		height: 16px;
		position: relative;
		top: 0;
		left: 2px;
	}

	.value2 input{
		background: #fff url("../images/bg_input2.jpg") left top no-repeat;
		width: 200px;
	}

	.value3 input{
		background: #fff url("../images/bg_input3.jpg") left top no-repeat;
		width: 286px;
	}

	.value input{
		background: #fff;
		background-image: none;
		padding: 1px 5px;
		height: 14px;
		border: 1px solid #06B4D4;
		width: 286px;
	}

	.value1 input.invalid{
		background: #fff url("../images/bg_input1_invalid.jpg") left top no-repeat;
		color: #ff0000;
	}

	.value2 input.invalid{
		background: #fff url("../images/bg_input2_invalid.jpg") left top no-repeat;
		color: #ff0000;
	}

	.value3 input.invalid{
		background: #fff url("../images/bg_input3_invalid.jpg") left top no-repeat;
		color: #ff0000;
	}

	.value textarea{
		float: left;
		display: inline;
		font: normal 11px/12px Verdana, Arial, sans-serif;
		background: #fff;
		border: 1px solid #06B4D4;
		width: 286px;
		height: 80px;
		padding: 2px 6px;
		margin: 0 0 2px;
		resize: none;
		overflow: auto;
	}

	/*SELECT*/
	span.select{
		position: absolute;
		width: 63px;
		height: 25px;
		padding: 0 24px 0 8px;
		color: #000;
		font: 11px/25px verdana, arial,sans-serif;
		background: url("../images/select.jpg") no-repeat;
		overflow: hidden;
		cursor: pointer;
	}

	.value select{
		position: absolute;
		width: 298px;
		height: 20px;
		line-height: 20px;
		padding: 2px 0 0 0;
		margin: 0;
		color: #000;
		font: 11px/25px verdana, arial,sans-serif;
		overflow: hidden;
		cursor: pointer;
	}

	option{
		font-size: 11px;
		font-family: verdana, arial,sans-serif;
	}


	input.submitbutton, table.formulier input.button {
		float: right;
		display: inline;
		margin: 10px 65px 10px 0;
		padding: 3px 0;
		background: #06B4D4;
		font-size: 11px;
		font-family: verdana, arial, sans-serif;
		font-weight: bold;
		text-align: center;
		color: #fff;
		border: 0;
		outline: 0;
		cursor: pointer;
		height: 22px;
	}

	input.submitbutton:hover{
		background: #bdd73d;
		}

/******************************
CATALOGUS
******************************/

	.productDivider {
		clear: both;
		width: 550px;
		height: 1px;
		border-bottom: 1px solid #b1d398;
		padding: 2px 0 0 0;
		margin: 0 0 14px 0;
	}

	.producten .col1, .producten .col2, .producten .col3, .producten .col4, .producten .col5 { float: left; display: block; overflow: hidden; }
	.producten .col1 { width: 140px; }
	.producten .col2 { width: 275px; }
	.producten .col3 { width: 125px; }

	.producten.header {
		margin: 10px 0 0 0;
		font-weight: bold;
	}

	.producten.header .col2 {
		color: #000000;
		font-size: 11px;
	}

	.producten.header .col3 {
		height: 20px;
	}

	#content .producten a {
		color: #33b2d2;
		text-decoration: none;
	}

	#content .producten a:hover {
		text-decoration: underline;
		color: #EB202C;
	}

	.producten .col2 {
		color: #33b2d2;
		padding: 5px 0 0 0;
		font-size: 10px;
	}

	.producten .col2 table {
		margin: 5px 0 0 0;
	}

	.producten .col2 table td {
		padding: 0 8px 0 0;
	}

	.producten .col3 {
		position: relative;
		height: 100px;
		padding: 0 5px 0 0;
	}

	.producten a.moreInformation {
		display: block;
		width: 75px;
		height: 10px;
		background: url("../images/meerInfo.png") no-repeat left top;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.producten a.moreInformation:hover {
		background-position: left bottom;
	}

	.huurwoningen {
		font-family: Arial;
		font-size: 11px;
	}


	.huurwoningen .col1, .huurwoningen .col2, .huurwoningen .col3, .huurwoningen .col4, .huurwoningen .col5 { float: left; display: block; overflow: hidden; font-size: 11px; }
	.huurwoningen .col1 { width: 90px; }
	.huurwoningen .col2 { width: 140px; color: #006FBC; }
	.huurwoningen .col3 { width: 140px; padding: 18px 0 0 0; }
	.huurwoningen .col4 { width: 85px; padding: 18px 0 0 0; }
	.huurwoningen .col5 { width: 75px; padding: 18px 0 0 0; }

	.huurwoningen.header .col2, .huurwoningen.header .col3, .huurwoningen.header .col4, .huurwoningen.header .col5 {
		padding: 0;
	}

	.huurwoningen .col2, .huurwoningen .col3, .huurwoningen .col4, .huurwoningen .col5 {
		padding: 4px 0 0 0;
	}

	.producten.huurwoningen a.moreInformation {
		position: static;
		margin: 3px 0 0 0;
	}

	.producten.huurwoningen .col3 {
		height: 60px;
	}

	.producten.huurwoningen.header .col3 {
		height: 18px;
	}


	/******************************
	ENKELE WONING
	******************************/

	.product {
		padding: 15px 0 10px 0;
		color: #002B54;
	}

	.product table {
		padding: 0 0 25px 0;
	}

	.product table td {
		padding: 0 15px 3px 0;
	}

	.product .col1, .product .col2 { float: left; display: block; overflow: hidden; }
	.product .col1 { width: 250px; }
	.product .col2 { width: 280px; }

	.product.images .col1 { width: 90px; }
	.product.images .col2 { width: 460px; }

	#content .product h4 {
		font-size: 14px;
		color: #002B54;
		padding: 0 0 8px 0;
	}

	#content .product h2 {
		font-size: 14px;
		color: #002B54;
	}

	#content .product h3 {
		font-size: 14px;
		color: #002B54;
		padding: 0 0 5px 0;
	}

	#content .product h4 {
		font-size: 14px;
		color: #002B54;
		padding: 0 0 8px 0;
	}

	.product .image {
		padding: 0 0 10px 0;
	}

	.product.images .thumb {
		cursor: pointer;
	}

	.product .address {
		padding: 0 0 10px 0;
	}

	.product a.fotos {
		display: block;
		width: 135px;
		height: 11px;
		background: url("../images/foto.png") no-repeat left top;
		margin: 5px 0 5px 0;
	}

	.product a.fotos:hover {
		background-position: left bottom;
	}

	.product a.reageren {
		display: block;
		width: 60px;
		height: 11px;
		background: url("../images/reageren.png") no-repeat left top;
		margin: 5px 0 5px 0;
	}

	.product a.reageren:hover {
		background-position: left bottom;
	}

	.product a.terug {
		display: block;
		width: 41px;
		height: 11px;
		background: url("../images/terug.png") no-repeat left top;
		margin: 5px 0 5px 0;
	}

	.product a.terug:hover {
		background-position: left bottom;
	}

/*BROWSER
--------------------------*/
ul.browser{
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;}

	ul.browser li{
		list-style: none;
		margin: 0 0 5px;
		padding: 2px 0;
		line-height: 16px;
		}

		ul.browser li a,
		ul.browser li a:link,
		ul.browser li a:visited{
			padding: 2px 0 2px 20px;
			font-weight: normal;
			text-decoration: none;
			}

		ul.browser li a:hover,
		ul.browser li a:active{
			font-weight: bold;
			text-decoration: none;
			}

		ul.browser li.iexplorer a{ background: transparent url("../images/ie.gif") left 1px no-repeat;}
		ul.browser li.firefox a{   background: transparent url("../images/firefox.gif") left 1px no-repeat;}
		ul.browser li.safari a{    background: transparent url("../images/safari.gif") left 0 no-repeat;}
		ul.browser li.chrome a{    background: transparent url("../images/chrome.gif") left 0 no-repeat;}

ul.sitemap{
	margin: 0 0 0 20px;
	padding: 0;
	line-height: 20px;
	}

	div#content ul.sitemap li{
		padding: 0 0 0 15px;
		margin: 0;
		list-style: none;
		background: transparent url("../images/sitemap.gif") left 4px no-repeat;
		}

		div#content ul.sitemap li a,
		div#content ul.sitemap li a:link,
		div#content ul.sitemap li a:visited{
			text-decoration: none;
			font-weight: bold;
			color: #333;
			}

		div#content ul.sitemap li a:hover,
		div#content ul.sitemap li a:active{
			font-weight: bold;
			color: #06B4D4;
			}

		div#content ul.sitemap li.sub{
			margin-left: 20px;
			}

			div#content ul.sitemap li.sub a,
			div#content ul.sitemap li.sub a:link,
			div#content ul.sitemap li.sub a:visited{
				text-decoration: none;
				font-weight: normal;
				}

			div#content ul.sitemap li.sub a:hover,
			div#content ul.sitemap li.sub a:active{
				}

			div#content ul.sitemap li.subsub{
				margin-left: 40px;
				}

				div#content ul.sitemap li.subsub a,
				div#content ul.sitemap li.subsub a:link,
				div#content ul.sitemap li.subsub a:visited{
					text-decoration: none;
					font-weight: normal;
					}

				div#content ul.sitemap li.subsub a:hover,
				div#content ul.sitemap li.subsub a:active{
					}