style.css 62 KB

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