@charset "utf-8";
/*
    Copyright Wugly 2009-2011
    CSS voor forms
*/

/* Opmerkingen */
.opmerking_wrap { padding-top: 1px; }
p.opmerkingLarge { width:578px; border:1px solid #EEE; background:#F7F7F7; margin:10px; padding:10px; position:relative; }
	p.opmerkingLarge img { vertical-align:middle; float:left; margin:0 5px 0 0; }
	p.opmerkingLarge input.textFieldLarge { display:inline; width:400px; border:1px solid #CCC; padding:2px; color:#555; }

/* Special opmerkingen */
.opmerking_inside { width:478px; border:1px solid #EEE; background:#F3F3F3; margin:10px 0 0 0; padding:5px 10px 10px 10px; position:relative; }
	.opmerking_inside input.textField_large { width:472px; margin: 0 0 10px 0; }
	.opmerking_inside .closeButton { background:#F3F3F3 url(../images/opmerkingClose.gif) no-repeat top left; width:50px; height:16px; position:absolute; top:3px; right:3px; border:0px none; outline:none; text-indent:-9999px; overflow:hidden; }
	.opmerking_inside .closeButton:hover { background:#F9F9F9 url(../images/opmerkingClose.gif) no-repeat bottom left; cursor:pointer; }
.opmerking_seperate { width:260px; border:1px solid #EEE; background:#F3F3F3; margin:10px 0 0 0; padding:6px 5px; position:relative; }
    .opmerking_seperate img { margin: -2px 0 0 0; float:left;}

.sameAddress { width:498px; background:#F00; margin:0 10px; background:#F5F5F5; border:1px solid #BBB; }
	.sameAddress h3 { background:url(../images/lightbulb_on.png) no-repeat 5px 7px; text-indent:22px; color:#555; }
		.sameAddress ul.sameAddressList { margin:0 10px 10px 10px; padding:0 13px; text-indent:0; }

.formElements { margin: 10px; border-bottom: 10px solid #FFF; }
.column_630 .formElements { width:600px; }

.formElementFloat { display: inline; float: left; margin: 0px; }

label.label { font-weight:bold; color:#1CAEEA; position:relative; }
span.asterisk { font-size:1.3em; color:#EC008C; }

input.textField_large { width:595px; display:block; border:1px solid #CCC; padding:2px; color:#333; }
input.textField_mini { width:84px; display:block; border:1px solid #CCC; padding:2px; color:#333; }
input.textField_float { width:150px; display:block; border:1px solid #CCC; padding:2px; color:#333; float: left; }
textarea.textArea_large { width:595px; display:block; border:1px solid #CCC; padding:2px; color:#333; }
textarea.textArea_larger { width:550px; display:block; border:1px solid #CCC; padding:2px; color:#333; }

select.formSelect_large { width:500px; display:block; border:1px solid #CCC; padding:1px; }
	select.formSelectLarge option { padding:0 5px 0 3px; color:#333; }

select.formSelect { border:1px solid #CCC; margin:0 .3em 0 0; color:#333; padding:1px; }
	select.formSelect option { padding:0 5px 0 3px; color:#333; }

label.radioButtons { margin:5px 20px 0 0; }
	label.radioButtons input { margin:0 .3em 0 0; }
label.checkBoxes { margin:.3em 1.6em .3em 0; }
	label.checkBoxes input { margin:0 .3em 0 0; }

label.radioButtons_inline { margin:5px 20px 0 0; display: block; float: left; }
	label.radioButtons_inline input { margin:0 .3em 0 0; }
label.checkBoxes_inline { margin:.3em 1.6em .3em 0; display: block; float: left; }
	label.checkBoxes_inline input { margin:0 .3em 0 0; }
label.checkBoxes_inline_30percent { margin:0 1.6em .4em 0; display: block; float: left; width: 170px; }
	label.checkBoxes_inline_30percent input { margin:0 .3em 0 0; }

.formElement_float { display: inline; float: left; margin: 0 10px 0 0; }

.formSuccess { border:1px solid #3aa731 !important; background: #ebf7ea; }
.formError { border:1px solid #AF2B2B !important; background: #ffe9e9; }
.formSubSuccess { background:#FFF url(../images/icon_check_10px.png) no-repeat 3px 3px; border:1px solid #3aa731; color:#19920f; }
.formSubError { background:#FFF url(../images/icon_alert_10px.png) no-repeat 3px 3px; border:1px solid #AF2B2B; color:#d70000; }
.formSubMessage { background:#FFF url(../images/icon_message_10px.png) no-repeat 3px 3px; border:1px solid #CCC; color:#555; }
.formSubSuccess, .formSubError, .formSubMessage { border-top: none; margin:0; display:block; width:auto; display:block; padding:2px 5px 1px 20px; font-size: 10px; line-height: 12px; position: absolute; }

/* voor buttons onder wrappers */
.form_buttons { border-bottom:20px solid #FFFFFF;display:inline;float:left;margin:0px 0px 0px 10px;width:620px;line-height: 26px;}
.form_buttons a { color: #00AEEE; }
.form_buttons a:hover { text-decoration: none; }

/* Extra elementen */
.fixedwidth {width:80px;display:block;float:left;}
.span10pxspacing {border-left:10px solid #FFF;border-right:10px solid #FFF;}
span.asterisk {font-size:1.3em;color:#EC008C;}
span.info {color:#555;font-weight:normal;padding-top:3px;display:block;}
span.blockElement {display:block;clear:both;width:auto;position:relative;}

p.formErrors .ucr_error {
	background:#AF2B2B url(../images/alert_icon.png) no-repeat 5px 5px;
	border:1px solid #AF2B2B;
	width:534px;
	color:#FFF;
}

.ucr_message {
	background:#F9F9F9 url(../images/information_icon.png) no-repeat 5px 5px;
	border:1px solid #DDD;
	margin-top:1px;
	display:block;
	width:554px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#555;
}


/* Write a Review Table */
.catFormWidth { width: 230px; }
label.labelCheckBox { display:block; float:left; width: 220px; clear: left; }
label.labelCheckBox input { margin-right: 5px; }
form .formElementCategories { width: 225px; }

	/* Grade table */
	table.rateShop { border-bottom: 1px solid #dbdbdb; margin: 0px 0px 5px 0px; float: right; }
		tr.rateShopGrades { border-bottom: 1px solid #dbdbdb; }
		form table.rateShop .radioButton { width: 12px; padding: 0px; margin:0px; }
		form table.rateShop td.rateName { height: 24px; text-align: left; }
		form table.rateShop th ul.rateShopGrade { list-style-type: none; margin: 0px; padding: 0px; }
		form table.rateShop label { width: 24px; display: block; float:left; text-align: center; }
		form table.rateShop th ul.rateShopGrade li { float: left; width: 24px; margin: 0px; text-align: center; }

        table.rateShop tr.formError {
            border: none;
        }

/* ErrorForms */

#reviewCategoriesArea .formErrors {
    padding: 0px;
    width: 225px;
}

.column_630 p.errorTitle {
	display:block;
	background:#cf5151;
	color:#FFF;
	font-weight:bold;
	padding: 0;
	margin: 0;
	height: 27px;
	width: 600px;
	text-indent: 30px;
	line-height: 26px;
	background: #cf5151 url(../images/icons/formError_title.png) no-repeat top left;
}

.formElementCategories p.errorTitle { width: 225px; }

.blockElement p.errorTitle {
	display:block;
	background:#cf5151;
	color:#FFF;
	font-weight:bold;
	padding: 0;
	margin: 0;
	height: 27px;
	width: 620px;
	text-indent: 30px;
	line-height: 26px;
	background: #cf5151 url(../images/formError_title.png) no-repeat top left;
}

div.formErrors {  /* ie hacks gebruikt */
	padding:10px;
	background:#FFD8D8;
	border-bottom:1px solid #cf5151;
	color:#932424;
}


/* Let op! widths apart gemaakt voor ie6 en ie7 */
.column_630 div.formErrors { width:580px; }
.column_630 .errorFix div.formErrors {margin-left: 10px;}
.column_630 .errorMargin div.formErrors {margin-bottom: 10px;}
.formElementFloat div.formElement_float div.formErrors { width: 205px; }

	div.formErrors label.label { color:#932424;	}

	div.formErrors label.checkBoxes_inline_30percent { width: 29%; }

	div.formErrors span.asterisk { color:#932424; }

	div.formErrors input.textField_large {
		display:block;
		width:574px;
		border:1px solid #CF5151;
		margin:3px 0;
	}

	div.formErrors textarea.textArea_large {
		display:block;
		width:574px;
		border:1px solid #CF5151;
		margin:3px 0;
	}

	div.formErrors select.formSelect_large {
		display:block;
		width:580px;
		border:1px solid #CF5151;
		padding:2px;
		margin:3px 0;
	}





















/* Wugly formulieren */

label.labelLarge,
label.labelMedium,
label.labelSmall {
	font-weight:bold;
	color:#1CAEEA;
	position:relative;
}

.fixedwidth {
 	width:80px;
	display:block;
	float:left;
}
 
.span10pxspacing {
	border-left:10px solid #FFF;
	border-right:10px solid #FFF;
}

span.asterisk {
	font-size:1.3em;
	color:#EC008C;
}
	
span.info {
	color:#555;
	font-weight:normal;
	padding-top:3px;
	display:block;
}

span.blockElement {
	display:block;
	clear:both;
	width:auto;
	position:relative;
}

/* Alle elementen zonder specificaties */

label.radioButtons {
	margin:.3em 1.6em .3em 0;
}

	label.radioButtons input {
		margin:0 .3em 0 0;
	}

label.checkBoxes {
	margin:.3em 1.6em .3em 0;
}

	label.checkBoxes input {
		margin:0 .3em 0 0;
	}

select.formSelect {
	border:1px solid #CCC;
	margin:0 .3em 0 0;
	color:#333;
	padding:1px;
}
	
	select.formSelect option {
		padding:0 5px 0 3px;
		color:#333;
	}
		
/* Large (66) */
input.textFieldLarge {
	display:block;
	width:595px;
	border:1px solid #CCC;
	padding:2px;
	color:#333;
}

.formError input.textFieldLarge, .formErrors input.textFieldLarge { width: 575px; }
	
textarea.textAreaLarge {
	display:block;
	width:595px;
	border:1px solid #CCC;
	padding:2px;
	color:#333;
}

.formError textarea.textAreaLarge, .formErrors textarea.textAreaLarge { width: 575px; }

select.formSelectLarge {
	display:block;
	width:595px;
	border:1px solid #CCC;
	padding:1px;
}

	select.formSelectLarge option {
		padding:0 5px 0 3px;
		color:#333;
	}
		
/* Medium (33) */
input.textFieldMedium {
	display:block;
	width:270px;
	border:1px solid #CCC;
	padding:2px;
	color:#555;
}
	
textarea.textAreaMedium {
	display:block;
	width:270px;
	border:1px solid #CCC;
	padding:2px;
}

select.formSelectMedium {
	display:block;
	width:276px;
	border:1px solid #CCC;
	padding:2px;
}

	select.formSelectMedium option {
		padding:0 5px 0 3px;
		color:#333;
	}

/* Feedback */
input.textFieldFeedback {
	display:block;
	width:590px;
	height:17px;
	float:left;
	border:1px solid #CCC;
	padding:5px 4px 4px 4px;
	color:#333;
}
	
.feedbackSuccess {
	background:#F0FFDF url(../images/check.png) no-repeat 5px 5px;
	border:1px solid #a5d174;
	display:block;
	width:268px;
	height:22px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#3A6F00;
	position:absolute; top:0; right:0;
}
	
.feedbackFailure {
	background:#FFD8D8 url(../images/alert_icon.png) no-repeat 5px 5px;
	border:1px solid #df7b7b;
	display:block;
	width:268px;
	height:22px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#932424;
	position:absolute; top:0; right:0;
}

.feedbackMessage {
	background:#F3F3F3 url(../images/information_icon.png) no-repeat 5px 5px;
	border:1px solid #CCC;
	display:block;
	width:268px;
	height:22px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#555;
	position:absolute; top:0; right:0;
}
	
	
	
select.formSelectLarge {
	display:block;
	width:586px;
	border:1px solid #CCC;
	padding:1px;
}

	select.formSelectLarge option {
		padding:0 5px 0 3px;
		color:#333;
	}
		
input.submitButton,
button.submitButton {
	background:#c6c5d7 url(../images/button_bg.gif) repeat-x top left;
	border:1px solid #003c74;
	padding:2px 6px;
	display:inline;
	color:#333;
	overflow:visible;
}

	input.submitButtonHover,
	button.submitButtonHover {
		background:#d4eaf0 url(../images/button_bg.gif) repeat-x bottom left;
		border:1px solid #1caeea;
	}

/* Focus op velden */

.formFocus {
	border:1px solid #999;
	background:#FFF6CF;
}

/* Extra elementen */

	.ajaxLoader {
		position:absolute;
		top:33px;
		left:598px;
	}
	
/* Tussenveld */

p.opmerkingLarge {
	width:578px;
	border:1px solid #EEE;
	background:#F7F7F7;
	margin:10px;
	padding:10px;
	position:relative;
}

	p.opmerkingLarge img {
		vertical-align:middle;
		float:left;
		margin:0 5px 0 0;
	}

	p.opmerkingLarge input.textFieldLarge {
		display:inline;
		width:400px;
		border:1px solid #CCC;
		padding:2px;
		color:#555;
	}

.opmerkingAuto {
	width:auto;
	display:block;
	border:1px solid #EEE;
	background:#F9F9F9;
	margin:10px;
	padding:10px;
}

	.opmerkingAuto img {
		float:left;
		margin:0 10px 0 0;
	}

/* Multiple Shop edit */
    label.multiShop { cursor: pointer; }




















/* ErrorForms */

p span.errorTitle {
	display:block;
	width:100%;
	background:#CF5151;
	color:#FFF;
	font-weight:bold;
	padding:3px 0;
}

	p span.errorTitle img {
		width:16px;
		height:16px;
		vertical-align:text-bottom;
		margin:0 3px 0 6px;
	}
	
p.formErrors {  /* ie hacks gebruikt */
	padding:10px;
	margin:-10px 10px 0/* ie7 hack */ 10px;
	background:#FFD8D8;
	border-bottom:1px solid #cf5151;
	color:#932424;
}

.inlinePopup p.formErrors {  /* ie hacks gebruikt */
	padding:10px;
	margin:-12px 0 0 0;
	background:#FFD8D8;
	border-bottom:1px solid #cf5151;
	color:#932424;
}

/* Let op! widths apart gemaakt voor ie6 en ie7 */
.column_980 p.formErrors { width:900px; }
.column_630 p.formErrors { width:580px; }
.column_300 p.formErrors { width:260px; }


	p.formErrors label.labelLarge {
		color:#932424;
	}
	
	p.formErrors span.asterisk {
		color:#932424;
	}
	
	p.formErrors input.textFieldLarge {
		display:block;
		width:560px;
		border:1px solid #CF5151;
		margin:3px 0;
	}

	p.formErrors textarea.textAreaLarge {
		display:block;
		width:560px;
		border:1px solid #CF5151;
		margin:3px 0;
	}

	p.formErrors select.formSelectLarge {
		display:block;
		width:566px;
		border:1px solid #CF5151;
		padding:2px;
		margin:3px 0;
	}

	table tr.formError td {
		background: #FFD8D8;
		color:#932424;
		text-indent: 5px;
	}
	

	table tr.formError td span.asterisk {
		color:#932424;
	}

	
	
	
	
	
	


















	
	
	
	
	
span.usernameCheckResult {
	display:none;
}

.ucr_success {
	background:#F0FFDF url(../images/check.png) no-repeat 5px 5px;
	border:1px solid #4F8F08;
	margin-top:1px;
	display:block;
	width:554px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#3A6F00;
}

p.formErrors .ucr_success {
	width:534px;
}

.ucr_error {
	background:#FFD8D8 url(../images/alert_icon.png) no-repeat 5px 5px;
	border:1px solid #CF5151;
	margin-top:1px;
	display:block;
	width:554px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#932424;
}

p.formErrors .ucr_error {
	background:#AF2B2B url(../images/alert_icon.png) no-repeat 5px 5px;
	border:1px solid #AF2B2B;
	width:534px;
	color:#FFF;
}

.ucr_message {
	background:#F9F9F9 url(../images/information_icon.png) no-repeat 5px 5px;
	border:1px solid #DDD;
	margin-top:1px;
	display:block;
	width:554px;
	display:block;
	padding:2px 5px 2px 25px;
	color:#555;
}

.invisible {
	display:none;
}


	
	
	
	





/* Submit button Container */

.submit_container {
	display:block;
	width:auto;
	clear:both;
	margin:0 0 0 20px;
	border-bottom:20px solid #FFF;
}






body.inlinePopup {
	background:#FFF;
	margin:0 auto;
	padding:1em;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#555;
	position:relative;
}

	body.inlinePopup h1 {
		margin:0;
		font-weight:bold;
		font-size:1.8em;
		color:#00aeef;
	}

	body.inlinePopup h2 {
		margin:1em 0;
		font-weight:normal;
		font-size:1em;
		color:#555;
	}

	body.inlinePopup .formFocus {
		border:1px solid #BBB;
		background:#FFF9DF;
	}


/* Inner / custom search form */
.customsearch { margin: 10px 0px; padding: 1px 0 0 65px;}
.innerSearch form.innerSearchForm,
.customsearch form.customsearchForm { margin:10px 0px 0px 0px; padding:0; height:48px; }
.innersearch form.innersearchForm p,
.customsearch form.customsearchForm p { margin:0; padding:0; }
.innerSearch .SF1, 	.innerSearch .SF2, .innerSearch .innerSearchButton,
.customsearch .SF1, .customsearch .SF2, .customsearch .innerSearchButton { background-image: url(../images/search_sprite.png); background-repeat: no-repeat; }


	.innerSearch .SF1, .innerSearch .SF2,
    .customsearch .SF1, .customsearch .SF2 {
		background-position: 0px -48px;
		display: block;
		width:300px;
		height: 26px;
        margin: 0px 20px 0px 0px;
		float:left;
	}

	.innerSearch input.searchField, .customsearch input.customsearchField {
		width:290px;
		height: 14px;
		font-size:12px;
		margin: 6px 5px 2px 5px;
		font-family:Arial, Helvetica, sans-serif;
		color:#333;
		vertical-align:top;
		border:none;
	}

     .innerSearch .SF1 input.searchField, .innerSearch .SF2 input.searchField,
     .customsearch .SF1 input.customsearchField, .customsearch .SF2 input.customsearchField{
            background-color: transparent;
            width:290px;
            height: 14px;
            font-size:12px;
            margin: 6px 5px 2px 5px;
            font-family:Arial, Helvetica, sans-serif;
            vertical-align:top;
            border:none;
        }

    .innerSearch .SF1 .greyTxt, .customsearch .SF1 .greyTxt { background-position: -449px -48px; color:#888; padding-left: 70px; }
    .innerSearch .SF2 .greyTxt, .customsearch .SF2 .greyTxt { background-position: -449px -62px; color:#888; padding-left: 38px; }

	.innerSearchButton, .customsearchButton {
		background-position: -300px -48px;
        background-color: transparent;
        float: left;
        display: inline;
		text-align:center;
		border:none;
		width:72px;
		height: 26px;
		font-weight:bold;
		text-decoration:none;
		color:#FFF;
		font-size:12px;
		font-family:Arial, Helvetica, sans-serif;
		vertical-align:middle;
		padding:3px 0 5px 0;
		cursor: pointer;
	}

	.innerSearchButton:hover, .customsearchButton:hover { background-color: transparent; background-position: -372px -48px; }


#changeCityDropdown {
    width: 325px;
    float: left;
	height: 32px;
    padding: 0px 4px;
    margin: 0px 10px 5px 10px;
    background: #f7f7f7;
    border: 1px solid #EEEEEE
}

    #changeCityDropdown input#changeCityName {
        width: 240px;
        float: left;
        margin: 4px 0px;
        display: inline;
        height: 14px;
        padding: 4px;
        font-size: 0.9em;
        border: 1px solid #CCCCCC;
    }

    #changeCityDropdown input#changeCityName:hover {
        background: #fff6cf;
    }
    
    #changeCityDropdown input#submit {
    background:#c6c5d7 url(../images/button_bg.gif) repeat-x top left;
	border:1px solid #003c74;
    margin: 4px 0px 0px 5px;
	padding:2px 6px;
	display:inline;
	color:#333;
	overflow:visible;
}

	 #changeCityDropdown input#submit:hover {
		background:#d4eaf0 url(../images/button_bg.gif) repeat-x bottom left;
		border:1px solid #1caeea;
	}



