"

From 2013.igem.org

.tabs li {

 /* Makes a horizontal row */
 float: left; 

 /* So the psueudo elements can be
    abs. positioned inside */
 position: relative; 

} .tabs a {

 /* Make them block level
    and only as wide as they need */
 float: left; 
 padding: 10px 40px; 
 text-decoration: none;
 
 /* Default colors */ 
 color: black;
 background: #ddc385; 
 
 /* Only round the top corners */
 -webkit-border-top-left-radius: 15px;
 -webkit-border-top-right-radius: 15px;
 -moz-border-radius-topleft: 15px;
 -moz-border-radius-topright: 15px;
 border-top-left-radius: 15px;
 border-top-right-radius: 15px; 

} .tabs .active {

 /* Highest, active tab is on top */
 z-index: 3;

} .tabs .active a {

 /* Colors when tab is active */
 background: white; 
 color: black; 

} .tabs li:before, .tabs li:after, .tabs li a:before, .tabs li a:after {

 /* All pseudo elements are 
    abs. positioned and on bottom */
 position: absolute;
 bottom: 0;

} /* Only the first, last, and active

  tabs need pseudo elements at all */

.tabs li:last-child:after, .tabs li:last-child a:after, .tabs li:first-child:before, .tabs li:first-child a:before, .tabs .active:after, .tabs .active:before, .tabs .active a:after, .tabs .active a:before {

 content: "";

} .tabs .active:before, .tabs .active:after {

 background: white; 
 
 /* Squares below circles */
 z-index: 1;

} /* Squares */ .tabs li:before, .tabs li:after {

 background: #ddc385;
 width: 10px;
 height: 10px;

} .tabs li:before {

 left: -10px;      

} .tabs li:after {

 right: -10px;

} /* Circles */ .tabs li a:after, .tabs li a:before {

 width: 20px; 
 height: 20px;
 /* Circles are circular */
 -webkit-border-radius: 10px;
 -moz-border-radius:    10px;
 border-radius:         10px;
 background: #222;
 
 /* Circles over squares */
 z-index: 2;

} .tabs .active a:after, .tabs .active a:before {

 background: #ddc385;

} /* First and last tabs have different

  outside color needs */

.tabs li:first-child.active a:before, .tabs li:last-child.active a:after {

 background: #222;

} .tabs li a:before {

 left: -20px;

} .tabs li a:after {

 right: -20px;

}