.tabbed-box {
	width: 100%;
	background: #fff;
}

.tabbed-box .tabs li {
	list-style: none;
	float: left; 
}

.tabbed-box .tabs li a {
	display: block;
	padding: 5px 5px 0px 5px; /* top right bottom left */
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	text-decoration: none;
	color: black;
	background: #fff;
	
	border-left: 1px solid red;
	border-top: 1px solid red;
	border-bottom: 1px solid black;
}

/*.tabbed-box .tabs li:first-child a {
	border-left: none; }*/
.tabbed-box .tabs li a:hover {
	color: #444; }
.tabbed-box .tabs li a:focus {
	outline: none; }

/* these define the active tab. So, to make it look like a tab, I've forced the right, left and top borders to be visible, while the bottom border is blank. */
	.tabbed-box .tabs li a.active {
	
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff;
	border-top: 2px solid black;
	border-left: 2px solid black;
	border-right: 2px solid black;
}

.tabbed-box .tabs li a.active-leftmost {
	border-left: 1px solid black;
}

.tabbed-box .tabs li a.active-rightmost {
	border-right: 1px solid black;
}

.tabbed-content {
	padding: 3em 10px 1em 10px; /* top right bottom left */
	display: none;
	width: 580px;
}