theme/neo/css/display.css

   1 /** theme: neo
   2  *
   3  * @package   StatusNet
   4  * @author    Samantha Doherty <sammy@status.net>
   5  * @copyright 2011 StatusNet, Inc.
   6  * @license   http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
   7  * @link      http://status.net/
   8  */
   9
  10 @font-face {
  11     font-family: 'Lato';
  12     src: url('../fonts/lato-regular-webfont.eot?') format('eot'), url('../fonts/lato-regular-webfont.woff') format('woff'), url('../fonts/lato-regular-webfont.ttf') format('truetype'), url('../fonts/lato-regular-webfont.svg#webfontCjmEHx3G') format('svg');
  13     font-weight: normal;
  14     font-style: normal;
  15 }
  16
  17 @font-face {
  18     font-family: 'Lato';
  19     src: url('../fonts/lato-bold-webfont.eot?') format('eot'), url('../fonts/lato-bold-webfont.woff') format('woff'), url('../fonts/lato-bold-webfont.ttf') format('truetype'), url('../fonts/lato-bold-webfont.svg#webfontCjmEHx3G') format('svg');
  20     font-weight: bold;
  21     font-style: normal;
  22 }
  23
  24 @font-face {
  25     font-family: 'Lato';
  26     src: url('../fonts/lato-italic-webfont.eot?') format('eot'), url('../fonts/lato-italic-webfont.woff') format('woff'), url('../fonts/lato-italic-webfont.ttf') format('truetype'), url('../fonts/lato-italic-webfont.svg#webfontCjmEHx3G') format('svg');
  27     font-weight: normal;
  28     font-style: italic;
  29 }
  30
  31 @media screen, projection, tv {
  32
  33 body {
  34     background-color: #C6C8CC;
  35     background-image: url(../images/bg.png);
  36     font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
  37     font-size: 14px;
  38     line-height: 1.6;
  39     color: #222;
  40 }
  41
  42 input, textarea, select, option {
  43     font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
  44     font-size: 1em;
  45 }
  46
  47 a {color: #3e3e8c;}
  48 a:hover {color: blue;}
  49
  50 abbr {border-bottom: none;}
  51
  52 h1 {font-size: 1.6em;}
  53 h2 {font-size: 1.6em;}
  54 h3 {font-size: 1.4em;}
  55 h4 {font-size: 1.4em;}
  56 h5 {font-size: 1.2em;}
  57 h6 {font-size: 1em;}
  58
  59 #wrap {
  60     width: 960px;
  61     margin: 0px auto;
  62     background: #fff url('../images/brdr_black_dot.png') repeat-x 0px 10px;
  63     border-left: 10px solid #fff;
  64     border-right: 10px solid #fff;
  65     padding-top: 10px;
  66 }
  67
  68 #header {
  69     width: 960px;
  70     padding: 0px;
  71     padding-top: 12px;
  72 }
  73
  74 address {
  75     float: left;
  76     position: relative;
  77     top: 1px;
  78     left: 2px;
  79     margin: 0px;
  80     padding: 0px;
  81     height: 24px;
  82     width: 148px;
  83     z-index: 99;
  84 }
  85
  86 #site_nav_global_primary {
  87     display: block;
  88     position: absolute;
  89     top: 10px;
  90     right: 0;
  91     width: 800px;
  92     margin: 0px;
  93     height: 24px;
  94     line-height: 20px;
  95     -webkit-border-top-right-radius: 6px;
  96     -moz-border-radius-topright: 6px;
  97     border-top-right-radius: 6px;
  98     background: #364A84;
  99     background: -moz-linear-gradient(top, #516499 , #364a84);
 100     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#516499), color-stop(100%,#364a84));
 101     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#516499', endColorstr='#364a84',GradientType=0 ); /* XXX move all to ie.css */
 102 }
 103
 104 #site_nav_global_primary ul {
 105     float: right;
 106 }
 107
 108 #site_nav_global_primary li {
 109     margin-right: 0px;
 110 }
 111
 112 #site_nav_global_primary li:last-child {
 113     margin-right: 10px;
 114 }
 115
 116 #site_nav_global_primary a {
 117     color: #fff !important;
 118     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 119     padding: 2px 10px 2px 10px;
 120     height: 20px;
 121     display: block;
 122     float: left;
 123 }
 124
 125 #site_nav_global_primary a:hover {
 126     color: #fff !important;
 127     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 128     background: #4c619c;
 129     text-decoration: none;
 130 }
 131
 132 #site_notice {
 133     color: #000;
 134     float: right;
 135     width: 280px;
 136     padding: 10px;
 137     margin-left: 40px;
 138     -webkit-border-radius: 6px;
 139     -moz-border-radius: 6px;
 140     border-radius: 6px;
 141 }
 142
 143 #site_notice a {
 144     color: #3e3e8c;
 145 }
 146
 147 #anon_notice {
 148     color: #000;
 149     clear: both;
 150     background: none;
 151     padding: 0px;
 152     margin-bottom: 10px;
 153 }
 154
 155 #anon_notice a {
 156     color: #3e3e8c;
 157 }
 158
 159 #core {
 160     clear: both;
 161     margin: 0px;
 162     width: 958px;
 163     border-top: 5px solid #FB6104;
 164     border-left: 1px solid #d8dae6;
 165     border-right: 1px solid #d8dae6;
 166 }
 167
 168 #aside_primary_wrapper {
 169     width: 100%;
 170     float: left;
 171     overflow: hidden;
 172     position: relative;
 173     background-color: #ececf2;
 174 }
 175
 176 #content_wrapper  {
 177     width: 100%;
 178     float: left;
 179     position: relative;
 180     right: 239px;
 181     background-color: #fff;
 182     border-right: 1px solid #d8dae6;
 183 }
 184
 185 #site_nav_local_views_wrapper  {
 186     width: 100%;
 187     float: left;
 188     position: relative;
 189     right: 561px;
 190     background-color: #ececf2;
 191     border-right: 1px solid #d8dae6;
 192 }
 193
 194 #site_nav_local_views {
 195     width: 138px;
 196     float: left;
 197     overflow: hidden;
 198     position: relative;
 199     left: 800px;
 200     margin-top: 0px;
 201     padding: 22px 10px 40px 10px;
 202 }
 203
 204 #site_nav_local_views H3 {
 205     margin-bottom: 10px;
 206     padding-bottom: 6px;
 207     background: url('../images/brdr_black_dot.png') repeat-x bottom left;
 208     color: #7a7c87;
 209     font-size: 1.1em;
 210     letter-spacing: 2px;
 211     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 212     text-transform: uppercase;
 213 }
 214
 215 #site_nav_local_views li {
 216     display: block;
 217     margin: 0px 0px 8px 0px;
 218 }
 219
 220 #site_nav_local_views li ul {
 221     margin-bottom: 20px;
 222 }
 223
 224 #site_nav_local_views a {
 225     display: block;
 226     padding: 0px 0px 1px 10px;
 227     -webkit-border-radius: 4px;
 228     -moz-border-radius: 4px;
 229     border-radius: 4px;
 230     text-transform: uppercase;
 231     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 232 }
 233
 234 #site_nav_local_views a:hover, #site_nav_local_views .current a {
 235     color: #fff;
 236     text-decoration: none;
 237     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 238     background: #364a84;
 239     background: -moz-linear-gradient(top, #7b8dbb , #364a84);
 240     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b8dbb), color-stop(100%,#364a84));
 241     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b8dbb', endColorstr='#364a84',GradientType=0 );
 242 }
 243
 244 #content {
 245     width: 520px;
 246     float: left;
 247     overflow: hidden;
 248     position: relative;
 249     left: 801px;
 250     margin: 0px;
 251     padding: 20px 20px 40px 20px;
 252 }
 253
 254 /* Input forms */
 255
 256 .input_forms {
 257     float: left;
 258     position: relative;
 259     top: -20px;
 260     left: -20px;
 261     padding: 18px 20px 0px 20px;
 262     background: #fafafa url('../images/brdr_black_dot.png') repeat-x bottom left;
 263 }
 264
 265 #input_form_nav {
 266     float: left;
 267     margin-bottom: 10px;
 268 }
 269
 270 #input_form_nav li a {
 271     display: block;
 272     float: left;
 273     padding: 0px 10px 1px 10px;
 274     margin-right: 10px;
 275     -webkit-border-radius: 4px;
 276     -moz-border-radius: 4px;
 277     border-radius: 4px;
 278     border: 1px solid #ECECF2;
 279     font-weight: bold;
 280     line-height: 1.4em;
 281     text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.9);
 282     background: #ececf2;
 283     background: -moz-linear-gradient(top, #ffffff , #ececf2);
 284     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ececf2));
 285     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ececf2',GradientType=0 );
 286 }
 287
 288 #input_form_nav li:hover a, #input_form_nav li.current a {
 289     color: #fff;
 290     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
 291     border: 1px solid #ececf2;
 292     background: #364a84;
 293     background: -moz-linear-gradient(top, #7b8dbb , #364a84);
 294     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b8dbb), color-stop(100%,#364a84));
 295     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b8dbb', endColorstr='#364a84',GradientType=0 );
 296 }
 297
 298 .input_form_nav_tab a, .input_form_nav_tab.current {
 299     text-decoration: none !important; /* XXX cf rebase */
 300 }
 301
 302 .input_form {
 303     position: relative;
 304     float: left;
 305     width: 520px;
 306     padding-bottom: 15px;
 307 }
 308
 309 #input_form_status, #input_form_direct {
 310     padding-bottom: 45px;
 311 }
 312
 313 .form_notice {
 314     padding: 0px;
 315     background: none;
 316 }
 317
 318 .form_notice fieldset {
 319     width: auto;
 320     position: static;
 321 }
 322
 323 .form_notice #notice_data-text-label {
 324     display: none; /* XXX move into input with js */
 325 }
 326
 327 .form_notice_placeholder .placeholder {
 328     width: 473px;
 329     padding: 4px 10px 4px 10px;
 330     border: 1px solid #a6a6a6;
 331     -webkit-border-radius: 4px;
 332     -moz-border-radius: 4px;
 333     border-radius: 4px;
 334     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 335     -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 336     -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 337     z-index: 97;
 338     font-size: 1em;
 339 }
 340
 341 .form_notice textarea {
 342     width: 473px;
 343     height: 42px;
 344     padding: 6px 10px 18px 10px;
 345     border: 1px solid #a6a6a6;
 346     -webkit-border-radius: 4px;
 347     -moz-border-radius: 4px;
 348     border-radius: 4px;
 349     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 350     -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 351     -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
 352     z-index: 97;
 353     font-size: 1.2em;
 354 }
 355
 356 #form_notice-direct.form_notice textarea {
 357     width: 498px;
 358 }
 359
 360 .form_notice label.notice_data-attach {
 361     top: 0px;
 362     right: 0px;
 363     z-index: 96;
 364 }
 365
 366 .form_notice .notice_data-geo_wrap label,
 367 .form_notice .notice_data-geo_wrap input {
 368     top: 26px;
 369     right: 0px;
 370     z-index: 99;
 371 }
 372
 373 .form_notice .count {
 374     position: absolute;
 375     top: 50px;
 376     right: 35px;
 377     font-size: 0.8em;
 378     height: 1em;
 379     z-index: 99;
 380 }
 381
 382 #form_notice-direct.form_notice .count {
 383     top: 80px;
 384     right: 10px;
 385 }
 386
 387 .form_notice #notice_action-submit {
 388     position: absolute;
 389     top: 100%;
 390     left: 0px;
 391     margin-top: -44px;
 392     float: left;
 393     width: 90px;
 394     padding: 0px;
 395     z-index: 99;
 396 }
 397
 398 .form_notice .error,
 399 .form_notice .success,
 400 .form_notice .notice-status {
 401     width: 478px;
 402     position: relative;
 403     top: 0px;
 404     float: none;
 405     clear: none;
 406     margin-left: 0px;
 407     margin-top: 10px;
 408     padding: 5px 5px 5px 10px;
 409     border: 1px solid #ccc;
 410 }
 411
 412 .form_notice .error {
 413     border: 1px solid #d05858;
 414 }
 415
 416 .form_notice .attach-status code {
 417     font-size: 1em;
 418 }
 419
 420 .input_form fieldset {
 421     margin: 0px;
 422     padding: 0px;
 423 }
 424
 425 .input_form fieldset fieldset {
 426     margin-bottom: 10px !important;
 427 }
 428
 429 .to-selector {
 430     padding-top: 15px;
 431     z-index: 99;
 432 }
 433
 434 .form_settings label[for=notice_to] {
 435     margin-left: 100px;
 436     margin-right: 5px;
 437 }
 438
 439 .checkbox-wrapper {
 440     padding: 2px;
 441     clear: left;
 442     display: block;
 443     margin-left: 26%;
 444 }
 445
 446 .form_notice .checkbox-wrapper {
 447     display: inline;
 448     margin-left: 10px;
 449 }
 450
 451 .form_settings .checkbox-wrapper label.checkbox {
 452     margin-left: 0px;
 453     margin-top: 6px;
 454     line-height: 1.2em;
 455     left: -3px;
 456 }
 457
 458 .checkbox-wrapper #notice_private {
 459     display:none;
 460 }
 461
 462 .checkbox-wrapper.unchecked label.checkbox {
 463     padding-left: 20px;
 464     background: url(../images/lock_open.png) no-repeat 0px 0px;
 465     opacity: 0.6;
 466 }
 467
 468 .checkbox-wrapper.checked label.checkbox {
 469     padding-left: 20px;
 470     background: url(../images/lock.png) no-repeat 0px 0px;
 471     color: red;
 472     opacity: 1;
 473 }
 474
 475 #aside_primary {
 476     width: 218px;
 477     float: left;
 478     overflow: hidden;
 479     position: relative;
 480     left: 802px;
 481     padding: 22px 10px 40px 10px;
 482     margin-top: 0px;
 483     background: none;
 484 }
 485
 486 #aside_primary .section {
 487     width: 100%;
 488     margin-left: 0px;
 489     margin-right: 0px;
 490     font-size: 0.88em;
 491 }
 492
 493 #aside_primary h2 {
 494     margin-bottom: 10px;
 495     padding-bottom: 6px;
 496     background: url('../images/brdr_black_dot.png') repeat-x bottom left;
 497     color: #7a7c87;
 498     font-size: 1.25em;
 499     letter-spacing: 2px;
 500     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 501     text-transform: uppercase;
 502 }
 503
 504 .profile_block .entity_actions {
 505     float: right;
 506     width: 110px;
 507     margin-top: 2px;
 508     margin-bottom: 2px;
 509 }
 510
 511 .profile_block .entity_moderation:hover ul,
 512 .profile_block .entity_role:hover ul {
 513     right: 20px;
 514 }
 515
 516 .profile_block_name {
 517     font-size: 14px;
 518     font-weight: bold;
 519 }
 520
 521 .profile_block_location {
 522     font-weight: bold;
 523 }
 524
 525 .profile_block_description {
 526     line-height: 1.2em;
 527 }
 528
 529 #site_nav_object ul {
 530     background: url('../images/brdr_black_dot.png') repeat-x top left;
 531 }
 532
 533 #site_nav_object li {
 534     display: block;
 535     margin: -8px 0px 8px 0px;
 536     padding-top: 8px;
 537 }
 538
 539 #site_nav_object a {
 540     font-size: 14px;
 541     display: block;
 542     padding: 0px 0px 1px 10px;
 543     -webkit-border-radius: 4px;
 544     -moz-border-radius: 4px;
 545     border-radius: 4px;
 546     text-transform: uppercase;
 547     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 548 }
 549
 550 #site_nav_object a:hover, #site_nav_object .current a {
 551     color: #fff;
 552     text-decoration: none;
 553     text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
 554     background: #364a84;
 555     background: -moz-linear-gradient(top, #7b8dbb , #364a84);
 556     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b8dbb), color-stop(100%,#364a84));
 557     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b8dbb', endColorstr='#364a84',GradientType=0 );
 558 }
 559
 560 .section ul.entities {
 561     width: 240px;
 562 }
 563
 564 .section .entities li {
 565     margin-right: 3.6px;
 566     margin-bottom: 5px;
 567     width: 24px;
 568 }
 569
 570 #popular_notices .avatar {
 571     position: relative;
 572     top: 4px;
 573     margin-bottom: 6px;
 574 }
 575
 576 #aside_primary td {
 577     padding-right: 20px;
 578     padding-bottom: 14px;
 579 }
 580
 581 #aside_primary td .nickname {
 582     line-height: 1.6em;
 583 }
 584
 585 .section .avatar {
 586     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 587     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 588     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 589 }
 590
 591 .invite_button {
 592     height: 2.1em;
 593     line-height: 2.1em;
 594     display: block;
 595     text-align: center;
 596     color:#fff;
 597     font-weight: bold;
 598     text-transform: uppercase;
 599     font-size: 1.2em;
 600     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
 601     border: 1px solid #d7621c;
 602     border-radius: 4px;
 603     -moz-border-radius: 4px;
 604     -webkit-border-radius: 4px;
 605     background: #FB6104;
 606     background: -moz-linear-gradient(top, #ff9d63 , #FB6104);
 607     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9d63), color-stop(100%,#FB6104));
 608     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d63', endColorstr='#FB6104',GradientType=0 );
 609 }
 610
 611 .invite_button:hover {
 612     color: #fff;
 613     text-decoration: none;
 614     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 615     background: #ff9d63;
 616     background: -moz-linear-gradient(top, #FB6104 , #fc8035);
 617     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB6104), color-stop(100%,#fc8035));
 618     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB6104', endColorstr='#fc8035',GradientType=0 );
 619 }
 620
 621 #content h1 {
 622     border-bottom: 3px solid #A6ADBF;
 623     color: #A6ADBF;
 624     font-size: 1.4em;
 625     letter-spacing: 4px;
 626     text-transform: none;
 627 }
 628
 629 #notices_primary {
 630     margin-top: -5px;
 631 }
 632
 633 #content .notice {
 634     padding-bottom: 14px;
 635     border-bottom: 2px dotted #eee;
 636 }
 637
 638 .notice {
 639     line-height: 1.36em;
 640     margin-bottom: 10px;
 641 }
 642
 643 #content .notice .author .photo {
 644     left: 0px;
 645     top: 9px;
 646 }
 647
 648 #content .notice .entry-title {
 649     min-height: 35px;
 650 }
 651
 652 #showstream .notice .entry-title {
 653     min-height: 1px;
 654 }
 655
 656 #shownotice .notice .entry-title {
 657     min-height:123px;
 658 }
 659
 660 .notice div.entry-content {
 661     font-size: 0.88em;
 662     line-height: 1.2em;
 663     margin-top: 6px;
 664     opacity: 0.6;
 665 }
 666
 667 .notice:hover div.entry-content {
 668     opacity: 1;
 669 }
 670
 671 .user_in .notice div.entry-content {
 672     max-width: 440px;
 673 }
 674
 675 div.entry-content a.response:before {
 676         content: "(";
 677 }
 678
 679 div.entry-content a.response:after {
 680         content: ")";
 681 }
 682
 683 .notice-options {
 684     margin-top: 4px;
 685 }
 686
 687 .threaded-replies {
 688     clear: both;
 689     float: left;
 690     width: 458px;
 691     margin-left: 59px;
 692     margin-top: 10px;
 693     padding-right: 2px;
 694     border-left: 3px solid #ECECF2;
 695     background: #fafafa;
 696     font-size: 1em;
 697 }
 698
 699 #content .notice .threaded-replies .notice,
 700 #content .notice .threaded-replies .notice-data {
 701     width: 440px;
 702     min-height: 1px;
 703     padding-bottom: 14px;
 704     padding-top: 5px;
 705     border-bottom: 2px dotted #eee;
 706     line-height: 1.36em;
 707     margin-top: 0px;
 708     margin-bottom: 0px;
 709     margin-left: 10px;
 710     background: none;
 711 }
 712
 713 #content .notice .threaded-replies .entry-title {
 714     min-height: 1px;
 715 }
 716
 717 #content .threaded-replies .notice .author .photo {
 718     height: 24px;
 719     width: 24px;
 720     top: 14px;
 721     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 722     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 723     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 724 }
 725
 726 #content .notice .threaded-replies .notice .entry-title {
 727     margin: 2px 7px 0px 35px;
 728 }
 729
 730 #content .notice .threaded-replies .notice div.entry-content {
 731     clear:left;
 732     float:left;
 733     margin-left: 35px;
 734     margin-top: 4px !important;
 735 }
 736
 737 .threaded-replies li {
 738     list-style-type: none;
 739 }
 740
 741 .threaded-replies .notice-reply-comments {
 742     margin: 2px 0px 4px 10px;
 743 }
 744
 745 .threaded-replies .placeholder {
 746     margin: 10px;
 747     width: 426px;
 748 }
 749
 750 .threaded-replies .notice-reply {
 751     clear: left;
 752     position: relative;
 753     padding: 10px;
 754     padding-bottom: 44px;
 755 }
 756
 757 .threaded-replies .form_notice textarea {
 758     width: 385px;
 759 }
 760
 761 .threaded-replies .form_notice label.notice_data-attach {
 762     top: 10px;
 763     right: 10px;
 764 }
 765
 766 .threaded-replies .form_notice .notice_data-geo_wrap label,
 767 .threaded-replies .form_notice .notice_data-geo_wrap input {
 768     top: 36px;
 769     right: 10px;
 770 }
 771
 772 .threaded-replies .form_notice .count {
 773     top: 60px;
 774     right: 50px;
 775 }
 776
 777 .threaded-replies .form_notice #notice_action-submit {
 778     left: 10px;
 779 }
 780
 781 .threaded-replies .form_notice .error,
 782 .threaded-replies .form_notice .success,
 783 .threaded-replies .form_notice .notice-status {
 784     width: 390px;
 785 }
 786
 787 .threaded-replies .to-selector {
 788     display: none;
 789 }
 790
 791 .user_in.realtime-popup .notice div.entry-content {
 792     max-width: 320px;
 793 }
 794
 795 .realtime-popup .threaded-replies {
 796     margin-left: 15px;
 797 }
 798
 799 .realtime-popup .threaded-replies .form_notice textarea {
 800     width: 385px !important;
 801 }
 802
 803 .realtime-popup .threaded-replies .form_notice label.notice_data-attach {
 804     top: 10px !important;
 805     right: 10px !important;
 806 }
 807
 808 #content .notice .notice {
 809     width: 100%;
 810     margin-left: 0;
 811     margin-top: 16px;
 812     margin-bottom: 10px;
 813 }
 814
 815 .notice .notice {
 816 background-color:rgba(200, 200, 200, 0.050);
 817 }
 818 .notice .notice .notice {
 819 background-color:rgba(200, 200, 200, 0.100);
 820 }
 821 .notice .notice .notice .notice {
 822 background-color:rgba(200, 200, 200, 0.150);
 823 }
 824 .notice .notice .notice .notice .notice {
 825 background-color:rgba(200, 200, 200, 0.300);
 826 }
 827
 828 .pagination {
 829     height: 1.2em;
 830 }
 831
 832 #jOverlayContent button {
 833     top: 20px;
 834     right: 36px;
 835 }
 836
 837 .entity_profile {
 838     float: left;
 839     width: 360px;
 840     margin-top: 4px;
 841 }
 842
 843 .entity_profile .entity_depiction {
 844     margin-top: 4px;
 845 }
 846
 847 .entity_actions {
 848     width: 140px;
 849     margin-top: 8px;
 850     margin-bottom: 10px;
 851 }
 852
 853 .entity_actions a, .entity_actions p, .entity_actions .entity_subscribe input, .entity_actions .entity_block input, .entity_actions .entity_moderation input, .entity_actions .entity_role input, .entity_actions .entity_nudge input, .entity_actions .entity_delete input, .entity_actions input.submit {
 854         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 855     border-radius: 4px;
 856     -moz-border-radius: 4px;
 857     -webkit-border-radius: 4px;
 858     background-color: #CDD1DD !important;
 859 }
 860
 861 .entity_moderation:hover ul,
 862 .entity_role:hover ul {
 863     border-radius: 4px;
 864     -moz-border-radius: 4px;
 865     -webkit-border-radius: 4px;
 866 }
 867
 868 .entity_send-a-message .form_notice legend {
 869         text-shadow:0 1px 0 rgba(255,255,255,0.4);
 870 }
 871
 872 .entity_send-a-message .form_notice {
 873     border: 1px solid #7B4E82;
 874 }
 875
 876 .entity_send-a-message .form_notice #notice_action-submit {
 877     color: #fff !important;
 878     top: 46px;
 879 }
 880
 881 #aside_primary #entity_remote_subscribe a:hover {
 882     background-color: #fff !important;
 883 }
 884
 885 #entity_remote_subscribe .dialogbox {
 886     border: 1px solid #7B4E82;
 887     border-radius: 8px;
 888         -moz-border-radius: 8px;
 889         -webkit-border-radius: 8px;
 890 }
 891
 892 #entity_remote_subscribe input {
 893     padding-left: 4px;
 894 }
 895
 896 #entity_remote_subscribe .submit_dialogbox {
 897     margin-top: 10px;
 898     float: right;
 899 }
 900
 901 #filter_tags_item .submit {
 902   left: 6px;
 903   top: -3px;
 904 }
 905
 906 #pagination {
 907     height: 1.2em;
 908     padding-bottom: 12px;
 909     -webkit-border-radius: 6px;
 910     -moz-border-radius: 6px;
 911     border-radius: 6px;
 912 }
 913
 914 #footer {
 915     position: relative;
 916     top: -6px;
 917     color: #000;
 918     margin-left: 0px;
 919     margin-right: 0px;
 920     -webkit-border-top-left-radius: 6px;
 921     -webkit-border-top-right-radius: 6px;
 922     -moz-border-radius-topleft: 6px;
 923     -moz-border-radius-topright: 6px;
 924     border-top-left-radius: 6px;
 925     border-top-right-radius: 6px;
 926 }
 927
 928 #footer a {
 929     color: #3e3e8c;
 930 }
 931
 932 #site_nav_global_secondary {
 933     margin-bottom: 10px;
 934 }
 935
 936 .error, .success, .notice-status {
 937     background-color: #F7E8E8;
 938     padding: 4px;
 939     -webkit-border-radius: 6px;
 940     -moz-border-radius: 6px;
 941     border-radius: 6px;
 942 }
 943 .success, .notice-status {
 944     background-color: #f2f2f2;
 945 }
 946
 947 .form_notice input.submit, .form_settings input.submit, .form_settings input.cancel {
 948     height: 1.9em;
 949     padding: 0px 10px;
 950     color:#fff;
 951     font-weight: bold;
 952     text-transform: uppercase;
 953     font-size: 1.2em;
 954     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
 955     border: 1px solid #d7621c;
 956     border-radius: 4px;
 957     -moz-border-radius: 4px;
 958     -webkit-border-radius: 4px;
 959     background: #FB6104;
 960     background: -moz-linear-gradient(top, #ff9d63 , #FB6104);
 961     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9d63), color-stop(100%,#FB6104));
 962     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d63', endColorstr='#FB6104',GradientType=0 );
 963 }
 964
 965 .form_notice input.submit:hover, .form_settings input.submit:hover, .form_settings input.cancel:hover {
 966     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
 967     background: #ff9d63;
 968     background: -moz-linear-gradient(top, #FB6104 , #fc8035);
 969     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB6104), color-stop(100%,#fc8035));
 970     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB6104', endColorstr='#fc8035',GradientType=0 );
 971 }
 972
 973 .form_settings input#settings_design_reset, .form_settings input.cancel {
 974     background: #e2e2e2;
 975     color: #8e181b;
 976     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 977 }
 978
 979 .form_settings input#settings_design_reset:hover, .form_settings input.cancel:hover {
 980     background: #f2f2f2;
 981     color: #8e181b;
 982     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
 983 }
 984
 985 .form_settings input.checkbox, .form_settings input.radio {
 986     margin-left: 24%;
 987     margin-top: 2px;
 988     position: relative;
 989     left: -14px;
 990 }
 991
 992 .form_settings label.checkbox, .form_settings label.radio {
 993     width: auto;
 994     max-width: 60%;
 995     position: relative;
 996     left: -30px;
 997 }
 998
 999 .form_settings li input.radio {
1000     clear: left;
1001 }
1002
1003 .form_settings label.radio {
1004     margin-left: 10px;
1005     margin-right: 10px;
1006     text-align: left;
1007 }
1008
1009 #form_login p.form_guide, #form_register #settings_rememberme p.form_guide, #form_openid_login #settings_rememberme p.form_guide, #settings_twitter_remove p.form_guide, #design_background-image_onoff p.form_guide {
1010     margin-left: 26%;
1011 }
1012
1013 #form_search ul.form_data #q {
1014     margin-left: 10px;
1015 }
1016
1017 .form_settings fieldset fieldset {
1018     margin-bottom: 30px;
1019     padding-top: 25px;
1020 }
1021
1022
1023 #content thead th {
1024 text-align:left;
1025 }
1026 #content tbody th {
1027 vertical-align:top;
1028 text-align:left;
1029 font-weight:normal;
1030 padding-top:11px;
1031 padding-right:18px;
1032 }
1033 #content tbody tr {
1034     border-top: 1px dotted #bbb;
1035 }
1036 #content td {
1037 padding:11px 18px 11px 0;
1038 vertical-align:top;
1039 }
1040 #content td:last-child {
1041 padding-right:0;
1042 }
1043
1044
1045 /* Bookmark specific styles */
1046
1047 #content .bookmark .entry-title {
1048     margin-left: 0px;
1049 }
1050
1051 .bookmark h3 {
1052     margin: 0px 0px 8px 0px;
1053     float: left;
1054     line-height: 1.2em;
1055     max-width: 92%;
1056 }
1057
1058 .bookmark-notice-count {
1059     border-radius: 4px;
1060         -moz-border-radius: 4px;
1061         -webkit-border-radius: 4px;
1062     padding: 1px 6px;
1063     font-size: 1.2em;
1064     line-height: 1.2em;
1065     background: #fff;
1066     border: 1px solid #7b8dbb;
1067     color: #3e3e8c !important;
1068     position: relative;
1069     right: 4px;
1070     margin-left: 10px;
1071 }
1072
1073 .bookmark-notice-count:hover {
1074     text-decoration: none;
1075     background: #f2f2f2;
1076     border: 1px solid #7b8dbb;
1077     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
1078 }
1079
1080 .notice .bookmark-description {
1081     clear: both;
1082     margin-left: 0px;
1083     margin-bottom: 0px;
1084 }
1085
1086 .notice .bookmark-author {
1087     margin-left: 0px;
1088     float: left;
1089 }
1090
1091 .bookmark-tags {
1092     clear: both;
1093     margin-bottom: 8px;
1094     line-height: 1.6em;
1095 }
1096
1097 ul.bookmark-tags a {
1098     border-radius: 4px;
1099         -moz-border-radius: 4px;
1100         -webkit-border-radius: 4px;
1101     padding: 1px 6px;
1102     background: #f2f2f2;
1103     color: #3e3e8c !important;
1104     text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
1105     font-size: 0.88em;
1106 }
1107
1108 ul.bookmark-tags a:hover {
1109     background-color: #cdd1dd;
1110     text-decoration: none;
1111 }
1112
1113 .bookmark-avatar {
1114     float: none !important;
1115     position: relative;
1116     top: 2px;
1117 }
1118
1119 .bookmark div.entry-content {
1120     font-size: 0.88em;
1121     line-height: 1.2em;
1122     margin-top: 6px;
1123     opacity: 0.6;
1124     margin-bottom: 0px;
1125 }
1126
1127 .bookmark:hover div.entry-content {
1128     opacity: 1;
1129 }
1130
1131 .bookmark .notice-options {
1132     margin-top: 16px;
1133 }
1134
1135 #bookmarkpopup {
1136     min-width: 600px;
1137     margin-top: 0px;
1138     height: 100%;
1139     border: 10px solid #364A84;
1140     background: #364A84;
1141 }
1142
1143 #bookmarkpopup #wrap {
1144     width: auto;
1145     min-width: 560px;
1146     padding: 40px 0px 25px 0px;
1147     margin-right: 2px;
1148     background: #fff url(../mobilelogo.png) no-repeat 6px 6px;
1149 }
1150
1151 #bookmarkpopup #header {
1152     width: auto;
1153     padding: 0px 10px;
1154 }
1155
1156 #bookmarkpopup .form_settings label {
1157     margin-top: 2px;
1158     text-align: right;
1159     width: 24%;
1160     font-size: 1.2em;
1161 }
1162
1163 #bookmarkpopup .form_settings .form_data input {
1164     width: 60%;
1165 }
1166
1167 #bookmarkpopup .form_guide {
1168     color: #777;
1169 }
1170
1171 #bookmarkpopup #submit {
1172     float: right;
1173     margin-right: 0px;
1174 }
1175
1176 #bookmarkpopup fieldset fieldset {
1177     margin-bottom: 10px;
1178 }
1179
1180 /* Onboard specific styles */
1181
1182 .onboard-flash {
1183     position: relative;
1184     right: -800px;
1185     top: 10px;
1186     border-radius: 6px;
1187         -moz-border-radius: 6px;
1188         -webkit-border-radius: 6px;
1189     font-size: 1.1em;
1190     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
1191     -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
1192     -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
1193 }
1194
1195 .onboard-flash p {
1196     margin-bottom: 10px;
1197 }
1198
1199 .onboard-flash .next:before {
1200     content: '\00BB';
1201     padding-right: 6px;
1202 }
1203
1204 .onboard-breadcrumbs {
1205     margin-bottom: 16px !important;
1206 }
1207
1208 .onboard-breadcrumbs li {
1209     background: none !important;
1210     border-top: none !important;
1211     padding: 6px 12px 2px 0px !important;
1212 }
1213
1214 .onboard-breadcrumbs li:last-child {
1215     padding-right: 0px !important;
1216 }
1217
1218 .onboard-breadcrumbs a {
1219     text-decoration: none;
1220 }
1221
1222 .onboard-breadcrumbs a:hover {
1223     color: #3e3e8c !important;
1224 }
1225
1226 /* Billing specific styles */
1227
1228 #content table.billing_info {
1229     margin-top: 10px;
1230     background:rgba(240, 240, 240, 0.4);
1231 }
1232
1233 #content table.billing_info th {
1234     text-align: right;
1235     width: 50%;
1236 }
1237
1238 .invalid {
1239     border: solid 2px red !important;
1240 }
1241
1242 #payment_history table {
1243     width: 100%;
1244 }
1245
1246 #billingadminpanel .form_settings input {
1247     margin-right: 0px;
1248 }
1249
1250 /* Directory specific styles */
1251
1252 td.entity_profile {
1253     width: auto;
1254 }
1255
1256 #user_directory {
1257     position: relative;
1258     top: -20px;
1259 }
1260
1261 div#user_directory div.alpha_nav > a {
1262     border-left: 1px solid #ccc !important;
1263     padding-left: 3.5px !important;
1264     padding-right: 4px !important;
1265     margin-right: 0px;
1266     float: left;
1267     line-height: 1.4em;
1268 }
1269
1270 div#user_directory div.alpha_nav > a.first {
1271     border-left: none !important;
1272 }
1273
1274 div#user_directory div.alpha_nav a.current {
1275     background-color: #ECECF2 !important;
1276 }
1277
1278 table.profile_list {
1279     margin-top: 10px;
1280 }
1281
1282 .profile_list th#created {
1283     width: 100px;
1284 }
1285
1286 .profile_list th#subscriptions {
1287     width: 120px;
1288 }
1289
1290 table.profile_list tr.alt {
1291     background-color: #fafafa !important;
1292 }
1293
1294 .profile_list .entity_actions {
1295     width: 30px;
1296     height: 26px;
1297     margin-right: 5px;
1298 }
1299
1300 .profile_list .entity_actions input {
1301     width: 26px;
1302     height: 26px;
1303     display: block;
1304     overflow: hidden;
1305     font-size: 0em;
1306 }
1307
1308 /* Event specific styles */
1309
1310 .notice .vevent div {
1311     margin-bottom: 8px;
1312 }
1313
1314 .event-info {
1315     margin-left: 0px !important;
1316     margin-top: 2px !important;
1317 }
1318
1319 .notice .event-info + .notice-options {
1320     margin-top: 14px;
1321 }
1322
1323 .notice .threaded-replies .event-info + .notice-options {
1324     margin-top: 20px;
1325 }
1326
1327 #form_event_rsvp #new_rsvp_data {
1328     display: inline;
1329     margin: 10px 0px;
1330 }
1331
1332 #form_event_rsvp input.submit {
1333     height: auto;
1334     padding: 0px 10px;
1335     margin-left: 10px;
1336     color:#fff;
1337     font-weight: bold;
1338     text-transform: uppercase;
1339     font-size: 1.1em;
1340     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
1341     border: 1px solid #d7621c;
1342     border-radius: 4px;
1343     -moz-border-radius: 4px;
1344     -webkit-border-radius: 4px;
1345     background: #FB6104;
1346     background: -moz-linear-gradient(top, #ff9d63 , #FB6104);
1347     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9d63), color-stop(100%,#FB6104));
1348     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d63', endColorstr='#FB6104',GradientType=0 );
1349 }
1350
1351 #form_event_rsvp input.submit:hover {
1352     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
1353     background: #ff9d63;
1354     background: -moz-linear-gradient(top, #FB6104 , #fc8035);
1355     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB6104), color-stop(100%,#fc8035));
1356     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB6104', endColorstr='#fc8035',GradientType=0 );
1357 }
1358
1359 /* Limited-scope specific styles */
1360
1361 .limited-scope .entry-content .timestamp {
1362     padding-left: 20px;
1363     position: relative;
1364 }
1365
1366 .limited-scope .entry-content .timestamp:before {
1367     content: url(../images/lock.png);
1368     position: absolute;
1369     top: -2px;
1370     left: 0px;
1371 }
1372
1373 .limited-scope li .entry-content .timestamp {
1374     padding-left: 0px;
1375 }
1376
1377 .limited-scope li .entry-content .timestamp:before {
1378     content: none;
1379 }
1380
1381 .limited-scope li.limited-scope .entry-content .timestamp {
1382     padding-left: 20px;
1383 }
1384
1385 .limited-scope li.limited-scope .entry-content .timestamp:before {
1386     content: url(../images/lock.png);
1387     position: absolute;
1388     top: -2px;
1389     left: 0px;
1390 }
1391
1392 /* QnA specific styles */
1393
1394 #content .question .entry-title, #content .qna-full-question .entry-title {
1395     min-height: 1px;
1396 }
1397
1398 .question div.question-description {
1399     font-size: 1em;
1400     line-height: 1.36em;
1401     margin-top: 0px;
1402     opacity: 1;
1403 }
1404
1405 .question div.answer-content, .qna-full-question div.answer-content {
1406     opacity: 1;
1407 }
1408
1409 .question .answer-count, .qna-full-question .answer-count {
1410     display: block;
1411     clear: left;
1412 }
1413
1414 .question .answer-count:before, .qna-full-question .answer-count:before {
1415     content: '(';
1416 }
1417
1418 .question .answer-count:after, .qna-full-question .answer-count:after {
1419     content: ')';
1420 }
1421
1422 .question fieldset, .qna-full-question fieldset {
1423     margin: 0px;
1424 }
1425
1426 .question fieldset legend, .qna-full-question fieldset legend, .answer fieldset legend {
1427     display: none;
1428 }
1429
1430 .question label[for=answer], .qna-full-question label[for=answer] {
1431     display: none;
1432 }
1433
1434 .question textarea, .qna-full-question textarea {
1435     width: 100%;
1436     height: 42px;
1437     padding: 6px 10px 18px 10px;
1438     border: 1px solid #a6a6a6;
1439     -webkit-border-radius: 4px;
1440     -moz-border-radius: 4px;
1441     border-radius: 4px;
1442     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
1443     -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
1444     -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
1445     font-size: 1.2em;
1446     margin-top: 15px;
1447     margin-bottom: 10px;
1448 }
1449
1450 .qna-full-question textarea {
1451     width: 473px;
1452 }
1453
1454 .question-description input.submit, .answer-content input.submit {
1455     height: auto;
1456     padding: 0px 10px;
1457     margin: 6px 0px 10px 0px;
1458     color:#fff;
1459     font-weight: bold;
1460     text-transform: uppercase;
1461     font-size: 1.1em;
1462     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
1463     border: 1px solid #d7621c;
1464     border-radius: 4px;
1465     -moz-border-radius: 4px;
1466     -webkit-border-radius: 4px;
1467     background: #FB6104;
1468     background: -moz-linear-gradient(top, #ff9d63 , #FB6104);
1469     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9d63), color-stop(100%,#FB6104));
1470     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d63', endColorstr='#FB6104',GradientType=0 );
1471 }
1472
1473 .question .question-description input.submit:hover, .question .answer-content input.submit:hover {
1474     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.6);
1475     background: #ff9d63;
1476     background: -moz-linear-gradient(top, #FB6104 , #fc8035);
1477     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FB6104), color-stop(100%,#fc8035));
1478     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FB6104', endColorstr='#fc8035',GradientType=0 );
1479 }
1480
1481 .question .question-description #answer-form input.submit {
1482     margin-top: 0px;
1483 }
1484
1485 .question p.best, .answer p.best {
1486     background: url(../images/rosette.png) no-repeat top left;
1487     padding-left: 20px;
1488 }
1489
1490 }/*end of @media screen, projection, tv*/