/**
 * Tabs object.
 *
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 */
.tabs
{
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
	display: table; /* [1] */
	table-layout: fixed; /* [2] */
	width: 100%; /* [3] */
}

.tabs__item
{
	display: table-cell; /* [4] */
	padding: 1px;
	float: left;
}

.tabs__link
{
	display: block; /* [5] */	 
	border: 1px solid #91A7B7;
	border-radius: 4px 4px 0px 0px;
	background-color: #F0F0E8;
}
.tab_active
{
	border: 1px solid #B9E5FB; 
	background-color: #F9F9EB;
	color: red;
}

/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav
{
	text-align: center;
	border-radius: 4px;
	overflow: hidden; /* [1] */
}

.primary-nav a
{
	padding: 7px;
	font-weight: bold;
	text-decoration: none;
}

.primary-nav a:hover
{
	background-color: #F9F9EB;
	text-decoration: none;
}