/****************************************************************************************************/
/*** DEFAULT FORMULIEREN  ***************************************************************************/
/****************************************************************************************************/


/****************************************************************************************************
 * Formulier
 ****************************************************************************************************/

form {
 	padding: 0;
	margin: 0;
}
.form {
	border:1px solid #f0f0f0;
	background-color:#F9F9F9;
}

/*form a:link, form a:active, form a:visited {
	color:#ff0000;
	text-decoration: underline;						
}
	form a:hover {
		color: #000;									
		text-decoration: underline;						
	}*/


/****************************************************************************************************
 * Regels
 * omschrijving:
 *
 ****************************************************************************************************/

/* formulier koppen */
.formHeader, .formSubHeader  {
	padding:0 14px;
	margin-bottom:10px;
	font-weight:bold;
}
	.formHeader { padding-top:14px}
	.formSubHeader { margin-top:20px;}

/* formulier rij */
.formRow {
	padding-bottom:4px; 
	padding-left:7px;
	margin:0 7px 0 7px;
	height: 1%; /* HACK IE: http://www.positioniseverything.net/explorer/escape-floats.html */
	clear:both;
	position:relative;
}
html>body .formRow { padding-bottom:6px; /* Zie IE7 styles */ }

.full {}

/* formulier rij linkerkolom */
.formLabel {
	width: 196px;
	padding:2px 0 0 0;
	float: left;
	text-align:left;
}
	.formLabel label {	line-height:16px;}
	.formLabel .contTxtAccent {
		margin-left: 3px;
	}

/* formulier rij rechterkolom */
.formCtrl, .formCtrlCheck {
	float:left;
	width:198px;
	text-align:left;
}
.formCtrlCheck { /* regel hele breedte formulier */
	width:auto;
	}


/****************************************************************************************************
 * Controls
 * omschrijving:
 *
 ****************************************************************************************************/

/* GEHEEL AANPASBAAR: Algemene definitie inputvelden
----------------------------------------------------------------------------------------------------*/

input, textarea, select  {
	font-family: Arial, Helvetica, sans-serif;
	font-size:11px;
	text-align:left;
	vertical-align:top;
	color:#000000;
	margin:0 2px 2px 0; /* rechts VERPLICHT 2px */
	border: 1px solid #666;
	background-color:#fff;
}
	input, textarea { height: 15px;	padding: 2px 3px 1px 3px; }
	select {padding:0;}
	.file input {height:auto; width:192px; /* voor Firefox de breedte regelen in de html met de parameter "size" */}

