/** * @name style.css * @author Philipp Maurer * @author Tobias Reich * @copyright 2013 by Philipp Maurer, Tobias Reich */ /* Reset -------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } body { line-height:1; } ol,ul { list-style:none; } blockquote,q { quotes:none; } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; } table { border-collapse:collapse; border-spacing:0; } /* Basics -------------------------------------------------*/ html, body { min-height: 100%; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } body { background-color: #222; background-image: url(../img/background.jpg); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; } .center { left: 50%; top:50%; position: absolute; } * { -webkit-transition: color .3s, opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s; -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s; -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s; transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s; } /* Tooltip ------------------------------------------------*/ .tipsy { padding: 4px; font-size: 12px; position: absolute; z-index: 100000; /* Animation */ -webkit-animation-name: fadeIn; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: fadeIn; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: fadeIn; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: fadeIn; animation-duration: .3s; animation-fill-mode: forwards; } .tipsy-inner { padding: 7px 10px 6px 10px; color: white; max-width: 200px; text-align: center; text-shadow: 0 -1px 0 #000; background: #000; box-shadow: 0 1px 2px hsla(0, 0%, 0%, .25); border-radius: 3px; } .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } .tipsy-arrow-n { border-bottom-color: #000; } .tipsy-arrow-s { border-top-color: #000; } .tipsy-arrow-e { border-left-color: #000; } .tipsy-arrow-w { border-right-color: #000; } .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; } .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; } /* Animations ------------------------------------------------*/ .fadeIn { -webkit-animation-name: fadeIn; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: fadeIn; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: fadeIn; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: fadeIn; animation-duration: .3s; animation-fill-mode: forwards; } .fadeOut { -webkit-animation-name: fadeOut; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: fadeOut; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: fadeOut; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: fadeOut; animation-duration: .3s; animation-fill-mode: forwards; } .contentFadeIn { -webkit-animation-name: bounceInDown; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; -moz-animation-name: bounceInDown; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: bounceInDown; -o-animation-duration: 1s; -o-animation-timing-function: ease-out; -o-animation-fill-mode: forwards; animation-name: bounceInDown; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .contentFadeOut { -webkit-animation-name: bounceOutUp; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; -moz-animation-name: bounceOutUp; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: bounceOutUp; -o-animation-duration: 1s; -o-animation-timing-function: ease-out; -o-animation-fill-mode: forwards; animation-name: bounceOutUp; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .contentZoomOut { -webkit-animation-name: zoomOut; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: zoomOut; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: zoomOut; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: zoomOut; animation-duration: .3s; animation-fill-mode: forwards; } .contentZoomIn { -webkit-animation-name: zoomIn; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: zoomIn; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: zoomIn; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: zoomIn; animation-duration: .3s; animation-fill-mode: forwards; } /* Loading ------------------------------------------------*/ #loading { position: fixed; width: 100%; height: 2px; background-color: #2f0d0e; background-repeat: repeat-x; z-index: 1; display: none; /* Animation */ -webkit-animation-name: moveBackground; -webkit-animation-duration: .2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: moveBackground; -moz-animation-duration: .2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -o-animation-name: moveBackground; -o-animation-duration: .2s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; animation-name: moveBackground; animation-duration: .2s; animation-timing-function: linear; animation-iteration-count: infinite; } #loading h1 { margin: 13px; color: #ddd; font-size: 14px; font-weight: bold; text-shadow: 0px 1px 0px #000; text-transform: capitalize; } #loading h1 span { margin-left: 10px; font-weight: normal; text-transform: none; } #loading.loading { background-image: url(../img/bar/loading.png); } #loading.error { background-image: url(../img/bar/error.png); } /* Header ------------------------------------------------*/ header { position: fixed; height: 41px; width: 100%; background-color: #333; background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); background-image: -webkit-linear-gradient(top, #555, #333); background-image: -moz-linear-gradient(top, #555, #333); background-image: -o-linear-gradient(top, #555, #333); background-image: -ms-linear-gradient(top, #555, #333); background-image: linear-gradient(top, #555, #333); box-shadow: inset 0px 1px 0px #666, inset 0px -1px 0px #393939, 0px 0px 3px #000; border-top: 1px solid #222; z-index: 1; -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, margin-top .3s; -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, margin-top .3s; -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, margin-top .3s; transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, margin-top .3s; /* Animation */ -webkit-animation-name: moveDown; -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; -moz-animation-name: moveDown; -moz-animation-duration: .3s; -moz-animation-timing-function: ease-out; -moz-animation-fill-mode: forwards; -o-animation-name: moveDown; -o-animation-duration: .3s; -o-animation-timing-function: ease-out; -o-animation-fill-mode: forwards; animation-name: moveDown; animation-duration: .3s; animation-timing-function: ease-out; animation-fill-mode: forwards; } /* Title ------------------------------------------------*/ #title { position: absolute; margin: 0px 30%; width: 40%; padding: 11px 0px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0px -1px 0px #000; } #title.editable { cursor: pointer; } #title span { color: #aaa; font-size: 16px; font-weight: normal; } /* Button ------------------------------------------------*/ header .button { float: left; position: absolute; padding: 7px 10px 8px 10px; margin: 6px 0px 0px 8px; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 0px -1px 0px #000; text-decoration: none !important; background: #555; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #555), color-stop(0, #333)); background-image: -webkit-linear-gradient(top, #555 0%, #333 100%); background-image: -moz-linear-gradient(top, #555 0%, #333 100%); background-image: -o-linear-gradient(top, #555 0%, #333 100%); background: linear-gradient(top, #555 0%, #333 100%); border: 1px solid #222; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0px 1px 0px #444; cursor: pointer; } header .button:hover { background-color: #5c5c5c; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 92, 92)), to(rgb(57, 57, 57))); background-image: -webkit-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); background-image: -moz-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); background-image: -o-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); background-image: -ms-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); background-image: linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57)); } header .button:active { background-color: #393939; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(68, 68, 68))); background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); background-image: linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68)); } header .button.icon { float: right; position: relative; padding: 7px 11px 4px 11px; margin: 6px 8px 0px 0px; font-family: 'FontAwesome'; font-size: 16px; } #tools_albums, #tools_album, #tools_photo, #button_signin { display: none; } /* Button Divider ------------------------------------------------*/ header .button_divider { float: right; position: relative; margin: 1px 12px 0px 0px; width: 1px; height: 40px; background-color: transparent; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(68, 68, 68)), to(rgb(37, 37, 37))); background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0), rgb(25, 25, 25)); background-image: -moz-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); background-image: -o-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); background-image: -ms-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); background-image: linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37)); border-right: 1px solid #555; } header .button_divider.less { margin: 1px 6px 0px 6px; } /* Search ------------------------------------------------*/ #search { float: right; width: 80px; margin: 7px 12px 0px 0px; padding: 5px 10px 7px 10px; background-color: #444; color: #fff; border: none; border: 1px solid #111; box-shadow: 0px 1px 0px #555; outline: none; border-radius: 5px; opacity: .6; -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, width .2s ease-out; -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out; -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, width .2s ease-out; transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out; } #search:focus { box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333; opacity: 1; width: 140px; } /* Tools ------------------------------------------------*/ .tools:first-of-type { margin-right: 6px; } .tools { float: right; padding: 10px 8px; color: #aaa; font-size: 21px; text-shadow: 0px -1px 0px #222; cursor: pointer; } .tools:hover a { color: #fff; } .tools .icon-star { color: #f0ef77; } .tools .icon-share.active { color: #ff9737; } /* Content ------------------------------------------------*/ #content { position: absolute; padding: 41px 0px 33px 0px; width: 100%; -webkit-overflow-scrolling: touch; } /* Photo ------------------------------------------------*/ .photo { float: left; display: inline-block; width: 206px; height: 206px; margin: 30px 0px 0px 30px; cursor: pointer; } .photo img { position: absolute; width: 200px; height: 200px; background-color: #222; border-radius: 3px; box-shadow: 0px 1px 5px #111; border: 3px solid #ccc; } .photo:hover img, .photo.active img { box-shadow: 0px 0px 10px #005ecc; } /* Album ------------------------------------------------*/ .album { float: left; display: inline-block; width: 206px; height: 206px; margin: 30px 0px 0px 30px; cursor: pointer; } .album img:first-child, .album img:nth-child(2) { -webkit-transform: rotate(0deg) translateY(0px) translateX(0px); -moz-transform: rotate(0deg) translateY(0px) translateX(0px); -o-transform: rotate(0deg) translateY(0px) translateX(0px); transform: rotate(0deg) translateY(0px) translateX(0px); opacity: 0; } .album:hover img:first-child { -webkit-transform: rotate(-2deg) translateY(10px) translateX(-12px); -moz-transform: rotate(-2deg) translateY(10px) translateX(-12px); -o-transform: rotate(-2deg) translateY(10px) translateX(-12px); transform: rotate(-2deg) translateY(10px) translateX(-12px); opacity: 1; } .album:hover img:nth-child(2) { -webkit-transform: rotate(5deg) translateY(-8px) translateX(12px); -moz-transform: rotate(5deg) translateY(-8px) translateX(12px); -o-transform: rotate(5deg) translateY(-8px) translateX(12px); transform: rotate(5deg) translateY(-8px) translateX(12px); opacity: 1; } .album img { position: absolute; width: 200px; height: 200px; background-color: #222; border-radius: 3px; box-shadow: 0px 1px 5px #111; border: 3px solid #ccc; } .album:hover img, .album.active img { box-shadow: 0px 0px 10px #005ecc; } /* Album/Photo Overlay ------------------------------------------------*/ .album .overlay, .photo .overlay { position: absolute; width: 200px; height: 200px; margin: 3px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* W3C */ } .photo .overlay { opacity: 0; } .photo:hover .overlay, .photo.active .overlay { opacity: 1; } .album .overlay h1, .photo .overlay h1 { min-height: 19px; width: 190px; margin: 153px 0px 3px 15px; color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0px 1px 0px #000; overflow: hidden; } .album .overlay a { margin-left: 15px; font-size: 11px; color: #aaa; text-shadow: 0px 1px 0px #000; } .photo .overlay a { margin: 155px 0px 5px 15px; font-size: 11px; color: #aaa; text-shadow: 0px 1px 0px #000; } /* Badges ------------------------------------------------*/ .album .badge, .photo .badge { position: absolute; margin-top: -1px; margin-left: 12px; padding: 12px 7px 3px 7px; box-shadow: 0px 0px 3px #000; border-radius: 0px 0px 3px 3px; border: 1px solid #fff; border-top: none; color: #fff; font-size: 24px; text-shadow: 0px 1px 0px #000; opacity: .9; } .album .badge.icon-star, .photo .badge.icon-star { padding: 12px 8px 3px 8px; } .album .badge.icon-share, .photo .badge.icon-share { padding: 12px 6px 3px 8px; } .album .badge::after, .photo .badge::after { content: ""; position: absolute; margin-top: -12px; margin-left: -26px; width: 34px; height: 5px; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */ opacity: .4; } .album .badge.icon-star::after { margin-left: -28px; width: 36px; } .album .badge.icon-share::after, .photo .badge.icon-share::after { margin-left: -30px; width: 38px; } .album .badge.icon-reorder::after { margin-left: -30px; width: 38px; } .album .badge:nth-child(2n), .photo .badge:nth-child(2n) { margin-left: 57px; } .album .badge.red, .photo .badge.red { background: #d64b4b; background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); background: -moz-linear-gradient(top, #d64b4b, #ab2c2c); background: -ms-linear-gradient(top, #d64b4b, #ab2c2c); background: -o-linear-gradient(top, #d64b4b, #ab2c2c); } .album .badge.blue, .photo .badge.blue { background: #d64b4b; background: -webkit-gradient(linear, left top, left bottom, from(#347cd6), to(#2945ab)); background: -webkit-linear-gradient(top, #347cd6, #2945ab); background: -moz-linear-gradient(top, #347cd6, #2945ab); background: -ms-linear-gradient(top, #347cd6, #2945ab); background: -o-linear-gradient(top, #347cd6, #2945ab); } /* Divider ------------------------------------------------*/ .divider { float: left; width: 100%; height: 32px; margin-top: 50px; opacity: 0; background-color: #2b2b2b; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35))); background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); box-shadow: 0px 1px 0px #111, inset 0px 1px 0px rgba(255, 255, 255, .1); } .divider:first-child { margin-top: 2px; } .divider h1 { float: left; margin: 8px 0px 0px 30px; color: #fff; font-size: 14px; font-weight: bold; text-shadow: 0px -1px 0px #000; } /* No Content ------------------------------------------------*/ .no_content { position: absolute; top: 50%; left: 50%; height: 160px; width: 180px; margin-top: -80px; margin-left: -90px; padding-top: 20px; color: rgba(20, 20, 20, 1); text-shadow: 0px 1px 0px rgba(255, 255, 255, .05); text-align: center; } .no_content .icon { font-size: 120px; } .no_content p { font-size: 18px; } /* Overlay ------------------------------------------------*/ .message_overlay { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgba(0,0,0,.3); background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50))); background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); z-index: 1000; } .message { position: absolute; display: inline-block; width: 500px; margin-left: -250px; margin-top: -85px; background-color: #505050; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42))); background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); border-radius: 5px; border-bottom: 1px solid #000; box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05); /* Animation */ -webkit-animation-name: bounceInDown; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; -moz-animation-name: bounceInDown; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-out; -moz-animation-fill-mode: forwards; -o-animation-name: bounceInDown; -o-animation-duration: 1s; -o-animation-timing-function: ease-out; -o-animation-fill-mode: forwards; animation-name: bounceInDown; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .message h1 { float: left; width: 100%; padding: 12px 0px; color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0px -1px 0px #000; text-align: center; } .message .close { position: absolute; top: 0px; right: 0px; padding: 12px 14px 6px 7px; color: #aaa; font-size: 20px; text-shadow: 0px -1px 0px #111; cursor: pointer; } .message .close:hover { color: #fff; } .message p { float: left; width: 90%; margin-top: 1px; padding: 12px 5% 15px 5%; color: #eee; font-size: 14px; text-shadow: 0px -1px 0px #222; line-height: 20px; } .message p b { font-weight: bold; } .message .button { float: right; margin: 15px 15px 15px 0px; padding: 6px 10px 8px 10px; background-color: #4e4e4e; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78, 78, 78)), to(rgb(45, 45, 45))); background-image: -webkit-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); background-image: -moz-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); background-image: -o-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); background-image: -ms-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); background-image: linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45)); color: #ccc; font-size: 14px; font-weight: bold; text-align: center; text-shadow: 0px -1px 0px #000; border-radius: 5px; border: 1px solid #111; box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1); cursor: pointer; } .message .button:first-of-type { margin: 15px 5% 18px 0px !important; } .message .button.active { color: #fff; box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc; } .message .button:hover { background-color: #565757; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(86, 87, 87)), to(rgb(57, 57, 57))); background-image: -webkit-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); background-image: -moz-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); background-image: -o-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); background-image: -ms-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); background-image: linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57)); } .message .button:active, .message .button.pressed { background-color: #393939; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(75, 76, 76))); background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); background-image: linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76)); } /* Add Album ------------------------------------------------*/ .message.add { width: 588px; margin-top: -152px; margin-left: -294px; } .add_album { float: left; display: inline-block; width: 150px; height: 200px; margin: 30px 0px 30px 30px; border-radius: 3px; border: 3px dashed #777; cursor: pointer; text-align: center; -webkit-transition: border .3s; -moz-transition: border .3s; -o-transition: border .3s; transition: border .3s; } .add_album:hover { border: 3px dashed #fff; } .add_album .icon { margin-top: 55px; color: #777; font-family: 'FontAwesome'; font-size: 80px; text-shadow: 0px 1px 2px #000; } .add_album:hover .icon { color: #fff; } .add_album a { float: left; width: 100%; color: #777; font-size: 14px; font-weight: bold; text-shadow: 0px 1px 0px #000; } .add_album:hover a { color: #fff; } /* Sign in ------------------------------------------------*/ .sign_in { float: left; width: 100%; margin-top: 1px; padding: 5px 0px; color: #eee; font-size: 14px; text-shadow: 0px -1px 0px #222; line-height: 20px; } .sign_in input { float: left; width: 86%; padding: 7px 2% 9px 2%; margin: 0px 5%; background-color: #444; color: #fff; text-shadow: 0px 1px 0px #222; border: none; border: 1px solid #111; box-shadow: 0px 1px 0px #555; outline: none; border-radius: 5px; } .sign_in input:first-of-type { margin-bottom: 10px; } .sign_in input:focus { box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc; } .sign_in input.error:focus { box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #cc0007; } .message #version { display: inline-block; margin-top: 23px; margin-left: 5%; color: #888; text-shadow: 0px -1px 0px #111; } .message #version span { display: none; } .message #version span a { color: #888; } /* Copy Link, Password ------------------------------------------------*/ .message .copylink, .message .password { float: left; width: 95%; padding: 7px 10px 9px 10px; margin-top: 20px; background-color: #444; color: #fff; text-shadow: 0px 1px 0px #222; border: none; border: 1px solid #111; box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc; outline: none; border-radius: 5px; } .message .copylink { margin-bottom: 20px; } /* Image View ------------------------------------------------*/ #imageview { position: fixed; display: none; width: 100%; min-height: 100%; background-color: rgba(30,30,30,.99); box-shadow: 0px 2px 4px #000; -webkit-transition: background-color .3s; } #imageview.full { background-color: #111; } #imageview #image { position: absolute; top: 70px; right: 30px; bottom: 30px; left: 30px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; -webkit-transition: top .3s, bottom .3s, margin-top .3s; -webkit-animation-name: zoomIn; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: forwards; -moz-animation-name: zoomIn; -moz-animation-duration: .3s; -moz-animation-fill-mode: forwards; -o-animation-name: zoomIn; -o-animation-duration: .3s; -o-animation-fill-mode: forwards; animation-name: zoomIn; animation-duration: .3s; animation-fill-mode: forwards; } #imageview #image.small { top: 50%; right: auto; bottom: auto; left: 50%; } /* Previous/Next Buttons ------------------------------------------------*/ #imageview a { position: fixed; top: 50%; margin-top: -10px; color: #fff; font-size: 50px; text-shadow: 0px 1px 2px #000; cursor: pointer; opacity: .1; z-index: 1; } #imageview a:hover { opacity: .9; } #imageview a#previous { left: 20px; -webkit-transition: left .3s; } #imageview.full a#previous { left: -50px; } #imageview a#next { right: 20px; -webkit-transition: right .3s } #imageview.full a#next { right: -50px; } /* InfoBox ------------------------------------------------*/ #infobox_overlay { z-index: 2; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgba(0,0,0,.7); -webkit-animation-name: fadeIn; -webkit-animation-duration: .5s; -webkit-animation-fill-mode: forwards; -moz-animation-name: fadeIn; -moz-animation-duration: .5s; -moz-animation-fill-mode: forwards; -o-animation-name: fadeIn; -o-animation-duration: .5s; -o-animation-fill-mode: forwards; animation-name: fadeIn; animation-duration: .5s; animation-fill-mode: forwards; } #infobox { z-index: 3; position: fixed; right: -320px; width: 300px; height: 100%; background-color: rgba(20,20,20,0.98); box-shadow: -1px 0px 2px #000; display: none; -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; -webkit-transition: right .5s ease-out; -moz-transition: right .5s; -o-transition: right .5s; transition: right .5s; } #infobox .wrapper { float: left; height: 100%; overflow: scroll; } #infobox .header { float: left; height: 41px; width: 100%; background-color: #1d1d1d; background-image: -webkit-gradient(linear, left top, left bottom, from(#1d1d1d), to(#050505)); background-image: -webkit-linear-gradient(top, #1d1d1d, #050505); background-image: -moz-linear-gradient(top, #1d1d1d, #050505); background-image: -o-linear-gradient(top, #1d1d1d, #050505); background-image: -ms-linear-gradient(top, #1d1d1d, #050505); background-image: linear-gradient(top, #1d1d1d, #050505); box-shadow: inset 0px 1px 0px #111, inset 0px -1px 0px #000; border-top: 1px solid #000; } #infobox .header h1 { position: absolute; margin: 0px 30%; width: 40%; margin-top: 11px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0px -1px 0px #000; } #infobox .header a { float: right; padding: 10px 15px; color: #fff; font-size: 21px; font-weight: bold; text-shadow: 0px -1px 0px #000; opacity: .5; cursor: pointer; } #infobox .header a:hover { opacity: 1; } #infobox .separater { float: left; width: 100%; height: 27px; background-color: #2b2b2b; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35))); background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35)); box-shadow: 0px 1px 0px #000, inset 0px 1px 0px rgba(255, 255, 255, .1); } #infobox .separater h1 { margin: 5px 0px 0px 15px; color: #fff; font-size: 14px; font-weight: bold; text-shadow: 0px -1px 0px #000; } #infobox table { float: left; margin: 10px 0px 15px 15px; } #infobox table tr td { padding: 5px 0px; color: #fff; font-size: 14px; line-height: 19px; } #infobox table tr td:first-child { width: 110px; } #infobox table tr td:last-child { padding-right: 10px; } #infobox .bumper { float: left; width: 100%; height: 35px; } #infobox #edit_title, #infobox #edit_description { display: inline; margin-left: 3px; width: 20px; height: 5px; cursor: pointer; } /* ContextMenu ------------------------------------------------*/ .contextmenu_bg { position: fixed; height: 100%; width: 100%; z-index: 1000; } .contextmenu { position: fixed; top: 110%; left: 110%; padding: 5px 0px; background-color: #393939; background-image: -webkit-gradient(linear, left top, left bottom, from(#393939), to(#2d2d2d)); background-image: -webkit-linear-gradient(top, #444, #2d2d2d); background-image: -moz-linear-gradient(top, #393939, #2d2d2d); background-image: -o-linear-gradient(top, #393939, #2d2d2d); background-image: -ms-linear-gradient(top, #393939, #2d2d2d); background-image: linear-gradient(top, #393939, #2d2d2d); border: 1px solid rgba(0,0,0,0.7); border-bottom: 1px solid rgba(0,0,0,.9); border-radius: 5px; box-shadow: 0px 3px 5px rgba(0,0,0,0.4), inset 0px 1px 0px rgba(255,255,255,0.2), inset 1px 0px 0px rgba(255,255,255,0.05), inset -1px 0px 0px rgba(255,255,255,0.05); opacity: .98; z-index: 1001; } /* Items ------------------------------------------------*/ .contextmenu tr { font-size: 14px; color: #eee; text-shadow: 0px -1px 0px rgba(0,0,0,.7); cursor: pointer; } .contextmenu tr:hover { background-color: #6a84f2; background-image: -webkit-gradient(linear, left top, left bottom, from(#6a84f2), to(#3959ef)); background-image: -webkit-linear-gradient(top, #6a84f2, #3959ef); background-image: -moz-linear-gradient(top, #6a84f2, #3959ef); background-image: -o-linear-gradient(top, #6a84f2, #3959ef); background-image: -ms-linear-gradient(top, #6a84f2, #3959ef); background-image: linear-gradient(top, #6a84f2, #3959ef); } .contextmenu tr.no_hover:hover { cursor: inherit; background-color: inherit; background-image: none; } .contextmenu tr.separator { float: left; height: 1px; width: 100%; background-color: #222; box-shadow: 0px 1px 0px #555; margin: 4px 0px 5px 0px; cursor: inherit; } .contextmenu tr.separator:hover { background-color: #222; background-image: none; } .contextmenu tr td { padding: 5px 20px 5px 10px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .contextmenu tr:hover td { color: #fff; box-shadow: inset 0px 1px 0px rgba(255,255,255,.1); text-shadow: 0px -1px 0px rgba(0,0,0,.7); } .contextmenu tr.no_hover:hover td { box-shadow: none; } .contextmenu tr a { float: left; width: 10px; margin-right: 10px; text-align: center; } /* Direct Link Input ------------------------------------------------*/ .contextmenu #link { float: right; width: 140px; margin: 0px -10px -1px 0px; padding: 4px 6px 5px 6px; background-color: #444; color: #fff; border: none; border: 1px solid #111; box-shadow: 0px 1px 0px rgba(255,255,255,.1); outline: none; border-radius: 5px; } .contextmenu tr a#link_icon { padding-top: 4px; } /* Upload ------------------------------------------------*/ #upload { display: none; } .upload_overlay { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50))); background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85)); z-index: 1000; } .upload_message { position: absolute; display: inline-block; width: 200px; margin-left: -100px; margin-top: -85px; background-color: #505050; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42))); background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42)); border-radius: 5px; border-bottom: 1px solid #000; box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05); /* Animation */ -webkit-animation-name: bounceInDown; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: forwards; -moz-animation-name: bounceInDown; -moz-animation-duration: 1s; -moz-animation-timing-function: ease-out; -moz-animation-fill-mode: forwards; -o-animation-name: bounceInDown; -o-animation-duration: 1s; -o-animation-timing-function: ease-out; -o-animation-fill-mode: forwards; animation-name: bounceInDown; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .upload_message a { float: left; margin: 35px 69px 5px 69px; color: #fff; font-size: 80px; text-shadow: 0px 1px 2px #000; z-index: 2; /* Animation */ -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-name: pulse; -moz-animation-duration: 2s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -o-animation-name: pulse; -o-animation-duration: 2s; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; animation-name: pulse; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .upload_message p { float: left; width: 200px; margin: 10px 0px; color: #fff; font-size: 14px; text-align: center; text-shadow: 0px -1px 0px #000; } .upload_message .progressbar { float: left; width: 170px; height: 25px; margin: 15px; background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), #101010; background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -webkit-linear-gradient(top, #101010, #1f1f1f); background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -moz-linear-gradient(top, #101010, #1f1f1f); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAZBAMAAABN41qcAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAAuIwAALiMBeKU/dgAABOBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuMS4yIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4xPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj4zMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjMwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjMzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -o-linear-gradient(top, #101010, #1f1f1f); background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -ms-linear-gradient(top, #101010, #1f1f1f); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAZBAMAAABN41qcAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAAAlwSFlzAAAuIwAALiMBeKU/dgAABOBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuMS4yIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4xPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj4zMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjMwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjMzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), linear-gradient(top, #101010, #1f1f1f); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0px 0px 2px #111; border-radius: 5px; /* Animation */ -webkit-animation-name: moveBackground; -webkit-animation-duration: .6s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: moveBackground; -moz-animation-duration: .6s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -o-animation-name: moveBackground; -o-animation-duration: .6s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; animation-name: moveBackground; animation-duration: .6s; animation-timing-function: linear; animation-iteration-count: infinite; } .upload_message .progressbar div { float: left; width: 0%; height: 100%; box-shadow: 0 1px 0 #000, 1px 0px 2px #000; background-color: #f5f2f7; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f2f7), to(#c7c6c8)); background-image: -webkit-linear-gradient(top, #f5f2f7, #c7c6c8); background-image: -moz-linear-gradient(top, #f5f2f7, #c7c6c8); background-image: -o-linear-gradient(top, #f5f2f7, #c7c6c8); background-image: -ms-linear-gradient(top, #f5f2f7, #c7c6c8); background-image: linear-gradient(top, #f5f2f7, #c7c6c8); border-radius: 5px; -webkit-transition: width .2s, opacity .5; -moz-transition: width .2s, opacity .5; -o-transition: width .2s, opacity .5; transition: width .2s, opacity .5; } /* Screen behavior -------------------------------------------------*/ @media only screen and (max-width: 900px) { #title { margin: 0px 20%; width: 40%; } #title.view { margin: 11px 20% 0px 20%; width: 60%; } #title span { display: none; } } @media only screen and (max-width: 640px) { #title { display: none; } #title.view { display: block; margin: 11px 20% 0px 15%; width: 65%; } #button_move { display: none; } #button_archive { display: none; } .center { top: 0px; left: 0px; } .album { margin: 40px 0px 0px 50px; } .photo { margin: 40px 0px 0px 50px; } .message { position: fixed; width: 100%; height: 100%; margin: 1px 0px 0px 0px !important; border-radius: 0px; /* Animation */ -webkit-animation-name: moveUp; -webkit-animation-duration: .3s; -moz-animation-name: moveUp; -moz-animation-duration: .3s; -o-animation-name: moveUp; -o-animation-duration: .3s; animation-name: moveUp; animation-duration: .3s; } .message.add { width: 100%; margin-top: 0px; } .add_album { width: 88%; height: 100px; margin: 30px 5% -10px 5%; } .add_album .icon { margin-top: 18px; font-size: 50px; } }