@font-face {
    font-family: "Arista";
    src: url('../images/fonts/Arista.ttf');
}
@font-face {
    font-family: "Coolvetica";
    src: url('../images/fonts/Coolvetica.ttf');
}
@font-face {
    font-family: "AlteHaas";
    src: url('../images/fonts/AlteHaasGroteskRegular.ttf');
}
@font-face {
    font-family: "Franchise";
    src: url('../images/fonts/Franchise.ttf');
}
@font-face {
    font-family: "Bebas";
    src: url('../images/fonts/Bebas.ttf');
}
@font-face {
    font-family: "PlanetEstyle";
    src: url('../images/fonts/PlanetEstyle.ttf');
}
@font-face {
    font-family: "HitRoad";
    src: url('../images/fonts/HitRoad.ttf');
}
@font-face {
    font-family: "Yorkville";
    src: url('../images/fonts/Yorkville.ttf');
}
@font-face {
    font-family: "WorldOfWater";
    src: url('../images/fonts/WorldOfWater.ttf');
}
@font-face {
    font-family: "Surface";
    src: url('../images/fonts/Surface.otf');
}
@font-face {
    font-family: "Communist";
    src: url('../images/fonts/Communist.ttf');
}
@font-face {
    font-family: "Fortyfive";
    src: url('../images/fonts/Fortyfive.ttf');
}

ul#shifter {
	width: 100%; height: 30px;
	margin: 0 auto 0 0;
	padding: 0;
	list-style-type: none;
}
ul#shifter li {
	display: block; float: left;
	list-style-type: none;
	width: 151px; height: 25px;
	margin: 0 5px 0px 0px;
	padding: 0 0 5px 0;
	background: #2c5277;
}
ul#shifter li a {
	display: block;
	width: 160px; height: 25px;
	padding-top: 5px;
	font-family: Bebas, Arial; font-size: 15px; color: #fff; text-decoration: none; text-align: center;
}
ul#shifter li a:hover {
	color: #ffcc00;
}
ul#shifter li.selected {
	background: #fff;
}
ul#shifter li.hovered {

}
ul#shifter li.selected a {
	color: #2c5277;
}
ul#shifter li.selected a:hover {
	color: #333;
}