slitaz-forge annotate forum/themes/slitaz/design/style.css @ rev 1

Add slitaz themes for vanilla
author Eric Joseph-Alexandre <erjo@slitaz.org>
date Wed Dec 22 10:36:12 2010 +0100 (2010-12-22)
parents
children
rev   line source
erjo@1 1 @charset "utf-8";
erjo@1 2 /* CSS Document */
erjo@1 3
erjo@1 4 /***--- MAIN / DEFAULT --***/
erjo@1 5 html, body { height: 102%; margin: 0; }
erjo@1 6 html, body, input, select, textarea, button {
erjo@1 7 font-family: Verdana, Geneva, sans-serif;
erjo@1 8 font-size: 11px;
erjo@1 9 line-height: 17px;
erjo@1 10 color: #555;
erjo@1 11 }
erjo@1 12 a { color: #2f6c8e; text-decoration: none; }
erjo@1 13 a:hover { color: #69a1c1; }
erjo@1 14 a img { border: none; }
erjo@1 15 ul, ol { margin: 0; padding: 0; list-style: none; }
erjo@1 16
erjo@1 17 .clear {
erjo@1 18 clear: both;
erjo@1 19 display: block;
erjo@1 20 height: 0;
erjo@1 21 overflow: hidden;
erjo@1 22 visibility: hidden;
erjo@1 23 width: 0;
erjo@1 24 }
erjo@1 25
erjo@1 26 #Wrapper { min-height: 100%; position: relative; margin: 0 auto; }
erjo@1 27 .Hidden { display: none; }
erjo@1 28
erjo@1 29 /***--- HEADER(S) --***/
erjo@1 30
erjo@1 31
erjo@1 32 #Header h1 { padding: 15px; font-size: 2em; }
erjo@1 33 #Header a { color: #69a1c1; }
erjo@1 34 #Header a:hover { color: #FFF; }
erjo@1 35
erjo@1 36 #Header{
erjo@1 37 background: #f0ba08 url(../images/header.png) repeat-x top;
erjo@1 38 color: black;
erjo@1 39 width: 100%;
erjo@1 40 height: 50px;
erjo@1 41 border-top: 1px solid black;
erjo@1 42 border-bottom: 1px solid black;
erjo@1 43 margin-bottom: 30px;
erjo@1 44 position: absolute;
erjo@1 45 top: 0;
erjo@1 46 }
erjo@1 47
erjo@1 48 #titre {
erjo@1 49 position: absolute;
erjo@1 50 font-size: 16px;
erjo@1 51 font-weight: bolder ;
erjo@1 52 margin-left: 200px;
erjo@1 53 margin-top: 28px;
erjo@1 54 }
erjo@1 55
erjo@1 56 #logo {
erjo@1 57 position: absolute;
erjo@1 58 float: left;
erjo@1 59 margin-left: 16px;
erjo@1 60 margin-top: 0px;
erjo@1 61 }
erjo@1 62
erjo@1 63 /***--- NAV --***/
erjo@1 64 #Nav {
erjo@1 65 right: 0;
erjo@1 66 position: absolute;
erjo@1 67 top: 3px;
erjo@1 68 font-size: 10px;
erjo@1 69 font-weight: bold; }
erjo@1 70
erjo@1 71 ul#Menu {
erjo@1 72 margin: 10px 15px;
erjo@1 73 float: left; }
erjo@1 74
erjo@1 75 #Menu li { float: left; margin: 0 1px 0 0; }
erjo@1 76 #Menu a {
erjo@1 77 display: block;
erjo@1 78 padding: 5px 4px;
erjo@1 79 background: inherit;
erjo@1 80 color: white;
erjo@1 81 text-decoration: none; }
erjo@1 82
erjo@1 83 #Menu a:hover {
erjo@1 84 background: inherit;
erjo@1 85 color: #222222; }
erjo@1 86 #Menu li.Highlight a { color: #222222; }
erjo@1 87
erjo@1 88 /* search */
erjo@1 89 #Search {
erjo@1 90 -moz-border-radius: 4px;
erjo@1 91 -webkit-border-radius: 4px;
erjo@1 92 height: 20px;
erjo@1 93 float: right;
erjo@1 94 background: #FFF;
erjo@1 95 padding: 2px 2px;
erjo@1 96 margin: 11px 15px; }
erjo@1 97 #Search form { padding: 0; border: none; }
erjo@1 98 #Nav #Search input.InputBox { width: 150px; border: none; }
erjo@1 99 #Search input.Button {
erjo@1 100 -moz-border-radius: 4px;
erjo@1 101 -webkit-border-radius: 4px;
erjo@1 102 height: 17px;
erjo@1 103 margin: 0;
erjo@1 104 padding: 0; }
erjo@1 105
erjo@1 106 /***--- MAIN --***/
erjo@1 107 /*#Main { }*/
erjo@1 108
erjo@1 109 /* If you prefer the panel on the left and content on the right, simply switch the "float" property for #Content & #Panel and set the "margin-left" to "margin-right" for the #Content */
erjo@1 110 #Content {
erjo@1 111 margin: 0px 320px 0px 0px;
erjo@1 112 padding: 86px 40px 65px 80px;
erjo@1 113 }
erjo@1 114 #Panel {
erjo@1 115 position: absolute;
erjo@1 116 top: 86px;
erjo@1 117 right: 80px;
erjo@1 118 color: #555555;
erjo@1 119 float: right;
erjo@1 120 width: 250px;
erjo@1 121 line-height: 1.5em;
erjo@1 122 text-align: left;
erjo@1 123 font-size: 12px;
erjo@1 124 }
erjo@1 125 .Box, #UserOptions {
erjo@1 126 -moz-border-radius: 8px;
erjo@1 127 -webkit-border-radius: 8px;
erjo@1 128 list-style-type: none;
erjo@1 129 margin: 10px 0;
erjo@1 130 padding: 10px 24px 10px 24px;
erjo@1 131 background-color: #eaeaea;}
erjo@1 132 #Panel .Box ul {
erjo@1 133 list-style-type: none;
erjo@1 134 margin: 0;
erjo@1 135 padding: 10px 24px 10px 0px;
erjo@1 136 }
erjo@1 137
erjo@1 138 /***--- CONTENT --***/
erjo@1 139 .GuestBox { background: #eaeaea; }
erjo@1 140 .GuestBox p { padding: 0; }
erjo@1 141 .Message img { max-width: 100%; }
erjo@1 142
erjo@1 143 /* headers */
erjo@1 144 h1 { margin: 0; font-size: 1.5em; }
erjo@1 145 #Content h1, h2, #Popup h1, div.DiscussionTabs .SubTab {
erjo@1 146 -moz-border-radius: 8px;
erjo@1 147 -webkit-border-radius: 8px;
erjo@1 148 font-size: 1.1em; background: #555555; color: #fff; margin: 0 0 10px; padding: 10px; font-weight: bold;
erjo@1 149 }
erjo@1 150 div.DiscussionTabs .SubTab { margin: 0; }
erjo@1 151
erjo@1 152 #Panel h4, #Panel .GuestBox h4 {
erjo@1 153 font-size: 110%;
erjo@1 154 color: #666666;
erjo@1 155 font-weight: bold;
erjo@1 156 padding: 0 0 1px 0;
erjo@1 157 margin: 0;
erjo@1 158 border-bottom: 1px solid #cecece; }
erjo@1 159
erjo@1 160 div.Empty, div#Status { padding: 10px; }
erjo@1 161
erjo@1 162 /* tabs */
erjo@1 163 .Tabs li, .SubTab {
erjo@1 164 -moz-border-radius: 8px;
erjo@1 165 -webkit-border-radius: 8px;
erjo@1 166 background: #CECECE;
erjo@1 167 padding: 5px 8px;
erjo@1 168 font-size: 140%;
erjo@1 169 font-weight: bold;
erjo@1 170 border-bottom: 1px solid #fff; }
erjo@1 171 .Tabs li.Active { background: #555; border-bottom: none; }
erjo@1 172 .Tabs li.Active a { color: #fff; }
erjo@1 173 .Tabs span { display: inline-block; margin: 0 10px; color: #888; }
erjo@1 174 .SubTab { font-size: 1em; }
erjo@1 175
erjo@1 176 /* DISCUSSIONS */
erjo@1 177 .DataList li.Item, .Conversation li.Item {
erjo@1 178 border-bottom: 1px solid #ccc;
erjo@1 179 position: relative;
erjo@1 180 padding: 10px;
erjo@1 181 -moz-border-radius: 8px;
erjo@1 182 -webkit-border-radius: 8px;
erjo@1 183 }
erjo@1 184 .Activities li.Item { min-height: 50px; }
erjo@1 185 .DataList li.Item a.Title { display: block; font-size: 1.15em; font-weight: bold; padding: 0 0 8px; }
erjo@1 186
erjo@1 187 /* discussions meta */
erjo@1 188 .DataList .Meta span, .DataList .Meta strong {
erjo@1 189 min-width: 100px; display: inline-block; margin: 0 5px 0 0;
erjo@1 190 }
erjo@1 191 .DataList .Meta .LastCommentBy { width: 175px; }
erjo@1 192 .DataList .Meta .LastCommentDate { width: 100px; }
erjo@1 193
erjo@1 194 /* discussions highlight */
erjo@1 195 .DataList li.Mine { background: #f1f1f1; border-bottom-color: #fff; }
erjo@1 196 .DataList li.New { background: #d8ecbc; }
erjo@1 197 .DataList li.Bookmarked { background: #ffdf5d; border-bottom-color: #fff; }
erjo@1 198
erjo@1 199 .DataList li.Closed { background: #eee; }
erjo@1 200 .DataList .Meta .Closed { color: #333; }
erjo@1 201 .DataList li.Closed a.Title { text-decoration: line-through; }
erjo@1 202
erjo@1 203 .DataList li.Announcement { background: #FFC; }
erjo@1 204 .DataList .Meta .Announcement, .DataList .Meta .Closed {
erjo@1 205 width: 100px; font-weight: bold;
erjo@1 206 }
erjo@1 207 .DataList .Meta .Announcement { color: #C60; }
erjo@1 208
erjo@1 209 /* DISCUSSION */
erjo@1 210 div.DiscussionTabs li { font-size: 1em; }
erjo@1 211 ul.Discussion { margin: 0 0 10px; }
erjo@1 212
erjo@1 213 /* bookmark */
erjo@1 214 a.Bookmark { width: 9px; height: 9px; position: absolute; top: 8px; right: 10px; font-size: 0; background: #fff; border: 1px dotted #ffcc00; }
erjo@1 215 .Discussion a.Bookmark { top: 41px; }
erjo@1 216 a.Bookmarked { background: #ffcc00; border: 1px solid #fff; }
erjo@1 217 div.Options a.Bookmark { top: 14px; }
erjo@1 218
erjo@1 219 div.Comment {
erjo@1 220 position: relative;
erjo@1 221 border-bottom: 1px dotted #ccc;
erjo@1 222 padding: 10px; }
erjo@1 223 li.Even { background: #f8f8f8; }
erjo@1 224
erjo@1 225 /* discussion meta */
erjo@1 226 .Comment .Message, .Comment .MessageForm, .ConversationMessage .Message {
erjo@1 227 margin-left: 215px; line-height: 1.75em;
erjo@1 228 }
erjo@1 229 .Comment .Meta, .ConversationMessage .Meta {
erjo@1 230 width: 175px; float: left; padding: 10px; background: #FFC;
erjo@1 231 -moz-border-radius: 8px;
erjo@1 232 -webkit-border-radius: 8px;
erjo@1 233 }
erjo@1 234 .Comment .Meta span, .ConversationMessage .Meta span, div.Meta div.PostCount {
erjo@1 235 display: block; border-bottom: 1px dotted #ccc; font-size: 0.85em; padding: 1px 0;
erjo@1 236 }
erjo@1 237 .Comment .Author, .ConversationMessage span.Author {
erjo@1 238 background: #fff; padding: 5px; border-bottom: none;
erjo@1 239 }
erjo@1 240 .Comment .Author img, .ConversationMessage .Author a.Photo {
erjo@1 241 float: left; margin: 0 10px 0 0;
erjo@1 242 }
erjo@1 243 .Comment .Author a, .ConversationMessage .Author a {
erjo@1 244 font-weight: bold; font-size: 1.1em;
erjo@1 245 }
erjo@1 246 blockquote { margin: 0; padding: 10px; background: #fff; border: 1px dotted #ccc; }
erjo@1 247 .Odd blockquote { background: #F8F8F8; }
erjo@1 248
erjo@1 249 /* post */
erjo@1 250 ul.PostOptions { margin: 0 0 10px; }
erjo@1 251 .Preview { padding: 10px; margin: 0 0 10px; border-bottom: 1px dotted #ccc; }
erjo@1 252
erjo@1 253 /*- Conversations & Activities -*/
erjo@1 254 ul.Activities .Title { margin: 0 0 0 60px; font-weight: bold; }
erjo@1 255 ul.Conversations .Photo, ul.Activities .Photo {
erjo@1 256 width: 50px; height: 50px; float: left; font-size: 0.9em; color: #ccc; overflow: hidden; background: #eee;
erjo@1 257 }
erjo@1 258 ul.Conversations .Excerpt, ul.Activities .Excerpt {
erjo@1 259 margin: 0 0 10px 60px;
erjo@1 260 }
erjo@1 261 ul.Conversations .Meta, ul.Activities .Meta, .SearchResults .Meta {
erjo@1 262 margin: 0 0 0 60px;background: #FFC; padding: 3px 5px;
erjo@1 263 }
erjo@1 264 .SearchResults .Meta { margin: 5px 0 0; }
erjo@1 265 ul.ActivityComments { margin: 0 0 0 60px; }
erjo@1 266
erjo@1 267 .ConversationMessage .Message { min-height: 100px; }
erjo@1 268 .ConversationMessage span.Author { height: 50px; }
erjo@1 269 .ConversationMessage span.ItemLink { display: none; }
erjo@1 270
erjo@1 271 /***--- PANEL --***/
erjo@1 272 .Block { padding: 15px; background: #ddd; margin: 0 10px 0 0; }
erjo@1 273 .Post #Panel, .Search #Panel {
erjo@1 274 display: none;
erjo@1 275 }
erjo@1 276
erjo@1 277 .PanelInfo li { padding: 0px 0px; }
erjo@1 278 .PanelInfo li strong { font-weight: normal; }
erjo@1 279 .PanelInfo li.Active a { color: #c60; }
erjo@1 280 .PanelInfo li.Parent { background: #ccc; padding: 2px 5px; font-size: 1.1em; font-weight: bold; }
erjo@1 281
erjo@1 282 .PanelInfo a {
erjo@1 283 color: #0F314E;
erjo@1 284 background: inherit;
erjo@1 285 display: block;
erjo@1 286 text-decoration: none;
erjo@1 287 font-weight: bold;
erjo@1 288 }
erjo@1 289
erjo@1 290 .PanelInfo a:hover {
erjo@1 291 color: #c60;
erjo@1 292 text-decoration: none;
erjo@1 293 display: block;
erjo@1 294 }
erjo@1 295 /* account */
erjo@1 296
erjo@1 297 #Panel .Photo { background: #ddd; position: absolute; right: 10px; padding: 0 0 10px 10px; }
erjo@1 298 #Panel .Photo img { width: 50px; display: block; border: 5px solid #fff; border-bottom-width: 12px; }
erjo@1 299 #Panel .Photo img:hover { width: auto; }
erjo@1 300
erjo@1 301 #Panel dl { padding: 10px; background: #fff; margin: 0; }
erjo@1 302 #Panel dt { font-weight: bold; padding: 2px 0 0; }
erjo@1 303 #Panel dd { margin: 0; border-bottom: 1px dotted #ccc; padding: 0 0 2px; }
erjo@1 304
erjo@1 305 /* inbox */
erjo@1 306 .PanelInfo li strong { display: inline-block; margin: 0 5px 0 0; }
erjo@1 307
erjo@1 308 /*- Form elements -*/
erjo@1 309 form { padding: 0 10px 10px; border-bottom: 1px dotted #ccc; }
erjo@1 310 fieldset { margin: 0; padding: 0; border: none; }
erjo@1 311
erjo@1 312 form#Form_User_Register { margin-top: 10px; }
erjo@1 313
erjo@1 314 input, textarea, select {
erjo@1 315 border: 1px solid #ccc; padding: 3px 5px; margin: 0;
erjo@1 316 }
erjo@1 317 input.InputBox { width: 325px; margin: 0 10px 5px 0; }
erjo@1 318
erjo@1 319 input.Button, input.Cancel {
erjo@1 320 -moz-border-radius: 4px;
erjo@1 321 -webkit-border-radius: 4px;
erjo@1 322 cursor: pointer; border: none; background: #c60; color: #fff; padding: 4px;
erjo@1 323 }
erjo@1 324 input.Button:hover, input.Cancel:hover {
erjo@1 325 background: #555555; color: white;
erjo@1 326 }
erjo@1 327
erjo@1 328 a.Back, a.Cancel {
erjo@1 329 margin: 0 5px 0 0;
erjo@1 330 }
erjo@1 331
erjo@1 332 textarea { width: 95%; min-height: 100px; display: block; margin: 10px 0; }
erjo@1 333
erjo@1 334 label { display: block; font-weight: bold; }
erjo@1 335 label.RadioLabel, label.CheckBoxLabel {
erjo@1 336 font-weight: normal;
erjo@1 337 }
erjo@1 338 label.RadioLabel input, label.CheckBoxLabel input {
erjo@1 339 border: none;
erjo@1 340 }
erjo@1 341
erjo@1 342 li.Gender, li.CaptchaInput {
erjo@1 343 margin: 0 0 10px;
erjo@1 344 }
erjo@1 345 li.CreateAccount, li.Buttons {
erjo@1 346 margin: 5px 0 0;
erjo@1 347 }
erjo@1 348 .cleditorMain { margin: 10px 0; }
erjo@1 349
erjo@1 350 .CommentForm div.Messages { margin: 8px 0 0; }
erjo@1 351 .Errors, .Warning {
erjo@1 352 color: #F00;
erjo@1 353 }
erjo@1 354
erjo@1 355 /***--- BUTTONS ---***/
erjo@1 356 .GuestBox a.Button {
erjo@1 357 -moz-border-radius: 4px;
erjo@1 358 -webkit-border-radius: 4px;
erjo@1 359 font-size: 11px;
erjo@1 360 padding: 4px;
erjo@1 361 margin: 0 0 10px;
erjo@1 362 background: #c60;
erjo@1 363 color: #FFF; }
erjo@1 364 .GuestBox .Button:hover {
erjo@1 365 background: #555555; }
erjo@1 366
erjo@1 367 a.BigButton {
erjo@1 368 -moz-border-radius: 8px;
erjo@1 369 -webkit-border-radius: 8px;
erjo@1 370 display: block;
erjo@1 371 background: #c60;
erjo@1 372 color: #FFF;
erjo@1 373 padding: 10px;
erjo@1 374 font-size: 1.1em;
erjo@1 375 font-weight: bold;
erjo@1 376 text-align: center}
erjo@1 377 a.BigButton:hover { background: #555555; }
erjo@1 378 a.ClearConversation { margin: 10px 0 0; }
erjo@1 379
erjo@1 380 /* options */
erjo@1 381 div.Options, div.OptionButton {
erjo@1 382 position: absolute; top: 12px; right: 10px;
erjo@1 383 }
erjo@1 384 div.OptionButton { font-weight: bold; color: #555; }
erjo@1 385 ul.Options strong {
erjo@1 386 -moz-border-radius: 4px;
erjo@1 387 -webkit-border-radius: 4px;
erjo@1 388 cursor: pointer;
erjo@1 389 display: block;
erjo@1 390 padding: 5px 10px;
erjo@1 391 background: #FFC;
erjo@1 392 border: 1px solid #ccc; }
erjo@1 393
erjo@1 394 ul.Options { margin: 5px 40px 0 0; }
erjo@1 395 ul.Options li { position: relative; }
erjo@1 396 ul.Options ul { min-width: 125px; display: none; position: absolute; z-index: 1000; background: #FFC; right: 0; border: 1px dotted #ccc; margin-top: -1px; }
erjo@1 397 ul.Options li:hover ul { display: block; }
erjo@1 398 ul.Options ul li { display: block; border-top: 1px dotted #ccc; }
erjo@1 399 ul.Options ul li:first-child { border-top: none; }
erjo@1 400 ul.Options ul li a { display: block; padding: 5px 10px; }
erjo@1 401
erjo@1 402 /*- Pager -*/
erjo@1 403 #PagerAfter { margin: 10px 0; text-align: center; background: #ddd; padding: 2px 10px; }
erjo@1 404 #PagerAfter a { display: inline-block; padding: 0 5px; }
erjo@1 405 #PagerAfter a.Highlight { color: #c60; }
erjo@1 406 span.Previous, a.Previous { float: left; }
erjo@1 407 #PagerAfter span.Next, #PagerAfter a.Next { float: right; padding: 0; }
erjo@1 408
erjo@1 409 #PagerMore { text-align: right; padding: 5px 10px; }
erjo@1 410
erjo@1 411 /***--- FOOTER --***/
erjo@1 412 #Footer {
erjo@1 413 font-size: 11px ;
erjo@1 414 width: 100%;
erjo@1 415 position: absolute;
erjo@1 416 bottom: 0;
erjo@1 417 background: inherit;
erjo@1 418 color: #a8a8a8; }
erjo@1 419 #Footer ul { margin: 16px 15px; }
erjo@1 420 #Footer li { float: left; }
erjo@1 421 #Footer a { text-decoration: underline; background: inherit; color: #a8a8a8; }
erjo@1 422 #Footer a:hover { color: #666666; }
erjo@1 423
erjo@1 424 /***--- OVERLAY ---***/
erjo@1 425 .Overlay { width: 100%; position: absolute; top: 0; z-index: 10000; background: url(../images/overlayBg.png); }
erjo@1 426 .Overlay #Popup { width: 720px; padding: 15px; background: #FFF; margin: 0 auto; border: 1px dotted #c60; position: relative; }
erjo@1 427
erjo@1 428 .Overlay .Buttons input.Button { margin: 0 0 10px; }
erjo@1 429 .Overlay p { padding: 0 10px; }
erjo@1 430 .Overlay a.Close { position: absolute; display: block; top: 10px; right: 15px; padding: 13px; font-size: 1.5em; color: #fff; }
erjo@1 431 .Overlay a.Close:hover { color: #c60; }
erjo@1 432 .Overlay ul { margin: 10px 0 0; }
erjo@1 433
erjo@1 434 .Overlay input.Button { margin: 10px 0 0; }
erjo@1 435 .Overlay textarea { margin: 10px 0 0; }
erjo@1 436 .Overlay li.Gender { margin: 0; }
erjo@1 437
erjo@1 438 .Overlay #Form_Picture { margin: 0 0 10px; }