@font-face {
     font-family: 'StateFaceRegular';
     src: url('../fonts/stateface-regular-webfont.eot');
     src: url('../fonts/stateface-regular-webfont.eot?#iefix') format('embedded-opentype'),
          url('../fonts/stateface-regular-webfont.woff') format('woff'),
          url('../fonts/stateface-regular-webfont.ttf') format('truetype'),
          url('../fonts/stateface-regular-webfont.svg#StateFaceRegular') format('svg');
     font-weight: normal;
     font-style: normal;
}


/* STRUCTURE */
#bigbox { min-height: 280px; }
#states { font-size: 22px; }
.candidate { width: 48%; }
.candidate.blue { float: left; }
.candidate.red { float: right; }
.candidate.blue .bucket { float: right; }
.candidate.blue .combos { float: left; }
.candidate.red .bucket { float: left; }
.candidate.red .combos { float: right; }
.bucket { width: 10em; }
.combos { width: 9em; }


/* CLEARFIXES */
#electris:after,
#states:after,
#buckets:after,
.tossups:after,
.candidate:after { 
	content: "."; display: block; height: 0; clear: both; visibility: hidden;
}


/* THINGS WE DON'T WANT TEXT HIGHLIGHTING ON */
.tossups li,
.state, .state i
.histogram li { 
	-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* GENERAL STYLES */
h2 {
	font-size: 1.3em;
	margin-bottom: 3px;
	text-transform: lowercase;
}
h3 {
	font: bold 1.1em Arial, Helvetica, sans-serif;
	color: #333;
}
h5 {
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #333;
	margin-bottom: 3px;
}
a.btn { color: #fff; cursor: pointer; }


/* INTRO */
.intro { color: #333; }
.intro h1 { font-size: 32px; line-height: 1.125em; margin-bottom: .6em; font-weight: normal; color: #222; }
.intro p { line-height: 1.45em; }
.intro p.date { color: #999; font-style: italic; }
.credits { font-size: .85em; color: #666; margin-top: 1.5em; }
.credits p { margin: 0 0 .1em 0; }
.related { margin-top: 1.5em; }
.related h3 { margin-top: 0; }
.credits h4 { font: bold 1em Arial, Helvetica, sans-serif; color: #333; margin: 0 0 .3em 0; text-transform: uppercase; }


/* KEY */
#key { padding: 6px 0 0 0; margin-bottom: 24px; margin-top: -24px; clear: both; }
#key ul { list-style: none; margin: 0; padding: 0; }
#key li { display: inline-block; color: #666; white-space: nowrap; font-size: 12px; margin: 0 .5em .5em 0; padding: 0; line-height: 1.2em; }
#key .key-title { display: block; font: bold 14px Arial, Helvetica, sans-serif; color: #333; margin-bottom: 6px; }
#key b { background-color: #555; color: #fff; text-align: center; padding: 1px 6px; display: inline-block; }
#key .prediction-sd b { background-color: #3d7fa6; }
#key .prediction-ld b { background-color: #7dbfe6; }
#key .prediction-t b { background-color: #E5BF57; }
#key .prediction-lr b { background-color: #e27560; }
#key .prediction-sr b { background-color: #a23520; }


/* ELECTRIS */
#electris { margin-left: 20px; padding-top: 20px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
#buckets { position: relative; }
.state { z-index: 100; }
.state i {
    float:left;
    font-family:StateFaceRegular;
    font-style:normal;
    text-align: center;

/*    width:.9em;
    margin-right:.1em; margin-bottom:.1em;
    height:.9em;*/
    width:20px;
    height:20px;
    margin-right:2px;
    margin-bottom:2px;
    
    
    overflow: hidden;
    background-color: #f7e39b;
    color: #77631b;
	border-radius: 3px;
}
.no-touch .state:hover, 
.no-touch .state:hover i, 
.no-touch .state:hover i span { cursor: default; }
.state i span { font-size:.7em; }

/* Before election night: shade by forecast */
.state.prediction-sd i { background-color: #3d7fa6; color: #A8D5EF; }
.state.prediction-ld i { background-color: #7dbfe6; color: #A8D5EF; }
.state.prediction-t i { background-color: #E5BF57; color: #FBF1CD; }
.state.prediction-t.combo-pick i { background-color: #bcbcbc; color: #f1f1f1; }
.state.prediction-lr i { background-color: #e27560; color: #ECA395; }
.state.prediction-sr i { background-color: #a23520; color: #ECA395; }

/* On election night: shade by call */
.state.call-d i { background-color: #3d7fa6; color: #fff; }
.state.call-r i { background-color: #a23520; color: #fff; }

.no-touch .state:hover i, 
.no-touch .state.prediction-t.combo-pick:hover i { color: #fff; }

#line {
	height: 1px;
	background-color: #B39429;
    position:absolute;
    z-index:100;
    width: 100%;
    text-align:right;
    line-height:0;
}
#line b {
    display: block;
    text-align: center;
    background-color: #FFF;
    text-indent: -9999px;
    background: url('../img/270-line-767.png') no-repeat center center;
    height: 33px;
    margin-top: -7px;
}

.bucket {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}
.bucket .state i {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

.bucket-header {
	border-top: 3px solid #000;
	overflow: hidden;
	height: 3em;
	position: relative;
}
.blue .bucket-header { background: url('../img/silo-obama-45.png') no-repeat left 2px; }
.red .bucket-header  { background: url('../img/silo-romney-45.png') no-repeat right 2px; }

.bucket-header h3 {
	padding-top: 16px;
	font: normal normal 22px Georgia, serif;
	color: #333;
	margin-left: 50px;
	white-space: nowrap;
}
.red .bucket-header h3 { text-align: right; margin-right: 50px; }
.bucket-header h3 i, .bucket-header h3 b {
	font-weight: normal; font-style: normal;
}
.bucket-header p {
	font-size: 12px;
	margin-bottom: 0;
	color: #666;
	margin-left: 50px;
}

.vote-tallies { width: 10em; position: absolute; top: 13px; }
.blue .vote-tallies { right: 0; }
.red .vote-tallies { left; 0; }
.vote-tallies .electoral { width: 50%; float: left; }
.vote-tallies .needed { width: 50%; float: right; }
.vote-tallies .bignum {
	display: block;
	width: 50%;
	height: .75em;
	overflow: hidden;
	text-align: center;
	background-color: #eee;
	float: left;
	margin-right: 3%;
	padding: .25em 0 .75em 0;
	font: normal 20px Georgia, serif;
	border-radius: 3px;
}
.vote-tallies .needed .bignum { background-color: #f7e39b; color: #77631b; }
.red .vote-tallies .electoral .bignum { background-color: #a23520; color: #fff; }
.blue .vote-tallies .electoral .bignum { background-color: #3d7fa6; color: #fff; }
.blue .vote-tallies .electoral { float: right; }
.blue .vote-tallies .bignum { float: right; margin-right: 0; margin-left: 3%; }
.vote-tallies span {
	display: block;
	width: 47%;
	float: left;
	color: #666;
	font-size: 11px;
	line-height: 1.2em;
	padding-top: 12px;
	text-transform: uppercase;
}
.blue .vote-tallies span { text-align: right; }
.red .vote-tallies span { text-align: left; }
.winner .bucket-header { border-color: #B39429; }
.winner .bucket-header h3 { 
	color: #B39429; 
	padding-right: 25px; display: inline-block; 
	background: url('../img/ico-checkmark.png') no-repeat right 20px;
}
.winner.red .bucket-header h3 { 
	padding-left: 25px; padding-right: 0; float: right; 
	background: url('../img/ico-checkmark.png') no-repeat left 20px;
}


/* COMBOS */
.combos { margin-top: -8px; }
.combos .explainer p { font-size: 12px; height: 32px; overflow: hidden; }
.combos ul { list-style: none; margin: 0; padding: 0; }
.combos li { margin: 0 0 3px 0; padding: 0; text-indent: 0; }

.histogram h4 {
	font: 13px Arial, Helvetica, sans-serif;
	margin: 0;
	color: #333;
	background-color: #fff;
	border: 1px solid #dadada;
	position: relative;
	z-index: 98;
	height: 31px; overflow: hidden;
	border-radius: 4px;
	white-space: nowrap;
}
.histogram h4 strong { font-weight: normal; color: #999; }
.histogram .active h4 strong { font-weight: bold; color: #333; }
.no-touch .histogram .active h4:hover { cursor: pointer; text-decoration: underline; }
.histogram .title {
	padding: 9px 12px 0 12px;
	display: block;
	z-index: 100;
}
.histogram .bar {
	display: block;
	width: 100%;
	height: 33px;
	margin-top: -25px;
	z-index: 99;
	background: #ccc;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#aaa));
	background-image: -webkit-linear-gradient(top, #ddd, #aaa);
	background-image: -o-linear-gradient(top, #ddd, #aaa);
	background-image: linear-gradient(to bottom, #ddd, #aaa);
	background-image: -moz-linear-gradient(top, #ddd, #aaa);
	border-radius: 4px;
}


/* COMBINATIONS */
.combinations { clear: both; padding-top: 18px; }
.combinations b {
	font-weight: normal;
	font-family: StateFaceRegular;
    display: inline-block;
}
.combinations p.robotext { font-size: 12px; color: #666; margin: 0 0 12px 0; }
.combinations p.robotext strong { color: #333; }
.combinations h4 { 
	font: bold 13px Arial, Helvetica, sans-serif; 
	margin: 0; padding-top: 10px; 
	color: #333; 
	width: 15%; float: left;
}
.combinations h4 span {
	display: block;
	color: #999;
	font-size: 11px;
	margin-top: 3px;
	font-weight: normal;
}
.combinations h4 a { font-size: 11px; font-weight: normal; color: #666; }
.combinations ul { list-style: none; margin: 0; padding: 0; font-size: 12px; width: 100%; }
.combinations ul li { margin: 0 0 1px 0; clear: left; height: 1%; overflow: hidden; border-top: 3px solid #ccc; }
.combinations ul li ul { width: 80%; float: right; }
.combinations ul li ul li { margin: 0; padding: 9px 9px; color: #999; width: auto; clear: none; border: none; border-top: 1px solid #ddd; }
.combinations ul li ul li:nth-child(2n) { background-color: #f7f7f7; }
.combinations ul li ul li:first-child { border: none; }
.combinations ul strong { white-space: nowrap; color: #555; }


/* TOSSUPS */
.combos .tossups { margin: 6px 0 18px 0; }
.tossups li { 
	float: left; 
	width: 31%;
	margin: 0 2% 2% 0; 
}
.tossups li div {
	padding: 6px 0;
	text-align: center;
	text-shadow: 1px 3px 1px rgba(255, 255, 255, 0.4);
	color: #B39429;
	font-weight: bold;
    font-size: 18px;
	overflow: hidden;
	background: #f7e39b;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FBF1CD), to(#f4db82));
	background-image: -webkit-linear-gradient(top, #FBF1CD, #f4db82);
	background-image: -o-linear-gradient(top, #FBF1CD, #f4db82);
	background-image: linear-gradient(to bottom, #FBF1CD, #f4db82);
	background-image: -moz-linear-gradient(top, #FBF1CD, #f4db82);
	background-repeat: repeat-x;
	border: 1px solid #f4db82;
	*border: 0;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border-color: #faeab2 #f4db82 #e5bf57;
	border-bottom-color: #e5bf57;
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#FBF1CD', endColorstr='#f4db82', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
	*zoom: 1;
	-webkit-box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
	   -moz-box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
	        box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.15);
}
.tossups li.active div {
	background: #B39429;
	text-shadow: 0 1px 1px rgba(179, 148, 41, 0.75);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5BF57), to(#B39429));
	background-image: -webkit-linear-gradient(top, #E5BF57, #B39429);
	background-image: -o-linear-gradient(top, #E5BF57, #B39429);
	background-image: linear-gradient(to bottom, #E5BF57, #B39429);
	background-image: -moz-linear-gradient(top, #E5BF57, #B39429);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#E5BF57', endColorstr='#B39429', GradientType=0);
	border-color: #E5BF57;
	border-bottom-color: #B39429;
}
.tossups li.taken div { 
	background: #FBF1CD;
	background-image: none;
	color: #f5dc81;
}
.tossups li.taken, .tossups li.taken span, 
.tossups li.taken i { color: #f5dc81; }
.no-touch .tossups li:hover div, 
.no-touch .tossups li.taken:hover div {
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(229, 191, 87, 0.75);
	background: #E5BF57;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5dc81), to(#E5BF57));
	background-image: -webkit-linear-gradient(top, #f5dc81, #E5BF57);
	background-image: -o-linear-gradient(top, #f5dc81, #E5BF57);
	background-image: linear-gradient(to bottom, #f5dc81, #E5BF57);
	background-image: -moz-linear-gradient(top, #f5dc81, #E5BF57);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5dc81', endColorstr='#E5BF57', GradientType=0);
	border-color: #faeab2 #f7e39b #e5bf57;
	border-top-color: #f5dc81;
	color: #fff;
}
.no-touch .tossups li:hover span, 
.no-touch .tossups li.taken:hover span,
.tossups li.active div, 
.tossups li.active span,
.no-touch .tossups li:hover i, 
.no-touch .tossups li.taken:hover i,
.tossups li.active i, 
.tossups li.active i {
	color: #fff;
}
.tossups .abbr { display: none; }
.tossups .full { display: inline; }
.tossups b {
	font: normal 1em StateFaceRegular;
    text-align: center;
    display: inline-block;
    width: 1.2em;
    height:1em;
}
.tossups i { display: none; font-size: 11px; height: 11px; font-weight: normal; font-style: normal; color: #77631B; line-height: 12px; }
.tossups span { font: normal 11px Arial, Helvetica, sans-serif; text-align: left; color: #77631b; height: 11px; }

.touch-device .tossups b { background: url('../img/ajax-loader.png') no-repeat center -9999px; }
.touch-device .tossups .spinner b { text-indent: -9999px; background-position: center center; }




/* TOOLTIP */
.tooltip.in { opacity: 1; filter: alpha(opacity=100); }
.tooltip-inner {
	font-weight: bold;
	color: #333;
	border: 1px solid #999;
	background-color: #fff;
}
.tooltip.top .tooltip-arrow { border-top-color: #999; }
.tooltip.right .tooltip-arrow { border-right-color: #999; }
.tooltip.left .tooltip-arrow { border-left-color: #999; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #999; }


/* FOOTER EXTRAS */
#footer .credits { font: italic 11px Arial; color: #999; margin-top: 10px; }
#footer ul.bottomlist.elexLinks { margin-top: 15px; border-bottom: 1px dotted #CCC; border-top: 1px dotted #CCC; }
#footer ul.bottomlist li.elex a { color: black; font-weight: bold; }


/* RESPONSIVE FUN */
@media (min-width: 1200px) {
	#electris { padding: 0 10px; }
	#bigbox { width: 300px; }
	#states { font-size: 25px; }
	/*.state i { padding-top: .05em; height: .85em; }*/
    .state i {
        width:23px;
        height:23px;
        margin-right:2px;
        margin-bottom:2px;
    }
	.bucket { width: 15em; }
	.combos { width: 6.5em; }
	.histogram h4 { height: 22px; }
	.histogram .title { padding: 5px 12px 0 12px; font-size: 12px; }
	.histogram .bar { height: 24px; margin-top: -20px; }
	.bucket-header h3 { font-size: 28px; padding-top: 13px; }
	.vote-tallies { top: 10px; }
	.vote-tallies .bignum { font-size: 24px; }
	.vote-tallies span { padding-top: 16px; }
	#key { margin-top: -32px; }
	#key li { margin-right: 1em; }
}
@media (max-width: 979px) {
    .intro { width: 404px; }
	.tossups i { display: block; }
	.tossups span { display: block; text-align: center; }
}
@media (max-width: 979px) and (min-width: 768px) {
	#main-header, #header-title { width: 724px; }
	.intro h1 { font-size: 28px; }
	#states { font-size: 20px; }
    .state i {
        width:19px;
        height:19px;
        margin-right:1px;
        margin-bottom:1px;
    }
	.bucket { width: 10em; }
	.combos { width: 6.5em; }
	.bucket-header { height: 4em; }
	.bucket-header h3 { font-size: 24px; }
    .bucket-header h3 i { display: none; }
    .vote-tallies { width: 9em; }
	.tossups li b, .tossups li span { display: block; text-align: center; margin: 0 auto; }
	.combos .explainer p { height: 52px; font-size: 13px; }
}
@media (max-width: 767px) {
	.intro { width: auto; padding-bottom: 18px; }
	.intro h1 { font-size: 28px; }
	#bigbox { float: none; width: auto; padding-top: 1em; background-color: #f1f1f1; margin: 0 0 1.8em 0; min-height: auto; }
	#electris { margin-left: 0; padding-top: 18px; }
	#key li { margin-right: 1em; }
	#states { font-size: 10px; }
/*    #states .bucket .state i { text-indent: -9999px; width: 9.5%; margin-right: .5%; }*/
    .state i {
        text-indent: -9999px;
        width:9.5%;
        margin-right:.5%;
        margin-bottom:1px;
        height:9px;
    }
	.bucket-header h3 { font-size: 19px; }
    .bucket-header h3 i { display: none; }
	.blue .bucket, .red .bucket { float: none; }
	.candidate.blue .combos, .candidate.red .combos { 
		width: auto; clear: none; float: none;
		margin: 15px 0 0 0;
	}
	.bucket { width: 100%; margin-bottom: 10px; }
	.bucket-header, .blue .bucket-header, .red .bucket-header { 
		height: 8em;
		background-position: left 9px;
	}
	.bucket-header h3, .blue .bucket-header h3, .red .bucket-header h3 { 
		padding-top: 6px;
		text-align: left;
		margin-bottom: 0;
	}
    .bucket-header h3 i { display: inline; }
	.blue.winner .bucket-header h3 { background-position: right 8px; }
	.red.winner .bucket-header h3 { padding-right: 25px; padding-left: 0; float: none; background: url('../img/ico-checkmark.png') no-repeat right 8px; }
	.vote-tallies, .blue .vote-tallies, .red .vote-tallies { 
		position: static; top: auto; right: auto; left: auto; width: auto;
		margin-left: 50px; margin-top: 3px;
	}
	.winner.blue .vote-tallies, .winner.red .vote-tallies { margin-top: 2px; }
	.vote-tallies .bignum { font-size: 18px; }
	.blue .vote-tallies .electoral { float: left; }
	.blue .vote-tallies .bignum { float: left; margin-right: 3%; margin-left: 0; }
	.blue .vote-tallies span { text-align: left; }
	.combos { width: auto; height: auto; border: none; }
	#line b {background: url('../img/270-line-767.png') no-repeat center center; height: 42px;margin-top: -10px;}

	.combinations h4 { width: auto; float: none; margin-bottom: 6px; }
	.combinations ul li ul { width: auto; float: none; }
	.combinations ul li ul li { padding-left: 12px; }
	.combinations ul li ul li:first-child { border-top: 1px solid #ddd; }
	
	.tossups li div { height: 43px; overflow: hidden; }
}
@media (max-width: 480px) {
	.intro h1 { font-size: 30px; padding-top: 5px; }
	#bigbox { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; width: auto; margin-bottom: 1.8em; float: none; }
	#states .bucket .state i { text-indent: -9999px; width: 9%; margin-right: 1%; min-width: 13px; }
    .bucket-header h3 i { display: none; }
	.vote-tallies .bignum, .red .vote-tallies .bignum, .blue .vote-tallies .bignum, 
	.vote-tallies span, .red .vote-tallies span, .blue .vote-tallies span { 
		float: none; text-align: center;
	}
	.vote-tallies .bignum {
		width: auto; font-size: 14px; font-weight: bold; float: none;
	}
	.vote-tallies span { 
		width: auto; float: none; margin-top: 0; text-align: center; padding-top: 3px;
	}
	#key span { display: none; }
}