/*
	Rimote.nl ~ Forms CSS
	Author: J.N. van Oosten
	Creation date: 25-05-2010
	Description: Form styles Rimote Media website
	Copyright (C) Rimote Media / J.N. van Oosten
*/

/*--------------------------------------------------------------------------------*/
/* FORM ELEMENTS
/*--------------------------------------------------------------------------------*/

.invalid_field {
    background: #F5D5D9 !important;
}

form {
	width:100%;
	margin: 0 auto;
}

fieldset {
	background-color:#FCFEFF;
	border:1px solid #D5E9FA;
    margin: 20px 0;
    padding: 0 0 10px;
    width: 606px;
}

@media screen and (max-width : 992px) {
	fieldset {
		width:380px;
		margin: 0 auto;
	}
}

@media screen and (max-width : 768px) {
	fieldset {
		width: 460px;
		margin: 0 auto;
	}
}

@media screen and (max-width : 479px) and (min-width : 319px) {
	fieldset {
		width: 95% !important;
		margin: 0 auto;
	}
}

/* Dirty IE fix  (fieldset background bleed bug)*/
* html fieldset{
	position: relative;
	margin-top:1em;
	padding-top:.75em;
}


	legend {
		background:url("../img/page_form_sprites.png") no-repeat scroll -999em -999em transparent;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		display:inline-block;
		margin:0 0 21px 10px !important;
		padding: 8px 10px 8px 40px;
	}
		#usergroup legend{background:url("../img/ico/ico_usergroup_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#account legend{background:url("../img/ico/ico_profile_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#profile legend{background:url("../img/ico/ico_invoice_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#invoice legend{background:url("../img/ico/ico_invoice_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#comments legend{background:url("../img/ico/ico_comments_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#contact legend{background:url("../img/ico/ico_comments_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#save legend{background:url("../img/ico/ico_save_big.png") no-repeat scroll 7px 7px #ECF8FE;}
		#delete legend{background:url("../img/ico/ico_delete.png") no-repeat scroll 7px 7px #ECF8FE;}
	
	legend.cufon_fieldset_head {
		color:#006A9F;
		font-size:1.3em;
		margin-bottom:0.7em;
	}
	
	fieldset ol {
		padding:0;
	}
	
		fieldset li {
			background: none repeat scroll 0 0 transparent;
			border-top: 1px dotted #D5E9FA;
			clear: both;
			display: inline-block;
			font-size: 1em !important;
			line-height: 1.2em;
			margin: 0 !important;
			padding: 0 0 0 30px;
			width: 575px
		}

		@media screen and (max-width :992px) {
			fieldset li {
				width: 500px;
				padding: 0 10px 0 10px;
			}
		}

		@media screen and (max-width : 768px) {
			fieldset li {
				width: 380px;
				padding: 0 10px 0 10px;
				margin:0 auto;
			}
		}

		@media screen and (max-width : 590px) {
			fieldset li {
				width: 420px;
			}
		}

		@media screen and (max-width : 479px) {
			fieldset li {
				width: 100%;
				margin:0 auto;
			}
		}

		
		fieldset li:first-child,
		fieldset li.first {
			border-top:0 none;
		}
		
		fieldset li.focus {
			background:url("../img/page_form_highlight.gif") repeat scroll 0 0 transparent;
		}	
		
			li.focus label,
			li.focus span.label{
				color:#000;
			}
		
			li.focus input.txt,
			li.focus textarea.txt{
				border-color:#666 #8F8F8F #8F8F8F #666;
			}

	fieldset label ,
	fieldset span.label{
		color:#555555;
		display:block;
		float:left;
		font-size:1.3em;
		font-weight:bold;
		line-height:1em;
		padding:16px 15px 10px 0;
		text-align:right;
		text-shadow: 0 1px 1px #fff;
		width:150px;
	}

	@media screen and (max-width : 590px) {
		fieldset span.label{
			width: 100px;
			padding: unset;
		}
	}

	@media screen and (max-width : 479px) and (min-width : 319px) {
		fieldset label,
		fieldset span.label {
			width: 75px;
		}
	}

		fieldset label,
		fieldset span.label {
			padding:16px 15px 10px 0;
			width:92px;
		}

	fieldset label.radio,
	fieldset label.check{
		color:#555555;
		display:block;
		float:left;
		font-size:1.3em;
		font-weight:bold;
		line-height:1.9em;
		padding:10px 10px 10px 0;
		text-align:right;
		width:auto;
	}
	
		fieldset label em,
		fieldset span.label em{
			color:#AF3636;
			font-size:1.1em;
		}
	
	fieldset input.txt,
	fieldset textarea.txt,
	fieldset select.select{
		background-color:#FFFFFF;
		border-color:#8F8F8F #BFBFBF #BFBFBF #8F8F8F;
		border-style:solid;
		border-width:1px;
		color:#00608F;
		display:block;
		float:left;
		font-size:1.4em;
		margin:9px 0 9px;
		padding:4px 6px;
		position:relative;
		width:250px;
		z-index:1;
	}
	fieldset input.txt[disabled],
	fieldset textarea.txt[disabled],
	fieldset select.select[disabled],
	fieldset input.disabled,
	fieldset textarea.disabled,
	fieldset select.disabled{
		background-color: #EEEEEE;
		cursor: not-allowed;
	}

	@media screen and (max-width : 768px) and (min-width:319px){
		fieldset input.txt,
		fieldset textarea.txt,
		fieldset select.select{
			width: 45%;
		}

		div#password_forgot_wrapper fieldset input#email {
			width:80%;
			max-width:300px;
			margin: 0 30px;
			
		}

		#login_form_wrapper fieldset input.txt,
		#login_form_wrapper fieldset textarea.txt,
		#login_form_wrapper fieldset select.select{
			width: 95%;
		}

	}



	fieldset input.txt:focus,
	fieldset textarea.txt:focus,
	fieldset select.select:focus{
		background-color:#FEFEEE;
	}

	fieldset input.txt:hover,
	fieldset textarea.txt:hover,
	fieldset select.select:hover{
		box-shadow: 0 0 4px #1188c3;
		-webkit-box-shadow: 0 0 4px #1188c3;
		-moz-box-shadow: 0 0 4px #1188c3;
	}
	
		fieldset input.txt.small {
			width:65px;
		}
			@media screen and (max-width : 480px) {
				/* Here Push the house number so the suffix goes under in smaller screens */
				fieldset input[name="house_number"] {
					margin-right: 83px;
				}
			}

		fieldset input.txt.medium {
			width:125px;
		}
		fieldset input.txt.medium {
			width:125px;
		}
		
	fieldset textarea.txt {
		font-family:inherit;
		height:7em;
	}
		fieldset textarea.txt.big {
			width: 415px;
		}

		@media screen and (max-width : 768px) {
			fieldset textarea.txt.big {
				width: 350px;
			}
		}

		@media screen and (max-width : 590px) {
			fieldset textarea.txt.big {
				width: 400px;
			}
		}

		@media screen and (max-width : 480px) {
			fieldset textarea.txt.big {
				width: 280px;
				left:3px;
				position:relative;
			}
		}
		
		

	fieldset select.select {
		width:264px;
	}
	
	fieldset span.help{
		font-size:12px;
		padding:9px 0 0 8px;
	}
	
		fieldset p span.help{
			padding:0;
		}	
	
	fieldset input[type="submit"],
	fieldset input.button {
		margin:17px 0;
	}
    
    fieldset label strong{
		color: #6F0000;
        font-size: 1.2em;
		font-weight:normal;
        padding-top: 5px;
    }
	
	fieldset .form_field_message {
		color:#00608F;
		display:block;
		float:left;
		font-size:1.3em;
		line-height:1.4em;
		margin: 10px 0 8px;
		padding: 4px 0;
		position:relative;
		text-shadow: 0 1px 1px #fff;
		width:250px;
		z-index:1;
	}
	
	/* Metal type fieldset */
	fieldset.metal {
		-moz-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
		-webkit-box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
		box-shadow:0 0 1px rgba(3, 3, 3, 0.8);
		background-color:#f2f2f2;
		background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#f2f2f2));
		background: -moz-linear-gradient(top,  #e4e4e4,  #f2f2f2);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#f2f2f2');
		border-color:#fff;
		margin:2em 0 0 !important;
		padding:15px 20px;
	}
		
			fieldset.metal li {
				border-top: 1px dotted #ccc;
				padding: 0;
				width: 100%;
			}
				
				fieldset.metal li.focus {
					background: none;
				}
			
			fieldset.metal li:first-child, 
			fieldset.metal li.first {
				border-top: 0 none;
			}
		
/*--------------------------------------------------------------------------------*/
/* PASSWORD STRENTH METER + SHOW PASSWORD
/*--------------------------------------------------------------------------------*/	
#password_strength {
	display:inline-block;
	margin: 25px 0 0;
	height:33px;
	padding-top:11px;
}

	@media screen and (max-width : 480px) {
		#password_strength {
			margin: 5px 0 0;
		}
	}

		#password_strength li {
			border:1px solid #ccc;
			display:inline-block;
			font-size:1.1em;
			height:18px;
			margin:0;
			padding:1px;
			text-align:center;
			width:82px;
		}

			#weak,
			#medium,
			#strong {
				color:#adadad;
				background-color:#F1F1F1;
			}

