Advertisement
bhushan23

loginstyle

Feb 24th, 2013
709
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.24 KB | None | 0 0
  1. html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}
  2. a { text-decoration:none }
  3. .container { width:262px; margin:0 auto; padding-top:200px; }
  4.  
  5. #bar { width:100%; height:35px; padding:15px 0; background:url(../images/bar.png) repeat-x; }
  6. #container { width:960px; margin:0 auto; }
  7.  
  8. /*-------LOGIN STARTS HERE -------*/
  9.  
  10. /* Login Container (default to float:right) */
  11. #loginContainer {
  12.     position:relative;
  13.     float:right;
  14.     font-size:12px;
  15. }
  16.  
  17. /* Login Button */
  18. #loginButton {
  19.     display:inline-block;
  20.     float:right;
  21.     background:#d2e0ea url(../images/buttonbg.png) repeat-x;
  22.     border:1px solid #899caa;
  23.     border-radius:3px;
  24.     -moz-border-radius:3px;
  25.     position:relative;
  26.     z-index:30;
  27.     cursor:pointer;
  28. }
  29.  
  30. #signupButton {
  31.     display:inline-block;
  32.     float:right;
  33.     background:#d6e0ea url(../images/buttonbg.png) repeat-x;
  34.     border:1px solid #899caa;
  35.     border-radius:7px;
  36.     -moz-border-radius:7px;
  37.     position:relative;
  38.     z-index:50;
  39.     cursor:pointer;
  40. }
  41. /* Login Button Text */
  42. #loginButton span {
  43.     color:#445058;
  44.     font-size:14px;
  45.     font-weight:bold;
  46.     text-shadow:1px 1px #fff;
  47.     padding:7px 29px 9px 10px;
  48.     background:url(../images/loginArrow.png) no-repeat 53px 7px;
  49.     display:block
  50. }
  51.  
  52. #loginButton:hover {
  53.     background:url(../images/buttonbgHover.png) repeat-x;
  54. }
  55.  
  56. /* Login Box */
  57. #loginBox {
  58.     position:absolute;
  59.     top:34px;
  60.     right:0;
  61.     display:none;
  62.     z-index:29;
  63. }
  64.  
  65. /* If the Login Button has been clicked */    
  66. #loginButton.active {
  67.     border-radius:3px 3px 0 0;
  68. }
  69.  
  70. #loginButton.active span {
  71.     background-position:53px -76px;
  72. }
  73.  
  74. /* A Line added to overlap the border */
  75. #loginButton.active em {
  76.     position:absolute;
  77.     width:100%;
  78.     height:1px;
  79.     background:#d2e0ea;
  80.     bottom:-1px;
  81. }
  82.  
  83. /* Login Form */
  84. #loginForm {
  85.     width:248px;
  86.     border:1px solid #899caa;
  87.     border-radius:3px 0 3px 3px;
  88.     -moz-border-radius:3px 0 3px 3px;
  89.     margin-top:-1px;
  90.     background:#d2e0ea;
  91.     padding:6px;
  92. }
  93. #loginForm fieldset {
  94.     margin:0 0 12px 0;
  95.     display:block;
  96.     border:0;
  97.     padding:0;
  98. }
  99. #signupForm {
  100.     width:80%;
  101.     border:1px solid #899caa;
  102.     border-radius:3px 0 3px 3px;
  103.     -moz-border-radius:3px 0 3px 3px;
  104.     margin-top:-1px;
  105.     background:#d2e0ea;
  106.     padding:6px;
  107. }
  108.  
  109. #signupForm fieldset {
  110.     margin:0 0 12px 0;
  111.     display:block;
  112.     border:0;
  113.     padding:0;
  114. }
  115.  
  116. fieldset#body {
  117.     background:#fff;
  118.     border-radius:3px;
  119.     -moz-border-radius:3px;
  120.     padding:10px 13px;
  121.     margin:0;
  122. }
  123.  
  124. #loginForm #checkbox {
  125.     width:auto;
  126.     margin:1px 9px 0 0;
  127.     float:left;
  128.     padding:0;
  129.     border:0;
  130.     *margin:-3px 9px 0 0; /* IE7 Fix */
  131. }
  132.  
  133. #signupForm #checkbox {
  134.     width:auto;
  135.     margin:1px 9px 0 0;
  136.     float:left;
  137.     padding:0;
  138.     border:0;
  139.     *margin:-3px 9px 0 0; /* IE7 Fix */
  140. }
  141.  
  142. #body label {
  143.     color:#3a454d;
  144.     margin:9px 0 0 0;
  145.     display:block;
  146.     float:left;
  147. }
  148.  
  149. #loginForm #body fieldset label {
  150.     display:block;
  151.     float:none;
  152.     margin:0 0 6px 0;
  153. }
  154.  
  155. #signupForm #body fieldset label {
  156.     display:block;
  157.     float:none;
  158.     margin:0 0 6px 0;
  159. }
  160.  
  161. /* Default Input */
  162. #loginForm input {
  163.     width:92%;
  164.     border:1px solid #899caa;
  165.     border-radius:3px;
  166.     -moz-border-radius:3px;
  167.     color:#3a454d;
  168.     font-weight:bold;
  169.     padding:8px 8px;
  170.     box-shadow:inset 0px 1px 3px #bbb;
  171.     -webkit-box-shadow:inset 0px 1px 3px #bbb;
  172.     -moz-box-shadow:inset 0px 1px 3px #bbb;
  173.     font-size:12px;
  174. }
  175. /* Sign In Button */
  176. #loginForm #login {
  177.     width:auto;
  178.     float:left;
  179.     background:#339cdf url(../images/loginbuttonbg.png) repeat-x;
  180.     color:#fff;
  181.     padding:7px 10px 8px 10px;
  182.     text-shadow:0px -1px #278db8;
  183.     border:1px solid #339cdf;
  184.     box-shadow:none;
  185.     -moz-box-shadow:none;
  186.     -webkit-box-shadow:none;
  187.     margin:0 12px 0 0;
  188.     cursor:pointer;
  189.     *padding:7px 2px 8px 2px; /* IE7 Fix */
  190. }
  191.  
  192. /* Forgot your password */
  193. #loginForm span {
  194.     text-align:center;
  195.     display:block;
  196.     padding:7px 0 4px 0;
  197. }
  198.  
  199. #loginForm span a {
  200.     color:#3a454d;
  201.     text-shadow:1px 1px #fff;
  202.     font-size:12px;
  203. }
  204.  
  205. input:focus {
  206.     outline:none;
  207. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement