﻿/* De Hortus website style - NetFiesta (netfiesta.nl) - v1.0 - 2 augustus 2010 */
html {height: 100%; overflow-y: scroll;}
body {height: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, Verdana, Sans-serif; font-size: 10pt; line-height: 18px; color: black; background: white;}
img {border: 0;}
h1 {margin: 4px 0 0 0; padding: 0; font-size: 12pt; height: 25px; letter-spacing: 2px; font-family: Verdana, Helvetica, Arial, Sans-serif;}
h2 {font-size: 11pt; font-weight: bold; margin: 0; padding: 0; letter-spacing: 1px; clear: left;}
p {margin: 0; padding: 0 0 18px 0;}
p.nm {padding: 0;}
a {color: black; text-decoration: none; font-weight: bold;}
ul {margin: 0 0 18px 10px; padding: 0;}
ol {margin: 0 0 18px 36px; padding: 0;}
ul li {background: url('/images/icon_bullet.png') 0 3px no-repeat; list-style-type: none; padding-left: 26px;}
table td {font-family: Helvetica, Arial, Verdana, Sans-serif; font-size: 10pt; line-height: 18px; color: black;}
#ctl00_page_container {position: relative; width: 990px; margin: 0 auto;}
.black {background-color: #000000;}

/* Header styles */
#header_container {width: 100%; height: 70px;}
#address {position: absolute; top: 11px; left: 670px; font-size: 9pt; line-height: 15px;}
#header_container a {display: block; width: 100%; height: 100%;}
#header_container a.lang {position: absolute; width: 100px; right: 0; top: 19px; height: 20px; line-height: 20px; padding-left: 28px; background: url('/images/icons.png') 0px 0px no-repeat;}
#header_container a.lang.nl {background: url('/images/icons.png') 0px -20px no-repeat;}

/* Logo styles */
#logo {position: absolute; width: 242px; height: 47px; top: 11px; left: 176px; background: url('/images/logo_hortus.png') 0px 0px no-repeat;}
.bruin #logo {background-position: 0px -47px;}
.paars #logo {background-position: 0px -94px;}
.roze #logo {background-position: 0px -141px;}
.geel #logo {background-position: 0px -188px;}
.donkergroen #logo {background-position: 0px -235px;}
.lichtblauw #logo {background-position: 0px -282px;}

/* Menu styles */
#ctl00_menu {position: absolute; top: 0; left: 0; padding: 0; margin: 0; width: 170px; background: black;}
#ctl00_menu .mitem {list-style: none; height: 25px; padding-left: 6px; line-height: 23px; border-bottom: 2px solid white; background: url('/images/icons.png') 140px -40px no-repeat;}
#ctl00_menu .mitem.darkcolor {background: url('/images/icons.png') 142px -57px no-repeat;}
#ctl00_menu a {display: block; color: white;}
#ctl00_menu .submenu {border-bottom: 2px solid white; margin-top: -2px; padding-bottom: 2px;}
#ctl00_menu .submenu a {font-weight: normal; color: black; height: 20px; line-height: 20px; padding-left: 6px;}
#ctl00_menu .submenu a:hover {text-decoration: underline;}
#ctl00_menu .submenu a.active {font-weight: bold; text-decoration: underline;}

/* Content styles */
#content_container {position: relative; width: 100%;}
#content {position: relative; top: 0; left: 170px; overflow: auto; width: 626px; min-height: 560px; padding: 8px 15px 10px 15px; border-right: 2px solid white; border-left: 2px solid white;}
#content a {border-bottom: 1px dotted black;}
#content a:hover {border-bottom: 1px solid black;}
#content a[target=_blank] {padding-right: 15px; background: url('/images/icons.png') right -82px no-repeat;}
.fullwidth {clear: left; width: 626px;}
.column {float: left; width: 300px;}
.column img {max-width: 300px;}
.column.left {margin-right: 26px;}
.floatright {float: right; margin: 4px 0 15px 15px;}
.floatleft {float: left; margin: 4px 15px 15px 0;}
.fotoonderschrift {display: block; font-size: 8pt; line-height: 16px; margin-bottom: 16px; padding: 0 6px 0 6px;}
div.spacer {clear: both; height: 18px;}
h2 span {margin-left: 10px; font-size: 8pt;}

/* Vrienden aanmeldformulier styles */
#nieuwlid_keuze_blok, #bestaandlid_nummer_blok {clear: left; display: none;}

/* Form styles */
form {clear: both; margin: 0 0 18px 0; overflow: auto;}
.smallblock {width: 430px; overflow: visible;}
form label {clear: left; float: left; width: 160px; height: 21px; line-height: 21px;}
form label span {display: block; font-size: 8pt; line-height: 14px;}
form label.radio_label {clear: none; width: auto; padding-left: 4px; padding-right: 10px; cursor: pointer;}
form label.checkbox_label {clear: none; float: left; margin-left: 5px; width: 590px; height: auto; cursor: pointer;}
form label.second_label {clear: none; width: auto; padding-left: 10px; padding-right: 10px;}
form label.errorlabel {color: #bc2025 !important; font-weight: bold;}
form input[type="text"] {float: left; width: 250px; padding: 0 10px 0 2px; height: 18px; padding-bottom: 1px; border-bottom: 1px solid #ecf2d1; border-right: 1px solid #ecf2d1; border-left: 1px solid #a1b835; border-top: 1px solid #a1b835; background-color: #e1ecae; margin-bottom: 3px; font-size: 9pt;}
.roze form input[type="text"] {border-bottom: 1px solid #ffc8c8; border-right: 1px solid #ffc8c8; border-left: 1px solid #bb1c1c; border-top: 1px solid #bb1c1c; background-color: #f8b5b5;}
.donkergroen form input[type="text"] {border-bottom: 1px solid #cef6cc; border-right: 1px solid #cef6cc; border-left: 1px solid #4da934; border-top: 1px solid #4da934; background-color: #b2e6af;}
form input[type="text"].req {background-image: url('/images/required_field.png'); background-position: right top; background-repeat: no-repeat;}
form input[type="text"].zip {width: 50px;}
form input[type="text"].date {width: 65px;}
form input[type="text"].tel {width: 100px;}
form input[type="text"].number {width: 40px;}
form input[type="text"].errorfield {background-color: #ffcbcb;}
.roze form input[type="text"].errorfield {background-color: #eee688;}
form input[type="radio"] {float: left; margin-top: 4px; cursor: pointer;}
form input[type="checkbox"] {float: left; cursor: pointer;}
form input[type="submit"] {display: block; clear: left; float: left; width: 200px; margin: 18px auto 0 100px; height: 24px; padding-bottom: 3px; font-weight: bold; cursor: pointer; background-color: #e1ecae; text-transform: lowercase; font-size: 8pt; letter-spacing: 1pt; color: #2a2a2a;} 
form input[type="submit"].disabled {background: #333436; color: gray !important; cursor: not-allowed;}
form select {background-color: #e1ecae; width: 265px; border-bottom: 1px solid #ecf2d1; border-right: 1px solid #ecf2d1; border-left: 1px solid #a1b835; border-top: 1px solid #a1b835;}
form select.req option:first-child {background-image: url('/images/required_field.png'); background-position: right top; background-repeat: no-repeat;}
option {padding-left: 5px; font-size: 9pt;}
form textarea {width: 400px; height: 54px; font-family: Helvetica, Arial, Verdana, Sans-serif; font-size: 10pt; line-height: 18px;}
.roze form select, .roze form textarea {background-color: #f8b5b5; border-bottom: 1px solid #ffc8c8; border-right: 1px solid #ffc8c8; border-left: 1px solid #bb1c1c; border-top: 1px solid #bb1c1c;}
.donkergroen form select, .donkergroen form textarea {border-bottom: 1px solid #cef6cc; border-right: 1px solid #cef6cc; border-left: 1px solid #4da934; border-top: 1px solid #4da934; background-color: #b2e6af;}
form .spacebelow {margin-bottom: 21px !important;}
form .formtext {float: left; width: auto;}
.optional_block {overflow: auto; display: none;}

/* Program styles */
.p_item {overflow: auto; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 2px dotted #e1ecae;}
.p_left {float: left; width: 250px; max-width: 250px; min-height: 36px; font-size: 8pt; margin-right: 26px;}
.p_left span {padding-left: 10px;}
.p_right {float: left; width: 350px;}

/* Right column styles */
#ctl00_right_column {position: absolute; top: 0; right: 0; width: 160px; font-size: 8pt; line-height: 16px;}
#ctl00_right_column span {display: block; height: 25px; font-weight: bold; line-height: 24px; padding: 0 0 0 6px; font-size: 10pt; line-height: 24px; border-bottom: 2px solid white;}
#ctl00_right_column>div {border-bottom: 2px solid white; padding: 12px 7px 15px 7px; cursor: pointer;}
#ctl00_right_column>div:hover {border-right: 6px solid white; padding-right: 1px; background: #eaf4bc;}
.bruin #ctl00_right_column>div:hover {background: #e9e0cd;}
.paars #ctl00_right_column>div:hover {background: #dcdcf3;}
.roze #ctl00_right_column>div:hover {background: #fcc5c5;}
.geel #ctl00_right_column>div:hover {background: #fff099;}
.donkergroen #ctl00_right_column>div:hover {background: #c1efbe;}
.lichtblauw #ctl00_right_column>div:hover {background: #d0f0f5;}
#ctl00_right_column>div div {font-weight: bold; padding-bottom: 2px;}

/* Footer styles */
#footer_container {font-size: 7pt; padding: 0 180px 0 190px;}
#ctl00_copyright {float: left; cursor: default;}
#disc {float: right;}

/* Theme color styles */
.darkcolor {background-color: #c3d95e !important;}
.bruin .darkcolor {background-color: #af9459 !important;}
.paars .darkcolor {background-color: #9797d3 !important;}
.roze .darkcolor {background-color: #f16b6b !important;}
.geel .darkcolor {background-color: #fed700 !important;}
.donkergroen .darkcolor {background-color: #77ce5f !important;}
.lichtblauw .darkcolor {background-color: #86d2dd !important;}

.lightcolor {background: #e1ecae;}
.bruin .lightcolor {background: #dfd4bd;}
.paars .lightcolor {background: #cbcbe9;}
.roze .lightcolor {background: #f8b5b5;}
.geel .lightcolor {background-color: #feeb7f;}
.donkergroen .lightcolor {background-color: #b2e6af !important;}
.lichtblauw .lightcolor {background-color: #c2e8ee !important;}
