/*-----------------------------------------------------------------------------
Main Stylesheet

auteurs:    johan harteveld - Fundament All Media B.V.
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  margin: 0;
  padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
  margin: 1em 0;
}

body, html {
  width:100%;
  height:100%;
}

html {

}

img {  border: 0; margin: 0;}

/* =Typography
-----------------------------------------------------------------------------*/
html {
  background: #486eb0 url("../gfx/algemeen/htmlback.gif") repeat-y center top fixed;
}

body {
  background: url("../gfx/algemeen/bodyback.gif") repeat-x left top;
  font: 12px/1.6  Arial, Helvetica, "Trebuchet MS", Tahoma, Verdana, sans-serif;
  color: #524d3f;
}

ul {
  list-style: none;
}


h1 {
  font-size: 14px;
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:12px;
}

h2 {
  font-size: 12px;
  margin-top:25px;
  margin-bottom:0px;
  margin-left:26px;
}

h3 {
  font-size: 12px;
  margin-bottom: 0em;
  color: #000;
  margin-left: 26px;
}

p {
  margin:0 0 6px 26px;
  font-size:12px;
  padding-right: 19px;
  line-height:1.8;
}

hr {
  height: 1px;
  background-color: #ddd;
  color: #ddd;
  border: none;
  padding: 0;
  margin: 1em 0;
}

sup {
  vertical-align: baseline;
  position: relative;
  bottom: 0.33em;
}

/* display none */
.display_none {
	display: none;
}


/* =Links
-----------------------------------------------------------------------------*/

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

.content a:hover {
  color: #b2b2b2;
  text-decoration:none;
}

/* =Layout
-----------------------------------------------------------------------------*/

/* gehele pagina */

.container {
  width: 905px;
  height: 100%;
  margin: 0 auto;
  background:url("../gfx/algemeen/containerback.jpg") no-repeat;
}


/* in container een content_wrap waarin header, menu content en rolmpopsen */

.content_wrap {
  width: 902px;
  position: relative;
}
/*
header z-index 1
*/

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 902px;
  height: 94px;
  z-index: 1;
}

.header .interesse {
	position: absolute;
	left: 672px;
	top: 25px;
	width: 128px;
	height: 51px;
}

.header .interesse img {
	margin: 0;
	border: 0;
}


/* de content */

/* menuholder, rolmopsen, rolmops_shadows, content en content_shadows komen onder header, dus top: = hoogte header + 4 pixels marge */

.rolmopsen_spiegeling, .content_spiegeling, .rolmopsen, .menuholder, .content   {
  position: absolute;
  left: 0;
  top: 85px;
}

/*
rolmopsen_shadows z-index 2 ( onder menu en content en rolmopsen )
content_shadows z-index 3 ( onder rolmopsen, menu, content )
rolmopsen z-index 4 ( onder menu )
menuholder z-index 5,
content z-index 6 ( content dus over menu heen )
*/

.rolmopsen_spiegeling {
  z-index: 2;
}

.opacity_ophalf {
  -moz-opacity: .4;
  filter: alpha(opacity=40); 
  opacity: .4;
}

.content_spiegeling {
  z-index: 3;
}

.rolmopsen {
  z-index: 4;
}


.menuholder {
  width: 95px;
  height: 480px;
  left: 24px;
  z-index: 5;
  /*border: 1px solid white;
  overflow: hidden;*/
}
/* rest van menu, wat in menuholder komt, staat in menu.css */
/* default left top van de content div, deze wordt overschreven door de id van contentContainer */
/* bv contentContainer heeft id woningenpage #woningpage heeft een specifieke left top */
/* id left top wordt de left top van de content page */
.content {
  z-index: 4;
  left: 120px;
  top: 100px;
  background-color: #fff;
	border: 1px solid white;
}

/*.content_border {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  border: 1px solid white;
  z-index: 3;
}*/

/*
in content komt om de apply template een div class contentpage, met daarin de content van paginas 
de pagina.xsl geeft aan root.xsl variabele mee pageType zodat de div met class 'content' nog id krijgt 
met de id kan een specifiekere styling per pagina meegegeven worden
inhoud ( left top ) staat ten opzichte van de content
middels pageType = id van div, wordt left top binnen pagina gegegeven
*/

/* default lay-out van de contentContainer */
/* als je in de div contentContainer een id plaatst en die id style-t dan overschrijft die styleing de default */

.contentContainer {
  width: 801px;
  /*height: 550px;*/
  background-color: #fff;
  overflow: visible;
}

.contenttext {
  padding: 30px;
}

.emptyContentContainer {
  position: absolute;
  width: 500px;
  height: 450px;
  background-color: #fff;
  overflow: auto;
}

.emptyContentText {
  width: 420px;
  height: 370px; 
  padding: 30px;
}

