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