/*
    \file   layout.css
    
	$LastChangedDate: 2011-10-23 17:43:18 +0200 (zo, 23 okt 2011) $
	$Revision: 279 $
*/

/* a fix for IE6 only - see Star Hack in Stylin' with CSS to see how the comments and * html hide this hack from other browsers \*/
* html * {
    zoom: 100%;
    /* triggers IE6 "haslayout" - google 'IE6 haslayout' for details*/
}

/* without the above hack, IE6 does not draw the header until the page is resized */
/* the problem is triggered by the universal * selector below that resets the margins, but I need to do that, hence the hack */
* {
    margin: 0;
    padding: 0;
}


h1, h2, h3, h4, h5, h6, body {
    font-family: 'Trebuchet MS', Verdana, Lucida, sans-serif;
}


/* FONT SIZES */

body {
    font-size: 10.5pt;
    line-height: 1.25;
}

h1 {
    font-size: 18pt;
    padding: 0.5em 0 0 0;
}

h2 {
    font-size: 16.5pt;
    line-height: 1.25;
    padding: .8em 0 0.3em 0;
}

h3 {
    font-size: 15pt;
    line-height: 1.25;
    padding: 0.6em 0 0.2em 0;
}

h4 {
    font-size: 13.5pt;
}

h5 {
    font-size: 12pt;
}

h6 {
    font-size: 10.5pt;
}

p {
    margin-bottom: .75em;
}

hr {
    margin-top: 10pt;
    margin-bottom: 10pt;
}

a {
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}


/* - - - - - - - - - - - - - - - - BASIC LIST STYLING - - - - - - - - - - - - - - - - */

ul, dl, ol {
    margin: 0 1em .75em 1em; 
    line-height: 1.25;
}

li, dd {
    padding: 0em 0; 
    margin-left: 2em;
}

dt {
    font-weight: bold;
}

code {
    font-size: 1.25em;
}

* html code {
    font-size: 1.1em;
}  /* default size is smaller in IE */

cite {
    font-size: .85em;
    font-style: italic;
}

blockquote {
    border-top: 2px solid;
    border-bottom: 2px solid;
    width: 50%;
    margin: 1em 0 1em 20%;
    padding: .3em 1em;
}

blockquote p {
    margin-bottom: .1em;
}

blockquote p:before { /* IDWIMIE 6 and 7 */
    content: open-quote;
    color: #cccc8f;
}

blockquote p:after { /* IDWIMIE 6 and 7 */
    content: close-quote;
    color: #366;
}

blockquote cite {
    font-size: .85em;
}

abbr, acronym {
    border-bottom: 1px dashed #000;
    cursor: default;
}

address {
    margin: 0 1em .75em 1em;
}

img {
    border: 0;
}

/* general styles */
.float_left {
    float: left;
    margin: 0 .3em .3em 0;
}
    
/* apply this class to any image or element with width - text will wrap it to the right */
.float_right {
    float: right;
    margin: 0 0 .3em .3em;
}


/* - - - - - - - - - - - - - - - - MAIN SITE LAYOUT - - - - - - - - - - - - - - - - */

div#main_wrapper {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
}  /* centers layout when > width */

div#header {
    width: auto;
    float: left;
    height: 190px;
}

div#header_inner {
    float: left;
    width: auto;
}

div#clublogo {
    float: right;
    width: 160px;
    height: 140px;
    border: none;
    padding: 25px 10px 25px 20px;
}

#threecolwrap {
    float: left;
    width: 100%;
}

#twocolwrap {
    float: left;
    width: 100%;
    display: inline; /* stops IE doubling  margin on float*/
    margin-right: -190px; /* CWS - neg margin move */
}

#content {
    width: auto;
    margin-right: 190px;
    margin-bottom: 50px;
}

#subcontent {
    width: 560px;
    float: right;
    padding: 20px 20px 20px 20px;
}

#subcontent_wide {
    width: 760px;
    float: right;
    padding: 20px 20px 20px 20px;
}

