/*
 * form.css
 *
 * Opmaak formulier
 *
 * 20081022
 * Eerste versie
 * 20081027
 * Uitbreiding naar andere formulierelementen > checkbox, radio en select zijn niet op te maken
 * Aangepast op basis van  prettyForms
 */

/*
 * Indien javascript geactiveerd krijgt formulier element extra class .formJS
 * .form = opmaak indien CSS, geen Javascript
 * .formJS = opmaak indien CSS en JS geactiveerd
 */

/***********************************/
/**** Opmaak zonder Javascript *****/ 
/***********************************/

.form {
}
.form p {
    margin: 0;
	clear: both;
}
.form label {
    float: left;
    width: 100px; /* Breedte label instellen */
    display: block;
    cursor: pointer; /* handje voor label */
}



/********************************/
/**** Opmaak met Javascript *****/ 
/********************************/
.formJS label {
     cursor: auto; /* pointer; voorlopig uitschakelen tot probleem labels opgelost is */
}


/**** Kader rond elementen *****/
/*
 * Achtergrondafbeeldingen
 * shadowUpperLeft.gif = achtergrond links en boven
 * shadowLowerRight.gif = achtergrond rechts en onder
 * shadowBottomLeft.gif = achtergrond hoekje links onder
 * shadowTopRight.gif = achtergrond hoekje rechts boven
 */
.formJS .frmBgTopLt {
    float: left;
    background: url(../images/shadowUpperLeft.gif) top left no-repeat;
}
.formJS .frmBgBottomRt {
    float: left;
    background: url(../images/shadowLowerRight.gif) bottom right no-repeat;
}
.formJS .frmBgBottomLt {
    float: left;
    background: transparent url(../images/shadowBottomLeft.gif) bottom left no-repeat;
}
.formJS .frmBgTopRt {
    float: left;
    background: transparent url(../images/shadowTopRight.gif) top right no-repeat;
	padding: 2px 5px; /* Afstand binnen de achtergrondrand */
}

/***** label ****/
.formJS label {
	line-height: 20px; /* hoogte aanpassen aan hoogte formulier element */
}

/***** text en password *****/
.formJS .frmText {
	border: none;
	background: none;
	color: #ccc;
}
.formJS .frmText:focus,
.formJS .frmText.focus {
	/* .focus voorzien voor IE */
	color: #000;
}

/***** textarea *****/
.formJS .frmTextarea {
	border: none;
	background: none;
	color: #ccc;
}
.formJS .frmTextarea:focus,
.formJS .frmTextarea.focus {
	/* .focus voorzien voor IE */
	color: #000;
}

/***** checkbox *****/
.formJS .frmCheckboxReplace{
	/* opmaak van koppeling die via js rond checkbox geplaatst wordt */
	border:0;
	display: block;
	float: left;
}
.formJS .frmCheckboxReplace img{
	/* Afmeting achtergrondafbeelding checkbox */
	width :12px;
	height :12px;
}
.formJS .frmCheckboxReplace.on {
	/* achtergrondafbeelding checkbox wanneer aangevinkt */
	background:url(../images/checkboxChecked.gif) no-repeat center center;
}
.formJS .frmCheckboxReplace.off {
	/* achtergrondafbeelding checkbox wanneer uitgevinkt */
	background:url(../images/checkboxUnchecked.gif) no-repeat center center;
}
/***** radio *****/
.formJS .frmRadioReplace{
	/* opmaak van koppeling die via js rond radio geplaatst wordt */
	border:0;
	display: block;
	float: left;
}
.formJS .frmRadioReplace img{
	/* Afmeting achtergrondafbeelding checkbox */
	width :14px;
	height :14px;
}
.formJS .frmRadioReplace.on {
	/* achtergrondafbeelding checkbox wanneer aangevinkt */
	background:url(../images/radiobuttonChecked.gif) no-repeat center center;
}
.formJS .frmRadioReplace.off {
	/* achtergrondafbeelding checkbox wanneer uitgevinkt */
	background:url(../images/radiobuttonUnchecked.gif) no-repeat center center;
}

/***** select *****/
.formJS .frmSelectWrapper {
	/* div element dat alles omgeeft */
	position:relative;
	}
.formJS .frmSelectSelected {
	/* a element met huidige selectie */
	text-decoration: none;
	color: #000;
	display:block;
	float: left;
	position:relative;
	top:0px;
	left:5px;
}
.formJS .frmSelectBtn {
	/* a element met knop */
	float:right
}
.formJS .frmSelectBtn img {
	/* a element met knop */
	width: 15px;
	height: 15px;
	background:url(../images/selectDrop.gif) no-repeat right center;
}
.formJS .frmSelectDropdown {
	/* div element met dropdownlijst */
	display: none; /* startsituatie */
	position: absolute;
	/*z-index: 5000;*/
	top:18px;
	left:0;
	border: solid 1px #000;
	background: #fff;
}
.formJS .frmSelectDropdown a {
	/* koppelingen in dropdown lijst */
	display:block;
	text-decoration:none;
	color:#000;
}
.formJS .frmSelectDropdown a.selected {
	/* huidig item in dropdown lijst */
}
/***** buttons *****/

.formJS .frmButton {
	border:none;
	background:none;
	cursor: pointer;
}