/**
 * form.css - Global styles
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

/* General */

#nationality-value {
	margin: 0 0 0 10px;
}

#panel {
	float: left;
	width: 660px;
	background: url('../img/form.png') no-repeat !important;
	background: url('../img/form.gif') no-repeat;
	padding: 20px;
	margin: 20px 0 0 0;
}

#panel-footer {
	float: left;
	width: 700px;
	height: 4px;
	background: url('../img/form-footer.png') no-repeat !important;
	background: url('../img/form-footer.gif') no-repeat;
	padding: 0;
	margin-bottom: 20px;
}

p.warning {
	color: #F00;
	font-weight: bold;
}

ul#lower-premie-sliders {
	width: 515px;
	float: right;
}

#marktplaats-thumb {
	float: left;
}


/* Maak uw keuze */

.choose {
	display: block;
	border: 1px solid #EDEDED;
	margin: 0 0 10px 0;
	padding: 10px;
	width: 638px;
	cursor: pointer;
	overflow: hidden;
}

.choose:hover,
.choose.sfhover {
	background: #C3DFA7;
}

.choose span {
	display: block;
	margin: 0;
	padding: 0;
	width: 450px;
	color: #666666;
}

.choose:hover span,
.choose.sfhover span {
	color:#666;
}

.choose span.choose-button {
	display: block;
	float: right;
	background: url('../img/choose-sprite.png') no-repeat;
	width: 123px;
	height: 21px;
	padding: 6px 0 5px 10px;
	color: #69B022;
	font-weight: bold;
}

.choose:hover span.choose-button,
.choose.sfhover span.choose-button {
	background-position: 0 -32px;
}


/* Step list */

#form-steps,
#form-steps-home {
	position: relative;
	background: url('../img/steps-bg.gif') no-repeat;
	width: 638px;
	height: 28px;
	padding: 0 10px 0 10px;
	margin: 10px 0 20px 0;
	border: 1px solid #008BCF;
	list-style: none;
	color: #008BCF;
}

#form-steps-home {
	margin: 30px 0 10px 20px;
}

#form-steps li,
#form-steps-home li {
	float: left;
}

#form-steps li a,
#form-steps-home li a {
	position: absolute;
	display: block;
	height: 28px;
	width: 20px;
	padding: 0 0 0 10px;
	font: 16px arial;
	line-height: 28px;
	color: #008BCF;
}

/*#form-steps li a:hover,*/
#form-steps li a.selected,
#form-steps-home li a.selected {
	position: absolute;
	background: url('../img/step-over.png') no-repeat;
	height: 40px;
	margin-top: -2px;
	line-height: 30px;
	color: #FFFFFF;
}

#form-steps li a#step-one,
#form-steps-home li a#step-one {
	margin-left: 0;
}

#form-steps li a#step-two,
#form-steps-home li a#step-two {
	margin-left: 30px;
}

#form-steps li a#step-three,
#form-steps-home li a#step-three {
	margin-left: 60px;
}

#form-steps li a#step-four,
#form-steps-home li a#step-four {
	margin-left: 90px;
}

#form-steps li a#step-five,
#form-steps-home li a#step-five {
	margin-left: 120px;
}

#form-steps li a#step-six,
#form-steps-home li a#step-six {
	margin-left: 150px;
}

#form-steps li a#step-seven,
#form-steps-home li a#step-seven {
	margin-left: 180px;
}

#form-steps li a#step-eight,
#form-steps-home li a#step-eight {
	margin-left: 210px;
}

#form-steps li.step,
#form-steps-home li.step {
	font: 16px arial;
	padding: 0;
	margin: 0 5px 0 0;
	line-height: 28px;
	color: #008BCF;
}


/* Form */

form {
	padding: 0;
	margin: 0;
}


form ul {
	list-style: none;
	border-top: 1px solid #D9D9D9;
	border-bottom: 1px solid #D9D9D9;
}

form ul li {
	height: 30px;
	padding: 10px;
	border-bottom: 1px solid #F5F5F5;
	line-height: 30px;
}

form li .column {
	float: left;
	width: 50%;
}

form li .column-year {
	position: relative;
	float: left;
	width: 50%;
}

form ul.styled {
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: disc;
	list-style-image: none;
	list-style-position: inside;
}

form ul.styled li {
	height: auto;
	border-bottom: 1px solid #F5F5F5;
	line-height: normal;
}

#year-span {
	display: none;
	position: absolute;
	left: 178px;
	bottom: 25px;
	height: auto;
	width: 250px;
	background: #FFF url(../img/tooltip.png) 95% 5% no-repeat;
	border: 1px solid #008BCF;
	line-height: normal;
	padding: 15px;
	z-index: 1;
}