#contextmenu {
    width: 200px;
    float: left;
}

#footer {
    background: url(footer_hr.png) no-repeat top center;
    padding-top: 5px;
    width: 100%;
    clear: both;
    font-size: 8pt;
}

/* - - - - - - - - - - - - - - - - INPUT STYLES - - - - - - - - - - - - - - - - */

label {
    padding-top: 2px;
    color: #273901;
}

textarea {
    padding: 2px;
    color: #273901;
    font-family: Verdana, Tahoma, Arial;
    font-size: 9pt;
    line-height: 1.25;
    border: 1px solid #273901;
}

input {
    padding: 2px;
    color: #273901;
    font-family: Verdana, Tahoma, Arial;
    font-size: 9pt;
    border: 1px solid #273901;
}

.buttongroup input {
    border-radius: 5px;
}


input.checkbox {
    background-color: white;
    color: #663300;
}

input.radio {
    background-color: white;
    color: #663300;
    height: 14px;
    vertical-align: top;
    margin-right: 5px;
    margin-top: 3px;
    font-size: 0.7em;
    border: none;
}

select {
    background-color: white;
    color: #273901;
}

input.voteradio {
    background-color: blue;
    height: 10px;
    vertical-align: top;
}

.buttongroup input {
    color: #273901;
    padding: 2px 3px 2px 3px;
    border: 2px solid;
    margin-right: 10px;
}

/* - - - - - - - - - - - - - - - - HOME PAGE STYLES - - - - - - - - - - - - - - - - */

#images {
    padding: 20px 0px 10px 0px;
    margin-bottom: 00px;
}

#images a {
    text-decoration: none;
}

#image1 {
    padding-left: 10px;
    float: left;
    width: 390px;
}

#image2 {
    padding-left: 10px;
    float: right;
    width: 390px;
}

#image1 i, #image2 i {
    float: left;
    margin-top: 5px;
    font-size: 0.7em;
}

/* - - - - - - - - - - - - - - - - FORM STYLES - - - - - - - - - - - - - - - - */

#add_button input {
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #EAFFDF;
    color: #273901;
    padding: 2px 3px 2px 3px;
    border: 2px solid;
}

#search_form input {
    margin-right: 5px;
    float: left;
}

#default_form, #default_form_remove, #narrow_form {
    background-color: white;
    width: 700px;
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#default_form form, #default_form_remove form, #narrow_form form {
    border-top: 2px solid #273901;
    border-bottom: 3px solid #273901;
}

#default_form div.clearfix, #default_form_remove div.clearfix, #narrow_form div.clearfix
    {
    border-top: 1px solid #8ECF00;
    padding: 10px 0px;
    vertical-align: top;
}

#default_form form label, #default_form_remove form label, #narrow_form form label
    {
    width: 120px;
    float: left;
    margin: 0 10px;
    font-weight: bold;
    font-size: 10.5pt;
}

#default_form table, #narrow_form table {
    margin-left: 132px;
    border: none;
    padding: 5px;
}

#default_form table td, #narrow_form table td {
    border: none;
}

#default_form div.remark, #narrow_form div.remark {
    padding: 0 0 5px 0px;
    color: #83BF00;
    margin-left: 144px;
    font-size: 8pt;
}

#default_form div.remark a, #narrow_form div.remark a {
    color: #83BF00;
}

#default_form div.remark div.remark_icon, #narrow_form div.remark div.remark_icon {
    float: left;
    margin-top: -5px;
    padding-right: 10px;
}

#default_form div.remark div.remark_text,#narrow_form div.remark div.remark_text
    {
    
}

#default_form div.form_error, #narrow_form div.form_error {
    padding: 0 0 5px 0px;
    color: red;
    margin-left: 144px;
    font-size: 0.7em;
}

#default_form_remove div.remark {
    visibility: hidden;
}

#default_form div.buttongroup,#narrow_form div.buttongroup,#default_form_remove div.buttongroup
    {
    text-align: right;
    padding: 10px 10px 10px 0;
}