#password_strength.strong #weak, 
#password_strength.strong #medium, 
#password_strength.strong #strong  {
	background-color: #C4EFC2;
	color: #0D4F0A;
}

#password_strength.medium #weak, 
#password_strength.medium #medium {
	background-color: #FFF1AF;
	color: #6F5B00;
}

#password_strength.weak #weak {
	background-color: #FFBFBF;
	color: #666;
}

#password_strength.strong #strong, 
#password_strength.medium #medium, 
#password_strength.weak #weak {
	color:#000;
	font-weight:bold;
}

#password_show_wrapper {
	display:inline-block;
	margin-left:100px;
}

	#password_show_wrapper label{
		font-size:1.1em;
		font-weight:normal;
		padding:0 0 5px;
	}

/*--------------------------------------------------------------------------------*/
/* TOOLTIPS
/*--------------------------------------------------------------------------------*/

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9998;
}

	#tiptip_holder.tip_top {
		padding-bottom: 5px;
	}

	#tiptip_holder.tip_bottom {
		padding-top: 5px;
	}

	#tiptip_holder.tip_right {
		padding-left: 5px;
	}

	#tiptip_holder.tip_left {
		padding-right: 5px;
	}

		#tiptip_holder.tip_left #tiptip_content {
			margin-right: 5px;
		}

	#tiptip_content {
		font-size: 1.3em;
		color: #fff;
		text-shadow: 0 0 2px #000;
		padding: 5px 8px 4px 8px;
		border: 1px solid rgba(255,255,255,0.5);
		background-color: #111;
		background-color: rgba(25,25,25,0.9);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		box-shadow: 0 0 1px 1px #000000;
		-webkit-box-shadow: 0 0 1px 1px #000000;
		-moz-box-shadow: 0 0 1px 1px #000000;
	}

	#tiptip_arrow, 
	#tiptip_arrow_inner {
		position: absolute;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
		height: 0;
		width: 0;
	}

	#tiptip_arrow_inner {
		border-width: 6px;
	}

	#tiptip_holder.tip_top #tiptip_arrow {
		border-top-color: #fff;
		border-top-color: rgba(255,255,255,0.35);
	}

	#tiptip_holder.tip_bottom #tiptip_arrow {
		border-bottom-color: #fff;
		border-bottom-color: rgba(255,255,255,0.35);
	}

	#tiptip_holder.tip_right #tiptip_arrow {
		border-right-color: #fff;
		border-right-color: rgba(255,255,255,0.35);
	}

	#tiptip_holder.tip_left #tiptip_arrow {
		border-left-color: #fff;
		border-left-color: rgba(255,255,255,0.35);
	}

	#tiptip_holder.tip_top #tiptip_arrow_inner {
		margin-top: -7px;
		margin-left: -6px;
		border-top-color: rgb(25,25,25);
		border-top-color: rgba(25,25,25,0.82);
	}

	#tiptip_holder.tip_bottom #tiptip_arrow_inner {
		margin-top: -5px;
		margin-left: -6px;
		border-bottom-color: rgb(25,25,25);
		border-bottom-color: rgba(25,25,25,0.82);
	}

	#tiptip_holder.tip_right #tiptip_arrow_inner {
		margin-top: -6px;
		margin-left: -5px;
		border-right-color: rgb(25,25,25);
		border-right-color: rgba(25,25,25,0.82);
	}

	#tiptip_holder.tip_left #tiptip_arrow_inner {
		margin-top: -6px;
		margin-left: -7px;
		border-left-color: rgb(25,25,25);
		border-left-color: rgba(25,25,25,0.82);
	}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 5px 8px;
		background-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: rgba(45,45,45,0.88);
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: rgba(20,20,20,0.92);
	}
}	


