/**********************************************/
/*  Custom Form Elements : ClearBlue Theme    */
/*                                            */
/*  classes:                                  */
/*  F - Element has focus                     */
/*  H - Mouse is over the Element             */
/*  A - Element is somehow active             */
/*  P - Element is pressed                    */
/*                                            */
/*  classes can be used in any combination    */
/**********************************************/

/**********************************************/
/*  CFE - Basic Form Styles                   */
/**********************************************/
form ul{
  clear: both;
  float: left;
  list-style: none;
  padding: 0;
}

form ul li{
  clear: both;
  float: left;
  padding: 3px;
  width: 99.7%; /* feel good little ie 7 */
}

label.cfeTextL ,label.cfePasswordL, label.cfeFileL, label.cfeSelectL, label.cfeTextareaL,
.cfeTextL > span.label, .cfePasswordL > span.label, .cfeTextareaL > span.label, .cfeFileL > span.label{
  float: left;
  margin-right: 5px;
  padding: 4px 0;
}

form input:focus, form textarea:focus{outline: none}

input[type="text"], textarea{
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/**********************************************/
/*  customFormElements :: COLORS              */
/**********************************************/

/* label */
label.H, label.H .label{color:#3CF}
label.F, label.F .label{color:#F7179E}
label.D, .cfeButton.D .label, .cfeButtonSlide.D .label{color:#999}
.cfeButton.P .label, .cfeButtonSlide.P .label{color: #666}

/* select */
.cfeSelect.D .cfeOptionSelected, .cfeSelect.D .cfeOption{color:#999}

.cfeOption.H, .cfeOption.H label.H
{
  background-color: #666;
  color: #FFF;
}

.cfeSelectMultiple .cfeOption.H, .cfeSelectMultiple .cfeOption.H label.H{
  background-color: transparent;
  color: #333;
}

input[disabled], input[readonly],
textarea[disabled], textarea[readonly]{
  color: #CCC;
}

/* fieldsets */
fieldset{border-color: #CCC}

fieldset.H, fieldset.F{
  background-color: #FFFFF0;
  border-color: #F0E68C;
}

fieldset.H legend{background-color: #FFFFF0}
fieldset.F legend, fieldset.P legend{background-color: #F0E68C}
fieldset.P, fieldset.F{border-color: #F0E68C}

/* tooltip */
.cfeTip{
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url(../gfx/help.png);
  margin-left: 2px;
  margin-top: 1px;
}

.tip{
  background-color: #FFF;
  border-color: #666;
  color: #333;
}

/**********************************************/
/*  customFormElements :: LAYOUT              */
/**********************************************/
/* fieldsets */
fieldset{
  border-style: solid;
  border-width: 2px;
}

fieldset.H, fieldset.F{border-style: dashed}

/* labels */
label{cursor: pointer}
label.D{cursor: default}

/* tool tip related */
.tip{
  border-style: solid;
  border-width: 1px;
  font-size: .9em;
  padding: 2px 4px;
  z-index: 100;
}

.cfeQM{
  background: url(../gfx/qm.gif) no-repeat;
  cursor: help;
  height: 13px;
  margin-left: 3px;
  vertical-align: middle;
  width: 12px;
}

/*
** form elements are inline-blocky
*/
.cfeButton, .cfeText, .cfePassword, .cfeTextarea,
.cfeFile, .cfeFilePath, .cfeFilePath .filePath
.cfeSelect, .cfeSelectContainer,
.cfeSelectMultiple, .cfeSelectMultipleContainer,
.cfeSlide, .cfeSlide1, .cfeSlide2, .cfeSlide3,
.cfeButton .label
{
  display: inline-block;
  vertical-align: middle;
}

.cfeButton .label{
  vertical-align: baseline;
}

/*
 * BUTTON
 * the very generic
*/
.cfeButton{
  cursor: pointer;
  background: url(../gfx/cfeButtonL.png) no-repeat;
  margin-right: 10px;
}

.cfeButton > .cfeSlide{
  background: url(../gfx/cfeButtonR.png) no-repeat right top;
  margin-right: -10px;
  padding: 0 10px 0 0;
  text-align: center;
  width: 100%;
}

.cfeButton.P{background-position: 0 -40px}
.cfeButton.H{background-position: 0 -80px}
.cfeButton.F{background-position: 0 -120px}
.cfeButton.H.F{background-position: 0 -200px}
.cfeButton.H.P{background-position: 0 -40px}
.cfeButton.F.P{background-position: 0 -160px}
.cfeButton.D{background-position: 0 -240px !important; cursor: default;}

.cfeButton.P > .cfeSlide{background-position: 100% -40px}
.cfeButton.H > .cfeSlide{background-position: 100% -80px}
.cfeButton.F > .cfeSlide{background-position: 100% -120px}
.cfeButton.H.F > .cfeSlide{background-position: 100% -200px}
.cfeButton.H.P > .cfeSlide{background-position: 100% -40px}
.cfeButton.F.P > .cfeSlide{background-position: 100% -160px}
.cfeButton.D > .cfeSlide{background-position: 100% -240px !important}

/* button labels */
.cfeButton .label{
  min-width: 24px;
  min-height: 24px;
  width: 100%;
  height: 100%;
  line-height: 1.8em;
}

.cfeButton > .cfeSlide > .label{
  padding-left: 5px;
}

/* IE 7 hack for padding issue */
* html .cfeButton > .cfeSlide > .label{
  padding-left: 8px;
}

.cfeButton.P > .cfeSlide > .label, .cfeButton.P > .label{
  margin: 1px -1px -1px 1px;
}

/*
 * CHECKBOXES / RADIOBUTTONS
 * adding a mark
*/
.cfeCheckbox, .cfeRadiobutton{margin-right: 0; background-position: 0 0}
.cfeCheckbox.A.D > .label, .cfeRadiobutton.A.D > .label{opacity: .5}

.cfeCheckbox{background-image: url(../gfx/cfeCheckbox.png)}
.cfeCheckbox.A > .label{background: url(../gfx/cfeCheckboxMark.png) no-repeat 0 0}

.cfeRadiobutton{background-image: url(../gfx/cfeRadiobutton.png)}
.cfeRadiobutton.A > .label{background: url(../gfx/cfeRadiobuttonMark.png) no-repeat 0 0}

/* textfields with sliding doors */
.cfeText, .cfePassword{
  background: url(../gfx/cfeTextL.png) no-repeat;
  border: 0;
  margin-right: 10px;
}

.cfeText > .cfeSlide, .cfePassword > .cfeSlide{
  background: url(../gfx/cfeTextR.png) no-repeat right top;
  border: 0;
  height: 26px;
  margin: 0 -10px 0 3px;
  padding: 2px 4px 1px 2px;
}

.cfeText input, .cfePassword input{
  background: none;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 100%;
  height: 24px;
}

.cfeText.F, .cfePassword.F{background-position: 0 -40px}
.cfeText.D, .cfePassword.D{background-position: 0 -80px}
.cfeText.F > .cfeSlide,.cfePassword.F > .cfeSlide{background-position: 100% -40px}
.cfeText.D > .cfeSlide,.cfePassword.D > .cfeSlide{background-position: 100% -80px}

/* teaxtareas with sliding doors */
/* reused for select container */
.cfeTextarea, .cfeSelectContainerWrapper{
  background: url(../gfx/cfeTextareaT.png) no-repeat left top;
}

.cfeTextarea .cfeSlide1, .cfeSelectContainerWrapper .cfeSlide1{
  background: url(../gfx/cfeTextareaR.png) no-repeat right top;
  margin: 0 -10px 10px 0;
}

.cfeTextarea .cfeSlide2, .cfeSelectContainerWrapper .cfeSlide2{
  background: url(../gfx/cfeTextareaB.png) no-repeat right bottom;
  margin: 0 0 -10px 10px;
}

.cfeTextarea .cfeSlide3, .cfeSelectContainerWrapper .cfeSlide3{
  background: url(../gfx/cfeTextareaL.png) no-repeat left bottom;
  margin: 10px 0 0 -10px;
  border: 0;
  padding: 5px 3px 2px;
}

.cfeTextarea textarea{
  margin: -10px 0 1px 0;
  padding: 2px;
  background: #FFF;
  border: none;
}

.cfeTextarea.F, .cfeSelectContainerWrapper.F {background-image: url(../gfx/cfeTextareaT-F.png)}
.cfeTextarea.F .cfeSlide1, .cfeSelectContainerWrapper.F .cfeSlide1{background-image: url(../gfx/cfeTextareaR-F.png)}
.cfeTextarea.F .cfeSlide2, .cfeSelectContainerWrapper.F .cfeSlide2{background-image: url(../gfx/cfeTextareaB-F.png)}
.cfeTextarea.F .cfeSlide3, .cfeSelectContainerWrapper.F .cfeSlide3{background-image: url(../gfx/cfeTextareaL-F.png)}

.cfeTextarea.D, .cfeSelectContainerWrapper.D {background-image: url(../gfx/cfeTextareaT-D.png)}
.cfeTextarea.D .cfeSlide1, .cfeSelectContainerWrapper.D .cfeSlide1{background-image: url(../gfx/cfeTextareaR-D.png)}
.cfeTextarea.D .cfeSlide2, .cfeSelectContainerWrapper.D .cfeSlide2{background-image: url(../gfx/cfeTextareaB-D.png)}
.cfeTextarea.D .cfeSlide3, .cfeSelectContainerWrapper.D .cfeSlide3{background-image: url(../gfx/cfeTextareaL-D.png)}

/*****************************
 * select boxes              *
 ****************************/
.cfeSelect > .cfeSlide > .label{
  position: relative;
  margin-right: 20px;
  margin-left: 3px;
  text-overflow: ellipsis;
  height: 100%;
  text-align: left;
}

.cfeSelect.P > .cfeSlide > .label{
  margin: 1px 19px -1px 4px;
}

/* labelArrow is IE7 only */
.cfeSelect > .cfeSlide > .label:after, .cfeSelect > .cfeSlide > .labelArrow{
  content: " ";
  border-width: 6px;
  border-color: gray transparent transparent transparent;
  border-style: solid;
  position: absolute;
  right: 10px;
  top: 12px;
  margin-left: 3px;
}

.cfeSelect.H > .cfeSlide > .label:after, .cfeSelect.H > .cfeSlide > .labelArrow{
  border-color: #000 transparent transparent transparent;
}

.cfeSelectContainer{
  background-color: #FFF;
  margin: -7px 3px 4px;
}

.cfeOption{
  display: block;
  cursor: pointer;
  /* the huge padding right is to make sure even the widest option's text has enough space to be fully displayed when selected */
  padding: 2px 30px 2px 7px;
}

/* creates a neat overlay with offset effect */
.cfeSelectContainerWrapper{
  position: absolute;
  top: -3px;
  left: 3px;
}

/* scrolling for select field */
.cfeScrollerWrapper{
  background: #F8F8F8;
  position: absolute;
  width: 30px;
  margin: -7px 3px 4px; /* same as cfeSelectContainer */
  /* those values compensate the padding given to the container which holds all options */
  right: -7px;
}

.cfeScrollerWrapper > span{
  position: absolute;
  right:0;
  width: 20px;
}

.cfeScrollerWrapper > .cfeButton{
  height: 32px;
}

.cfeScrollerWrapper .scrollTop{
  top: 0;
}

.cfeScrollerWrapper .scrollTop .label{
  background: url(../gfx/scrollUp.gif) no-repeat center;
}

.cfeScrollerWrapper .scrollRail{
  padding-right: 5px;
  top: 30px;
  bottom: 30px;
  right: 3px;
}

.scrollRail .scrollKnob{
  height: 25px;
  width: 25px;
  background: url(../gfx/scrollKnob.gif) no-repeat center;
  cursor: pointer;
  margin-top: -14px;
}

.cfeScrollerWrapper .scrollBottom{
  bottom: 0;
}

.cfeScrollerWrapper .scrollBottom .label{
  background: url(../gfx/scrollDown.gif) no-repeat center;
}

.cfeSelectMultiple
{
  vertical-align: text-top;
}

.cfeSelectMultipleContainerWrapper
{
  display: inline-block;
}

.cfeSelectMultiple .cfeOption .label{
  margin: -4px 0 0 -7px;
  width: auto;
  vertical-align: middle;
}

/* file input */
.cfeFilePath, .cfeFilePath .filePath{
  margin-left: 5px;
}

.cfeButton + input[type=file]{
  cursor: pointer;
}

.cfeButton.D + input[type=file]{
  cursor: default;
}

.cfeFilePath.hidden{display: none}

.cfeFile.hidden{
  left: -999px;
  position: absolute;
}

.cfeFilePath .fileIcon{
  background: url(../gfx/fileicons/file.png) no-repeat 0 50%;
  padding-left: 20px;
}

.cfeButton.delete{height: 24px;}
.cfeButton.delete, .cfeButton.delete > .cfeSlide{background: none;}
.cfeButton.delete .label{background: url(../gfx/cross.png) no-repeat 50% 50%;}
.cfeButton.delete.P .label{background-position: 52% 52%;}

.fileIcon.pdf{background-image: url(../gfx/fileicons/pdf.png)}
.fileIcon.jpg, .fileIcon.png, .fileIcon.jpeg, .fileIcon.tif, .fileIcon.bmp{background-image: url(../gfx/fileicons/img.png)}
.fileIcon.doc{background-image: url(../gfx/fileicons/doc.png)}
.fileIcon.xls{background-image: url(../gfx/fileicons/xls.png)}
.fileIcon.sql, .fileIcon.db{background-image: url(../gfx/fileicons/db.png)}
.fileIcon.html, .fileIcon.htm{background-image: url(../gfx/fileicons/html.png)}
.fileIcon.swf, .fileIcon.fla{background-image: url(../gfx/fileicons/flash.png)}
.fileIcon.zip, .fileIcon.rar{background-image: url(../gfx/fileicons/zip.png)}
.fileIcon.txt, .fileIcon.rtf, .fileIcon.odt{background-image: url(../gfx/fileicons/text.png)}