#narrow_form {
    width: 500px;
}

.form_error_message {
    font-size: 0.6em;
    font-style: italic;
    color: red;
    padding-bottom: 10px;
}

.form_error_label {
    color: red;
}

/* exceptions */
div#default_form_remove form label {
    color: gray;
}

div#default_form_remove input {
    color: gray;
}

div#default_form_remove textarea {
    color: gray;
}

div#default_form_remove div.buttongroup input {
    color: black;
}

div#change_pass {
    background-color: white;
}

div#change_pass {
    width: 450px;
    margin-left: 40px;
    margin-top: 20px;
}

div#change_pass form {
    border-top: 2px solid #CCC;
    border-bottom: 3px solid #CCC;
}

div#change_pass div.clearfix {
    border-top: 1px solid #CCC;
    padding: 10px 0px;
    vertical-align: top;
}

div#change_pass form label {
    width: 250px;
    float: left;
    margin: 0 10px;
    font-weight: bold;
    font-size: 0.9em;
}

div#change_pass div.buttongroup {
    border-top: 1px solid #CCC;
    text-align: right;
    padding: 10px 10px 10px 0;
}

/* - - - - - - - - - - - - - - - - PROGRESS INDICATOR - - - - - - - - - - - - - - - - */

div#progress_indicator {
    background-color: #273901;
    color: white;
    border: 1px solid;
    padding: 2px 12px 0px 12px;
    image-align: bottom;
    float: left;
    margin-bottom: 30px;
    margin-left: 40px;
    clear: both;
}

div#progress_indicator .current_step {
    padding-bottom: 5px;
    padding-top: 3px;
    font-weight: bold;
    color: white;
    font-size: 13pt;
    float: left;
}

div#progress_indicator .other_step {
    padding-bottom: 5px;
    padding-top: 3px;
    color: #AAA;
    font-size: 13pt;
    float: left;
}

div#progress_indicator .arrow {
    padding: 3px 5px 2px 5px;
    float: left;
}

/* - - - - - - - - - - - - - - - - OTHER STUFF - - - - - - - - - - - - - - - - */

.category_name {
    text-align: left;
    width: 150px;
}

.category_names {
    text-align: left;
    width: 150px;
}

.category_description {
    text-align: left;
    width: 500px;
}

.clearme {
    clear: both
}

/* THE ALSETT CLEARING METHOD */
.clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-table;
}

/* backslash hack hides from IE mac \*/
LEAVE THIS COMMENT RIGHT HERE ! 
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* end backslash hack */


/* - - - - - - - - - - - - - - - - ACTION RESULTS - - - - - - - - - - - - - - - - */

.action_result, .hint {
    font-style: italic;
    border: solid;
    margin: 25px 30px 25px 30px;
    padding: 10px;
    border-color: green;
    vertical-align: center;
    color: green;
}

.action_result img, .hint img {
    vertical-align: bottom;
    padding-top: 0px;
    margin-right: 5px;
}

.hint
{
	border: none;
}

.action_error_result {
    font-style: italic;
    border: solid;
    margin: 25px 30px 25px 30px;
    padding: 10px;
    border-color: red;
    vertical-align: center;
    color: red;
}

.action_error_result img {
    vertical-align: bottom;
    margin-right: 5px;
}


/* - - - - - - - - - - - - - - - - EVENTS / NEWS - - - - - - - - - - - - - - - - */

#events {
    float: left;
    width: 390px;
    padding-left: 10px;
}

#news {
    float: right;
    width: 370px;
    padding-left: 10px;
    padding-right: 20px;
}

#news h3,
#events h3 {
    font-size: 11pt;
    margin-top: 10px;
    margin-left: 0px;
    padding-left: 0px;
}

#events ul,
#news ul {
    list-style-type: none;
    margin: 0;
}

#events li,
#news li {
    text-indent: 0px;
    margin-left: 0px;
    font-size: 9.5pt;
}

#events td a {
    text-decoration: none;
}