.formFocus {border-color: #000;}
.formRow .formUnfocus {	color: #999; }

/* tekstregels
----------------------------------------------------------------------------------------------------*/

form .contCMSBlok {
	margin:0 14px 0 14px 0;
}

/* inputvelden - specifiek
----------------------------------------------------------------------------------------------------*/

/* 0) volle breedte van formRow */
.full textarea {	
	width:384px !important; 
	margin: 2px 0 3px 0px !important;
	height:150px !important;
}

/* 1) volle breedte van formCtrl */
.ctrl_firstname input,
.ctrl_email input,
.ctrl_plaats input,
.ctrl_organisatie input,
.ctrl_functie input,
.ctrl_straat input,
.ctrl_uw_vraag input,
.ctrl_website input,
.ctrl_bedrijfsnaam input,
.formRow textarea {
	width:184px;
}
.formRow textarea { height:auto; }

/* 2a) huisnr, postcode, tussenvoegsel */
.ctrl_lastname input#SFRM_middlename,
.ctrl_huisnr input,
.ctrl_postcode input {
	width:50px;
}

/* 2b) aanvullend op 2a) achternaam + telefoon, fax, mobiel */
.ctrl_lastname input#SFRM_lastname,
.ctrl_telefoon input,
.ctrl_mobiel input,
.ctrl_fax input	{
	width:121px;
}

/* 4) select velden */
#SFRM_birthday_day { width:50px}
#SFRM_birthday_month { width:90px}
.ctrl_land select {width:192px;} /* 8px breder dan 1) */
#SFRM_birthday_year {width:34px;}

/* 5) radiobuttons en checkboxes */
.formRadio {
	padding-top:2px;
	padding-bottom:2px;
	clear:both;
}
	.formRadio input {
		float:left;
		border:none;
		width:14px;
		height:14px;
		margin:2px 4px 0 0;
		padding:0;
		background:transparent;
		}
	html>body .formRadio input { /* HACK! deze terugcorrigeren in IE7styles.css */
		margin-top:1px;
	}
	.formRow .formRadio label,
	.full .formRadio label { 
		float:left; 
		width:165px; 
		padding-bottom:4px; 
		line-height:15px
	} 
	.full .formRadio label { width:370px; } 

/* 6) upload velden */
.ctrl_upload input {
	width:192px; /* 8px breder dan 1). Styles hebben in FF geen invloed op de upload control!! */
	height:auto;
	}
.ctrl_bin_preview { /* preview upload image */
	height:75px;
	border:1px solid #000000;
}



/* Home formulier
----------------------------------------------------------------------------------------------------*/
div.homeForm {
	margin-top: 0px;
}

div.homeForm div {
	float: left;
	text-align:left;
}

div.homeFormLabel {
	/*width: 85px;*/
	width: 100%;
}

div.homeFormField {
	/*width: 135px;*/
	width: 160px;
	.width: 160px;
}

div.homeFormField input {
	width: 135px;
	_width: 120px;
}

div.homeFormField select {
	width: 147px;
	_width: 130px;
}

div.checkbox input {
	border: none;
	background: none;
	width: 14px;
	float: left;
	margin-right: 4px;
}

div.forgotPass {
	text-align: right;
	width: 100%;
	padding: 8px 0 5px 0;
}

div.selectLanguage select {
	margin: 0;
	width: 120px;
}

div.columnBig div.checkbox {
	padding: 3px 0;
	float: left;
}

div.columnBig div.label {
	float: left;
	width: 130px;
	padding: 3px 0;
}

/* Get Nimbuzz formulier
----------------------------------------------------------------------------------------------------*/

div.loginColumn2 div.homeFormField {
	width: 200px;
}

div.loginColumn2 div.homeFormField input {
	width: 198px;
}

div.loginColumn2 div.homeFormField select {
	width: 206px;
}

div.loginColumn2 div.checkbox input {
	width: 14px;
}

/* Get Nimbuzz formulier
----------------------------------------------------------------------------------------------------*/

div.formItem {
	padding-bottom: 0px;
}

div.getNimbuzzForm {
	width: 340px;
	margin: 0 0 20px 0;
	float: left;
}

div.formLabel {
	width: 87px;
	float: left;
}

div.error div.formLabel {
	line-height: 13px;
}

div.formField,
div.formErrorMessage {
	width: 251px;
	float: left;
}

div.formField input {
	width: 243px;
}

div.formField select {
	width: 251px;
}

div.error {
	color:#F00;
	font-size:14px;
	line-height:16px;
}

div.error div.formErrorMessage {
	line-height: 13px;
	color: #F00;
	background: url(../images/shared/error_sign.gif) center left no-repeat;
	padding-left: 18px;
	width: 233px;
}

div.userMsgValid div.formErrorMessage {
	line-height: 13px;
	color: #006400;
	width: 233px;
}

div.userMsgValid div.formField input {
	border-color: #006400;
}

div.error div.formField input,
div.error div.formField select,
div.error div.formField textarea,
div.error div.homeFormField input {
	border-color: #F00;
}

div.homeForm div.error div.formErrorMessage {
	width: 110px;
}

div.homeForm div.error div.formLabel {
	width: 71px;
}

/* Create account formfields
----------------------------------------------------------------------------------------------------*/

div.createAccount {
	margin: 0;
}


div.createAccount,
div.createAccount div.formField input
 {
	width: 100%;
}

div.createAccount div.formField select {
	width: 259px;
	margin-right: 0;
}

div.createAccount div.formLabel {
	width: 121px;
}

/* Connect to messenger service formfields
----------------------------------------------------------------------------------------------------*/

div.messNetworkApp div.formField,
div.messNetworkApp div.formField input,
div.messNetworkApp div.formErrorMessage
 {
	width: 143px;
	color: #b2b2b2;
}

div.messNetworkApp div.formErrorMessage {
	color: #F00;
}

div.messForm {
	width: 151px; /* 181px */
	padding: 30px 0 0 30px;
}

div.messForm form {
	width: 151px;
}

/* Download Nimbuzz via PC
----------------------------------------------------------------------------------------------------*/

select.info{
	color: #B2B2B2;
}

div.viaPC,
div.viaPC form {
	width: 265px;
}

div.viaPC .formItem {
	padding-bottom: 12px;
}

/* Support form
----------------------------------------------------------------------------------------------------*/

div.supportForm {
	width: 298px;
	padding: 11px 0 0 0;
}

div.supportForm div.formField,
div.supportForm div.formField input {
	width: 185px;
}

div.supportForm div.error div.formErrorMessage {
	width: 150px;
}

div.supportForm div.formField select {
	width: 193px;
}

div.supportForm div.formLabel {
	width: 103px;
}

div.supportForm div.formField textarea {
	width: 185px;
	height: 86px;
}



/* Tooltip Info
	laatste versie: www.orangecoach.com.dev
----------------------------------------------------------------------------------------------------*/

.formInfo, .formInfoHover  { /* 'i' image in div */
	position:absolute;
	z-index:1;
	right:35px;
	top:1px;
	margin: 0;
	display:block;
	width: 13px;
	height:19px;
	background: url(../images/shared/btn_info.gif) left top no-repeat;
}
	html>body .formInfo, html>body .formInfoHover { top:0px; } /* HACK! deze terugcorrigeren in IE7styles.css */		
	.errHilite .formInfo, .errHilite .formInfoHover { top:6px; }
	.formInfo .content, .formInfoHover .content {display:none}

#tooltip {
	width:200px;
	background-color:#FFF !important;
	border:1px solid #f28c01 !important;
	padding:10px !important;
	filter:alpha(opacity=100) !important;
	-moz-opacity:100 !important;
	opacity:100 !important;

}
#tooltip div.body { /* http://docs.jquery.com/Plugins/Tooltip/tooltip#options */
	line-height:14px;
}

