@import url("/ymere/scripts/css/font_glypha.css");

/*

begin reset stijlen

html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
html5doctor.com/html-5-reset-stylesheet/
  
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* einde reset stijlen */

/* begin hulp- en hackstijlen */

.clear-me { clear: both; height: 1px; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* einde hulp- en hackstijlen */

body { color: #4D0071; background-color: #fff; text-align: center; font-size: 1em; font-family: Arial, Helvetica, sans-serif; margin: 0; }

#sitename { font-family: 'GlyphaLTStd55Roman'; }
h2 { font-size: 1.5em; color: #000; font-weight: normal; }
a { color: #fe0032; }

#container { position: relative; width: 980px; margin: 0 auto; text-align: left; }
.header { width: 980px; height: 125px; background: url("../../images/ymere-logo-payoff.jpg") 0 100% no-repeat; border-bottom: .25em solid #f00; margin-bottom: 1em; }
.header-vsh { width: 980px; height: 125px; background: url("../../images/ymere-verhuurt.gif") 0 100% no-repeat; }
.header-comm { width: 980px; height: 125px; background: url("../../images/ymere-informeert.gif") 0 100% no-repeat; }

.header-koop { width: 980px; height: 125px; background: url("../../images/ymere-verkoopt.gif") 0 100% no-repeat; }

.banner { position: absolute; z-index: 1; width: 470px; height: 140px; top: 5px; right: 0; color: #662982; font-size: .75em; }
.bannertekst-title { font-size: 1.5em; }
.bannertekst { float: left; text-align: left; margin: 25px 0 0 155px; }
.banner a  { color: #fe0032; text-decoration: none; }
.banner a:hover { color: #662982; }
#placeholder-logo { display: block; width: 200px; height: 200px; background: url("/projecten/images/picto-sleutel.gif") center right no-repeat; float: right; margin: 0 0 1em 1em; }
.betondorp #placeholder-logo { background-image: url("/projecten/images/button-betondorp.png"); }
.walvisbuurt #placeholder-logo { background-image: url("/projecten/images/logo-walvisbuurt.gif"); }
.comm #placeholder-logo { display: none; background-image: none; }

.sleutel { float: right; margin: 2px 5px 5px 15px; background-position: center center; border: 0; }
.sleutel-dummy { display: none; }
.sleutel-1 { width: 78px; height: 200px; }
.sleutel-2 { width: 91px; height: 200px; }
.sleutel-3 { width: 89px; height: 200px; }

#columnleft, #columnright { float: left; }
#columnleft { width: 388px; }
#columnright { width: 570px; margin-left: 20px; }

#sitename { display: block; position: relative; font-size: 2em; margin-bottom: .5em; }

#navigatie { border-top: 1px solid #4d0071; border-bottom: 1px solid #4d0071; text-align: left; }
.heeftsubmenu #navigatie { border-bottom: none; }
#navigatie ul { text-align: left; margin: 0; }
#navigatie ul li { display: block; float: left; list-style: none; padding: .75em 0; }
#navigatie ul li a { display: block; float: left; color: #4d0071; font-size: 1em; padding: 0 .5em; text-decoration:none; border-right: 1px solid #4d0071; }
#navigatie ul li a.laatste { border-right: none; }
#navigatie ul li a.act { color: #fe0032; }
#navigatie ul li a:hover { color: #fe0032; }
/*.act-li { background: #ccc; }*/

#subnavigatie { display: block; width: 100%; padding: 0; border-bottom: 1px solid #4d0071; }
#subnavigatie ul { margin: 0; padding: 0 0 .5em 0; }
#subnavigatie ul li { display: block; float: left; list-style: none; padding: 0; font-size: .85em; }
#subnavigatie ul li a { color: #4d0071; padding: 0 .75em; text-decoration: none; border-right: 1px solid #4d0071; }
#subnavigatie ul li a.laatste { border-right: none; }
#subnavigatie ul li a.act { /*font-weight: bold; text-decoration: underline;*/ color: #f00; }
#subnavigatie ul li a:hover { text-decoration: underline; }
#subnavigatie ul li a.act:hover { text-decoration: none; }

#media { width: 388px; height: 354px; }
#content { text-align: left; margin-top: 1em; /* min-height: 342px; */ }

/* IE-specific hack */
/* * html #content { height: 342px; } */

#tekst { font-size: .9em; text-align: left; }
#tekst p { color: #222; line-height: 140%; margin-bottom: 1em; }
#tekst p iframe { width: 100%; max-width: 100%; min-height: 340px; height: auto; }
#tekst ul { margin: 0; padding: 0; }
#tekst ul li { color: #222; list-style: outside square; margin-left: 15px; padding-bottom: 10px; }
#tekst ul li ul { margin-top: 10px; }

#tekst ol { margin: 20px 0 10px 10px; padding: 0; }
#tekst ol li { color: #222; margin-left: 15px; padding-bottom: 10px; }

#youtube { width: 386px; height: 250px; margin-top: 20px; border: 1px solid #aaa; }
#columnleft #youtube { margin: 0 0 1em 0; border: none; }
#streetview { width: 386px; height: 250px; margin-top: 20px; border: 1px solid #aaa; }
#columnleft #streetview { margin: 0 0 1em 0; border: none; }
#googlemap { width: 386px; height: 250px; margin-top: 10px; border: 1px solid #aaa; }
#columnleft #googlemap { margin: 0 0 1em 0; border: none; }

#disclaimer { display: block; position: relative; margin: 0 0 1em 0; text-align: left; color: #666; font-size: .9em; font-style: italic; }
#disclaimer a { color: #222; }	
ul { margin-top: 10px; margin-bottom: 10px; }

#tbl-prijslijst { width: 100%; margin-bottom: 1em; }
#tbl-prijslijst td { font-size: .9em; padding: .5em; border: 1px solid #ccc; color: #000; }
#hdr { background: #eee; text-align: left; }
#hdr th { border: 1px solid #ccc; font-weight: normal; padding: .5em; }
#hdr-bouwnr { text-align: left; }
.td-bouwnr { text-align: left; width: 300px; }
.td-bouwnr a { margin-left: 0; color: #f00; font-size: 1em; }
.td-kamers { text-align: center; width: 50px; }
.td-oppervlak { text-align: center; width: 75px; }
.td-etage { text-align: center; width: 50px; }
.td-prijs { text-align: center; width: 100px; }

#tbl-kenmerken { margin-top: 20px; width: 250px; }
#tbl-kenmerken td { font-size: .8em; }
#tbl-kenmerken .asterisk { width: 30px; }

#gallery { position: absolute; z-index: 10; text-align: center; width: 550px; height: 244px; margin-top: 168px; margin-left: 470px; }
.thumbnail { float: left; margin: 0 6px 6px 0; width: 50px; height: 53px; overflow: hidden; }

#container-beeld-en-kaart { float: left; margin-right: 20px; } 
#container-beeld { overflow: hidden; }
#container-beeld a { text-decoration: none; }
#container-beeld a img { width: 386px; }
#container-beeld-thumbs { display: block; width: 326px; height: 74px; }
#container-beeld-thumbs img { width: 80px; height: 74px; }

/* scrollable stijlen */
.scrollable { position: relative; overflow: hidden; width: 260px; height: 74px; }
.scrollable .items { width: 20000em; position: absolute; clear: both; }
.scrollable img { float: left; width: 60px; height: 60px; margin: 6px !important; }
.scrollable .active { z-index: 9999; position: relative; }
.scrollable { float: left; }
a.prevPage { float: left; background: url("../../images/btn-vorige.png") 50% 50% no-repeat; display: block; width: 20px; height: 60px; margin: 0; cursor: pointer; z-index: 10000; }
a.nextPage { float: right; background: url("../../images/btn-volgende.png") 50% 50% no-repeat; display: block;  width: 20px; height: 60px; margin: 0; cursor: pointer; z-index: 10001; }
a.disabled { visibility: hidden !important; }

.formtext { width: 170px; height: 20px; font-size: 11px; float: left; }
.forminput { height: 20px; margin: 1px 0; line-height: 20px;font-size: 11px;  }
input { width: 200px; height: 18px; }
#ishuurder { width: 20px; }
#andere_projecten { width: 20px; }
#postcode { width: 80px; }
#woonplaats { width: 120px; }
select { width: 210px; height: 18px; }
select.long { width: 210px; }
.submit { width: 80px; height: 22px; margin-left: 40px; }

#kaart { width: 100%; height: 300px; background: #f0f0f0; }

#Abbenes-trees { pxosition: relative; clear: both; width: 980px; height: 126px; margin: 50px 0 10px 0; background: #fff url(../../images/abbenes-trees.jpg) top left no-repeat; }

/* social media stijlen */
#share-twitter, #share-facebook { display: block; float: left; width: 20px; height: 20px; margin: 0 4px 4px 0; }
#share-twitter { background: transparent url("/projecten/images/ico-twitter-f.png") 0 0 no-repeat; }
#share-facebook { background: transparent url("/projecten/images/ico-facebook-f.png") 0 0 no-repeat; }
#project-op-facebook {  display: block; float: left; width: 45px; height: 20px; margin: 0 4px 4px 0; background: transparent url("/projecten/images/ico-project-op-facebook.jpg") 0 0 no-repeat; }

/* #container-share { margin: 10px 0 5px 0; min-height: 20px; float: right; text-align: right; border: 1px solid #f0f; } */
#container-share { display: block; min-height: 20px; border-top: 1px solid #666; padding: 1em 0; }
.twitter-follow-tekst { display: block; margin-top: 10px; }
.twitter-follow-button { width: 61px; }