#events td a:hover {
    text-decoration: underline;
}

#news li .date {
    font-size: 0.8em;
}

#events .more_info {
    margin-right: 100px;
    text-align: right;
    font-size: 7.5pt;
}

#events td {
    font-size: 9.5pt;
}

#events td.date {
    width: 80px;
    font-weight: bold;
    vertical-align: top;
}

#events .more_info a {
    
}

#events i {
    font-size: 0.8em;
}

#event_details {
    border-top: 1px solid #273901;
    border-bottom: 1px solid #273901;
    width: 100%;
    float: left;
    margin: 10px 0 20px 0;
    background-color: #FFA;
}

#event_details ul {
    margin: 0px 0 5px 10px;
    font-weight: bold;
}

#event_details li {
    float: left;
    list-style-type: none;
    padding: 0 10px 0 10px;
}

/* - - - - - - - - - - - - - - - - LOG IN FORM - - - - - - - - - - - - - - - - */

#login_form {
    width: 150px;
    margin: 30px 0px 5px -8px;
    padding: 10px 10px 10px 10px;
    border: 2px solid;
    background-color: transparent; /*#E6E6CF;*/
    text-align: right;
    text-indent: 0em;
}

#login_form form {

}

#login_form #login_form_links {
    padding-top: 5px;
    border-top: 2px solid #AAA;
}

#login_form div.login_form_links a {
    color: #577F00;
    text-decoration: none;
}

#login_form div.login_form_links a:visited {
    color: #577F00;
    text-decoration: none;
}

#login_form div.login_form_links a:hover {
    color: black;
    text-decoration: underline;
}

#login_form div.clearfix {
    padding: 3px 0px 5px 0px;
    vertical-align: top;
}

#login_form h2 {
    font-size: 0.9em;
    padding: 0px 0px 5px 0px;
}

#login_form form label {
    float: left;
    font-size: 8pt;
    text-align: right;
    margin-top: 4px;
}

#login_form_links a {
    font-size: 8pt;
    color: #663300;
}

#login_form_links a:visited {
    color: #663300;
}

/* postions the submit button by selecting a div with attribute type SUBMIT - IDWIMIE */
#login_form input[type="submit"] {
    display: block;
    margin: 5px 3px 10px auto;
}

/* - - - - - - - - - - - - - - - - VARIOUS TABLES - - - - - - - - - - - - - - - - */

/* basic table styling - more-styled tables in tables.css */ 
table caption {
    font-weight: bold;
    margin-top: .6em;
}

table {
    margin: 20px 0px 5px 0px;
    border-top: 2px solid #577F00;
    border-bottom: 2px solid #577F00;
    border-collapse: collapse;
}

tr.odd td {
    background: #F7FFF2;
}

table th {
    background: #F7FFF2;
    padding: 3px 5px 3px 5px;
    border-bottom: 2px solid #577F00;
    text-align: left;
}

table td {
	padding: 3px 5px 3px 5px;
    border-bottom: 1px solid #577F00;
    vertical-align: top;
}

#contextmenu table
{
    font-size: 9pt;
    border: none;
}

#contextmenu table td
{
    border-top: 1px dotted #577F00; 
    border-bottom: 1px dotted #577F00;
}

#contextmenu tr.odd td
{
    background: none;
}

#events table {
    width: 350px;
    border: none;
}

#events td {
    border: none;
}

#profile_intro table, #profile_intro td {
    border: none;
    margin-top: 0;
}

#profile_intro tr.odd td
{
    background: none;
}

table.download_overview {
    margin-top: 20px;
    margin-bottom: 20px;
    border: solid 1px;
}

table.download_overview a {
    text-decoration: none;
}

table.download_overview td,table.download_overview th {
    border: solid 1px #DDDDDD;
    text-align: left;
    padding: 3px 5px 3px 5px;
    vertical-align: top;
}

table a {
	text-decoration: none;
}

table.profiles {
    border: none;
}

