/** * @copyright (C) 2011 - 2016 Mike Feng Jinglong - All rights reserved. * @license GNU General Public License, version 3 (http://www.gnu.org/licenses/gpl-3.0.html) * @author Mike Feng Jinglong * @url http://www.simbunch.com/license/ */ #simgallery-wrapper {position:relative;} .fa-spin {filter:blur(0);} .like-link i {margin-left:5px;} #community-wrap.simgallery-jomsocial-toolbar .joms-menu--user {display:none;} .sg-notice {left:auto !important;top:auto !important;} .cat-breadcrumbs {position:relative;} .cat-breadcrumbs > div.cat-links {font-size:12px;display:block;} .cat-breadcrumbs i {margin:0px 5px;} .datepicker_btn {visibility:hidden;width:0px;height:0px;box-shadow:none !important;border:none !important;padding:0px !important;margin:0px !important;} .stuck {position:fixed;top:0;} #add_photos, #add_video, #add_profilepic {opacity:0;display:inline-block;height:100%;width:100%;position:absolute;top:0px;right:0px;font-size:20px;direction:ltr;cursor:pointer;} .sgscroll {overflow:auto;} .jBox-Modal {max-width:100vw;} .jBox-Confirm .jBox-content {padding:20px 15px !important;} /*dropdown menus*/ .dropdown-menu a span {width:16px;display:inline-block;text-align:center;} .dropdown-toggle div {display:inline-block;} .dropdown-toggle > div > span {margin-right:3px;} .btn-tiny {width:16px !important;height:16px !important;line-height:16px !important;font-size:13px !important;padding:0px !important;border-radius:0px !important;vertical-align:middle;} .btn-tiny > div, .btn-tiny > div > span {display:block;width:14px;height:14px} .btn-tiny > div > span {margin:0px;line-height:14px;vertical-align:middle;} .preload-images {display:none;} #simgallery-wrapper .dynamic-textarea {padding:0px 6px 4px;} body.contentpane {padding:0px !important;background-color:#fff;background-image:none;} .small { font-size:12px; color:#6E6E6E; } a { cursor:pointer; } .commenttip-content { width: 400px !important; padding:3px !important; } .dot-separator { margin:0px 2px; font-size:17px; line-height:14px; vertical-align:middle; } .Modal .mBoxContent { min-width:400px; font-size:1.1em; } .ajax-loading { background: url(../images/ajax-loader.gif) no-repeat; display:none; height:16px; width: 16px; margin-left:5px; } span.likes {margin-left:5px;} .btn-sg-notifications {cursor:pointer;position:relative;margin-left:10px;} .btn-sg-notifications i.fa {font-size:21px;vertical-align:middle} .btn-sg-notifications span.notif-count {font-family:"Lucida Console";background-color:#a94442;border-radius:30px;color:#fff;font-size:11px;left:12px;top:2px;line-height:11px;min-width:11px;padding:1px 2px;position:absolute;text-align:center;} /* standard classes */ .media-box .owner-info {font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:28px;line-height:26px;vertical-align:middle;padding:1px 2px;} .media-box .media-image-wrapper {position:relative;} .media-box .inner-border {border:1px solid #999;} #search-form {display:table;width:100%;max-width:680px;} #search-form > * {display:table-cell;position:relative;vertical-align:top;} #search-form > .category-search {width:120px;} #search-form > .category-search .cat-links {position:absolute;width:300px;top:-22px} #search-form > .btn-group {width:90px;padding-left:10px;} #keywords-search {margin:0px;box-sizing:border-box !important;} /* view = latestalbums */ .latestalbums-wrapper .media-box .owner-info {border-bottom:1px solid #999999;} .latestalbums-wrapper .media-box .owner-info .left {float:left;margin-right:3px;} .latestalbums-wrapper .media-box .owner-info .left a {display:inline-block;} .latestalbums-wrapper .media-box .owner-info img {width:24;height:24px;margin:auto;display:block;} /* view = latestphotos */ .latestphotos-wrapper .media-box {width:203px;} .latestphotos-wrapper .media-box .owner-info {border-bottom:1px solid #999999;} .latestphotos-wrapper .media-box .owner-info .left {float:left;margin-right:3px;} .latestphotos-wrapper .media-box .owner-info .left a {display:inline-block;} .latestphotos-wrapper .media-box .owner-info img {width:24px;height:24px;margin:auto;display:block;} .latestphotos-wrapper .keywordtagslist {width:480px;display:inline-block;background-color:#fff; border:1px solid #E0E0E0; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:3px 3px 3px 3px;padding:4px 6px;min-height:20px;line-height:20px} .latestphotos-wrapper .keywordtagslist:focus {border-color:rgba(82, 168, 236, 0.8); outline:0 none;} .latestphotos-wrapper .search-fields .btn {vertical-align:top;} /* view = latestvideos */ .latestvideos-wrapper .media-box {width:273px;} .latestvideos-wrapper .media-box .media-image {width:273px;} .latestvideos-wrapper .media-box .owner-info {border-bottom:1px solid #999999;} .latestvideos-wrapper .media-box .owner-info .left {float:left;margin-right:3px;} .latestvideos-wrapper .media-box .owner-info .left a {display:inline-block;} .latestvideos-wrapper .media-box .owner-info img {width:24px;height:24px;margin:auto;display:block;} .latestvideos-wrapper .keywordtagslist {width:480px;display:inline-block;background-color:#fff; border:1px solid #E0E0E0; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:3px 3px 3px 3px;padding:4px 6px;min-height:20px;line-height:20px} .latestvideos-wrapper .keywordtagslist:focus {border-color:rgba(82, 168, 236, 0.8); outline:0 none;} .latestvideos-wrapper .search-fields .btn {vertical-align:top;} /* view = categories */ #categories-pane {padding:10px;border:1px solid;} #categories-pane dl {margin:0;} #categories-pane dl dd {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #categories-pane .toggle-categories {display:none;} #categories-pane > div {display:flex;flex-wrap:wrap;} #categories-pane div.cat-item {display:flex;width:33%;text-align:center;} #categories-pane div.cat-item > .inner {display:block;width:100%;padding:0px 8px;border-left:5px solid #999;margin:0px 0px 5px;} #categories-pane div.cat-item > .inner > * {display:inline-block;text-align:left;} #categories-pane div.cat-item img {width:36px;height:36px;vertical-align:top;margin:0px 8px 0px 0px;} #categories-pane div.cat-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #categories-pane div.cat-count {font-size:13px;} #breadcrumbs {font-size:16px;} #breadcrumbs i {margin:0px 5px;} @media (max-width: 979px) { #categories-pane div.cat-item {width:50%;} #categories-pane > div {height:0px;overflow:hidden} #categories-pane .toggle-categories {display:inline-block;} } @media (max-width: 480px) { #categories-pane div.cat-item {width:100%;} } /* view = dashboard */ #scrollanchor {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position:sticky;top:0px;z-index:11;} #dashboard-top-pane { background-color:#fff; border: 1px solid #ddd; padding: 10px 12px; } #dashboard-top-pane .left, #dashboard-top-pane .right {height: 32px;} #dashboard-top-pane .inner .top-left img {width: 32px; height:32px; border:0px; margin-right:8px;} #dashboard-top-pane .inner {display:flex;flex-wrap:wrap;} #dashboard-top-pane .inner > * {min-width:0;} #dashboard-top-pane .inner .top-left, #dashboard-top-pane .inner .top-right {flex:1 300px; text-align:center} #dashboard-top-pane .inner .top-right {margin-top:8px;} @media screen and (min-width:768px) { #dashboard-top-pane .inner .top-left {text-align:left;} #dashboard-top-pane .inner .top-right {text-align:right;margin-top:0px} } #simgallery-wrapper #dashboard-banner { margin: 10px 0px 0px !important; padding: 0px 0px 0px 20px !important;position:relative; } #simgallery-wrapper #dashboard-banner a { overflow:hidden;position:relative;color:inherit; display:block;float:left;font-weight:bold; font-size: 14px; margin:0px 20px -1px 0px !important; padding:0px 0px 9px !important; position:relative; z-index:10; } #simgallery-wrapper #dashboard-banner a.active { color:#3180c2;} #simgallery-wrapper #dashboard-banner a div { display:none; } #simgallery-wrapper #dashboard-banner a.active div { position:absolute;bottom:-8px;left:calc((100% - 20px) / 2);background-color:#fff;display:inline-block;width:14px;height:14px;border:1px solid #ddd;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform: rotate(45deg); } .photos-output {position:relative;background-color:#fff;border:1px solid #ddd;margin:0px;padding:7px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .photos-output .output-blank { padding: 70px 0px; color:#bbbbbb; font-size:21px; font-weight:bold; text-align:center; } .photos-output #addphotos-box { font-size:17px; color:#999; cursor:pointer; display:block; height:100%; text-align:center; vertical-align:middle; font-weight:bold; position:relative;} .photos-output #addphotos-box .inner {border:2px dashed #999;margin:7px;} .photos-output #addphotos-box .val {position:absolute;top:0px;left:0px;bottom:0px;right:0px;z-index:99;margin:auto;height:20px;line-height:20px;vertical-align:middle;} .photos-output .media-box {position:relative;width:50%;float:left;} .photos-output .media-box .inner {padding:7px;} .videos-output .media-box .inner, .videos-output .media-box .media-image-wrapper{height:100%;box-sizing:border-box !important;position:relative;} .media-box .media-background {position:absolute;top:0px;width:100%;height:100%;background-position:50% 25%;background-size:cover;background-repeat:no-repeat} #simgallery-wrapper .photos-output .media-box, #simgallery-wrapper .albums-output .media-box {display:block;} @media screen and (min-width:768px) { #simgallery-wrapper .photos-output .media-box {width:33%;} #simgallery-wrapper .albums-output .media-box {width:33%;} } @media screen and (min-width:980px) { #simgallery-wrapper .photos-output .media-box {width:25%;} #simgallery-wrapper .albums-output .media-box {width:20%;} #simgallery-wrapper.album-edit-wrapper .photos-output .media-box {width:20%;} } .media-box .media-image { width:100%; height:auto; display:block; background-position:50% 25%; background-size:cover; background-repeat:no-repeat; transition-duration:500ms; transition-property:width, height; } .media-box .editorremove { visibility:hidden; position: absolute !important; top: 5px !important; right: 5px !important; } .media-box .editorremove a.dropdown-toggle { height: 28px !important; width: 28px !important;line-height:28px; padding: 0px !important; border-radius: 0px !important; border: 1px solid #999999 !important; content: none !important; } .media-box .editorremove a.dropdown-toggle i {font-size:16px;} .media-box .editorremove ul.dropdown-menu { left: inherit !important; right: 0px !important; } .media-box .editorremove ul.dropdown-menu li { text-align: left !important; font-size:12px; } .media-box .editorremove ul.dropdown-menu li a { padding-left: 10px; cursor:pointer; } .media-box .editorremove ul.dropdown-menu li a i {width:16px;text-allign:center;} .media-box .media-info { visibility:hidden; background: url(../images/media-info-gradient.png) repeat-x transparent; background-size:contain; position:absolute; bottom:0px; width: 100%; color: #ffffff; padding-top: 14px; } .media-box .media-info a { color:#fff; cursor:pointer; } .media-box .media-info a:hover { text-decoration:underline; } .media-box .media-info .info-album { font-size: 15px; font-weight: bold; padding:0px 8px; border-bottom:1px solid #999999; } .media-box .media-info .info-album div { overflow:hidden; text-overflow:ellipsis; display:inline-block; white-space:nowrap; max-width:100%; } .media-box .media-info .info-controls { padding:0px 8px 4px 8px; } .media-box .media-info .info-controls .likecommenticons { float:right; padding:2px 0px; border-radius:3px;margin-top:2px; } .media-box .media-info .info-controls .likecommenticons:hover { background-color:rgba(255,255,255,0.25); text-decoration:none; } .media-box .media-info .info-controls .likecommenticons span { padding: 0px 3px; } .media-box .media-info .info-controls .likecommenticons span var { font-style:normal; } .media-box .media-info .info-controls .likecommenticons i { font-size:13px; } .infinite-more-link {visibility:hidden;} #media-spinner { text-align:center; margin: 15px 0px 0px; display:none; } #media-spinner div {height:auto;width:auto;} .albums-output .media-box.not-posted .inner * {color: #b94a48 !important; background-color:#f2dede !important;} .albums-output .media-box .album-info {border-top:1px solid #999;height:46px} .album-info .album-name { font-weight:bold; font-size:14px;padding: 1px 4px 0px 6px; white-space: nowrap; text-overflow:ellipsis;overflow:hidden;} .album-info .album-count { min-height:23px;font-size:13px;padding: 0px 4px 2px 6px;white-space: nowrap; text-overflow:ellipsis;} .album-info .album-count .video-title {overflow:hidden;white-space: nowrap; text-overflow:ellipsis;} .access-menu.dropdown-menu {font-size:14px;} /* add profile picture */ .addProfilePictureModal {height:100vh;width:100vw;max-width:800px;padding:0px;top:0px !important;margin-top:0px !important;margin-bottom:0px !important;} .addProfilePictureModal .jBox-container, .addProfilePictureModal .jBox-content {height:100% !important;padding:0px !important;margin-top:0px !important;margin-bottom:0px !important;overflow:hidden;} #addProfilePictureModal {height:100%;} #addProfilePictureModal form {margin:0px;padding:0px;} #addProfilePictureModal .top-buttons {border-bottom:1px solid #ddd;padding:10px 5px;} #addProfilePictureModal .top-buttons > div {float:left;padding:0px 5px;box-sizing:border-box !important;} #addProfilePictureModal .top-buttons > div:nth-child(1), #addProfilePictureModal .top-buttons > div:nth-child(2) {width:calc((100% - 120px) / 2);} #addProfilePictureModal .top-buttons > div:nth-child(3) {width:120px;} #addProfilePictureModal .top-buttons > div > * {position:relative;display:block;width:100%;box-sizing:border-box !important;height:100px;line-height:100px;background-color:#eee;font-size:20px;cursor:pointer;text-align:center;vertical-align:middle;overflow:hidden} #addProfilePictureModal .top-buttons > div > *:hover {background-color: #ddd;} #addProfilePictureModal .ppscroll {overflow:auto;padding:0px;margin:auto;background-color:#fff;max-height:calc(100vh - 180px)} #profilePicWrap ul {margin:0px;} #profilePicWrap li {list-style:none;display:block;border-bottom:1px solid #ddd;padding:14px 10px;font-size:14px;clear:both;} #profilePicWrap li h5 {margin: 0px 0px 10px;font-size:14px;} #profilePicWrap .pp-thumbs {display:flex;flex-wrap:wrap;} #profilePicWrap .pp-thumbs > div {display:flex;align-items:flex-start;width:16.6%;padding:4px;position:relative;float:left;cursor:pointer;} #profilePicWrap .pp-thumbs > div > span {position:absolute;top:4px;bottom:4px;right:4px;left:4px;z-index:1;} #profilePicWrap .pp-thumbs > div > span:hover {border: 5px solid #006dcc;} #profilePicWrap .pp-thumbs > div img {width:100%;height:auto;} #profilePicWrap li .more-thumbs-link {margin:10px 10px 0px; display:inline-block;} @media screen and (max-width:768px) { #profilePicWrap .pp-thumbs > div {width:33.3%} } .cropModal {width:100vw;max-width:480px;} .cropModal .jBox-content {overflow:hidden;} #cropModal {overflow:hidden;} #cropModal .zoom-warning {position:absolute;width:100%;color:#fff;background-color:rgba(0, 0, 0, 0.5);z-index:11;font-size:13px;padding:10px 15px;} #cropModal .zoom-warning i {margin-right:12px;} #cropModal .photo-wrapper {height:450px;position:relative;background:rgba(0, 0, 0, 0) url("../images/browse-loading.gif") no-repeat scroll 50% 50%} #cropModal .photo-wrapper > div.tag {position:absolute;width:100%;text-align:center;z-index:10;} #cropModal .photo-wrapper > div.tag > div {background-color: #999;color:#fff;display:inline-block;font-size:14px;font-weight:bold;border:1px solid #ddd;padding:3px 8px;} #cropModal .drag-desc {top:30px;} #cropModal .zoom-scroll-desc {bottom:30px;} #cropModal .bottom {font-size:14px;margin-top:14px;} #cropModal .bottom .pull-right > * {display:inline-block;margin-left:5px;} #cropModal.edit_thumb .skip-crop {display:none;} .cameraModal {} #cameraModal .top {position:relative;width:480px;height:360px;} #cameraModal .top > * {width:480px;height:360px;} #cameraModal .bottom {font-size:14px;margin-top:14px;} #cameraModal .bottom .text-right > * {display:inline-block;margin-left:5px;} #cameraModal .btn-capture {position:absolute;bottom:20px;height:auto;text-align:center;} #cameraModal .countdown, #cameraModal .flash, #cameraModal .preview {position:absolute;top:0px;left:0px;display:none;} #cameraModal .preview {border:1px solid #000;} #cameraModal .flash {background-color: #fff;} #cameraModal .countdown > div {text-align:center;position:relative;top:50%;transform:translateY(-50%);color:#fff;font-size:36px;font-weight:bold;} /* view = addphotos */ .addPhotosModal {height:100%;width:100%;max-width:1200px;padding:0px;top:0px !important;margin-top:0px !important;margin-bottom:0px !important;} .addPhotosModal .jBox-container, .addPhotosModal .jBox-content {height:100% !important;padding:0px !important;margin-top:0px !important;margin-bottom:0px !important;overflow:hidden;} .selectCatModal {max-width:100%;max-height:100vh;} .selectCatModal .jBox-container, .selectCatModal .jBox-content {max-height:100vh !important;} .selectCatModal .jBox-content {overflow:auto;max-width:800px;} .selectCatModal .category-row {width:100%;margin:0;} .selectCatModal .category-row [class*="col"] {padding:8px 4px 0;} .selectCatModal .category-row [class*="col"] a {min-width:200px;text-align:center;display:block;padding:6px;background-color:#eee;line-height:30px;min-height:30px;text-decoration:none;} .selectCatModal .category-row [class*="col"] a:hover {background-color:#ccc;} @media screen and (max-width:767px) { .jBox-Modal.selectCatModal {width:90vw;margin-left:0 !important;left:50% !important;transform:translateX(-50%);} } #addPhotosDiv form {width:100%;height:100%;margin:0;padding:0;} #addPhotosDiv .progress {margin:0;} #uploadphotos-top-pane, #uploadphotos-bottom-pane {background-color:#fff;margin:0;width:100%;} #uploadphotos-top-pane {border-bottom: 1px solid #dddddd;padding-top:15px;} #uploadphotos-top-pane input, #uploadphotos-top-pane textarea {margin:0; width:80%;} #uploadphotos-top-pane input#album_name {font-size:19px;font-weight:bold;} #uploadphotos-top-pane textarea#album_description {max-height:74px;overflow:auto;} #uploadphotos-top-pane .cat-breadcrumbs > div.cat-links {display:inline-block;white-space:nowrap;} #uploadphotos-bottom-pane {border-top: 1px solid #dddddd;position:absolute;bottom:0;left:0;right:0;z-index:10;padding-top:10px;} #uploadphotos-bottom-pane > * {padding-bottom:10px;} .ui-datepicker.ui-widget {font-size:0.8em;z-index:100001 !important;} @media screen and (max-width:767px) { .jBox-Modal.addPhotosModal {width:100vw;height:100vh;margin:0 !important;left:0 !important;} #uploadphotos-bottom-pane .progress-wrapper {clear:both;} } @media screen and (max-width: 480px) { #uploadphotos-bottom-pane .col-1-wrapper {padding-right:0;text-align:left;} #uploadphotos-bottom-pane .col-2-wrapper {padding-left:0;text-align:right;} } #uploadphotos-wrapper {padding:5px;background-color:#fff;max-height:calc(95vh - 180px);margin:auto;overflow:auto} #uploadWrap ul { margin:0px;display:flex;flex-wrap:wrap;max-width:100vw;padding:0; } #uploadWrap ul li {display:flex;list-style:none;padding:7px;margin:0px;width:50%;position:relative;text-align:center;float:left} @media screen and (min-width:768px) { #uploadWrap ul li {width:33%;} } @media screen and (min-width:980px) { #uploadWrap ul li {width:25%;} #uploadWrap.fbdroparea ul li {width:20% !important;} } #uploadWrap ul li > div.node-inner {position:relative;display:block;width:100%;} #uploadWrap ul li > div.node-inner canvas, #uploadWrap ul li > div img {width:100%;height:auto;opacity:0.6;transition:opacity 1s ease 1s;} #uploadWrap ul li > div.node-inner .node-controls {position:absolute;width:100%;top:0px;text-align:right;z-index:1;padding:3px 5px;} #uploadWrap ul li > div.node-inner .node-progress {position:absolute;width:100%;top:calc(50% - 20px);z-index:1;margin:0px;height:15px;} /*add facebook*/ #uploadWrap ul li > div.fb-inner {border:1px solid #999;cursor:pointer;} #uploadWrap ul li > div.fb-inner .fbphoto {position:absolute;top:0px;width:100%;height:100%;background-position:50% 25%;background-size:cover;background-repeat:no-repeat} #uploadWrap ul li .media-info {position:absolute;width:100%;bottom:0px;background: rgba(255, 255, 255, .75);padding:3px} #uploadWrap ul li .media-info h4 {font-size:16px; margin:0px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;width:100%;} #uploadWrap ul li.selected > div.fb-inner {border:8px solid #006dcc;border-radius:7px;} #uploadphotos-bottom-pane .inner .bottom-middle img {height:30px;border:1px solid #999;margin:0px 3px 3px;} .selectorbutton { visibility: hidden; height: 20px !important; line-height: 20px !important; position: absolute !important; top: 5px !important; right: 5px !important; } .selectorbutton a.dropdown-toggle { height: 20px !important; width: 20px !important; padding: 0px !important; border-radius: 0px !important; border: 1px solid #999999 !important; content: none !important; } .selectorbutton ul.dropdown-menu { left: inherit !important; right: 0px !important; } .selectorbutton ul.dropdown-menu li { text-align: left !important; } /* view = album */ .infinite-container.sortable-list {width:calc(100% - 1px);position:relative;} #album-edit-top ul.access-menu.dropdown-menu, .album-changeaccess-btn ul.dropdown-menu {left:inherit;right:0px;} .date-form .ui-datepicker-buttonpane {display:none;} .album-heading { text-align:center; padding: 8px; } .album-heading h3 { font-weight:bold; font-size:18px; padding:0px; margin:0px 0px 5px 0px; line-height:18px; } .album-heading .album-description { margin: 5px 0px 15px;} .album-heading .album-description #description-textarea { min-height:50px;padding:0px 6px 4px; max-width:100%; } .album-heading i {font-size:13px;cursor:pointer;} a#description-link {display:block;line-height:16px;} a#description-link span {font-size:14px;} .album-description #editdescription { margin-top:10px; } .album-description #editdescription > div { display:inline-block; } .edit-photo-date { width:90px; cursor:pointer !important; } .media-box .fa-play, .media-box .video-duration {display:inline-block;position:absolute;bottom:5px;color:#fff;} .media-box .fa-play {visibility:hidden;left:5px;background-color:#000;border:2px solid #fff;-webkit-border-radius:5px;border-radius:5px;font-size:16px;line-height:normal;padding:4px 10px;opacity:0.8;} .media-box .video-duration {right:5px;background-color:#303030;font-size:11px;line-height:normal;padding:2px 3px;-webkit-border-radius: 3px;border-radius: 3px;} #album-comment-section { padding: 5px; font-size:12px; } #album-comment-section .actionslinks {background-color:#ddd;padding:2px 8px;} #album-comment-section ul {width:100%;} #album-comment-section .comments-list-ul {max-height:none;} /* view = album, layout = edit */ .album-edit-wrapper {position:relative;} #album-edit-top {padding:15px 0 0;border: 1px solid #ddd;background-color:#fff;width:100%;margin:0;} #album-edit-top input, #album-edit-top textarea {margin:0;box-sizing:border-box;padding:0.375rem;} #album-edit-top .album-location {font-size:12px;width:80%} #album-edit-top #selectCat {float:right;} #album-edit-top .cat-links {display:inline-block;margin-right:10px;} #album-edit-top .album-name {font-size:17px; font-weight:bold;} @media screen and (max-width:767px) { #album-edit-top .text-right {text-align:left;} #album-edit-top #selectCat {float:none;} #album-edit-top .cat-links {margin-right:0;margin-left:5px;} } #movetoalbum ul.dropdown-menu {max-height:192px;} #movetoalbum ul.dropdown-menu li > a { clear: both;color: #333333;display: block;font-weight: normal;line-height: 20px;padding: 3px 20px;white-space: nowrap;} #movetoalbum ul.dropdown-menu li > a:hover {color: #ffffff;text-decoration: none;background-color: #0081c2;background-image: -moz-linear-gradient(top, #0088cc, #0077b3);background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);background-image: -o-linear-gradient(top, #0088cc, #0077b3);background-image: linear-gradient(to bottom, #0088cc, #0077b3);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);} #movetoalbum ul.dropdown-menu li > a i.fa {width:16px;text-align:center;} #album-edit-body {border-top:none;} #album-edit-body .media-box {background-color:#fff;cursor:move;} #album-edit-body .media-box .media-image-wrapper {border:1px solid #999;} #album-edit-body .media-box .photo-info {border:1px solid #999;border-bottom:none;border-top:none;} #album-edit-body .media-box .photo-info-section {border-bottom:1px solid #999;padding:2px 0px 2px 4px;} #album-edit-body .media-box .location-section {padding-right:4px;} #album-edit-body .media-box .photo-info-section textarea, #album-edit-body .media-box .photo-info-section input {line-height:14px;font-size:12px;color:#000;resize:none;margin:0px;padding:0px;width:100%;border:0px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} #album-edit-body .media-box .photo-info-section textarea {height:60px;} #album-edit-body .media-box .photo-info-bottom {padding:0px; background-color:#E0E0E0;cursor:default;} #album-edit-body .media-box .photo-info-bottom i {padding:3px 4px; border-right:1px solid #999999; cursor:pointer;} #album-edit-body .media-box .photo-info-bottom i.cover-image {color:#3180c2;} #album-edit-body .media-box .photo-info-bottom .photo-date {display:inline-block;border:0px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;width:90px;font-size:11px;margin:0px;padding:0px 0px 3px 3px;background:none;cursor:default;} .moveToAlbumModal .jBox-content {overflow:visible;} /* view = notifications */ .notifications-modal-wrapper {padding:0px;} .notifications-modal-wrapper .notifications-list { max-height: 200px; overflow:hidden; margin:0px; padding:0px; } .notifications-modal-wrapper .notifications-list li {padding:5px 10px; border-bottom:1px solid #E0E0E0;font-size:14px;} .notifications-modal-wrapper .notifications-list li.new-notification {background-color:#FF8;} .notifications-modal-wrapper .notifications-list li:hover {background-color:#ddd;} .notifications-modal-wrapper .notifications-list li .notification-message { width:255px; display:inline-block;} .notifications-modal-wrapper .notifications-list li .left {float:left; margin-right:5px;} .notifications-modal-wrapper .notifications-list li .right {float:right; margin-left:5px; padding:3px; border:1px solid #E0E0E0;} .notifications-modal-wrapper .notifications-list li img.avatar {width:50px; height:50px;} .notifications-modal-wrapper .notifications-list li img.thumb {width:55px; height:auto; max-height:60px;} .notifications-modal-wrapper .notifications-list li .actor {font-weight:bold;} /* view = addvideo */ #addvideo-form {margin:0px;max-width:100%} #addvideo-form .control-group {margin-bottom:10px;} #addvideo-form .control-label {width:100px;} #addvideo-form .controls {margin-left:120px;} #videoTab {margin-top:0px;} #link-video-thumbnail {height:128px;width:auto;} /* view = video */ /* if you are using responsive bootstrap */ #edit-video-form .form-horizontal input, #edit-video-form .form-horizontal textarea {box-sizing:border-box;} @media (max-width: 480px) { #edit-video-form .span7 {width:300px;} #edit-video-form .form-horizontal input, #edit-video-form .form-horizontal textarea {max-width:100%;box-sizing:border-box;} #edit-video-form .form-horizontal label {width:100%;text-align:left;display:block;} #edit-video-form .form-horizontal .controls {max-width:100%;margin-left:0;display:block;} } @media (min-width: 481px) and (max-width: 767px) { #edit-video-form .span7 {width:100%;} #edit-video-form .form-horizontal input, #edit-video-form .form-horizontal textarea {max-width:100%;box-sizing:border-box;} #edit-video-form .form-horizontal label {width:100px;display:block;} #edit-video-form .form-horizontal .controls {margin-left:110px;} } /* tagging stuff */ #tagit {position:absolute;} .photo-tag-frame {width:100px;height:100px;position:absolute;z-index:110;} .photo-tag-frame .inner {height:100%;-moz-box-shadow:0px 0px 5px 1px rgba(0, 0, 0, 0.7);-webkit-box-shadow:0px 0px 5px 1px rgba(0, 0, 0, 0.7);box-shadow:0px 0px 5px 1px rgba(0, 0, 0, 0.7);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:crosshair; border:3px solid rgba(255, 255, 255, 0.7);} .photo-tag-frame.usertag {cursor:pointer;} #tagit .photo-tag-frame {position:relative;} #pn-tag-selector {position:absolute;top:100%;left:-70px;margin-top:10px;width:240px;z-index:200;} #pn-tag-selector .arrow { position:absolute;top:0px;left:calc((100% - 12px) / 2);background-color:#fff;display:inline-block;width:12px;height:12px;border-left:1px solid #ddd;border-top: 1px solid #ddd;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform: rotate(45deg); } #pn-tag-selector .inner {background-color:#fff;border:1px solid #ddd;padding:7px 5px 5px;margin-top:6px;} #pn-name-input {width:100%;font-size:12px;height:auto;line-height:16px;margin:0px;padding:3px 6px;border-radius:0px;display:block;box-sizing:border-box;box-shadow:none;} .phototagtip-container {-webkit-border-radius:0px !important;-moz-border-radius:0px !important;border-radius:0px !important;} .photo-tag-suggestion {background-color:#fff;padding:4px !important;font-size:12px;text-align:left;} .photo-tag-suggestion.keyword-suggestion {margin:0px !important;padding-left:15px !important;} .ui-menu-item-category {font-size:12px;text-align:right;padding-right:10px;margin:0px} .photo-tag-suggestion img {float:left;margin-right:5px;height:24px;height:24px;} .photo-tag-suggestion span {font-weight:bold;} #search-form .ui-autocomplete, #tagVideoModal .ui-autocomplete, #tagit-selection .ui-autocomplete, #usertagsWrap .ui-autocomplete, #keywordtagsWrap .ui-autocomplete {left:0px !important;width:100% !important;box-sizing:border-box !important;margin-top:6px;border-top:none;border-radius:0px;border-color:#ddd;z-index:999;} #search-form .ui-autocomplete, #tagVideoModal .ui-autocomplete, #usertagsWrap .ui-autocomplete, #keywordtagsWrap .ui-autocomplete {width:100% !important; top:0px !important;} #search-form .ui-autocomplete, #tagVideoModal .ui-autocomplete, #usertagsWrap .ui-autocomplete, #keywordtagsWrap .ui-autocomplete {margin-top:28px;} #search-form .ui-autocomplete .ui-menu-item, #tagVideoModal .ui-autocomplete .ui-menu-item, #tagit-selection .ui-autocomplete .ui-menu-item, #usertagsWrap .ui-autocomplete .ui-menu-item, #keywordtagsWrap .ui-autocomplete .ui-menu-item {border:none;border-radius:0px;margin:0px;} #search-form .ui-autocomplete .ui-menu-item .ui-state-focus, #tagVideoModal .ui-autocomplete .ui-menu-item .ui-state-focus, #tagit-selection .ui-autocomplete .ui-menu-item .ui-state-focus, #usertagsWrap .ui-autocomplete .ui-menu-item .ui-state-focus, #keywordtagsWrap .ui-autocomplete .ui-menu-item .ui-state-focus {background:none; background-color: #ccc;border:none;border-radius:0px;margin:0px;} #usertagsWrap, #keywordtagsWrap {position:relative;} #usertagsWrap input, #keywordtagsWrap input {box-sizing:border-box !important;} input.listTags { width:auto !important; } #usertagsWrap .tag-editor input, #keywordtagsWrap .tag-editor input, #usertagsWrap .tag-editor .placeholder, #keywordtagsWrap .tag-editor .placeholder {font-size:12px;} #usertagsWrap .tag-editor input {min-width:110px;} #keywordtagsWrap .tag-editor input {min-width:90px;} .tagtip {padding-top:10px !important;} .tagtip .jBox-content {font-size:12px;padding:3px 8px;} /* comments styling */ .commentTipModal {width:480px;max-width:calc(100vw - 10px);} .comments-photo-description { padding:15px; font-size:12px; } .comments-list-ul { padding:0px; margin:0px;overflow:auto;display:block;width:100%; } .comments-list-ul .mCustomScrollBox, .comments-list-ul li {background-color:#eee;} .comments-list-ul li { font-size:12px;list-style:none; padding:0px 8px; margin:0px;border-bottom:1px solid #fff;color: #000; } .comment-entry-ul li, .likes-ul li {background-color:#ddd;} .comments-list-ul li .left { float:left; margin:0px; } .comments-list-ul li .left img { width: 32px; height:32px; } .comments-list-ul li .commenttext { margin-left:40px; line-height:15px; } .comments-items-ul li { padding: 4px 8px; position:relative; } .comments-items-ul li div.remove {position:absolute;top:5px;right:5px; line-height:normal; display:none;} .comments-items-ul li div.remove i {cursor:pointer; color:#b94a48; font-size:16px} .likes-ul li { background-image:url(../images/thumbs-up.png); background-repeat:no-repeat; background-position:10px 5px; padding:4px 0px 4px 34px; font-size:12px; } .comment-entry-ul { position:relative; bottom:0px; overflow:hidden; } .comment-entry-ul li { margin-top:0px; padding:4px 8px; border-top:1px solid #fff; } .comment-textarea {width:100%;font-size:12px;margin:0px;box-sizing:border-box !important;} /*avatar tip*/ .avatar_tip_popup {width: 320px;} .avatar_tip_popup .avatar_tip_popup-left {float:left; margin-right:8px;text-align:center;width:68px} .avatar_tip_popup .avatar_tip_popup-left img {border:1px solid #ddd;border-radius:5px;width:100%;height:auto;} .avatar_tip_popup .avatar_tip_popup-right {overflow:hidden; vertical-align:top;} .avatar_tip_popup .avatar_tip_popup-bottom {background-color:#eee;text-align:right;padding:5px 8px;border-radius:5px;margin-top:8px;} .avatar_tip_popup .avatar_tip_popup-right div {line-height:14px;font-size:12px;} .avatar_tip_popup .avatar_tip_popup-right .albl {line-height:32px;font-size:20px;font-weight:bold;} .avatar_tip_popup .avatar_tip_popup-right .blbl {font-size:14px;margin-top:4px;padding-top:4px;border-top:1px solid #6e6e6e;}