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