/* --------------------------------------------------
	Edit the following group of styles to change the
	borders, colors, and backgrounds of your tabbed
	box. Otherwise, leaving them at the default 
	hurts nothing.
-------------------------------------------------- */

/* This is the box that contains all the tabs and their contents. */
div.tabbed-box {
	border-color: #ccc; 
	border-style: solid;
	border-width: 1px;
	background-color: inherit;
}

/* These are the tabs themselves. This background color is the "intactive" tab color. */
div.tabbed-box ul.tabs li {
	border-color: #ddd;
	background-color: #eee;
}
div.tabbed-box ul.tabs li a {
	font-weight: bold;
	background-color: inherit;
	color: inherit;
}

/* This determines what color the tabs appear when they are hovered over. */
div.tabbed-box ul.tabs li:hover {
	background-color: #f2f2f2; }
	
/* This controls the appearance of the "active" tab. */
div.tabbed-box ul.tabs li.active {
	background-color: #fff; }
	
/* This controls the appearance of the boxes the tabs hide/show. */
div.tabbed-box div.tabbed-content {
	background-color: inherit;
}


/* --------------------------------------------------
	The following styles make the tabbed box plugin 
	work. I wouldn't edit beyond this point unless 
	you're comfortable with complex CSS editing! 
-------------------------------------------------- */

div.tabbed-box ul.tabs {
	margin: 0 !important; }
div.tabbed-box ul.tabs li:before, div.tabbed-box ul.tabs li:after {
	content: "" !important;  }
div.tabbed-box ul.tabs li {
	list-style: none !important;
	list-style-image: none !important;
	background-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid; }
div.tabbed-box ul.tabs li a {
	display: block;
	width: 100%;
	line-height: 1.5em;
	text-align: center;
	text-decoration: none;
	outline: none; }
div.tabbed-box ul.tabs li:first-child, div.tabbed-box ul.tabs li.first-child {
	border-left: none; }
div.tabbed-box ul.tabs li.active {
	border-bottom: none; }
div.tabbed-box div.tabbed-content {
	padding: 4em 1em 1em !important;
	margin: 0;
	display: none; }

.tab-count-2 .tabs li {
	width: 49%; }
.tab-count-2 .tabs li:first-child, .tab-count-2 .tabs li.first-child {
	width: 50%; }
	
.tab-count-3 .tabs li {
	width: 32%; }
.tab-count-3 .tabs li:first-child, .tab-count-3 .tabs li.first-child {
	width: 34%; }
	
.tab-count-4 .tabs li {
	width: 24%; }
.tab-count-4 .tabs li:first-child, .tab-count-4 .tabs li.first-child {
	width: 25%; }
	
.tab-count-5 .tabs li {
	width: 19%; }
.tab-count-5 .tabs li:first-child, .tab-count-5 .tabs li.first-child {
	width: 20%; }