#pf_button_options{ float:left; width:430px; } #pf_buttons{ clear:both; overflow:hidden; width:400px; float:left; } #pf_buttons .buttongroup{ float:left; width:200px; height:125px; } #pf_buttons .buttongroup.larger{ width:395px; height:inherit; } #pf_buttons .buttongroup p{ margin: 15px 0; } #pf_buttons .buttongroup p label input{ position:relative; bottom:6px; margin-right:8px; } #pf_buttons .buttongroup p label input.bigger{ bottom:10px; } #pf_left{ width:400px; float:left; margin-right:30px; } #pf_designer{ float:left; width:430px; } .pf_check{ display:block; margin-top:4px; } .pf_check.disabled{ color:#ccc: } .pf_check input[type="radio"],.pf_check input[type="checkbox"]{ position:relative; bottom:2px; margin-right:4px; } .pf_px{ width:45px; } .pf_label{ display:block; font-weight:bold; } .pf_tip{ font-size:10px; color:#888; text-shadow:1px 1px 1px #fff; } #pf_uploader{ background: #e8e8e8; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding:10px 15px; width:400px; } #pf_uploader input[type="text"]{ width:275px; } #pf_uploader p{ margin-top:4px; line-height:16px; margin:0; color:#888; } /* color picker css */ #colorSelector { position: relative; width: 36px; height: 36px; background: url(../images/select.png); } #colorSelector div { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; background: url(../images/select.png) center; } .colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url(../images/colorpicker_background.png); font-family: Arial, Helvetica, sans-serif; display: none; } .colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } .colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(../images/colorpicker_overlay.png); } .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(../images/colorpicker_select.gif); margin: -5px 0 0 -5px; } .colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; } .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(../images/colorpicker_indic.gif) left top; margin: -4px 0 0 0; left: 0px; } .colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; } .colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; } .colorpicker input { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0; height: 11px; } .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(../images/colorpicker_hex.png) top; left: 212px; top: 142px; } .colorpicker_hex input { right: 6px; } .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } .colorpicker_rgb_r { background-image: url(../images/colorpicker_rgb_r.png); top: 52px; left: 212px; } .colorpicker_rgb_g { background-image: url(../images/colorpicker_rgb_g.png); top: 82px; left: 212px; } .colorpicker_rgb_b { background-image: url(../images/colorpicker_rgb_b.png); top: 112px; left: 212px; } .colorpicker_hsb_h { background-image: url(../images/colorpicker_hsb_h.png); top: 52px; left: 282px; } .colorpicker_hsb_s { background-image: url(../images/colorpicker_hsb_s.png); top: 82px; left: 282px; } .colorpicker_hsb_b { background-image: url(../images/colorpicker_hsb_b.png); top: 112px; left: 282px; } .colorpicker_submit { position: absolute; width: 22px; height: 22px; background: url(../images/colorpicker_submit.png) top; left: 322px; top: 142px; overflow: hidden; } .colorpicker_focus { background-position: center; } .colorpicker_hex.colorpicker_focus { background-position: bottom; } .colorpicker_submit.colorpicker_focus { background-position: bottom; } .colorpicker_slider { background-position: bottom; } .pf_box{ clear:both; /* Borders Radius */ -moz-border-radius: 6px ; -webkit-border-radius: 6px ; border-radius: 6px; border:1px solid #DFDFDF; background: #fff; margin-bottom: 24px; } .pf_box .pf_c{ padding:0px 10px 10px; overflow:hidden; clear:both; } .pf_box h3{ font-size:13px; line-height: 1; text-shadow: 0 1px 0 #FFFFFF; padding: 7px 9px; margin:0; /* Background Gradient */ background-color: #e1e1e1; background-image: -moz-linear-gradient(top, #ededed, #e1e1e1); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ededed),color-stop(1, #e1e1e1)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#e1e1e1'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#e1e1e1')"; } .pf_box .pf_c .pf_float{ float:left; margin-right:16px; } #pf_custom_text{ width:200px; }