.content_header {
  position: absolute;
  background-color: #ec0000;
  color: white;
  font-weight: bold;
  height: 20px;
  margin: 0;
  padding-left: 9px;
	border-bottom: 1px solid white;
  cursor: move;
}

.sluitbutton {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0px;
  background:  url("../gfx/algemeen/sluitbutton.gif") no-repeat;
  z-index: 10000;
	cursor: pointer;
	cursor: hand;
}

.sub_menu_header {
	
}


/* specifiekere styling via id, height is alleen content dus exclusief content_header */

/* services */

.service {
	background-color: white;
}

#service_cjs_am {
	width: 500px;
	height: 405px;
}

#service_cjs_nikijr {
	width: 646px;
	height: 402px;
	padding: 20px;
}

/* het project */

#hetproject_page {
  width: 710px;
  height: 450px;
  left: 120px;
  top: 104px;
}

#locatie_txt_page {
  background: #fff url("../gfx/projectback/hetgebouw_bg.jpg") left bottom no-repeat;
  left: 120px;
  top: 104px;
  width: 580px;
  height: 666px;
    color:#fff;
}

#locatie_txt_page a {
  color:#fff;
}


#project_page {
  background: #fff url("../gfx/projectback/hetgebouw_bg.jpg") left bottom no-repeat;
  left: 120px;
  top: 104px;
  width: 685px;
  height: 442px;
}
#project_beschrijving_page {
	width: 685px;
	height: 442px;
	top: 98px;
	overflow: auto;
}
#blokhoevefilm{
 width: 685px;
 height: 442px;
 margin: 0;
 padding: 0;
 overflow: hidden;
} 


#advertentie_page {
  background: #fff url("../gfx/woningen/advertentie.jpg") left bottom no-repeat;
  left: 120px;
  top: 104px;
  width: 740px;
  height: 575px;
}

.advertentie_rechts {
	/*background: #fff url("../gfx/woningen/bg_advertentie_rechts.jpg") left bottom no-repeat;*/
	float: right;
	width: 349px;
	height: 586px;
}

.tekst_links {
	float: left;
	width: 300px;
	margin-top:-13px;
}
.tekst_links p {
font-size: 11px;
width:387px;
	
}
.advertentie_rechts h2 {
	color: #b90c1c;
	font-size:23px;
	margin-top:0;
}
.advertentie_rechts h3 {
	color: #000;
	font-size:11px;
	margin-top:0;
	margin:0 0 0px 18px;
}
.advertentie_rechts p {
  margin:0 0 6px 18px;
  font-size:12px;
  padding-right: 19px;
  line-height:1.3;
}
/*
//Woningen
//
*/


#appartementen_page {
  background: #c6c1b3 url("../gfx/projectback/page_bg.jpg") left bottom no-repeat;
  color:#fff;
  width: 568px;
  height: 575px;
  left: 120px;
  top: 104px;
}

#appartementen_page h1 {
  font-size: 14px;
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:12px;
}


/*------------------------------- hetgebouw_page ---*/
#hetgebouw_page {
  background: #c6c1b3 url("../gfx/projectback/page_bg.jpg") left bottom no-repeat;
  color:#fff;
  width: 512px;
  height: 470px;
  left: 120px;
  top: 104px;
}

#hetgebouw_page h3 {
  font-size: 12px;
  margin-bottom: 0em;
  color: #fff;
  margin-left: 10px;
}

.hp_hetgebouw {
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 200px;*/
  margin-left: 10px;
}

.verdiepingen_slide_1 {
  position: absolute;
  width: 240px;
  height: 252px;
  left:0px;
  top: 26px;
}

.verdiepingen_slide_2 {
  position: absolute;
  width: 240px;
  height: 252px;
  left:250px;
  top: 26px;
}

.top_verdieping {
  margin-top:4px;
}

/*------------------------------- eind hetgebouw_page ---*/


.submenu {
  position: absolute;
  z-index: 10;
}


#downloads_page {
  background: #fff url("../gfx/projectback/page_bg.jpg") left bottom no-repeat;
  width:500px;
  height:400px;
  left: 120px;
  top: 104px;
  /*padding: 15px;*/
}

/*------------------------------- impressies page ---*/
.impressies_slide {
  position:absolute;
  width:587px;
  height:400px;
  top:72px;
  left: 10px;
}

#impressies_page {
  background: #c6c1b3 url("../gfx/projectback/page_bg.jpg") left bottom no-repeat;
  width:605px;
  height:462px;
  left: 120px;
  top: 104px;
  /*padding: 15px;*/
}

#impressies_page h3 {
  font-size: 12px;
  margin-bottom: 0em;
  color: #fff;
  margin-left: 10px;
}


#impressies_page .submenu {
  width: 590px;
  height: 96px;
  margin-left:6px;
}

