/* 
 * ----------------------------------------------------------
 * Title:		MediaFlirt - CSS Main Stylesheet
 * Author:		Kenny van Ooijen
 * Date:		September 2009
 * ----------------------------------------------------------
 * MediaFlirt - Webdesign bureau
 * www.mediaflirt.nl
*/


/* Algemene styles
 * ---------------------------------------------------------- */
html { background: #acebfc url('images/htmlbg.gif') repeat-x; height: 100%; }
body { font: 12px Arial; color: #00485d; margin: 0px auto; height: 100%;}
br.clear{	clear: both;	font-size: 1px;	}

/* Container
 * ---------------------------------------------------------- */
 .Container { position: relative; width: 1001px; margin: 0px auto; }
 
 
/* Header
 * ---------------------------------------------------------- */
 .Header { width: 1001px; height: 162px; }
 .Header .Logo { float: left; border: 0px; }
 .Header .Recl { float: right; width: 512px;  padding:10px 0px 0px 33px; height: 80px; background: url('images/bannerbg.gif') no-repeat; }
 .Header .Recl .banner { border: 0px; margin: 10px 0px 0px 33px;}

 .Header .TopNav { display: block; clear: both; width: 1001px; height: 70px; background: url('images/menu.gif') no-repeat; }
 .Header .TopNav ul { margin: 0px; padding: 27px 0px 0px 125px; }
 .Header .TopNav li { float: left; display: inline; margin-left: 77px; }
 .Header .TopNav li a { font: 12px Arial; font-weight: bold; color: #ffffff; text-decoration: none; padding-left: 12px; background: url('images/nav-pijl.gif') no-repeat;  }
 .Header .TopNav  li a:hover { text-decoration: underline; }
 .Header .TopNav .color { color: #feff8b; }


/* Content
 * ---------------------------------------------------------- */
 .Content { display: block; width: 1001px; margin-top: 11px; }
 .Content .Top { display: block; }
 .Content .Bg { float: left; width: 1001px; background: url('images/content-bg.png') repeat-y; }
 .Content .Links { float: left; display: inline; width: 181px; margin: 4px 0px 0px 21px; }
 .Content .Midden { float: left; display: inline; width: 600px; margin: 3px 0px 0px 0px; padding: 0px; }
 .Content .Rechts { float: right; display: inline; width: 181px; margin: 4px 11px 0px 0px; }

 
 /* Box Blauw
 * ---------------------------------------------------------- */
 .Box-Blauw { float: left; }
 .Box-Blauw .Balk { display: block; width: 580px; height: 32px; font: 18px Arial; color: #00485d; padding: 14px 0px 0px 20px; background: url('images/box-blauw-balk.gif') no-repeat; }
 .Box-Blauw h1 { font: 18px Arial; color: #00485d; margin: 0px; padding: 0px; }
 .Box-Blauw .Bg { display: block; width: 598px; padding-bottom: 5px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; }
 .Box-Blauw p { font: 12px Arial; color:#00485d; margin: 0px; padding: 18px 20px 0px 20px; line-height: 21px; }
 .Box-Blauw a { font: 12px Arial; color: #0084ff; text-decoration: underline; }
 .Box-Blauw a:hover { text-decoration: none; }
 .Box-Blauw .Bottom { display: inline; margin-bottom: 10px; }
 .Box-Blauw .Img { float: right; margin: -50px 20px 0px 0px; }
 
 .Box-Blauw ul { display: block; width: 400px; padding: 0px; margin: 20px 0px 0px 40px; }
 .Box-Blauw li { display: inline; list-style: none; line-height: 25px; padding-left: 20px; margin: 0px; background: url('images/icon-ster.gif') no-repeat; }
 
 
  /* Box Oranje
 * ---------------------------------------------------------- */
 .Box-Oranje { float: left; }
 .Box-Oranje .Balk { display: block; width: 580px; height: 32px; font: 18px Arial; color: #5e1400; padding: 14px 0px 0px 20px; background: url('images/box-oranje-balk.gif') no-repeat; }
 .Box-Oranje h2 { font: 18px Arial; color: #5e1400; margin: 0px; padding: 0px; }
 .Box-Oranje .Bg { display: block; width: 598px; padding-bottom: 5px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; }
 .Box-Oranje .Bottom { display: inline; margin-bottom: 10px; }
 
 .Box-Oranje .Box1 { float: left; width: 573px; margin: 5px 0px 5px 0px; padding: 8px 0px 8px 25px; }
 .Box-Oranje .Box2 { float: left; width: 573px; margin: 5px 0px 5px 0px; padding: 8px 0px 8px 25px; background-color: #fff6e8; }
 .Box-Oranje .Nr { float: left; margin: 0px; }
 .Box-Oranje .Text { float: left;  width: 483px; font: 12px Arial; color: #5e1400; line-height: 18px; margin-left: 20px; }
 .Box-Oranje .Kop { font: 14px Arial; font-weight: bold; color: #ff5400; }
 
 
   /* Aanmelden
 * ---------------------------------------------------------- */
 .Aanmelden { float: left; width: 600px; height: 147px; background: url('images/aanmelden-bg.gif') no-repeat; }
 .Aanmelden form { width: 339px; padding: 0px; margin: 20px 0px 0px 40px; }
 .Aanmelden fieldset { margin: 0px; padding: 0px; border: 0px; }
 .Aanmelden label { display: block; font: 16px Arial; font-weight: bold; color: #005578; margin-bottom: 8px; }
 .Aanmelden .Veld { display: block; width: 329px; border: 0px; padding: 9px 5px 10px 5px;  font: 12px Arial; color: #005578; background: url('images/aanmelden-input.png') no-repeat; }
 .Aanmelden .Button { float: right; width: 125px; height: 38px; border: 0px; cursor: pointer; margin-top: 8px; background: url('images/button-aanmelden.png') no-repeat; }
 
 
/* Menu Groen
 * ---------------------------------------------------------- */
 .Menu-Groen { float: left; }
 .Menu-Groen .Balk { display: block; width: 157px; height: 24px; padding: 7px 0px 0px 14px; font: 12px Arial; font-weight: bold; color: #ffffff; background: url('images/menu-groen-balk.gif') no-repeat; }
 .Menu-Groen .Icon { position: absolute; margin: 0px 0px 0px 126px; }
 .Menu-Groen .Bg { display: block; width: 169px; border-left: 1px solid #e0f3c6; border-right: 1px solid #e0f3c6; background: #ffffff url('images/menu-groen-bg.gif') no-repeat left bottom; }
 .Menu-Groen .Bottom { display: inline; margin-bottom: 10px; }
 
 .Menu-Groen form { padding: 0px; margin: 0px; }
 .Menu-Groen fieldset { display: inline; margin: 15px 11px 0px 11px; padding: 0px; border: 0px;  }
 .Menu-Groen label { display: block; font: 12px Arial; color: #62892f; margin-bottom: 5px; }
 .Menu-Groen .Veld { display: inline; width: 137px; font: 12px Arial; color: #88b054; border: 1px solid #b6dc86; padding: 4px; margin-bottom: 10px; background-color: #f4fee7; }
 .Menu-Groen .Button { float: right; padding: 0px; margin-bottom: 0px; }
 
 .Menu-Groen .Linkje { height: 20px;background: none; }
 .Menu-Groen ul { padding: 0px; margin: 10px 0px 0px 0px; }
 .Menu-Groen li { float: left; display: inline; width: 158px; height: 25px; list-style: none; padding: 5px 0px 0px 11px; background: url('images/menu-groen-bgli.gif') no-repeat; }
 .Menu-Groen a { font: 12px Arial; color: #62892f; text-decoration: none; padding-left: 15px; background: url('images/menu-groen-pijl.gif') no-repeat 0 5px; }
 .Menu-Groen a:hover { text-decoration: underline; color: #0084ff; background: url('images/menu-groen-pijl.gif') no-repeat 0 -10px; }
 .Menu-Groen .On{ text-decoration: underline; color: #0084ff; background: url('images/menu-groen-pijl.gif') no-repeat 0 -10px; }

 
/* Menu Oranje
 * ---------------------------------------------------------- */
 .Menu-Oranje { float: left; }
 .Menu-Oranje .Balk { display: block; width: 157px; height: 24px; padding: 7px 0px 0px 14px; font: 12px Arial; font-weight: bold; color: #ffffff; background: url('images/menu-oranje-balk.gif') no-repeat; }
 .Menu-Oranje .Icon { position: absolute; margin: 0px 0px 0px 126px; }
 .Menu-Oranje .Bg { display: block; width: 169px; border-left: 1px solid #ffe0d1; border-right: 1px solid #ffe0d1; background: #ffffff url('images/menu-oranje-bg.gif') no-repeat left bottom; }
 .Menu-Oranje .Bottom { display: inline; margin-bottom: 10px; }
 
 .Menu-Oranje ul { padding: 0px; margin: 10px 0px 0px 0px; }
 .Menu-Oranje li { float: left; display: inline; width: 158px; height: 25px; list-style: none; padding: 5px 0px 0px 11px; background: url('images/menu-oranje-bgli.gif') no-repeat; }
 .Menu-Oranje a { font: 12px Arial; color: #a7562e; text-decoration: none; padding-left: 15px; background: url('images/menu-oranje-pijl.gif') no-repeat 0 5px; }
 .Menu-Oranje a:hover { text-decoration: underline; color: #0084ff; background: url('images/menu-oranje-pijl.gif') no-repeat 0 -10px; }
 .Menu-Oranje .On{ text-decoration: underline; color: #0084ff; background: url('images/menu-oranje-pijl.gif') no-repeat 0 -10px; }
 
 
/* Menu Blauw
 * ---------------------------------------------------------- */
 .Menu-Blauw { float: left; }
 .Menu-Blauw .Balk { display: block; width: 157px; height: 24px; padding: 7px 0px 0px 14px; font: 12px Arial; font-weight: bold; color: #ffffff; background: url('images/menu-blauw-balk.gif') no-repeat; }
 .Menu-Blauw .Icon { position: absolute; margin: 0px 0px 0px 126px; }
 .Menu-Blauw .Bg { display: block; width: 169px; border-left: 1px solid #d7f4ff; border-right: 1px solid #d7f4ff; background: #ffffff url('images/menu-blauw-bg.gif') no-repeat left bottom; }
 .Menu-Blauw .Bottom { display: inline; margin-bottom: 10px; }
 
 .Menu-Blauw ul { padding: 0px; margin: 10px 0px 0px 0px; }
 .Menu-Blauw li { float: left; display: inline; width: 158px; height: 25px; list-style: none; padding: 5px 0px 0px 11px; background: url('images/menu-blauw-bgli.gif') no-repeat; }
 .Menu-Blauw a { font: 12px Arial; color: #459abc; text-decoration: none; padding-left: 15px; background: url('images/menu-blauw-pijl.gif') no-repeat 0 5px; }
 .Menu-Blauw a:hover { text-decoration: underline; color: #0084ff; background: url('images/menu-blauw-pijl.gif') no-repeat 0 -10px; }
 .Menu-Blauw .On{ text-decoration: underline; color: #0084ff; background: url('images/menu-blauw-pijl.gif') no-repeat 0 -10px; }
 
 
/* Reclame
 * ---------------------------------------------------------- */
 .Reclame { float: left; }
 .Reclame .Bg { display: block; width: 169px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9;}
 .Reclame .Bg2 { margin-left: 23px; }
 .Reclame .Img { border: 0px; }
 .Reclame .Top { display: block; }
 .Reclame .Bottom { float: left; margin-bottom: 10px; }
 
 
/* Footer
 * ---------------------------------------------------------- */
 .Footer { float: left; width: 1001px; height: 42px; color: #00485d; background: url('images/footer.png') no-repeat; }
 .Footer ul { float: left; margin: 0px; padding: 15px 0px 0px 0px; }
 .Footer li { float: left; display: inline; }
 .Footer li a { font: 12px Arial; color: #00485d; text-decoration: none; margin: 0px 13px 0px 13px; }
 .Footer li a:hover { text-decoration: underline; }
 
 .Footer .Copyright { float: right; margin: 15px 13px 0px 0px; }
 .Footer .Copyright a { color: #00485d; font-weight: bold; text-decoration: none; }
 .Footer .Copyright a:hover { text-decoration: underline; }
 
 
/* 
 * ----------------------------------------------------------
 * Aanmeld Pagina
 * ----------------------------------------------------------
*/

/* Algemeen
 * ---------------------------------------------------------- */
 .Content .Cont { float: left; display: inline; width: 969px; margin: 4px 11px 0px 21px; }
 .Content .Pijl { position: absolute; width: 367px; height: 36px; margin: 190px 0px 0px 318px; left: 0px; background: url('images/pijlen.gif') no-repeat; }

/* Box Blauw
 * ---------------------------------------------------------- */
 .Boxlit-Blauw { float: left; width: 290px; height: 321px; background: url('images/boxlit-blauw-bg.gif') no-repeat; }
 .Boxlit-Blauw .Kop { display: block; font: 18px Arial; color: #00485d; margin: 14px 0px 0px 18px; }
 .Boxlit-Blauw p { font: 12px Arial; color: #00485d; margin: 25px 18px 11px 18px; padding: 0px; line-height: 20px; }
 .Boxlit-Blauw .Color { font-weight: bold; color: #ff4300; }
 
 
 /* Box Oranje
 * ---------------------------------------------------------- */
 .Boxlit-Oranje { float: left; width: 290px; height: 321px; margin: 0px 45px 0px 45px; background: url('images/boxlit-oranje-bg.gif') no-repeat; }
 .Boxlit-Oranje .Kop { display: block; font: 18px Arial; color: #5e1400; margin: 14px 0px 0px 18px; }
 .Boxlit-Oranje p { font: 12px Arial; color: #5e1400; margin: 25px 18px 11px 18px; padding: 0px; line-height: 20px; }
 .Boxlit-Oranje .Color { font-weight: bold; color: #ff4300; }
 
 
/* Inschrijven
 * ---------------------------------------------------------- */
 .Inschrijven { float: left; display: inline; width: 960px; height: 225px; margin: 20px 0px 0px 21px; background: url('images/inschrijven-bg.gif') no-repeat; }
 .Inschrijven form { width: 345px; padding: 0px; margin: 65px 0px 0px 300px; }
 .Inschrijven fieldset { margin: 0px; padding: 0px; border: 0px; }
 .Inschrijven label { display: block; font: 16px Arial; font-weight: bold; color: #005578; margin-bottom: 8px; }
 .Inschrijven .Veld { display: block; width: 335px; border: 0px; padding: 9px 5px 10px 5px;  font: 12px Arial; color: #005578; background: url('images/inschrijven-input.png') no-repeat; }
 .Inschrijven .Button { float: right; width: 125px; height: 38px; border: 0px; cursor: pointer; margin-top: 8px; background: url('images/button-aanmelden.png') no-repeat; }