samples/sample.css

   1 /*\r
   2 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre\r
   7 {\r
   8         line-height: 1.5em;\r
   9 }\r
  10 \r
  11 body\r
  12 {\r
  13         padding: 10px 30px;\r
  14 }\r
  15 \r
  16 input, textarea, select, option, optgroup, button, td, th\r
  17 {\r
  18         font-size: 100%;\r
  19 }\r
  20 \r
  21 pre, code, kbd, samp, tt\r
  22 {\r
  23         font-family: monospace,monospace;\r
  24         font-size: 1em;\r
  25 }\r
  26 \r
  27 body {\r
  28     width: 960px;\r
  29     margin: 0 auto;\r
  30 }\r
  31 \r
  32 code\r
  33 {\r
  34         background: #f3f3f3;\r
  35         border: 1px solid #ddd;\r
  36         padding: 1px 4px;\r
  37 \r
  38         -moz-border-radius: 3px;\r
  39         -webkit-border-radius: 3px;\r
  40         border-radius: 3px;\r
  41 }\r
  42 \r
  43 abbr\r
  44 {\r
  45         border-bottom: 1px dotted #555;\r
  46         cursor: pointer;\r
  47 }\r
  48 \r
  49 .new\r
  50 {\r
  51         background: #FF7E00;\r
  52         border: 1px solid #DA8028;\r
  53         color: #fff;\r
  54         font-size: 10px;\r
  55         font-weight: bold;\r
  56         padding: 1px 4px;\r
  57         text-shadow: 0 1px 0 #C97626;\r
  58         text-transform: uppercase;\r
  59         margin: 0 0 0 3px;\r
  60 \r
  61         -moz-border-radius: 3px;\r
  62         -webkit-border-radius: 3px;\r
  63         border-radius: 3px;\r
  64 \r
  65         -moz-box-shadow: 0 2px 3px 0 #FFA54E inset;\r
  66         -webkit-box-shadow: 0 2px 3px 0 #FFA54E inset;\r
  67         box-shadow: 0 2px 3px 0 #FFA54E inset;\r
  68 }\r
  69 \r
  70 h1.samples\r
  71 {\r
  72         color: #0782C1;\r
  73         font-size: 200%;\r
  74         font-weight: normal;\r
  75         margin: 0;\r
  76         padding: 0;\r
  77 }\r
  78 \r
  79 h1.samples a\r
  80 {\r
  81         color: #0782C1;\r
  82         text-decoration: none;\r
  83         border-bottom: 1px dotted #0782C1;\r
  84 }\r
  85 \r
  86 .samples a:hover\r
  87 {\r
  88         border-bottom: 1px dotted #0782C1;\r
  89 }\r
  90 \r
  91 h2.samples\r
  92 {\r
  93         color: #000000;\r
  94         font-size: 130%;\r
  95         margin: 15px 0 0 0;\r
  96         padding: 0;\r
  97 }\r
  98 \r
  99 p, blockquote, address, form, pre, dl, h1.samples, h2.samples\r
 100 {\r
 101         margin-bottom: 15px;\r
 102 }\r
 103 \r
 104 ul.samples\r
 105 {\r
 106         margin-bottom: 15px;\r
 107 }\r
 108 \r
 109 .clear\r
 110 {\r
 111         clear: both;\r
 112 }\r
 113 \r
 114 fieldset\r
 115 {\r
 116         margin: 0;\r
 117         padding: 10px;\r
 118 }\r
 119 \r
 120 body, input, textarea\r
 121 {\r
 122         color: #333333;\r
 123         font-family: Arial, Helvetica, sans-serif;\r
 124 }\r
 125 \r
 126 body\r
 127 {\r
 128         font-size: 75%;\r
 129 }\r
 130 \r
 131 a.samples\r
 132 {\r
 133         color: #189DE1;\r
 134         text-decoration: none;\r
 135 }\r
 136 \r
 137 form\r
 138 {\r
 139         margin: 0;\r
 140         padding: 0;\r
 141 }\r
 142 \r
 143 pre.samples\r
 144 {\r
 145         background-color: #F7F7F7;\r
 146         border: 1px solid #D7D7D7;\r
 147         overflow: auto;\r
 148         padding: 0.25em;\r
 149         white-space: pre-wrap; /* CSS 2.1 */\r
 150         word-wrap: break-word; /* IE7 */\r
 151         -moz-tab-size: 4;\r
 152         -o-tab-size: 4;\r
 153         -webkit-tab-size: 4;\r
 154         tab-size: 4;\r
 155 }\r
 156 \r
 157 #footer\r
 158 {\r
 159         clear: both;\r
 160         padding-top: 10px;\r
 161 }\r
 162 \r
 163 #footer hr\r
 164 {\r
 165         margin: 10px 0 15px 0;\r
 166         height: 1px;\r
 167         border: solid 1px gray;\r
 168         border-bottom: none;\r
 169 }\r
 170 \r
 171 #footer p\r
 172 {\r
 173         margin: 0 10px 10px 10px;\r
 174         float: left;\r
 175 }\r
 176 \r
 177 #footer #copy\r
 178 {\r
 179         float: right;\r
 180 }\r
 181 \r
 182 #outputSample\r
 183 {\r
 184         width: 100%;\r
 185         table-layout: fixed;\r
 186 }\r
 187 \r
 188 #outputSample thead th\r
 189 {\r
 190         color: #dddddd;\r
 191         background-color: #999999;\r
 192         padding: 4px;\r
 193         white-space: nowrap;\r
 194 }\r
 195 \r
 196 #outputSample tbody th\r
 197 {\r
 198         vertical-align: top;\r
 199         text-align: left;\r
 200 }\r
 201 \r
 202 #outputSample pre\r
 203 {\r
 204         margin: 0;\r
 205         padding: 0;\r
 206 }\r
 207 \r
 208 .description\r
 209 {\r
 210         border: 1px dotted #B7B7B7;\r
 211         margin-bottom: 10px;\r
 212         padding: 10px 10px 0;\r
 213         overflow: hidden;\r
 214 }\r
 215 \r
 216 label\r
 217 {\r
 218         display: block;\r
 219         margin-bottom: 6px;\r
 220 }\r
 221 \r
 222 /**\r
 223  *      CKEditor editables are automatically set with the "cke_editable" class\r
 224  *      plus cke_editable_(inline|themed) depending on the editor type.\r
 225  */\r
 226 \r
 227 /* Style a bit the inline editables. */\r
 228 .cke_editable.cke_editable_inline\r
 229 {\r
 230         cursor: pointer;\r
 231 }\r
 232 \r
 233 /* Once an editable element gets focused, the "cke_focus" class is\r
 234    added to it, so we can style it differently. */\r
 235 .cke_editable.cke_editable_inline.cke_focus\r
 236 {\r
 237         box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000;\r
 238         outline: none;\r
 239         background: #eee;\r
 240         cursor: text;\r
 241 }\r
 242 \r
 243 /* Avoid pre-formatted overflows inline editable. */\r
 244 .cke_editable_inline pre\r
 245 {\r
 246         white-space: pre-wrap;\r
 247         word-wrap: break-word;\r
 248 }\r
 249 \r
 250 /**\r
 251  *      Samples index styles.\r
 252  */\r
 253 \r
 254 .twoColumns,\r
 255 .twoColumnsLeft,\r
 256 .twoColumnsRight\r
 257 {\r
 258         overflow: hidden;\r
 259 }\r
 260 \r
 261 .twoColumnsLeft,\r
 262 .twoColumnsRight\r
 263 {\r
 264         width: 45%;\r
 265 }\r
 266 \r
 267 .twoColumnsLeft\r
 268 {\r
 269         float: left;\r
 270 }\r
 271 \r
 272 .twoColumnsRight\r
 273 {\r
 274         float: right;\r
 275 }\r
 276 \r
 277 dl.samples\r
 278 {\r
 279         padding: 0 0 0 40px;\r
 280 }\r
 281 dl.samples > dt\r
 282 {\r
 283         display: list-item;\r
 284         list-style-type: disc;\r
 285         list-style-position: outside;\r
 286         margin: 0 0 3px;\r
 287 }\r
 288 dl.samples > dd\r
 289 {\r
 290         margin: 0 0 3px;\r
 291 }\r
 292 .warning\r
 293 {\r
 294     color: #ff0000;\r
 295         background-color: #FFCCBA;\r
 296     border: 2px dotted #ff0000;\r
 297         padding: 15px 10px;\r
 298         margin: 10px 0;\r
 299 }\r
 300 \r
 301 /* Used on inline samples */\r
 302 \r
 303 blockquote\r
 304 {\r
 305         font-style: italic;\r
 306         font-family: Georgia, Times, "Times New Roman", serif;\r
 307         padding: 2px 0;\r
 308         border-style: solid;\r
 309         border-color: #ccc;\r
 310         border-width: 0;\r
 311 }\r
 312 \r
 313 .cke_contents_ltr blockquote\r
 314 {\r
 315         padding-left: 20px;\r
 316         padding-right: 8px;\r
 317         border-left-width: 5px;\r
 318 }\r
 319 \r
 320 .cke_contents_rtl blockquote\r
 321 {\r
 322         padding-left: 8px;\r
 323         padding-right: 20px;\r
 324         border-right-width: 5px;\r
 325 }\r
 326 \r
 327 img.right {\r
 328     border: 1px solid #ccc;\r
 329     float: right;\r
 330     margin-left: 15px;\r
 331     padding: 5px;\r
 332 }\r
 333 \r
 334 img.left {\r
 335     border: 1px solid #ccc;\r
 336     float: left;\r
 337     margin-right: 15px;\r
 338     padding: 5px;\r
 339 }\r