Untitled

SUBMITTED BY: Guest

DATE: Nov. 30, 2013, 9:19 p.m.

FORMAT: Text only

SIZE: 5.9 kB

Raw Download

HITS: 1122

Report
  1. /*-------------------------
  2. Simple reset
  3. --------------------------*/
  6. *{
  7. margin:0;
  8. padding:0;
  9. }
  12. /*-------------------------
  13. General Styles
  14. --------------------------*/
  17. html{
  18. overflow:hidden;
  19. }
  21. a, a:visited {
  22. outline:none;
  23. color:#389dc1;
  24. }
  26. a:hover{
  27. text-decoration:none;
  28. }
  30. section, footer, header, aside{
  31. display: block;
  32. }
  35. /*-------------------------
  36. The main page elements
  37. --------------------------*/
  40. body{
  41. font:15px/1.3 'Raleway', sans-serif;
  42. color: #fff;
  43. width:100%;
  44. height:100%;
  45. position:absolute;
  46. overflow:hidden;
  47. }
  49. #stage{
  50. width:100%;
  51. height:100%;
  52. position:absolute;
  53. top:0;
  54. left:0;
  56. transition:top 0.4s;
  57. }
  59. #stage > div{ /* The step divs */
  60. height:100%;
  61. position:relative;
  62. }
  65. #stage h1{
  66. font-weight:normal;
  67. font-size:48px;
  68. text-align:center;
  69. color:#fff;
  70. margin-bottom:60px;
  71. }
  73. #stage h2{
  74. font-weight: normal;
  75. font-size: 14px;
  76. font-family: Arial, Helvetica, sans-serif;
  77. margin: -40px 0 45px;
  78. font-style: italic;
  79. }
  81. .content{
  82. position:absolute;
  83. text-align:center;
  84. left:0;
  85. top:50%;
  86. width:100%;
  87. }
  89. .content input[type=file]{
  90. display:none;
  91. }
  93. a.back{
  94. width: 32px;
  95. height: 32px;
  96. background: url('../img/icons.svg') no-repeat -192px 0;
  97. position: absolute;
  98. cursor: pointer;
  99. top: 50px;
  100. left: 50%;
  101. z-index: 10;
  102. opacity: 0.8;
  103. margin-left: -16px;
  104. display:none;
  105. }
  107. a.back:hover{
  108. opacity:1;
  109. }
  112. /*-------------------------
  113. Conditional classes
  114. --------------------------*/
  117. [class*="if-"]{
  118. display:none;
  119. }
  121. body.encrypt .if-encrypt{
  122. display:block;
  123. }
  125. body.decrypt .if-decrypt{
  126. display:block;
  127. }
  130. /*-------------------------
  131. Button styles
  132. --------------------------*/
  135. .button{
  136. width:240px;
  137. height:70px;
  138. text-align:center;
  139. text-decoration: none !important;
  140. color:#fff !important;
  141. text-transform: uppercase;
  142. font-weight: bold;
  143. border-radius:1px;
  144. display:block;
  145. line-height:70px;
  146. box-shadow:3px 3px 0 rgba(0,0,0,0.08);
  147. cursor: pointer;
  148. font-size:18px;
  149. margin:10px auto;
  150. opacity:0.9;
  151. }
  153. .button:hover{
  154. opacity:1;
  155. }
  157. .button::before{
  158. content:'';
  159. background: url(../img/icons.svg) no-repeat;
  160. display: inline-block;
  161. width: 32px;
  162. height: 32px;
  163. vertical-align: middle;
  164. padding-right: 13px;
  165. }
  167. .button.green{
  168. background-color:#92cd84;
  169. }
  171. .button.magenta{
  172. background-color:#e661b7;
  173. }
  175. .button.blue{
  176. background-color:#798dd7;
  177. }
  179. .button.red{
  180. background-color: #c15645;
  181. }
  183. /* Styles for specific buttons */
  185. .button.browse{
  186. width:180px;
  187. }
  189. .button.process{
  190. width:190px;
  191. }
  193. .button.download{
  194. width:216px;
  195. }
  197. .button.encrypt::before{
  198. background-position: 0 0;
  199. }
  201. .button.decrypt::before{
  202. background-position: -96px 0;
  203. }
  205. .button.browse::before{
  206. background-position: -240px 0;
  207. }
  209. .button.process::before{
  210. background-position: -142px 0;
  211. }
  213. .button.download:before{
  214. background-position:-48px 0;
  215. }
  218. /*-------------------------
  219. The steps
  220. --------------------------*/
  223. #step1{
  224. background-color:#75c0d1;
  225. }
  227. body.encrypt #step2{
  228. background-color: #9ad58c;
  229. }
  231. body.decrypt #step2{
  232. background-color: #E7A8D1;
  233. }
  235. #step3{
  236. background-color:#d5d788;
  237. }
  239. #step3 input[type=password]{
  240. background-color: #fff;
  241. border: none;
  242. padding: 8px 18px;
  243. line-height: 1;
  244. font: inherit;
  245. display: inline-block;
  246. outline: none;
  247. width: 400px;
  248. margin-bottom: 18px;
  249. border-radius: 2px;
  250. box-shadow: 3px 3px 0 rgba(0,0,0,0.05);
  251. font-size: 36px;
  252. color: #555;
  253. }
  255. #step4{
  256. background-color:#aa8cd8;
  257. }
  259. #step1 .content{ margin-top: -140px;}
  260. #step2 .content{ margin-top:-110px;}
  261. #step3 .content{ margin-top: -157px;}
  262. #step4 .content{ margin-top: -100px;}
  265. /*----------------------------
  266. The Demo Footer
  267. -----------------------------*/
  270. footer{
  272. width: 770px;
  273. font: normal 16px Arial, Helvetica, sans-serif;
  274. padding: 15px 35px;
  275. position: fixed;
  276. bottom: 0;
  277. left: 50%;
  278. margin-left: -420px;
  280. background-color:#1f1f1f;
  281. background-image:linear-gradient(to bottom, #1f1f1f, #101010);
  283. border-radius:2px 2px 0 0;
  284. box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
  285. z-index:1;
  286. }
  288. footer a.tz{
  289. font-weight:normal;
  290. font-size:16px !important;
  291. text-decoration:none !important;
  292. display:block;
  293. margin-right: 300px;
  294. text-overflow:ellipsis;
  295. white-space: nowrap;
  296. color:#bfbfbf !important;
  297. z-index:1;
  298. }
  300. footer a.tz:before{
  301. content: '';
  302. background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;
  303. width: 138px;
  304. height: 20px;
  305. display: inline-block;
  306. position: relative;
  307. bottom: -3px;
  308. }
  310. footer .close{
  311. position: absolute;
  312. cursor: pointer;
  313. width: 8px;
  314. height: 8px;
  315. background: url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;
  316. top:10px;
  317. right:10px;
  318. z-index: 3;
  319. }
  321. footer #tzine-actions{
  322. position: absolute;
  323. top: 8px;
  324. width: 500px;
  325. right: 50%;
  326. margin-right: -650px;
  327. text-align: right;
  328. z-index: 2;
  329. }
  331. footer #tzine-actions iframe{
  332. display: inline-block;
  333. height: 21px;
  334. width: 95px;
  335. position: relative;
  336. float: left;
  337. margin-top: 11px;
  338. }
comments powered by Disqus