/* Sports Franchise Infographic Stylesheet*/
/*Copyright Column Five Media, Inc.*/

/**
 * Base styles
 **/

html
{
	color: #FFFFFF;
	background-image: url("../img/background.jpg");
	background-repeat: repeat;
}

body
{
	background-image: url("../img/background.jpg");
	background-repeat: repeat;

}

#superContainer
{
	margin-left: 60px;
	margin-right: 60px;
	overflow: visible;
	height: 800px;
}

#wrapper
{
	margin: 0 auto;
	padding: 0;
	border: 0;
	width: 960px;
}

h4
{
	font-family: 'Abel', sans-serif;
	font-size: 1.2em;
	line-height: 1.5em;
}

h5
{
	font-family: 'Abel', sans-serif;
	font-size: 1em;
	line-height: 14px;
}

h6
{
	font-family: 'Abel', sans-serif;
	font-size: .1em;
	line-height: : 1.2em;
	position: absolute;
	left: 8px;
	top: 64px;
}

/**
 * Header Graphic Style
 **/

#banner
{
	width: 936px;
	height: 180px;
	top: 0px;
	padding-left: 16px;
	border: 4px solid #FFFFFF;
	border-bottom: none;
	margin-top: 16px;
}

/**
 * Filter Navigation/Key
 **/

#chartKey
{
	position: absolute;
	width: 861px;
	height: 64px;
	background-color: #524A48;	
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin-left: 60px;
	margin-top: -25px;
	cursor: default;
	z-index: 9999;
}

#filterInstr
{
	padding-left: 8px;
	padding-top: 8px;
}

#fi1
{
	position: relative;
	top: -4px;
	left: 8px;
	color: #969494;
	font-size: .8em;
}

#fi2
{
	position: relative;
	top: -6px;
	left: 8px;
	line-height: 12px;
	color: #FFFFFF;
	font-size: 1.6em;
}

#filterNav
{
	position: absolute;
	left: 102px;
	top: 21px;
	padding-top: 8px;
	width: 768px;
	height: 20px;
	float: left;
	z-index: 500;
	text-align: left;
}

.introList1
{
	position: relative;
	left: 2px;
	top: -2px;
	list-style-type: square;
	list-style-position: inside;
	line-height: 20px;
}

.introList2
{
	position: relative;
	left: 80px;
	top: 0px;
	list-style-type: square;
	list-style-position: inside;
	line-height: 14px;
}

.liFootball
{
	display: inline-block;
	color: #00ABC4;
	margin-left: 2px;
	margin-right: 2px;
}

.liF1
{
	display: inline-block;
	color: #BE1D78;
	margin-left: 2px;
	margin-right: 2px;
}

.liBaseball
{
	display: inline-block;
	color: #ED1C24;	
	margin-left: 2px;
	margin-right: 2px;
}

.liBasketball
{
	display: inline-block;
	color: #F5822A;	
	margin-left: 2px;
	margin-right: 2px;
}

.liSoccer
{
	display: inline-block;
	color: #FBAF17;
	margin-left: 2px;
	margin-right: 2px;
}

.liHockey
{
	display: inline-block;
	color: #50C25D;
	margin-left: 2px;
	margin-right: 2px;
}

.liStats
{
	display: inline-block;
	color: #FFFFFF;
	margin-left: 8px;
	margin-right: 2px;
	padding-bottom: 4px;
	border-bottom: 2px solid #FFFFFF;
}

.button
{
	cursor: pointer;
}

.buttonInactive
{
	border-bottom: none;
}

.viewAllActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #FFFFFF;
}

.footballActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #00ABC4;
}

.formulaoneActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #BE1D78;
}

.baseballActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #ED1C24;
}

.basketballActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #F5822A;
}

.soccerActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #FBAF17;
}

.hockeyActive
{
	padding-bottom: 2px;
	border-bottom: 2px solid #50C25D;
}

/**
 * Data Popup Styles
 **/

.dataBox
{
	z-index: 9999;
	display: none;
	background-color: #524A48;
	opacity: .9;
	border-radius: 4px;
	width: 178px;
	height: 108px;
}

.dataTitle
{
	list-style: none;
	line-height: 22px;
	padding-left: 8px;
	padding-right: 114px;
	font-size: 1.2em;
}

#dataBoxDefs
{
	position: relative;
	top: 28px;
	left: 4px;
}

#champDefine
{
	font-size: .8em;
	display: inline-block;
}

#yearsDefine
{
	position: relative;
	left: 18px;
	font-size: .8em;
	display: inline-block;
}

