/**
 * <projectname>
 *
 * Declarations for form related elements.
 *
 * @author 			Davy De Pauw <davy@marlon.be>
 * @copyright		Marlon bvba <http://www.marlon.be>
 * @date 			2007-11-22
 * @lastmodified	2007-12-05
 */

/* redefine form specific xhtml selectors
---------------------------------------------------------- */

form {
	position: relative;
	margin: 0;
	padding: 0;
}

form p {

}

label {

}

fieldset {
	clear: left;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
}

fieldset legend {
	color:#2477BC;
	font-size:1.3em;
	font-weight:bold;
	left:0;
	margin:0 0 0;
	top:0;
	white-space:normal;
}

input, select {
	position: relative;
	margin: 0;
}

input { z-index: 5; }

input.field {
	border: 1px inset #c3c3c3;
}


select {
	font-family: Verdana, Arial, sans-serif;
	padding: 1px 0;
	border: 1px inset #c3c3c3;
	z-index: 1;
}


/* input field sizes
---------------------------------------------------------- */

.xx-small { width: 20px; }
.x-small { width: 40px; }
.small { width: 100px; }
.medium { width: 200px; }
.large { width: 240px; }
.x-large { width: 300px }
.xx-large { width: 560px; }

.scalable {
	width: 100%;
	min-width: 100px;
	max-width: 960px;
}

.checkbox { }
.radio { 
	margin-right: 5px; 
	border: none;
}

textarea {
	margin: 0 0 0 0;
	padding: 0;
	width: 445px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	border: 1px inset #c3c3c3;
}

/* subscribe
---------------------------------------------------------- */

form.subscribe,
form.activity,
form.profile {
	position: relative;
	padding: 16px 20px 16px 20px;
	width: 660px;
}

form dl {
	position: relative;
}

form dt {
	position: absolute;
	float: left;
	font-weight: bold;
	color: #848b8f;
	width: 160px;
	z-index: 1;
}

form .text dt { width: auto; }

form fieldset h2 {
	margin:0 0 12px 0;
	font-size: 1.4em;
	font-weight: bold;
	color: #2477BC;
}

form dt span {
	font-weight: normal;
}

form dd {
	position: relative;
	margin: 0;
	padding: 0 0 18px 160px;
	width: 500px;
}

form dd.or {
	position: absolute;
	top: 105px;
	height: 0;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #848B8F;
}

form dd.or span {
	position: relative;
	float: none;
	font-weight: normal;
}

form dd label {
	display: block;
}

form dd label input {
	margin-right: 5px;
}

form dd label.radio {
	display: inline;
	margin-right: 20px;
}

form dl.text dt { 
	position: static;
	float: none;
	margin-bottom: 14px;
}

form dl.text dd {
	margin-bottom: 14px;
	padding: 0;
	width: 660px;
}

form dl.leftm dd {
	padding: 0 0 0 5px;
}

form dl.text dd textarea {
	float: left;
}

form dl.text dd span {
	float: left;
}

form fieldset.note {
	width: 445px;
	background: url(../img/bg_dashed.png) repeat-x 0 0;
}

form fieldset.note p {
	font-size: .85em;
	line-height: 1.4em;
	padding: 15px 0 20px 0;
	background: url(../img/bg_dashed.png) repeat-x 0 100%;	
}

form .checkbox {
	clear: left;
}

/* errors
---------------------------------------------------------- */

span.required {
	color: #981f61;	
}

form dd span {
	clear: left;
	float: left;
	padding: 2px;
}

.error span {
	padding: 0;
	border: 2px solid #981f61;
}

.error span input { float: left; }

.error-msg {
	position: absolute;
	top: -10px;
	right: -40px;
	width: 206px;
	z-index: 10;
	background: url(../img/bg_sprite_boxes.png) no-repeat -2034px 100%;
}

form div.hidden {
	display: none;
}

.error-msg p {
	margin: 0;
	padding: 2px 23px 5px 27px;
	font-weight: bold;
	line-height: 1.3em;
	color: #fff;
	background: url(../img/bg_sprite_boxes.png) no-repeat -2034px 0;
}

/* actions
---------------------------------------------------------- */

dl.datepickers {
	width: 445px !important;
	background: url(../img/bg_dashed.png) repeat-x 0 100%;
}

.profile .actions {
	padding-left: 160px;
}

.profile .actions .button {
}

/* datepicker
---------------------------------------------------------- */

input.datepicker {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
}

#ui-datepicker-div {
	position: relative;
	z-index: 100 !important;
	font-family: Arial, Helvetica, sans-serif;
	width: 180px;
	border: 2px solid #2477bc;
}

#ui-datepicker-div table {
	position: static;
	left: 0;
	margin-bottom: 0;
	z-index: 100 !important;
	border: none;
}

#ui-datepicker-div td {
	padding: 0 !important;
	text-align: center;
	width: 25px;
	height: 25px;
	font-size: 12px;
	line-height: 25px;
}

.ui-datepicker-control {
	position: absolute;
	top: 0;
	left: 0;
	width: 180px;
}

.ui-datepicker-trigger {
	position: relative;
	float: left;
	top: 0;
}

.ui-datepicker-header {
	position: absolute;
	top: 2px;
	left: 22px;
	width: 145px;
}

.ui-datepicker-header select {
	font-size: .9em;
	border: 1px solid #495259;
}

.ui-datepicker-close {
	display: none;
	position: absolute;
	top: -25px;
	right: -2px;
	width: 25px;
	height: 25px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/ico_close.png) no-repeat 0 0;
}

.ui-datepicker-current {
	display: none;
}

.ui-datepicker-links {
	position: relative;
	height: 25px;
	background: #2477bc;
}

.ui-datepicker-links a {
	position: absolute;
	width: 20px;
	height: 25px;
	text-indent: -999em;
	overflow: hidden;
	cursor: pointer;
	background: url(../img/bg_sprite_icons.png) no-repeat 0 0;
}

.ui-datepicker-prev a { 
	top: 0;
	left: 0;
	background-position: 0 -275px; 
}

.ui-datepicker-next a { 
	top: 0;
	right: 0;
	background-position: 100% -275px; 
}

.ui-datepicker tbody {
	font-weight: bold;
	border-right: 1px solid #d9dfe2;
}

.ui-datepicker-title-row td,
.ui-datepicker-title-row:hover td {
	font-weight: bold;
	border: none;
	background: #2477bc;
}

.ui-datepicker-title-row td a,
.ui-datepicker-title-row:hover td a { color: #f2f4f5; }

.ui-datepicker-days-row td,
.ui-datepicker-days-row:hover td {
	border-bottom: 1px solid #d9dfe2;
	background: #fff;
}

.ui-datepicker-days-row td a {
	float: left;
	width: 25px;
	text-align: center;
	color: #495259;
	cursor: pointer;
}

.ui-datepicker-new-month {
	width: 85px;
}

.ui-datepicker-days-row td a:hover {
	color: #fff;
	background: #2477bc;
}

.ui-datepicker-days-row:hover td.ui-datepicker-unselectable,
td.ui-datepicker-unselectable {
	color: #afbac0;
	background: #f2f4f5;
}

iframe.ui-datepicker-cover { 
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 180px;
	height: auto;
	z-index: -1;
	border: none;
	background: transparent;
 }