body {
	font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size:16px;
}

#container {
	background-color:white;
	width:960px;
	margin:0 auto;
	position:relative;
}

#content_container {
	margin-top:10px;
	overflow:hidden; 
	width:100%;
}

/* Header */
#content_container .header {
	text-align: center;
	margin: 3px auto;
	font-family:'Lato', Helvetica, Arial, sans-serif;
	color: #ffffff;
}

#content_container .header img{
	float: left;
	width: 180px;
}

#content_container .header .caption{
	font-size:48px;
	font-weight:900;
	line-height:72px;
	text-transform: uppercase;
}

#content_container .header .subcaption{
	font-size:32px;
	font-weight:900;
	line-height:48px;
	text-transform: uppercase;
}

#content_container .header .headertext{
	font-size:22px;
	font-weight:300;
	line-height:24px;
	padding: 20px;
}

/* Footer */
#container .footer{
	margin: 3px auto;
	padding: 30px auto;
	text-align:center;
	background: linear-gradient(#eeeeee, #dddddd);
}

#container .footer  a{
	background:#122738;
	color: #ffffff;
	
	border-radius: 50px;
	padding: 5px 15px;
	
	font-family:'Lato', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 40px;
	text-decoration: none;	
}

#container .footer a:hover{
	background:#89261c;
	color: #00ffff;
	text-decoration: none;	
}

#main_content {
	width:355px; 
	float:left;
}

#side_content {
	background-color:#f5f5f5;
	width:545px; 
	height:746px; 
	float:right;
	padding:25px 30px 25px 30px;
}

#ranking_container {
	width:285px; height:678px;
}

#menu {
	overflow:hidden; 
	width:100%;
	text-align:center;	
	background: linear-gradient(#122738, #2a4467);
	padding:2px;
	border-bottom:3px solid #ffffff;
}

#menu .group {
	width: 100%;
	text-align:center;
	margin: 10px 10px;
}

#menu .menu-item{
	cursor:pointer;
	width: 120px;
	margin:0 auto;
	color:#ffffff;
}

#menu .menu-item.highlight {
	color: #00ffff;
}

#menu .menu-item.selected {
	color: #ff2400;
}

#menu .menu-item p{
	margin: 4px 0px;
}

#menu .menutext p{
	font-size: 18px;
	color: #ffffff;
}

#menu .menutext p .highlight{
	color: #00ffff;
}


.rotate270 {
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform:rotate(270deg);
	-ms-transform:rotate(270deg);
	transform:rotate(270deg);
}

#ranking_chart {
	width:55px; 
	height:668px; 
	float:left;
}

#ranking_chart .triangle_container {
	background-color:#89261c;
	height:50px;
	padding-left:16px;
}

#ranking_chart .triangle_container.v2{
	background-color:#122738;
}

#ranking_chart .triangle {
	width:0;
	height:0;
	border-bottom:50px solid white;
	border-left:39px solid transparent;
}

#ranking_chart .gradient_background {
	position:relative;
	background-color:#ffffff;
	height:746px;
}

#ranking_chart .gradient {
	background:-moz-linear-gradient(100% 100% 90deg, #2a4467, #89261c);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#89261c), to(#2a4467));
	background: linear-gradient(#89261c, #2a4467);	
	width:30px;
	height:100%;
	top:0; right:0;
}

#ranking_chart .gradient.v2 {
	background:-moz-linear-gradient(100% 100% 90deg, #99bb77, #122738);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99bb77), to(#122738));
	background: linear-gradient(#122738, #99bb77);	
}

#ranking_chart .most_common {
	position:absolute;
	color:#89261c;
	font-size:18px;
	width:200px;
	top:78px; right:-86px;
}

#ranking_chart .most_common.v2 {
	color:#122738
}

#ranking_chart .least_common {
	position:absolute;
	color:#2a4467;
	font-size:18px;
	width:120px;
	bottom:54px; right:-46px;
}

#ranking_chart .least_common.v2{
	color:#99bb77;
}

#ranking_chart .gradient_text {
	position:absolute;
    color: #543746;
	font-size:20px;
	font-weight:bold;
	width:180px;
	top:50%; right:-76px;
}

#ranking_chart .gradient_text.v2{
    color: #5d795b;
	width:200px;
	top:50%; right:-87px;
}

#ranking {
	width:230px; 
	height:668px; 
	float:right;
	position:relative;
	margin-top:-2px;
}

#ranking .metric {
	position:absolute;
	cursor:pointer;
	width:300px;
	height:40px;
}

#ranking .metric span {
	color:#dddddd;
	font-size:18px;
	line-height: 40px;
	padding: 0px 10px;
}

#ranking .metric span.highlight {
	color:#00ffff;
}

#charts {
}

#charts svg {
	display:block;
	margin:0 auto;
}

svg text.pie_label {
	font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 100;
	fill: #333333;
}
svg text.pie_label.highlight {
	fill: #00ffff;
}

svg text.chart_text {
	font-size:16px;
}

svg text.chart_text_header {
	font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size:20px;
	fill: #122738;
}

svg text.pie_legend {
	font-size:16px;
}

svg text.pie_legend.highlight {
	fill:#ff2400;
}

svg text.metric_text {
	font-family:'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 18px;
	fill: #333333;
}
svg text.metric_text.highlight {
	fill: #ff2400;
}


svg path.nofill {
	fill: transparent;
	stroke: #333;
	stroke-width:0.5px;
}
svg path.nofill.highlight{
	fill: #ff2400;
}

/* <= IE8 specific code */
.lt-ie9 #ie_container {
	position:relative;
	width:900px;
	height:1200px;
}

.lt-ie9 #ie_container img {
	width:900px;
	height:1200px;
}

.lt-ie9 .browsehappy {
	position:absolute; top:300px; left:0;
	color:#454545;
	background-color:#00ccff; 
	padding:10px; 
	width:874px;
	text-align:center; 
	border:3px solid white;
	font-size:22px;
	font-family:Helvetica, Arial, sans-serif;
}

.lt-ie9 .browsehappy a {
	color:white;
}