﻿.dfForm { background-color: #F5F5F5; margin-bottom: 20px; position: relative; }

.dfForm fieldset { padding:0px; margin: 0px; border: 0px solid transparent; }
.dfForm legend {position: absolute; text-indent:-1234em; overflow:hidden;}
.dfForm .dfClear { clear: both; display: block; height: 1px; line-height: 1px; font-size:1px; }
.dfForm .error, #formFotowedstrijd .error, .contentText.error {  color: red; font-size: 12px; clear: both; }
.dfForm .error span { display: block; clear: both; padding-top: 5px; }
 
.dfForm ul.dfRows { list-style: none; margin: 0; padding: 0 0 0 10px; position: relative; }
.dfForm .dfRows li {  padding: 5px 0; }

.dfForm label { font-size: 12px; }
.dfForm .dfLabel { display: inline; width: 170px; text-align: right; float: left; font-weight: bold; font-size: 12px; line-height: normal; color: #000000; margin: 5px 20px 5px 0; }
.dfForm .dfLabelBefore { float: left; padding: 0 10px; font-weight: bold; font-size: 12px; line-height: 26px; color: #000000; }
.dfForm .dfLabelAfter { font-size: 12px; line-height: 26px; }
.dfForm .dfLabelBold label { font-weight: bold; color: #000000; }
.dfForm .dfHideLabel .dfLabel { visibility: hidden; }
.dfForm .dfHideLabel.dfFullWidth .dfLabel,
.dfForm .dfHideLabelBefore .dfLabelBefore { display: none; }
.dfForm .dfMandatory { position: absolute; display: inline; right: 0px; width: 80px; color: #656565; font-size: 12px; line-height: 26px; }
.dfForm .dfMandatoryTop { line-height: normal; margin-top: 5px; }
.dfForm .dfControl { width: 240px; display: inline; float: left;}
.dfForm .dfControl ul { list-style: none; margin: 0; }
.dfForm .dfControl li { float:none; padding: 0; margin: 0;}
.dfForm .dfControl input, .dfForm .dfControl select, .dfForm .dfControl textarea { margin: 0 10px 0 0; font-size: 12px; }

.dfForm h4 { padding: 10px; border-bottom: 2px #FFFFFF solid; border-top: 2px #FFFFFF solid; margin-bottom: 5px; }
.dfForm h4.single { margin-bottom: 0; border-bottom: 0; }
.dfForm h4.closed { margin-bottom: -2px; }

.dfForm .dfCheckboxList span,
.dfForm .dfRadiobuttonList span { margin-top: 5px; display: block; }
.dfForm .dfCheckboxList input,
.dfForm .dfRadiobuttonList input { clear: left; float: left; margin-bottom: 5px; padding: 0; line-height: 16px; }
.dfForm .dfCheckboxList label,
.dfForm .dfRadiobuttonList label { float: left; width: 207px; margin-right: 10px; margin-bottom: 5px; line-height: normal; clear: right; line-height: 16px;}
.ie7 .dfForm .dfCheckboxList label,
.ie7 .dfForm .dfRadiobuttonList label,
.ie8 .dfForm .dfCheckboxList label,
.ie8 .dfForm .dfRadiobuttonList label { width: 201px; }

.dfForm .dfInput input, input.newsletterEmail  { width: 218px; padding: 0 5px; height: 24px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px;           
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
 }
  
.dfForm .dfSelect select { width: 228px; padding: 0 0 0 5px; margin-top: 4px; } 
.dfForm .dfTextarea textarea { width: 218px; max-width: 218px; min-width: 218px; padding: 0 5px;  height: 72px; min-height: 72px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px;         
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
}
.dfForm .dfInput input, .dfForm .dfSelect select, .dfForm .dfTextarea textarea,
input[type='text'], select, textarea, input.newsletterEmail {
-moz-box-shadow: inset 0px 3px 8px #E8E8E8; 
-webkit-box-shadow: inset 0px 3px 8px #E8E8E8; 
box-shadow: inset 0px 3px 8px #E8E8E8;  
border: 1px #E1E1E1 solid;  
color: #000000;
}

.dfForm .dfInput input, input[type='text'] { line-height: 24px; }


 /* CUSTOM STYLING */

.dfForm .contentText.contentBox, .dfForm .contentText.contentBox p { margin-bottom: 0; }

.dfForm .dfBtnContainer { padding: 10px 0 10px 198px; }
.dfForm .dfBtnContainer.dfFullWidth { padding: 10px 0 10px 10px; }
.dfForm .dfBtnContainer .btn { margin-right: 10px; }

.dfForm .dfLiteral { font-size: 12px; }
.dfForm .dfLiteral p { margin-bottom: 11px; }

.dfForm .dfFullWidthLiteral .dfLabel { width: 418px; text-align: left; font-weight: normal; line-height: normal; }
.dfForm .dfFullWidthLiteral .dfMandatory,
.dfForm .dfFullWidthLiteral .dfControl { display:none; }

.dfForm .dfFullWidth .dfControl, 
.dfForm .dfFullWidthCheckbox .dfControl { width: 418px; }
.dfForm .dfFullWidth .dfLabel { text-align: left; width: 100%; }
.dfForm .dfFullWidth input, 
.dfForm .dfFullWidth textarea { width: 408px; } 
.dfForm .dfFullWidth select { width: 418px; }
.dfForm .dfFullWidthCheckbox.dfHideLabel .dfLabel { display: none; }
.dfForm .dfFullWidth .dfCheckboxList input,
.dfForm .dfFullWidth .dfRadiobuttonList input { width: auto; margin-top: 2px; }
.dfForm .dfFullWidth .dfControl .dfCheckboxList label,
.dfForm .dfFullWidth .dfControl .dfRadiobuttonList label { width: 385px; }
.ie7 .dfForm .dfFullWidth .dfControl .dfCheckboxList label,
.ie7 .dfForm .dfFullWidth .dfControl .dfRadiobuttonList label,
.ie8 .dfForm .dfFullWidth .dfControl .dfCheckboxList label,
.ie8 .dfForm .dfFullWidth .dfControl .dfRadiobuttonList label { width: 379px; }
.dfForm .dfFullWidth.dfFloat .dfControl .dfCheckboxList label,
.dfForm .dfFullWidth.dfFloat .dfControl .dfRadiobuttonList label { width: auto; }


.dfForm .dfFixedWidth .dfCheckboxList input,
.dfForm .dfFixedWidth .dfRadiobuttonList input { float: left; margin-bottom: 5px; clear: none; }
.dfForm .dfFixedWidth .dfCheckboxList label,
.dfForm .dfFixedWidth .dfRadiobuttonList label { float: left; width: 87px; margin-right: 10px; margin-bottom: 5px; line-height: normal; clear: none; }
.ie7 .dfForm .dfFixedWidth .dfCheckboxList label,
.ie7 .dfForm .dfFixedWidth .dfRadiobuttonList label,
.ie8 .dfForm .dfFixedWidth .dfCheckboxList label,
.ie8 .dfForm .dfFixedWidth .dfRadiobuttonList label { width: 81px; }

.dfForm .dfFullWidth.dfFixedWidth .dfCheckboxList label,
.dfForm .dfFullWidth.dfFixedWidth .dfRadiobuttonList label { width: 106px; }

.dfForm .dfFloat .dfCheckboxList input,
.dfForm .dfFloat .dfRadiobuttonList input { float: left; margin-bottom: 5px; clear: none; }
.dfForm .dfFloat .dfCheckboxList label,
.dfForm .dfFloat .dfRadiobuttonList label { float: left; width: auto; margin-right: 30px; margin-bottom: 5px; line-height: 16px; clear: none;}
.dfForm .noWrap { display: inline-block; white-space: nowrap; }

.dfForm .dfFloatRight { float: right !important; }

.dfForm .disabled label { color: #C9C9C9; }
.dfForm .disabled input, .dfForm .disabled select { color: #C9C9C9; background: #FFF;
    -moz-box-shadow: 0 0 0 #FFFFFF; 
    -webkit-box-shadow: 0 0 0 #FFFFFF; 
    box-shadow: 0 0 0 #FFFFFF; 
}
.dfForm .disabled .dfMandatory { display: none; }

.dfForm h4.dfAccordion { position: relative; cursor: pointer; color: #FFF; background: #95CD5B; }
.dfForm h4.dfAccordion.closed { color: #FFF; }
.dfForm h4.dfAccordion.closed:hover { color: #000; background: none; }
.dfForm h4.dfAccordion .icon { display: block; width: 14px; height: 14px; background-color: #95CD5B; background-position: -360px 0; margin-top: -7px; top: 50%; right: 10px; }
.dfForm h4.dfAccordion.closed .icon { background-position: -390px 0; }

.dfForm .dfFullWidthLiteral .dfLabel.subkop { font-weight: bold; font-size: 14px; padding-top: 10px; margin-left: 189px; width: 229px; }
.dfForm .dfFullWidthLiteral.contentText { margin-bottom: 0; }

/* Columns
-------------------------------------------------------------- */
.dfForm .dfControl .span-1,
.dfForm .dfControl .span-2,
.dfForm .dfControl .span-3,
.dfForm .dfControl .span-4,
.dfForm .dfControl .span-5,
.dfForm .dfControl .span-6,
.dfForm .dfControl .span-7,
.dfForm .dfControl .span-8,
.dfForm .dfControl .span-9,
.dfForm .dfControl .span-10 { float:left;}

.dfForm li.span-1,.dfForm .dfControl .span-1  { width: 12px;}
.dfForm li.span-2,.dfForm .dfControl .span-2  { width: 36px;}
.dfForm li.span-3,.dfForm .dfControl .span-3  { width: 60px;}
.dfForm li.span-4,.dfForm .dfControl .span-4  { width: 84px;}
.dfForm li.span-5,.dfForm .dfControl .span-5  { width: 108px;}
.dfForm li.span-6,.dfForm .dfControl .span-6  { width: 132px;}
.dfForm li.span-7,.dfForm .dfControl .span-7  { width: 156px;}
.dfForm li.span-8,.dfForm .dfControl .span-8  { width: 180px;}
.dfForm li.span-9,.dfForm .dfControl .span-9  { width: 204px;}
.dfForm li.span-10,.dfForm .dfControl .span-10 { width: 228px;}

.dfForm li.append-1  { padding-right: 0px; margin-right: 12px;}
.dfForm li.append-2  { padding-right: 0px; margin-right: 36px;}
.dfForm li.append-3  { padding-right: 0px; margin-right: 60px;}
.dfForm li.append-4  { padding-right: 0px; margin-right: 108px;}
.dfForm li.append-5  { padding-right: 0px; margin-right: 132px;}
.dfForm li.append-6  { padding-right: 0px; margin-right: 156px;}
.dfForm li.append-7  { padding-right: 0px; margin-right: 180px;}
.dfForm li.append-8  { padding-right: 0px; margin-right: 204px;}
.dfForm li.append-9  { padding-right: 0px; margin-right: 228px;}

.dfForm li.prepend-1  { padding-left: 12px;}
.dfForm li.prepend-2  { padding-left: 36px;}
.dfForm li.prepend-3  { padding-left: 60px;}
.dfForm li.prepend-4  { padding-left: 108px;}
.dfForm li.prepend-5  { padding-left: 132px;}
.dfForm li.prepend-6  { padding-left: 156px;}
.dfForm li.prepend-7  { padding-left: 180px;}
.dfForm li.prepend-8  { padding-left: 204px;}
.dfForm li.prepend-9  { padding-left: 228px;}


/* grid for input / textarea */

.dfForm .dfControl input.span-1,
.dfForm .dfControl textarea.span-1 { width: 2px;}
.dfForm .dfControl input.span-2,
.dfForm .dfControl textarea.span-2  { width: 26px;}
.dfForm .dfControl input.span-3,
.dfForm .dfControl textarea.span-3  { width: 50px;}
.dfForm .dfControl input.span-4,
.dfForm .dfControl textarea.span-4  { width: 74px;}
.dfForm .dfControl input.span-5,
.dfForm .dfControl textarea.span-5  { width: 98px;}
.dfForm .dfControl input.span-6,
.dfForm .dfControl textarea.span-6  { width: 122px;}
.dfForm .dfControl input.span-7,
.dfForm .dfControl textarea.span-7  { width: 146px;}
.dfForm .dfControl input.span-8,
.dfForm .dfControl textarea.span-8  { width: 170px;}
.dfForm .dfControl input.span-9,
.dfForm .dfControl textarea.span-9  { width: 194px;}
.dfForm .dfControl input.span-10,
.dfForm .dfControl textarea.span-10 { width: 218px;}

/* grid for select */
.dfForm .dfControl select.span-1 { width: 14px;}
.dfForm .dfControl select.span-2  { width: 38px;}
.dfForm .dfControl select.span-3 { width: 62px;}
.dfForm .dfControl select.span-4 { width: 86px;}
.dfForm .dfControl select.span-5 { width: 120px;}
.dfForm .dfControl select.span-6  { width: 134px;}
.dfForm .dfControl select.span-7 { width: 158px;}
.dfForm .dfControl select.span-8 { width: 182px;}
.dfForm .dfControl select.span-9 { width: 206px;}
.dfForm .dfControl select.span-10 { width: 230px;}

/* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */
#calroot { z-index:10000; margin-top:-1px; width:198px; padding:2px; background-color:#fff; font-size:11px; border:1px solid #ccc;	
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow: 0px 0px 15px #c9c9c9; 
    -webkit-box-shadow: 0px 0px 15px #c9c9c9; 
    box-shadow: 0px 0px 15px #c9c9c9; }
#calhead { padding:2px 0; height:22px; } 
#caltitle { font-size:14px;	color:#438927; float:left; text-align:center; width:155px; line-height:20px; font-weight: bold; }
#calnext, #calprev { display:block; width:20px; height:8px;	margin-top: 7px; float:left; cursor:pointer; }
#calprev .icon { background-position: -260px 0; height: 8px; width: 6px; margin-left: 14px; }
#calnext { float:right; }
#calnext .icon { background-position: -320px 0; height: 8px; width: 6px; margin-right: 14px; }
#calprev.caldisabled, #calnext.caldisabled { visibility:hidden; }
#caltitle select { font-size:10px; }
#caldays { height:14px; border-bottom:1px solid #ddd; }
#caldays span { display:block; float:left; width:28px; text-align:center; font-weight: bold; color: #000000; }
#calweeks { background-color:#fff; margin-top:4px; }
.calweek { clear:left; height:22px; }
.calweek a { display:block; float:left; width:27px; height:20px; text-decoration:none; font-size:11px; margin-left:1px; text-align:center; line-height:20px; color:#656565;
    -moz-border-radius:3px;
    -webkit-border-radius:3px; } 
.calweek a:hover, .calfocus { background-color:#ABD581; color: #FFFFFF; }
a.caloff { color:#ccc; }
.caloff:hover { background-color: #EEEEEE; }
a.caldisabled { background-color:#efefef !important; color: #ccc !important; cursor:default; }
#calcurrent { background-color:#438927; color:#fff; }
#caltoday { background-color:#C7E3AB; color:#fff; }

.dfFormWrapper .dfForm, .dfFormWrapper .contentBox { margin-bottom: 2px; }

/* formFotowedstrijd */
#formFotowedstrijd { margin-bottom: 2px; }
#formFotowedstrijd .contentText { padding-bottom: 18px; }
#formFotowedstrijd ul.dfRows { padding: 0; }
#formFotowedstrijd .dfInput { padding-bottom: 18px; }
#formFotowedstrijd .dfInput input { width: 228px !important; margin: 0 10px 0 0; font-size: 11px; }
#formFotowedstrijd .dfSelect select { width: 240px !important; margin: 0 10px 0 0; font-size: 12px; }
#formFotowedstrijd .ruFileWrap { padding: 0 0 46px; }
#formFotowedstrijd .ruFakeInput { width: 140px !important; margin: 0 10px 0 0; font-size: 11px; padding: 0 5px; height: 24px;
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px;           
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
-moz-box-shadow: inset 0px 3px 8px #E8E8E8; 
-webkit-box-shadow: inset 0px 3px 8px #E8E8E8; 
box-shadow: inset 0px 3px 8px #E8E8E8;  
border: 1px #E1E1E1 solid;  
color: #656565; }
#formFotowedstrijd .ruBrowse  { width: 60px !important; display: inline-block; position: relative; outline: none; cursor: pointer; text-align: center; text-decoration: none; padding: -1px 9px; font-size: 11px; font-weight: bold; line-height: 26px; text-align: left; color: #666666; border: solid 1px #C4C4C4; height: 26px; text-decoration: none !important;    
        /* rounded corners */ 
        -webkit-border-radius: 3px; 
        -moz-border-radius: 3px; 
        border-radius: 3px;
        background-color: #FFFFFF;
        background-image: -moz-linear-gradient(top, #FFFFFF, #F5F5F5); 
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #F5F5F5)); 
        background-image: -webkit-linear-gradient(#FFFFFF, #F5F5F5); 
        background-image: linear-gradient(top, #FFFFFF, #F5F5F5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#F5F5F5'); 
        }
.ie6 #formFotowedstrijd .ruBrowse,
.ie7 #formFotowedstrijd .ruBrowse,
.ie8 #formFotowedstrijd .ruBrowse,
.ie9 #formFotowedstrijd .ruBrowse {
        height: auto;
        line-height: 21px;
    }
        
#formFotowedstrijd .ruButtonHover { text-decoration: none; color: #00ADEF; background: #ffffff; }

/* Outside dfForm */
select { font-size: 12px; max-width:100%; margin-top: 4px; height: 19px; }
.ie6 select, .ie7 select { width: 100%; }
.radio { margin-right: 5px; }
.dfForm span.radio { margin-right: 0; }
#brochure .radio { vertical-align: top; }
#brochure .radio input { margin-top: 3px; position: absolute; }
#brochure label { color: #656565; font-weight: normal; display: inline-block; width: 135px; padding-left: 17px; }

.seoPulldown { display: none; }

input.newsletterEmail { width: 196px; margin-bottom: 5px; font-size: 12px; }

.ie6 #brochure label,
.ie7 #brochure label,
.ie8 #brochure label,
.ie9 #brochure label { width: 128px; margin-top: 4px; }

.ie6 .dfForm ul.dfRows,
.ie7 .dfForm ul.dfRows { float: left; width: 100%; }
.ie6 .dfForm .dfSelect,
.ie7 .dfForm .dfSelect { float: left; }
.ie6 .dfForm .dfInput,
.ie7 .dfForm .dfInput { display: inline; }
.ie6 .dfForm .dfFullWidth .dfControl,
.ie7 .dfForm .dfFullWidth .dfControl { float: none;}
