resources/css/box.css

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /*\r
  10  Creates rounded, raised boxes like on the Ext website - the markup isn't pretty:\r
  11   <div class="x-box-blue">\r
  12         <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>\r
  13         <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">\r
  14             <h3>YOUR TITLE HERE (optional)</h3>\r
  15             <div>YOUR CONTENT HERE</div>\r
  16         </div></div></div>\r
  17         <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>\r
  18     </div>\r
  19  */\r
  20 \r
  21 .x-box-tl {\r
  22         background: transparent url(../images/default/box/corners.gif) no-repeat 0 0;\r
  23     zoom:1;\r
  24 }\r
  25 \r
  26 .x-box-tc {\r
  27         height: 8px;\r
  28         background: transparent url(../images/default/box/tb.gif) repeat-x 0 0;\r
  29         overflow: hidden;\r
  30 }\r
  31 \r
  32 .x-box-tr {\r
  33         background: transparent url(../images/default/box/corners.gif) no-repeat right -8px;\r
  34 }\r
  35 \r
  36 .x-box-ml {\r
  37         background: transparent url(../images/default/box/l.gif) repeat-y 0;\r
  38         padding-left: 4px;\r
  39         overflow: hidden;\r
  40     zoom:1;\r
  41 }\r
  42 \r
  43 .x-box-mc {\r
  44         background: #eee url(../images/default/box/tb.gif) repeat-x 0 -16px;\r
  45         padding: 4px 10px;\r
  46         font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;\r
  47         color: #393939;\r
  48         font-size: 12px;\r
  49 }\r
  50 \r
  51 .x-box-mc h3 {\r
  52         font-size: 14px;\r
  53         font-weight: bold;\r
  54         margin: 0 0 4px 0;\r
  55     zoom:1;\r
  56 }\r
  57 \r
  58 .x-box-mr {\r
  59         background: transparent url(../images/default/box/r.gif) repeat-y right;\r
  60         padding-right: 4px;\r
  61         overflow: hidden;\r
  62 }\r
  63 \r
  64 .x-box-bl {\r
  65         background: transparent url(../images/default/box/corners.gif) no-repeat 0 -16px;\r
  66     zoom:1;\r
  67 }\r
  68 \r
  69 .x-box-bc {\r
  70         background: transparent url(../images/default/box/tb.gif) repeat-x 0 -8px;\r
  71         height: 8px;\r
  72         overflow: hidden;\r
  73 }\r
  74 \r
  75 .x-box-br {\r
  76         background: transparent url(../images/default/box/corners.gif) no-repeat right -24px;\r
  77 }\r
  78 \r
  79 .x-box-tl, .x-box-bl {\r
  80         padding-left: 8px;\r
  81         overflow: hidden;\r
  82 }\r
  83 \r
  84 .x-box-tr, .x-box-br {\r
  85         padding-right: 8px;\r
  86         overflow: hidden;\r
  87 }\r
  88 \r
  89 .x-box-blue .x-box-bl, .x-box-blue .x-box-br, .x-box-blue .x-box-tl, .x-box-blue .x-box-tr {\r
  90         background-image: url(../images/default/box/corners-blue.gif);\r
  91 }\r
  92 \r
  93 .x-box-blue .x-box-bc, .x-box-blue .x-box-mc, .x-box-blue .x-box-tc {\r
  94         background-image: url(../images/default/box/tb-blue.gif);\r
  95 }\r
  96 \r
  97 .x-box-blue .x-box-mc {\r
  98         background-color: #c3daf9;\r
  99 }\r
 100 \r
 101 .x-box-blue .x-box-mc h3 {\r
 102         color: #17385b;\r
 103 }\r
 104 \r
 105 .x-box-blue .x-box-ml {\r
 106         background-image: url(../images/default/box/l-blue.gif);\r
 107 }\r
 108 \r
 109 .x-box-blue .x-box-mr {\r
 110         background-image: url(../images/default/box/r-blue.gif);\r
 111 }