#premie-herberekenen {
	display: block;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 14px;
	background: url(../img/next-step.png) 0 0 no-repeat;
	float: right;
	width: 120px;
	padding: 0 0 5px 5px;
	margin: 0;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.breakdown-warning {
	display: none;
}

form li.toggle {
	display: none;
	background: #E6F4FA;
}

form ul li.stretch {
	height: auto;
	/*overflow: hidden;*/
}

form ul li.small {
	height: 14px;
	width: auto;
	padding: 10px;
}

form ul li.double {
	height: 28px;
}

form ul li.small label {
	float: left;
	margin: 0;
}

form li.light {
	background: #E6F4FA;
}

form li.dark {
	background: #D4E7F6;
	border-bottom: 1px solid #FFFFFF;
	border-top: 0;
}

form .no-border {
	border: 0;
}

form .no-border-top {
	border-top: 0;
}

form .no-border-bottom {
	border-bottom: 0;
}

form li.low {
	height: 10px;
	line-height: 10px;
}

form li.low label {
	margin: 0;
}

#add-accessoire,
#add-child {
	display: block;
	background: url(../img/extra-form-button.png) no-repeat;
	width: 200px;
	height: 30px;
	margin: 0 0 0 133px;
	padding: 0 0 0 10px;
	color: #666666;
	font-weight: bold;
}

#add-accessoire:hover,
#add-child:hover {
	background-position: 0 -30px;
}

#remove-child {
	display: block;
	background: url(../img/remove-kind.jpg) no-repeat;
	width: 158px;
	height: 30px;
	margin: 0 0 0 20px;
	padding: 0 0 0 10px;
	color: #666666;
	font-weight: bold;
}

#remove-child:hover {
	background-position: 0 -30px;
}

/* Tooltip */

.hidden {
	visibility: hidden;
}

.tooltip {
	vertical-align: middle;
	margin: 0 0 0 5px;
}

.calendar {
	vertical-align: middle;
	margin: 0 0 0 5px;
	cursor: pointer;
}

.tooltip-popup,
#home-tooltips li a.tooltip-popup {
	display: inline-block;
	position: relative;
	width: 25px;
	height: 25px;
	background: url('../img/tooltip.png') no-repeat;
	margin: 0 0 0 5px;
	vertical-align: middle;
}

.blue-tip {
	background: url('../img/tooltip-blue.png') no-repeat;
}

.light-tip {
	background: url('../img/tooltip-lightblue.png') no-repeat;
}

.tooltip-popup span,
#home-tooltips li a.tooltip-popup span {
	display: none;
	position: absolute;
	left: 20px;
	bottom: 20px;
	height: auto;
	width: 250px;
	background: #FFF;
	border: 1px solid #008BCF;
	line-height: normal;
	padding: 15px;
}

.tooltip-popup:hover span,
#home-tooltips li a.tooltip-popup:hover span {
	display: block;
}

.topleft span {
	left: auto !important;
	right: 20px;
	bottom: 20px;
}


/* Input */

form input {
	vertical-align: middle;
	border: 1px solid #D9D9D9;	
}

form textarea {
	vertical-align: top;
}

form #motivation,
form #other-use-motivation,
form #camper-rent-motivation,
form #prev-insurance-motivation,
form #drive-entitlement-motivation,
form #driving-skills-motivation,
form #injury-history-motivation {
	width: 630px;
	height: 100px;
}

form #comment {
	width: 220px;
	height: 100px;
}

input.radio {
	line-height: 30px;
	border: 0;
}

input.checkbox {
	line-height: 30px;
	border: 0;
}

input.text {
	background: url('../img/input-bg.png') no-repeat;
	padding: 6px 5px;
	height: 16px;
}

input.indent {
	margin: 0 0 0 130px;
}

input.extra-indent {
	margin: 0 0 0 203px;
}

input.trail {
	margin: 0 0 0 10px;
}

.small {
	width: 40px;
}

.small-medium {
	width: 80px;
}

.smallother {
	width: 50px;
}

.medium {
	width: 120px;
}

.large {
	width: 158px;
}

.fat {
	font-weight: bold;
}

input#year,
input#carvalue {
	font-weight: bold;
	color: #69B022;
}

input#license-plate {
	background: url(../img/license-plate-bg.png) no-repeat;
	height: 16px;
	width: 88px;
	padding: 7px 0px 7px 42px;
	border: 0;
	text-transform: uppercase;
	font-weight: bold;
}

input#license-plate.wsv-error {
	background: url(../img/license-plate-error.png) no-repeat;
	color: #FFF;
}


/* Label */

label {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	margin: 8px 0;
}

label.indent {
	width: 130px;
	font-weight: bold;
}

label.extra-indent {
	width: 200px;
	font-weight: bold;
}

label.trail {
	margin: 0 0 0 10px;
	font-weight: bold;
}

