/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
/* GO! */

body{
	background-color:#292929;

}

.section{
	width:100%;
	height:100%;
	position:relative;
	padding-bottom:150px;
	border-bottom:1px solid #000000;
}

.winner{
	background-color:#6ba9c0;

}

.sectionContainer{
	height:100%;
	width:90%;
	margin:0px auto;
}

.borderBottom{
	
}

/*.star{
	position:absolute;
	width:24px;
	height:24px;
	background-image:url(../images/twinkle.svg);
	left:50%;
	top: 543px;;
	margin-left:-12px;
	z-index:2;
}*/



/*INDIVIDUAL VOTES SECTIONS*/
.allVotesBarGraphs{
	width:775px;
	margin:75px auto 10px auto;
	height:190px;
	/*background-color:#FF0000;*/
	margin-top:90px;
	margin-bottom:55px;
	position:relative;
}

.indBarGraph{
	width:3.23%;
	height:100%;
	position:absolute;
	/*background-color:#00FF00;*/
}

.indBarGraph .votesContainer{
	width:100%;
	height:164px;
	position:relative;
	/*background-color:#0000FF;*/
}

.indBarGraph .votesFill{
	width:100%;
	background-color:#6ba9c0;
	position:absolute;
	bottom:0px;
}

.indBarGraph p{
	color:#6ba9c0;
	font-family: "brandon-grotesque", sans-serif;
	font-weight:900;
	width:100%;
	text-align: center;
	position:absolute;
	bottom:0px;
}

.individualDist .barOptions{
	width:365px;
	margin:0px auto;
}

.individualDist a{
	display: inline-block;
	background-color: #000000;
	color:#292929;
	font-weight: bold;
	font-size: 24px;
	padding: 9px 23px;
	font-family: "ff-tisa-web-pro", sans-serif;
	/*-webkit-transition: background-color .2s ease;
	-moz-transition: background-color .2s ease;
	-o-transition: background-color .2s ease;
	transition: background-color .2s ease;*/
	text-decoration: none;
	width:130px;
	text-align: center;
}

.individualDist a.selected{
	background-color: #dac2b1;
}

.individualDist .barOptions .sortByLetter{
	float:left;
}

.individualDist .barOptions .sortByPercent{
	float:right;
}

#BarA{left:0%;}#BarB{left:3.87%;}#BarC{left:7.74%;}#BarD{left:11.61%;}#BarE{left:15.48%;}#BarF{left:19.35%;}#BarG{left:23.22%;}#BarH{left:27.09%;}#BarI{left:30.96%;}#BarJ{left:34.83%;}#BarK{left:38.7%;}#BarL{left:42.57%;}#BarM{left:46.44%;}#BarN{left:50.31%;}#BarO{left:54.18%;}#BarP{left:58.05%;}#BarQ{left:61.92%;}#BarR{left:65.79%;}#BarS{left:69.66%;}#BarT{left:73.53%;}#BarU{left:77.4%;}#BarV{left:81.27%;}#BarW{left:85.14%;}#BarX{left:89.01%;}#BarY{left:92.88%;}#BarZ{left:96.75%;}

#BarA .votesFill{height:100%;}#BarB .votesFill{height:37.1%;}#BarC .votesFill{height:37.1%;}#BarD .votesFill{height:31.4%;}#BarE .votesFill{height:34.3%;}#BarF .votesFill{height:45.7%;}#BarG .votesFill{height:68.6%;}#BarH .votesFill{height:54.3%;}#BarI .votesFill{height:20%;}#BarJ .votesFill{height:45.7%;}#BarK .votesFill{height:57.1%;}#BarL .votesFill{height:20%;}#BarM .votesFill{height:88.6%;}#BarN .votesFill{height:45.7%;}#BarO .votesFill{height:37.1%;}#BarP .votesFill{height:25.7%;}#BarQ .votesFill{height:74.3%;}#BarR .votesFill{height:40%;}#BarS .votesFill{height:80%;}#BarT .votesFill{height:34.3%;}#BarU .votesFill{height:22.9%;}#BarV .votesFill{height:40%;}#BarW .votesFill{height:34.3%;}#BarX .votesFill{height:51.4%;}#BarY .votesFill{height:71.4%;}#BarZ .votesFill{height:62.9%;}