/*--------------------------------------------------------------------------------*/
/* NICER INPUTS (RADIO/CHECKBOX)
/*--------------------------------------------------------------------------------*/

	/*--------------------------------------------------------------------------------*/
	/* GLOBAL DECLARATION
	/*--------------------------------------------------------------------------------*/
	.selector, 
	.selector span,
	.checker span,
	.radio span,
	.uploader,
	.uploader span.action {
	  background-image: url("../img/page_form_sprites.png");
	  background-repeat: no-repeat;
	}
	
	/*--------------------------------------------------------------------------------*/
	/* SPRITES
	/*--------------------------------------------------------------------------------*/
	/* Checkbox */
	.checker {width: 23px;height: 23px;}
	.checker input {width: 23px;height: 23px;}
	.checker span {background-position: 3px -384px;height: 23px;width: 23px;}

	.checker:active span, 
	.checker.active span {background-position: -21px -384px;}

	.checker.focus span,
	.checker:hover span {background-position: -43px -384px;}

	.checker.focus:active span,
	.checker:active:hover span,
	.checker.active:hover span,
	.checker.focus.active span {background-position: -66px -384px;}

	.checker span.checked {background-position: -89px -384px;}

	.checker:active span.checked, 
	.checker.active span.checked {background-position: -112px -384px;}

	.checker.focus span.checked,
	.checker:hover span.checked {background-position: -135px -384px;}

	.checker.focus:active span.checked,
	.checker:hover:active span.checked,
	.checker.active:hover span.checked,
	.checker.active.focus span.checked {background-position: -158px -384px;}

	.checker.disabled span,
	.checker.disabled:active span,
	.checker.disabled.active span {background-position: -182px -384px;}

	.checker.disabled span.checked,
	.checker.disabled:active span.checked,
	.checker.disabled.active span.checked {background-position: -205px -384px;}

	/* radio */
	.radio {width: 23px;height: 23px;}
	.radio input {width: 23px;height: 23px;}
	.radio span {height: 23px;width: 23px;background-position: 3px -407px;}

	.radio:active span, 
	.radio.active span {background-position: -21px -407px;}

	.radio.focus span, 
	.radio:hover span {background-position: -43px -407px;}

	.radio.focus:active span,
	.radio:active:hover span,
	.radio.active:hover span,
	.radio.active.focus span {background-position: -66px -407px;}

	.radio span.checked {background-position: -89px -407px;}

	.radio:active span.checked,
	.radio.active span.checked {background-position: -111px -407px;}

	.radio.focus span.checked, .radio:hover span.checked {background-position: -135px -407px;}

	.radio.focus:active span.checked, 
	.radio:hover:active span.checked,
	.radio.focus.active span.checked,
	.radio.active:hover span.checked {background-position: -158px -407px;}

	.radio.disabled span,
	.radio.disabled:active span,
	.radio.disabled.active span {background-position: -182px -407px;}

	.radio.disabled span.checked,
	.radio.disabled:active span.checked,
	.radio.disabled.active span.checked {background-position: -205px -407px;}
	
	/*--------------------------------------------------------------------------------*/
	/* PRESENTATION
	/*--------------------------------------------------------------------------------*/
	/* checker */
	.checker {margin-right: 3px;}

	/* radio */
	.radio {margin-right:3px;}

	@media screen and (max-width: 480px) {
		.radio {
			margin-right: 0px;
		}
	}
	
	/*--------------------------------------------------------------------------------*/
	/* CORE FUNCTIONALITY
	/*--------------------------------------------------------------------------------*/
	.selector select:focus, .radio input:focus, .checker input:focus, uploader input:focus {outline: 0;}

	/* checker */
	.checker {position: relative;float: left;}
	.checker span {display: block;float: left;text-align: center;}
	.checker input {opacity: 0;display: inline-block;}

	/* radio */
	.radio {position: relative;float: left;}
	.radio span {display: block;float: left;text-align: center;}
	.radio input {opacity: 0;text-align: center;display: inline-block;}
	
