Fabriciool

Untitled

Jan 19th, 2014
194
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.65 KB | None | 0 0
  1. /* Reset CSS */
  2. html, body, div, span, applet, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. a, abbr, acronym, address, big, cite, code,
  5. del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var,
  7. b, u, i, center,
  8. dl, dt, dd, ol, ul, li,
  9. fieldset, form, label, legend,
  10. table, caption, tbody, tfoot, thead, tr, th, td {
  11. margin: 0;
  12. padding: 0;
  13. border: 0;
  14. outline: 0;
  15. font-size: 100%;
  16. vertical-align: baseline;
  17. background: transparent;
  18. }
  19. body {
  20. background: #DCDDDF url(http://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
  21. color: #000;
  22. font: 14px Arial;
  23. margin: 0 auto;
  24. padding: 0;
  25. position: relative;
  26. }
  27. h1{ font-size:28px;}
  28. h2{ font-size:26px;}
  29. h3{ font-size:18px;}
  30. h4{ font-size:16px;}
  31. h5{ font-size:14px;}
  32. h6{ font-size:12px;}
  33. h1,h2,h3,h4,h5,h6{ color:#563D64;}
  34. small{ font-size:10px;}
  35. b, strong{ font-weight:bold;}
  36. a{ text-decoration: none; }
  37. a:hover{ text-decoration: underline; }
  38. .left { float:left; }
  39. .right { float:right; }
  40. .alignleft { float: left; margin-right: 15px; }
  41. .alignright { float: right; margin-left: 15px; }
  42. .clearfix:after,
  43. form:after {
  44. content: ".";
  45. display: block;
  46. height: 0;
  47. clear: both;
  48. visibility: hidden;
  49. }
  50. .container { margin: 25px auto; position: relative; width: 900px; }
  51. #content {
  52. background: #f9f9f9;
  53. background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  54. background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  55. background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  56. background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  57. background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  58. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  59. -webkit-box-shadow: 0 1px 0 #fff inset;
  60. -moz-box-shadow: 0 1px 0 #fff inset;
  61. -ms-box-shadow: 0 1px 0 #fff inset;
  62. -o-box-shadow: 0 1px 0 #fff inset;
  63. box-shadow: 0 1px 0 #fff inset;
  64. border: 1px solid #c4c6ca;
  65. margin: 0 auto;
  66. padding: 25px 0 0;
  67. position: relative;
  68. text-align: center;
  69. text-shadow: 0 1px 0 #fff;
  70. width: 400px;
  71. }
  72. #content h1 {
  73. color: #7E7E7E;
  74. font: bold 25px Helvetica, Arial, sans-serif;
  75. letter-spacing: -0.05em;
  76. line-height: 20px;
  77. margin: 10px 0 30px;
  78. }
  79. #content h1:before,
  80. #content h1:after {
  81. content: "";
  82. height: 1px;
  83. position: absolute;
  84. top: 10px;
  85. width: 27%;
  86. }
  87. #content h1:after {
  88. background: rgb(126,126,126);
  89. background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  90. background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  91. background: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  92. background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  93. background: linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  94. right: 0;
  95. }
  96. #content h1:before {
  97. background: rgb(126,126,126);
  98. background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  99. background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  100. background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  101. background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  102. background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  103. left: 0;
  104. }
  105. #content:after,
  106. #content:before {
  107. background: #f9f9f9;
  108. background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  109. background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  110. background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  111. background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  112. background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  113. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  114. border: 1px solid #c4c6ca;
  115. content: "";
  116. display: block;
  117. height: 100%;
  118. left: -1px;
  119. position: absolute;
  120. width: 100%;
  121. }
  122. #content:after {
  123. -webkit-transform: rotate(2deg);
  124. -moz-transform: rotate(2deg);
  125. -ms-transform: rotate(2deg);
  126. -o-transform: rotate(2deg);
  127. transform: rotate(2deg);
  128. top: 0;
  129. z-index: -1;
  130. }
  131. #content:before {
  132. -webkit-transform: rotate(-3deg);
  133. -moz-transform: rotate(-3deg);
  134. -ms-transform: rotate(-3deg);
  135. -o-transform: rotate(-3deg);
  136. transform: rotate(-3deg);
  137. top: 0;
  138. z-index: -2;
  139. }
  140. #content form { margin: 0 20px; position: relative }
  141. #content form input[type="text"],
  142. #content form input[type="password"] {
  143. -webkit-border-radius: 3px;
  144. -moz-border-radius: 3px;
  145. -ms-border-radius: 3px;
  146. -o-border-radius: 3px;
  147. border-radius: 3px;
  148. -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  149. -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  150. -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  151. -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  152. box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  153. -webkit-transition: all 0.5s ease;
  154. -moz-transition: all 0.5s ease;
  155. -ms-transition: all 0.5s ease;
  156. -o-transition: all 0.5s ease;
  157. transition: all 0.5s ease;
  158. background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
  159. border: 1px solid #c8c8c8;
  160. color: #777;
  161. font: 13px Helvetica, Arial, sans-serif;
  162. margin: 0 0 10px;
  163. padding: 15px 10px 15px 40px;
  164. width: 80%;
  165. }
  166. #content form input[type="text"]:focus,
  167. #content form input[type="password"]:focus {
  168. -webkit-box-shadow: 0 0 2px #ed1c24 inset;
  169. -moz-box-shadow: 0 0 2px #ed1c24 inset;
  170. -ms-box-shadow: 0 0 2px #ed1c24 inset;
  171. -o-box-shadow: 0 0 2px #ed1c24 inset;
  172. box-shadow: 0 0 2px #ed1c24 inset;
  173. background-color: #fff;
  174. border: 1px solid #ed1c24;
  175. outline: none;
  176. }
  177. #username { background-position: 10px 10px !important }
  178. #password { background-position: 10px -53px !important }
  179. #content form input[type="submit"] {
  180. background: rgb(254,231,154);
  181. background: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
  182. background: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  183. background: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  184. background: -ms-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  185. background: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  186. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
  187. -webkit-border-radius: 30px;
  188. -moz-border-radius: 30px;
  189. -ms-border-radius: 30px;
  190. -o-border-radius: 30px;
  191. border-radius: 30px;
  192. -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  193. -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  194. -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  195. -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  196. box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  197. border: 1px solid #D69E31;
  198. color: #85592e;
  199. cursor: pointer;
  200. float: left;
  201. font: bold 15px Helvetica, Arial, sans-serif;
  202. height: 35px;
  203. margin: 20px 0 35px 15px;
  204. position: relative;
  205. text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  206. width: 120px;
  207. }
  208. #content form input[type="submit"]:hover {
  209. background: rgb(254,193,81);
  210. background: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
  211. background: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  212. background: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  213. background: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  214. background: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  215. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
  216. }
  217. #content form div a {
  218. color: #004a80;
  219. float: right;
  220. font-size: 12px;
  221. margin: 30px 15px 0 0;
  222. text-decoration: underline;
  223. }
  224. .button {
  225. background: rgb(247,249,250);
  226. background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  227. background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  228. background: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  229. background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  230. background: linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  231. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
  232. -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  233. -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  234. -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  235. -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  236. box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  237. -webkit-border-radius: 0 0 5px 5px;
  238. -moz-border-radius: 0 0 5px 5px;
  239. -o-border-radius: 0 0 5px 5px;
  240. -ms-border-radius: 0 0 5px 5px;
  241. border-radius: 0 0 5px 5px;
  242. border-top: 1px solid #CFD5D9;
  243. padding: 15px 0;
  244. }
  245. .button a {
  246. background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
  247. color: #7E7E7E;
  248. font-size: 17px;
  249. padding: 2px 0 2px 40px;
  250. text-decoration: none;
  251. -webkit-transition: all 0.3s ease;
  252. -moz-transition: all 0.3s ease;
  253. -ms-transition: all 0.3s ease;
  254. -o-transition: all 0.3s ease;
  255. transition: all 0.3s ease;
  256. }
  257. .button a:hover {
  258. background-position: 0 -135px;
  259. color: #00aeef;
  260. }
Advertisement
Add Comment
Please, Sign In to add comment