Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jun 27th, 2012  |  syntax: None  |  size: 1.95 KB  |  hits: 11  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. body {
  2.         background: #392423;
  3.         padding-top: 5em;
  4. }
  5.  
  6. .tabs {
  7.     position: relative;
  8. /*    min-height: 200px;*/
  9.     clear: both;
  10.     color: #000;
  11.     text-align: center;
  12.     list-style: none;
  13.     padding: 0;
  14. }
  15.  
  16. .tab {
  17.     float: left;
  18. }
  19.  
  20. .tab label {
  21.     background: #eee;
  22.     border: 1px solid #ccc;
  23.     margin-left: 2px;
  24.     position: relative;
  25.     left: 1px;
  26.     cursor: pointer;
  27.    
  28.     font: 12px/100% Arial, Helvetica, sans-serif;
  29.     padding: .2em 1.5em;
  30.     -webkit-box-shadow: inset 0 0px 3px #000;
  31.         -moz-box-shadow: inset 0 0px 3px #000;
  32.         box-shadow: inset 0 0px 3px #000;
  33.     color: #a0a0a0;
  34.     border: 1px solid #666;
  35.     background: #4e4e4e;
  36.         background: -webkit-gradient(linear, left top, left bottom, from(#4e4e4e), to(#000));
  37.         background: -moz-linear-gradient(top,  #4e4e4e,  #000);
  38.         filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e4e4e', endColorstr='#000');
  39. }
  40.  
  41. .tabs .tab:first-child label {
  42.     -webkit-border-radius-topleft: 25px 50px;
  43.     -moz-border-radius-topleft: 25px 50px;
  44.         border-top-left-radius: 25px 50px;
  45. }
  46.  
  47. .tabs .tab:last-child label {
  48.     -webkit-border-radius-topright: 25px 50px;
  49.     -moz-border-radius-topright: 25px 50px;
  50.         border-top-right-radius: 25px 50px;
  51. }
  52.  
  53. .tab [type=radio] {
  54.     display: none;
  55. }
  56.  
  57. .tabs .content {
  58.     position: absolute;
  59.     top: 19px;
  60.     left: 0;
  61.     background: #B4A79E;
  62.     right: 0;
  63.     bottom: 0;
  64.     padding: 20px;
  65.     border: 1px solid #666;
  66.     border-top: 1px solid #FFF;
  67.         display: none;
  68. }
  69.  
  70. .tabs [type=radio]:checked ~ label {
  71.     padding: .3em 1.5em;
  72.     top: 0;
  73.     z-index: 2;
  74.     color: #FFF;
  75.     border-color: #FFF;
  76.     border-bottom: none;
  77.     background: #747474;
  78.         background: -webkit-gradient(linear, left top, left bottom, from(#747474), to(#333));
  79.         background: -moz-linear-gradient(top,  #747474,  #333);
  80.         filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#747474', endColorstr='#333');
  81. }
  82.  
  83. .tabs [type=radio]:checked ~ label ~ .content {
  84.     z-index: 1;
  85.         display: block;
  86. }