projects.mako.cc - selectricity-live/blob - public/stylesheets/main.css

   1 @charset "utf-8";
   2 /* CSS Document */
   3
   4 /****************************************************************
   5    Selectricity || selectricity.org
   6    Design by Courtland Allen
   7 *****************************************************************/
   8
   9 /* basics */
  10
  11 body {
  12         color: black;
  13         background: white;
  14         background: url(/images/bg_main.png) repeat-x top left;
  15 }
  16
  17 h2 {
  18         font-size: 24px !important;
  19         margin: 0 0 1em 0 !important;
  20 }
  21
  22 h3 {
  23         font-size: 18px !important;
  24         margin: 0 0 1em 0 !important;
  25 }
  26
  27 .special {
  28         background-color: #999999;
  29         color: white;
  30         text-align: center;
  31         pading: 0 1em 0 1em;
  32 }
  33
  34
  35 /* Left column. Includes logo, poll information, and graph. */
  36
  37 #left-side {
  38         width: 270px;
  39         float: left;
  40         text-align: left;
  41         margin-top: 33px;
  42         font-size: 13px;
  43 }
  44
  45 #left-side h1 {
  46         height: 0px;
  47         overflow: hidden;
  48         padding-top: 189px;
  49         background: url(/images/title_main.png) no-repeat top left;
  50 }
  51
  52
  53 #left-side-content {
  54         color: #666666;
  55         margin-top: 40px;
  56         text-align: left;
  57 }
  58
  59 #left-side-content p {
  60         color: #666666;
  61         padding-left: 2em;
  62         margin: 2em 0 2em 0;
  63 }
  64
  65 #left-side-content ol {
  66         color: #666666;
  67 }
  68
  69 /* #graph {
  70         margin-top: 50px;
  71         background: url(/images/graph.jpg) top left no-repeat;
  72         height: 0px;
  73         overflow: hidden;
  74         padding-top: 243px;
  75 } */
  76
  77
  78
  79 /* Right column. Includes top-bar and main-box. */
  80
  81 #right-side {
  82         width: 611px;
  83         margin-top: 0px;
  84         float: right;
  85 }
  86
  87 #top-bar {
  88         float: right;
  89         margin-right: 50px;
  90         width: 231px;
  91         text-align: center;
  92         margin-bottom: 35px;
  93 }
  94
  95 #top-bar a {
  96         color: #dddddd;
  97         font-size: 11px;
  98 }
  99
 100 div#bar-left {
 101         background-image: url(/images/top_bar_1.png);
 102         width: 153px;
 103         height: 37px;
 104         padding-top: 8px;
 105         float: left;
 106         clear: left;
 107 }
 108
 109 div#bar-right {
 110         background-image: url(/images/top_bar_2.png);
 111         width: 78px;
 112         height: 37px;
 113         padding-top: 8px;
 114         float: left;
 115         clear: right;
 116 }
 117
 118 .green { color: #10a700; }
 119
 120 .left-aligned h4 {
 121         float: left;
 122         padding-top: 26px;
 123         height: 0px;
 124         overflow: hidden;
 125         background: no-repeat top left;
 126 }
 127
 128 .right-aligned h4 {
 129         float: right;
 130         padding-top: 26px;
 131         height: 0px;
 132         overflow: hidden;
 133         background: no-repeat top right;
 134 }
 135
 136 .left-aligned { text-align: left; }
 137
 138 .right-aligned { text-align: right; }
 139
 140 h5 {
 141         color: #5c5c5c;
 142         background-color: #d6d6d6;
 143         height: 21px;
 144         font-size: 16px;
 145         padding: 5px 15px 0 15px;
 146         margin-bottom: .75em;
 147         overflow: hidden;
 148 }
 149
 150 #quickvote-title .header {
 151         background-color: #74ce00;
 152 }
 153
 154 #quickvote-title .subheader {
 155         color: #74ce00;
 156         background-color: #e5e5e5;
 157 }
 158
 159 #controlroom-title .header {
 160         background-color: #dc0d13;
 161 }
 162
 163 #controlroom-title .subheader {
 164         color: #dc0d13;
 165         background-color: #e5e5e5;
 166 }
 167
 168 #voters-title .header {
 169         background-color: #005cd9;
 170 }
 171
 172 #voters-title .subheader {
 173         color: #005cd9;
 174         background-color: #e5e5e5;
 175 }
 176
 177 .header {
 178         display: block;
 179         font-family: "trebuchet ms",trebuchet,verdana,arial,sans-serif;
 180         font-size:30px;
 181         text-transform: uppercase;
 182         text-align: center;
 183         color: white;
 184         background-color: #999999;
 185         height: 32px;
 186         float: left;
 187         padding: 0px .75em 0px .75em;
 188         margin-right: 10px;
 189         margin-bottom: 14px;
 190 }
 191
 192 .subheader {
 193         display: block;
 194         font-family: "trebuchet ms",trebuchet,verdana,arial,sans-serif;
 195         font-size: 18px;
 196         text-align: left;
 197         color: #666666;
 198         background-color: #CCCCCC;
 199         height: 26px;
 200         padding: 6px 1em 0px 20px;
 201         margin-bottom: 14px;
 202 }
 203
 204 #main-box {
 205         float: right;
 206         width: 611px;
 207         padding: 0;
 208         background: #f9f9f9;
 209         border: 1px solid #b3b3b3;
 210 }
 211
 212 #main-box h1 {
 213
 214 }
 215
 216 #main-box p {
 217         margin-bottom: 1.75em;
 218         padding: 0 1.7em 0 1.7em;
 219         line-height: 1.8em;
 220         color: #454545;
 221 }
 222
 223
 224 #ErrorExplanation {
 225   width: 400px;
 226   border: 2px solid 'red';
 227   padding: 7px;
 228   padding-bottom: 12px;
 229   margin-bottom: 20px;
 230   background-color: #f0f0f0;
 231 }
 232
 233 #ErrorExplanation h2 {
 234   text-align: left;
 235   font-weight: bold;
 236   padding: 5px 5px 5px 15px;
 237   font-size: 12px;
 238   margin: -7px;
 239   background-color: #c00;
 240   color: #fff;
 241 }
 242
 243 #ErrorExplanation p {
 244   color: #333;
 245   margin-bottom: 0;
 246   padding: 5px;
 247 }
 248
 249 #ErrorExplanation ul li {
 250   font-size: 12px;
 251   list-style: square;
 252 }
 253
 254 .ListLine0 {
 255         background:  #e0f8f8;
 256
 257 }
 258 .ListLine1 {
 259         background: #cccccc;
 260
 261 }
 262
 263 #notice { background: #FFFBB3;
 264                         text-align: left;
 265                         font-weight: bold;
 266                         border: 2px dotted 'red';
 267                         margin-top: 10px;
 268                         margin-left: 50px;
 269                         padding: 5px 5px 5px 15px;
 270                         width: 400px; }
 271
 272 #status {
 273   width: 400px;
 274   border: 1px solid #0000FF;
 275   border-width: 1px;
 276   padding: 7px;
 277   padding-bottom: 12px;
 278   margin-bottom: 20px;
 279   background-color: #f0f0f0;
 280 }
 281
 282 .fieldWithErrors {
 283     display: inline;
 284 }
 285 .fieldWithErrors input, .fieldWithErrors select {
 286     background-color: #ffdfdf;
 287 }
 288
 289 #xxErrorExplanation h2 {
 290   text-align: left;
 291   font-weight: bold;
 292   padding: 5px 5px 5px 15px;
 293   font-size: 12px;
 294   margin: -7px;
 295   background-color: #c00;
 296   color: #fff;
 297 }
 298
 299 #xxErrorExplanation p {
 300   color: #333;
 301   margin-bottom: 0;
 302   padding: 5px;
 303 }
 304
 305 #xxErrorExplanation ul li {
 306   font-size: 12px;
 307   list-style: square;
 308 }
 309
 310 .mainresultbox {
 311   text-align: center;
 312   width: 850px;
 313   border-width: 2px;
 314   border-style: solid;
 315   border-color: #4D801A;
 316   padding: 7px;
 317   margin-right: 30px;
 318   margin-bottom: 30px;
 319 }
 320
 321 .mainresultbox h3 {
 322   text-align: center;
 323   font-weight: bold;
 324   padding: 5px 5px 5px 15px;
 325   margin: -7px;
 326   background-color: #73BF26;
 327   color: #fff;
 328   border-bottom: 0px;
 329 }
 330
 331 .resultbox {
 332   text-align: center;
 333   width: 400px;
 334   float: left;
 335   border-width: 2px;
 336   border-style: solid;
 337   border-color: #4D801A;
 338   padding: 7px;
 339   margin-right: 30px;
 340   margin-bottom: 30px;
 341 }
 342
 343 .resultbox h3 {
 344   text-align: center;
 345   font-weight: bold;
 346   padding: 5px 5px 5px 15px;
 347   margin: -7px;
 348   background-color: #73BF26;
 349   color: #fff;
 350   border-bottom: 0px;
 351 }
 352 .clearbox {
 353    clear: both;
 354    margin: 30px;
 355 }
 356
 357 li.moveable {
 358   background-color: #E5FFCC;
 359   border:1px solid #4D801A;
 360   cursor: move;
 361   padding: 4px;
 362   margin: 4px;
 363 }
 364
 365 #sortable_list {
 366   font-size: 24pt;
 367   display: float;
 368   float: left;
 369 }
 370
 371 .voterbox {
 372   border-spacing: 0px;
 373   border-width: 2px;
 374   border-color: #4D801A;
 375   border-style: solid;
 376 }
 377
 378 .voterbox th {
 379   border-width: 2px;
 380   border-color: #73BF26;
 381   border-style: solid;
 382   text-align: center;
 383   font-weight: bold;
 384   padding: 5px 5px 5px 15px;
 385   background-color: #73BF26;
 386   color: #fff;
 387 }
 388
 389 .voterbox td {
 390   border-collapse: collapse;
 391   border-width: 1px;
 392   border-color: #4D801A;
 393   border-style: solid;
 394
 395   text-align: right;
 396   padding-right: 5px;
 397   padding-left: 5px;
 398 }
 399
 400 .rbmoreinfo hr {
 401   width: 100%;
 402   height: 10px;
 403   color: #4D801A;
 404 }
 405 .rbmoreinfo h4 {
 406   border: 0px;
 407   font-style: italic;
 408   text-align: center;
 409   font-size: 0.9em;
 410 }
 411
 412 .rbmoreinfo p {
 413   font-size: 0.8em;
 414   padding-left: 30px;
 415   padding-right: 30px;
 416   text-align: left;
 417 }
 418
 419 .example {
 420   width: 400px;
 421   border-width: 2px;
 422   border-style: solid;
 423   border-color: #73BF26;
 424   padding: 7px;
 425   padding-bottom: 12px;
 426   margin-bottom: 20px;
 427   background-color: #f0f0f0;
 428 }
 429
 430 .example h4 {
 431   text-align: center;
 432   font-weight: bold;
 433   padding: 5px 5px 5px 15px;
 434   font-size: 12px;
 435   margin: -7px;
 436   background-color: #73BF26;
 437   color: #fff;
 438   border-bottom: 0px;
 439 }
 440
 441 .example p {
 442   margin-bottom: 0;
 443   padding: 5px;
 444 }
 445
 446
 447 .warning {
 448   width: 400px;
 449   border-width: 2px;
 450   border-style: solid;
 451   border-color: #4D801A;
 452   padding: 7px;
 453   padding-bottom: 12px;
 454   margin-bottom: 20px;
 455   background-color: #f0f0f0;
 456 }
 457
 458 .warning h4 {
 459   text-align:
 460   center;
 461   font-weight:
 462   bold;
 463   padding: 5px 5px 5px 15px;
 464   font-size: 12px;
 465   margin: -7px;
 466   background-color: #4D801A;
 467   color: #fff;
 468   border-bottom: 0px;
 469 }
 470
 471 .warning p {
 472   margin-bottom: 0;
 473   padding: 5px;
 474 }
 475
 476 #election_creation_progress_bar ul li {
 477   display: inline;
 478   list-style: default;
 479 }
 480
 481 #election_creation_progress_bar ul li:after {
 482   font-weight: normal;
 483   color: #000;
 484   content: " || ";
 485 }
 486
 487 #election_creation_progress_bar ul li.last:after {
 488   content: "";
 489 }
 490
 491 #election_creation_progress_bar li.step_selected {
 492   font-weight: bold;
 493 }
 494
 495 #election_creation_progress_bar li.step_unselected {
 496   color: #CCCCCC;
 497   font-weight: bold;
 498 }
 499
 500 /*
 501 #plurality h4 {
 502         background: url(/images/voting_plurality.png);
 503         width: 217px;
 504 }
 505
 506 #schulze h4 {
 507         background: url(/images/voting_schulze_quickvote.png);
 508         width: 183px;
 509 }
 510
 511 #approval h4 {
 512         background: url(/images/voting_approval.png);
 513         width: 208px;
 514 }
 515
 516 #borda h4 {
 517         background: url(/images/voting_borda.png);
 518         width: 147px;
 519 }
 520
 521 #condorcet h4 {
 522         background: url(/images/voting_condorcet.png);
 523         width: 240px;
 524 }
 525
 526 #irv h4 {
 527         background: url(/images/voting_irv.png);
 528         width: 86px;
 529 }
 530 */
 531
 532