/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

h1 { 
	width: 460px; 
	margin: 0 auto;
	padding: 20px 0;
	color: #222;
}

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}

 .tabs { 
    	list-style: none; 
    	margin: 0px auto 0; 
        margin-left:12px;
    	width: 650px;
    }
		.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: 5px 20px; 
		  text-decoration: none;
                  
		  
		  /* Default colors */ 
		  color: #fff77f;
		  background: #ec8a3f; 
		  
		  /* 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: #3c3c3c; 
		  color: white; 
		}
		.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: #3c3c3c; 
		  
		  /* Squares below circles */
		  z-index: 1;
		}
		/* Squares */
		.tabs li:before, .tabs li:after {
		  background: #ec8a3f;
		  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: #eee;
                  
		  
		  /* Circles over squares */
		  z-index: 2;
		}
		.tabs .active a:after, .tabs .active a:before {
		  background: #ec8a3f;
		}
		/* First and last tabs have different
		   outside color needs */
		.tabs li:first-child.active a:before,
		.tabs li:last-child.active a:after {
		  background: #eee;
		}
		.tabs li a:before {
		  left: -20px;
		}
		.tabs li a:after {
		  right: -20px;
		}