#impressies_page .submenu h2{
  color: #666;
}

#impressies_page .submenu h3 {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 55px;
  display: block;
  height: 40px;

}

#impressies_page .submenu p {
  color: #fff;
  font-size: 12px;
 /* font-weight: bold;*/
  margin: 0;
  padding: 18px 0 0 10px;
  /*width: 90px;*/
  display: block;
  /*height: 20px;*/
  overflow: hidden;
}

#impressies_page .submenu ul li {
  width: 47px;
  height: 47px;
  float: left;
  margin-left: 2px;
}

#impressies_page .submenu ul li a {
  text-decoration: none;
  font-weight: bold;
}

#impressies_page .submenu ul li a:hover {
  text-decoration: underline;
  font-weight: bold;
}
.thumbnails{
margin-top:-40px;
}
#slimslide_menu{
color:#fff;
}
.thumbs {
	margin-top: 15px;
}
.thumbs a img {
	margin-right: 8px;
	padding: 2px;
	background-color: #486eb0;
}
/*------------------------------- eind impressies page ---*/

/*------------------------------- plattegronden_page ---*/
.kolom2 {
  width:260px;
  float:right;
  margin-left:0px;
  margin-right:6px;
  margin-top:113px;
}

.kolom2 ul li {
  list-style:disc;
  margin-left:15px;
}

.square {
  background-color:#80394c;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_a1 {
  background-color:#62746e;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_c1 {
  background-color:#006065;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_c1_sp {
  background-color:#9bb1b5;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_f {
  background-color:#723729;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_f_sp {
  background-color:#d0b8ad;
  border: 1px solid #fff;
  margin-right:3px;
}

.square_h1 {
  background-color:#534782;
  border: 1px solid #fff;
  margin-right:3px;
}


#plattegronden_page {
  background: #c6c1b3 url("../gfx/projectback/page_bg.jpg") left bottom no-repeat;
  color:#fff;
  width: 720px;
  height: 600px;
  left: 120px;
  top: 104px;
  overflow: hidden;
}

#plattegronden_page h1 {
  font-size: 14px;
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:12px;
}

/*
.hp_plattegronden {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: 10px;
}*/

.hp_plattegronden {
  position: absolute;
  top: 27px;
  left: 0px;
  width: 408px;
  margin-left: 10px;
}

.plattegronden_slide {
  position:absolute;
  width:418px;
  height:418px;
  top:144px;
  left: 10px;
}

#plattegronden_page h3 {
  font-size: 12px;
  margin-bottom: 0em;
  color: #fff;
  margin-left: 10px;
}

#plattegronden_page .submenu {
  width: 438px;
  height: 96px;
}

#plattegronden_page .submenu h2{
  color: #666;
}

#plattegronden_page .submenu h3 {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 90px;
  display: block;
  height: 20px;
  overflow: hidden;
}

#plattegronden_page .submenu ul li {
  width: 75px;
  height: 75px;
  float: left;
  margin-right: 10px;
}

#plattegronden_page .submenu ul li a {
  text-decoration: none;
  font-weight: bold;
}

#plattegronden_page .submenu ul li a:hover {
  text-decoration: underline;
  font-weight: bold;
}



/*------------------------------- eind plattegronden_page ---*/

.hp_beschrijving {
  position: absolute;
  top: 27px;
  left: 0px;
  width: 560px;
  margin-left: 10px;
}

.hp_downloads_beschrijving {
  position: absolute;
  top: 27px;
  left: 0px;
  width: 560px;
  margin-left: 10px;
}

.hp_downloads_beschrijving h1 {
  font-size: 14px;
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:0px;
color:#FFF;
}

.hp_downloads_beschrijving p {
  font-size: 12px;2
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:0px;
color:#FFF;
}

/*------------- locatie_txt_page submenu*/

.sub_locatie_txt {
  width:500px;
  height:75px;
  float:left;
}

#locatie_txt_page .submenu {
  width: 524px;
  height: 75px;
  margin-left: 25px;
  left: 0px;
}

#locatie_txt_page .submenu h2{
  color: #666;
}

#locatie_txt_page .submenu h3 {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  width: 75px;
  display: block;
  height: 20px;
  overflow: hidden;
}

#locatie_txt_page .submenu ul li {
  width: 75px;
  height: 75px;
  float: left;
  margin-right: 12px;
  border: 1px solid #fff;
}

#locatie_txt_page .submenu ul li a {
  text-decoration: none;
  font-weight: bold;
}

#locatie_txt_page .submenu ul li a:hover {
  text-decoration: underline;
  font-weight: bold;
}
/*-------------*/
#ligging_page {
  width: 679px;
  height: 454px;
  left: 120px;
  top: 104px;
  overflow: hidden;
}