table.profiles td {
    border: none;
    width: 150px;
    background: white;
    font-size: 9pt;
}

table.content_list td {
    padding-left: 10px;
}

table.content_list th {
    padding-left: 10px;
    text-align: left;
}

table.content_list td.content_item {
    width: 200px;
}

table.upload_list th {
    padding-left: 10px;
    text-align: left;
}

table.upload_list td {
    padding-left: 10px;
	text-align: left;
}

table.upload_list td.deadline_passed {
    padding-left: 10px;
	color: red;
}

table.attachments td {
    padding-left: 10px;
    font-size: 9pt;
}

table.attachments th {
    padding-left: 10px;
    text-align: left;
    font-size: 9pt;
}

/* Leden intro styles */
td.intro_item {
    padding: 2px;
    font-weight: bold;
    vertical-align: top;
    text-align: right;
    width: 120px;
}

td.intro_text {
    vertical-align: top;
    width: 100%;
    padding: 2px;
}

#profile_intro_photo {
    float: left;
    width: 150px;
}

td.intro_photo {
    vertical-align: top;
    width: 100px;
    text-align: center;
    line-height: 20px;
}

td.intro_photo a {
    text-decoration: none;
}

/* - - - - - - - - - - - - - - - - INNER MARGINS - - - - - - - - - - - - - - - - */

#content_inner, #nav_inner {
    overflow: hidden;
    /* prevents oversize elements from breaking the layout */
}

#header_inner {
    padding: 1em 2em;
}

#contextmenu_inner {
    padding: 10px .5em 1em 1em;
}

#content_inner
{
    padding: 10px 0px 10px 0px;
}

#footer_inner {
    padding: .5em 5em;
    text-align: center;
}

/* - - - - - - - - - - - - - - - - MENU / NAVIGATION - - - - - - - - - - - - - - - - */

#nav_inner {
    padding: 10px .5em 1em 1em;
}

#nav ul,#nav dl,#nav ol,#contextmenu ul {
    margin: .5em 1em .75em 0em;
    list-style-type: none;
}

#nav li {
    margin-left: 0px;
    text-indent: 0px;
    margin-bottom: 0.3em;
}

/* headers in the menu */
#nav ul li {
    font-size: 13pt;
    line-height: 1.25;
    padding: .5em 0 0 0;
    font-weight: bold;
    text-indent: 0em;
    vertical-align: center;
    padding-top: 6pt;
    color: #273901;
}

/* menu items */
#nav ul ul li {
    font-weight: normal;
    font-size: 10.5pt;
    margin-top: 2px;
    padding: 0px;
}

#contextmenu h2 {
    font-size: 12pt;
}

#contextmenu li {
    margin: 0 0 0 0;
    margin-bottom: 0;
    font-size: 1em;
}

#contextmenu hr {
    margin-top: 20px;
}

#nav a, #contextmenu a, #footer a {
    color: #273901;
    text-decoration: none;
}

#nav a:visited, #contextmenu a:visited, #footer a:visited {
    color: #273901;
    text-decoration: none;
}

#nav a:hover, #contextmenu a:hover, #footer a:hover {
    color: #273901;
    text-decoration: underline;
}

#menu #username {
    margin: 10px 10px 10px 0px;
    font-size: 7pt;
    text-align: left;
}

/* - - - - - - - - - - - - - - - - PICTURES - - - - - - - - - - - - - - - - */

.leden_foto {
    text-align: center;
}

.leden_foto_ondertitel {
    text-align: center;
    font-style: italic;
    font-size: 8pt;
}

.leden_foto_ondertitel_edit {
    font-style: italic;
    font-size: 8pt;
}

#profile_photo_thumbnail {
    margin: 20px;
}

.upload_photo {
	margin-top: 10px;
}

.profiles img {
    border: 1px solid #8ECF00;
}

/* - - - - - - - - - - - - - - - - MISC - - - - - - - - - - - - - - - - */


.account_active {
    color: #577F00;
}

.account_not_active {
    color: red;
}