4 * author, maintainer: simon <http://simon.kisikew.org/>
7 * A few things of note here. The less file is our working copy,
8 * and the CSS is *generated* from it. The CSS is the one that's
9 * included in the HTML, and not the less one. This is to save
10 * bandwidth and processing time.
12 /* from html5boilerplate */
13 /* these are to tell browsers they should be displayed a certain way */
33 display: inline-block;
37 audio:not([controls]), [hidden] {
41 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
42 * 2. Force vertical scrollbar in non-IE
43 * 3. Prevent iOS text size adjust on device orientation change,
44 * without disabling user zoom: h5bp.com/g
49 -webkit-text-size-adjust: 100%;
50 -ms-text-size-adjust: 100%;
57 background-color: @bg_colour;
59 button, input, select, textarea {
61 background-color: @bg_colour;
64 border: 1px #555 dotted;
68 background: @bg_colour;
73 background: @bg_colour;
74 &[selected="selected"] {
76 background: @main_colour;
83 background-color: lighten(@bg_colour, 10%);
85 /* remember to define focus styles! */
89 [disabled="disabled"] {
90 background: @med_bg_colour;
91 color: @disabled_colour;
93 /* remember to highlight inserts somehow! */
95 background-color: @bg_alt_colour;
96 color: @lt_main_colour;
99 text-decoration: none;
105 /* Redeclare monospace font family: h5bp.com/j */
106 pre, code, kbd, samp, .wall-item-body code {
107 font-family: monospace, monospace;
108 _font-family: monospace;
111 /* Improve readability of pre-formatted text in all browsers */
112 pre, .wall-item-body code {
125 /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
130 vertical-align: baseline;
143 text-decoration: none;
146 color: @hover_colour;
147 border-bottom: 1px dotted @hover_colour;
150 text-decoration: none;
158 border: 1px #aaa solid;
168 .fakelink, .lockview {
173 color: @hover_colour;
181 .borders(1px, solid, @main_alt_colour);
182 background-color: @bg_alt_colour;
197 background-color: @link_colour;
198 color: @main_alt_colour;
217 [class$="-desc"], [id$="-desc"] {
219 background: @main_colour;
221 .box_shadow(3px, 3px, 5px);
236 overflow: auto !important;
237 padding-top: 60px !important;
238 width: 100% !important;
244 display: block !important;
245 float: none !important;
246 height: 100% !important;
247 position: relative !important;
248 width: 100% !important;
250 width: 200px !important;
253 margin: 0 0 8px !important;
254 width: 210px !important;
256 margin: 0 0 8px !important;
257 width: 210px !important; }
260 #login-submit-wrapper {
261 margin: 0 !important;
263 #login-submit-button {
264 margin-left: 0px !important;
266 #asidemain #login_openid {
267 position: relative !important;
268 float: none !important;
269 margin-left: 0px !important;
270 height: auto !important;
271 width: 200px !important;
275 width: 180px !important;
276 overflow: hidden !important; }
278 width: 180px !important;
287 background-color: @dk_bg_colour;
288 color: @main_alt_colour;
290 padding: 20px 20px 10px 95px;
292 text-decoration: none;
293 color: @main_alt_colour;
296 text-decoration: none;
297 color: @main_alt_colour;
307 margin-left: 3px; } }
312 background-color: @menu_bg_colour;
318 .rounded_corners(0 0 5px 5px);
319 .box_shadow(5px, 5px, 10px, 0px);
328 background-color: @bg_alt_colour;
331 border-top: 1px solid @bg_alt_colour; } } }
334 display: inline-block;
339 background: transparent url(dark/icons.png) 0 0 no-repeat;
342 background-position: 0 -66px;
344 background-position: -22px -66px; }
346 #nav-community-link, #nav-contacts-link {
347 background-position: 0 -22px;
349 background-position: -22px -22px; }
351 #nav-directory-link {
352 background-position: -44px -154px;
354 background-position: -66px -154px; }
357 background-position: 0 -110px;
359 background-position: -22px -110px; }
362 background-position: -44px -132px;
364 background-position: -66px -132px; }
367 background-position: 0px -190px;
369 background-position: -44px -190px; }
371 #nav-login-link, #nav-logout-link {
372 background-position: 0 -88px;
374 background-position: -22px -88px; }
377 background-position: -44px -88px;
379 background-position: -66px -88px; }
381 #nav-notify-link, #nav-notifications-linkmenu {
382 background-position: -44px -110px;
384 #nav-notify-link:hover {
385 background-position: -66px -110px;
388 background-position: 0px -177px;
390 background-position: -22px -177px; }
393 background-position: 0 -44px;
395 background-position: -22px -44px;
401 #profile-attach-wrapper,
407 #profile-upload-wrapper,
412 #wall-image-upload-div,
413 #wall-file-upload-div,
421 /* popup notifications */
425 background: @notice url("../../../images/icons/48/notice.png") no-repeat 5px center;
431 background: @info url("../../../images/icons/48/info.png") no-repeat 5px center;
438 #nav-notifications-menu {
439 margin: 30px 0 0 -20px;
455 border-bottom: 1px solid black;
461 text-decoration: underline; }
464 nav #nav-notifications-linkmenu {
465 &.on .icon.s22.notify,
466 &.selected .icon.s22.notify {
467 // background-image: url("../../../images/icons/22/notify_on.png");
468 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAUJcAAFCXAZtv64UAAAHuSURBVCjPbZPbTlNBFIYHLixXRIhEQGNRMUopJAJyAyZ4Z2l8B+XwEBqKtjwOp8oDIAJKIJFUjdFIQCUYrRytdyb0459ht8wG9rrYs9b618y/TsYEH4ZK4qRYYIdDybZOI7TKakIfVhrJ8J2i5IBNyV93/kaaBuv3oV3MgwCTPKGHPkkPA0xRUMBrOgN4AP0o6BseEpF2m3es0qJTFQneyvMhgDsC9tZprnEcGuOPeMcDLUpW3jlLxlDBmJTFY6gLvsVv8tyh9G7U3Z6mwtCuJAoiECSh/w1+8otmTjLqF2KDNsNzRY1bruV0o6rFFtc9S5USh5RRWvAYv4xX9dYPS8ur1oBQC4Y99m2uHriRNda5ErLdU1l3jCI2xdJ3XOYLX6kP2W6K2OF54Et84jN154F31d6ukKOG92pSbcjWLRrbRhVGLTZeOtXqX46LoQSHhJo3jOo3ESrdBQbljIRKNyXUiKHNNSXhTdbZiUzyT/WJ23Zn3BBFy+2u4ZHc1eV2N7EkxAvbbqMRmZOSlbE0g/uajRgl6Iy8r1wpnaFTQ4ji+8XOEsuxYmdDWpJleXJ0+BPdoduL4p5Vavd5IOllmJfiWmSWu6d3pV4jteFWqaAGbLkdKSqtUXXUnN3DSvF8phfy/JfkxfOp9sVb2COz+hY/T0qkwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMS0wOS0xNlQwOTozOTowMCswMjowMC9Oi90AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTEtMDktMTZUMDk6Mzk6MDArMDI6MDBeEzNhAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
485 background: @dk_bg_colour;
500 display: inline-block;
501 margin: 0px -4px 0px 0px;
513 background: transparent url(dark/icons.png) -190px -60px no-repeat;
516 display: inline-block;
522 background: @dk_bg_colour;
527 background: @bg_colour;
539 text-decoration: none;
544 .box_shadow(5px, 0, 10px, 0);
550 background-color: @menu_bg_colour;
551 background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAIAAwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMH/8QAIhAAAQMEAgIDAAAAAAAAAAAAAQIDBAAFBhESIQdBMVFh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAXEQEBAQEAAAAAAAAAAAAAAAABAAIR/9oADAMBAAIRAxEAPwCXiHO8dbsEi35BEhIehNlbUhxhBU82O+G9bKgToD2D+VlmZX9OWZBJuAiMxGlni0w0gJCED4HXv7pSi6eFML//2Q==");
552 background-position: 98% center;
553 background-repeat: no-repeat;
564 padding: 3px 20px 9px 5px;
567 .nav-ajax-update, .nav-ajax-left {
569 background: transparent url(dark/notifications.png) 0 0 no-repeat;
576 margin: 0 -1px 0 3px;
580 .nav-ajax-update.show, .nav-ajax-left.show {
584 background-position: 0px 0px;
587 background-position: -30px 0;
590 background-position: -60px 0px;
593 background-position: -90px 0px;
596 background-position: -120px 0px;
619 .borders(3px, solid, @shiny_colour);
626 text-decoration: none;
628 background-color: lighten(@shiny_colour, 55%);
632 border-top: 1px solid @med_bg_colour;
648 color: lighten(@shiny_colour, 45%);
654 vertical-align: middle;
659 padding: 7px 7px 0px 0px;
662 background: darken(@main_alt_colour, 20%);
672 .box_shadow(@main_shadow);
674 background-color: @lt_orange;
675 .borders(2px, solid, @orange);
677 padding-bottom: 50px;
683 .box_shadow(@main_shadow);
685 background-color: @lt_orange;
686 .borders(2px, solid, @orange);
688 padding-bottom: 50px;
691 #sysmsg_info br, #sysmsg br {
694 border-top: 1px solid @main_colour;
704 margin: 20px 0 20px 35px;
709 /* for now, disappear these */
710 #asideright, #asideleft {
717 border-bottom: 1px solid #729fcf;
720 #profile-photo-wrapper {
723 .box_shadow(3px, 3px, 10px, 0);
735 .contact-block-content {
742 position: relative; } } }
746 background: @main_colour;
749 .box_shadow(1px 1px 5px 0);
753 #profile-extra-links ul {
763 padding: 0.2em 0.5em;
764 background-color: @friendica_blue;
765 // background-image: url(icons/connect.png);
766 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAE4SURBVCiRpZKxLgRRFIa//64dKruZFRIlolBviFKiVHsHrRaFikTCC+hEQtRegMQDqDUKJOPOvauSMJmjYEU2M0viT071/+fLOTlHZkadQgjLkh1LPEoj661WKw5mXG034JxtAgtmrJoVK5WZYYCy1AVQSOYbjeSqMmRmQ8v755Ne77lb5w+d4HMNJopCT7X+bwDQZKfTyf4BIAHeawHe+/kQ/FGM+QagvpFl2VSM/tyMmV7PV14AYMQ5nUp0AULIp0HXzpVvSdLYMmNVAjNdAuNAUQHgxy/ZvEQTSMw0A33DxkIIi2ma3gwC9PKSzRWF2wbdpml62DfyPF9yjlNgAnQGLJjZnXON3Xa7ff8NGPbKQPNrbAOI0a9J2ilLEzAL7P0GqJJizF+BUeDhL2cclJnZPvAg6eADf+imKjSMX1wAAAAASUVORK5CYII=");
767 background-repeat: no-repeat;
768 background-position: 95% center;
771 ///*background: #3465A4 url(dark/connect.png) no-repeat 95% center;*/
772 ///*border-radius: 5px 5px 5px 5px;*/
773 color: @main_alt_colour;
776 padding: 0.2em 0.5em;
790 .contact-block-textdiv {
800 margin: 10px 0 20px 0px;
809 margin: 10px 20px 2px 0px;
820 background-color: white;
822 vertical-align: center;
824 border-top: 2px solid #9eabb0;
831 .borders(1px, solid, darken(@main_alt_colour, 13%));
836 vertical-align: middle;
842 .borders(1px, solid, darken(@main_alt_colour, 33%));
843 color: darken(@main_alt_colour, 27%);
846 color: @main_alt_colour;
849 #jot #character-counter {
854 padding: 2px 20px 5px 0;
856 #profile-jot-text_parent {
857 .box_shadow(5px, 0, 10px, 0, @shadow_colour);
859 #profile-jot-text_tbl {
863 #profile-jot-text_ifr {
864 width: 99.900002% !important;
866 #profile-jot-text_toolbargroup, .mceCenter tr {
869 [id$="jot-text_ifr"] {
870 width: 99.900002% !important;
872 background: @main_colour;
875 background: @main_colour;
883 &.mceFirst, &.mceLast {
884 background-color: @main_colour;
887 span.mceIcon, img.mceIcon, .mceButtonDisabled .mceIcon {
888 background-color: @main_colour;
891 #profile-attach-wrapper,
892 #profile-audio-wrapper,
893 #profile-link-wrapper,
894 #profile-location-wrapper,
895 #profile-nolocation-wrapper,
896 #profile-title-wrapper,
897 #profile-upload-wrapper,
898 #profile-video-wrapper {
902 #profile-rotator-wrapper {
905 #profile-jot-email-wrapper {
907 .borders(1px, solid, @menu_bg_colour);
910 #profile-jot-email-label {
911 background-color: @menu_bg_colour;
919 #profile-jot-networks {
921 border: 1px solid @menu_bg_colour;
932 text-decoration: none;
939 background: url(dark/icons.png) no-repeat -128px -40px;
941 text-decoration: none;
947 background-color: @menu_bg_colour;
952 margin: 0 10px 0 10px;
954 #profile-jot-plugin-wrapper {
959 #profile-jot-submit-wrapper {
965 #profile-jot-submit {
967 background-color: @menu_bg_colour;
968 color: @main_alt_colour;
970 .borders(2px, outset, @shiny_colour);
976 .box_shadow(0, 0, 0, 0);
984 #profile-jot-acl-wrapper {
986 .borders(1px, solid, darken(@main_alt_colour, 60%));
988 display: block !important;
989 .borders(1px solid @menu_bg_colour);
992 #group_allow_wrapper,
994 #acl-permit-outer-wrapper,
995 #contact_allow_wrapper,
996 #contact_deny_wrapper,
997 #acl-deny-outer-wrapper {
1000 #group_allow_wrapper,
1001 #group_deny_wrapper,
1002 #acl-permit-outer-wrapper {
1005 #contact_allow_wrapper,
1006 #contact_deny_wrapper,
1007 #acl-deny-outer-wrapper {
1011 background-color: darken(@main_alt_colour, 60%);
1012 color: @main_colour;
1017 background-color: darken(@main_alt_colour, 60%);
1023 background-color: darken(@main_alt_colour, 60%);
1024 color: @main_colour;
1029 color: darken(@main_alt_colour, 13%);
1035 #jot-title-wrapper {
1038 #jot-title-display {
1044 #jot-preview-content {
1045 background-color: @bg_alt_colour;
1046 color: @main_colour;
1047 .borders(1px, solid, @main_colour);
1049 padding: 3px 3px 6px 10px;
1050 .wall-item-outside-wrapper {
1052 .rounded_corners(0px 0px 0px 0px);
1084 border: 1px solid @link_colour;
1086 &:hover, &.active:hover, &:active {
1087 background: @link_colour;
1091 background: @main_colour;
1099 text-decoration: none;
1106 .wall-item-outside-wrapper {
1107 .borders(1px, solid, #aaa);
1109 .box_shadow(5px, 0, 10px, 0);
1114 .wall-item-outside-wrapper-end {
1117 .wall-item-content-wrapper {
1122 .wall-item-outside-wrapper .wall-item-comment-wrapper {
1123 /*margin-left: 90px;*/
1126 background: @shiny_colour;
1129 .wall-outside-wrapper .shiny {
1135 .wall-item-content {
1137 margin: 0px 15px 0px 5px;
1139 [id^="tread-wrapper"], [class^="tread-wrapper"] {
1143 .wall-item-photo-menu {
1146 .wall-item-photo-menu-button {
1148 text-indent: -99999px;
1149 background: @menu_bg_colour url(dark/menu-user-pin.jpg) no-repeat 75px center;
1155 .rounded_corners(0 0 5px 5px);
1161 .wall-item-photo-wrapper {
1165 background-color: @menu_bg_colour;
1168 [class^="wall-item-tools"] * {
1169 /*margin: 0 0 5px 0;*/
1171 /*margin: 0 0 5px 0;*/
1183 .wall-item-subtools1 {
1185 list-style: none outside none;
1186 margin: 20px 0 30px -20px;
1189 .wall-item-subtools2 {
1191 list-style: none outside none;
1192 margin: -75px 0 0 5px;
1202 margin: 20px 20px 10px 0px;
1206 .wall-item-lock-wrapper {
1217 margin: 5px 0 5px 120px;
1220 .wall-item-actions-author {
1224 margin: 20px 20px 0 110px;
1230 .wall-item-wrapper-end {
1233 .wall-item-location {
1237 text-overflow: ellipsis;
1238 -o-text-overflow: ellipsis;
1261 width: 30px !important;
1262 height: 30px !important;
1265 .wall-item-photo-end {
1269 .wall-item-arrowphoto-wrapper {
1275 .wall-item-photo-menu {
1277 .borders(2px, solid, white);
1279 background: #555753;
1287 white-space: nowrap;
1290 color: @main_alt_colour;
1293 background: @main_alt_colour;
1297 #item-delete-selected {
1301 #connect-services-header,
1314 .ccollapse-wrapper {
1318 .wall-item-outside-wrapper.comment {
1321 width: 40px!important;
1322 height: 40px!important;
1324 .wall-item-photo-wrapper {
1328 .wall-item-photo-menu-button {
1331 background-position: 35px center;
1342 .wall-item-photo-menu {
1347 .comment-wwedit-wrapper {
1348 /*margin: 30px 0px 0px 80px;*/
1350 .comment-edit-wrapper {
1351 border-top: 1px #aaa solid;
1353 [class^="comment-edit-bb"] {
1356 margin: -40px 0 5px 60px;
1359 display: inline-block;
1364 .comment-wwedit-wrapper img,
1365 .comment-edit-wrapper img {
1368 .comment-edit-photo-link,
1369 .comment-edit-photo {
1377 [class^="comment-edit-text"] {
1378 margin: 5px 0 10px 20px;
1381 .comment-edit-text-empty {
1383 border: 2px #c8bebe solid;
1391 .comment-edit-text-full {
1396 .comment-edit-submit-wrapper {
1398 margin: 5px 5px 10px 50px;
1401 .comment-edit-submit {
1403 background-color: #555753;
1404 color: @main_alt_colour;
1413 .wall-item-body code {
1414 background-color: #444;
1415 border-bottom: 1px dashed #ccc;
1416 border-left-style: solid;
1417 border-left-width: 10px;
1418 border-top: 1px dashed #ccc;
1421 padding: 5px 0 15px 10px;
1424 color: @lt_link_colour;
1435 border-bottom: 1px solid #ccc;
1445 .profile-match-wrapper {
1447 margin: 0 5px 40px 0;
1452 .icon.drophide.profile-match-ignore {
1453 margin: 0 6px 0 -3px;
1455 .profile-match-photo {
1458 [id$="-end"], [class$="-end"] {
1462 .profile-match-end {
1465 .profile-match-name {
1467 margin: auto auto auto 23px;
1469 .profile-match-connect {
1471 margin: auto auto auto 23px;
1473 #advanced-profile-with {
1474 margin-left: 200px; }
1485 margin-bottom: 30px; }
1487 .photo-album-image-wrapper, .photo-top-image-wrapper {
1490 background-color: #222;
1493 padding-bottom: 30px;
1495 margin: 0 10px 10px 0;
1501 max-width: 100%; } }
1503 .photo-top-image-wrapper a:hover,
1504 #photo-photo a:hover,
1505 .photo-album-image-wrapper a:hover {
1509 .photo-top-photo, .photo-album-photo {
1510 .rounded_corners(5px 5px 0 0);
1513 .photo-top-album-name, .caption {
1523 #photo-prev-link, #photo-next-link {
1526 background: white center center no-repeat;
1528 .transition(all, 0.2s);
1532 background-image: url(dark/prev.png);
1541 background-image: url(dark/next.png);
1548 #photo-prev-link a, #photo-next-link a {
1553 text-indent: -900000px; }
1555 #photo-prev-link:hover {
1557 .transition(all, 0.2s);
1563 .transition(all, 0.2s);
1570 #photo-prev-link .icon {
1573 #photos-upload-spacer,
1574 #photos-upload-new-wrapper,
1575 #photos-upload-exist-wrapper {
1576 margin-bottom: 1em; }
1578 #photos-upload-existing-album-text,
1579 #photos-upload-newalbum-div {
1580 background-color: #555753;
1581 color: @main_alt_colour;
1584 #photos-upload-album-select,
1585 #photos-upload-newalbum {
1588 #photos-upload-perms-menu {
1589 text-align: right; }
1591 #photo-edit-caption,
1593 #photo-edit-albumname {
1595 margin-bottom: 25px; }
1597 #photo-edit-link-wrap {
1598 margin-bottom: 15px; }
1600 #photo-edit-caption,
1601 #photo-edit-newtag {
1605 margin-bottom: 25px; }
1607 #photo-edit-caption-end,
1608 #photo-edit-tags-end,
1609 #photo-edit-albumname-end {
1612 #photo-edit-delete-button {
1613 margin-left: 200px; }
1616 margin-bottom: 35px; }
1622 margin-bottom: 15px; }
1635 background: @main_colour;
1638 #prvmail-submit-wrapper {
1645 #prvmail-submit-wrapper div {
1649 .mail-list-outside-wrapper {
1656 margin-left: 90px; }
1658 .mail-list-sender-name {
1665 padding-left: 10px; }
1667 .mail-list-sender-name, .mail-list-date {
1668 font-style: italic; }
1670 .mail-list-subject {
1673 .mail-list-delete-wrapper {
1676 .mail-list-outside-wrapper-end {
1678 border-bottom: 1px @main_colour dotted; }
1682 margin: 0px 5px 5px 0px; }
1684 .mail-conv-sender-photo {
1688 .mail-conv-sender-name {
1694 .mail-conv-subject {
1702 .mail-conv-delete-wrapper {
1709 .view-contact-wrapper, .contact-entry-wrapper {
1711 margin: 0 5px 40px 0;
1714 position: relative; }
1716 .contact-direction-wrapper {
1720 .contact-edit-links {
1724 .contact-entry-photo-wrapper {}
1726 .contact-entry-photo {
1727 margin-left: 20px; }
1729 .contact-entry-name {
1732 /*overflow: hidden;*/
1735 .contact-entry-photo {
1736 position: relative; }
1738 .contact-entry-edit-links .icon {
1739 border: 1px solid #babdb6;
1740 .rounded_corners(3px);
1741 background-color: #fff;
1745 [id^="contact-entry-url"],
1746 #contact-entry-network,
1747 [id^="contact-entry-network"] {
1751 #contact-entry-network,
1752 [id^="contact-entry-network"] {
1756 #contact-edit-banner-name {
1759 #contact-edit-photo-wrapper {
1764 #contact-edit-direction-icon {
1769 #contact-edit-nav-wrapper {
1772 #contact-edit-links {
1779 #contact-drop-links {
1783 #contact-edit-nav-wrapper .icon {
1784 .borders(1px, solid, #babdb6);
1785 .rounded_corners(3px);
1788 #contact-edit-poll-wrapper {
1791 #contact-edit-last-update-text {
1792 margin-bottom: 15px; }
1794 #contact-edit-last-updated {
1795 font-weight: bold; }
1797 #contact-edit-poll-text {
1800 #contact-edit-info_tbl, #contact-edit-info_parent, .mceLayout {
1805 margin-bottom: 65px; }
1807 .contact-photo-menu-button {
1809 background: url("dark/photo-menu.jpg") top left no-repeat transparent;
1820 .contact-photo-menu {
1822 border: 2px solid #444;
1823 background: @bg_colour;
1824 color: @main_colour;
1839 background: #3465A4;
1840 text-decoration: none; } } }
1843 * register, settings & profile forms
1849 background: url(dark/login-bg.gif) no-repeat;
1850 background-position: 0 50%;
1851 padding-left: 18px; }
1853 #settings-nickname-desc {
1854 background-color: @main_colour;
1860 #settings-default-perms {
1861 margin-bottom: 20px; }
1863 #register-form div, #profile-edit-form div {
1870 margin: 10px 5px; } }
1872 /*#register-form label, */
1873 /*#profile-edit-form label {*/
1878 /*#register-form span, */
1879 /*#profile-edit-form span {*/
1880 /* color: #555753; */
1881 /* display: block; */
1882 /* margin-bottom: 20px; */
1885 #profile-edit-marital-label span {
1888 .settings-submit-wrapper, .profile-edit-submit-wrapper {
1889 margin: 0 0 30px -3px; }
1891 .profile-edit-side-div {
1894 /*.profile-edit-side-div:hover {
1897 .profile-edit-side-link {
1898 margin: 3px 0px 0px 70px;
1901 #profiles-menu-trigger {
1902 margin: 0px 0px 0px 25px; }
1906 margin: 20px 20px 0px 0px; }
1908 .icon-profile-edit {
1909 background: url("dark/icons.png") -150px 0px no-repeat;
1915 text-decoration: none;
1919 #profile-edit-links ul {
1926 #register-sitename {
1930 #advanced-expire-popup {
1931 background: @bg_colour;
1932 color: @main_colour;
1937 #theme-preview img {
1938 margin: 10px 10px 10px 288px;
1945 .group-delete-wrapper {
1946 margin: -31px 50px 0 0;
1949 /*.group-delete-icon {
1953 #group-edit-submit-wrapper {
1960 #group-members, #prof-members {
1963 .borders(1px, solid, #555753);
1964 .rounded_corners(5px 5px 0 0);
1967 #group-all-contacts, #prof-all-contacts {
1970 .borders(1px, solid, #555753);
1971 .rounded_corners(0 0 5px 5px);
1975 #group-all-contacts h3,
1977 #prof-all-contacts h3 {
1978 color: @main_alt_colour;
1979 background-color: #555753;
1983 #group-separator, #prof-separator {
1990 #cropimage-wrapper {
2005 font-weight: bold; }
2008 margin-bottom: 20px;
2009 font-weight: bold; }
2020 .intro-approve-form, .intro-approve-as-friend-end {
2023 .intro-submit-approve, .intro-submit-ignore {
2024 margin-right: 20px; }
2026 .intro-submit-approve {
2029 .intro-approve-as-friend-label, .intro-approve-as-fan-label, .intro-approve-as-friend, .intro-approve-as-fan {
2034 margin-bottom: 10px; }
2036 .intro-approve-as-friend-desc {
2039 .intro-approve-as-end {
2041 margin-bottom: 10px; }
2043 .intro-end, .clear {
2055 background: @bg_colour; }
2058 border: 1px solid #ccc;
2059 .event-description, .event-location, .event-start {
2061 margin-right: 10px; } }
2064 margin-bottom: 10px; }
2066 .edit-event-link, .plink-event-link {
2068 /*margin-top: 4px; */
2069 /*margin-right: 4px;*/
2070 /*margin-bottom: 15px;*/ }
2072 .event-description:before {
2073 content: url('../../../images/calendar.png');
2074 margin-right: 15px; }
2076 .event-start, .event-end {
2079 font-size: smaller; }
2081 .event-start .dtstart, .event-end .dtend {
2085 margin-bottom: 10px; }
2087 .prevcal, .nextcal {
2093 .event-calendar-end {
2097 font-family: monospace; }
2103 #event-start-text, #event-finish-text {
2105 margin-bottom: 5px; }
2107 #event-nofinish-checkbox, #event-nofinish-text, #event-adjust-checkbox, #event-adjust-text, #event-share-checkbox {
2110 #event-datetime-break {
2111 margin-bottom: 10px; }
2113 #event-nofinish-break, #event-adjust-break, #event-share-break {
2116 #event-desc-text, #event-location-text {
2118 margin-bottom: 5px; }
2127 opacity: 1.0 !important; } }
2129 .filesavetags, .categorytags {
2133 .filesavetags:hover, .categorytags:hover {
2135 opacity: 1.0 !important; }
2139 margin: 5px 0 0 6px !important;
2146 #item-delete-selected {
2149 /* was tired of having no way of moving it around, so
2150 * here's a little 'hook' to do so */
2157 #item-delete-selected-end {
2160 #item-delete-selected-icon {
2162 margin-right: 5px; }
2164 #item-delete-selected-desc {
2168 text-decoration: underline; } }
2170 .fc-state-highlight {
2171 background: @main_colour;
2172 color: @bg_colour; }
2180 margin: 0 5px 4px 0;
2184 position: relative; }
2191 margin-bottom: 10px;
2198 background: @main_colour;
2201 .group-selected:hover,
2202 .nets-selected:hover,
2203 .fileas-selected:hover {
2204 color: @link_colour;
2205 background: @bg_colour;
2213 #sidebar-group-list {
2219 display: inline-block;
2223 .sidebar-group-element {
2227 background: @link_colour;
2232 #sidebar-new-group {
2234 display: inline-block;
2236 text-decoration: none;
2239 #peoplefind-sidebar form {
2240 margin-bottom: 10px;
2242 #sidebar-new-group {
2244 /*background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );*/
2245 /*background: -moz-linear-gradient( center top, #b20202 5%, #d60808 100% );*/
2246 /*background-color: #b20202;*/ }
2252 #side-peoplefind-url {
2253 background-color: @bg_colour;
2254 color: @main_colour;
2255 border: 1px #999 solid;
2259 background-color: #efefef;
2261 border: 1px 333 solid;
2270 .nets-link, .nets-all {
2274 margin: 20px 0px 30px;
2277 margin: 5px 5px 0px 0px;
2289 background-color: #ff0000;
2301 color: @main_colour;
2302 background: @bg_colour;
2308 padding-bottom: 2px;
2309 border-bottom: 1px solid #000;
2320 border-bottom: 1px solid #ccc;
2332 border: 1px solid #888;
2343 border-bottom: 1px solid #000;
2362 color: @main_colour;
2363 text-decoration: underline;
2368 color: @main_colour;
2379 display: inline-block;
2381 margin: 0 10px 1em 0;
2382 border: 1px @bg_colour solid;
2384 background: @main_colour;
2389 margin: 0 330px 0 auto;
2393 border: 1px solid #666;
2394 padding: 3px 6px 4px 10px;
2396 text-decoration: none;
2399 background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAUACIDASIAAhEBAxEB/8QAGgABAQACAwAAAAAAAAAAAAAAAAQDBQEGCf/EACgQAAIBAwIFAwUAAAAAAAAAAAECAAMEERIUBRMxUpEhIoEjM1Nxkv/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgT/xAAaEQEAAgMBAAAAAAAAAAAAAAAAAQIRMVES/9oADAMBAAIRAxEAPwD1ERKFNFVaNNVUYACgACcNVt1dEKUwzZwNI9cSDczDVdnuKDjomrPyJOQ2SXNq/L0rTPMzp9vXHWZfo/jT+RNFQV6e2yPt6s/Ms3EWQofhnDqjszWFqzMcljRUknxEn3ES/dup8xxPZ0hXtKFViQzorEDpkiZtqvc3mIkzs40bVe5vMbVe5vMREbrN3xy4t7utSVaZVHZQSDnAP7iIm+K1xpkm09f/2Q==');
2400 background-repeat: no-repeat;
2403 background-position: 42px 1px;
2404 background-color: #999;
2409 background-position: 2px 1px;
2410 background-color: #ccc;
2417 display: none !important; }
2428 .field.radio .field_help {
2429 margin-left: 297px; }
2433 display: inline-block;
2435 margin: 0 10px 1em 0;
2436 .borders(1px, solid, @bg_colour);
2438 background: @main_colour;
2440 .box_shadow(3px, 3px, 5px);
2444 .borders(1px, solid, #999);
2452 background-color: #eee;
2453 .borders(2px, outset, #aaa);
2455 .box_shadow(1px, 3px, 4px, 0);
2462 &[type="submit"]:active,
2463 &[type="button"]:active {
2464 .box_shadow(0, 0, 0, 0);
2479 background-color: #000;
2491 border: 4px solid #000000;
2492 background-color: #FFFFFF;
2526 .panel_text .progress {
2530 border: 1px solid #cccccc;
2536 background-color: #eeeeee;
2537 text-align: right; } }
2546 border-bottom: 2px solid #cccccc;
2547 padding-bottom: 1em;
2555 background-image: url("../../../images/icons/48/plugin.png");
2556 background-position: center center;
2557 background-repeat: no-repeat; } }
2573 background: url(dark/icons.png) no-repeat;
2575 text-decoration: none;
2579 text-decoration: none; } }
2582 display: inline-block;
2585 background: url(dark/editicons.png) no-repeat;
2587 text-decoration: none; }
2590 .box_shadow(2px, 2px, 5px, 2px);
2591 &:active, &:focus, &:hover {
2592 box-shadow: 0 0 0 0;
2599 background-position: 0px 0px;
2601 background-position: -22px 0px; } }
2604 background-position: 0px -22px;
2606 background-position: -22px -22px; } }
2609 background-position: 0px -44px;
2611 background-position: -22px -44px; } }
2614 background-position: 0px -66px;
2616 background-position: -22px -66px; } }
2619 background-position: 0px -88px;
2621 background-position: -22px -88px; } }
2624 background-position: -44px 0px;
2626 background-position: -66px 0px; } }
2629 background-position: -44px -22px;
2631 background-position: -66px -22px; } }
2634 background-position: -44px -44px;
2636 background-position: -66px -44px; } }
2639 &.drop, &.drophide, &.delete {
2645 background-position: -110px 0; }
2647 padding: 10px 0px 0px 25px;
2656 background: url("../../../images/icons/16/add.png") no-repeat;
2663 background-position: -50px 0; }
2666 background-position: -70px 0; }
2669 background-position: -90px 0px; }
2672 background-position: -110px 0; }
2675 background-position: -130px 0; }
2678 background-position: -150px 0; }
2681 background-position: -170px 0; }
2684 background-position: -190px 0; }
2687 background-position: -230px -60px; }
2690 background-position: -211px 0; }
2693 background-position: -230px 0; }
2696 background-position: -50px -20px; }
2698 .noglobe, .nolocation {
2699 background-position: -70px -20px; }
2702 background-position: -90px -20px; }
2705 background-position: -110px -20px; }
2708 background-position: -130px -20px; }
2711 background-position: -151px -18px; }
2714 background-position: -170px -20px; }
2717 background-position: -190px -20px; }
2720 background-position: -210px -20px; }
2723 background-position: -230px -20px; }
2726 background-position: -50px -40px; }
2729 background-position: -70px -40px; }
2732 background-position: -88px -40px; }
2735 background-position: -110px -40px; }
2738 background-position: -190px -40px; }
2741 background-position: -210px -40px; }
2744 background-position: -130px -60px; }
2747 background-position: -150px -60px; }
2750 background-position: -170px -60px; }
2753 background-position: -50px -60px; }
2756 background-position: -70px -60px; }
2759 background-position: -90px -60px; }
2762 background-position: -110px -60px; }
2773 .borders(1px, solid, #babdb6);
2776 .borders(1px, solid, #babdb6);
2785 background-image: url(../../../images/content-types.png); }
2788 background-position: 0px 0px; }
2791 background-position: -20px 0; }
2794 background-position: -40px 0; }
2797 background-position: -60px 0px; }
2800 background-position: -80px 0; }
2812 /*margin: 50px 20%;*/
2817 color: @main_colour;
2827 #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper {
2828 display: block !important;
2829 background: @bg_colour;
2830 color: @main_colour; }
2838 background: white url("../../../images/search_18.png") no-repeat right center;
2839 padding-right: 20px;
2848 background: #eeeecc url("../../../images/show_all_off.png") 8px 8px no-repeat;
2849 padding: 7px 10px 7px 30px;
2855 background: #ff9900 url(../../../images/show_all_on.png) 8px 8px no-repeat; } }
2859 border: 1px solid #ccc;
2864 /*#acl-list-content {
2872 margin: 3px 0 5px 5px;
2877 margin: 5px 5px 20px; }
2882 padding: 2px 0 1px; }
2884 background: #eeeecc 3px 3px no-repeat;
2895 vertical-align: middle; } }
2897 #acl-wrapper a:hover {
2898 text-decoration: none;
2903 // data:[<MIME-type>][;charset=<encoding>][;base64],<data>
2905 // background-image: url('../../../images/show_off.png');
2906 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABxSURBVAiZY/z//z8DDMyaNUuEgYEhk4GBwZ8JJrhv3z5DZmbmMwwMDOoMDAxpLKtWraqTl5d3fPv2rcn///9XpKWlpTIwMDCwfPr0SePWrVtmP378YPn//385zASmf//+Rf/8+XMpIyPj2bS0tHcwCQBWkiq6M5HGDgAAAABJRU5ErkJggg==');
2910 // background-image: url('../../../images/hide_off.png');
2911 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVAiZBcEhDsIwFAbg/72+VXQ7wPSCIlj8JMlmcKQGgdgRCCfpEz0HjgSDw3IA1AQC1QqSpXwfqeoZwHOaphsAqGpfVVVHIYQNM1+J6MLMOwA9gAOVUhBC6Ky1r7quv03TrMZxzAwAIjKIyCel9JvneQ8ApKprY8zdObfNOXMp5bEsyyDGmJaITt77NwDEGI/W2vYP0nYuQ/Tw9H4AAAAASUVORK5CYII=');
2914 .acl-button-show.selected {
2915 // background: #9ade00 url(../../../images/show_on.png);
2916 background: #9ade00 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXSURBVAiZTcyhDYNQGADh7xEGwGDxhD2qUWxAwIBgE9BdoxO03YaEEX7USzh5l1yKCJl0pBoT+uIhK3zRYk52Az5444w1FijxwoYOTT4UGPHHL9a4crgBhcYSpxKVgzIAAAAASUVORK5CYII=');
2919 .acl-button-hide.selected {
2920 // background: #ff4141 url(../../../images/hide_on.png);
2921 background: #ff4141 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACSSURBVAiZBcGhDoJQFAbg/z/3cGliJDOTszmLichGstkMPoTzvfA2N4vN6gMYCGhwMifMTY7fxyCy4zBcCrMjAFRk7p3LWAEzRwYT2StQgMwBrGlmOJCZV72Ok+QpcTyZ1/VHAEBEyiiKHq+2/d6bZgUADMCUIqeR94t338tAns2sVKea/sy2y667AUAgN+pc+gcI6S733PoZRAAAAABJRU5ErkJggg==');
2926 border-color: #9ade00; }
2928 border-color: #ff4141; } }
2932 /* autocomplete popup */
2936 background-color: #555753;
2940 border: 1px solid #cccccc;
2943 background-color: #555753;
2952 background-color: @main_alt_colour;
2957 margin: 5px 5px 5px 81%;
2964 #network-star-link {
2971 display: inline-block; } }
2982 #sidebar-page-list {
2987 list-style: none; } }
2993 right: 175px !important;
2994 /* override the jappix css */
3003 //* Smartphones (portrait and landscape) ----------- */
3004 @media only screen and (min-device-width: 320px)
3005 and (max-device-width: 480px) {
3010 //* Smartphones (landscape) ----------- */
3011 @media only screen and (min-width: 321px) {
3016 //* Smartphones (portrait) ----------- */
3017 @media only screen and (max-width: 320px) {
3022 //* iPads (portrait and landscape) ----------- */
3023 @media only screen and (min-device-width: 768px)
3024 and (max-device-width: 1024px) {
3029 //* iPads (landscape) ----------- */
3030 @media only screen and (min-device-width: 768px)
3031 and (max-device-width: 1024px)
3032 and (orientation: landscape) {
3037 //* iPads (portrait) ----------- */
3038 @media only screen and (min-device-width: 768px)
3039 and (max-device-width: 1024px)
3040 and (orientation: portrait) {
3045 //* Desktops and laptops ----------- */
3046 //adjusted to 1024 from 1224.
3047 //not everybody has a fucking big screen ffs
3048 @media only screen and (min-width: 1024px) {
3053 //* Large screens - */
3054 @media only screen and (min-width: 1520px) {
3059 //* iPhone 4 ----------- */
3060 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
3061 only screen and (min-device-pixel-ratio: 1.5) {
3067 color: @link_colour;
3068 background-color: darken(@main_alt_colour, 13%);