/****************************************************************************************************
 * Bottom
 ****************************************************************************************************/

.formBottom {
	padding: 0;
	text-align: right;
}
	.formBottom .right { float:right}
	
.formBottom span {
	float: right;
}

/*input.formButton {
	text-align:center;
	text-decoration: none;
	cursor: pointer;
	float:right;
	padding:0 5px 0 5px;	
}*/

	html>body input.formButton { 
		margin:0px; /*HACK! deze terugcorrigeren in IE7styles.css */
	}

/* opgemaakte button*/
input.formButton,
input.formButtonHover  {
	font-weight: bold;
	color: #FFF;
	text-align:center;
	text-decoration: none;
	background: url(../images/shared/btn_bg_center.gif) top left repeat-x;
	cursor: pointer;
	border: none;
	height: 22px;
	/*padding: 0 23px;*/
	padding: 0 1px;
	float: left;
	margin: 0;
	padding-bottom: 2px;
}

input.formButtonHover {
	font-weight: bold;
	color: #FFF;
	text-align:center;
	text-decoration: none;
	background: url(../images/shared/btn_bg_center.gif) top left repeat-x;
	cursor: pointer;
	border: none;
	height: 22px;
	/*padding: 0 23px;*/
	padding: 0 1px;
	float: left;
	margin: 0;
	padding-bottom: 2px;
	background-position: left -22px;
}

div.getNimbuzzForm input.formButton,
div.getNimbuzzForm input.formButtonHover,
div.messNetworkApp input.formButton,
div.messNetworkApp input.formButtonHover,
div.supportForm input.formButton,
div.supportForm input.formButtonHover
 {
	background: url(../images/shared/btn_bg_orange_center.gif) top left repeat-x;
}

.sfrm_status {
	position: absolute;
	display: none;
	text-align: center;
	padding: 25px 0;
	width: 200px;
	background-color: white;
	border: 1px solid black;
	z-index: 20;
}

div.btnLeft {
	background: url(../images/shared/btn_bg_left.gif) top left no-repeat;
	width: 7px;
	height: 22px;
	float: left;
}

div.btnRight {
	background: url(../images/shared/btn_bg_right.gif) top left no-repeat;
	width: 7px;
	height: 22px;
	float: left;
}

div.getNimbuzzForm div.btnLeft,
div.messNetworkApp div.btnLeft,
div.supportForm div.btnLeft
 {
	background: url(../images/shared/btn_bg_orange_left.gif) top left no-repeat;
}

div.getNimbuzzForm div.btnRight,
div.messNetworkApp div.btnRight,
div.supportForm div.btnRight
 {
	background: url(../images/shared/btn_bg_orange_right.gif) top left no-repeat;
}

div.formBottom span a,
div.formBottom span a:hover {
	text-decoration: none;
}

div.formBottom a:hover div,
div.formBottom a:hover input {
	background-position: left -22px;
	cursor: pointer;
}

div.viaPC .formBottom span {
	float: left;
}

div.inviteFriend div.formBottom {
	margin-top: -10px;
}

div.supportForm formBottom {
	margin-right: 3px;
}

div.loginColumn2 div.formBottom {
	margin-top: 5px;
}

/****************************************************************************************************/
/*** FORMULIER ERRORS  ******************************************************************************/
/****************************************************************************************************/

/* radio buttons and checkboxes no borders */
input.noborder {
	border-style:none;
}

.sfrm_errors {
	display: none;
	margin: 0 7px 7px 7px;
	padding: 5px 10px 5px 50px;
	border: 1px solid #ff0c00;
	color: #ff0c00;
	line-height:16px;
	font-weight: bold;
	background-image: url(/images/shared/err_mark_big.gif);
	background-repeat: no-repeat;
	background-position: 8px 8px;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	filter:alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
}

div.errHilite {
	background-color: #F5E0E1;
	border: 1px solid #ff0c00; /* indien border, dan padding left/right 1 minder dan in default "formRow" */
	padding-top:5px; /* VASTE waarde */
	padding-left:6px; /* indien border, dan padding left/right 1 minder dan in default "formRow" */
	margin-bottom:8px; /* VERPLICHT tussen de 5px en 10px */
}

div.errHilite .formLabel {color: #ff0c00;}
div.errHilite input { border-color:#ff0000;}
div.errHilite .contTxtAccent {}

.errMsg {
	display: none;
}
div.errHilite .errMsg {
	display:block;
	clear: both;
	margin: 4px 5px 0 0;
	padding: 2px 0 2px 0;
	padding-left:18px;
	background-image: url(../images/shared/err_mark.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height:1%;
}
.errMsg div {
	color: #ff0c00;
	font-weight: normal;
}