/*--------------------------------------------------------------------------------*/
/* Form fieldsets and inputs inside (lightbox)popups
/*--------------------------------------------------------------------------------*/
#colorbox fieldset {
	padding:0;
	width:352px;
}

	#colorbox fieldset li{
		padding:0 0 0 10px;
		width:345px;
	}

	#colorbox fieldset li p{
		padding:15px 0 0 0;
	}
	
	#colorbox input#check_domain.default {
		color:#666666;
		font-style:italic;
	}

	#colorbox fieldset li .check{
        font-size: 1.2em;
        padding: 2px 0 0 1px;
        text-align: left;
        width: 250px;
	}

	#pay_invoices_wrapper {
		padding: 10px !important;
	}
	
    
	#pay-invoices-form fieldset {
		border:none !important;
		width:100% !important;
		background-color: #FFFFDF;
		padding:10px;
	}
    
        #pay-invoices-form fieldset li{
			width: 480px;
			background-color: #FFFFDF;
		}
		
		@media all and (max-width:768px) {
				#pay-invoices-form {
					margin-bottom:30px;
				}
				
					#pay-invoices-form fieldset {
						width: 95%;
					}
				
					#pay-invoices-form fieldset li{
						width: 100%;
					}
		}
        
            #pay-invoices-form fieldset li .check{
                width: 386px;
            }
            
            #pay-invoices-form #payment-choices button.payment-choice {
				margin-right:10px;
			    display: block;
            }

			#pay-invoices-form #custom-amount-wrapper {
				
			}
			
				#pay-invoices-form #custom-amount-wrapper label {
					width: 50px;
				}
    
	#pay_invoice {
		margin-top:5px;
	}