#locatie_page {
  width: 500px;
  height: 458px;
  left: 120px;
  top: 104px;
}

#vogelvlucht_page {
  width: 748px;
  height: 458px;
  left: 120px;
  top: 104px;
}

#locatie_page_bes {
  width: 600px;
  height: 500px;
  left: 120px;
  top: 104px;
}

#googleanimatie_page {
  width:720px;
  height: 400px;
  left: 120px;
  top: 104px;
}

#interesse_page {
  width: 770px;
  height: 462px;
  left: 120px;
  top: 104px;
}

.interesse_iframe {
  width: 770px;
  height: 460px;
  left: 120px;
  top: 104px;
}

#makelaars_page {
  background-color:#fff;
  width:500px;
  height: 400px;
  left: 120px;
  top: 104px;
}

#makelaars_page h2 {
  font-size: 12px;
  margin-top:25px;
  margin-bottom:16px;
  text-transform: uppercase;
}

#aanbodsysteem_page {
  background-color:#c6c1b3;
  width:740px;
  /*height: 462px;*/
  left: 120px;
  top: 104px;
}

#algemeen_page {
  background-color:#c6c1b3;
  width:768px;
  height: 520px;
  left: 120px;
  top: 104px;
}

#contact_page {
  background-color:#fff;
  width:780px;
  height: 570px;
  left: 120px;
  top: 104px;
}

#contact_page h2 {
  font-size: 12px;
  margin-top:25px;
  margin-bottom:16px;
  text-transform: uppercase;
}

.aanbodsysteemtext {
  /*width: 690px;
  padding: 0 25px 0 25px;
  line-height: 0.0;*/
  display:none;
}
/*
.aanbodsysteemtext h2 {
  margin-bottom: 15px;
}*/

.algemeentext {
  width: 290px;
  padding: 0 0px 0 0px;
  line-height: 0.0;
}

.algemeentext2 {
  width: 375px;
  padding: 0 25px 0 45px;
  line-height: 0.0;
  left:306px;;
  top:0px;
  position:absolute;
}

.algemeentext h2, .algemeentext2 h2 {
  margin-bottom: 15px;
}

.algemeentext h1, .algemeentext2 h1 {
  font-size: 14px;
  margin-bottom: 4px;
  margin-bottom:9px;
  margin-top:26px;
}

.algemeentext_makelaars {
  width: 420px;
  padding: 0 25px 0 25px;
  line-height: 0.0;
}

/* het project tekst */
.bullets {
  position: absolute;
  top: 40px;
  left: 250px;
  width: 450px;
}

.hp_beschrijving {
  position: absolute;
  top: 27px;
  left: 0px;
  width: 520px;
  margin-left: 20px;
}

.hp_appartementen_beschrijving {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 520px;
  margin-left: 10px;
line-height:2px;
}

.hp_beschrijving_locatie {
  position: absolute;
  top: 100px;
  left: 12px;
  width: 520px;
  margin-left: 10px;
  padding-top: 50px;
}


/* project backs */

.woningtypeback {
  background: #fff url("../gfx/projectback/woningtype_1.jpg") no-repeat 0px 0px;
}

.beschrijvingback {
  background: #fff url("../gfx/projectback/beschrijvingback.jpg") no-repeat;
}

.impressie_1_back {
  background: #fff url("../gfx/impressies/1.jpg") no-repeat 15px 15px;
}

#aanbodsysteem_page p,
#aanbodsysteem_page ul {
	margin: 1em;
}
#aanbodsysteem_page ul {
	list-style: disc;
	list-style-position: inside;	
}

/*  ----------  shadow komt te staan in een class met een width en height gedefinieerd, shadow zet zich 100% in */
.spiegeling {
  position: absolute;
  z-index: 1;
  left: 0;
  height: 120px;
  background: url("../gfx/algemeen/spiegeling.png") repeat-x left top;
}

.shadow_rt {
  position: absolute;
  width: 8px;
  height: 15px;
  background: url("../gfx/algemeen/backshow_rt.png") no-repeat;
}

.shadow_rb {
  position: absolute;
  width: 8px;
  height: 15px;
  background: url("../gfx/algemeen/backshow_rb.png") no-repeat;
}

.shadow_lb {
  position: absolute;
  width: 15px;
  height: 8px;
  background: url("../gfx/algemeen/backshow_lb.png") no-repeat;
}

.shadow_r {
  position: absolute;
  width: 8px;
  background: url("../gfx/algemeen/backshow_r.png") repeat-y left top;
}

.shadow_b {
  position: absolute;
  height: 8px;
  background: url("../gfx/algemeen/backshow_b.png") repeat-x left top;
}

.footer {
}

/* =Rightcolumn
-----------------------------------------------------------------------------*/

.loginForm {
float:left;
margin-top:-400px !important;
padding:0px !important;
}