/**
 *
 * UI Custom Input
 *
 * CSS Stile für Custom Checkboxen im Förderlotsen. 
 *
 * @style       Standard Layout
 * @media       screen
 * @css-for		Mozilla Firefox
 * @version     0.1
 * @author      Milan Matull 
 * @copyright   Fork Unstable Media GmbH
 * @licensor    Fork Unstable Media GmbH
 * 
 */

/**
 * @section custom-checkbox
 * 
 * Wrapper-Element um Label/Input-Paare. Position auf relativ setzen, 
 * um Inputs innerhalb der Wrapper-Dimensionen absolut zu positionieren.
 * 
 */

.custom-checkbox {
	position: relative; 	
}
	
/**
 *
 * Original Checkbox positionieren.
 * 
 */

.custom-checkbox input {
	position: absolute;
	left: 3px;
	top: 2px;
	margin: 0;
	z-index: 0;
}

/**
 *
 * IE 6: Top-Positionierung ändern, da orginal Checkbox sonst zum Teil sichtbar
 * 
 */

* html .custom-checkbox input {
	top: 1px;
}

/**
 *
 * IE 7: Top-Positionierung ändern, da orginal Checkbox sonst zum Teil sichtbar
 * 
 */

* + html .custom-checkbox input {
	top: 1px;
}

/**
 *
 * Label so positionieren, dass es oberhalb der Original Checkbox liegt 
 * und diese verdeckt. 
 * 
 */

.custom-checkbox label {
	position: relative;
	display: block;
	padding-left: 21px;
	z-index: 1;
	cursor: pointer;
}

/**
 *
 * Hintergrundbild (checkbox) für Label setzen. Ausgewählt-Status wird
 * über Positionierung des Hintergrundbildes gelöst.
 * 
 */

.custom-checkbox label {
	background: url( "ui-custom-input-checkbox.png" ) no-repeat;
}

.custom-checkbox label, .custom-radio label {
	background-position: 5px 4px;
}

.custom-checkbox label.hover,
.custom-checkbox label.focus {
	background-position: 5px -96px;
}

.custom-checkbox label.checked {
	background-position: 5px -196px;
}

.custom-checkbox label.checkedHover, 
.custom-checkbox label.checkedFocus {
	background-position: 5px -296px;
}