1 /* -------------------------------------------------- 

     2   :: Screen Meta & Menu Icon

     3   ---------------------------------------------------*/

     4 .appearance_page_ot-theme-options #screen-meta {

     5   margin-right: 20px;

     6   margin-left: 2px;

     7   min-width: 533px;

     8 }

     9 

    10 /* -------------------------------------------------- 

    11   :: Messages

    12   ---------------------------------------------------*/

    13 .wrap.settings-wrap div.error,

    14 .wrap.settings-wrap div.updated {

    15   margin: 9px 5px 0px 2px !important;

    16 }

    17  

    18 /* -------------------------------------------------- 

    19   :: OptionTree Wrappers

    20   ---------------------------------------------------*/

    21 #option-tree-settings-api .metabox-holder {

    22   overflow: hidden;

    23 }

    24 #option-tree-settings-api .postbox {

    25   background: #fff;

    26   border: none;

    27   margin: 0 20px;

    28 }

    29 #option-tree-settings-api .inside {

    30   margin: 0px !important;

    31   padding: 0px !important;

    32 }

    33 #option-tree-settings-api .ui-tabs {

    34   background: #fff url(../images/ot-menu-bg.png) repeat-y 0 0;

    35   border: 1px solid #ccc;

    36   border-top: none;

    37   margin: 0px 5px 0 2px;

    38   min-width: 533px;

    39   padding-bottom: 5px;

    40   position: relative;

    41   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    42   box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    43   -webkit-border-radius: 0 0 4px 4px;

    44    -khtml-border-radius: 0 0 4px 4px;

    45      -moz-border-radius: 0 0 4px 4px;

    46        -o-border-radius: 0 0 4px 4px;

    47           border-radius: 0 0 4px 4px; 

    48 }

    49 

    50 /* -------------------------------------------------- 

    51   :: Header

    52   ---------------------------------------------------*/

    53 #option-tree-header-wrap {

    54   position: relative;

    55 }

    56 #option-tree-header {

    57   background: #464646;

    58   color: #ccc;

    59   display: block;

    60   margin: 11px 5px 0 2px;

    61   min-width: 535px;

    62   overflow: hidden;

    63   position: relative;

    64   background-image: -webkit-linear-gradient(bottom, #373737, #464646 5px);

    65   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    66   box-shadow: 0 1px 3px rgba(0,0,0,0.05);

    67   -webkit-border-radius: 4px 4px 0 0;

    68    -khtml-border-radius: 4px 4px 0 0;

    69      -moz-border-radius: 4px 4px 0 0;

    70        -o-border-radius: 4px 4px 0 0;

    71           border-radius: 4px 4px 0 0;

    72 }

    73 #option-tree-header li {

    74   display: block;

    75   float: left;

    76   margin: 0px;

    77   padding: 0px;

    78 }

    79 #option-tree-header li a {

    80   color: #ccc;

    81   text-decoration: none;

    82 }

    83 #option-tree-header li a:hover {

    84   color: #fafafa;

    85 }

    86 #option-tree-header #option-tree-logo a {

    87   background: transparent url(../images/ot-logo.png) no-repeat 13px center;

    88   border-right: 1px solid #333;

    89   display: block;

    90   float: left;

    91   height: 24px;

    92   line-height: 24px;

    93   padding: 3px 12px 3px 13px;

    94   text-indent: -9999px;

    95   width: 24px;

    96 }

    97 #option-tree-header li#option-tree-logo:hover {

    98   color: #fafafa;

    99   background-color: #3a3a3a;

   100   background-image: -ms-linear-gradient(bottom,#3a3a3a,#222);

   101   background-image: -moz-linear-gradient(bottom,#3a3a3a,#222);

   102   background-image: -o-linear-gradient(bottom,#3a3a3a,#222);

   103   background-image: -webkit-gradient(linear,left bottom,left top,from(#3a3a3a),to(#222));

   104   background-image: -webkit-linear-gradient(bottom,#3a3a3a,#222);

   105   background-image: linear-gradient(bottom,#3a3a3a,#222);

   106   -webkit-border-top-left-radius: 5px;

   107   -moz-border-radius-topleft: 5px;

   108   border-top-left-radius: 5px;

   109 }

   110 #option-tree-header #option-tree-version {

   111 

   112 }

   113 #option-tree-header #option-tree-version span {

   114   border-left: 1px solid #555;

   115   display: block;

   116   float: left;

   117   height: 24px;

   118   line-height: 24px;

   119   padding: 3px 12px 3px 12px;

   120 }

   121 

   122 /* -------------------------------------------------- 

   123   :: Sub Header

   124   ---------------------------------------------------*/

   125 #option-tree-sub-header { 

   126   background: #fafafa url(../images/ot-sub-header-bg.png) repeat-x 0 0; 

   127   border: 1px solid #ccc; 

   128   border-top: none; 

   129   display: block; 

   130   margin: 0 5px 0 2px; 

   131   min-width: 523px; 

   132   overflow: hidden; 

   133   padding: 5px; 

   134   position: relative; 

   135   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05); 

   136   box-shadow:0 1px 3px rgba(0,0,0,0.05); 

   137 }

   138 

   139 /* -------------------------------------------------- 

   140   :: Tabs

   141   ---------------------------------------------------*/

   142 .wrap.settings-wrap .ui-tabs-nav { 

   143   background: url(../images/ot-menu-top-bg.png) no-repeat right top; 

   144   float: left; 

   145   list-style: none; 

   146   margin: 0 0 0 -4px; 

   147   padding: 1em 0; 

   148   width: 151px; 

   149 }

   150 .wrap.settings-wrap .ui-tabs-nav li { 

   151   border: 1px solid transparent; 

   152   border-right-width: 0px; 

   153   display: block; margin: 0; 

   154   -webkit-border-radius: 3px 0 0 3px;

   155    -khtml-border-radius: 3px 0 0 3px;

   156      -moz-border-radius: 3px 0 0 3px;

   157        -o-border-radius: 3px 0 0 3px;

   158           border-radius: 3px 0 0 3px; 

   159 }

   160 .wrap.settings-wrap .ui-tabs-nav li.ui-state-active { 

   161   background: #fff; 

   162   border-color: #ccc; 

   163   color: #000; 

   164 }

   165 .wrap.settings-wrap .ui-tabs-nav li a { 

   166   color: #21759b; 

   167   display: block; 

   168   line-height: 18px; 

   169   padding: 5px 5px 5px 12px; 

   170   text-decoration: none; 

   171 }

   172 .wrap.settings-wrap .ui-tabs-nav li a:hover,

   173 .wrap.settings-wrap .ui-tabs-nav li.ui-state-active a { 

   174   color: #000; 

   175   outline: none; 

   176 }

   177 .wrap.settings-wrap .ui-tabs-panel { 

   178   clear: both; 

   179 }

   180 /* -------------------------------------------------- 

   181   :: Format Settings

   182   ---------------------------------------------------*/

   183 .format-settings { 

   184   padding: 10px 0 20px 0; 

   185   position: relative; 

   186   width: 100%; 

   187 }

   188 

   189 /* -------------------------------------------------- 

   190   :: Format Setting Label

   191   ---------------------------------------------------*/

   192 .format-setting-label {

   193   border-bottom: 1px dashed #ddd;

   194   margin: 0 0 14px 0;

   195   padding: 5px 0px 1px 0px;

   196   width: 100%;

   197 }

   198 #option-tree-settings-api .description h3,

   199 #option-tree-settings-api .format-setting-label .label,

   200 .metabox-holder .format-setting-label .label {

   201   background: none;

   202   border: none;

   203   color: #333;

   204   cursor: text;

   205   display: block;

   206   font-family: sans-serif !important;

   207   font-size: 1.2em !important;

   208   font-weight: bold !important;

   209   letter-spacing: 0;

   210   padding: 0 0 9px 0 !important;

   211   -webkit-user-select: text;

   212   text-shadow: none;

   213 }

   214     

   215 /* -------------------------------------------------- 

   216   :: Format Setting

   217   ---------------------------------------------------*/

   218 .format-setting {

   219   overflow: hidden;

   220   position: relative;

   221   width: 100%;

   222 }

   223 .format-setting .format-setting-inner {

   224   float: left;

   225   position: relative;

   226   width: 63%;

   227 }

   228 .format-setting.no-desc .format-setting-inner,

   229 .format-setting.wide-desc .format-setting-inner,

   230 .option-tree-list-item .format-setting-inner {

   231   width: 100%;

   232 }

   233 .format-setting .description {

   234   float: right;

   235   padding: 5px 0;

   236   width: 35%;

   237 }

   238 .format-setting.no-desc .description,

   239 .format-setting.wide-desc .description,

   240 .option-tree-list-item .description {

   241   float: none;

   242   width: 100%;

   243 }

   244 .list-item-description {

   245   padding-top: 10px;

   246 }

   247 #option-tree-settings-api h4 {

   248   color: #333;

   249   font-size: 1.12em;

   250   font-weight: bold;

   251   margin: 1em 0 0.5em 0;

   252   padding: 0;

   253 }

   254 #option-tree-settings-api h5 {

   255   color: #444;

   256   font-size: 1em;

   257   font-weight: bold;

   258   margin: 1em 0 0.5em 0;

   259   padding: 0;

   260 }

   261 #option-tree-settings-api p {

   262   margin: 0 0 1.5em 0 !important;

   263 }

   264 #post .format-setting-inner p {

   265   float: left;

   266   width: 100%;

   267   margin: 0 0 1.05em 0 !important;

   268 }

   269 .aside {

   270   border-bottom: 1px solid #eee;

   271   padding-bottom: 15px;

   272   margin-bottom: 15px;

   273 }

   274 .deprecated {

   275   border-bottom: 1px solid #eee;

   276   color: #b94029;

   277   padding-bottom: 15px;

   278   margin-bottom: 15px;

   279 }

   280 .warning {

   281   color: #b94029;

   282 }

   283 .docs-ul {

   284   line-height: 1.3em;

   285   margin: 0;

   286   padding: 0 0 1em 0;

   287 }

   288 .docs-ul li {

   289   list-style-type: square;

   290   margin-left: 20px;

   291 }

   292 #contextual-help-setting {

   293   float: left;

   294   padding: 10px 0 5px 0;

   295   width: 100%;

   296 }

   297 #contextual-help-label {

   298   float: left;

   299   padding-top: 20px;

   300   width: 100%;

   301 }

   302 #option_tree_settings_help {

   303   float: left;

   304   width: 100%;

   305 }

   306 #option-tree-settings-api blockquote {

   307   font-style: italic;

   308   padding-left: 15px;

   309   position: relative;

   310 }

   311 #option-tree-settings-api blockquote:before {

   312   color: #ccc;

   313   content: "\201C";

   314   display: block;

   315   font-size: 400%;

   316   font-style: normal;

   317   left: -10px;

   318   position: absolute;

   319   top: 10px;

   320 }

   321 

   322 @media only screen and (max-width: 900px) {

   323  

   324   .format-setting .description, 

   325   .format-setting .format-setting-inner {

   326     width: 100%;

   327   }

   328 

   329   .format-setting .description {

   330     padding-top: 0px;

   331   };

   332 }

   333 

   334 /* -------------------------------------------------- 

   335   :: Code formatting

   336   ---------------------------------------------------*/

   337 #option-tree-settings-api code {

   338   background-color: #f1f1f1;

   339   color: #000;

   340 }

   341 #option-tree-settings-api pre {

   342   font-size: 13px;

   343   padding: 0;

   344   margin: 1.5em 0;

   345   line-height: 18px;

   346   overflow: auto;

   347   overflow-Y: hidden;

   348   padding-top: 18px;

   349   background: #f1f1f1;

   350   border-bottom: 1px solid #f1f1f1;

   351   margin-bottom: 20px;

   352   color: #000;

   353   white-space: pre-wrap;

   354   word-wrap: break-word;

   355 }

   356 #option-tree-settings-api pre code {

   357   padding: 0 18px 18px 18px;

   358   display: block;

   359   background: url(../images/ot-pre-bg.gif) repeat left top;

   360 }

   361 

   362 /* -------------------------------------------------- 

   363   :: Input & Upload

   364   ---------------------------------------------------*/

   365 input.option-tree-ui-upload-input,

   366 input.option-tree-ui-input {

   367   background: #fff;

   368   border: 1px solid #ccc !important;

   369   line-height: 17px;

   370   font-size: 12px;

   371   margin-bottom: 5px;

   372   padding: 7px 6px;

   373   position: relative;

   374   width: 100%;

   375   border-radius: 2px;

   376   -webkit-border-radius: 2px;

   377   -moz-border-radius: 2px;

   378   -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   379   -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   380   box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   381 }

   382 input:focus.option-tree-ui-upload-input,

   383 input:focus.option-tree-ui-input {

   384   border-color: #bbb !important;

   385 }

   386 

   387 @media screen and (-webkit-min-device-pixel-ratio:0) {

   388  

   389   .option-tree-ui-input,

   390   .option-tree-ui-upload-input {

   391     padding: 5px 6px !important;

   392   };

   393 }

   394 

   395 /* -------------------------------------------------- 

   396   :: Upload

   397   ---------------------------------------------------*/

   398 div.option-tree-ui-media-wrap {

   399   margin: 5px 63px 0 0;

   400   min-height: 35px;

   401   position: relative;

   402 }

   403 .option-tree-ui-media-wrap img {

   404   background: #fafafa;

   405   border: 1px solid #ccc;

   406   padding: 4px;

   407   border-radius: 2px;

   408   -webkit-border-radius: 2px;

   409   -moz-border-radius: 2px;

   410   display: block;

   411   float: left;

   412   max-width: 100%;

   413   height: auto;

   414   -ms-interpolation-mode: bicubic;

   415 }

   416 .option-tree-ui-upload-parent {

   417   width: auto !important;

   418   margin-right: 53px;

   419   padding: 0px;

   420   position: relative;

   421 }

   422 .format-setting .ot_upload_media {

   423   top: 0px;

   424   margin: 0px !important;

   425   position: absolute;

   426   right: -53px;

   427 }

   428 .option-tree-ui-media-wrap a.option-tree-ui-remove-media {

   429   float: none !important;

   430   margin: 0px !important;

   431   position: absolute !important;

   432   right: -63px;

   433   top: 1px;

   434 }

   435 

   436 /* -------------------------------------------------- 

   437   :: Textarea

   438   ---------------------------------------------------*/

   439 .fill-area .description,

   440 .fill-area .format-setting-inner {

   441   width: 100% !important;

   442 }

   443 

   444 .wp-editor-area {

   445   display: block;

   446 }

   447 .textarea,

   448 .ot-metabox-wrapper textarea {

   449   width: 99.9%;

   450   border: 1px solid #ccc;

   451   font-family: Consolas, Monaco, monospace;

   452   line-height: 150%;

   453   outline: 0;

   454   padding: 10px;

   455   resize: vertical;

   456 }

   457 #contextual-help-setting .textarea {

   458   width: 99.75%;

   459 }

   460 .ot-metabox-wrapper .wp-editor-container {

   461   border: none;

   462 }

   463 .ot-metabox-wrapper textarea:focus {

   464   border-color: #bbb !important;

   465 }

   466 

   467 @media only screen and (max-width: 1105px) {

   468   .type-textarea .description, .type-textarea .format-setting-inner {

   469     width: 100%;

   470   };

   471 }

   472 

   473 /* -------------------------------------------------- 

   474   :: Setting Item with Drag & Drop

   475   ---------------------------------------------------*/

   476 .option-tree-setting-wrap             { margin-top: 0px; }

   477 .option-tree-setting-wrap li          { margin: 4px 0px; }

   478 .option-tree-setting { 

   479   border: 1px solid #ccc; 

   480   overflow: hidden; 

   481   position: relative; 

   482   -webkit-border-radius: 4px;

   483    -khtml-border-radius: 4px;

   484      -moz-border-radius: 4px;

   485        -o-border-radius: 4px;

   486           border-radius: 4px; 

   487 }

   488 .option-tree-setting a { 

   489   text-decoration: none; 

   490 }

   491 .option-tree-setting .open {

   492   background: #fafafa;

   493   cursor: move;

   494   line-height: 21px;

   495   height: 21px;

   496   padding: 10px 100px 10px 10px;

   497   display: block;

   498 }

   499 .ui-state-disabled .option-tree-setting .open {

   500   cursor: default;

   501 }

   502 .option-tree-setting .open:hover {

   503   background: #fafafa url(../images/ot-dots.png) no-repeat 4px 15px;

   504 }

   505 .button-section {

   506   position: absolute;

   507   right: 0px;

   508   top: 1px;

   509 }

   510 .option-tree-setting.is-section { 

   511   border: 1px solid #464646; 

   512 }

   513 .option-tree-setting.is-section .open {

   514   background: #464646;

   515   color: #ccc;

   516 }

   517 .option-tree-setting.is-section .option-tree-ui-button {

   518   border-color: #151515 !important;

   519 }

   520 .format-setting .ui-sortable-helper .option-tree-setting .open {

   521   background: #fff url(../images/ot-dots.png) no-repeat 4px 15px;

   522 }

   523 .option-tree-setting.is-section .open:hover,

   524 .format-setting .ui-sortable-helper .option-tree-setting.is-section .open {

   525   background: #464646 url(../images/ot-dots.png) no-repeat 4px 15px;

   526 }

   527 .ui-state-highlight {

   528   border: 1px dashed #ccc;

   529   display: block;

   530   -webkit-border-radius: 4px;

   531   -moz-border-radius: 4px;

   532   border-radius: 4px;

   533 }

   534 .option-tree-setting-body {

   535   background: #fff;

   536   border-top: 1px solid #ccc;

   537   display: none;

   538   padding: 10px;

   539   -webkit-border-bottom-right-radius: 3px;

   540   -webkit-border-bottom-left-radius: 3px;

   541   -moz-border-radius-bottomright: 3px;

   542   -moz-border-radius-bottomleft: 3px;

   543   border-bottom-right-radius: 3px;

   544   border-bottom-left-radius: 3px;

   545 }

   546 li ul .format-settings {

   547   padding: 0 0 10px 0;

   548 }

   549 li ul .format-setting-label {

   550   border: none;

   551   padding: 0px;

   552   margin: 0px;

   553 }

   554 

   555 /* -------------------------------------------------- 

   556   :: Layouts

   557   ---------------------------------------------------*/

   558 #option_tree_layouts {

   559   display: none;

   560   padding-top: 12px;

   561 }

   562 #option-tree-options-layouts-form {

   563   left: 13px;

   564   position: absolute;

   565   top: 30px;

   566   z-index: 100;

   567 }

   568 .option-tree-save-layout {

   569   float: left;

   570   padding: 10px 0;

   571 }

   572 .option-tree-save-layout.active-layout {

   573   border-left: 1px solid #fff;

   574   padding-left: 9px;

   575 }

   576 .option-tree-save-layout .widefat {

   577   float: left;

   578   width: 128px !important;

   579   margin: 0;

   580 }

   581 .option-tree-save-layout button.blue {

   582   margin: 0 0 0 10px;

   583 }

   584 .option-tree-active-layout {

   585   border-right: 1px solid #ccc;

   586   float: left;

   587   padding: 10px 10px 10px 0;

   588   min-width: 126px;

   589 }

   590 

   591 /* -------------------------------------------------- 

   592   :: Select

   593   ---------------------------------------------------*/

   594 .select-group {

   595   margin-right: 53px;

   596   overflow: hidden;

   597   width: auto;

   598 }

   599 .select-wrapper {

   600   background: #fff url(../images/ot-select.png) no-repeat right center;

   601   border: 1px solid #ccc;

   602   display: block;

   603   float: left;

   604   font-size: 12px;

   605   height: 27px;

   606   margin: 0 5px 5px 0;

   607   width: auto;

   608   border-radius: 2px;

   609   -webkit-border-radius: 2px;

   610   -moz-border-radius: 2px;

   611   -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   612   -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   613   box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   614 }

   615 .select-wrapper:hover {

   616   background-image: url(../images/ot-select-hover.png);

   617   border-color: #bbb;

   618 }

   619 select.option-tree-ui-select {

   620   cursor: pointer;

   621   filter: alpha(opacity: 0);

   622   font-size: 14px;

   623   height: 29px;

   624   margin: 0;

   625   -moz-opacity: 0;

   626   opacity: 0;

   627   padding: 0 !important;

   628   position: relative;

   629   width: inherit;

   630   z-index: 4;

   631   min-width: 118px;

   632 }

   633 

   634 select.option-tree-ui-select option {

   635   padding: 3px 15px !important;

   636 }

   637 .select-wrapper span {

   638   height: 27px;

   639   line-height: 27px;

   640   padding-left: 7px;

   641   position: absolute;

   642   z-index: 2;

   643 }

   644 #option-tree-options-layouts-form .select-wrapper {

   645   margin: 0px;

   646 }

   647 #option-tree-options-layouts-form select.option-tree-ui-select {

   648   min-width: 124px;

   649 }

   650 .type-measurement select.option-tree-ui-select {

   651   min-width: 68px !important;

   652 }

   653 .type-measurement .select-wrapper {

   654   position: absolute;

   655   right: 0px;

   656   top: 0px;

   657 }

   658 

   659 /* FireFox */

   660 @-moz-document url-prefix() {

   661   #option-tree-options-layouts-form .select-wrapper {

   662     left: 250px;

   663   };

   664 }

   665 

   666 /* Webkit */

   667 @media screen and (-webkit-min-device-pixel-ratio:0) {

   668  

   669   .select-wrapper span {

   670     height: 26px;

   671     line-height: 26px;

   672   };

   673 }

   674 

   675 /* Opera 11 */

   676 @media not screen and (1) {

   677   .select-wrapper {

   678     height: 26px;

   679   };

   680 }

   681 

   682 /* -------------------------------------------------- 

   683   :: Measurement

   684   ---------------------------------------------------*/

   685 .option-tree-ui-measurement-input-wrap { 

   686   margin-right: 80px; 

   687 }

   688 

   689 /* -------------------------------------------------- 

   690   :: Checkbox & Radio

   691   ---------------------------------------------------*/

   692 .format-setting.type-checkbox input,

   693 .format-setting.type-radio input {

   694   float: left;

   695   margin: 2px 5px 0 1px;

   696 }

   697 .format-setting.type-checkbox label,

   698 .format-setting.type-radio label {

   699   float: left;

   700   max-width: 90%;

   701   padding: 0px;

   702 }

   703 #option-tree-settings-api .format-setting.type-checkbox p,

   704 #option-tree-settings-api .format-setting.type-radio p {

   705   float: left;

   706   margin: 0.5em 0 !important;

   707   width: 100%;

   708 }

   709      

   710 /* -------------------------------------------------- 

   711   :: Radio Images

   712   ---------------------------------------------------*/

   713 .type-radio-image .option-tree-ui-radio-images {

   714   float: left;

   715   margin: 0 10px 10px 0px;

   716 }

   717 .type-radio-image .option-tree-ui-radio-images img {

   718   background: #fff;

   719   border: 1px solid #ccc;

   720   cursor: pointer;

   721   padding: 5px;

   722   border-radius: 3px;

   723   -webkit-border-radius: 3px;

   724   -moz-border-radius: 3px;

   725 }

   726 .type-radio-image .option-tree-ui-radio-images img.option-tree-ui-radio-image-selected,

   727 .type-radio-image .option-tree-ui-radio-images img:hover {

   728   border-color: #464646;

   729   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);

   730   box-shadow: 0 1px 3px rgba(0,0,0,0.05);

   731 }

   732 

   733 /* -------------------------------------------------- 

   734   :: Numeric Slider

   735   ---------------------------------------------------*/

   736 .type-numeric-slider .format-setting-inner {

   737   background: #fcfcfc;

   738   border: 1px solid #ccc;

   739   min-height: 41px;

   740   padding: 5px;

   741   -webkit-box-sizing: border-box;

   742      -moz-box-sizing: border-box;

   743           box-sizing: border-box;

   744   -webkit-border-radius: 3px;

   745      -moz-border-radius: 3px;

   746           border-radius: 3px;

   747 }

   748 .ot-numeric-slider-wrap {

   749   margin: 0 96px 0 0;

   750 }

   751 .ot-numeric-slider-wrap .ot-numeric-slider-helper-input { 

   752   position: absolute; 

   753   right: 5px;

   754   text-align: center;

   755   top: 5px;

   756   width: 90px;

   757 }

   758 .ot-numeric-slider.ui-slider { 

   759   background: #fff;

   760   border: 1px solid #ccc;

   761   margin: 8px 8px 0 8px; 

   762   position: relative; 

   763   -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);

   764      -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); 

   765           box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); 

   766   -webkit-border-radius: 2px;

   767      -moz-border-radius: 2px;

   768           border-radius: 2px;

   769 }

   770 .ot-numeric-slider.ui-slider-horizontal { 

   771   height: 11px;

   772 }

   773 .ot-numeric-slider.ui-slider .ui-slider-handle { 

   774   background-color: #21759b; 

   775   border: 1px solid #21759b;

   776   border-bottom-color: #1e6a8d;

   777   cursor: pointer;

   778   display: block;

   779   height: 27px; 

   780   margin: -9px -8px;

   781   outline: 0;

   782   position: absolute; 

   783   width: 16px; 

   784   background-image: -webkit-gradient(linear,left top,left bottom,from(#2a95c5),to(#21759b));

   785   background-image: -webkit-linear-gradient(top,#2a95c5,#21759b);

   786   background-image: -moz-linear-gradient(top,#2a95c5,#21759b);

   787   background-image: -ms-linear-gradient(top,#2a95c5,#21759b);

   788   background-image: -o-linear-gradient(top,#2a95c5,#21759b);

   789   background-image: linear-gradient(to bottom,#2a95c5,#21759b);

   790   -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);

   791      -moz-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);

   792           box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);

   793   -webkit-border-radius: 3px;

   794      -moz-border-radius: 3px;

   795           border-radius: 3px;

   796 }

   797 .ot-numeric-slider.ui-slider .ui-slider-handle:hover { 

   798   background-color: #278ab7;

   799   background-image: -webkit-gradient(linear,left top,left bottom,from(#2e9fd2),to(#21759b));

   800   background-image: -webkit-linear-gradient(top,#2e9fd2,#21759b);

   801   background-image: -moz-linear-gradient(top,#2e9fd2,#21759b);

   802   background-image: -ms-linear-gradient(top,#2e9fd2,#21759b);

   803   background-image: -o-linear-gradient(top,#2e9fd2,#21759b);

   804   background-image: linear-gradient(to bottom,#2e9fd2,#21759b);

   805   border-color: #1b607f;

   806   -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);

   807      -moz-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);

   808           box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);

   809 }

   810 

   811 /* -------------------------------------------------- 

   812   :: Colorpicker

   813   ---------------------------------------------------*/

   814 .option-tree-ui-colorpicker-input-wrap {

   815   margin-right: 53px;

   816   position: relative;

   817   width: auto;

   818 }

   819 .format-settings .cp_box {

   820   background: #f1f1f1;

   821   border: 1px solid #ccc;

   822   bottom: 5px;

   823   height: 27px;

   824   position: absolute;

   825   right: -53px;

   826   width: 46px;

   827   -moz-border-radius: 2px;

   828   -webkit-border-radius: 2px;

   829   border-radius: 2px;

   830 }

   831 .ot_colorpicker {

   832   width: 342px;

   833   height: 170px;

   834   overflow: hidden;

   835   position: absolute;

   836   background: #fafafa url(../images/colorpicker/color_bg.png);

   837   font-family: Arial, Helvetica, sans-serif;

   838   display: none;

   839   border: 1px solid #bbb;

   840   -moz-border-radius: 2px;

   841   -webkit-border-radius: 2px;

   842   border-radius: 2px;

   843   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);

   844   box-shadow: 0 1px 3px rgba(0,0,0,0.05);

   845   z-index: 100;

   846 }

   847 .ot_colorpicker .colorpicker_color {

   848   width: 150px;

   849   height: 150px;

   850   left: 10px;

   851   top: 10px;

   852   position: absolute;

   853   background: #f00;

   854   overflow: hidden;

   855   cursor: crosshair;

   856 }

   857 .ot_colorpicker .colorpicker_color div {

   858   position: absolute;

   859   top: 0;

   860   left: 0;

   861   width: 150px;

   862   height: 150px;

   863   background: url(../images/colorpicker/color_overlay.png);

   864 }

   865 .ot_colorpicker .colorpicker_color div div {

   866   position: absolute;

   867   top: 0;

   868   left: 0;

   869   width: 11px;

   870   height: 11px;

   871   overflow: hidden;

   872   background: url(../images/colorpicker/color_select.gif);

   873   margin: -5px 0 0 -5px;

   874 }

   875 .ot_colorpicker .colorpicker_hue {

   876   position: absolute;

   877   top: 10px;

   878   left: 164px;

   879   width: 35px;

   880   height: 150px;

   881   cursor: n-resize;

   882 }

   883 .ot_colorpicker .colorpicker_hue div {

   884   position: absolute;

   885   width: 35px;

   886   height: 9px;

   887   overflow: hidden;

   888   background: url(../images/colorpicker/color_indicator.png) left top;

   889   margin: -5px 0 0 0;

   890 }

   891 .ot_colorpicker .colorpicker_new_color {

   892   position: absolute;

   893   width: 60px;

   894   height: 30px;

   895   right: 80px;

   896   top: 10px;

   897   background: #f00;

   898 }

   899 .ot_colorpicker .colorpicker_current_color {

   900   position: absolute;

   901   width: 60px;

   902   height: 30px;

   903   right: 10px;

   904   top: 10px;

   905   background: #f00;

   906 }

   907 .ot_colorpicker input {

   908   background-color: transparent !important;

   909   border: 1px solid transparent !important;

   910   position: absolute !important;

   911   font-size: 10px !important;

   912   font-family: Arial, Helvetica, sans-serif !important;

   913   color: #666 !important;

   914   top: 0px !important;

   915   right: 12px !important;

   916   text-align: right !important;

   917   margin: 0 !important;

   918   padding: 0 !important;

   919   height: 22px !important;

   920   line-height: 22px !important;

   921 }

   922 .ot_colorpicker .colorpicker_hex {

   923   position: absolute;

   924   width: 72px;

   925   height: 22px;

   926   background: url(../images/colorpicker/color_hex.png) top;

   927   left: 201px;

   928   bottom: 9px;

   929 }

   930 .ot_colorpicker .colorpicker_hex input {

   931   left: 13px;

   932   height: 22px;

   933   line-height: 22px;

   934   padding: 10px;

   935 }

   936 .ot_colorpicker .colorpicker_field {

   937   height: 22px;

   938   width: 62px;

   939   background-position: top;

   940   position: absolute;

   941 }

   942 .ot_colorpicker .colorpicker_field span {

   943   position: absolute;

   944   width: 12px;

   945   height: 22px;

   946   overflow: hidden;

   947   top: 0;

   948   right: 0;

   949   cursor: n-resize;

   950 }

   951 .ot_colorpicker .colorpicker_rgb_r {

   952   background-image: url(../images/colorpicker/color_rgb_r.png);

   953   top: 49px;

   954   left: 201px;

   955 }

   956 .ot_colorpicker .colorpicker_rgb_g {

   957   background-image: url(../images/colorpicker/color_rgb_g.png);

   958   top: 79px;

   959   left: 201px;

   960 }

   961 .ot_colorpicker .colorpicker_rgb_b {

   962   background-image: url(../images/colorpicker/color_rgb_b.png);

   963   top: 109px;

   964   left: 201px;

   965 }

   966 .ot_colorpicker .colorpicker_hsb_h {

   967   background-image: url(../images/colorpicker/color_hsb_h.png);

   968   top: 49px;

   969   right: 9px;

   970 }

   971 .ot_colorpicker .colorpicker_hsb_s {

   972   background-image: url(../images/colorpicker/color_hsb_s.png);

   973   top: 79px;

   974   right: 9px;

   975 }

   976 .ot_colorpicker .colorpicker_hsb_b {

   977   background-image: url(../images/colorpicker/color_hsb_b.png);

   978   top: 109px;

   979   right: 9px;

   980 }

   981 .ot_colorpicker .colorpicker_submit {

   982   position: absolute;

   983   width: 16px;

   984   height: 16px;

   985   background: url(../images/colorpicker/color_wheel.png) top;

   986   right: 10px;

   987   bottom: 10px;

   988   overflow: hidden;

   989 }

   990 .ot_colorpicker .colorpicker_focus {

   991   background-position: center;

   992 }

   993 .ot_colorpicker .colorpicker_hex.colorpicker_focus {

   994   background-position: bottom;

   995 }

   996 .ot_colorpicker .colorpicker_submit.colorpicker_focus {

   997   background-position: bottom;

   998 }

   999 .ot_colorpicker .colorpicker_slider {

  1000   background-position: bottom;

  1001 }

  1002 

  1003 @media not screen and (1) {

  1004   .format-settings .cp_box {

  1005     height: 26px;

  1006   };

  1007 }

  1008 

  1009 /* -------------------------------------------------- 

  1010   :: OptionTree UI Buttons 

  1011   ---------------------------------------------------*/

  1012 .option-tree-ui-button,

  1013 .option-tree-ui-button.blue,

  1014 .option-tree-ui-button.red {

  1015   display: inline-block;

  1016   text-decoration: none;

  1017   float: left;

  1018   font-size: 12px;

  1019   line-height: 28px;

  1020   height: 29px;

  1021   margin: 5px;

  1022   padding: 0 14px 1px;

  1023   cursor: pointer;

  1024   border-width: 1px;

  1025   border-style: solid;

  1026   -webkit-appearance: none;

  1027   white-space: nowrap;

  1028   -webkit-border-radius: 3px;

  1029      -moz-border-radius: 3px;

  1030           border-radius: 3px;

  1031   -webkit-box-sizing: border-box;

  1032      -moz-box-sizing: border-box;

  1033           box-sizing: border-box;

  1034 }

  1035 button.option-tree-ui-button::-moz-focus-inner,

  1036 input[type="reset"].option-tree-ui-button::-moz-focus-inner,

  1037 input[type="button"].option-tree-ui-button::-moz-focus-inner,

  1038 input[type="submit"].option-tree-ui-button::-moz-focus-inner {

  1039   border-width: 1px 0;

  1040   border-style: solid none;

  1041   border-color: transparent;

  1042   padding: 0;

  1043 }

  1044 .option-tree-ui-button:active {

  1045   outline: 0;

  1046 }

  1047 .option-tree-ui-button.hidden {

  1048   display: none;

  1049 }

  1050 .option-tree-ui-button,

  1051 .option-tree-ui-button.red {

  1052   background: #f3f3f3;

  1053   background-image: -webkit-gradient(linear,left top,left bottom,from(#fefefe),to(#f4f4f4));

  1054   background-image: -webkit-linear-gradient(top,#fefefe,#f4f4f4);

  1055   background-image: -moz-linear-gradient(top,#fefefe,#f4f4f4);

  1056   background-image: -o-linear-gradient(top,#fefefe,#f4f4f4);

  1057   background-image: linear-gradient(to bottom,#fefefe,#f4f4f4);

  1058   border-color: #bbb;

  1059   color: #333;

  1060   text-shadow: 0 1px 0 #fff;

  1061 }

  1062 .option-tree-ui-button.hover,

  1063 .option-tree-ui-button:hover,

  1064 .option-tree-ui-button.red:hover,

  1065 .option-tree-ui-button.focus,

  1066 .option-tree-ui-button:focus,

  1067 .option-tree-ui-button.red:focus {

  1068   background: #f3f3f3;

  1069   background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f3f3f3));

  1070   background-image: -webkit-linear-gradient(top,#fff,#f3f3f3);

  1071   background-image: -moz-linear-gradient(top,#fff,#f3f3f3);

  1072   background-image: -ms-linear-gradient(top,#fff,#f3f3f3);

  1073   background-image: -o-linear-gradient(top,#fff,#f3f3f3);

  1074   background-image: linear-gradient(to bottom,#fff,#f3f3f3);

  1075   border-color: #999;

  1076   color: #222;

  1077 }

  1078 .option-tree-ui-button.focus,

  1079 .option-tree-ui-button:focus,

  1080 .option-tree-ui-button.red:focus {

  1081   -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);

  1082   box-shadow: 1px 1px 1px rgba(0,0,0,.2);

  1083 }

  1084 .option-tree-ui-button.active,

  1085 .option-tree-ui-button.active:hover,

  1086 .option-tree-ui-button.active:focus,

  1087 .option-tree-ui-button:active,

  1088 .option-tree-ui-button.red:active {

  1089   background: #eee;

  1090   background-image: -webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#fefefe));

  1091   background-image: -webkit-linear-gradient(top,#f4f4f4,#fefefe);

  1092   background-image: -moz-linear-gradient(top,#f4f4f4,#fefefe);

  1093   background-image: -ms-linear-gradient(top,#f4f4f4,#fefefe);

  1094   background-image: -o-linear-gradient(top,#f4f4f4,#fefefe);

  1095   background-image: linear-gradient(to bottom,#f4f4f4,#fefefe);

  1096   border-color: #999;

  1097   color: #333;

  1098   text-shadow: 0 -1px 0 #fff;

  1099   -webkit-box-shadow: inset 0 2px 5px -3px rgba(0,0,0,0.5);

  1100   box-shadow: inset 0 2px 5px -3px rgba(0,0,0,0.5);

  1101 }

  1102 .option-tree-ui-button[disabled],

  1103 .option-tree-ui-button:disabled,

  1104 .option-tree-ui-button.red[disabled],

  1105 .option-tree-ui-button.red:disabled,

  1106 .option-tree-ui-button.disabled {

  1107   color: #aaa!important;

  1108   border-color: #ddd!important;

  1109   background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f4f4f4))!important;

  1110   background-image: -webkit-linear-gradient(top,#f9f9f9,#f4f4f4)!important;

  1111   background-image: -moz-linear-gradient(top,#f9f9f9,#f4f4f4)!important;

  1112   background-image: -ms-linear-gradient(top,#f9f9f9,#f4f4f4)!important;

  1113   background-image: -o-linear-gradient(top,#f9f9f9,#f4f4f4)!important;

  1114   background-image: linear-gradient(to bottom,#f9f9f9,#f4f4f4)!important;

  1115   -webkit-box-shadow: none!important;

  1116   box-shadow: none!important;

  1117   text-shadow: 0 1px 0 #fff!important;

  1118   cursor: default;

  1119 }

  1120 .option-tree-ui-button.blue {

  1121   background-color: #21759b;

  1122   background-image: -webkit-gradient(linear,left top,left bottom,from(#2a95c5),to(#21759b));

  1123   background-image: -webkit-linear-gradient(top,#2a95c5,#21759b);

  1124   background-image: -moz-linear-gradient(top,#2a95c5,#21759b);

  1125   background-image: -ms-linear-gradient(top,#2a95c5,#21759b);

  1126   background-image: -o-linear-gradient(top,#2a95c5,#21759b);

  1127   background-image: linear-gradient(to bottom,#2a95c5,#21759b);

  1128   border-color: #21759b;

  1129   border-bottom-color: #1e6a8d;

  1130   -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);

  1131   box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);

  1132   color: #fff;

  1133   text-decoration: none;

  1134   text-shadow: 0 1px 0 rgba(0,0,0,0.1);

  1135 }