view/theme/dispy/style.css

   1 body {
   2         margin: 0px;
   3         padding: 0px;
   4         font-family: freesans,helvetica,arial,clean,sans-serif;
   5         font-size: 16px;
   6 }
   7 img {  border: 0 none; }
   8
   9 a { color: #3465a4; text-decoration: none; margin-bottom:1px;}
  10 a:hover { color: #729fcf; padding-bottom: 0px; border-bottom: 1px dotted #729fcf;}
  11
  12
  13 .required { display: inline; color: #ff0000;}
  14
  15 input[type=submit] {
  16         margin-top: 20px;
  17         height: 22px;
  18         background-color: #555753;
  19         color: #eeeeec;
  20         -webkit-border-radius: 5px ;
  21         -moz-border-radius: 5px;
  22         border-radius: 5px;
  23         border: 0px;
  24 }
  25
  26
  27
  28 /**
  29  *      login
  30  */
  31 #login-extra-links a { margin-right: 20px; }
  32
  33 /*********
  34 * nav
  35 *********/
  36
  37 nav {
  38         height: 50px;
  39         display: block;
  40         background-color: #2e3436;
  41         color: #eeeeec;
  42         position: relative;
  43         padding: 0px 10%;
  44 }
  45 nav a { text-decoration: none;  color: #eeeeec; border:0px;}
  46 nav a:hover { text-decoration: none;    color: #eeeeec; border:0px;}
  47
  48 nav #banner {
  49         display: block;
  50         position: absolute;
  51         margin-left: 20px;
  52 }
  53 nav #banner #logo-text a {
  54         font-size: 40px;
  55         font-weight: bold;
  56         margin-left: 3px;
  57 }
  58
  59 nav #user-menu {
  60     display: block;
  61         width: auto;
  62     float: right;
  63     margin-top: 22px;
  64     margin-right: 10px;
  65     position: relative;
  66     vertical-align: middle;
  67
  68         background-color: #555753;
  69
  70     -webkit-border-radius: 5px;
  71     -moz-border-radius: 5px;
  72     border-radius: 5px;
  73
  74     background: #555753 url("menu-user-pin.jpg") 98% center no-repeat;
  75 }
  76 nav #user-menu-label {
  77         float: left;
  78         font-size: 12px;
  79     padding: 3px 20px 9px 5px;
  80     height: 10px;
  81 }
  82
  83 ul#user-menu-popup {
  84     display: none;
  85     position: absolute;
  86     background-color: #555753;
  87     width: 100%;
  88     padding: 10px 0px;
  89     margin: 0px;
  90     top: 20px;
  91         left: 0px;
  92
  93     -webkit-border-radius: 0px 0px 5px 5px;
  94     -moz-border-radius: 0px 0px 5px 5px;
  95     border-radius: 0px 0px 5px 5px;
  96
  97     z-index: 10000;
  98 }
  99
 100 ul#user-menu-popup li { display: block; }
 101 ul#user-menu-popup li a { display: block; padding: 5px; }
 102 ul#user-menu-popup li a:hover { color: #2e3436; background-color: #eeeeec; }
 103 ul#user-menu-popup li a.nav-sep { border-top: 1px solid #eeeeec; }
 104 nav .nav-link {
 105     float: right;
 106     display: block;
 107     width: 22px;
 108     height: 22px;
 109     /*border: 1px solid #eeeeec;*/
 110     overflow: hidden;
 111     margin-top: 22px;
 112     margin-right: 10px;
 113     text-indent: 50px;
 114     background: transparent url('icons.png') 0px 0px no-repeat;
 115 }
 116
 117 #nav-directory-link { background-position: 0px -22px }
 118 #nav-directory-link:hover { background-position: -22px -22px;}
 119 #nav-search-link { background-position: 0px -44px }
 120 #nav-search-link:hover { background-position: -22px -44px;}
 121 #nav-apps-link { background-position: 0px -66px }
 122 #nav-apps-link:hover { background-position: -22px -66px;}
 123 #nav-login-link { background-position: 0px -88px }
 124 #nav-login-link:hover { background-position: -22px -88px;}
 125
 126 #notifications {
 127         height: 20px; width: 100%;
 128         position: absolute;
 129         top:-19px; left: 0px;
 130 }
 131 .nav-ajax-update {
 132         width: 30px;
 133         height: 19px;
 134         background: transparent url('notifications.png') 0px 0px no-repeat;
 135         color: #ffffff;
 136         font-weight: bold;
 137         font-size: 0.8em;
 138         padding-top: 0.2em;
 139         text-align: center;
 140         float: left;
 141         margin-right: -4px;
 142     display: none;
 143 }
 144 #net-update { background-position: 0px 0px; }
 145 #mail-update { background-position: -30px 0px; }
 146 #notify-update { background-position: -60px 0px; }
 147 #home-update { background-position: -90px 0px; }
 148
 149 /** sysmsg **/
 150 #sysmsg {
 151         position:absolute; top: 20px; left:40%;
 152         -moz-box-shadow: 0px 0px 5px #888;
 153         -webkit-box-shadow: 0px 0px 5px #888;
 154         box-shadow: 0px 0px 5px #888;
 155         padding: 10px; background-color: #fff;
 156 }
 157
 158 /**
 159 * aside
 160 **/
 161
 162 aside {
 163     position: absolute;
 164     right: 11%;
 165     width: 200px;
 166     font-size: 0.7em;
 167
 168 }
 169 .vcard .fn { font-size: 1.7em; font-weight: bold; border-bottom: 1px solid #729fcf; padding-top: 1px;}
 170
 171 .vcard #profile-photo-wrapper { margin: 10px 0px }
 172
 173 aside h4 { font-size: 1.2em; }
 174
 175 aside #viewcontacts { text-align: right;}
 176
 177 /**
 178 * contacts block
 179 */
 180 .contact-block-div { width: 50px; height: 50px; float: left; }
 181 #contact-block-end { clear: both; }
 182
 183 /**
 184  * jot
 185  **/
 186 #profile-jot-text_tbl { margin-bottom: 10px; }
 187 #profile-jot-text_ifr { width: 99.9%!important }
 188 #profile-jot-submit-wrapper { float: right;}
 189 #profile-jot-perms {
 190         float: right;
 191         background-color: #555753;
 192         height: 22px; width: 20px;
 193     -webkit-border-radius: 0px 5px 5px 0px;
 194     -moz-border-radius: 0px 5px 5px 0px;
 195     border-radius: 0px 5px 5px 0px;
 196         overflow: hidden;
 197         border: 0px;
 198         margin-left:2px;
 199 }
 200 #profile-jot-submit {
 201         float: right;
 202         height: 22px;
 203         background-color: #555753;
 204         color: #eeeeec;
 205         -webkit-border-radius: 5px 0px 0px  5px;
 206         -moz-border-radius: 5px 0px 0px  5px;
 207         border-radius: 5px 0px 0px  5px;
 208         border: 0px;
 209         margin-top: 0px;
 210 }
 211 #character-counter {
 212  float: right; padding: 8px 10px;
 213 }
 214 #profile-rotator-wrapper {
 215  float: right;
 216 }
 217
 218 .jot-tool {
 219         float: left;
 220         margin-right: 5px;
 221 }
 222 #profile-jot-tools-end,
 223 #profile-jot-banner-end { clear: both; }
 224
 225 #profile-jot-email-wrapper {
 226         margin: 10px 20% 0px 20%;
 227         border: 1px solid #555753;
 228         border-bottom: 0px;
 229 }
 230 #profile-jot-email-label { background-color: #555753; color: #ccccce;   padding: 5px;}
 231 #profile-jot-email { margin: 5px; width: 90%; }
 232
 233 #profile-jot-networks {
 234         margin: 0px 20%;
 235         border: 1px solid #555753;
 236         border-top: 0px;
 237         border-bottom: 0px;
 238         padding: 5px;
 239 }
 240 #profile-jot-acl-wrapper {
 241         margin: 0px 20%;
 242         border: 1px solid #555753;
 243         border-top: 0px;
 244 }
 245 #group_allow_wrapper,
 246 #group_deny_wrapper,
 247 #acl-permit-outer-wrapper { width: 47%; float: left; }
 248
 249 #contact_allow_wrapper,
 250 #contact_deny_wrapper,
 251 #acl-deny-outer-wrapper { width: 47%; float: right; }
 252
 253 #acl-permit-text,
 254 #acl-deny-text {background-color: #555753; color: #ccccce; padding: 5px;}
 255
 256 #acl-permit-wrapper,
 257 #acl-deny-wrapper { padding: 5px; }
 258
 259 #acl-allow-group-label,
 260 #acl-allow-contact-label,
 261 #acl-deny-group-label,
 262 #acl-deny-contact-label { display: block }
 263
 264 #profile-jot-acl-wrapper select { width: 100%; }
 265
 266 #acl-wrapper-end,
 267 #profile-jot-end { clear: both; height: 5px; }
 268
 269 /**
 270  * section
 271  */
 272 section { margin: 10px 11% 0px 11%; font-size: 0.8em; padding-right: 230px;}
 273
 274 /** tabs **/
 275 .tabs-wrapper {list-style: none; padding: 0px; margin: 0px; border-bottom: 1px solid #729fcf; }
 276 .tabs-wrapper li { display: inline;}
 277 .tabs { padding: 0px 5px; margin-right: 10px; }
 278 .tabs:hover { background-color: #729fcf; color: #eeeeec; border: 0px; }
 279
 280
 281 /**
 282  *      items
 283  */
 284 .wall-item-outside-wrapper {
 285         margin-top: 50px;
 286 }
 287 .wall-item-outside-wrapper-end { clear: both;}
 288 .wall-item-content-wrapper { position: relative; }
 289 .wall-item-photo-menu { display: none;}
 290 .wall-item-photo-menu-button {
 291         display:none;
 292         text-indent: -9999px;
 293         background: #555753 url("menu-user-pin.jpg") no-repeat 75px center;
 294         position: absolute;
 295         overflow: hidden;
 296         height: 20px; width: 90px;
 297         top: 85px;      left: 0px;
 298         -webkit-border-radius: 0px 0px 5px  5px;
 299         -moz-border-radius: 0px 0px 5px  5px;
 300         border-radius: 0px 0px 5px  5px;
 301
 302
 303 }
 304
 305 .wall-item-info { float: left; width: 140px; }
 306 .wall-item-photo-wrapper {
 307         width: 80px; height: 80px;
 308         position: relative;
 309         padding: 5px;
 310         background-color: #555753;
 311         -webkit-border-radius: 5px;
 312         -moz-border-radius: 5px;
 313         border-radius: 5px;
 314 }
 315
 316
 317 .wall-item-tools {
 318         float: right;
 319         /*height: 0px;
 320         padding-top: 20px;
 321         overflow:hidden;
 322         background: #ffffff url("icons.png") no-repeat  -50px  -40px;*/
 323         filter: alpha(opacity=20);
 324         opacity: 0.2;
 325         -webkit-transition: all 1s ease-in-out;
 326         -moz-transition: all 1s ease-in-out;
 327         -o-transition: all 1s ease-in-out;
 328         -ms-transition: all 1s ease-in-out;
 329         transition: all 1s ease-in-out;
 330 }
 331 .wall-item-tools:hover {
 332         /*height:auto;*/
 333         filter: alpha(opacity=100);
 334         opacity: 1;
 335         -webkit-transition: all 1s ease-in-out;
 336         -moz-transition: all 1s ease-in-out;
 337         -o-transition: all 1s ease-in-out;
 338         -ms-transition: all 1s ease-in-out;
 339         transition: all 1s ease-in-out;
 340
 341 }
 342
 343 .wall-item-title { font-size: 1.2em; font-weight: bold;}
 344 .wall-item-body { margin-left: 140px;}
 345 .wall-item-lock-wrapper { float: right; }
 346 .wall-item-dislike,
 347 .wall-item-like,
 348 .wall-item-author { clear: left; font-size: 0.8em; margin: 10px 0px 0px 140px; color: #babdb6;}
 349 .wall-item-ago { display: inline; padding-left: 10px;}
 350 .wall-item-wrapper-end { clear:both; }
 351 .wall-item-location {
 352         margin-top:5px;
 353         width: 100px;
 354         overflow: hidden;
 355         text-overflow: ellipsis;
 356         -o-text-overflow: ellipsis;
 357 }
 358 .wall-item-location .icon { float: left; }
 359 .wall-item-location a { margin-left: 25px; display: block; font-size: 0.7em; }
 360
 361 .wallwall .wwto {
 362     left: -10px;
 363     margin: 0;
 364     position: absolute;
 365     top: 65px;
 366     width: 30px;
 367     z-index: 10001;
 368         width: 30px;
 369         height: 30px;
 370
 371 }
 372 .wallwall .wwto img { width: 30px; height: 30px;}
 373 .wallwall .wall-item-photo-end { clear: both; }
 374 .wall-item-arrowphoto-wrapper {
 375     position: absolute;
 376     left: 20px;
 377     top: 70px;
 378     z-index: 10002;
 379 }
 380
 381 .wall-item-photo-menu {
 382         min-width: 92px;
 383         border: 2px solid #FFFFFF;
 384         border-top: 0px;
 385         background: #555753;
 386         position: absolute;
 387         left: -2px; top: 101px;
 388         display: none;
 389         z-index: 10000;
 390         -webkit-border-radius: 0px 5px 5px 5px;
 391         -moz-border-radius: 0px 5px 5px 5px;
 392         border-radius: 0px 5px 5px 5px;
 393 }
 394 .wall-item-photo-menu ul { margin:0px; padding: 0px; list-style: none }
 395 .wall-item-photo-menu li a { white-space: nowrap;  display: block; padding: 5px 2px;    color: #eeeeec;  }
 396 .wall-item-photo-menu li a:hover { color: #555753; background: #eeeeec; }
 397
 398
 399
 400 /**
 401  *      comment
 402  */
 403 .wall-item-outside-wrapper.comment { margin-left: 80px; }
 404 .wall-item-outside-wrapper.comment .wall-item-photo { width: 40px; height: 40px;}
 405 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {width: 40px; height: 40px; }
 406 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
 407         width: 50px; top: 45px; background-position: 35px center;
 408 }
 409 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
 410 .wall-item-outside-wrapper.comment .wall-item-body { margin-left: 60px;}
 411 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
 412
 413 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
 414         min-width: 50px;
 415         top: 60px;
 416 }
 417
 418
 419 .comment-wwedit-wrapper,
 420 .comment-edit-wrapper { margin: 30px 0px 0px 80px;}
 421 .comment-wwedit-wrapper img,
 422 .comment-edit-wrapper img { width: 20px; height: 20px; }
 423 .comment-edit-photo-link { float: left; width: 40px;}
 424 .comment-edit-text-empty {  width: 80%; height: 20px; border: 0px; color: #babdb6;
 425         -webkit-transition: all 0.5s ease-in-out;
 426         -moz-transition: all 0.5s ease-in-out;
 427         -o-transition: all 0.5s ease-in-out;
 428         -ms-transition: all 0.5s ease-in-out;
 429         transition: all 0.5s ease-in-out;
 430 }
 431 .comment-edit-text-empty:hover { color: #999999;}
 432 .comment-edit-text-full { width: 80%; height: 6em;
 433         -webkit-transition: all 0.5s ease-in-out;
 434         -moz-transition: all 0.5s ease-in-out;
 435         -o-transition: all 0.5s ease-in-out;
 436         -ms-transition: all 0.5s ease-in-out;
 437         transition: all 0.5s ease-in-out;
 438 }
 439 .comment-edit-submit-wrapper { width: 80%; margin-left: 40px; text-align: right; }
 440 .comment-edit-submit {
 441         height: 22px;
 442         background-color: #555753;
 443         color: #eeeeec;
 444         -webkit-border-radius: 5px;
 445         -moz-border-radius: 5px;
 446         border-radius: 5px;
 447         border: 0px;
 448 }
 449
 450
 451
 452
 453 /**
 454  * photos
 455  **/
 456 .photo-album-image-wrapper,
 457 .photo-top-image-wrapper {
 458         float: left;
 459         margin: 0px 10px 10px 0px;
 460         -moz-box-shadow: 0px 0px 5px #888;
 461         -webkit-box-shadow: 0px 0px 5px #888;
 462         box-shadow: 0px 0px 5px #888;
 463         background-color: #eeeeee;
 464     -webkit-border-radius: 5px;
 465     -moz-border-radius: 5px;
 466     border-radius: 5px;
 467
 468     height: 265px;
 469     position:relative;
 470
 471 }
 472
 473 .photo-top-image-wrapper a:hover,
 474 #photo-photo a:hover,
 475 .photo-album-image-wrapper a:hover {
 476         border-bottom: 0px;
 477 }
 478
 479 .photo-top-photo,
 480 .photo-album-photo {
 481     -webkit-border-radius: 5px 5px 0px 0px;
 482     -moz-border-radius: 5px 5px 0px 0px;
 483     border-radius: 5px 5px 0px 0px;
 484  }
 485
 486 .photo-top-album-name { position: absolute; bottom: 0px; padding: 0px 5px;}
 487 .caption { position: absolute; bottom: 0px; margin: 0px 5px}
 488
 489 /**
 490  *      message
 491  */
 492 .prvmail-text { width: 100%;}
 493 #prvmail-subject { width: 100%;}
 494 #prvmail-submit-wrapper { margin-top: 10px; }
 495 #prvmail-submit {
 496         float: right;
 497         margin-top: 0px;
 498 }
 499 #prvmail-submit-wrapper > div {
 500         margin-right: 5px;
 501         float: left;
 502 }
 503 .mail-list-outside-wrapper { margin-top: 20px;}
 504 .mail-list-sender {     float: left; }
 505 .mail-list-detail {     margin-left: 90px; }
 506 .mail-list-sender-name { display: inline; }
 507 .mail-list-date { display: inline; font-size: 0.8em; padding-left: 10px;}
 508 .mail-list-subject { font-size: 1.5em;}
 509 .mail-list-delete-wrapper { float: right; }
 510 .mail-list-outside-wrapper-end { clear: both;}
 511
 512 /**
 513  *      contacts
 514  */
 515
 516 .contact-entry-wrapper { float: left; margin-right: 20px; margin-bottom: 20px; position: relative;}
 517 .contact-entry-direction-wrapper {position: absolute; top: 20px;}
 518 .contact-entry-edit-links { position: absolute; top: 60px; }
 519 .contact-entry-photo {
 520         margin-left:20px;
 521 }
 522 .contact-entry-edit-links .icon {
 523         border: 1px solid #babdb6;
 524     -webkit-border-radius: 3px;
 525     -moz-border-radius: 3px;
 526     border-radius: 3px;
 527         background-color: #ffffff;
 528 }
 529
 530 #contact-edit-banner-name { font-size: 1.5em; }
 531 #contact-edit-photo-wrapper {position: relative; float: left; padding: 20px;}
 532 #contact-edit-direction-icon { position: absolute; top: 60px; left:0px;}
 533 #contact-edit-nav-wrapper { margin-left: 210px; }
 534 #contact-edit-links { float: left; margin-top: 23px; }
 535 #contact-drop-links { margin-left: 5px; }
 536 #contact-edit-nav-wrapper .icon {
 537         border: 1px solid #babdb6;
 538     -webkit-border-radius: 3px;
 539     -moz-border-radius: 3px;
 540     border-radius: 3px;
 541 }
 542 #contact-edit-poll-wrapper { margin-left: 50px; }
 543 #contact-edit-last-update-text { margin-bottom: 15px; }
 544 #contact-edit-last-updated { font-weight: bold; }
 545 #contact-edit-poll-text { display: inline; }
 546 #contact-edit-end { clear: both; }
 547
 548 /**
 549  *      register, settings & profile forms
 550  */
 551 #settings-nickname-desc {
 552         background-color: #DDEFFF;
 553         -webkit-border-radius: 5px;
 554         -moz-border-radius: 5px;
 555     border-radius: 5px;
 556     padding: 5px;
 557 }
 558
 559 #register-form div,
 560 #profile-edit-form div,
 561 #settings-form  div {
 562         clear: both;
 563 }
 564
 565 #register-form label,
 566 #profile-edit-form label,
 567 #settings-form label {
 568         width: 300px; float: left;
 569 }
 570
 571 #register-form span,
 572 #profile-edit-form span,
 573 #settings-form span {
 574         color: #555753;
 575         display:block;
 576         margin-bottom: 20px;
 577 }
 578 .settings-submit-wrapper,
 579 .profile-edit-submit-wrapper { margin: 30px 0px;}
 580 .profile-listing { float: left; margin: 20px 20px 0px 0px}
 581
 582 #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; }
 583
 584
 585 #register-sitename { display: inline; font-weight: bold;}
 586
 587 /**
 588  *      contacts selector
 589  */
 590
 591 #prof-members {
 592         height: 200px;
 593         overflow: auto;
 594         border: 1px solid #555753;
 595     -webkit-border-radius: 5px 5px 0px 0px;
 596     -moz-border-radius: 5px 5px 0px 0px;
 597     border-radius: 5px 5px 0px 0px;
 598 }
 599 #prof-all-contacts {
 600         height: 200px;
 601     overflow: auto;
 602         border: 1px solid #555753;
 603     -webkit-border-radius: 0px 0px 5px 5px;
 604     -moz-border-radius: 0px 0px 5px 5px;
 605     border-radius: 0px 0px 5px 5px;
 606 }
 607 #prof-members h3,
 608 #prof-all-contacts h3{
 609         color: #eeeeec;
 610         background-color: #555753;
 611         margin: 0px;
 612         padding: 5px;
 613 }
 614
 615 #prof-separator { display: none;}
 616
 617
 618 /**
 619  *      directory
 620  */
 621 .directory-item {float: left; margin: 50px 50px 0px 0px;}
 622
 623 /**
 624  * ICONS
 625  */
 626 .icon {
 627         display: block; width: 20px; height: 20px;
 628         background-image: url('icons.png');
 629 }
 630 /*.icon:hover {
 631         border-bottom: 0px;
 632 }*/
 633
 634 .border {
 635         border: 1px solid #babdb6;
 636     -webkit-border-radius: 3px;
 637     -moz-border-radius: 3px;
 638     border-radius: 3px;
 639 }
 640
 641 .article        { background-position: -50px  0px;}
 642 .audio          { background-position: -70px  0px;}
 643 .block          { background-position: -90px  0px;}
 644 .drop           { background-position: -110px 0px;}
 645 .drophide       { background-position: -130px 0px;}
 646 .edit           { background-position: -150px 0px;}
 647 .camera         { background-position: -170px 0px;}
 648 .dislike        { background-position: -190px 0px;}
 649 .like           { background-position: -210px 0px;}
 650 .link           { background-position: -230px 0px;}
 651
 652 .globe          { background-position: -50px  -20px;}
 653 .noglobe        { background-position: -70px  -20px;}
 654 .no             { background-position: -90px  -20px;}
 655 .pause          { background-position: -110px -20px;}
 656 .play           { background-position: -130px -20px;}
 657 .pencil         { background-position: -150px -20px;}
 658 .small-pencil{ background-position: -170px -20px;}
 659 .recycle        { background-position: -190px -20px;}
 660 .remote-link{ background-position: -210px -20px;}
 661 .share          { background-position: -230px -20px;}
 662
 663 .tools          { background-position: -50px  -40px;}
 664 .lock           { background-position: -70px  -40px;}
 665 .unlock         { background-position: -90px  -40px;}
 666 .video          { background-position: -110px -40px;}
 667 .youtube        { background-position: -130px -40px;}
 668
 669 /**
 670  *      footer
 671  */                                  \r .cc-license { margin-top: 100px; font-size: 0.7em; }
 672 footer { display: block; margin: 50px 20%; clear: both; }\r