/** Theme Name: Peafowl Theme URL: http://chevereto.com/ Version: 3 Author: Rodolfo Berrios @Chevereto: 3.8.13 @requires peafowl.css */ /* * LAYOUT * --------------------------------------------- */ body { padding-top: 65px; padding-bottom: 20px; min-height: 100%; background: #FEFEFE; position: relative; } body.landing { min-height: 500px; height: 100%; padding: 0; margin: 0; } .phone body.landing { min-height: auto; } .js body.landing { overflow: hidden; opacity: 0; transform: scale(1.1); } .js body.landing.load { -webkit-transition: -webkit-transform 400ms ease, opacity 350ms linear; transition: transform 400ms ease, opacity 350ms linear; opacity: 1; transform: scale(1); } .js body.landing.loaded { overflow: auto; } body.split { margin-top: 0; padding-top: 0; } .fluid .content-width, .content-width.fluid { width: 100%; /*max-width: 1620px;*/ } @media (min-width: 992px) { .content-width.wide { max-width: none; } } /* * IMAGE VIEWER * --------------------------------------------- */ .image-viewer { text-align: center; background: #F7F7F7; position: relative; min-height: 72px; overflow: hidden; } .image-viewer-main { display: inline-block; vertical-align: middle; } .image-viewer-container { display: block; margin: 0 auto; position: relative; } .image-viewer-container img { display: block; margin: 0 auto; max-height: 100%; width: auto; } .js .image-viewer-container img { position: absolute; /*background: #000;*/ width: 100%; height: auto; } .image-viewer .btn-download { position: absolute; top: 20px; right: 20px; z-index: 1; } .image-viewer-navigation {} .image-viewer-navigation a { z-index: 3; } .image-viewer-navigation a:hover { background-color: #AAA; background-color: rgba(0,0,0,.3); } #image-viewer-loading { width: 30px; height: 30px; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -15px; border-radius: 100%; background: rgba(17,17,17,.9); } #image-viewer-loader { position: absolute; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.7); color: rgba(255,255,255,.9); font-size: 13px; left: 50%; top: 50%; padding: 8px 14px; border-radius: 100px; transform: translate(-50%, -50%); cursor: pointer; display: none; } #image-viewer-loader:hover { background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.8); color: #FFF; } #image-viewer-loader .btn-icon { position: relative; top: 1px; font-size: 12px; } .image-viewer.full-viewer, #image .top-bar-placeholder { background: #111; } .top-bar-white .image-viewer.full-viewer, .top-bar-white #image .top-bar-placeholder { background: #FFF; } /* * LIKE BUTTON * -- */ .btn-like {} .btn-like .btn.btn-liked, .btn-like .btn.btn-unliked { display: none; } .btn-like[data-liked="0"] .btn-unliked { display: inline-block; } .btn-like[data-liked="1"] .btn-liked { display: inline-block; } /* * FOLLOW BUTTON * -- */ .btn-follow {} .btn-follow .btn.btn-followed, .btn-follow .btn.btn-unfollowed { display: none; } .btn-follow[data-followed="0"] .btn-unfollowed { display: inline-block; } .btn-follow[data-followed="1"] .btn-followed { display: inline-block; } /* * UPLOAD BOX * --------------------------------------------- */ #fullscreen-uploader-mask { z-index: 99; } .phone #fullscreen-uploader-mask { z-index: 400; } #anywhere-upload { z-index: 100; scroll: auto; -webkit-overflow-scrolling: touch; -webkit-transition: transform 250ms ease; transition: transform 250ms ease; } #anywhere-upload.hidden-visibility {} #anywhere-upload.hidden-visibility iframe { /* example: adsense */ visibility: hidden; } .phone #anywhere-upload { z-index: 500; } #anywhere-upload-paste { height: 0; opacity: 0; font-size: 0; } #anywhere-upload-paste * { display: none; } .upload-box { border-bottom: 0; } .upload-box-queue { text-align: center; /*width: 960px; /* nota: setear por js */ font-size: 0; margin-top: 40px; margin-bottom: 30px; /* thumbs add 10 */ } .upload-box-queue li { position: relative; text-align: center; display: inline-block; background: red; margin-right: 10px; margin-bottom: 10px; background: #EFEFEF; box-shadow: inset 0px 2px 10px 0px rgba(0,0,0,.07); } .tone-dark .upload-box-queue li { background: #222; } .upload-box-queue li, .upload-box-queue .block { border-radius: 0; } .ios .upload-box-queue li, .ios .upload-box-queue .block, .upload-box-queue .block.failed { border-radius: 0; } .upload-box-queue li, .upload-box-queue li.normal { width: 110px; /* 110 -> 77 -> 55 */ height: 110px; font-size: 14px; font-size: 1rem; } .upload-box-queue li.small { width: 77px; height: 77px; font-size: 9px; font-size: 0.643rem; } .upload-box-queue li.tiny { width: 54px; height: 54px; font-size: 7px; font-size: 0.5rem; } .upload-box-queue .block { width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; position: absolute; } .upload-box-queue a.image-link { display: none; } .upload-box-queue .completed a.image-link { display: block; position: absolute; overflow: hidden; z-index: 1; -webkit-transform: rotate(0.000001deg); /* workraround for webkit rounded:hover:overflow issue */ } .upload-box-queue .queue-item .queue-item-button, .upload-box-queue .queue-item .block.edit { display: block; position: absolute; cursor: pointer; z-index: 100; } .upload-box-queue .queue-item.completed:hover .queue-item-button { display: none; } /*.upload-box-queue .hover-display { opacity: 0; transition: opacity 300ms ease; } .upload-box-queue .queue-item:hover .hover-display { opacity: 1; }*/ .upload-box-queue .queue-item .queue-item-button { font-size: 7px; width: 21px; height: 21px; line-height: 23px; background: #FFF; color: #333; border-radius: 200px; left: -7px; box-shadow: 1px 1px 4px 0px rgba(0,0,0,.5); } .tone-dark .upload-box-queue .queue-item .queue-item-button { background: #333; color: #FFF; } .upload-box-queue .queue-item .queue-item-button.cancel { top: -7px; } .upload-box-queue .queue-item .queue-item-button.edit { top: 16px; font-size: 9px; } .upload-box-queue .big-icon { position: absolute; color: #DADADA; font-size: 5.36em; width: 1em; height: 1em; left: 50%; top: 50%; margin-left: -0.5em; margin-top: -0.5em; text-shadow: 1px 1px 0 rgba(255,255,255,.9); } .tone-dark .upload-box-queue .big-icon { color: #444; text-shadow: 1px 1px 0 rgba(0,0,0,.9); } .upload-box-queue .preview, .upload-box-queue .done { position: relative; overflow: hidden; } .upload-box-queue .preview .canvas { position: absolute; top: 50%; left: 50%; } .upload-box-queue .progress { position: absolute; } .upload-box-queue .progress-bar, .upload-box-queue .progress-percent { height: 100%; } .upload-box-queue .uploading .progress-percent { display: block; } .queue-item.uploading.waiting .progress-percent, .queue-item.uploading .queue-item-button.edit, .queue-item.uploading .block.edit { display: none; } .upload-box-queue .progress-percent { font-family: arial, helvetica, sans-serif; font-size: 2.86em; font-weight: normal; color: #FFF; text-shadow: 2px 2px 10px rgba(0,0,0,.8); text-align: center; width: 100%; height: 1em; position: absolute; top: 0.86em; z-index: 1; display: none; } .upload-box-queue .progress-percent b { font-weight: bold; } .upload-box-queue .progress-percent span { font-size: 0.5em; font-weight: normal; position: relative; } .upload-box-queue .progress-bar { float: right; width: 100%; display: none; } .upload-box-queue .progress-bar, .upload-box-queue .failed .result { background: rgba(255,255,255,.65); } .upload-box-queue .uploading .progress-bar { display: block; } .upload-box-queue .completed .result.done, .upload-box-queue .failed .result.failed { display: block; } .upload-box-queue .result { position: absolute; z-index: 1; display: none; } .tone-dark .upload-box-queue .progress-bar, .tone-dark .upload-box-queue .failed .result { background: rgba(0,0,0,.65); } .upload-box-queue .result .icon { position: absolute; width: 1em; font-size: 3.429em; color: #FFF; top: 50%; left: 50%; margin-top: -0.5em; margin-left: -0.5em; margin-left: -0.5em; opacity: 0.92; text-shadow: none; } .upload-box-queue .done .result .icon { text-shadow: 2px 2px 6px rgba(0,0,0,.2); } .upload-box-queue .failed .result .icon { color: #E84C3D; font-size: 3.429em; /* 48 */ } .upload-box-queue.queue-complete .cancel, .upload-box-queue.queue-complete .edit { display: none; } #uploaded-embed-toggle-combo, #form-embed-toggle-combo { position: relative; } /* * USER BACKGROUND COVER * --------------------------------------------- */ #background-cover { height: 290px; background-color: #000; position: relative; } .phone #background-cover { height: 230px; } #background-cover.no-background { background-color: #F2F2F2; background-image: none !important; padding: 9px 0; height: auto; margin-top: 50px; } .tone-dark #background-cover.no-background { background: #101010; } #background-cover-wrap { height: 100%; overflow: hidden; position: relative; } #background-cover .content-width { text-align: center; } #change-background-cover { position: absolute; right: 10px; bottom: 10px; } #user-background-upload { top: 0; left: 0; width: 1px; height: 1px; } #background-cover-src { overflow: hidden; background-position: center center; background-size: cover; } #background-cover-src, #background-cover .loading-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #background-cover .loading-placeholder { background: rgba(0,0,0,.8); } /* * LIST STYLES * --------------------------------------------- */ .list-item.privacy-public .list-item-privacy { display: none; } .list-item-thumbs {} .list-item-thumbs li, .list-item-thumbs li a { display: block; height: auto; overflow: hidden; } .list-item-thumbs li img { width: 100%; display: block; } .input-copy { position: relative; } .input-copy .btn-copy { font-size: 10px; position: absolute; right: 2px; top: 8px; background: #FFF; padding: 0 4px; height: 18px; line-height: 18px; text-transform: uppercase; cursor: pointer; border-width: 0 4px; border-style: solid; border-color: #FFF; display: none; } .input-copy .btn-copy:hover { background: #E5E5E5; } .list-item-image-tools { position: absolute; right: -2.4em; top: 0; opacity: 0; } .list-item:hover .hover-display.list-item-image-tools, .phone .list-item .hover-display.list-item-image-tools, .phablet .list-item .hover-display.list-item-image-tools { right: 0; } .list-item.selected .list-item-image-tools, .list-item.unsafe .list-item-image-tools { opacity: 1; right: 0; display: block; } .list-item.selected .list-item-image-tools li, .list-item.unsafe .list-item-image-tools li { display: none; } .phone .list-item .list-item-image-tools li, .phablet .list-item .list-item-image-tools li { display: block; } .list-item.unsafe:hover .list-item-image-tools li { display: block; } .list-item.selected .list-item-image-tools li.tool-select, .list-item.unsafe .list-item-image-tools li.tool-flag, .list-item.selected:hover .list-item-image-tools li { display: block; } .list-item.selected .list-item-image-tools li.tool-select .icon { color: #FFF; background: #27AE60; } .list-item-image-tools li { margin: 2px; cursor: pointer; position: relative; height: 2.4em; /* 36 */ line-height: 2.4em; font-size: 1em; } .list-item-image-tools li, .list-item-image-tools li * { display: block; color: inherit; } .list-item-image-tools li span { float: right; } .list-item-image-tools li .label { font-size: 0.86em; } .list-item-image-tools li .btn-icon { font-size: 1em; } .list-item-image-tools li .label { text-transform: uppercase; padding-left: 1em; padding-right: 0; display: none; height: 100%; } .list-item-image-tools li:hover .label { display: block; } .small-cols .list-item-image-tools li:hover .label { display: none; } .list-item.unsafe li:hover .label-flag-unsafe, .list-item.safe li:hover .label-flag-safe { display: none; } .unsafe-blur-on .list-item.unsafe .list-item-image .image-container, .unsafe-blur-on .list-item .list-item-thumbs li.unsafe a { filter: blur(5px); -webkit-filter: blur(5px); transform: scale(1.04); } .unsafe-blur-on .list-item.unsafe:hover .list-item-image .image-container, .unsafe-blur-on .list-item:hover .list-item-thumbs li.unsafe a { filter: none; -webkit-filter: none; } .list-item-image-tools li .btn-icon { width: 2.4em; /* 36/15 */ height: 2.4em; line-height: 2.4em; color: #FFF; background: #000; background: rgba(0,0,0,.2); text-align: center; } .list-item-image-tools li:hover .btn-icon, .list-item-image-tools li .label { color: #FFF; background: rgba(0,0,0,.4); } .list-item.selected li.tool-select .btn-icon, .list-item.unsafe li.tool-flag .btn-icon { background: rgba(0,0,0,.4); } .list-item-album .tool-flag { display: none; } .list-item-image-tools li .label { text-shadow: 1px 1px 0 rgba(0,0,0,.1); } /* .label-edit { background: #2980B9; } .label-select { background: #27AE60; } .label-move { background: #F1C40F; } .label-delete { background: #E74C3C; } .label-flag { background: #333; } */ .list-item .list-item-avatar-cover, .list-item .list-item-avatar-cover > * { border-radius: 100%; } .list-item .list-item-avatar-cover { width: 160px; height: 160px; border: 0; background-color: #E5E5E5; position: absolute; left: 50%; top: 50%; /* margin-top: 0 !important; */ margin-top: -80px !important; margin-left: -80px !important; transition: all 300ms; } .tone-dark .list-item .list-item-avatar-cover { background: #555; } .list-item .list-item-avatar-cover > * { width: 100px; height: 100px; } .list-item .list-item-avatar-cover img { height: auto; box-shadow: 2px 2px 2px rgba(0,0,0,.3); } .list-item .list-item-avatar-cover .icon.empty { display: block; top: 50%; position: relative; margin-top: -45px; } .list-item .list-item-avatar-cover .icon.empty, .tone-dark .list-item-image .list-item-avatar-cover .icon.empty { color: #FFF; } .list-item-privacy { position: absolute; left: 0; top: 0; width: 2.4em; height: 2.4em; line-height: 2.4em; color: #FFF; text-shadow: 1px 1px 5px rgba(0,0,0,.5); } .tone-dark .list-item-privacy { background: rgba(0,0,0,.5); color: #FFF; } .list-item-like { position: absolute; height: 20px; top: 50%; margin-top: -8px; right: 10px; } .list-item-like .btn-like { font-size: 20px; cursor: pointer; display: none; } .list-item[data-liked="0"] .list-item-like .btn-like.btn-unliked { display: block; } .list-item[data-liked="1"] .list-item-like .btn-like.btn-liked { display: block; } /* play stuff */ .list-item-play-gif, .list-item-play-gif * { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAACdCAMAAAAgwM7pAAAB5lBMVEUAAAD//4D//6oAAAD//7///8wAAAD//9X//9v//9///+P//+b//+gAAAD//+r//+sAAAD//+3//+7//+////D///H///L///L///MAAAD///P///T///QAAAD///X///YAAAD///b///f///f///gAAAD///gAAAD///gAAAD///kAAAD///kAAAD///kAAAD///n///oAAAD///r///r///oAAAD///r///v///sAAAD///v///v///v///v///v///sAAAD///z///wAAAD///z///wAAAAAAAD///wAAAD///z///wAAAD///z///wAAAD///wAAAD///wAAAD///wAAAD///wAAAD///0AAAD///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///3///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///7///6+e5cNAAAAoXRSTlMAAgICBAQEBgYICAoKCgwMDA4OEBASEhQUFBYWGBgaGhocHiAiIiQkJiYoKCoqLCwuLi4wMjY2ODg6Ojw+QEJERkZISkpMUFBSVFRWWFhaXFxeXmBgYmJkZGZmaGpsbnBydHZ4enx+gYOFh4mLjY+Rk5WXmZuho6Wnqa2xs7W3u72/wcPFx8nLzc/R09XX2dvd3+Hj5efp6+3v8fP19/n7/fvKuacAAARqSURBVHherNgNx4RAFAXgQywQAYRYSLJWhBAwRInIyBjn//+Ql5eVXW1bzXkAEM3HnXMv9qRlY4bJOmenwTRliivip7H8YM0zxilR0Xlu8l0R4ahbPXPHXN9wSGX5g63wWzbygDHDvqj1PMS3EXYkPQ/rE3x1X3jCcscXueMpLsemh+dJ/oENuedpPt9YH8cL3B0fkoWXLAneRD0v6t/PU8vLWqyQeV7mM6xGBhjxgopBKrzqj2UQ+6pPNQPV+BfNDDRHAICCwQoAQMdgHQDEnsF8vO59+AkwFDAALAUskFIiRUmJEg0lGhhKGAyUGDBRYoKlhIWjhJN9SPZrssWWbb/sQMquiOzSysqIqrApS21FgafsOVI9kLInWxYiVLFGFrRU0U8VRmXxWBXYZS2EqqlRtVmqxk/ViqqaY1W7rhogqEYawiGLfuyjH0TpR2OruNoe1v01Y4a/bEVhGD+VCXcWC2xrZiFbZZGlEcKCwGSiyUKIiCzLQG0w1Q5Vg1FrdVRVUW3V3Nv7/Ke7va5ot2p77jkf+vvS50t/yT0n57zveygUfJ8P+fNDih57t22WWn2CJruzUg2CCI3wWjmt5fmUH8AEUelz7fhO4kgyQqepXhKhcGRKdZsGHT5fHY1GsMYBxJ3thI2KEIDQUGkWwWTISnLTDkTHi0k2DoCdpzlFBuv0Y5Kdzksg3EE48MoHJD7wMD1YAhID9wqKKFSj8r0m41HMRGeS2zMushvoIxSMyJjIJJoDvEWEhrbpsgyeHhmxOsLOwzDkXsKBr4CNh8d4hUg5D9EK8EmfoCV9pxMIFunylF9jNFXkEbuILkqu8TvNXEp0sg68ITzoARYJF85xwUdk4/Vt/cAIF5ERWNViq2eMxXQGv5Y2cc4iWkdMSx6csYgadse0FMAh4cIF3HxEIja5iQrs0wI44CPy4JRFUL85pKUNnLCIXIhqybzVz3hEuB3awrpGbEBDQV21Pem1XqjiU45KgmK3Pk9peoEUdJfsShFp9/Sy7iaiY/i/tuYRKaRGi5SFgV4upm4ZsVouplnAa6Brjz8L9zXsnZQN+8fMc6w3WE05QrwlFFAMNXzHLP6DnzCXcxTtigPhnBtjAWI5huNAXsPxs1N1XBeyiBYi1ryuGO0BoY0wU22XoHBQkyowDTj2d59QFyv1kUXbl0HXz9tHFj073mxfFtRQh1vCTqY7y+CWIhQPUTwx8JA0roQk0e9qVVd6rkkRdDvXVBYqaMa3FRk3bCh/W4BXEUWgQlVeivcA6Zd9fusamErWpmNFJCHsT7LzMn/Rd+DQnAw1Dq/5TjRJPQPICNwdLQbRN8hNhIdoH0F1xesVqlJEjjYFM1U3ua6EyigUpPd3ohu+5C8KYlcJtQkkcfwrms5ftI1LgxJMFovlT6poqUWhnuTPGDCjxRgcDIstnCPRy0NE3iWA1ZZi8sIqsYnIoAhAuoKChUlEmt1Q2Use/3l41EM7TPTwety2ONyoRuNs8rdrRqBU/AVcT/TiMRYQxQAAAABJRU5ErkJggg=='); position: absolute; top: 50%; left: 50%; } .list-item-play-gif { width: 72px; height: 72px; margin-left: -36px; margin-top: -36px; background-position: 0 0; cursor: pointer; } .list-item-play-gif > span { width: 66px; height: 66px; margin-left: -33px; margin-top: -33px; background-position: 0 -73px; } .list-item-play-gif--loading > span { -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } .list-item-play-gif > i { width: 32px; height: 17px; margin-left: -16px; margin-top: -9px; background-position: 0 -140px; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } /* settings */ .settings-group { display: none; } .settings-group-isolated { display: block; } /* stats */ .stats-block, a.stats-block { text-decoration: none; color: inherit; padding: 10px; } a.stats-block:hover { background: #F9F9F9; } .tone-dark a.stats-block:hover { background: #222; } .text-align-center .stats-big-number { text-align: center; } .stats-big-number .number { font-size: 44px; font-weight: 100; } .stats-big-number .number span { font-size: 24px; } .stats-big-number .label { display: block; } .text-content {} .text-content code { background: #F2F2F2; padding: 2px; border: 1px solid #DDD; } .tone-dark .text-content code { border-color: #222; background: #111; } #home-top-bar-placeholder { margin-top: -65px; } #home-cover { width: 100%; background-position: center center; background-color: #333; background-size: cover; color: #FFF; position: relative; } body.landing #home-cover { margin: 0; padding: 0; height: 100%; min-height: 500px; } body.split #home-cover { margin: 0; padding: 132px 0 100px 0; } .tone-dark #home-cover { /*background: none;*/ } #home-cover-content { position: relative; text-align: center; } body.landing #home-cover-content { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); overflow: auto; } #home-cover-content p, #home-cover-content h1 { text-shadow: 1px 1px 2px rgba(0,0,0,.25) } /*#home-cover-content a { color: #FFF; }*/ #home-cover-content h1 { font-size: 2.4em; line-height: 120%; font-weight: 600; } @media (min-width: 768px) { #home-cover-content h1 { font-size: 2.7em; } } @media (min-width: 992px) { #home-cover-content h1 { font-size: 3em; } } #home-cover-content p { font-size: 22px; margin: 20px 0; font-weight: 100; } #home-cover-content .home-buttons { margin: 30px 0 20px; } .home-buttons { margin: 20px 0; text-align: center; } .home-buttons a { font-size: 16px; text-transform: uppercase; min-height: 50px; line-height: 1.5; height: auto; text-align: center; letter-spacing: 2px; padding: 12px 30px; } #home-pics-feature { height: 700px; overflow: hidden; position: relative; margin: 10px 0; } #home-pics-feature.empty { height: auto; } #home-pics-feature-overlay { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ width: 100%; height: 200px; position: absolute; bottom: 0; z-index: 1; } .tone-dark #home-pics-feature-overlay { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, #0B0B0B 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,#0B0B0B)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,#0B0B0B 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,#0B0B0B 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,#0B0B0B 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,#0B0B0B 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } #home-pics-feature.empty #home-pics-overlay { display: none; } #home-join { margin: 40px 0; } #home-join h1 { font-size: 38px; font-weight: 100; } #home-join p { margin: 20px 0; font-size: 18px; } /** * BANNERS */ .ad-banner { margin: 10px; text-align: center; } .ad-banner img { display: block; margin: 0 auto; } /* sizes */ .ad-banner-size-300x250 { width: 300px; height: 250px; } .ad-banner-size-336x280 { width: 336px; height: 280px; } .ad-banner-size-728x90 { width: 728px; height: 90px; } .ad-banner-size-300x600 { width: 300px; height: 600px; } .ad-banner-size-320x100 { width: 320px; height: 100px; } .ad-banner-size-320x50 { width: 320px; height: 50px; } .ad-banner-size-468x60 { width: 468px; height: 60px; } .ad-banner-size-234x60 { width: 234px; height: 60px; } .ad-banner-size-120x600 { width: 120px; height: 600px; } .ad-banner-size-120x240 { width: 120px; height: 240px; } .ad-banner-size-160x600 { width: 160px; height: 600px; } .ad-banner-size-300x1050 { width: 300px; height: 1050px; } .ad-banner-size-970x90 { width: 970px; height: 90px; } .ad-banner-size-970x250 { width: 970px; height: 250px; } .ad-banner-size-250x250 { width: 250px; height: 250px; } .ad-banner-size-200x200 { width: 200px; height: 200px; } .ad-banner-size-180x150 { width: 180px; height: 150px; } .ad-banner-size-125x125 { width: 125px; height: 125px; } #banner_before_home_cover { margin: 0; padding: 10px; background: #000; } #banner_image_image-viewer_top, #banner_image_image-viewer_foot { height: 90px; margin-left: auto; margin-right: auto; } body#maintenance, body#consent-screen { padding: 0; margin: 0; width: 100%; height: 100%; } #maintenance-cover, #consent-screen-cover { height: 100%; background-position: center center; background-color: #333; background-size: cover; } #maintenance-cover-inner, #consent-screen-cover-inner { background: rgba(0,0,0,.25); width: 100%; height: 100%; } #maintenance-cover-content, #consent-screen-cover-content { color: #FFF; padding: 40px; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #maintenance-cover-content #logo { display: inline-block; margin-bottom: 20px; } #maintenance-cover-content #logo img { height: 30px; } #maintenance-cover-content h1 { font-size: 2.5em; margin-bottom: 20px; } #maintenance-cover-content p { font-size: 1.2em; } #consent-screen-cover-inner { background: none; } #consent-screen-cover-src { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; } #consent-screen-content { background: #FFF; margin: 0 auto; padding: 30px; box-shadow: 0 0 50px 6px rgba(0,0,0,0.25); top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .tone-dark #consent-screen-content { background: #161616; } #consent-screen-content h1 { line-height: 2em; } #consent-screen-content .logo { width: 2em; height: auto; display: inline; margin-right: 10px; vertical-align: top; } #fullscreen-modal-box .image-preview .canvas { border: 0; display: block; margin: 0 auto; max-width: 100%; max-height: 500px; } .content-password-gate { border-radius: 10px; background: #F2F2F2; padding: 30px; font-size: 16px; text-align: center; } .tone-dark .content-password-gate { background: #101010; } .content-password-gate h1 { font-size: 30px; margin-bottom: 10px; } .content-password-gate h1 .icon { display: block; font-size: 60px; margin-bottom: 10px; } .content-password-gate .g-recaptcha { display: inline-block } .content-password-gate .recaptcha_response_field { display: inline-block } .tone-dark .growl { background: #212121; color: #FFF; } /* Home cover stuff */ #home-cover-slideshow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .home-cover-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; opacity: 0; -webkit-transform: translateZ(0); backface-visibility: hidden; } .home-cover-img.animate-in, .home-cover-img.animate-in--alt { animation-name: slideshow; animation-duration: 10s; animation-timing-function: linear; animation-fill-mode: forwards; } .home-cover-img.animate-in--alt { opacity: 1; animation-name: slideshow--alt; } .home-cover-img.animate-end { opacity: 1; transform: scale(1.12); animation: none; } @keyframes slideshow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; transform: scale(1.12); } } @keyframes slideshow--alt { 100% { transform: scale(1.12); } } @supports (-ms-accelerator:true) { .home-cover-img.animate-end { transform: scale(1); } @keyframes slideshow { 0% { opacity: 0; } 20% { opacity: 1; } } @keyframes slideshow--alt { 100% { transform: scale(1); } } } #dashboard-settings { min-height: 400px; } .footer { color: #CCC; font-size: 10px; line-height: 20px; text-align: center; width: 100%; position: absolute; bottom: 0; } .tone-dark .footer { color: #444; } .js #powered-by.footer { display: none; } body.landing .footer { color: #FFF; text-shadow: 2px 2px 6px rgba(0,0,0,.4); } body.landing .footer a { color: rgba(255,255,255,.7); } body.landing .footer, body.landing .footer a:hover { color: #FFF; }