style.css 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381
  1. /**
  2. * @name style.css
  3. * @author Philipp Maurer
  4. * @author Tobias Reich
  5. * @copyright 2013 by Philipp Maurer, Tobias Reich
  6. */
  7. /* Reset -------------------------------------------------*/
  8. 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; }
  9. article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
  10. body { line-height:1; }
  11. ol,ul { list-style:none; }
  12. blockquote,q { quotes:none; }
  13. blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
  14. table { border-collapse:collapse; border-spacing:0; }
  15. /* Basics -------------------------------------------------*/
  16. html, body {
  17. min-height: 100%;
  18. -webkit-user-select: none;
  19. -moz-user-select: none;
  20. -o-user-select: none;
  21. user-select: none;
  22. }
  23. 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; }
  24. .center { left: 50%; top:50%; position: absolute; }
  25. * {
  26. -webkit-transition: color .3s, opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s;
  27. -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s;
  28. -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s;
  29. transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
  30. }
  31. /* Tooltip ------------------------------------------------*/
  32. .tipsy {
  33. padding: 4px;
  34. font-size: 12px;
  35. position: absolute;
  36. z-index: 100000;
  37. /* Animation */
  38. -webkit-animation-name: fadeIn;
  39. -webkit-animation-duration: .3s;
  40. -webkit-animation-fill-mode: forwards;
  41. -moz-animation-name: fadeIn;
  42. -moz-animation-duration: .3s;
  43. -moz-animation-fill-mode: forwards;
  44. -o-animation-name: fadeIn;
  45. -o-animation-duration: .3s;
  46. -o-animation-fill-mode: forwards;
  47. animation-name: fadeIn;
  48. animation-duration: .3s;
  49. animation-fill-mode: forwards;
  50. }
  51. .tipsy-inner {
  52. padding: 7px 10px 6px 10px;
  53. color: white;
  54. max-width: 200px;
  55. text-align: center;
  56. text-shadow: 0 -1px 0 #000;
  57. background: #000;
  58. box-shadow: 0 1px 2px hsla(0, 0%, 0%, .25);
  59. border-radius: 3px;
  60. }
  61. .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
  62. .tipsy-arrow-n { border-bottom-color: #000; }
  63. .tipsy-arrow-s { border-top-color: #000; }
  64. .tipsy-arrow-e { border-left-color: #000; }
  65. .tipsy-arrow-w { border-right-color: #000; }
  66. .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; }
  67. .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  68. .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  69. .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; }
  70. .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  71. .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  72. .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; }
  73. .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; }
  74. /* Animations ------------------------------------------------*/
  75. .fadeIn {
  76. -webkit-animation-name: fadeIn;
  77. -webkit-animation-duration: .3s;
  78. -webkit-animation-fill-mode: forwards;
  79. -moz-animation-name: fadeIn;
  80. -moz-animation-duration: .3s;
  81. -moz-animation-fill-mode: forwards;
  82. -o-animation-name: fadeIn;
  83. -o-animation-duration: .3s;
  84. -o-animation-fill-mode: forwards;
  85. animation-name: fadeIn;
  86. animation-duration: .3s;
  87. animation-fill-mode: forwards;
  88. }
  89. .fadeOut {
  90. -webkit-animation-name: fadeOut;
  91. -webkit-animation-duration: .3s;
  92. -webkit-animation-fill-mode: forwards;
  93. -moz-animation-name: fadeOut;
  94. -moz-animation-duration: .3s;
  95. -moz-animation-fill-mode: forwards;
  96. -o-animation-name: fadeOut;
  97. -o-animation-duration: .3s;
  98. -o-animation-fill-mode: forwards;
  99. animation-name: fadeOut;
  100. animation-duration: .3s;
  101. animation-fill-mode: forwards;
  102. }
  103. .contentFadeIn {
  104. -webkit-animation-name: bounceInDown;
  105. -webkit-animation-duration: 1s;
  106. -webkit-animation-timing-function: ease-out;
  107. -webkit-animation-fill-mode: forwards;
  108. -moz-animation-name: bounceInDown;
  109. -moz-animation-duration: .3s;
  110. -moz-animation-fill-mode: forwards;
  111. -o-animation-name: bounceInDown;
  112. -o-animation-duration: 1s;
  113. -o-animation-timing-function: ease-out;
  114. -o-animation-fill-mode: forwards;
  115. animation-name: bounceInDown;
  116. animation-duration: 1s;
  117. animation-timing-function: ease-out;
  118. animation-fill-mode: forwards;
  119. }
  120. .contentFadeOut {
  121. -webkit-animation-name: bounceOutUp;
  122. -webkit-animation-duration: 1s;
  123. -webkit-animation-timing-function: ease-out;
  124. -webkit-animation-fill-mode: forwards;
  125. -moz-animation-name: bounceOutUp;
  126. -moz-animation-duration: .3s;
  127. -moz-animation-fill-mode: forwards;
  128. -o-animation-name: bounceOutUp;
  129. -o-animation-duration: 1s;
  130. -o-animation-timing-function: ease-out;
  131. -o-animation-fill-mode: forwards;
  132. animation-name: bounceOutUp;
  133. animation-duration: 1s;
  134. animation-timing-function: ease-out;
  135. animation-fill-mode: forwards;
  136. }
  137. .contentZoomOut {
  138. -webkit-animation-name: zoomOut;
  139. -webkit-animation-duration: .3s;
  140. -webkit-animation-fill-mode: forwards;
  141. -moz-animation-name: zoomOut;
  142. -moz-animation-duration: .3s;
  143. -moz-animation-fill-mode: forwards;
  144. -o-animation-name: zoomOut;
  145. -o-animation-duration: .3s;
  146. -o-animation-fill-mode: forwards;
  147. animation-name: zoomOut;
  148. animation-duration: .3s;
  149. animation-fill-mode: forwards;
  150. }
  151. .contentZoomIn {
  152. -webkit-animation-name: zoomIn;
  153. -webkit-animation-duration: .3s;
  154. -webkit-animation-fill-mode: forwards;
  155. -moz-animation-name: zoomIn;
  156. -moz-animation-duration: .3s;
  157. -moz-animation-fill-mode: forwards;
  158. -o-animation-name: zoomIn;
  159. -o-animation-duration: .3s;
  160. -o-animation-fill-mode: forwards;
  161. animation-name: zoomIn;
  162. animation-duration: .3s;
  163. animation-fill-mode: forwards;
  164. }
  165. .shake {
  166. -webkit-animation-name: shake;
  167. -webkit-animation-duration: 1s;
  168. -webkit-animation-timing-function: ease-out;
  169. -webkit-animation-fill-mode: forwards;
  170. -moz-animation-name: shake;
  171. -moz-animation-duration: .3s;
  172. -moz-animation-fill-mode: forwards;
  173. -o-animation-name: shake;
  174. -o-animation-duration: 1s;
  175. -o-animation-timing-function: ease-out;
  176. -o-animation-fill-mode: forwards;
  177. animation-name: shake;
  178. animation-duration: 1s;
  179. animation-timing-function: ease-out;
  180. animation-fill-mode: forwards;
  181. }
  182. /* Loading ------------------------------------------------*/
  183. #loading {
  184. position: fixed;
  185. width: 100%;
  186. height: 2px;
  187. background-color: #2f0d0e;
  188. background-repeat: repeat-x;
  189. z-index: 1;
  190. display: none;
  191. /* Animation */
  192. -webkit-animation-name: moveBackground;
  193. -webkit-animation-duration: .2s;
  194. -webkit-animation-timing-function: linear;
  195. -webkit-animation-iteration-count: infinite;
  196. -moz-animation-name: moveBackground;
  197. -moz-animation-duration: .2s;
  198. -moz-animation-timing-function: linear;
  199. -moz-animation-iteration-count: infinite;
  200. -o-animation-name: moveBackground;
  201. -o-animation-duration: .2s;
  202. -o-animation-timing-function: linear;
  203. -o-animation-iteration-count: infinite;
  204. animation-name: moveBackground;
  205. animation-duration: .2s;
  206. animation-timing-function: linear;
  207. animation-iteration-count: infinite;
  208. }
  209. #loading h1 {
  210. margin: 13px;
  211. color: #ddd;
  212. font-size: 14px;
  213. font-weight: bold;
  214. text-shadow: 0px 1px 0px #000;
  215. text-transform: capitalize;
  216. }
  217. #loading h1 span {
  218. margin-left: 10px;
  219. font-weight: normal;
  220. text-transform: none;
  221. }
  222. #loading.loading {
  223. background-image: url(../img/bar/loading.png);
  224. }
  225. #loading.error {
  226. background-image: url(../img/bar/error.png);
  227. }
  228. /* Header ------------------------------------------------*/
  229. header {
  230. position: fixed;
  231. height: 41px;
  232. width: 100%;
  233. background-color: #333;
  234. background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
  235. background-image: -webkit-linear-gradient(top, #555, #333);
  236. background-image: -moz-linear-gradient(top, #555, #333);
  237. background-image: -o-linear-gradient(top, #555, #333);
  238. background-image: -ms-linear-gradient(top, #555, #333);
  239. background-image: linear-gradient(top, #555, #333);
  240. box-shadow: inset 0px 1px 0px #666, inset 0px -1px 0px #393939, 0px 0px 3px #000;
  241. border-top: 1px solid #222;
  242. z-index: 1;
  243. -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, margin-top .3s;
  244. -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, margin-top .3s;
  245. -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, margin-top .3s;
  246. transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, margin-top .3s;
  247. /* Animation */
  248. -webkit-animation-name: moveDown;
  249. -webkit-animation-duration: .3s;
  250. -webkit-animation-timing-function: ease-out;
  251. -webkit-animation-fill-mode: forwards;
  252. -moz-animation-name: moveDown;
  253. -moz-animation-duration: .3s;
  254. -moz-animation-timing-function: ease-out;
  255. -moz-animation-fill-mode: forwards;
  256. -o-animation-name: moveDown;
  257. -o-animation-duration: .3s;
  258. -o-animation-timing-function: ease-out;
  259. -o-animation-fill-mode: forwards;
  260. animation-name: moveDown;
  261. animation-duration: .3s;
  262. animation-timing-function: ease-out;
  263. animation-fill-mode: forwards;
  264. }
  265. /* Title ------------------------------------------------*/
  266. #title {
  267. position: absolute;
  268. margin: 0px 30%;
  269. width: 40%;
  270. padding: 11px 0px;
  271. color: #fff;
  272. font-size: 16px;
  273. font-weight: bold;
  274. text-align: center;
  275. text-shadow: 0px -1px 0px #000;
  276. }
  277. #title.editable {
  278. cursor: pointer;
  279. }
  280. #title span {
  281. color: #aaa;
  282. font-size: 16px;
  283. font-weight: normal;
  284. }
  285. /* Button ------------------------------------------------*/
  286. header .button {
  287. float: left;
  288. position: absolute;
  289. padding: 7px 10px 8px 10px;
  290. margin: 6px 0px 0px 8px;
  291. font-size: 12px;
  292. font-weight: bold;
  293. color: #fff;
  294. text-shadow: 0px -1px 0px #000;
  295. text-decoration: none !important;
  296. background: #555;
  297. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #555), color-stop(0, #333));
  298. background-image: -webkit-linear-gradient(top, #555 0%, #333 100%);
  299. background-image: -moz-linear-gradient(top, #555 0%, #333 100%);
  300. background-image: -o-linear-gradient(top, #555 0%, #333 100%);
  301. background: linear-gradient(top, #555 0%, #333 100%);
  302. border: 1px solid #222;
  303. border-radius: 3px;
  304. box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0px 1px 0px #444;
  305. cursor: pointer;
  306. }
  307. header .button:hover {
  308. background-color: #5c5c5c;
  309. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 92, 92)), to(rgb(57, 57, 57)));
  310. background-image: -webkit-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
  311. background-image: -moz-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
  312. background-image: -o-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
  313. background-image: -ms-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
  314. background-image: linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
  315. }
  316. header .button:active {
  317. background-color: #393939;
  318. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(68, 68, 68)));
  319. background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
  320. background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
  321. background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
  322. background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
  323. background-image: linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
  324. }
  325. header .button.icon {
  326. float: right;
  327. position: relative;
  328. padding: 7px 11px 4px 11px;
  329. margin: 6px 8px 0px 0px;
  330. font-family: 'FontAwesome';
  331. font-size: 16px;
  332. }
  333. #tools_albums, #tools_album, #tools_photo, #button_signin {
  334. display: none;
  335. }
  336. /* Button Divider ------------------------------------------------*/
  337. header .button_divider {
  338. float: right;
  339. position: relative;
  340. margin: 1px 12px 0px 0px;
  341. width: 1px;
  342. height: 40px;
  343. background-color: transparent;
  344. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(68, 68, 68)), to(rgb(37, 37, 37)));
  345. background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0), rgb(25, 25, 25));
  346. background-image: -moz-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
  347. background-image: -o-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
  348. background-image: -ms-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
  349. background-image: linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
  350. border-right: 1px solid #555;
  351. }
  352. header .button_divider.less {
  353. margin: 1px 6px 0px 6px;
  354. }
  355. /* Search ------------------------------------------------*/
  356. #search {
  357. float: right;
  358. width: 80px;
  359. margin: 7px 12px 0px 0px;
  360. padding: 5px 10px 7px 10px;
  361. background-color: #444;
  362. color: #fff;
  363. border: none;
  364. border: 1px solid #111;
  365. box-shadow: 0px 1px 0px #555;
  366. outline: none;
  367. border-radius: 5px;
  368. opacity: .6;
  369. -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
  370. -moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
  371. -o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
  372. transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
  373. }
  374. #search:focus {
  375. box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333;
  376. opacity: 1;
  377. width: 140px;
  378. }
  379. /* Tools ------------------------------------------------*/
  380. .tools:first-of-type {
  381. margin-right: 6px;
  382. }
  383. .tools {
  384. float: right;
  385. padding: 10px 8px;
  386. color: #aaa;
  387. font-size: 21px;
  388. text-shadow: 0px -1px 0px #222;
  389. cursor: pointer;
  390. }
  391. .tools:hover a {
  392. color: #fff;
  393. }
  394. .tools .icon-star {
  395. color: #f0ef77;
  396. }
  397. .tools .icon-share.active {
  398. color: #ff9737;
  399. }
  400. /* Content ------------------------------------------------*/
  401. #content {
  402. position: absolute;
  403. padding: 41px 0px 33px 0px;
  404. width: 100%;
  405. -webkit-overflow-scrolling: touch;
  406. }
  407. /* Photo ------------------------------------------------*/
  408. .photo {
  409. float: left;
  410. display: inline-block;
  411. width: 206px;
  412. height: 206px;
  413. margin: 30px 0px 0px 30px;
  414. cursor: pointer;
  415. }
  416. .photo img {
  417. position: absolute;
  418. width: 200px;
  419. height: 200px;
  420. background-image: url(../img/checks.png);
  421. border-radius: 3px;
  422. box-shadow: 0px 1px 5px #111;
  423. border: 3px solid #ccc;
  424. }
  425. .photo:hover img, .photo.active img {
  426. box-shadow: 0px 0px 10px #005ecc;
  427. }
  428. /* Album ------------------------------------------------*/
  429. .album {
  430. float: left;
  431. display: inline-block;
  432. width: 206px;
  433. height: 206px;
  434. margin: 30px 0px 0px 30px;
  435. cursor: pointer;
  436. }
  437. .album img:first-child, .album img:nth-child(2) {
  438. -webkit-transform: rotate(0deg) translateY(0px) translateX(0px);
  439. -moz-transform: rotate(0deg) translateY(0px) translateX(0px);
  440. -o-transform: rotate(0deg) translateY(0px) translateX(0px);
  441. transform: rotate(0deg) translateY(0px) translateX(0px);
  442. opacity: 0;
  443. }
  444. .album:hover img:first-child {
  445. -webkit-transform: rotate(-2deg) translateY(10px) translateX(-12px);
  446. -moz-transform: rotate(-2deg) translateY(10px) translateX(-12px);
  447. -o-transform: rotate(-2deg) translateY(10px) translateX(-12px);
  448. transform: rotate(-2deg) translateY(10px) translateX(-12px);
  449. opacity: 1;
  450. }
  451. .album:hover img:nth-child(2) {
  452. -webkit-transform: rotate(5deg) translateY(-8px) translateX(12px);
  453. -moz-transform: rotate(5deg) translateY(-8px) translateX(12px);
  454. -o-transform: rotate(5deg) translateY(-8px) translateX(12px);
  455. transform: rotate(5deg) translateY(-8px) translateX(12px);
  456. opacity: 1;
  457. }
  458. .album img {
  459. position: absolute;
  460. width: 200px;
  461. height: 200px;
  462. background-image: url(../img/checks.png);
  463. border-radius: 3px;
  464. box-shadow: 0px 1px 5px #111;
  465. border: 3px solid #ccc;
  466. }
  467. .album:hover img, .album.active img {
  468. box-shadow: 0px 0px 10px #005ecc;
  469. }
  470. /* Album/Photo Overlay ------------------------------------------------*/
  471. .album .overlay, .photo .overlay {
  472. position: absolute;
  473. width: 200px;
  474. height: 200px;
  475. margin: 3px;
  476. 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+ */
  477. 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+ */
  478. 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+ */
  479. 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+ */
  480. 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+ */
  481. background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* W3C */
  482. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
  483. }
  484. .photo .overlay {
  485. opacity: 0;
  486. }
  487. .photo:hover .overlay, .photo.active .overlay {
  488. opacity: 1;
  489. }
  490. .album .overlay h1, .photo .overlay h1 {
  491. min-height: 19px;
  492. width: 190px;
  493. margin: 153px 0px 3px 15px;
  494. color: #fff;
  495. font-size: 16px;
  496. font-weight: bold;
  497. text-shadow: 0px 1px 0px #000;
  498. overflow: hidden;
  499. }
  500. .album .overlay a {
  501. margin-left: 15px;
  502. font-size: 11px;
  503. color: #aaa;
  504. text-shadow: 0px 1px 0px #000;
  505. }
  506. .photo .overlay a {
  507. margin: 155px 0px 5px 15px;
  508. font-size: 11px;
  509. color: #aaa;
  510. text-shadow: 0px 1px 0px #000;
  511. }
  512. /* Badges ------------------------------------------------*/
  513. .album .badge, .photo .badge {
  514. position: absolute;
  515. margin-top: -1px;
  516. margin-left: 12px;
  517. padding: 12px 7px 3px 7px;
  518. box-shadow: 0px 0px 3px #000;
  519. border-radius: 0px 0px 3px 3px;
  520. border: 1px solid #fff;
  521. border-top: none;
  522. color: #fff;
  523. font-size: 24px;
  524. text-shadow: 0px 1px 0px #000;
  525. opacity: .9;
  526. }
  527. .album .badge.icon-star, .photo .badge.icon-star {
  528. padding: 12px 8px 3px 8px;
  529. }
  530. .album .badge.icon-share, .photo .badge.icon-share {
  531. padding: 12px 6px 3px 8px;
  532. }
  533. .album .badge::after, .photo .badge::after {
  534. content: "";
  535. position: absolute;
  536. margin-top: -12px;
  537. margin-left: -26px;
  538. width: 34px;
  539. height: 5px;
  540. background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  541. 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+ */
  542. background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  543. background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
  544. background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
  545. background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
  546. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  547. opacity: .4;
  548. }
  549. .album .badge.icon-star::after {
  550. margin-left: -28px;
  551. width: 36px;
  552. }
  553. .album .badge.icon-share::after, .photo .badge.icon-share::after {
  554. margin-left: -30px;
  555. width: 38px;
  556. }
  557. .album .badge.icon-reorder::after {
  558. margin-left: -30px;
  559. width: 38px;
  560. }
  561. .album .badge:nth-child(2n), .photo .badge:nth-child(2n) {
  562. margin-left: 57px;
  563. }
  564. .album .badge.red, .photo .badge.red {
  565. background: #d64b4b;
  566. background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
  567. background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
  568. background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
  569. background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
  570. background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
  571. }
  572. .album .badge.blue, .photo .badge.blue {
  573. background: #d64b4b;
  574. background: -webkit-gradient(linear, left top, left bottom, from(#347cd6), to(#2945ab));
  575. background: -webkit-linear-gradient(top, #347cd6, #2945ab);
  576. background: -moz-linear-gradient(top, #347cd6, #2945ab);
  577. background: -ms-linear-gradient(top, #347cd6, #2945ab);
  578. background: -o-linear-gradient(top, #347cd6, #2945ab);
  579. }
  580. /* Divider ------------------------------------------------*/
  581. .divider {
  582. float: left;
  583. width: 100%;
  584. height: 32px;
  585. margin-top: 50px;
  586. opacity: 0;
  587. background-color: #2b2b2b;
  588. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35)));
  589. background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  590. background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  591. background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  592. background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  593. background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  594. box-shadow: 0px 1px 0px #111, inset 0px 1px 0px rgba(255, 255, 255, .1);
  595. }
  596. .divider:first-child {
  597. margin-top: 2px;
  598. }
  599. .divider h1 {
  600. float: left;
  601. margin: 8px 0px 0px 30px;
  602. color: #fff;
  603. font-size: 14px;
  604. font-weight: bold;
  605. text-shadow: 0px -1px 0px #000;
  606. }
  607. /* No Content ------------------------------------------------*/
  608. .no_content {
  609. position: absolute;
  610. top: 50%;
  611. left: 50%;
  612. height: 160px;
  613. width: 180px;
  614. margin-top: -80px;
  615. margin-left: -90px;
  616. padding-top: 20px;
  617. color: rgba(20, 20, 20, 1);
  618. text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
  619. text-align: center;
  620. }
  621. .no_content .icon {
  622. font-size: 120px;
  623. }
  624. .no_content p {
  625. font-size: 18px;
  626. }
  627. /* Overlay ------------------------------------------------*/
  628. .message_overlay {
  629. position: fixed;
  630. width: 100%;
  631. height: 100%;
  632. background-color: rgba(0,0,0,.3);
  633. 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)));
  634. background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  635. background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  636. background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  637. background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  638. background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  639. z-index: 1000;
  640. }
  641. .message {
  642. position: absolute;
  643. display: inline-block;
  644. width: 500px;
  645. margin-left: -250px;
  646. margin-top: -85px;
  647. background-color: #505050;
  648. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42)));
  649. background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  650. background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  651. background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  652. background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  653. background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  654. border-radius: 5px;
  655. border-bottom: 1px solid #000;
  656. 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);
  657. /* Animation */
  658. -webkit-animation-name: bounceInDown;
  659. -webkit-animation-duration: 1s;
  660. -webkit-animation-timing-function: ease-out;
  661. -webkit-animation-fill-mode: forwards;
  662. -moz-animation-name: bounceInDown;
  663. -moz-animation-duration: 1s;
  664. -moz-animation-timing-function: ease-out;
  665. -moz-animation-fill-mode: forwards;
  666. -o-animation-name: bounceInDown;
  667. -o-animation-duration: 1s;
  668. -o-animation-timing-function: ease-out;
  669. -o-animation-fill-mode: forwards;
  670. animation-name: bounceInDown;
  671. animation-duration: 1s;
  672. animation-timing-function: ease-out;
  673. animation-fill-mode: forwards;
  674. }
  675. .message h1 {
  676. float: left;
  677. width: 100%;
  678. padding: 12px 0px;
  679. color: #fff;
  680. font-size: 16px;
  681. font-weight: bold;
  682. text-shadow: 0px -1px 0px #000;
  683. text-align: center;
  684. }
  685. .message .close {
  686. position: absolute;
  687. top: 0px;
  688. right: 0px;
  689. padding: 12px 14px 6px 7px;
  690. color: #aaa;
  691. font-size: 20px;
  692. text-shadow: 0px -1px 0px #111;
  693. cursor: pointer;
  694. }
  695. .message .close:hover {
  696. color: #fff;
  697. }
  698. .message p {
  699. float: left;
  700. width: 90%;
  701. margin-top: 1px;
  702. padding: 12px 5% 15px 5%;
  703. color: #eee;
  704. font-size: 14px;
  705. text-shadow: 0px -1px 0px #222;
  706. line-height: 20px;
  707. }
  708. .message .button {
  709. float: right;
  710. margin: 15px 15px 15px 0px;
  711. padding: 6px 10px 8px 10px;
  712. background-color: #4e4e4e;
  713. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78, 78, 78)), to(rgb(45, 45, 45)));
  714. background-image: -webkit-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
  715. background-image: -moz-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
  716. background-image: -o-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
  717. background-image: -ms-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
  718. background-image: linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
  719. color: #ccc;
  720. font-size: 14px;
  721. font-weight: bold;
  722. text-align: center;
  723. text-shadow: 0px -1px 0px #000;
  724. border-radius: 5px;
  725. border: 1px solid #111;
  726. box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1);
  727. cursor: pointer;
  728. }
  729. .message .button:first-of-type {
  730. margin: 15px 5% 18px 0px !important;
  731. }
  732. .message .button.active {
  733. color: #fff;
  734. box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc;
  735. }
  736. .message .button:hover {
  737. background-color: #565757;
  738. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(86, 87, 87)), to(rgb(57, 57, 57)));
  739. background-image: -webkit-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
  740. background-image: -moz-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
  741. background-image: -o-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
  742. background-image: -ms-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
  743. background-image: linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
  744. }
  745. .message .button:active, .message .button.pressed {
  746. background-color: #393939;
  747. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(75, 76, 76)));
  748. background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
  749. background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
  750. background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
  751. background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
  752. background-image: linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
  753. }
  754. /* Add Album ------------------------------------------------*/
  755. .message.add {
  756. width: 588px;
  757. margin-top: -152px;
  758. margin-left: -294px;
  759. }
  760. .add_album {
  761. float: left;
  762. display: inline-block;
  763. width: 150px;
  764. height: 200px;
  765. margin: 30px 0px 30px 30px;
  766. border-radius: 3px;
  767. border: 3px dashed #777;
  768. cursor: pointer;
  769. text-align: center;
  770. -webkit-transition: border .3s;
  771. -moz-transition: border .3s;
  772. -o-transition: border .3s;
  773. transition: border .3s;
  774. }
  775. .add_album:hover {
  776. border: 3px dashed #fff;
  777. }
  778. .add_album .icon {
  779. margin-top: 55px;
  780. color: #777;
  781. font-family: 'FontAwesome';
  782. font-size: 80px;
  783. text-shadow: 0px 1px 2px #000;
  784. }
  785. .add_album:hover .icon {
  786. color: #fff;
  787. }
  788. .add_album a {
  789. float: left;
  790. width: 100%;
  791. color: #777;
  792. font-size: 14px;
  793. font-weight: bold;
  794. text-shadow: 0px 1px 0px #000;
  795. }
  796. .add_album:hover a {
  797. color: #fff;
  798. }
  799. /* Sign in ------------------------------------------------*/
  800. .sign_in {
  801. float: left;
  802. width: 100%;
  803. margin-top: 1px;
  804. padding: 5px 0px;
  805. color: #eee;
  806. font-size: 14px;
  807. text-shadow: 0px -1px 0px #222;
  808. line-height: 20px;
  809. }
  810. .sign_in input {
  811. float: left;
  812. width: 86%;
  813. padding: 7px 2% 9px 2%;
  814. margin: 0px 5%;
  815. background-color: #444;
  816. color: #fff;
  817. text-shadow: 0px 1px 0px #222;
  818. border: none;
  819. border: 1px solid #111;
  820. box-shadow: 0px 1px 0px #555;
  821. outline: none;
  822. border-radius: 5px;
  823. }
  824. .sign_in input:first-of-type {
  825. margin-bottom: 10px;
  826. }
  827. .sign_in input:focus {
  828. box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc;
  829. }
  830. .sign_in input.error:focus {
  831. box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #cc0007;
  832. }
  833. .message #version {
  834. display: inline-block;
  835. margin-top: 23px;
  836. margin-left: 5%;
  837. color: #888;
  838. text-shadow: 0px -1px 0px #111;
  839. }
  840. .message #version span {
  841. display: none;
  842. }
  843. .message #version span a {
  844. color: #888;
  845. }
  846. /* Copy Link ------------------------------------------------*/
  847. .copylink {
  848. float: left;
  849. width: 95%;
  850. padding: 7px 10px 9px 10px;
  851. margin-top: 10px;
  852. background-color: #444;
  853. color: #fff;
  854. text-shadow: 0px 1px 0px #222;
  855. border: none;
  856. border: 1px solid #111;
  857. box-shadow: 0px 1px 0px #777;
  858. outline: none;
  859. border-radius: 5px;
  860. }
  861. /* Image View ------------------------------------------------*/
  862. #image_view {
  863. position: fixed;
  864. display: none;
  865. width: 100%;
  866. min-height: 100%;
  867. background-color: rgba(30,30,30,.99);
  868. box-shadow: 0px 2px 4px #000;
  869. -webkit-transition: background-color .3s;
  870. }
  871. #image_view.full {
  872. background-color: #111;
  873. }
  874. #image_view #image {
  875. position: absolute;
  876. top: 70px;
  877. right: 30px;
  878. bottom: 30px;
  879. left: 30px;
  880. background-repeat: no-repeat;
  881. background-position: 50% 50%;
  882. background-size: contain;
  883. -webkit-transition: top .3s, bottom .3s, margin-top .3s;
  884. -webkit-animation-name: zoomIn;
  885. -webkit-animation-duration: .3s;
  886. -webkit-animation-fill-mode: forwards;
  887. -moz-animation-name: zoomIn;
  888. -moz-animation-duration: .3s;
  889. -moz-animation-fill-mode: forwards;
  890. -o-animation-name: zoomIn;
  891. -o-animation-duration: .3s;
  892. -o-animation-fill-mode: forwards;
  893. animation-name: zoomIn;
  894. animation-duration: .3s;
  895. animation-fill-mode: forwards;
  896. }
  897. #image_view #image.small {
  898. top: 50%;
  899. right: auto;
  900. bottom: auto;
  901. left: 50%;
  902. }
  903. /* Previous/Next Buttons ------------------------------------------------*/
  904. #image_view a {
  905. position: fixed;
  906. top: 50%;
  907. margin-top: -10px;
  908. color: #fff;
  909. font-size: 50px;
  910. text-shadow: 0px 1px 2px #000;
  911. cursor: pointer;
  912. opacity: .1;
  913. z-index: 1;
  914. }
  915. #image_view a:hover {
  916. opacity: .9;
  917. }
  918. #image_view a#previous {
  919. left: 20px;
  920. -webkit-transition: left .3s;
  921. }
  922. #image_view.full a#previous {
  923. left: -50px;
  924. }
  925. #image_view a#next {
  926. right: 20px;
  927. -webkit-transition: right .3s
  928. }
  929. #image_view.full a#next {
  930. right: -50px;
  931. }
  932. /* InfoBox ------------------------------------------------*/
  933. #infobox_overlay {
  934. z-index: 2;
  935. position: fixed;
  936. width: 100%;
  937. height: 100%;
  938. background-color: rgba(0,0,0,.7);
  939. -webkit-animation-name: fadeIn;
  940. -webkit-animation-duration: .5s;
  941. -webkit-animation-fill-mode: forwards;
  942. -moz-animation-name: fadeIn;
  943. -moz-animation-duration: .5s;
  944. -moz-animation-fill-mode: forwards;
  945. -o-animation-name: fadeIn;
  946. -o-animation-duration: .5s;
  947. -o-animation-fill-mode: forwards;
  948. animation-name: fadeIn;
  949. animation-duration: .5s;
  950. animation-fill-mode: forwards;
  951. }
  952. #infobox {
  953. z-index: 3;
  954. position: fixed;
  955. right: -320px;
  956. width: 300px;
  957. height: 100%;
  958. background-color: rgba(20,20,20,0.98);
  959. box-shadow: -1px 0px 2px #000;
  960. display: none;
  961. -webkit-user-select: text;
  962. -moz-user-select: text;
  963. -o-user-select: text;
  964. user-select: text;
  965. -webkit-transition: right .5s ease-out;
  966. -moz-transition: right .5s;
  967. -o-transition: right .5s;
  968. transition: right .5s;
  969. }
  970. #infobox .wrapper {
  971. float: left;
  972. height: 100%;
  973. overflow: scroll;
  974. }
  975. #infobox .header {
  976. float: left;
  977. height: 41px;
  978. width: 100%;
  979. background-color: #1d1d1d;
  980. background-image: -webkit-gradient(linear, left top, left bottom, from(#1d1d1d), to(#050505));
  981. background-image: -webkit-linear-gradient(top, #1d1d1d, #050505);
  982. background-image: -moz-linear-gradient(top, #1d1d1d, #050505);
  983. background-image: -o-linear-gradient(top, #1d1d1d, #050505);
  984. background-image: -ms-linear-gradient(top, #1d1d1d, #050505);
  985. background-image: linear-gradient(top, #1d1d1d, #050505);
  986. box-shadow: inset 0px 1px 0px #111, inset 0px -1px 0px #000;
  987. border-top: 1px solid #000;
  988. }
  989. #infobox .header h1 {
  990. position: absolute;
  991. margin: 0px 30%;
  992. width: 40%;
  993. margin-top: 11px;
  994. color: #fff;
  995. font-size: 16px;
  996. font-weight: bold;
  997. text-align: center;
  998. text-shadow: 0px -1px 0px #000;
  999. }
  1000. #infobox .header a {
  1001. float: right;
  1002. padding: 10px 15px;
  1003. color: #fff;
  1004. font-size: 21px;
  1005. font-weight: bold;
  1006. text-shadow: 0px -1px 0px #000;
  1007. opacity: .5;
  1008. cursor: pointer;
  1009. }
  1010. #infobox .header a:hover {
  1011. opacity: 1;
  1012. }
  1013. #infobox .separater {
  1014. float: left;
  1015. width: 100%;
  1016. height: 27px;
  1017. background-color: #2b2b2b;
  1018. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35)));
  1019. background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  1020. background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  1021. background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  1022. background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  1023. background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
  1024. box-shadow: 0px 1px 0px #000, inset 0px 1px 0px rgba(255, 255, 255, .1);
  1025. }
  1026. #infobox .separater h1 {
  1027. margin: 5px 0px 0px 15px;
  1028. color: #fff;
  1029. font-size: 14px;
  1030. font-weight: bold;
  1031. text-shadow: 0px -1px 0px #000;
  1032. }
  1033. #infobox table {
  1034. float: left;
  1035. margin: 10px 0px 15px 15px;
  1036. }
  1037. #infobox table tr td {
  1038. padding: 5px 0px;
  1039. color: #fff;
  1040. font-size: 14px;
  1041. line-height: 19px;
  1042. }
  1043. #infobox table tr td:first-child {
  1044. width: 110px;
  1045. }
  1046. #infobox table tr td:last-child {
  1047. padding-right: 10px;
  1048. }
  1049. #infobox .bumper {
  1050. float: left;
  1051. width: 100%;
  1052. height: 35px;
  1053. }
  1054. #infobox #edit_title,
  1055. #infobox #edit_description {
  1056. display: inline;
  1057. margin-left: 3px;
  1058. width: 20px;
  1059. height: 5px;
  1060. cursor: pointer;
  1061. }
  1062. /* ContextMenu ------------------------------------------------*/
  1063. .contextmenu_bg {
  1064. position: fixed;
  1065. height: 100%;
  1066. width: 100%;
  1067. z-index: 1000;
  1068. }
  1069. .contextmenu {
  1070. position: fixed;
  1071. top: 110%;
  1072. left: 110%;
  1073. padding: 5px 0px;
  1074. background-color: #393939;
  1075. background-image: -webkit-gradient(linear, left top, left bottom, from(#393939), to(#2d2d2d));
  1076. background-image: -webkit-linear-gradient(top, #444, #2d2d2d);
  1077. background-image: -moz-linear-gradient(top, #393939, #2d2d2d);
  1078. background-image: -o-linear-gradient(top, #393939, #2d2d2d);
  1079. background-image: -ms-linear-gradient(top, #393939, #2d2d2d);
  1080. background-image: linear-gradient(top, #393939, #2d2d2d);
  1081. border: 1px solid rgba(0,0,0,0.7);
  1082. border-bottom: 1px solid rgba(0,0,0,.9);
  1083. border-radius: 5px;
  1084. 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);
  1085. opacity: .98;
  1086. z-index: 1001;
  1087. }
  1088. /* Items ------------------------------------------------*/
  1089. .contextmenu tr {
  1090. font-size: 14px;
  1091. color: #eee;
  1092. text-shadow: 0px -1px 0px rgba(0,0,0,.7);
  1093. cursor: pointer;
  1094. }
  1095. .contextmenu tr:hover {
  1096. background-color: #6a84f2;
  1097. background-image: -webkit-gradient(linear, left top, left bottom, from(#6a84f2), to(#3959ef));
  1098. background-image: -webkit-linear-gradient(top, #6a84f2, #3959ef);
  1099. background-image: -moz-linear-gradient(top, #6a84f2, #3959ef);
  1100. background-image: -o-linear-gradient(top, #6a84f2, #3959ef);
  1101. background-image: -ms-linear-gradient(top, #6a84f2, #3959ef);
  1102. background-image: linear-gradient(top, #6a84f2, #3959ef);
  1103. }
  1104. .contextmenu tr.separator {
  1105. float: left;
  1106. height: 1px;
  1107. width: 100%;
  1108. background-color: #222;
  1109. box-shadow: 0px 1px 0px #555;
  1110. margin: 4px 0px 5px 0px;
  1111. cursor: inherit;
  1112. }
  1113. .contextmenu tr.separator:hover {
  1114. background-color: #222;
  1115. background-image: none;
  1116. }
  1117. .contextmenu tr td {
  1118. padding: 5px 20px 5px 10px;
  1119. -webkit-transition: none;
  1120. -moz-transition: none;
  1121. -o-transition: none;
  1122. transition: none;
  1123. }
  1124. .contextmenu tr:hover td {
  1125. color: #fff;
  1126. box-shadow: inset 0px 1px 0px rgba(255,255,255,.1);
  1127. text-shadow: 0px -1px 0px rgba(0,0,0,.7);
  1128. }
  1129. .contextmenu tr a {
  1130. float: left;
  1131. width: 10px;
  1132. margin-right: 10px;
  1133. text-align: center;
  1134. }
  1135. /* Upload ------------------------------------------------*/
  1136. #upload {
  1137. display: none;
  1138. }
  1139. .upload_overlay {
  1140. position: fixed;
  1141. width: 100%;
  1142. height: 100%;
  1143. background-color: rgba(0,0,0,.3);
  1144. 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)));
  1145. background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  1146. background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  1147. background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  1148. background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  1149. background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
  1150. z-index: 1000;
  1151. }
  1152. .upload_message {
  1153. position: absolute;
  1154. display: inline-block;
  1155. width: 200px;
  1156. margin-left: -100px;
  1157. margin-top: -85px;
  1158. background-color: #505050;
  1159. background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42)));
  1160. background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  1161. background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  1162. background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  1163. background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  1164. background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
  1165. border-radius: 5px;
  1166. border-bottom: 1px solid #000;
  1167. 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);
  1168. /* Animation */
  1169. -webkit-animation-name: bounceInDown;
  1170. -webkit-animation-duration: 1s;
  1171. -webkit-animation-timing-function: ease-out;
  1172. -webkit-animation-fill-mode: forwards;
  1173. -moz-animation-name: bounceInDown;
  1174. -moz-animation-duration: 1s;
  1175. -moz-animation-timing-function: ease-out;
  1176. -moz-animation-fill-mode: forwards;
  1177. -o-animation-name: bounceInDown;
  1178. -o-animation-duration: 1s;
  1179. -o-animation-timing-function: ease-out;
  1180. -o-animation-fill-mode: forwards;
  1181. animation-name: bounceInDown;
  1182. animation-duration: 1s;
  1183. animation-timing-function: ease-out;
  1184. animation-fill-mode: forwards;
  1185. }
  1186. .upload_message a {
  1187. float: left;
  1188. margin: 35px 69px 5px 69px;
  1189. color: #fff;
  1190. font-size: 80px;
  1191. text-shadow: 0px 1px 2px #000;
  1192. z-index: 2;
  1193. /* Animation */
  1194. -webkit-animation-name: pulse;
  1195. -webkit-animation-duration: 2s;
  1196. -webkit-animation-timing-function: ease-in-out;
  1197. -webkit-animation-iteration-count: infinite;
  1198. -moz-animation-name: pulse;
  1199. -moz-animation-duration: 2s;
  1200. -moz-animation-timing-function: ease-in-out;
  1201. -moz-animation-iteration-count: infinite;
  1202. -o-animation-name: pulse;
  1203. -o-animation-duration: 2s;
  1204. -o-animation-timing-function: ease-in-out;
  1205. -o-animation-iteration-count: infinite;
  1206. animation-name: pulse;
  1207. animation-duration: 2s;
  1208. animation-timing-function: ease-in-out;
  1209. animation-iteration-count: infinite;
  1210. }
  1211. .upload_message p {
  1212. float: left;
  1213. width: 200px;
  1214. margin: 10px 0px;
  1215. color: #fff;
  1216. font-size: 14px;
  1217. text-align: center;
  1218. text-shadow: 0px -1px 0px #000;
  1219. }
  1220. .upload_message .progressbar {
  1221. float: left;
  1222. width: 170px;
  1223. height: 25px;
  1224. margin: 15px;
  1225. background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), #101010;
  1226. 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);
  1227. 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);
  1228. background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -o-linear-gradient(top, #101010, #1f1f1f);
  1229. 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);
  1230. background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), linear-gradient(top, #101010, #1f1f1f);
  1231. border: 1px solid #000;
  1232. box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0px 0px 2px #111;
  1233. border-radius: 5px;
  1234. /* Animation */
  1235. -webkit-animation-name: moveBackground;
  1236. -webkit-animation-duration: .6s;
  1237. -webkit-animation-timing-function: linear;
  1238. -webkit-animation-iteration-count: infinite;
  1239. -moz-animation-name: moveBackground;
  1240. -moz-animation-duration: .6s;
  1241. -moz-animation-timing-function: linear;
  1242. -moz-animation-iteration-count: infinite;
  1243. -o-animation-name: moveBackground;
  1244. -o-animation-duration: .6s;
  1245. -o-animation-timing-function: linear;
  1246. -o-animation-iteration-count: infinite;
  1247. animation-name: moveBackground;
  1248. animation-duration: .6s;
  1249. animation-timing-function: linear;
  1250. animation-iteration-count: infinite;
  1251. }
  1252. .upload_message .progressbar div {
  1253. float: left;
  1254. width: 0%;
  1255. height: 100%;
  1256. box-shadow: 0 1px 0 #000, 1px 0px 2px #000;
  1257. background-color: #f5f2f7;
  1258. background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f2f7), to(#c7c6c8));
  1259. background-image: -webkit-linear-gradient(top, #f5f2f7, #c7c6c8);
  1260. background-image: -moz-linear-gradient(top, #f5f2f7, #c7c6c8);
  1261. background-image: -o-linear-gradient(top, #f5f2f7, #c7c6c8);
  1262. background-image: -ms-linear-gradient(top, #f5f2f7, #c7c6c8);
  1263. background-image: linear-gradient(top, #f5f2f7, #c7c6c8);
  1264. border-radius: 5px;
  1265. -webkit-transition: width .2s, opacity .5;
  1266. -moz-transition: width .2s, opacity .5;
  1267. -o-transition: width .2s, opacity .5;
  1268. transition: width .2s, opacity .5;
  1269. }
  1270. /* Screen behavior -------------------------------------------------*/
  1271. @media only screen and (max-width: 900px) {
  1272. #title { margin: 0px 30%; width: 50%; }
  1273. #title.view { margin: 11px 20% 0px 20%; width: 60%; }
  1274. #title span { display: none; }
  1275. }
  1276. @media only screen and (max-width: 640px) {
  1277. #title { display: none; }
  1278. #title.view { display: block; margin: 11px 20% 0px 15%; width: 65%; }
  1279. #button_move { display: none; }
  1280. #button_archive { display: none; }
  1281. .center { top: 0px; left: 0px; }
  1282. .album { margin: 40px 0px 0px 50px; }
  1283. .photo { margin: 40px 0px 0px 50px; }
  1284. .message {
  1285. position: fixed;
  1286. width: 100%;
  1287. height: 100%;
  1288. margin: 1px 0px 0px 0px !important;
  1289. border-radius: 0px;
  1290. /* Animation */
  1291. -webkit-animation-name: moveUp;
  1292. -webkit-animation-duration: .3s;
  1293. -moz-animation-name: moveUp;
  1294. -moz-animation-duration: .3s;
  1295. -o-animation-name: moveUp;
  1296. -o-animation-duration: .3s;
  1297. animation-name: moveUp;
  1298. animation-duration: .3s;
  1299. }
  1300. .message.add {
  1301. width: 100%;
  1302. margin-top: 0px;
  1303. }
  1304. .add_album {
  1305. width: 88%;
  1306. height: 100px;
  1307. margin: 30px 5% -10px 5%;
  1308. }
  1309. .add_album .icon {
  1310. margin-top: 18px;
  1311. font-size: 50px;
  1312. }
  1313. }