/* NEW EMBED */ .cGalleryEmbed a { display: block; } ..cGalleryEmbed_albumStrip { white-space: nowrap; } .cGalleryEmbed_albumStrip li { width: 20%; min-width: 40px; float: left; position: relative; } .cGalleryEmbed_albumStrip_mini li { width: 10%; min-width: 40px; } .cGalleryEmbed_albumStrip li:after { content: ''; display: block; padding-bottom: 100%; } .cGalleryEmbed_albumStrip li a { background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 0; left: 0; right: 1px; bottom: 1px; line-height: 90px; font-size: 20px; text-align: center; color: #000; display: block; } .cGalleryEmbed_albumStrip_mini li a { line-height: 48px; font-size: 15px; } .cGalleryEmbed_albumStrip li a span { opacity: 0.3; } .cGalleryEmbed_albumStrip:not( .cGalleryEmbed_albumStrip_mini ) { margin: -30px 7px 0; border: 1px solid rgba(0,0,0,0.05); } .ipsRichEmbed_mastheadBg.cGalleryEmbed_imageComment a { height: 220px; } /* OLD EMBED */ .ipsEmbedded .cGalleryTrimmedImage { background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .ipsEmbedded .cGalleryTrimmedImage img { display: none; } .ipsEmbedded .cGalleryTrimmedImage a { width: 120px; height: 120px; display: block; } .ipsEmbedded .cGallery_albumImages { margin-top: 5px; } .ipsEmbedded .cGallery_albumImage a { width: 40px; height: 40px; border: 2px solid #fff; } .ipsEmbedded .cGallery_albumStats { color: #fff; font-weight: bold; position: absolute; bottom: 5px; text-shadow: 0px 1px 0px rgba(0,0,0,0.5); } html[dir="ltr"] .ipsEmbedded .cGallery_albumStats { right: 5px; } html[dir="rtl"] .ipsEmbedded .cGallery_albumStats { left: 5px; } ul { height: 134px; } html[dir="ltr"] .cGalleryAlbums_recent > ul { padding-left: 138px; } html[dir="rtl"] .cGalleryAlbums_recent > ul { padding-right: 138px; } .cGalleryAlbums_recent > ul > li:first-child, .cGalleryAlbums_recent > ul > li:first-child a { width: 134px; height: 134px; } .cGalleryAlbums_recent > ul > li, .cGalleryAlbums_recent > ul > li a { width: 65px; height: 65px; } /* IMAGE VIEW */ #elGalleryHeader { margin: -10px -10px 0 -10px; } .cGalleryAlbumSlider_wrapper { width: 265px; } .cGalleryAlbumSlider li { width: 38px; height: 38px; } #elGalleryNav a[data-action] { font-size: 30px; position: relative; top: -5px; } body[data-pageapp="gallery"][data-pagecontroller="view"] .cWidgetContainer:not( .ipsHide ) + div #elGalleryHeader { margin-top: 10px; } .ipsStreamItem_condensed.ipsStreamItem.ipsStreamItem_contentBlock.cGalleryAlbumSearchResult { padding-bottom: 40px; } .cGalleryRowsList .ipsThumb.ipsThumb_medium.ipsThumb_bg { max-width: 100%; width: 100%; margin-bottom: 7px; } html[dir="ltr"] .cGalleryRowsList .ipsDataItem_main { padding-left: 0; } html[dir="rtl"] .cGalleryRowsList .ipsDataItem_main { padding-right: 0; } html[dir="ltr"] .cGalleryRowsList .ipsDataItem_modCheck { right: 10px; left: auto; top: 150px; } html[dir="rtl"] .cGalleryRowsList .ipsDataItem_modCheck { left: 10px; right: auto; top: 150px; } }]]> ul > li { margin: 0; } #elGalleryNav a[data-action] { width: 17px; text-align: center; line-height: 50px; font-size: 28px; color: #fff; {prefix="transition" value="0.1s all linear"} } #elGalleryNav a[data-action][data-disabled] { cursor: default; opacity: 0.2; } .cGalleryAlbumSlider .ipsAreaBackground { background: rgba(0,0,0,0.2); } .cGalleryMiniAlbum li { position: relative; } .cGalleryMiniAlbum li a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #elGalleryImageStats [data-ipsRating] > .ipsRating { float: none; } #elGalleryImageNav a { position: absolute; color: #fff; font-size: 60px; top: 50%; margin-top: -30px; padding: 0 15px; } html[dir="ltr"] #elGalleryImageNav_prev { left: 0px; } html[dir="rtl"] #elGalleryImageNav_prev { right: 0px; } html[dir="ltr"] #elGalleryImageNav_next { right: 0px; } html[dir="rtl"] #elGalleryImageNav_next { left: 0px; } /* PATCHWORK */ .cGalleryPatchwork_item { display: block; float: left; background-size: cover; background-color: #333; position: relative; overflow: hidden; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); text-align: left; transition: 0.1s transform ease-in-out; } html[dir="rtl"] .cGalleryPatchwork_item { float: right; text-align: right; } .cGalleryPatchwork_item > a { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; } .cGalleryPatchwork_item [data-role='moderation'] { position: absolute; top: 5px; } html[dir="ltr"] .cGalleryPatchwork_item [data-role='moderation'] { right: 5px; } html[dir="rtl"] .cGalleryPatchwork_item [data-role='moderation'] { left: 5px; } .cGalleryPatchwork_item [data-commentCount='0'] { opacity: 0.3; } .cGalleryPatchwork_item.ipsNoThumb { text-shadow: none; } .cGalleryPatchwork_image { position: absolute; top: 0; width: 100%; height: 100%; } html[dir="ltr"] .cGalleryPatchwork_image { left: 0; } html[dir="ltr"] .cGalleryPatchwork_image { right: 0; } .cGalleryPatchwork_item .ipsPhotoPanel { position: absolute; background: rgba(0,0,0,0.8); width: 100%; top: 0; line-height: 1.2; height: 42px; color: #fff; {prefix="transition" value="opacity 0.1s linear"} } html[dir="ltr"] .cGalleryPatchwork_item .ipsPhotoPanel { left: 0; padding: 7px 7px 0 7px; } html[dir="rtl"] .cGalleryPatchwork_item .ipsPhotoPanel { right: 0; padding: 7px 7px 0 7px; } .cGalleryPatchwork_item .ipsPhotoPanel span { line-height: inherit; display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; } .cGalleryPatchwork_item .ipsPhotoPanel span + span { opacity: 0.7; } .cGalleryPatchwork_item:hover { transform: scale(1.05); z-index: 2000; } /* Image list patchwork */ .cGalleryPatchwork_list .cGalleryPatchwork_stats { position: absolute; bottom: 0; left: 0; right: 0; font-size: 13px; color: #fff; padding: 7px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); } /* Featured/New patchwork */ ol.cGalleryPatchwork_index.ipsPad, ol.cGalleryPatchwork_list.ipsPad { padding-top: 11px; padding-bottom: 11px; } .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { position: absolute; bottom: 7px; color: #fff; font-size: 12px; } html[dir="ltr"] .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { right: 7px; } html[dir="rtl"] .cGalleryPatchwork_index .cGalleryPatchwork_item .cGalleryPatchwork_comments { left: 7px; } /* CATEGORIES */ .cGalleryCats > .ipsGrid { margin-bottom: -15px; } .cGalleryCat > a { display: block; height: 150px; position: relative; color: #fff; } .cGalleryCat > a:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 53px; background: rgba(0,0,0,0.8); } .cGalleryCat .ipsType_sectionHead, .cGalleryCat .cGalleryCat_info { position: absolute; left: 7px; right: 7px; text-shadow: 1px 1px 1px rgba(0,0,0,1); } .cGalleryCat .cGalleryCat_info > li:first-child { position: absolute; top: 0; } .cGalleryCat .ipsType_sectionHead { bottom: 23px; color: #fff; font-size: 15px; } .cGalleryCat .cGalleryCat_info { bottom: 7px; font-size: 11px; } /* ALBUM LIST IN A CATEGORY */ .cGalleryAlbums > li:not( :last-child ) { margin-bottom: 7px; } .cGalleryAlbums_recent > ul { height: 204px; position: relative; overflow: hidden; } html[dir="ltr"] .cGalleryAlbums_recent > ul { padding-left: 208px; } html[dir="rtl"] .cGalleryAlbums_recent > ul { padding-right: 208px; } .cGalleryAlbums_recent > ul > li { width: 100px; height: 100px; float: left; position: relative; margin: 0 0 4px 4px; } html[dir="rtl"] .cGalleryAlbums_recent > ul > li { float: right; margin: 0 4px 4px 0; } .cGalleryAlbums_recent > ul > li a { display: block; width: 100px; height: 100px; } .cGalleryAlbums_recent > ul > li span { padding-right: 7px; text-align: right; font-size: 11px; font-weight: bold; color: #fff; position: absolute; left: 0; right: 0; bottom: 0; line-height: 26px; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); } html[dir="rtl"] .cGalleryAlbums_recent > ul > li span { text-align: left; } .cGalleryAlbums_recent > ul > li img { display: none; } .cGalleryAlbums_recent > ul > li:first-child { width: 204px; height: 204px; overflow: hidden; position: absolute; } html[dir="ltr"] .cGalleryAlbums_recent > ul > li:first-child { left: 0; } html[dir="rtl"] .cGalleryAlbums_recent > ul > li:first-child { right: 0; } .cGalleryAlbums_recent > ul > li:first-child a { width: 204px; height: 204px; } html[dir="ltr"] .cGalleryEvents .ipsDataList .ipsDataItem, html[dir="ltr"] .cGalleryEvents .ipsDataList .ipsDataItem_icon { padding-left: 0 !important; } html[dir="rtl"] .cGalleryEvents .ipsDataList .ipsDataItem, html[dir="rtl"] .cGalleryEvents .ipsDataList .ipsDataItem_icon { padding-right: 0 !important; } .cGalleryImageList > li { padding: 7px; border: 1px solid rgba(0,0,0,0.05); } .cGalleryImageList > li > div { width: 100%; margin-bottom: 5px; } /* For non-js, we need a fixed height because the JS won't be handling it */ .ipsJS_none .cGalleryImageList > li > div { height: 180px; } .cGalleryImageList > li > div + ul { height: 26px; line-height: 24px; } .cGalleryImageItem.cGalleryImageItem_selected { background-color: {theme="selected"}; } .cGalleryImageItem_image { display: block; position: relative; max-width: 100%; height: 100%; } .cGalleryLargeList > li { margin-bottom: 15px; border: 1px solid rgba(0,0,0,0.05); } .cGalleryLargeList > li img { display: block; margin: 0 auto 10px auto; } /* IMAGE VIEW PAGE */ .cGalleryViewImage { /* Needed for FF & IE */ display: inline-block; /*table-layout: fixed; width: 100%; min-height: 100%;*/ /* -- */ position: relative; margin-bottom: 5px; } .cGalleryViewImage_controls { position: absolute; top: 15px; opacity: 0; {prefix="transition" value="0.3s all linear"} } html[dir="ltr"] .cGalleryViewImage_controls { right: 15px; } html[dir="rtl"] .cGalleryViewImage_controls { left: 15px; } #elGalleryImage:hover .cGalleryViewImage_controls { opacity: 1; } .cGalleryViewImage_options { margin-bottom: 5px; } .cGalleryExif .fa-camera { font-size: 42px; line-height: 58px; } .cGalleryExif_data { margin: 5px 0; } .cGalleryExif_data li { border: 2px solid #5d5d5d; border-radius: 5px; line-height: 20px; height: 24px; font-size: 12px; font-weight: bold; margin: 4px 2px; } html[dir="ltr"] .cGalleryExif_data li { padding-right: 6px; } html[dir="rtl"] .cGalleryExif_data li { padding-left: 6px; } .cGalleryExif_data li span { background: #5d5d5d; color: #fff; width: 30px; font-size: 15px; display: inline-block; text-align: center; } html[dir="ltr"] .cGalleryExif_data li span { float: left; padding: 0 8px 0 6px; margin-right: 6px; } html[dir="rtl"] .cGalleryExif_data li span { float: right; padding: 0 6px 0 8px; margin-left: 6px; } .cGalleryExif .cGalleryExif_f { font-family: 'Palatino', 'Times New Roman'; font-style: italic; font-weight: bold; } .cGalleryExif .cGalleryExif_iso { font-size: 11px; padding: 0; } /* IMAGE SIZES */ #elGalleryImage_sized { margin: 15px 0; background: #333333; padding: 15px; text-align: center; } /* NOTES */ .cGalleryViewImage_addNote { cursor: crosshair; } .cGalleryViewImage:hover .cGalleryNote { opacity: 1; } .cGalleryNote { position: absolute; opacity: 0; } .cGalleryNote_border { border: 1px solid #000; height: 100%; background: rgba(255,255,255,0.0001); } .cGalleryNote_border:after { position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; content: ''; display: block; border: 1px solid #ccc; } .cGalleryNote_editing .cGalleryNote_border, .cGalleryNote_editing .cGalleryNote_border:after { border-style: dashed; opacity: 1; } .cGalleryNote_editing { opacity: 1 !important; } .cGalleryNote_editing .cGalleryNote_note { opacity: 1 !important; display: block !important; max-width: 220px; width: 220px; padding: 4px; pointer-events: auto; z-index: 1000; } .cGalleryNote_editing .cGalleryNote_note ul { text-align: left; margin-top: 5px; } html[dir="rtl"] .cGalleryNote_editing .cGalleryNote_note ul { text-align: right; } .cGalleryNote_editing .cGalleryNote_note a { color: #fff; } .cGalleryNote_editing .cGalleryNote_note textarea { font-size: 11px; color: #000; } .cGalleryNote_note { max-width: 200px; padding: 4px 10px; position: absolute; top: 100%; margin-top: 5px; background: #2a2a2a; color: #fff; font-size: 12px; border-radius: 2px; pointer-events: none; } html[dir="ltr"] .cGalleryNote_note { left: 0px; } html[dir="rtl"] .cGalleryNote_note { right: 0px; } .cGalleryNote_delete { position: absolute; top: -10px; width: 24px; height: 24px; line-height: 19px; border-radius: 12px; background: #000; border: 1px solid #fff; color: #fff; font-size: 17px; } html[dir="ltr"] .cGalleryNote_delete { right: -10px; } html[dir="rtl"] .cGalleryNote_delete { left: -10px; } /* jQuery resizable styles */ .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-icon-gripsmall-diagonal-se { background: url( "{resource="resizable.png" app="core" location="global"}" ); } .ui-draggable { cursor: move;} /* General style which creates the square thumb container */ .cGalleryTrimmedImage { background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cGalleryTrimmedImage img { display: none; } .cGalleryThumb { max-width: 170px; max-height: 170px; } /* This is to make the video responsive in size See: http://3strandsmarketing.com/video-fluid-2.php */ .cGallery_videoContainer { position: relative; height: 100%; } .cGallery_videoContainer .video-js { position: absolute; top: 0; width: 100%; height: 100%; } html[dir="ltr"] .cGallery_videoContainer .video-js { left: 0; } html[dir="rtl"] .cGallery_videoContainer .video-js { right: 0; } .cGalleryAlbumSearchResult { overflow: hidden; } ul.cGallerySearchAlbumThumbs.ipsList_inline, ul.cGalleryManagedAlbumThumbs.ipsList_inline { position: absolute; bottom: 10px; } ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline, ul.cGalleryManagedAlbumThumbs.cGallerySearchExpanded.ipsList_inline { position: inherit; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-left: 85px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.ipsList_inline { margin-right: 85px; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline { margin-left: 30px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.cGallerySearchExpanded.ipsList_inline { margin-right: 30px; } html[dir="ltr"] ul.cGallerySearchAlbumThumbs.ipsList_inline > li, html[dir="ltr"] ul.cGalleryManagedAlbumThumbs.ipsList_inline > li { margin-right: 4px; } html[dir="rtl"] ul.cGallerySearchAlbumThumbs.ipsList_inline > li, html[dir="rtl"] ul.cGalleryManagedAlbumThumbs.ipsList_inline > li { margin-left: 4px; } ul.cGallerySearchAlbumThumbs li span, ul.cGalleryManagedAlbumThumbs li span { max-width: 25px; max-height: 25px; } ]]> div { width: 100%; height: 100%; margin: 0 auto; border: 1px solid rgba(0,0,0,0.05); } .cProfileAlbum_image { display: block; position: relative; max-width: 100%; height: 100%; background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cProfileAlbum_image img { display: none; } .cProfileAlbum .ipsType_sectionHead { font-size: 14px; text-align: left; display: block; padding: 7px; overflow: hidden; text-overflow: ellipsis; top: 0px; background: rgba(0,0,0,0.5); color: #fff; } ]]> li:not( .cGallerySteps_active ), .cGallerySteps > li span:before, .cGallerySteps > li span:after, .cGallerySteps > li a:before, .cGallerySteps > li a:after { display: none; } .cGallerySteps > li:before { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 32px; vertical-align: middle; font-size: 18px; margin-right: 5px; margin-bottom: 0; } .cGalleryDialog_header { height: 65px; } .ipsDialog_content .cGalleryDialog_content { top: 65px; } /* Step 1: Choose album */ .cGallerySubmit_albumChoice { margin-top: 0; } .cGallerySubmit_albumChoice > .ipsGrid_span6:first-child { margin-bottom: 30px; } #elGallerySubmit_albumChooser { min-height: none; } /* Step 2: Upload images */ .cGallerySubmit_uploadImages .cGallerySubmit_bottomBar { height: 60px; } /* Info panel */ .cGallerySubmit_strip, .cGallerySubmit_infoForm, .cGallerySubmit_bottomBar, .cGallerySubmit_infoPanel { position: absolute; } html[dir] .cGallerySubmit_strip { top: 0; left: 0; right: 0; width: auto; height: 100px; white-space: nowrap; overflow-y: hidden; } .cGallerySubmit_strip ul { white-space: nowrap; overflow: visible; } .cGallerySubmit_strip li { white-space: nowrap; margin-bottom: 0; margin-right: 15px; display: inline-block; } .cGallerySubmit_strip .cGalleryTrimmedImage { width: 70px; height: 70px; border-width: 3px; } .cGallerySubmit_strip .cGalleryTrimmedImage a { width: 70px; height: 70px; } .cGallerySubmit_strip .cGallerySubmit_current:after { display: none; } html[dir] .cGallerySubmit_infoForm { position: absolute; top: 100px; bottom: 0; left: 0; right: 0; padding-left: 20px; padding-right: 20px; } /* Bottom bar of the image info step */ .cGallerySubmit_bottomBar { height: 115px; } #elGallerySubmit_bottomBar > ul { display: block; } /* Reset all items so they're blocks */ #elGallerySubmit_bottomBar > ul > li { display: block; margin: 0; } /* Make buttons a bit smaller */ #elGallerySubmit_bottomBar > ul > li .ipsButton { width: 100%; line-height: 32px; font-size: 12px; } /* Copyright/credit buttons - half-width so they share a line */ #elGallerySubmit_bottomBar > ul > li:first-child, #elGallerySubmit_bottomBar > ul > li:first-child + li { width: 48%; } #elGallerySubmit_bottomBar > ul > li:first-child { float: left; /* Copyright - move left */ } #elGallerySubmit_bottomBar > ul > li:first-child + li { float: right; /* Credit - move right */ } /* Notify option - add padding */ #elGallerySubmit_bottomBar > ul > li:first-child + li + li { clear: both; padding: 7px 0; } /* Notify option - make toggle a bit smaller (and the text) */ #elGallerySubmit_bottomBar > ul > li:first-child + li + li .ipsToggle { zoom: 0.8; } #elGallerySubmit_bottomBar > ul > li:first-child + li + li label { font-size: 12px; } /* Main submit button */ #elGallerySubmit_bottomBar > ul > li:last-child { float: none; } .ipsApp button.cGallerySubmit_button { position: static; } .ipsApp button.cGallerySubmit_button.cGallerySubmit_prevButton { float: left; } .ipsApp button.cGallerySubmit_button.cGallerySubmit_nextButton { float: right; } }]]> li { display: table-cell; width: 1%; text-align: center; position: relative; margin-top: 35px; } .cGallerySteps > li:before { content: attr( data-step ); font-size: 22px; font-weight: 300; display: block; width: 42px; height: 42px; line-height: 42px; border-radius: 42px; text-align: center; color: #fff; background: #b4b4b4; margin: 0 auto 5px auto; z-index: 2000; position: relative; } .cGallerySteps > li span, .cGallerySteps > li a { font-size: 14px; color: #b4b4b4; } .cGallerySteps > li span:before, .cGallerySteps > li span:after, .cGallerySteps > li a:before, .cGallerySteps > li a:after { content: ''; display: block; height: 6px; background: #b4b4b4; position: absolute; top: 19px; width: 50%; } html[dir="ltr"] .cGallerySteps > li span:before, html[dir="ltr"] .cGallerySteps > li a:before, html[dir="rtl"] .cGallerySteps > li span:after, html[dir="rtl"] .cGallerySteps > li a:after { left: 0; } .cGallerySteps > li:first-child span:before, .cGallerySteps > li:first-child a:before, .cGallerySteps > li:last-child span:after, .cGallerySteps > li:last-child a:after { display: none; } html[dir="rtl"] .cGallerySteps > li span:before, html[dir="rtl"] .cGallerySteps > li a:before, html[dir="ltr"] .cGallerySteps > li span:after, html[dir="ltr"] .cGallerySteps > li a:after { right: 0; } /* Done steps */ .cGallerySteps > li.cGallerySteps_done:before { background: {theme="step_background"}; font-family: 'FontAwesome'; content: '\f00c'; } .cGallerySteps > li.cGallerySteps_done span:after, .cGallerySteps > li.cGallerySteps_done + li span:before, .cGallerySteps > li.cGallerySteps_done a:after, .cGallerySteps > li.cGallerySteps_done + li a:before, .cGallerySteps > li.cGallerySteps_active:before { background: {theme="step_background"}; } .cGallerySteps > li.cGallerySteps_active span, .cGallerySteps > li.cGallerySteps_active a { font-weight: bold; } .cGallerySteps > li.cGallerySteps_done span, .cGallerySteps > li.cGallerySteps_active span, .cGallerySteps > li.cGallerySteps_done a, .cGallerySteps > li.cGallerySteps_active a { color: #222; } /* Step 1: Choose album */ .cGallerySubmit_albumChoice { max-width: 1100px; margin: 20px auto 0; } .cGallerySubmit_albumChoice .ipsSelectTree { margin: 0 auto; } #elGallerySubmit_albumChooser { min-height: 200px; max-height: 200px; overflow: auto; } html[dir="ltr"] #elGallerySubmit_albumChooser { padding-right: 15px; } html[dir="rtl"] #elGallerySubmit_albumChooser { padding-left: 15px; } #elGallerySubmit_albumChooser > li > div { position: relative; border: 1px solid rgba(0,0,0,0.1); border-radius: 3px; margin-bottom: 7px; } #elGallerySubmit_albumChooser > li > div ul.ipsType_medium { line-height: 1; } #elGallerySubmit_albumChooser > li > div:hover { background: #e4eff7; cursor: pointer; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div { background: #5490c0; color: #fff; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { content: '\f00c'; font-family: "FontAwesome"; font-size: 36px; position: absolute; top: 17px; opacity: 0.6; color: #fff; } html[dir="ltr"] #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { right: 17px; } html[dir="rtl"] #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div:before { left: 17px; } #elGallerySubmit_albumChooser > li > input[type="radio"]:checked + div .ipsType_light { color: #fff; opacity: 0.7; } .cGallerySubmit_albumImage { width: 40px; height: 40px; background-color: rgba(0,0,0,0.3); } html[dir="ltr"] .cGallerySubmit_albumImage { float: left; } html[dir="rtl"] .cGallerySubmit_albumImage { float: right; } html[dir="ltr"] .cGallerySubmit_albumInfo { margin-left: 47px; } html[dir="rtl"] .cGallerySubmit_albumInfo { margin-right: 47px; } .cGallerySubmit_chooseCategory { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; } /* Step 2: Upload files */ .cGallerySubmit_uploadImages { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .cGallerySubmit_uploadForm { position: absolute; top: 0; bottom: 75px; left: 0; right: 0; overflow: auto; } .cGallerySubmit_uploadImages > form { height: 100%; } .cGallerySubmit_uploadImages .ipsAttachment_dropZone { border-width: 6px; border-style: dashed; {prefix="transition" value="none"} } .cGallerySubmit_uploadImages .ipsAttachment_dropZone:not( .ipsDragging ) { background: transparent; border-color: #e0e0e0; } /* Positioning required to make the dialog full screen */ .cGalleryDialog_content { position: relative; height: 600px; } /* But if we're in a dialog, change the styles to make everything faaaancy */ .ipsDialog_content .cGalleryDialog_content { position: absolute; top: 100px; bottom: 0; left: 0; right: 0; height: auto; } .ipsDialog_content .cGalleryDialog_content.cGalleryDialog_content_moderated { top: 150px; } .cGallerySubmit_uploadImages > form > .ipsGrid { position: absolute; top: 30px; left: 30px; bottom: 70px; right: 30px; } /* Step 3: Image info */ .cGallerySubmit_strip, .cGallerySubmit_infoForm, .cGallerySubmit_bottomBar, .cGallerySubmit_infoPanel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .cGallerySubmit_strip { width: 250px; overflow: auto; background: #212223; } html[dir="ltr"] .cGallerySubmit_strip { right: auto; } html[dir="rtl"] .cGallerySubmit_strip { left: auto; } .cGallerySubmit_infoForm { overflow: auto; padding-left: 60px; padding-right: 60px; } html[dir="ltr"] .cGallerySubmit_infoForm { left: 250px; } html[dir="rtl"] .cGallerySubmit_infoForm { right: 250px; } .cGallerySubmit_infoForm > section { max-width: 1000px; margin: 0 auto; } .cGallerySubmit_bottomBar { top: auto; border-top: 1px solid rgba(0,0,0,0.075); height: 75px; } .cGallerySubmit_infoPanel { bottom: 75px; } .cGallerySubmit_strip { text-align: center; } .cGallerySubmit_strip li { display: inline-block; margin-bottom: 30px; position: relative; } .cGallerySubmit_strip li:not( .cGallerySubmit_current ) :hover { border-color: rgba(0,0,0,0.4); } .cGallerySubmit_strip .cGalleryTrimmedImage { width: 150px; height: 150px; margin: 0 auto; border: 5px solid transparent; background-color: #333; background-size: cover; background-position: 50%; background-repeat: no-repeat; overflow: hidden; } .cGallerySubmit_strip .cGalleryTrimmedImage a { width: 150px; height: 150px; display: block; } .cGallerySubmit_strip .cGalleryTrimmedImage img { display: none; } .cGallerySubmit_strip .cGallerySubmit_current .cGalleryTrimmedImage { border-color: #5490c0; } .cGallerySubmit_strip .cGallerySubmit_current:after { content: ''; display: block; width: 0; height: 0; border-width: 20px; border-style: solid; position: absolute; top: 50%; margin-top: -20px; } html[dir="ltr"] .cGallerySubmit_strip .cGallerySubmit_current:after { border-color: transparent transparent transparent #5490c0; left: 100%; } html[dir="rtl"] .cGallerySubmit_strip .cGallerySubmit_current:after { border-color: transparent #5490c0 transparent transparent; right: 100%; } .cGallerySubmit_done:not( .cGallerySubmit_current ) > div { opacity: 0.6; } .cGallerySubmit_done:before { display: block; content: "\f00c"; font-family: "FontAwesome"; border: 1px solid rgba(255,255,255,0.6); text-align: center; line-height: 30px; width: 30px; height: 30px; border-radius: 30px; color: #fff; position: absolute; top: -5px; box-shadow: 0px 1px 0px rgba(0,0,0,0.6); background: #5a895c; z-index: 200; } html[dir="ltr"] .cGallerySubmit_done:before { right: -5px; } html[dir="rtl"] .cGallerySubmit_done:before { left: -5px; } .ipsApp button.cGallerySubmit_button { font-size: 66px; background: transparent; color: #555; opacity: 0.4; text-align: center; position: absolute; top: 50%; margin-top: -20px; border: 0; height: 150px; /* Make the clickable area bigger for ease */ width: 60px; outline: 0; } html[dir="ltr"] .ipsApp button.cGallerySubmit_nextButton, html[dir="rtl"] .ipsApp button.cGallerySubmit_prevButton { right: 15px; text-align: right; } html[dir="rtl"] .ipsApp button.cGallerySubmit_nextButton, html[dir="ltr"] .ipsApp button.cGallerySubmit_prevButton { left: 15px; text-align: left; } .ipsApp button.cGallerySubmit_button:hover { opacity: 1; }]]> div:first-child { margin-bottom: 5px; background: #fff; } .ipsWidget.ipsWidget_vertical .cGalleryWidget .ipsImage { max-height: 175px; } .ipsWidget.ipsWidget_horizontal .cGalleryWidget .ipsImage { max-height: 145px; margin-bottom: 5px; } .cGalleryWidget .ipsNoThumb { display: block; } .cGalleryWidget_verticalThumb { height: 100px; } .cGalleryWidgetList > li { border-bottom: 1px solid #ebebeb; padding-bottom: 10px; margin-bottom: 10px; } .cGalleryWidgetList > li:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; } .cGalleryWidget_comments { position: absolute; top: 150px; color: #fff; } html[dir="ltr"] .cGalleryWidget_comments { right: 10px; } html[dir="rtl"] .cGalleryWidget_comments { left: 10px; } .cGalleryWidget_comments.ipsFaded { opacity: 0.7; } .cGalleryWidgetList .cGalleryWidget_comments { top: 75px; }]]>