.barOptions{
		font-size: 30px;
	font-family: "ff-tisa-web-pro", sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #555555;
}

.individualDist a{
	padding-bottom:15px;
}

/*WINNERS SECTIONS*/

.phoneticLogo{
	position:absolute;
	padding-top: 15px;
	padding-left: 15px;
	width:186px;
}

.winningLetter{
	width:480px;
	height:450px;
	margin:0px auto;
	padding-top:80px;
	position:relative;
}

.bigWinner{
	padding-top:20px;
	padding-bottom: 30px;
}

.winnerGraphs{
	width:538px;
	margin-right: auto;
	margin-left: auto;
}

.winnerGraphs p{
	width:200px;
	font-size: 18px;
	font-family: "ff-tisa-web-pro", sans-serif;
	color: #292929;
	font-weight: 700;
	text-align: left;
	float:left;
	padding-top: 5px;
	font-style: italic;
}

.miniGraph{
	float:left;
	padding-right: 15px;
	padding-left: 25px;
	padding-top: 0px;
}

/*LETTER & GRAPH SECTIONS*/

h2{
	font-size: 30px;
	font-family: "ff-tisa-web-pro", sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #555555;
	margin-top:55px;
}

/*.section.vowels{
	width:100%;
	height:750px;
	position:relative;
}*/

.letterStatBox{
	margin-right: auto;
	margin-left: auto;
	width:750px;
}

.graphBox{
	margin-right: auto;
	margin-left: auto;
	width:1050px;
	margin-top: 100px;
}

.graphBox p{
	padding-left: 200px;
	padding-right: 200px;
	font-size: 18px;
	line-height: 25px;
	font-family: "ff-tisa-web-pro", sans-serif;
	color: #dac2b1;
	text-align: center;
	padding-top: 15px;
	font-style: italic;
}

.letterStat{
	width:150px;
	/*float:left;*/
	display:inline-block;
	margin: 130px 0px 0px 80px;
}

.letterStat h1{
	font-size: 150px;
	font-family: "brandon-grotesque", sans-serif;
	font-weight: 900;
	color: #6ba9c0;
	text-align: center;
	padding-bottom: 10px;
}

.letterStat p{
	width:50px;
	font-size: 18px;
	font-weight: 700;
	font-family: "ff-tisa-web-pro", sans-serif;
	color: #dac2b1;
	text-align: left;
	float:left;
	padding-top: 5px;
	font-style: italic;
}

.letterStat img{
	float:left;
	padding-right: 15px;
	padding-left: 25px;
}

/*FOOTER*/

.footer{
	width:100%;
	height:200px;
	position:relative;
	margin-top: 60px;
	margin-bottom: 60px;
	width:750px;
	margin-right: auto;
	margin-left: auto;
}

.footer p{
	margin-bottom:60px;
	font-size: 48px;
	font-family: "ff-tisa-web-pro", sans-serif;
	font-style: italic;
	font-weight: 700;
	color: #dac2b1;
	margin-top:55px;
	text-align: center;
}

.OTLogo{
	width:154px;
	height:154px;
	margin:20px auto 100px auto;
}



@media (max-width:1100px){

	.vowels .graphBox {
		width:758px;
	}

	.vowels .graphBox img{
		width:250px;
	}

	.vowels .graphBox p{
		padding-left: 0px;
		padding-right:0px;
	}

}

