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 20%;
  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         display: none;
 133         width: 30px;
 134         height: 19px;
 135         background: transparent url('notifications.png') 0px 0px no-repeat;
 136         color: #ffffff;
 137         font-weight: bold;
 138         font-size: 0.8em;
 139         padding-top: 0.2em;
 140         text-align: center;
 141         float: left;
 142         margin-right: -4px;
 143 }
 144 .nav-ajax-update a { display: block;}
 145 #net-update-wrap { background-position: 0px 0px; }
 146 #mail-update-wrap { background-position: -30px 0px; }
 147 #notify-update-wrap { background-position: -60px 0px; }
 148 #home-update-wrap { background-position: -90px 0px; }
 149
 150 /** sysmsg **/
 151 #sysmsg {
 152         position:absolute; top: 20px; left:40%;
 153         -moz-box-shadow: 0px 0px 5px #888;
 154         -webkit-box-shadow: 0px 0px 5px #888;
 155         box-shadow: 0px 0px 5px #888;
 156         padding: 10px; background-color: #fff;
 157 }
 158
 159 /**
 160 * aside
 161 **/
 162
 163 aside {
 164     position: absolute;
 165     right: 20%;
 166     width: 200px;
 167     font-size: 0.7em;
 168
 169 }
 170 .vcard .fn { font-size: 1.7em; font-weight: bold; border-bottom: 1px solid #729fcf; padding-top: 1px;}
 171
 172 .vcard #profile-photo-wrapper { margin: 10px 0px }
 173
 174 aside h4 { font-size: 1.2em; }
 175
 176 aside #viewcontacts { text-align: right;}
 177
 178 /**
 179 * contacts block
 180 */
 181 .contact-block-div { width: 50px; height: 50px; float: left; }
 182 #contact-block-end { clear: both; }
 183
 184 /**
 185  * jot
 186  **/
 187 #profile-jot-text_tbl { margin-bottom: 10px; }
 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 }
 210 #character-counter {
 211  float: right; padding: 8px 10px;
 212 }
 213 #profile-rotator-wrapper {
 214  float: right;
 215 }
 216
 217 .jot-tool {
 218         float: left;
 219         margin-right: 5px;
 220 }
 221 #profile-jot-tools-end,
 222 #profile-jot-banner-end { clear: both; }
 223
 224
 225 /**
 226  * section
 227  */
 228 section { margin: 10px 20% 0px 20%; font-size: 0.8em; padding-right: 230px;}
 229
 230 /** tabs **/
 231 .tabs-wrapper {list-style: none; padding: 0px; margin: 0px; border-bottom: 1px solid #729fcf; }
 232 .tabs-wrapper li { display: inline;}
 233 .tabs { padding: 0px 5px; margin-right: 10px; }
 234 .tabs:hover { background-color: #729fcf; color: #eeeeec; border: 0px; }
 235
 236
 237 /**
 238  *      items
 239  */
 240 .wall-item-outside-wrapper {
 241         margin-top: 50px;
 242 }
 243 .wall-item-outside-wrapper-end { clear: both;}
 244 .wall-item-content-wrapper { position: relative; }
 245 .wall-item-photo-menu { display: none;}
 246 .wall-item-photo-menu-button {
 247         display:none;
 248         text-indent: -9999px;
 249         background: #555753 url("menu-user-pin.jpg") no-repeat 75px center;
 250         position: absolute;
 251         overflow: hidden;
 252         height: 20px; width: 90px;
 253         top: 85px;      left: 0px;
 254         -webkit-border-radius: 0px 0px 5px  5px;
 255         -moz-border-radius: 0px 0px 5px  5px;
 256         border-radius: 0px 0px 5px  5px;
 257
 258
 259 }
 260
 261 .wall-item-info { float: left; width: 140px; }
 262 .wall-item-photo-wrapper {
 263         width: 80px; height: 80px;
 264         position: relative;
 265         padding: 5px;
 266         background-color: #555753;
 267         -webkit-border-radius: 5px;
 268         -moz-border-radius: 5px;
 269         border-radius: 5px;
 270 }
 271
 272
 273 .wall-item-tools {
 274         float: right;
 275         /*height: 0px;
 276         padding-top: 20px;
 277         overflow:hidden;
 278         background: #ffffff url("icons.png") no-repeat  -50px  -40px;*/
 279         filter: alpha(opacity=20);
 280         opacity: 0.2;
 281         -webkit-transition: all 1s ease-in-out;
 282         -moz-transition: all 1s ease-in-out;
 283         -o-transition: all 1s ease-in-out;
 284         -ms-transition: all 1s ease-in-out;
 285         transition: all 1s ease-in-out;
 286 }
 287 .wall-item-tools:hover {
 288         /*height:auto;*/
 289         filter: alpha(opacity=100);
 290         opacity: 1;
 291         -webkit-transition: all 1s ease-in-out;
 292         -moz-transition: all 1s ease-in-out;
 293         -o-transition: all 1s ease-in-out;
 294         -ms-transition: all 1s ease-in-out;
 295         transition: all 1s ease-in-out;
 296
 297 }
 298
 299 .wall-item-title { font-size: 1.2em; font-weight: bold;}
 300 .wall-item-body { margin-left: 140px;}
 301 .wall-item-lock-wrapper { float: right; }
 302 .wall-item-dislike,
 303 .wall-item-like,
 304 .wall-item-author { clear: left; font-size: 0.8em; margin: 10px 0px 0px 140px; color: #babdb6;}
 305 .wall-item-ago { display: inline; padding-left: 10px;}
 306 .wall-item-wrapper-end { clear:both; }
 307 .wall-item-location {
 308         margin-top:5px;
 309         width: 100px;
 310         overflow: hidden;
 311         text-overflow: ellipsis;
 312         -o-text-overflow: ellipsis;
 313 }
 314 .wall-item-location span { float: left; }
 315 .wall-item-location a { margin-left: 25px; display: block;}
 316
 317 .wallwall .wwto {
 318     left: -10px;
 319     margin: 0;
 320     position: absolute;
 321     top: 65px;
 322     width: 30px;
 323     z-index: 10001;
 324         width: 30px;
 325         height: 30px;
 326
 327 }
 328 .wallwall .wwto img { width: 30px; height: 30px;}
 329 .wallwall .wall-item-photo-end { clear: both; }
 330 .wall-item-arrowphoto-wrapper {
 331     position: absolute;
 332     left: 20px;
 333     top: 70px;
 334     z-index: 10002;
 335 }
 336
 337 .wall-item-photo-menu {
 338         min-width 92px;
 339         border: 2px solid #FFFFFF;
 340         border-top: 0px;
 341         background: #555753;
 342         position: absolute;
 343         left: -2px; top: 101px;
 344         display: none;
 345         z-index: 10000;
 346         -webkit-border-radius: 0px 5px 5px 5px;
 347         -moz-border-radius: 0px 5px 5px 5px;
 348         border-radius: 0px 5px 5px 5px;
 349 }
 350 .wall-item-photo-menu ul { margin:0px; padding: 0px; list-style: none }
 351 .wall-item-photo-menu li a { white-space: nowrap;  display: block; padding: 5px 2px;    color: #eeeeec;  }
 352 .wall-item-photo-menu li a:hover { color: #555753; background: #eeeeec; }
 353
 354
 355
 356 /**
 357  *      comment
 358  */
 359 .wall-item-outside-wrapper.comment { margin-left: 80px; }
 360 .wall-item-outside-wrapper.comment .wall-item-photo { width: 40px; height: 40px;}
 361 .wall-item-outside-wrapper.comment .wall-item-photo-wrapper {width: 40px; height: 40px; }
 362 .wall-item-outside-wrapper.comment .wall-item-photo-menu-button {
 363         width: 50px; top: 45px; background-position: 35px center;
 364 }
 365 .wall-item-outside-wrapper.comment .wall-item-info { width: 60px; }
 366 .wall-item-outside-wrapper.comment .wall-item-body { margin-left: 60px;}
 367 .wall-item-outside-wrapper.comment .wall-item-author { margin-left: 60px;}
 368
 369 .wall-item-outside-wrapper.comment .wall-item-photo-menu {
 370         top: 60px;
 371         -webkit-border-radius: 0px 5px 5px 5px;
 372         -moz-border-radius: 0px 5px 5px 5px;
 373         border-radius: 0px 5px 5px 5px;
 374 }
 375
 376
 377 .comment-wwedit-wrapper,
 378 .comment-edit-wrapper { margin: 30px 0px 0px 80px;}
 379 .comment-wwedit-wrapper img,
 380 .comment-edit-wrapper img { width: 20px; height: 20px; }
 381 .comment-edit-photo-link { float: left; width: 40px;}
 382 .comment-edit-text-empty {  width: 80%; height: 20px; border: 0px; color: #babdb6;
 383         -webkit-transition: all 0.5s ease-in-out;
 384         -moz-transition: all 0.5s ease-in-out;
 385         -o-transition: all 0.5s ease-in-out;
 386         -ms-transition: all 0.5s ease-in-out;
 387         transition: all 0.5s ease-in-out;
 388 }
 389 .comment-edit-text-empty:hover { color: #999999;}
 390 .comment-edit-text-full { width: 80%; height: 6em;
 391         -webkit-transition: all 0.5s ease-in-out;
 392         -moz-transition: all 0.5s ease-in-out;
 393         -o-transition: all 0.5s ease-in-out;
 394         -ms-transition: all 0.5s ease-in-out;
 395         transition: all 0.5s ease-in-out;
 396 }
 397 .comment-edit-submit-wrapper { width: 80%; margin-left: 40px; text-align: right; }
 398 .comment-edit-submit {
 399         height: 22px;
 400         background-color: #555753;
 401         color: #eeeeec;
 402         -webkit-border-radius: 5px;
 403         -moz-border-radius: 5px;
 404         border-radius: 5px;
 405         border: 0px;
 406 }
 407
 408
 409
 410
 411 /**
 412  * photos
 413  **/
 414 .photo-album-image-wrapper,
 415 .photo-top-image-wrapper {
 416         float: left;
 417         margin: 0px 10px 10px 0px;
 418         -moz-box-shadow: 0px 0px 5px #888;
 419         -webkit-box-shadow: 0px 0px 5px #888;
 420         box-shadow: 0px 0px 5px #888;
 421         background-color: #eeeeee;
 422     -webkit-border-radius: 5px;
 423     -moz-border-radius: 5px;
 424     border-radius: 5px;
 425
 426     height: 265px;
 427     position:relative;
 428
 429 }
 430
 431 .photo-top-image-wrapper a:hover,
 432 #photo-photo a:hover,
 433 .photo-album-image-wrapper a:hover {
 434         border-bottom: 0px;
 435 }
 436
 437 .photo-top-photo,
 438 .photo-album-photo {
 439     -webkit-border-radius: 5px 5px 0px 0px;
 440     -moz-border-radius: 5px 5px 0px 0px;
 441     border-radius: 5px 5px 0px 0px;
 442  }
 443
 444 .photo-top-album-name { position: absolute; bottom: 0px; padding: 0px 5px;}
 445 .caption { position: absolute; bottom: 0px; margin: 0px 5px}
 446
 447 /**
 448  *      message
 449  */
 450 .prvmail-text { width: 100%;}
 451 #prvmail-subject { width: 100%;}
 452 #prvmail-submit-wrapper { margin-top: 10px; }
 453 #prvmail-submit {
 454         float: right;
 455         margin-top: 0px;
 456 }
 457 #prvmail-submit-wrapper > div {
 458         margin-right: 5px;
 459         float: left;
 460 }
 461 .mail-list-outside-wrapper { margin-top: 20px;}
 462 .mail-list-sender {     float: left; }
 463 .mail-list-detail {     margin-left: 90px; }
 464 .mail-list-sender-name { display: inline; }
 465 .mail-list-date { display: inline; font-size: 0.8em; padding-left: 10px;}
 466 .mail-list-subject { font-size: 1.5em;}
 467 .mail-list-delete-wrapper { float: right; }
 468 .mail-list-outside-wrapper-end { clear: both;}
 469
 470 /**
 471  *      contacts
 472  */
 473
 474 .contact-entry-wrapper { float: left; margin-right: 20px; margin-bottom: 20px; position: relative;}
 475 .contact-entry-direction-wrapper {position: absolute; top: 20px;}
 476 .contact-entry-edit-links { position: absolute; top: 60px; }
 477 .contact-entry-photo {
 478         margin-left:20px;
 479 }
 480 .contact-entry-edit-links .icon {
 481         border: 1px solid #babdb6;
 482     -webkit-border-radius: 3px;
 483     -moz-border-radius: 3px;
 484     border-radius: 3px;
 485         background-color: #ffffff;
 486 }
 487
 488 /**
 489  *      register, settings & profile forms
 490  */
 491 #settings-nickname-desc {
 492         background-color: #DDEFFF;
 493         -webkit-border-radius: 5px;
 494         -moz-border-radius: 5px;
 495     border-radius: 5px;
 496     padding: 5px;
 497 }
 498
 499 #register-form div,
 500 #profile-edit-form div,
 501 #settings-form  div {
 502         clear: both;
 503 }
 504
 505 #register-form label,
 506 #profile-edit-form label,
 507 #settings-form label {
 508         width: 300px; float: left;
 509 }
 510
 511 #register-form span,
 512 #profile-edit-form span,
 513 #settings-form span {
 514         color: #555753;
 515         display:block;
 516         margin-bottom: 20px;
 517 }
 518 .settings-submit-wrapper,
 519 .profile-edit-submit-wrapper { margin: 30px 0px;}
 520 .settings-submit-wrapper input,
 521
 522 .profile-listing { float: left; margin: 20px 20px 0px 0px}
 523
 524 #profile-edit-links ul { margin: 20px 0px; padding: 0px; list-style: none; }
 525
 526
 527 #register-sitename { display: inline; font-weight: bold;}
 528
 529 /**
 530  *      contacts selector
 531  */
 532
 533 #prof-members {
 534         height: 200px;
 535         overflow: auto;
 536         border: 1px solid #555753;
 537     -webkit-border-radius: 5px 5px 0px 0px;
 538     -moz-border-radius: 5px 5px 0px 0px;
 539     border-radius: 5px 5px 0px 0px;
 540 }
 541 #prof-all-contacts {
 542         height: 200px;
 543     overflow: auto;
 544         border: 1px solid #555753;
 545     -webkit-border-radius: 0px 0px 5px 5px;
 546     -moz-border-radius: 0px 0px 5px 5px;
 547     border-radius: 0px 0px 5px 5px;
 548 }
 549 #prof-members h3,
 550 #prof-all-contacts h3{
 551         color: #eeeeec;
 552         background-color: #555753;
 553         margin: 0px;
 554         padding: 5px;
 555 }
 556
 557 #prof-separator { display: none;}
 558
 559
 560 /**
 561  *      directory
 562  */
 563 .directory-item {float: left; margin: 50px 50px 0px 0px;}
 564
 565 /**
 566  * ICONS
 567  */
 568 .icon {
 569         display: block; width: 20px; height: 20px;
 570         background-image: url('icons.png');
 571 }
 572 /*.icon:hover {
 573         border-bottom: 0px;
 574 }*/
 575
 576 .border {
 577         border: 1px solid #babdb6;
 578     -webkit-border-radius: 3px;
 579     -moz-border-radius: 3px;
 580     border-radius: 3px;
 581 }
 582
 583 .article        { background-position: -50px  0px;}
 584 .audio          { background-position: -70px  0px;}
 585 .block          { background-position: -90px  0px;}
 586 .drop           { background-position: -110px 0px;}
 587 .drophide       { background-position: -130px 0px;}
 588 .edit           { background-position: -150px 0px;}
 589 .camera         { background-position: -170px 0px;}
 590 .dislike        { background-position: -190px 0px;}
 591 .like           { background-position: -210px 0px;}
 592 .link           { background-position: -230px 0px;}
 593
 594 .globe          { background-position: -50px  -20px;}
 595 .noglobe        { background-position: -70px  -20px;}
 596 .no             { background-position: -90px  -20px;}
 597 .pause          { background-position: -110px -20px;}
 598 .play           { background-position: -130px -20px;}
 599 .pencil         { background-position: -150px -20px;}
 600 .small-pencil{ background-position: -170px -20px;}
 601 .recycle        { background-position: -190px -20px;}
 602 .remote-link{ background-position: -210px -20px;}
 603 .share          { background-position: -230px -20px;}
 604
 605 .tools          { background-position: -50px  -40px;}
 606 .lock           { background-position: -70px  -40px;}
 607 .unlock         { background-position: -90px  -40px;}
 608 .video          { background-position: -110px -40px;}
 609 .youtube        { background-position: -130px -40px;}
 610
 611 /**
 612  *      footer
 613  */
 614  .cc-license { margin-top: 100px; font-size: 0.7em; }
 615 footer { display: block; margin: 50px 20%; clear: both; }
 616