liquid_feedback_frontend
view static/lf2.css @ 215:1dab81353eb1
More enhancements for second generation frontend
| author | bsw | 
|---|---|
| date | Sat Mar 05 15:34:17 2011 +0100 (2011-03-05) | 
| parents | acf92c2d33f4 | 
| children | 4f6e6b213fb8 | 
 line source
     1 /* CSS reset */
     3 html, body, div, span, applet, object, iframe,
     4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
     5 a, abbr, acronym, address, big, cite, code,
     6 del, dfn, em, font, img, ins, kbd, q, s, samp,
     7 small, strike, strong, sub, sup, tt, var,
     8 dl, dt, dd, ol, ul, li,
     9 fieldset, form, label, legend,
    10 table, caption, tbody, tfoot, thead, tr, th, td {
    11     margin: 0;
    12     padding: 0;
    13     border: 0;
    14     outline: 0;
    15     font-weight: inherit;
    16     font-style: inherit;
    17     font-size: 100%;
    18     font-family: inherit;
    19     vertical-align: baseline;
    20 }
    21 /* remember to define focus styles! */
    22 :focus {
    23     outline: 0;
    24 }
    25 body {
    26     line-height: 1;
    27     color: black;
    28     background: white;
    29 }
    30 ol, ul {
    31     list-style: none;
    32 }
    33 /* tables still need 'cellspacing="0"' in the markup */
    34 table {
    35     border-collapse: separate;
    36     border-spacing: 0;
    37 }
    38 caption, th, td {
    39     text-align: left;
    40     font-weight: normal;
    41 }
    42 blockquote:before, blockquote:after,
    43 q:before, q:after {
    44     content: "";
    45 }
    46 blockquote, q {
    47     quotes: "" "";
    48 }
    50 /* end CSS reset */
    53 /*
    54     Global settings
    55 */
    56 body {
    57   font-family: sans-serif;
    58   background-color: #7df;
    59   xbackground-image: url('lf2/back.jpg');
    60   color: #000;
    61 }
    63 a {
    64   color: #000;
    65 }
    67 /*
    68     Main top navigation
    69 */
    71 .tab1 {
    72   background-color: #444;
    73   color: #000;
    74 }
    76 .tab1 .right {
    77   float: right;
    78 }
    80 .tab1 a {
    81   float: left;
    82   padding: 0.5ex 0.5em 0.5ex 0.5em;
    83   margin-left: 0.5em;
    84   background-color: #444;
    85   color: #fff;
    86   font-weight: bold;
    87   text-decoration: none;
    88 }
    90 .tab1 .right a {
    91   margin-left: 0;
    92   margin-right: 0.5em;
    93 }
    95 .tab1 a.active {
    96   background-color: #7df;
    97   color: #000;
    98 }
   100 /*
   101     Default slot
   102 */
   104 .slot_default {
   105   margin: 2ex 1% 2ex 32%;
   106   position: relative;
   107   width: 67%;
   108 }
   110 .sidebar_right .slot_default {
   111   margin: 2ex 32% 2ex 1%;
   112 }
   114 /*
   115 Sidebar
   116 */
   118 .slot_sidebar {
   119   margin: 2ex 1% 2ex 1%;
   120   float: left;
   121   width: 30%;
   122 }
   124 .sidebar_right .slot_sidebar {
   125   margin: 0 1% 2ex 1%;
   126   float: right;
   127   width: 30%;
   128 }
   130 .slot_sidebar .box {
   131   width: 100%;
   132 }
   135 /*
   136     Boxes
   137 */
   139 .box a {
   140   text-decoration: none;
   141   color: #46a;
   142 }
   144 .box {
   145   /* position */
   146   position: relative;
   147   width: 100%;
   148   margin-bottom: 2ex;
   150   /* border and shadow*/
   151   border-radius: 1ex;
   152   -moz-border-radius: 1ex;
   153   -webkit-box-shadow: 2px 2px 3px 0px #444;
   154   -moz-box-shadow: 2px 2px 3px 0px #444;
   156   /* color */
   157   background-color: #fff;
   158   color: #000;
   160 }
   162 .box .row {
   163   overflow: auto;
   164   /* position */
   166   /* border */
   167   border-bottom: 1px solid #ccc;
   168 }
   170 .box .row .col {
   171   /* position */
   172   padding: 0.5ex 0.2em 0.5ex 0.2em;
   174   /* text format */
   175   line-height: 115%;
   176 }
   178 .box .row .col.left {
   179   float: left;
   180 }
   182 .box .row .col.right {
   183   float: right;
   184 }
   186 .box .row:last-child {
   187   /* border */
   188   border-bottom: none;
   189 }
   191 .box .row .col:first-child {
   192   /* position */
   193   padding-left: 0.5em;
   194 }
   196 .box .row:first-child.head,
   197 .box .row:first-child.head2 {
   198   border-radius: 1ex 1ex 0 0;
   199 }
   201 .box .row.head {
   202   background-color: #fafcff;
   203   color: #000;
   204   border-bottom-color: #777;
   205 }
   207 .box .row:last-child {
   208   border-radius: 0 0 1ex 1ex;
   209 }
   211 .box .row.head .col.head {
   212   font-weight: bold;
   213   color: #444;
   214 }
   216 .box .row.head .col a {
   217   background-color: #fafcff;
   218   color: #3B6E7F;
   219 }
   221 .box .row.head2 {
   222   background-color: #fafcff;
   223   color: #000;
   224 }
   226 .box .row.head2 .col.head {
   227   font-weight: bold;
   228 }
   230 .box .row.head2 .col a {
   231   background-color: #fafcff;
   232   color: #3B6E7F;
   233 }
   235 .box .row.subhead .col {
   236   margin-top: 2ex;
   237   font-weight: bold;
   238 }
   240 .box .row.subhead {
   241   border-bottom-color: #777;
   242 }
   244 .box .row .col a {
   245   color: #3B6E7F;
   246 }
   248 .box .row.active,
   249 .box .row.active a {
   250   background-color: #DDF7FF;
   251 }
   253 /* Sidebar hover button */
   255 .hoverbutton_container {
   256   position: relative;
   257 }
   260 .hoverbutton {
   261   /* position */
   262   display: none;
   263   position: absolute;
   264   top: 0px;
   265   left: 0px;
   266   height: 100%;
   267   width: 100%;
   269   /* color */
   270   background-color: #fff;
   272   /* text format */
   273   font-weight: bold;
   275   /* cursor */
   276   cursor: pointer;
   277 }
   279 .hoverbutton_container:hover .hoverbutton {
   280   /* position */
   281   display: block;
   282 }
   284 .hoverbutton_container:hover .hoverbutton img {
   285   /* text format */
   286   vertical-align: middle;
   287 }
   289 .hoverbutton_container:hover .hoverbutton.noaction {
   290   /* color */
   291   background-color: #ccc;
   293   /* cursor */
   294   cursor: default;
   295 }
   297 .hoverbutton_container:hover .hoverbutton.green {
   298   background-color: #cfc;
   299 }
   301 .hoverbutton_container:hover .hoverbutton.red {
   302   background-color: #fcc;
   303 }
   305 .hoverbutton .content {
   306   /* position */
   307   padding: 0.5ex 0.2em 0.5ex 0.5em;
   308 }
   310 .box .row.last-child .hoverbutton {
   311   border-radius: 0 0 1ex 1ex;
   312 }
   315 /* Scrolled col */
   317 .box .row .col.scrolled {
   318   padding: 0;
   319   max-height: 300px;
   320   overflow: auto;
   321 }
   323 .box .row .col.scrolled .head {
   324   font-weight: bold;
   325   padding: 0.5ex 0.2em 0.5ex 0.5em;
   326 }
   328 /*
   329   Bars
   330 */
   332 .bar {
   333   float: right;
   334   margin-left: 0.3em;
   335 }
   337 .bar div {
   338   margin-top: 2px;
   339   float: left;
   340   height: 11px;
   341 }
   342 .bar .green {
   343   background-color: #0a0;
   344 }
   346 .bar .grey {
   347   background-color: #eee;
   348 }
   350 /*
   351     Avatars
   352 */
   354 .avatars {
   355   overflow: auto;
   356 }
   358 .avatars .avatar {
   359   float: left;
   360   margin-left: 2px;
   361   margin-right: 2px;
   362 }
   364 .avatars.normal .avatar {
   365   width: 100px;
   366   -webkit-box-shadow: 1px 1px 1px #000;
   367   background-color: #eee;
   368   border-radius: 1ex;
   369   -moz-border-radius: 1ex;
   370 }
   372 .avatars.small .avatar {
   373   border: 2px solid #fff;
   374   border-radius: 0.5ex;
   375   -moz-border-radius: 0.5ex;
   376 }
   378 .avatars .arrow {
   379   float: left;
   380   margin-top: 0.3ex;
   381 }
   383 .avatars .avatar.myweight {
   384   border-color: #f70;
   385   background-color: #f70;
   386 }
   388 .avatars .avatar.autoreject {
   389   border-color: #f00;
   390   background-color: #f00;
   391 }
   393 .avatars.small .avatar img {
   394   border-radius: 0.25ex;
   395   -moz-border-radius: 0.25ex;
   396 }
   398 .avatars.normal .avatar img {
   399   margin-left: 0.3em;
   400   margin-top: 0.3ex;
   401   border-radius: 1ex;
   402   -moz-border-radius: 1ex;
   403 }
   405 .avatars.small .avatar img {
   406   height: 24px;
   407   width: 24px;
   408 }
   410 .avatars.normal .avatar img {
   411   height: 48px;
   412   width: 48px;
   413 }
   415 .avatars.normal .avatar .name {
   416   margin-left: 0.3em;
   417   margin-top: 0.3ex;
   418   line-height: 100%;
   419   font-size: 70%;
   420   overflow: hidden;
   421   height: 4ex;
   422 }
   424 .avatars .avatar .weight {
   425   text-align: center;
   426   font-size: 70%;
   427 }
   429 .avatars.small .avatar.participation {
   430   border-color: #f70;
   431 }
   433 .avatars.small .avatar.overridden,
   434 .avatars.small .arrow.overridden {
   435   opacity: 0.3;
   436 }
   438 /*
   439   Area
   440 */
   442 .area .name {
   443   color: #444;
   444 }
   446 .area .name a {
   447   font-weight: normal;
   448 }
   450 .area .name .avatars {
   451   float: right;
   452   margin-top: -3px;
   453 }
   455 /* Initiatives */
   457 .initiative .name,
   458 .initiative a.name {
   459   font-weight: bold;
   460 }
   462 .draft .authors,
   463 .initiative .authors {
   464   /* color */
   465   color: #777;
   467   /* text format */
   468   font-size: 80%;
   469   font-style: italic;
   470 }
   472 .draft .authors a,
   473 .initiative .authors a {
   474   /* color */
   475 }
   477 .drafts .draft .created {
   478   font-weight: bold;
   479 }
   481 .box.issue .row.unit_name {
   482   border-bottom-color: #ccc;
   483 }
   484 /* Draft */
   486 .draft {
   487   line-height: 135%;
   488 }
   490 .draft h2 {
   491   font-size: 135%;
   492   font-weight: bold;
   493   margin-bottom: 0.5ex;
   494 }
   496 .draft h3 {
   497   font-size: 135%;
   498   margin-bottom: 0.5ex;
   499 }
   501 .draft p {
   502   margin-bottom: 1ex;
   503 }
   505 .draft ul {
   506   padding-left: 2em;
   507   list-style: disc;
   508 }
   510 .draft ul li {
   511   margin-bottom: 1ex;
   512 }
