[Summary view] [Print] [Text view]

   1  
   2  body { margin: 0; padding: 20px; background: #191919; }
   3  ul.plugins { margin: 0; padding: 0; }
   4  ul.plugins li { margin: 0 12px 12px 0;
   5      list-style-type: none; width: 210px; height: 220px; float: left;
   6      color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
   7  
   8  #accordion, #draggable,

   9  #resizable, #selectable, #sortable, #tabs {

  10      margin: 10px;
  11      width: 190px; height: 180px;
  12      text-align: center;
  13      background: #FEA620; color: white; font-weight: bold;
  14  }
  15  #selectable div {

  16      width: 45px; height: 45px; float: left; margin: 6px;
  17      border: 1px solid white;
  18  }
  19  #selectable .ui-selecting {

  20      background: gray;
  21  }
  22  #selectable .ui-selected {

  23      background: black;
  24  }
  25  #sortable div {

  26      width: 45px; height: 45px; float: left; margin: 6px;
  27      border: 1px solid white;
  28  }
  29  #sortable .ui-sortable-helper {

  30      background: black;
  31  }
  32  
  33  .draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FEA620; }
  34  #droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FEA620; overflow: hidden; }

  35  #droppable .draggable { margin: 7px; }

  36  
  37  .ui-dialog { background-color: #FEA620; }
  38  .ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px;    _height: 29px; }
  39  .ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }
  40  
  41  .ui-dialog .ui-dialog-titlebar-close {
  42      width: 16px; height: 16px; position: absolute; top: 6px; right: 7px;
  43      cursor: default; color: white;
  44  }
  45  
  46  .ui-dialog .ui-dialog-titlebar-close-hover { color: #FEA620; }
  47  
  48  .ui-dialog .ui-dialog-title {
  49      margin-left: 5px; color: white; font-weight: bold;
  50      position: relative; top: 7px; left: 4px;
  51  }
  52  
  53  .ui-dialog .ui-dialog-content {
  54      margin: 1.2em;
  55  }
  56  
  57  .ui-dialog .ui-dialog-buttonpane {
  58      position: absolute;
  59      bottom: 8px;
  60      right: 12px;
  61      width: 100%;
  62      text-align: right;
  63  }
  64  
  65  .ui-dialog .ui-dialog-buttonpane button {
  66      margin: 6px;
  67  }
  68  
  69  /* Dialog handle styles */

  70  .ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: gray !important; border: none !important; }
  71  .ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: gray !important; border: none !important; }
  72  .ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
  73  .ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
  74  .ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: gray !important; border: none !important; }
  75  .ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: gray !important; border: none !important; }
  76  .ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: gray !important; border: none !important; }
  77  .ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: gray !important; border: none !important; }
  78  
  79  .ui-slider { margin: 10px; background: #FEA620; height: 15px; position: relative; }
  80  .ui-slider-handle { width: 10px; height: 15px; background: white; position: absolute; top: 0px; left: 0px; }