/*--------------------------------------------------------------------------------*/
/* VALIDATION
/*--------------------------------------------------------------------------------*/
span.error {
	background:url("../img/page_form_sprites.png") no-repeat scroll right bottom transparent;
    color: #6F0000;
    float: right;
    font-size: 1.1em;
    margin: -46px 0 -5px;
    min-height: 40px;
    padding: 6px 5px 5px 431px;
    position: relative;
    width: 132px;
    z-index: 0;
}

input.error,
textarea.error {
	color:#6F0000;
	border-color:#6F0000 !important;
}

span.error[for="UserBedrijfHuisnr"],
span.error[for="UserHuisnr"] {
    margin: -1px 0 0 -423px;
    min-height: 39px;
    position: absolute;
}

#error_msg {	
	display:none;
	margin:13px 5px;
	width:442px;
}

/*--------------------------------------------------------------------------------*/
/* Hosting package - Tech contact form
/*--------------------------------------------------------------------------------*/
form.package-set-tech-email {
	
}

form.package-set-tech-email label {
	font-size: 1em;
	color: black;
	width: 199px;
	padding: 5px 0px 0px 7px;
	text-align: left;
}

form.package-set-tech-email input {
	margin-left: 5px;
}

form.package-set-tech-email input[type="submit"] {
	margin: 0px;
}


.spinner {
	position: relative;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 2s linear infinite;
	margin: -1em 0.5em;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}