#Football
{
	border: 2px solid #00ABC4;
	background-image: url("../img/c5_sport_blue.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

#FormulaOne
{
	border: 2px solid #BE1D78;
	background-image: url("../img/c5_sport_purple.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

#Baseball
{
	border: 2px solid #ED1C24;
	background-image: url("../img/c5_sport_red.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

#Basketball
{
	border: 2px solid #F5822A;
	background-image: url("../img/c5_sport_orange.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

#Soccer
{
	border: 2px solid #FBAF17;
	background-image: url("../img/c5_sport_gold.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

#Hockey
{
	border: 2px solid #50C25D;
	background-image: url("../img/c5_sport_green.png");
	background-size: 100%;
	background-position: 0px 36px;
	background-repeat: no-repeat;
}

/**
 * Chart Context Styles
 **/

#chart
{
	width: 960px;
}

#chartBorder
{
		position: relative;
		top: -144px;
		border: 4px solid #FFFFFF;
		border-top: none;
		width: 952px;
		height: 516px;
}

.axis
{
	shape-rendering: crispEdges;
	font-family: 'Abel', sans-serif;
	font-size: .8em;
	stroke: #FFFFFF;
	stroke-width: 1px;
	fill: #FFFFF;

}

.domain
{
	display: none;
}

g .tick line
{
	shape-rendering: crispEdges;
	stroke: #FFFFFF;
	opacity: 0.6;
}

g .tick:first-child line
{
	opacity: 1;
	stroke-width: 2px;
}

g .axis .tick:first-child
{
	display: none;
}

g .tick text
{
	opacity: 1;
}

#ChartLabelX
{
	position: relative;
	text-align: center;
	left: 408px;
	top: -224px;
	height: 24px;
	width: 200px;
	background-color: #FFFFFF;
	color: #231F20;
	cursor: default;
}

#ChartLabelY
{
	position: relative;
	text-align: center;
	left: -120px;
	top: -454px;
	height: 24px;
	width: 220px;
	background-color: #FFFFFF;
	color: #231F20;
	cursor: default;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-transform: rotate(-90deg);
}

.labelTriangle
{
	position: relative;
	left: 72px;
	top: -153px;
	width: 0px;
	height: 0px;
	border: solid 19px;
	border-color: transparent transparent #FBAF17 transparent;
}

#triangleY1
{
	position: relative;
	top: -550px;
	left: -22px;
	width: 0;
	height: 0;
	border-bottom: 18px solid #FFFFFF;
	border-left: 20px solid transparent;
	border-right: 18px solid transparent;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-transform: rotate(135deg);
}

#triangleY2
{
	position: relative;
	top: -359px;
	left: -22px;
	width: 0;
	height: 0;
	border-bottom: 18px solid #FFFFFF;
	border-left: 18px solid transparent;
	border-right: 20px solid transparent;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-transform: rotate(45deg);
}

#triangleX1
{
	position: relative;
	top: -209px;
	left: 386px;
	width: 0;
	height: 0;
	border-bottom: 20px solid #FFFFFF;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-transform: rotate(45deg);
}

#triangleX2
{
	position: relative;
	top: -252px;
	left: 596px;
	width: 0;
	height: 0;
	border-bottom: 18px solid #FFFFFF;
	border-left: 18px solid transparent;
	border-right: 20px solid transparent;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-transform: rotate(-45deg);
}

/**
 * Data Circle & Text styles
 **/

circle
{
	cursor: pointer;
}

.circleTextRank
{
	font-family: 'Abel', sans-serif;
	font-weight: bold;
	cursor: pointer;
}

.circleTextValue
{
	font-family: 'Abel', sans-serif;
	cursor: pointer;
}

#teamSpan
{
	position: relative;
	padding-left: 8px;
	top: 8px;
}

#yearsSpan
{
	padding-left: 8px;
}

#championshipSpan
{
	padding-left: 8px;
}

#forbesSpan
{
	position: relative;
	padding-left: 8px;
	top: -18px;
	font-size: .8em;
}

#teamDisplay
{
	position: relative;
	padding-left: 8px;
	top: 8px;
	top: 8px;
	font-size: 1em;
}

#yearsDisplay
{
	position: relative;
	top: 40px;
	left: 120px;
	font-size: 1em;
}

#championshipDisplay
{
	position: relative;
	top: 26px;
	left: 22px;
	font-size: 1em;
}

#forbesDisplay
{
	position: relative;
	top: -18px;
	font-size: .8em;
}

/**
 * Bottom Key
 **/

#circleKey
{
	position: relative;
	top: 41px;
	left: 92px;
	width: 274px;
	height: 144px;
	background-color: rgba(0, 0, 0, .6);
	z-index: 9999;
}

.circle3B
{
	position: relative;
	left: 38px;
	top: 16px;
	display: inline-block;
}

#circle3Bborder
{
	border-radius: 50%;
	width: 120px;
	height: 120px;
	background-color: #969494;
}

#circle3Binner
{
	position: relative;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	width: 116px;
	height: 116px;
	background-color: #524A48;
}

.circle1-5B
{
	position: relative;
	top: 16px;
	left: 32px;
	display: inline-block;
}

#circle1-5Bborder
{
	border-radius: 50%;
	width: 60px;
	height: 60px;
	background-color: #969494;
}

#circle1-5Binner
{
	position: relative;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	background-color: #524A48;
}

.circle-75B
{
	position: relative;
	top: 16px;
	left: 16px;
	display: inline-block;
}

#circle-75Bborder
{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	background-color: #969494;
}

#circle-75Binner
{
	position: relative;
	left: 2px;
	top: 2px;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	background-color: #524A48;
}

#circleMeasureText3
{
	position: relative;
	top: 44px;
	left: 42px;
	font-family: 'Abel', sans-serif;
	font-size: 1em;
	color: #969494;
}

#circleMeasureText15
{
	position: relative;
	top: 18px;
	left: 8px;
	font-family: 'Abel', sans-serif;
	font-size: 1em;
	color: #969494;
}

#circleMeasureText75
{
	position: relative;
	top: 30px;
	left: -4px;
	font-family: 'Abel', sans-serif;
	font-size: .8em;
	color: #969494;
}

#circleKeyInfo
{
	position: relative;
	left: 16px;
	top: -12px;
	color: #969494;	
	font-size: .8em;
}

#sources
{
	position: relative;
	left: 0px;
	top: -260px;
	color: #969494;
	font-size: .8em;
}

#socialMedia
{
	position: relative;
	left: 0px;
	top: -320px;
}

#C5logo
{
	position: relative;
	left: 776px;
	top: -304px;
	width: 187px;
}