label {
	float: left;
	clear: both;
	line-height: 20px;
	margin-bottom: 5px;
}

div.checker {
	height: 18px;
	width: 18px;
	overflow: hidden;
	border: solid 1px #ddd;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff url(../images/bg.png) repeat-x left 10px;
	float: left;
	display: inline;
	margin-right: 10px;
	position: relative;
}

div.checker.focus {
	border-color: #999;
}

div.checker.focus span {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

div.checker span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

div.checker span.checked {
	background: url(../images/check.gif) no-repeat center center;
}

div.checker span input {
	position: absolute;
	z-index: 55;
	opacity: 0;
}

/* Radio box */

div.radio {
	height: 19px;
	width: 19px;
	overflow: hidden;
	background: #fff url(../images/bg.png) repeat-x left 10px;
	float: left;
	display: inline;
	margin-right: 10px;
	position: relative;
	-webkit-border-radius: 10px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	border: solid 1px #ddd;
}

div.radio.focus {
	border-color: #999;
}

div.radio.focus span {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
}

div.radio span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

div.radio span.checked {
	background: url(../images/radio.gif) no-repeat center center;
}

div.radio span input {
	position: absolute;
	opacity: 0;
}

/* Select Box */

div.selector {
	display: block;
	width: 170px;
	border: solid 1px #ddd;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	background: url(../images/bg.png) repeat-x left 12px;
	line-height: 18px;
	margin-top: 5px;
	text-shadow: 0 1px 0 #fff;
	height: 18px;
	color: #444;
}

div.selector select {
	width: 170px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.selector.focus {
	border-color: #999;
}

div.selector span {
	position: absolute;
	left: 5px;
	top: 0px;
	font-size: 1.1em;
	padding: 0;
	display: block;
	padding-right: 20px;
	background: url(../images/select.gif) no-repeat right 60%;
	right: 0;
}

div.selector.focus span {
	left: 5px;
}

div.selector select {
	position: relative;
	font-size: 1.1em;
	line-height: 19px;
	border: 1px solid #ddd;
	margin: 0;
	padding-right: 40px;
	top:2px;
	#top:0px;
}
div.selector select option{
	padding-left: 2px;
}

.focusField{
    	border:solid 1px #73A6FF;
    	background:#EFF5FF;
    	color:#000;
    }
.idleField{
    	background:#FFF;
    	color: #6F6F6F;
		border: solid 1px #ddd;
    }

    /* Start custom button CSS here
    ---------------------------------------- */
    .btn {
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:100%/1.2 Arial,Sans-serif;
      text-decoration:none;
      color:#333;
      outline: none !important;
      }
    * html button.btn {
      padding-bottom:1px;
      }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }
    .btn span {
      background:#ddd url(../images/bg-button.gif) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #bbb;
      border-right:1px solid #aaa;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #bbb;
      border-bottom:1px solid #aaa;
      }
    
    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #bbb;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #bbb;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover/focus/active state for buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
      border-color:#9cf !important;
      color:#000;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }

    /* use if one button should be the 'primary' button */
    .primary {
      font-weight:bold;
      color:#000;
      }
