SHARE
TWEET

Tosstemple CSS

a guest Feb 22nd, 2012 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body {
  2.         background-color: black;
  3.         background-image: url('/images/bigbackground1.jpg');
  4.         background-repeat: no-repeat;
  5.         background-position: center center;
  6.         background-attachment: fixed;
  7.         background-size: cover;
  8.         }
  9.        
  10. #background {
  11.         position: relative;
  12.         margin: 0 auto;
  13.         width: 1000px;
  14. }
  15.        
  16. #rankpanel {
  17.         position: absolute;
  18.                 top: 281px;
  19.                 left: -11px;
  20.         padding: 0px;
  21.         margin: 0px;
  22.         z-index: 1;
  23. }
  24.  
  25. #contactbutton {
  26.         position: absolute;
  27.     width: 90px;
  28.     height: auto;
  29.         top: 618px;
  30.         left: 50px;
  31.     padding: 0px;
  32.     margin: 0px;
  33.         z-index: 2;
  34. }
  35.  
  36. /* Add curved borders to various elements */
  37.  
  38. #contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  39.   -moz-border-radius: 10px;
  40.   -webkit-border-radius: 10px;  
  41.   border-radius: 10px;
  42. }
  43.  
  44.  
  45. /* Style for the contact form and status messages */
  46.  
  47. #contactForm, .statusMessage {
  48.         color: #ffcc33;
  49.         background-color: #000033;
  50.         background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#000033), color-stop(1, #000033) );
  51.         background: -moz-linear-gradient( center bottom, #000033 0%, #000033 100% );
  52.         border: 1px solid #aaa;
  53.         -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  54.         -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  55.         box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  56.         opacity: .88;
  57. }
  58.  
  59.  
  60. /* The form dimensions */
  61.  
  62. #contactForm {
  63.   width: 40em;
  64.   height: 33em;
  65.   padding: 0 1.5em 1.5em 1.5em;
  66.   margin: 0 auto;
  67.   z-index: 3;
  68. }
  69.  
  70.  
  71. /* Position the form in the middle of the window (if JavaScript is enabled) */
  72.  
  73. #contactForm.positioned {
  74.   position: fixed;
  75.   top: 0;
  76.   bottom: 0;
  77.   left: 0;
  78.   right: 0;
  79.   margin-top: auto;
  80.   margin-bottom: auto;
  81. }
  82.  
  83.  
  84. /* Dimensions and position of the status messages */
  85.  
  86. .statusMessage {
  87.   display: none;
  88.   margin: auto;
  89.   width: 30em;
  90.   height: 2em;
  91.   padding: 1.5em;
  92.   position: fixed;
  93.   top: 0;
  94.   bottom: 0;
  95.   left: 0;
  96.   right: 0;
  97.   z-index: 3
  98. }
  99.  
  100. .statusMessage p {
  101.   font-family: eurostile, tahoma;
  102.   font-style: bold;
  103.   text-align: center;
  104.   margin: 0;
  105.   padding: 0;
  106. }
  107.  
  108.  
  109. /* The header at the top of the form */
  110.  
  111. #contactForm h2 {
  112.   font-family: eurostile;
  113.   font-size: 2em;
  114.   letter-spacing: .02em;
  115.   margin: 0 0 1em -.75em;
  116.   padding: 1em;
  117.   width: 19.5em;  
  118.   color: #ffcc33;
  119.   background: #000033;
  120.   border-bottom: 1px solid #aaa;
  121.   -moz-border-radius: 10px 10px 0 0;
  122.   -webkit-border-radius: 10px 10px 0 0;  
  123.   border-radius: 10px 10px 0 0;
  124. }
  125.  
  126.  
  127. /* Give form elements consistent margin, padding and line height */
  128.  
  129. #contactForm ul {
  130.   list-style: none;
  131.   margin: 0;
  132.   padding: 0;
  133. }
  134.  
  135. #contactForm ul li {
  136.   margin: .9em 0 0 0;
  137.   padding: 0;
  138. }
  139.  
  140. #contactForm input, #contactForm label {
  141.   line-height: 1em;
  142. }
  143.  
  144.  
  145. /* The field labels */
  146.  
  147. #contactForm label {
  148.   display: block;
  149.   float: left;
  150.   clear: left;
  151.   text-align: right;
  152.   width: 28%;
  153.   padding: .4em 0 0 0;
  154.   margin: .15em .5em 0 0;
  155.   font-weight: bold;
  156. }
  157.  
  158.  
  159. /* The fields */
  160.  
  161. #contactForm input, textarea {
  162.   display: block;
  163.   margin: 0;
  164.   padding: .4em;
  165.   width: 67%;
  166.   font-family: "Georgia", serif;
  167.   font-size: 1em;
  168.   border: 1px solid #aaa;
  169.   -moz-border-radius: 5px;
  170.   -webkit-border-radius: 5px;    
  171.   border-radius: 5px;
  172.   -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  173.   -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  174.   box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  175.   background: #fff;
  176. }
  177.  
  178. #contactForm textarea {
  179.   height: 13em;
  180.   line-height: 1.5em;
  181.   resize: none;
  182. }
  183.  
  184.  
  185. /* Place a border around focused fields, and hide the inner shadow */
  186.  
  187. #contactForm *:focus {
  188.   border: 1px solid #66f;
  189.   outline: none;
  190.   box-shadow: none;
  191.   -moz-box-shadow: none;
  192.   -webkit-box-shadow: none;
  193. }
  194.  
  195.  
  196. /* Display correctly filled-in fields with a green background */
  197.  
  198. #contactForm input:valid, #contactForm textarea:valid {
  199.   background: #DDEDFF;
  200. }
  201.  
  202.  
  203. /* The Send and Cancel buttons */
  204.  
  205. #contactForm input[type="submit"], #contactForm input[type="button"] {
  206.   float: right;
  207.   margin: 2em 1em 0 1em;
  208.   width: 10em;
  209.   padding: .5em;
  210.   border: 1px solid #666;
  211.   -moz-border-radius: 10px;
  212.   -webkit-border-radius: 10px;  
  213.   border-radius: 10px;
  214.   -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  215.   -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  216.   box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  217.   color: #fff;
  218.   background: #0a0;
  219.   font-size: 1em;
  220.   line-height: 1em;
  221.   font-weight: bold;
  222.   opacity: .7;
  223.   -webkit-appearance: none;
  224.   -moz-transition: opacity .5s;
  225.   -webkit-transition: opacity .5s;
  226.   -o-transition: opacity .5s;
  227.   transition: opacity .5s;
  228. }
  229.  
  230. #contactForm input[type="submit"]:hover,
  231. #contactForm input[type="submit"]:active,
  232. #contactForm input[type="button"]:hover,
  233. #contactForm input[type="button"]:active {
  234.   cursor: pointer;
  235.   opacity: 1;
  236. }
  237.  
  238. #contactForm input[type="submit"]:active, #contactForm input[type="button"]:active {
  239.   color: #333;
  240.   background: #eee;
  241.   -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  242.   -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  243.   box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  244. }
  245.  
  246. #contactForm input[type="button"] {
  247.   background: #f33;
  248. }
  249.  
  250.  
  251. /* Header/footer boxes */
  252.  
  253. .wideBox {
  254.   clear: both;
  255.   text-align: center;
  256.   margin: 70px;
  257.   padding: 10px;
  258.   background: #ebedf2;
  259.   border: 1px solid #333;
  260. }
  261.  
  262. .wideBox h1 {
  263.   font-weight: bold;
  264.   margin: 20px;
  265.   color: #666;
  266.   font-size: 1.5em;
  267. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top