form.jqtransformdone label { margin-top:4px; margin-right: 8px; display: block; float:left; } form.jqtransformdone div.rowElem { clear:both; padding:4px 0px; } /* ------------- * Buttons * ------------- */ button.jqTransformButton { margin: 0px; padding: 0px; border: none; background-color: transparent; cursor: pointer; overflow: visible; font-family: Arial; } *:first-child+html button.jqTransformButton[type] { width: 1; } /* IE7 */ button.jqTransformButton span { background: transparent url(../js/img/btn_right.gif) no-repeat right top; display: block; float: left; padding: 0px 4px 0px 0px; /* sliding doors padding */ margin: 0px; height: 33px; } button.jqTransformButton span span { background: transparent url(../js/img/btn_left.gif) no-repeat top left; color: #333; padding: 8px 4px 0px 8px; font-weight: normal; font-size: 12px; line-height: 13px; display: block; text-decoration: none; height: 33px; } /*hover*/ button.jqTransformButton_hover span span { background-position: left -33px; } button.jqTransformButton_hover span { background-position: right -33px; } /*clicked*/ button.jqTransformButton_click span span { background-position: left -66px; } button.jqTransformButton_click span { background-position: right -66px; } /* IE 6 */ * html button.jqTransformButton { height:33px; } * button.jqTransformButton span span { height: 25px; } /* IE 7 */ *+ html button.jqTransformButton { height:33px; } *+ button.jqTransformButton span span { height: 25px; } /* ------------- * Inputs * ------------- */ .jqTransformInputWrapper { background: transparent url(../js/img/input/input_text_left.gif) no-repeat left top; height: 31px; padding: 0px; float:left; } .jqTransformInputInner { background: transparent url(../js/img/input/input_text_right.gif) no-repeat top right; padding: 0px; margin: 0px; } .jqTransformInputInner div { height: 31px; margin:0px 0px 0px 8px; } .jqTransformInputInner div input { font-size:12px; line-height: 18px; vertical-align: middle; height: 31px; color:#404040; border: none; padding: 8px 0px 0px 0px; margin: 0px; background:transparent; } /* IE6 */ * html .jqTransformInputInner div input { padding: 6px 0 0 0; margin: 0 0 0 -8px; height:24px; } /* Ie7 */ *+ html .jqTransformInputInner div input { padding: 6px 0 0 0; margin-left:-10px; height:24px; } /*hover*/ .jqTransformInputWrapper_hover { background-position: left -31px; } .jqTransformInputWrapper_hover div.jqTransformInputInner { background-position: right -31px; } /*focus*/ .jqTransformInputWrapper_focus { background-position: left -62px; } .jqTransformInputWrapper_focus div.jqTransformInputInner { background-position: right -62px; } .jqTransformSafari .jqTransformInputInner div { position: relative; overflow: hidden; margin:0px 8px; } .jqTransformSafari .jqTransformInputInner div input { background-color: none; position: absolute; top: -10px; left: -2px; height: 42px; padding-left: 4px; } /* ------------- * Textarea * ------------- */ table.jqTransformTextarea td#jqTransformTextarea-mm textarea { font-size: 12px; line-height: 16px; } table.jqTransformTextarea td { font-size: 1px; line-height: 1px; width: 5px; height: 5px; margin: 0; padding: 0; } table.jqTransformTextarea { } table.jqTransformTextarea tr { /*border: 1px solid red;*/ } table.jqTransformTextarea textarea { margin: 0; padding: 0; border: 0; background: none; } table.jqTransformTextarea td#jqTransformTextarea-tl { background: url(../js/img/textarea/textarea_tl.gif) no-repeat top left; } table.jqTransformTextarea td#jqTransformTextarea-tm { background: url(../js/img/textarea/textarea_tm.gif) repeat-x top left; } table.jqTransformTextarea td#jqTransformTextarea-tr { background: url(../js/img/textarea/textarea_tr.gif) no-repeat top left; } table.jqTransformTextarea td#jqTransformTextarea-ml { background: url(../js/img/textarea/textarea_ml.gif) repeat-y top left; } table.jqTransformTextarea td#jqTransformTextarea-mm { background: url(../js/img/textarea/textarea-mm.gif) repeat; } table.jqTransformTextarea td#jqTransformTextarea-mr { background: url(../js/img/textarea/textarea_mr.gif) repeat-y top left; } table.jqTransformTextarea td#jqTransformTextarea-bl { background: url(../js/img/textarea/textarea_bl.gif) no-repeat top left; } table.jqTransformTextarea td#jqTransformTextarea-bm { background: url(../js/img/textarea/textarea_bm.gif) repeat-x top left; } table.jqTransformTextarea td#jqTransformTextarea-br { background: url(../js/img/textarea/textarea_br.gif) no-repeat top left; } /*hover*/ table.jqTransformTextarea-hover td#jqTransformTextarea-tl { background-position:0px -5px; } table.jqTransformTextarea-hover td#jqTransformTextarea-tm { background-position:0px -5px; } table.jqTransformTextarea-hover td#jqTransformTextarea-tr { background-position:0px -5px; } table.jqTransformTextarea-hover td#jqTransformTextarea-ml { background-position:-5px 0px; } table.jqTransformTextarea-hover td#jqTransformTextarea-mm { background-image: url(../js/img/textarea/textarea-mm-hover.gif); } table.jqTransformTextarea-hover td#jqTransformTextarea-mr { background-position:-5px 0px; } table.jqTransformTextarea-hover td#jqTransformTextarea-bl { background-position:0px -5px; } table.jqTransformTextarea-hover td#jqTransformTextarea-bm { background-position:0px -5px; } table.jqTransformTextarea-hover td#jqTransformTextarea-br { background-position:0px -5px; } /*focus*/ table.jqTransformTextarea-focus td#jqTransformTextarea-tl { background-position:0px -10px; } table.jqTransformTextarea-focus td#jqTransformTextarea-tm { background-position:0px -10px; } table.jqTransformTextarea-focus td#jqTransformTextarea-tr { background-position:0px -10px; } table.jqTransformTextarea-focus td#jqTransformTextarea-ml { background-position:-10px 0px; } table.jqTransformTextarea-focus td#jqTransformTextarea-mm { background-image: url(../js/img/textarea/textarea-mm-focus.gif); } table.jqTransformTextarea-focus td#jqTransformTextarea-mr { background-position: -10px 0px; } table.jqTransformTextarea-focus td#jqTransformTextarea-bl { background-position:0px -10px; } table.jqTransformTextarea-focus td#jqTransformTextarea-bm { background-position:0px -10px; } table.jqTransformTextarea-focus td#jqTransformTextarea-br { background-position:0px -10px; } table.jqTransformTextarea .jqTransformSafariTextarea div { position: relative; overflow: hidden; border: 0px solid red; } table.jqTransformTextarea .jqTransformSafariTextarea textarea { background: none; position: absolute; top:-10px; left:-10px; padding: 10px 10px 10px 10px; resize: none; } /* ------------- * Radios * ------------- */ .jqTransformRadioWrapper { width:40px; height:40px; float: left; display:block; margin:0; } a.jqTransformRadio { height: 36px; width: 36px; margin:2px; vertical-align: middle; display:block;/*display: -moz-inline-block;*/ background:url(../js/img/radio.png) no-repeat left top; } /* ------------- * Checkboxes * ------------- */ span.jqTransformCheckboxWrapper { display:block; float:left; margin:0px; } .jqTransformCheckbox { height: 36px; width: 36px; margin:2px; background: url(../js/img/checkbox.png) 0 0; vertical-align: middle; display:block; } .switch a.jqTransformCheckbox { width:90px; background-image: url(../js/img/checkbox-switch.png); transition: background-position 0.2s ease 0s; -moz-transition: background-position 0.2s ease 0s; -webkit-transition: background-position 0.2s ease 0s; } /* ------------- * Checked - Used for both Radio and Checkbox * ------------- */ a.jqTransformChecked { background-position: 100% 0; } a.jqTransformRadio.jqTransformChecked, a.jqTransformCheckbox.jqTransformChecked { background-size: cover; -webkit-animation: checkedAnim 0.25s; -moz-animation: checkedAnim 0.25s; -o-animation: checkedAnim 0.25s; -ms-animation: checkedAnim 0.25s; animation: checkedAnim 0.25s; } .switch a.jqTransformCheckbox { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } @keyframes checkedAnim { 0% {width: 36px; height:36px; margin:2px;} 50% {width: 40px; height:40px; margin:0px;} 100% {width: 36px; height:36px; margin:2px;} } @-moz-keyframes checkedAnim { 0% {width: 36px; height:36px; margin:2px;} 50% {width: 40px; height:40px; margin:0px;} 100% {width: 36px; height:36px; margin:2px;} } @-webkit-keyframes checkedAnim { 0% {width: 36px; height:36px; margin:2px;} 50% {width: 40px; height:40px; margin:0px;} 100% {width: 36px; height:36px; margin:2px;} } @-ms-keyframes checkedAnim { 0% {width: 36px; height:36px; margin:2px;} 50% {width: 40px; height:40px; margin:0px;} 100% {width: 36px; height:36px; margin:2px;} } @-o-keyframes checkedAnim { 0% {width: 36px; height:36px; margin:2px;} 50% {width: 40px; height:40px; margin:0px;} 100% {width: 36px; height:36px; margin:2px;} } /* ------------- * Selects * ------------- */ .jqTransformSelectWrapper { width: 45px; position:relative; height: 34px; float:left; margin-bottom:10px; background-color: #d2d2d2; } .jqTransformSelectWrapper div span { height: 32px; line-height: 32px; padding-left: 15px; font-size: 12px; color:#5e5e5e; float: none; position: absolute; white-space: nowrap; overflow: hidden; cursor:pointer; } .jqTransformSelectWrapper { width:100% !important; min-width:100%; } .jqTransformSelectWrapper div span { width:97% !important; min-width:97%; } .jqTransformSelectWrapper a.jqTransformSelectOpen { display: block; position: absolute; right: 0px; width: 32px; height: 32px; background: url(../js/img/select_right.gif) no-repeat center center; } .jqTransformSelectWrapper ul { width: 43px; max-width:100%; min-width:100%; height:auto; max-height:300px; position: absolute; top: 34px; left: 0px; list-style: none; background-color: #FFF; border-bottom: solid 1px #ccc; display: none; margin: 0px; padding: 0px; height: 150px; overflow: auto; overflow-y: auto; z-index:10; } .jqTransformSelectWrapper ul a { display: block; padding:0 5px; text-decoration: none; color:#333; background-color: #FFF; font-size: 12px; } .jqTransformSelectWrapper ul li { margin:0px; line-height:30px; border-left: solid 1px #ccc; border-right: solid 1px #ccc; } .jqTransformSelectWrapper ul a.selected { background: #EDEDED; color: #333; } .jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover { background:#3582c4; color: #fff; } /* ------------- * Hidden - used to hide the original form elements * ------------- */ .jqTransformHidden { display: none !important; } /*** Updated by Saba Hanif ***/