@media handheld, screen and (max-width: 750px){
	
	.section{
		padding-bottom:100px;
	}

.phoneticLogo{
	padding-top: 25px;
	padding-left: 0px;
	margin-left: auto;
	margin-right: auto;
	width:186px;
	position:relative;
}

.winnerGraphs{
	display: none;

}

.barOptions{
	display:none;
}

	.winningLetter{
		width:300px;
		height:240px;
		padding-top: 40px;
	}

	.winningLetter img{
		width:300px;
	}

	.vowels .graphBox {
		width:255px;
		margin-top:50px;
	}

	.vowels .graphBox p{
		padding-top: 20px;
	}
	
	.allVotesBarGraphs{
		height:600px;
		width:90%;
		margin-top:50px;
		margin-bottom:0px;
		/*background-color:#FF0000;*/
	}

	.indBarGraph{
		width:100%;
		height:3.23%;
		position:absolute;
		/*background-color:#00FF00;*/
	}

	.indBarGraph .votesContainer{
		width:85%;
		left:15%;
		height:100%;
		position:relative;
		/*background-color:#0000FF;*/
	}

	#BarA{top:0%;left:0px;}#BarB{top:3.87%;left:0px;}#BarC{top:7.74%;left:0px;}#BarD{top:11.61%;left:0px;}#BarE{top:15.48%;left:0px;}#BarF{top:19.35%;left:0px;}#BarG{top:23.22%;left:0px;}#BarH{top:27.09%;left:0px;}#BarI{top:30.96%;left:0px;}#BarJ{top:34.83%;left:0px;}#BarK{top:38.7%;left:0px;}#BarL{top:42.57%;left:0px;}#BarM{top:46.44%;left:0px;}#BarN{top:50.31%;left:0px;}#BarO{top:54.18%;left:0px;}#BarP{top:58.05%;left:0px;}#BarQ{top:61.92%;left:0px;}#BarR{top:65.79%;left:0px;}#BarS{top:69.66%;left:0px;}#BarT{top:73.53%;left:0px;}#BarU{top:77.4%;left:0px;}#BarV{top:81.27%;left:0px;}#BarW{top:85.14%;left:0px;}#BarX{top:89.01%;left:0px;}#BarY{top:92.88%;left:0px;}#BarZ{top:96.75%;left:0px;}

	#BarA .votesFill{width:100%; height:100%;}#BarB .votesFill{width:37.1%; height:100%;}#BarC .votesFill{width:37.1%; height:100%;}#BarD .votesFill{width:31.4%; height:100%;}#BarE .votesFill{width:34.3%; height:100%;}#BarF .votesFill{width:45.7%; height:100%;}#BarG .votesFill{width:68.6%; height:100%;}#BarH .votesFill{width:54.3%; height:100%;}#BarI .votesFill{width:20%; height:100%;}#BarJ .votesFill{width:45.7%; height:100%;}#BarK .votesFill{width:57.1%; height:100%;}#BarL .votesFill{width:20%; height:100%;}#BarM .votesFill{width:88.6%; height:100%;}#BarN .votesFill{width:45.7%; height:100%;}#BarO .votesFill{width:37.1%; height:100%;}#BarP .votesFill{width:25.7%; height:100%;}#BarQ .votesFill{width:74.3%; height:100%;}#BarR .votesFill{width:40%;height:100%;}#BarS .votesFill{width:80%; height:100%;}#BarT .votesFill{width:34.3%; height:100%;}#BarU .votesFill{width:22.9%; height:100%;}#BarV .votesFill{width:40%; height:100%;}#BarW .votesFill{width:34.3%; height:100%;}#BarX .votesFill{width:51.4%; height:100%;}#BarY .votesFill{width:71.4%; height:100%;}#BarZ .votesFill{width:62.9%; height:100%;}

	.indBarGraph .votesFill{
		height:100%;
	}

	.indBarGraph p{
		left:0px;
		width:10%;
		text-align:left;
	}

	.letterStat{
			margin: 50px auto;
			display:block;
	}

	.letterStatBox{
		width:290px;
	}

	.footer{
		width:300px;
	}

	.footer p{
		font-size: 24px;
	}

}