/**
 * Fratello CMS Demo website
 *
 * Contains all declarations for form elements.
 *
 * @author 			Davy De Pauw (davy@marlon.be)
 * @copyright		Marlon BVBA <http://www.marlon.be>
 * @date 			2009-09-18
 * @lastmodified	2009-09-18
 */

/* redefine xhtml selectors
---------------------------------------------------------- */

form {
	margin: 0;
	padding: 0;
}

label {

}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

fieldset legend {
	display: none;
}

fieldset.last {
	padding-bottom: 0;
}

input,
select {
	font-family: Arial, Helvetica, sans-serif;
}

select {
	padding: 1px 0;
	width: 190px;
	border: 1px inset #c3c3c3;
}

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

.xx-small { width: 20px; }
.x-small { width: 40px; }
.small { width: 100px; }
.medium { width: 260px; }
.large { width: 425px; }
.x-large { width: 400px }
.xx-large { width: 560px; }

select.large { width: 438px; }

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

.checkbox {
	float: left;
	display: inline;
	margin: 4px 2px 0 2px;
	padding: 0;
}

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

/* forms
---------------------------------------------------------- */

.col form dl {
}

.col fieldset {
	padding: 22px 0 15px 0;
	border-bottom: 1px solid #e4e9ea;
}

.col fieldset.no-border { border: none; }

.col form dt {
	position: absolute;
	width: 160px;
	font-weight: bold;
	line-height: 22px;
	color: #949aa0;
}

.col form dd {
	position: relative;
	padding: 0 0 15px 160px;
}

form .field {
	padding: 3px 6px;
	font-size: 1em;
	color: #5b6268;
	border: 1px solid #becbce;
}

form select.field { padding-right: 4px; }

dt.focus {
	color: #0089c6 !important;
}

dd.focus .field {
	color: #339fcd;
	border-color: #7fc4e2;
}

dd p.note {
	margin: 10px 0 0 0;
	font-size: .857em;
	color: #949AA0;
}

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

p.error {
	margin: 20px 0 0 160px;
	padding-left: 20px;
	font-size: .857em;
	color: #db3921;
	background: url(../img/sprite.png) no-repeat -80px -180px;
}

dt.error { color: #db3921 !important; }
dd.error .field {
	color: #db3921;
	border-color: #eaa077;
}

.error .errors {
	position: absolute;
	top: 0;
	right: -240px;
	width: 213px;
	padding: 0 0 0 7px;
	font-size: .857em;
	background: url(../img/sprite.png) no-repeat -100px -101px;
}

.error .errors li {
	padding: 2px 8px;
	color: #fff;
	background: #db3921;
}

/* login
---------------------------------------------------------- */

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

.actions .secundary {
	float: right;
	font-size: .857em;
}

.login .actions {
	padding-right: 168px;
}

.login .button {
	margin-top: 0;
}

/* login
---------------------------------------------------------- */

#login dd {
}

#login dd.field {
	position: relative;
	float: left;
	width: 160px;
	margin: 0 10px 0 0;
	height: 25px;
	border: none;
}

#login input.field {
	position: absolute;
	top: 0;
	left: 0;
	width: 155px;
	padding: 4px 0px 4px 5px;
	font-size: .857em;
	height: 25px;
	color: #339FCD;
	border: none;
	background: url(../img/sprite_buttons.png) no-repeat 100% -604px;
}

#login .inactive {
	color: #999ea4;
}

#login #password-clear {
	z-index: 10;
}

#login input.button {
	margin-top: 0;
}

#btn-login {
	padding: 2px 0 6px 0;
	width: 48px;
	height: 25px;
	font-size: .857em;
	color: #b7e4f7;
	border: none;
	background: url(../img/sprite_buttons.png) no-repeat -182px -484px;
}

#btn-login:hover { background-position: -252px -484px; }

.error #btn-login {
	color: #ffbf8b;
	background-position: -182px -510px;
}

.error #btn-login:hover {
	color: #fff;
	background-position: -252px -510px;
}

.checkbox {
	position: relative;
	float: left;
	margin: 2px 0 0 10px;
	padding-left: 22px;
	font-size: .857em;
	line-height: 18px;
	color: #fff;
}

.checkbox input {
	position: absolute;
	top: 3px;
	left: 0;
	float: left;
	margin: 0;
	padding: 0;
	border: none;
}

.checkbox label {
	position: absolute;
	top: 0;
	left: 20px;
	margin: 0;
	padding: 0;
	width: 150px;
	line-height: 18px;
}

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

.datepicker {
	width: 80px;
}

form.record dd div {
	margin-bottom: 8px;
}

form.record dd.radio-dates label,
form.record dd .radio-dates label { float: left; }

form.record dd.radio-dates label span,
form.record dd .radio-dates label span {
	float: left;
	margin-right: 10px;
}

form.record dd.radio-dates .ui-datepicker-trigger,
form.record dd .radio-dates .ui-datepicker-trigger {
	margin-right: 10px;
}


form.record dd label .datepicker,
form.record dd.date .datepicker {
	float: left;
}

form.record dd.date,
form.record dd.time {
}

form.record dd.time {
	position: relative;
}

form.record dd.time input {
	position: absolute;
	margin-top: -32px;
	left: 250px;
}

#ui-datepicker-div {
	width: 180px;
	border: 2px solid #BECBCE;
}

#ui-datepicker-div table {
    margin: 0;
    width: 100px;
}

#ui-datepicker-div td {
	padding: 0;
	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 {
    display: none;
	position: relative;
	float: left;
	top: 0;
}

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

.ui-datepicker-header select {
    width: 70px;
	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: #E4E9EA;
}

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

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

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

.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: #E4E9EA;
}

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

.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: #339FCD;
}

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