API tools faq
paste
Advertisement
Guest User

SO CSS Paste

a guest
Dec 5th, 2011
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.58 KB | None | 0 0
raw download clone embed print report
  1. /* Constants (Color/Style References)
  2. --------------------------------------------------------------------
  3. Gold: #FFDD00
  4. Dark Gold: #D69200
  5. text-shadow: .077em .077em .154em #000000;
  6.  
  7.  
  8. */
  9.  
  10.  
  11. /* General
  12. --------------------------------------------------------------------*/
  13. html, body { height: 100%; }
  14. body { background:url('../images/bg.gif'); }
  15.  
  16. a:link {
  17.     text-decoration:none;
  18.     color:#ddd;
  19. }
  20. a:visited {color:#D69200;}
  21. a:hover, a:active {color:#FFDD00;}
  22.  
  23. input::-webkit-outer-spin-button,
  24. input::-webkit-inner-spin-button {
  25.     /* display: none; <- Crashes Chrome on hover */
  26.     -webkit-appearance: none;
  27.     margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
  28. }
  29.  
  30. #gradient_bg {
  31.     background-image: -moz-radial-gradient(center top 45deg, circle closest-corner, rgba(200, 200, 200, .35) 0%, rgba(150, 150, 150, .1) 100%);
  32.     background-image: -webkit-radial-gradient(center top 45deg, circle closest-corner, rgba(200, 200, 200, .35) 0%, rgba(150, 150, 150, .1) 100%);
  33.     background-image: -ms-radial-gradient(center top 45deg, circle closest-corner, rgba(200, 200, 200, .35) 0%, rgba(150, 150, 150, .1) 100%);
  34.     background-image: -o-radial-gradient(center top 45deg, circle closest-corner, rgba(200, 200, 200, .35) 0%, rgba(150, 150, 150, .1) 100%);
  35.     padding-top:2.308em;
  36. }
  37.  
  38. #container {
  39.     background-color:rgba(150, 150, 150, .08);
  40.     border-top-left-radius: .615em;
  41.     border-top-right-radius: .615em;
  42.     box-shadow:0 .35em .9em #000;
  43.     -moz-border-radius-topleft: .615em;
  44.     -moz-border-radius-topright: .615em;
  45.     -moz-box-shadow: 0 .35em .9em #000;
  46.     -webkit-box-shadow:0 .35em .9em #000;
  47.     -webkit-border-top-left-radius: .615em;
  48.     -webkit-border-top-right-radius: .615em;height:100%;
  49. }
  50.  
  51.  
  52. /* Header
  53. --------------------------------------------------------------------*/
  54. #header {
  55.     background:url('../images/header-bg.png');
  56.     height:6.308em;
  57. }
  58.  
  59. #identity div {
  60.     background:url('../images/identity.png');
  61.     height:4.231em;
  62.     margin:.7em 0 0 .7em;
  63.     width:10.615em;
  64. }
  65.    
  66. #search { text-align:right; }
  67.  
  68. #search p { margin:10px 2px 6px 0; }
  69. #search p a { font-size:12px; }
  70. #search input {
  71.     background-color: rgba(150, 150, 150, .5);
  72.     border:0;
  73.     border-radius: 1em;
  74.     -moz-border-radius: 1em;
  75.     -webkit-border-radius: 1em;
  76.     color:#ddd;
  77.     margin-right:-24px;
  78.     padding:4px 20px 4px 8px;
  79. }
  80. #search input:hover {background-color: rgba(150, 150, 150, .525); }
  81.  
  82. #search input:focus {
  83.     background-color: rgba(150, 150, 150, .6);
  84.     color:#eee;
  85. }
  86.  
  87. #search button {
  88.     background:url('../images/search-button-bg.png');
  89.     border:none;
  90.     cursor:pointer;
  91.     margin-right:2px;
  92.     position:relative;
  93.     width:18px;
  94.     z-index:999;
  95. }
  96. #search button:hover {
  97.     background:url('../images/search-button-bg.png') 0 -19px;
  98. }
  99. #navigation {
  100.     background:url('../images/navigation-bg.gif');
  101.     box-shadow: 0 .14em 1.231em #111;
  102.     height:2.077em;
  103.     line-height:2.077em;
  104.     margin-bottom:1.846em;
  105.     -moz-box-shadow: 0 .14em 1.231em #111;
  106.     position:relative;
  107.     -webkit-box-shadow: 0 .14em 1.231em #111;
  108.     z-index:999;
  109. }
  110.  
  111. #navigation ul {
  112.     list-style-type:none;
  113.     margin:0 0 0 1em; padding:0;
  114. }
  115.  
  116. #navigation ul li {
  117.     color:#ddb733;
  118.     cursor:pointer;
  119.     display:inline;
  120.     margin:0 .25em 0 0;
  121.     padding:0 .25em 0 0 ;
  122. }
  123.  
  124. #navigation ul li:hover { color:#999; }
  125.  
  126.  
  127. /* Body - Categories
  128. --------------------------------------------------------------------*/
  129. #categories {
  130.     background-color: rgba(255, 255, 255, .1);
  131.     margin-top:-1.865em;
  132.     padding-bottom:1.865em ;
  133.     padding-top:1.865em;
  134. }
  135.  
  136. #categories .header {
  137.     color:#eee;
  138.     filter: dropshadow(color=#000000, offx=1, offy=1);
  139.     font-size:1.846em;
  140.     margin-bottom:.5em;
  141.     padding:0 0 0 .4em;
  142.     text-shadow: .037em .037em .08em #000000;
  143. }
  144.  
  145. #categories ul {
  146.     list-style-type:none;
  147.     margin:0 0 .75em 0;
  148.     padding:0 0 0 1em;
  149. }
  150.  
  151. #categories ul li {
  152.     color:#ccc;
  153.     cursor:pointer;
  154.     margin:0 0 .75em 0;
  155. }
  156.  
  157.  
  158. #categories ul li.has_child_on {color:#D69200;}
  159. #categories ul li.has_child_on ul li {color:#eee;}
  160.  
  161. #categories ul li.has_child_on ul li.on,
  162. #categories ul li.on {color:#FFDD00;}
  163.  
  164. #categories ul li.on li {color:#eee;}
  165. #categories ul li:hover {color:#eee;}
  166.  
  167. #categories ul li ul {
  168.     cursor:pointer;
  169.     margin: .75em 0 .75em 0.5em;
  170. }
  171.  
  172.  
  173. /* Body - Parts Grid
  174. --------------------------------------------------------------------*/
  175. #parts_grid { padding-top:.4em; }
  176.  
  177. #parts_grid .header {
  178.     color:#eee;
  179.     filter: dropshadow(color=#000000, offx=6, offy=6);
  180.     font-size:1.385em;
  181.     margin-bottom:.5em;
  182.     padding:0 0 0 .4em;
  183. }
  184.  
  185. #parts_grid ul li {
  186.     background-color: rgba(255, 255, 255, .1);
  187.     color:#eee;
  188.     display:inline-table;
  189.     height:20em;
  190.     margin:0 .5em .5em 0;
  191.     padding:.5em;
  192.     width:12.538em;
  193. }
  194. #parts_grid ul li:nth-child(3n) { margin-right:0; }
  195.  
  196. #parts_grid ul li .name {
  197.     font-size:12px;
  198.     margin:0 0 2px 0;
  199. }
  200.  
  201. #parts_grid ul li .price {
  202.     color:#FFDD00;
  203.     font-size:12px;
  204.     margin:0 1em .25em 0;
  205. }
  206.  
  207. #parts_grid ul li {position:relative;}
  208. #parts_grid ul li button {
  209.     background:#ccc;
  210.     border:0;
  211.     border-radius: .215em;
  212.     -moz-border-radius: .215em;
  213.     -webkit-border-radius: .215em;
  214.     top:100%;
  215.     bottom:0;
  216.     cursor:pointer;
  217.     font-size:11px;
  218.     padding:1px 2px;
  219.     position:relative;
  220. }
  221.  
  222. #parts_grid ul li button:hover { background:#b3b3b3; }
  223.  
  224. #parts_grid ul li img {
  225.     height:151px;
  226.     margin:0 0 6px 0;
  227.     width:165px;
  228. }
  229.  
  230.  
  231. /* Body - Shopping Cart
  232. --------------------------------------------------------------------*/
  233. #shopping_cart { background-color: rgba(255, 255, 255, .1); }
  234.  
  235. #shopping_cart .header {
  236.     background-color: rgba(255, 255, 255, .1);
  237.     color:#eee;
  238.     font-size:1.231em;
  239.     margin-bottom:.5em;
  240.     padding:.25em .25em .25em .5em;
  241. }
  242.  
  243. #shopping_cart ul {
  244.     list-style-type:none;
  245.     margin:0;
  246. }
  247.  
  248. #shopping_cart ul li {
  249.     border-bottom:1px solid #555;
  250.     margin:0 0 .5em 0;
  251.     padding:.25em .65em .25em .65em;
  252.     overflow:hidden;
  253. }
  254.  
  255. #shopping_cart ul li div {
  256.     float:left;
  257.     margin:0 10px 4px 0;
  258.     width:3.846em;
  259. }
  260.  
  261. #shopping_cart ul li div img {
  262.     height:50px;
  263.     margin:0 0 4px 0;
  264.     width:50px;
  265. }
  266.  
  267. #shopping_cart ul li .name {
  268.     color:#eee;
  269.     font-size:12px;
  270.     margin:0 0 .462em 0;
  271. }
  272.  
  273. #shopping_cart ul li .subtotal {
  274.     color:#FFDD00;
  275.     display:block;
  276.     font-size:11px;
  277.     margin:0 1em 0 0;
  278. }
  279.  
  280. #shopping_cart ul li .price {
  281.     color:#D69200;
  282.     display:block;
  283.     font-size:11px;
  284.     margin:0 0 0 0;
  285. }
  286.  
  287.  
  288. #shopping_cart ul li div .quantity input {
  289.     background:#666;
  290.     border:0;
  291.     color:#eee;
  292.     display:block;
  293.     float:left;
  294.     font-size:12px;
  295.     height:1.7em;
  296.     margin:0;
  297.     padding:0 .5em .25em .5em;
  298.     width:1.55em;
  299. }
  300.  
  301. #shopping_cart ul li div .quantity input:hover { background:#6f6f6f; }
  302. #shopping_cart ul li div .quantity input:focus { background:#7c7c7c; }
  303.  
  304. #shopping_cart ul li div .quantity {
  305.     margin-bottom:0;
  306.     width:60px;
  307. }
  308.  
  309. #shopping_cart ul li div .quantity .buttons {
  310.     border-left:1px solid #4f4f4f;
  311.     float:left;
  312.     width:16px;
  313. }
  314.  
  315. #shopping_cart ul li div .quantity .buttons .quantity_button {
  316.     cursor: pointer;
  317.     display:block; 
  318.     height:4px;
  319.     margin: 0;
  320.     padding:4px 6px;
  321.     text-align: center;
  322.     text-indent: -9999px;
  323.     width: 6px;
  324. }
  325.  
  326.  
  327. #shopping_cart ul li div .quantity_button.add { background:#666 url(../images/quantity_add_button.png) no-repeat center center; }
  328. #shopping_cart ul li div .quantity_button.remove {background:#666 url(../images/quantity_remove_button.png) no-repeat center center;}
  329. #shopping_cart ul li div div:hover.quantity_button { background-color:#555; }
  330.  
  331. /* Footer
  332. --------------------------------------------------------------------*/
  333.  
  334.  
  335.  
  336. /* Misc
  337. --------------------------------------------------------------------*/
  338. .clearfix {clear:both;}
  339.  
  340.  
  341.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!