/*
	Roosendaal Stadsoevers CSS stijldocument // Presentatielaag
	Auteur: Boye Oomens // boye@e-sites.nl
	Versie: 1.0
*/

/** ------------------------------------------- Reset CSS */
/*  Onderlinge browser afwijkingen resetten */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn,
em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0; padding:0; border:0; font-weight:inherit; font-style:inherit;
	font-size:100%; font-family:inherit; vertical-align:baseline;
}

/** ------------------------------------------- Html en body element */
html {height:100%;}
body {background:#fff; font:normal 100.1%/120% "Verdana", "Arial", sans-serif; color:#000; height:100%;}

/* Verschillende achtergronden */
body.bgImg_1 {background:#fff url(/images/backgrounds/bg_1.jpg) repeat-y top center;}
body.bgImg_2 {background:#fff url(/images/backgrounds/bg_2.jpg) repeat-y top center;}
body.bgImg_3 {background:#fff url(/images/backgrounds/bg_3.jpg) repeat-y top center;}
body.bgImg_4 {background:#fff url(/images/backgrounds/bg_4.jpg) repeat-y top center;}

/** ------------------------------------------- Kopteksten / headings */
h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #fff; }

/** ------------------------------------------- Content elementen */
/*  Paragrafen */
p           { margin: 0 0 1.5em; }

/* Hyperlinks */
a:focus,
a:hover     { text-decoration: underline;}
a           { color:#ed008c; text-decoration: none; }
a img       { border:none;}

/* Afbeeldingen */
img         { border:none; margin:0; padding:0; display:block; }
img.inline  { display:inline; }

/** ------------------------------------------- Lijst elementen */
li ul,
li ol       { margin: 0 0 0 15px; }
ul, ol      { margin: 0; padding: 0; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

/** ------------------------------------------- Specifieke semantische inline- en block elementen */
strong   	  { font-weight:bold; }
em            { font-style:italic; }

/* ------------------------------------------- Formulier elementen */
form      { margin:0; padding:0;}
form br   { clear: left; }
label     { display: block; font-weight: normal; padding:0 0 2px 0; cursor: pointer; float: left;}
fieldset  { border: none;}
legend    { font-weight: bold; border: none !important; display:none; }

/** ------------------------------------------- Formulier input velden */
input,
textarea, select {
  border:1px solid #000;
  font-size:95%;
  color:#000;
  font-family:"Verdana","Arial", sans-serif;
  padding:2px 0 2px 4px;
  width:305px;
  height:15px;
  line-height:15px;
  margin:0 0 5px 0;
  position:relative;
  background:transparent;
}
select {height:24px; padding-right:2px;}
textarea {
	width:394px;
	height:119px;
	margin:5px 0 0 0;
	overflow:auto;
}
input[type=submit],
input[type=button]{cursor:pointer;}

/** ------------------------------------------- Specfieke lay-out divisies */
div.flashGrid {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000;}

div.container {width:100%; height:100%; margin:0 auto; background:url(/images/backgrounds/bg_header.gif) no-repeat top center;}
div.header {width:980px; height:165px; position:relative; margin:0 auto; z-index:8;}
div.header h1 {position:absolute; top:27px; left:190px; margin:0; padding:0;}
div.header h1 a {outline:0;}

div.header div.flashLogo {position:absolute; top:27px; left:190px; margin:0; padding:0; z-index:100;}

/* Zoekformulier */
form.quickSearch {width:280px; height:22px; position:absolute; right:0px; top:50px; margin:0; font-size:80%;}
form.quickSearch input {width:170px; color:#7F8084; margin-right:5px; border:none; background:#D2D3D5; border-left:4px solid #A8A9AD; border-top:4px solid #A8A9AD;}
form.quickSearch input.searchBtn {width:71px; cursor:pointer; border:none; background:#ed008c url(/images/buttons/zoekBtn.jpg) no-repeat; height:23px;}

/* Hoofdnavigatie */
ul.nav {list-style:none; font-size:70%; width:146px; margin:0 0 0 23px; padding:0; float:left; position:relative; z-index:10;}
ul.nav li {text-align:right; padding:0 22px 4px 10px; margin:0 0 1px 0; position:relative; height:auto; z-index:11;}
ul.nav li.separator {background:url(/images/misc/dot.gif) repeat-x center right; padding:0 0 20px 0; margin:0 22px 0px 10px;}
ul.nav li.separator:hover {background:url(/images/misc/dot.gif) repeat-x center right;}
ul.nav li a {color:#fff; text-decoration:none; font-weight:bold; outline:0;}
ul.nav li.active a,
ul.nav li a:hover {color:#79bde9;}
ul.nav li ul {position:absolute; display:none; height:auto; right:-168px; padding:0 0 0 0; top:7px; width:168px; list-style:none; z-index:12;}
ul.nav li.active {background:url(/images/misc/arrow.gif) no-repeat 97% 50%;}
ul.nav li.hasSubitems:hover {background:url(/images/misc/arrow.gif) no-repeat 97% 50%;}
ul.nav li ul.activeSub,
ul.nav li:hover ul {display:block;}
ul.nav li ul li {text-align:left; margin:-5px 0 10px 0; list-style-position:outside; padding:0 0 0 20px; height:auto; position:relative; z-index:102;}
ul.nav li ul li.active {background: url(/images/misc/arrow.gif) no-repeat 3% 50%;}
ul.nav li ul li:hover {background: url(/images/misc/arrow.gif) no-repeat 3% 50%;}
ul.nav li ul.activeSub li.active a,
ul.nav li ul li:hover a {color:#ffd203 !important; outline:0;}
ul.nav li ul li a:hover {color:#ffd203;}
ul.nav li.active ul li a {color:#fff;}
ul.nav li.active:hover ul {visibility:visible;}

/* mask om overlapping te voorkomen bij subitems */
body.bgImg_4 ul.nav li div.subNavMask {position:absolute; left:146px; top:0; background:#ed008c; width:171px; display:none; height:300px;}

/* Algemene content sectie */
div.mainSection {width:980px; height:auto; margin:0 auto;}
div.rightSection {width:477px; height:400px; top:-65px; float:right; position:relative; right:92px; font-size:70%; z-index:9; padding:0 21px 10px 21px;}
div.rightSection img.mainImg {position:relative; width:480px; height:150px; z-index:10;}
div.rightSection h2 {font-size:160%; margin:30px 0 20px 0; padding:0; font-weight:bold; text-transform:uppercase;}
div.rightSection h3.homepageTitle {font-size:160%; margin:30px 0 20px 0; padding:0; font-weight:bold;}
div.rightSection .flashH2 {margin:15px 0 0 -3px; padding:0;}
div.rightSection p {padding-bottom:15px;}
div.rightSection h3 {font-size:125%; color:#000; margin-bottom:10px;}
div.rightSection h4 {font-size:115%; color:#000; margin-top:10px;}
div.rightSection h5 {color:#000; padding-top:10px;}
div.rightSection a {color:#ed008c;}
div.rightSection ul {margin:0 0 10px 15px;}

/* Zoekresultaten */
div.rightSection ul.list {list-style:none; margin:10px 0 15px 0; padding:0;}
div.rightSection ul.list li {margin:0 0 10px 0; padding:0;}

/* Contactformulier */
form.contactFrm {margin:0;}
form.contactFrm label {width:120px; font-weight:normal; padding:10px 0 4px 0;}
form.contactFrm input {width:200px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:none; background:#e0e0e0;}
form.contactFrm input:focus, form.contactFrm textarea:focus {background:#fff;}
form.contactFrm textarea {width:200px; height:70px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:none; background:#e0e0e0;}
form.contactFrm fieldset input.zipcode {width:62px;}
form.contactFrm fieldset input.city {width:122px;}
form.contactFrm fieldset input.submitBtn {
margin:10px 0 5px 0; padding:0 4px 0 4px; background:#ed008c; width:auto; height:26px;
border:none; color:#fff; cursor:pointer; font-weight:bold;}

/* Sitemap */
ul.sitemap a {font-weight:normal;}
ul.sitemap a:hover {text-decoration:underline;}

/* Global classes */
.hide {display:none;}
.show {display:block;}
.center-img {margin:10px auto 10px; display:none;}
.text-align-left {text-align:left;}
.text-align-right {text-align:right;}
.text-align-center {text-align:center;}
.text-align-justify {text-align:justify;}

