/**
 * Haai Five CSS stijldocument
 *
 * @project:    Haai Five Scuba Diving	
 * @auteur:     Boye Oomens (boye@e-sites.nl)
 * @licentie:   http://creativecommons.org/licenses/by/3.0/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 */

body {
	background:#fff;
	font:normal 100.1%/1.5 "Verdana", "Arial", sans-serif;
	color:#5F5F60;
}

/** ------------------------------------------- Kopteksten / headings */
h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #5F5F60; }

/** ------------------------------------------- Content elementen */
/*  Paragrafen */
p           { margin: 0 0 1.5em; }

/* Hyperlinks */
a:focus, 
a:hover     { text-decoration: underline;}
a           { color:#FF8600; text-decoration: none; font-weight:bold; }
a img       { border:none;}

/* Afbeeldingen */
img         { border:none; margin:0; padding:0; display:block; }
img.inline  { display:inline; }

/* Horizontale separator */
hr {border:none 0; border-top:1px solid #296199; width:100%; height:1px; clear:left;}
hr.separator {padding:10px 0 0 0; clear:both; border-top:none; border-bottom:1px solid #296199; margin:0 0 10px 0; }

/** ------------------------------------------- Lijst elementen */
li ul, 
li ol       { margin: 0; }
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; }
cite          { font-style:italic; }
ins           { text-decoration:none; }
abbr, acronym { border-bottom: 1px dotted #333; font-weight: normal; cursor:help; }
address       { font-style:normal; padding:8px; }
code, kbd     { font: normal 12px/120% 'Courier New', 'Courier', mono; line-height:1.5;}

/* ------------------------------------------- Formulier elementen */
form      { margin:11px; padding:8px 8px 0 8px;}
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:"Tahoma","Arial", sans-serif;
  padding:3px 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;}



/* Algemene container */
div.container {width:953px; height:700px; margin:20px auto 0;}

/* Navigatie rechts bovenaan */
ul.topNav {float:right; position:relative; padding:10px 0 10px 0; font-size:70%; color:#1360A0;}
ul.topNav li {display:inline; list-style:none;}
ul.topNav li a {color:#1360A0; font-weight:normal;}

/* Topheader */
div.header {width:953px; margin:0; clear:right; height:229px; position:relative; z-index:1; background:#0297c2 url(/images/backgrounds/bg_topHeader.jpg) no-repeat top left;}
div.flashHeader {background-color:#fff;}

/* expanded header */
div.expand {height:387px;}

/* Logo */
h1.logo {position:absolute; z-index:2; top:-7px; left:28px;}
span.haaiSociety {width:176px; height:152px; display:block; position:absolute; right:5px; z-index:0; top:53px;}
span.kidsBanner {width:481px; height:104px; display:block; position:absolute; left:0; z-index:0; top:220px;}
span.yellowClubBanner {width:540px; height:105px; display:block; position:absolute; right:0; z-index:0; top:80px;}
div.bottom {width:953px; height:29px; position:absolute; left:0; bottom:0; z-index:3;}
div.geel {background: url(/images/backgrounds/bg_bottomHeader-geel.png) no-repeat top left;}
div.blauw {background: url(/images/backgrounds/bg_bottomHeader-blauw.png) no-repeat top left;}
div.oranje {background: url(/images/backgrounds/bg_bottomHeader-oranje.png) no-repeat top left;}

/* Hoofdfoto */
img.mainImg {padding:53px 0 0 0; display:block; position:absolute; top:0; z-index:0;}

/* Hoofdnavigatie */
ul.mainNav {float:right; color:#fff; font-weight:bold; list-style:none; font-size:80%; position:relative; z-index:4; padding:0 10px 0 0;}
ul.mainNav li {display:block; position:relative; width:auto; height:auto; float:left; padding:17px 4px 18px 4px; margin:0 1px 0 0; z-index:100;}
ul.mainNav li:hover {background:#03A8D5;}
ul.mainNav li a {color:#fff; display:block; padding:0;  margin:0;}
ul.mainNav li ul {display:none; position:absolute; top:53px; left:0; width:150px; padding:0 0 0 0; z-index:500; height:auto; background:#135B99;}
ul.mainNav li:hover ul {display:block;}
ul.mainNav li ul li {width:150px; height:auto; display:block; float:left; margin:0; padding:0; color:#fff; position:relative;}
ul.mainNav li ul li a {width:142px; color:#fff; font-weight:normal; padding:4px 0 4px 8px; background:#135B99; display:block;}
ul.mainNav li ul li a:hover {background:#03A8D5; text-decoration:none;}

/* Direct link navigatie */
div.directLink {width:195px; height:auto; position:relative; background:url(/images/backgrounds/directLinkBg.jpg) repeat-y top left; float:left; margin:0 10px 0 0;}
div.directLink div.top {width:195px; height:240px; background:url(/images/backgrounds/directLinkTop.jpg) no-repeat top left; top:0; left:0; position:absolute; z-index:99;}
div.directLink div.body {min-height:260px; height:auto; position:relative; z-index:1000;}
div.directLink div.body h4 {color:white; margin:5px 0 0 0; padding:0; text-transform:uppercase; font-size:18px; letter-spacing:-1px; text-align:center;}
div.directLink div.bottom {width:195px; height:17px; line-height:17px; position:absolute; bottom:-16px; left:0; background:url(/images/backgrounds/directLinkBottom.jpg) no-repeat top left;}
div.directLink ul {width:172px; border-bottom:1px solid white; margin:8px auto 0; list-style:none;}
div.directLink ul li {border-top:1px solid white; padding:0; margin:0; display:block; }
div.directLink ul li a {color:#fff; text-decoration:none; font-weight:normal; display:block; padding:5px 0 5px 0; margin:0;}
div.directLink ul li a:hover {text-decoration:underline;}

/* Algemene content sectie */
div.mainSection {width:953px; height:auto; position:relative; padding:10px 0 15px 0; font-size:70%; z-index:auto;}
div.mainSection h2 {color:#FF8600; font-size:175%;}
div.mainSection h3 {color:#52b6ce; font-size:130%; margin:0 0 30px 0;}
div.mainSection p {margin:0 0 20px 0; padding:0;}
div.leftSection {width:650px; height:auto; float:left; position:relative; margin:0 10px 0 0;}
div.middle {width:453px;}
div.leftSection img {float:right; padding:0; margin:5px 0 5px 20px; clear:right;}
div.leftSection img.left {float:left; padding:0; margin:5px 20px 5px 0; clear:left;}
div.leftSection  p.introTekst {color:#D70068; font-size:14px;}
div.leftSection img.gallery {float:left; padding:0; margin:5px 20px 5px 0; clear:none;}
div.leftSection ul {margin:10px 0 0 15px;}
div.leftSection ul li ul {margin-top:0;}
div.rightSection {width:283px; float:right; position:relative; padding:13px 0 0 0; z-index:99;}
div.rightSection img.left {float:left; padding:0; margin:5px 5px 5px 0;}
div.rightSection h4 {margin:0 0 12px 0; padding:0;}
div.rightSection img.bannerRechtsGroot {margin:0; padding:10px 0 15px 0;}
div.rightSection div.rightTopBanners {position:absolute; top:-90px; left:0; z-index:100;}
div.rightSection div.rightTopBanners img {float:left; margin:0 0 0 0; padding:0;}
div.rightSection div.rightTopBanners img.last {margin:0;}
div.rightSection div.newsletterSignup {background:url(/images/misc/bannerNieuwsbrief.jpg);width:283px;height:93px; padding:40px 0 0 0; margin:5px 0; color:#FFF;}
div.rightSection div.newsletterSignup input {width:163px; border:1px solid #FFF; color:#FFF; background:#2B96B8;}

/* aparte class */
div.expand div.leftSection {width:505px;}
div.expand div.rightSection {width:394px; left:-10px;}

ul.list {margin:0 0 40px 0; padding:0; list-style:none;}
div.leftSection ul.expand {margin:0;}
ul.list li {height:auto !important; min-height:80px; border-bottom:1px solid #000; clear:both; margin:0 0 5px 0; padding:0 0 5px 0;}
ul.expand li {height:auto !important; min-height:80px; margin:0 0 15px 0;} /* expanded versie van de standaard lijstweergave */
ul.list li img {float:left; margin:5px 8px 0 0; padding:0;}
ul.expand li h4,
ul.list li h5 {color:#135a9a; font-size:110%; line-height:130%; margin:0; padding:0; display:inline;}
ul.list li p {margin:0; padding:0; line-height:130%;}
ul.list li p a {color:#d50168;}

/* Sitemap */
ul.sitemap a {font-weight:normal;}
ul.sitemap a:hover {text-decoration:underline;}

/* Tabel data overzicht */
table.overzichtData {border:none; background:url(/images/headers/tabelHeader.jpg) no-repeat top left; width:650px; vertical-align:middle; text-align:left; border-bottom:1px solid #296199; padding:0 0 10px 0; margin:0 0 15px 0;}
table.overzichtData caption {text-align:left; margin:0 0 10px 0; padding:0 0 0 10px; font-weight:bold;}
table.overzichtData thead th {color:#fff; height:44px;}
table.overzichtData th {vertical-align:top; padding:5px 0 0 10px; font-weight:bold; margin:0;}
table.overzichtData td {vertical-align:middle; padding:0 0 0 10px;}

/* Contactformulier */
form.contactFrm {margin:0;}
form.contactFrm label {width:120px; padding:10px 0 4px 0; font-size:100%;}
form.contactFrm input {width:200px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999;}
form.contactFrm textarea {width:200px; height:70px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999;}
form.contactFrm input.zipcode {width:62px;}			
form.contactFrm input.city {width:122px;}
form.contactFrm input.submitBtn {margin:10px 0 5px 0; padding:4px 4px 3px 4px; background:#efefef; width:auto; height:auto; border:1px solid #999; color:#999; cursor:pointer; font-weight:bold;}
form.contactFrm input.submitBtn:hover {color:#FF8600;}
form.contactFrm select {width:200px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999;}

/* Reserveerformulier */
form.reserveerFrm {margin:0;}
form.reserveerFrm label {width:150px; padding:10px 0 4px 0; font-size:100%;}
form.reserveerFrm input {width:200px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999; background-color:#fff;}
form.reserveerFrm textarea {width:200px; height:70px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999; background-color:#fff;}
form.reserveerFrm input.smalltext {width:50px;}
form.reserveerFrm input.submitBtn {margin:10px 0 5px 0; padding:4px 4px 3px 4px; background:#efefef; width:auto; height:auto; border:1px solid #999; color:#999; cursor:pointer; font-weight:bold;}
form.reserveerFrm input.submitBtn:hover {color:#FF8600;}
form.reserveerFrm select {width:125px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999;}
form.reserveerFrm select.short {width:75px;}
form.reserveerFrm select.shortdate {width:60px;}

/* login form */
form#loginFrm {margin:0;}
form#loginFrm label {width:120px; padding:10px 0 4px 0; font-size:100%;}
form#loginFrm input {width:200px; margin:5px 3px 0 0; padding:4px 4px 3px 4px; border:1px solid #999;}
form#loginFrm input.chkBox {width:20px; height:20px; margin-top:15px;}
form#loginFrm input.submitBtn {margin:10px 0 5px 0; padding:4px 4px 3px 4px; background:#efefef; width:auto; height:auto; border:1px solid #999; color:#999; cursor:pointer; font-weight:bold;}
form#loginFrm input.submitBtn:hover {color:#FF8600;}


/* Footer */
div.footer {width:953px; position:relative; clear:both; padding:0 0 10px 0;}
div.footer ul {margin:0 auto; position:relative; padding:15px 0 0 0; font-size:70%; text-align:center;}
div.footer ul li {display:inline; list-style:none;}
div.footer ul li a {color:#5F5F60; font-weight:normal;}

/* ------------------------------------------- Globale classes */
.highlight     { color: #ff0000; }
.transparent   { background: transparent !important; }
.noBackground  { background: none; }
.first         { margin-left:0; padding-left:0; }
.last          { margin-right:0; padding-right:0; }
.top           { margin-top:0; padding-top:0; }
.bottom        { margin-bottom:0; padding-bottom:0; }
.hide          { display:none; }
.hidden        { visibility:hidden; }
.relative      { position:relative; }
.overflow      { overflow:hidden !important;}

.clear         { clear:both; }
.clear-left   { clear:left; }
.clear-right   { clear:right; }
.left          { float:left; }
.right         { float:right; }

.bgPosTop      { background-position:top left !important; margin:0 !important;}

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }

.margin-right  { margin-right:10px !important;}

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px dotted; }
.small         { font-size:9px; }

.img-left      { float:left; margin:11px 10px 10px 11px; }
.img-right     { float:right; margin:11px 10px 10px 0;}

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

.error         { border:1px dotted #ff0000 !important; }
.errorMsg      { font-weight:bold; color:#ff0000; }

.autoWidth	   { width:auto !important; }
.flexible      { height:auto !important; }

.img-left {float:left; padding:0; margin:5px 20px 5px 0; clear:left;}
.img-right {float:right; padding:0; margin:5px 0 5px 20px; clear:right;}
.img-center {margin:5px auto 5px;}
div.rightSection a img, div.rightSection a object {margin:5px;}
div.rightSection a.smallThumbs {outline:0;}
.block         { display:block; }
.clear			{clear: both;}

div.flashObjPlaceholder {display:none;}

.imgSpacer {
	padding: 13px 0 0 0;
}