label.radio {
	width: 30px;
}

label.group {
	float: left;
	margin: 9px 0;
}

label.green,
input.green {
	color: #69B022;
}

span.description {
	display: block;
	font: italic 10px Arial;
	color: #008BCF;
}

span.right {
	float: right;
	line-height: 30px;
}


/* Validation */

form fieldset.group {
	float: left;
	border: 0;
	padding: 0 0 0 5px;
}

form fieldset.group legend {
	display: none;
}

form fieldset.no-float {
	display: inline;
	float: none;
}

form fieldset.wsv-error {
	background-color: #FFBABA;
}

form input.wsv-error {
	border: 1px solid #C00;
}

form textarea.wsv-error {
	border: 1px solid #C00;
}

form input.radio {
	border: 0;
}


/* Bottom bar */

#bottom-bar {
	height: 30px;
	padding: 20px 0 4px 0;
}

#bottom-bar #prev {
	display: block;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 14px;
	background: url('../img/prev-step.png') 0 0 no-repeat;
	float: left;
	width: 85px;
	padding: 0 0 0 15px;
}

#bottom-bar #next {
	display: block;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 14px;
	background: url('../img/next-step.png') 0 0 no-repeat;
	float: right;
	width: 120px;
	padding: 0 0 5px 5px;
	margin: 0;
	border: 0;
	cursor: pointer;
	text-align: left;
}

#bottom-bar input#next:hover,
#bottom-bar input#next.sfhover,
#bottom-bar a#prev:hover {
	background-position: 0px -30px;
}


/* Mijn gegevens */

#tekstpagepanel #mijngegevens-steps {
	height: 31px;
	padding: 0;
	margin: 0;
	list-style: none;
}

#tekstpagepanel #mijngegevens-steps li {
	float: left;
}

#tekstpagepanel #mijngegevens-steps li a {
	display: block;
	background: url(../img/mijngegevens-tab-sprite.png) no-repeat;
	width: 94px;
	height: 21px;
	padding: 5px 7px;
	color: #FFF;
	font-weight: bold;
}

#tekstpagepanel #mijngegevens-steps li a:hover {
	text-decoration: none;
}

#tekstpagepanel #mijngegevens-steps li a.selected {
	background-position: 0 -31px;
	color: #69B022;
}

#tekstpagepanel .mijngegevens .small-no-pad {
	height: 34px;
	width: auto;
	padding: 0;
	line-height: normal;
}

#tekstpagepanel .mijngegevens .schade-melden-row {
	display: block;
	background: #FFF url(../img/arrows-sprite.png) 93% 2px no-repeat;
	width: 100%;
	height: 14px;
	font-weight: bold;
	color: #69B022;
	padding: 10px;
}

#content-tekstpage .schade-melden-row:hover {
	background: #69B022 url(../img/arrows-sprite.png) 93% -32px no-repeat;
	color: #FFF;
	text-decoration: none;
}

#login-button {
	width: 88px;
	height: 33px;
	margin: 0 0 0 -5px;
	border: 0;
	background: url(../img/login-button-sprite.png) no-repeat;
	cursor: pointer;
}

#login-button:hover {
	background-position: 0 -32px;
}

#content-tekstpage .edit-button {
	float: left;
	display: block;
	background: url(../img/mijngegevens-sprite.png) no-repeat;
	width: 123px;
	height: 30px;
	padding: 0 0 0 9px;
	margin: 0 0 0 -4px;
	font-weight: bold;
	color: #FFF;
}

#content-tekstpage .edit-button:hover {
	background-position: 0 -32px;
	text-decoration: none;
}

#tekstpagepanel .mijngegevens a.edit-button-right {
	float: right;
	display: block;
	background: url(../img/mijngegevens-sprite.png) no-repeat;
	width: 123px;
	height: 30px;
	padding: 0 0 0 9px;
	font-weight: bold;
	color: #FFF;
	margin: -8px 0 0 0;
}

#tekstpagepanel .mijngegevens .double a.edit-button-right {
	margin: auto 0;
}

#content-tekstpage .edit-button-right:hover {
	background-position: 0 -32px;
	text-decoration: none;
}

/* Tellfriendform */

#tellfriend-form #next {
	display: block;
	height: 30px;
	line-height: 30px;
	color: #FFFFFF;
	font-size: 14px;
	background: url('../img/next-step.png') 0 0 no-repeat;
	width: 120px;
	padding: 0 0 5px 5px;
	margin: 0;
	border: 0;
	cursor: pointer;
	text-align: left;
}

#tellfriend-form ul {
	border: 0;
}

#tellfriend-form ul li {
	padding-left: 0;
}

#tellfriend-form p.green {
	color: #69B022;
	line-height: 160%;
}