/*state code lables*/
@media only screen and ( min-width : 1024px ){
  .state_code{
    font-size:.7em;
  }
}

/*Google Trends logo on charts*/
.trends_logo{
    /*background: url(http://www.realclearpolitics.com/asset/img/google_trends_logo_bold.PNG) no-repeat;
    background-size: 125px 25px;
    background-position: right top;
    background-origin: content-box;
    padding-top: 15px;
    margin-right: 0px;*/
}

/*Close x on pop up*/
[class*='close-'] {
  color: #777;
  font: 20px/100% arial, sans-serif;
  position: absolute;
  right: 5px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  top: 5px;
  padding-right:5px;
  padding-top:5px;
  cursor:pointer;
}

.close-classic:after {
  content: 'X'; /* ANSI X letter */
}

.close-thin:after {
  content: '×'; /* UTF-8 symbol */
}

.close-thik:after {
  content: '✖'; /* UTF-8 symbol */
}

/*Ads */
.RC-AD-BOTTOM-BANNER, .RC-AD-TOP-BANNER{
    margin: 10px auto;
}

.RC-AD-BOX-TOP, .RC-AD-BOX-MIDDLE, .RC-AD-BOX-BOTTOM, .RC-AD-MOBILE-BANNER {
    margin: 10px auto;
    display:none;
}

@media only screen and (max-width: 767px){
  .RC-AD-BOTTOM-BANNER, .RC-AD-TOP-BANNER{
    display:none;
  }
  .RC-AD-BOX-TOP, .RC-AD-BOX-MIDDLE, .RC-AD-BOX-BOTTOM, .RC-AD-MOBILE-BANNER {
    display:block;
  }
}

/*CSS for map*/
.background {
  fill: none;
  pointer-events: all;
}

#states {
  fill: #aaa;
}

#states .active {
  fill: orange;
}

.feature:hover {
    fill: bisque;
}

#state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.feature {
  fill: #ccc;
  cursor: pointer;
}

.feature.active {
  fill: orange;
}

.mesh {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*CSS for bar charts */

#tick{
	width:130px;
	height:50px;
	-ms-transform:rotate(270deg); /* IE 9 */
	-moz-transform:rotate(270deg); /* Firefox */
	-webkit-transform:rotate(270deg); /* Safari and Chrome */
	-o-transform:rotate(270deg); /* Opera */
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.mid-col-content .bar {
  fill: #f9c129;
}

.mid-col-content .bar:hover {
  fill: #d09804;
}

.mid-col-content .red_chart .bar{
  fill:#eb4639;
}

.mid-col-content .red_chart .bar:hover{
  fill:#9e0000;
}

.mid-col-content .blue_chart .bar{
  fill:#537dbf;
}

.mid-col-content .blue_chart .bar:hover{
  fill:darkblue;
}

.x.axis path {
  display: none;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}




/*content page custom css*/
.header_title h2{
  font-size:1.8em;
}

img.g_logo {
    width: 142px;
    vertical-align: middle;
}
.provided_by{
  font-size:.8em;
}

.alpha-container .middle-col .mid-col-content{
	clear:both;
	border-top: 1px #d0cdcd solid;
}

.alpha-container .middle-col .heading{
	clear:both;
}

.alpha-container .battle_ground_states{
  /*float: right;*/
  margin-top: 5px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 9px;
  font-weight: 700;
}
.battle_ground_chart p{
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom:10px;
  margin:0px;
  font-size:.75em;
}

.battle_states_span h4{
  margin:0px;
  display: inline;
}

.battle_states_span{
  float:right;
}

.alpha-container .left-col{
    max-width: 24%;
    width: 24%;
    float:left;
    margin-right:5px;
    border:1px #d0cdcd solid;
}

.alpha-container .middle-col{
    max-width: 99%;
    width: 99%;
    /*float:left;*/
    padding-left:5px;
    padding-right:5px;
    border: 1px #d0cdcd solid;
    margin:0 auto;
    z-index: 1;
    clear:both;
}

.alpha-container .right-col{
    max-width: 24%;
    width: 24%;
    float:left;
    padding-left:5px;
    border: 1px #d0cdcd solid;
}

.alpha-container .testing{
	max-width:100%;
	width:100%;
	clear:both;
}

.alpha-container .left-col-heading{
	border-bottom:1px #d0cdcd solid;
	text-align: center;
	padding-top:10px;
	padding-bottom:2px;
	font-size:1.8em;
	margin:0px;
}

.alpha-container .candidates{
	width:100%;
	height:30px;
	font-weight:700;
}

.alpha-container .issues{
	font-size:1.8em;
	margin-top:10px;
	margin-bottom:2px;
	float:left;
}

.alpha-container .middle-col .red_blue_selects{
  float:right;
}

.alpha-container .middle-col .red_states{
  margin-top: 5px;
  margin-right: 6px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 9px;
  font-weight: 700;
}

.alpha-container .middle-col .blue_states{
  margin-top: 5px;
  margin-right: 2px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 9px;
  font-weight: 700;
}

.alpha-container .middle-col .red-vs-blue .state_select{
  float:right;
}

.alpha-container .middle-col .red-vs-blue h3{
  margin-bottom:0px;
  display:inline;
  margin-top:20px;
}

.alpha-container .red-blue-states {
  width:99%;
  min-width:99%;
  max-width:100%;
}

.red-vs-blue p, .search_message{
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom:10px;
  margin:0px;
  font-size:.8em;
}

.search_message{
  border-top: 1px #d0cdcd solid;
}

.alpha-container .mid-col-content .red-vs-blue{
  max-width:49%;
  width:49%;
  border-top: 1px #d0cdcd solid;
  display: table-cell;
}

.alpha-container .mid-col-content .red_chart{
  border-right: 1px #d0cdcd solid;
}

.alpha-container .middle-col .map_div_chart{
  border-top:1px #d0cdcd solid;
  clear: both;
  width: 100%;
}

@media only screen and ( max-width : 1023px ){
  #political h2, .intro-text p{
    padding-left: 10px;
    padding-right: 10px;
  }
  .alpha-container .mid-col-content .red-vs-blue {
      max-width: 99%;
      width: 99%;
      min-width: 99%;
      /*float: left;*/
      border-top: 1px #d0cdcd solid;
      display:block;
  }

  .alpha-container .mid-col-content .red_chart {
    border-right: 0px #d0cdcd solid;
  }

  .alpha-container .middle-col .red_states {
    margin-right: 0px;
  }

  .alpha-container .middle-col .blue_states{
    margin-right: 0px;
  }

  .alpha-container .battle_ground_states {
    margin-right:5px;
  }
}

/*CSS for SVG Map*/
.map_div{
  position:relative;
}

.map_div_chart{
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 67%;
  vertical-align: middle;
  overflow: hidden;
}

.map_div_chart svg{
    /* overflow: hidden; */
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
}

/*CSS for tool tip*/
.state_name_tool_tip h2{
  font-size: 1.1em;
}
.state_name_tool_tip{
  position: absolute;
  z-index: 100;
  display: none;
  opacity: 0.8;
  width: 140px;
  color: #FFFFFF;
  background: #000000;
  line-height: 37px;
  text-align: center;
  visibility: visible;
  border-radius: 0px;
  height: 60px;
}

/*.state_name_tool_tip:after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}*/

@media only screen and ( max-width : 767px ){
	.state_name_tool_tip h2{
		font-size: .6em;
	}
	.state_name_tool_tip{
	  	position: absolute;
	  	z-index: 100;
	  	display: none;
	  	opacity: 0.8;
	  	width: 80px;
	  	color: #FFFFFF;
	  	background: #000000;
	  	line-height: 20px;
	  	text-align: center;
	  	visibility: visible;
	  	border-radius: 0px;
	  	height: 35px;
	}
}

/*CSS for Map pop up*/
.state_info{
  position:absolute;
  float:right;
  border:1px #d0cdcd solid;
  z-index:100;
  background-color:white;
  width:30%;
  margin-left:20px;
  margin-top:20px;
  padding:20px;
  display:none;
  height: 700px;
  overflow-y: auto;
}

img.by_line_g {
  width: 115px;
  vertical-align: middle;
}

span.data_name {
  width: 45%;
  min-width: 45%;
  display: inline-block;
  font-weight:600;
}

span.data_point {
  width: 55%;
  min-width: 55%;
  display: inline-block;
}

.trending_data ul, .politica_data ul {
  padding-left: 0px;
}

#presi_trending ul{
  margin-top:10px;
}

.map_div em {
  font-size: .6em;
}

.trending_data ul li, .politica_data ul li{
  background: linear-gradient(to right, white, orange) no-repeat scroll 0 0 transparent;
  background-repeat-y: inherit;
  background-repeat: repeat-y;/*for stupid EI or Edge*/
  margin-top: 4px;
  margin-bottom: 4px;
}

.politica_data div#presi_polls {
    margin-bottom: 20px;
}

.politica_data ul.election_data li{
  	clear:both;
    border-bottom: 1px #d0cdcd solid;
}
.politica_data ul.election_data{
  margin-bottom: 20px;
}

.politica_data ul.election_data li span{
  width: 45%;
  min-width:45%;
  display: inline-block;
}

.state_info span.message{
  font-size:.8em;
}

.politica_data ul.election_data li span.name, .politica_data ul.election_data li span.no_elec_data{
  padding: 2px;
  margin: 2px;
  word-wrap: break-word;
}

.politica_data ul.election_data li span.Democrat{
  color: blue;
}

.politica_data ul.election_data li span.Republican{
  color:red;
}

.politica_data ul.election_data li span.Libertarian {
  color: #8e8e10;
}

.politica_data ul.election_data li span.Green {
  color: green;
}
.politica_data .winner{
  float:right;
  width: 20px;
}

.politica_data h4{
  margin-bottom:5px;
}

.polling_table_header{
  background-color:#DC0000 !important;
  text-align: center;
  font-size: .8em;
}

.polling_data{
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.polling_data td {
    border-left: 1px solid black;
}

.polling_data tr:first-child td:nth-child(1){
  border-left:none;
}

.polling_data td{
  padding:3px;
}

.polling_data td.poll_name{
  min-width:55%;
  width:55%;
}

.polling_data td.poll_number{
  min-width:15%;
  width:15%;
  text-align: center;
}
.polling_data td.spread_number{
  min-width:15%;
  width:15%;
}

.polling_data tbody td {
  background-color: #F0DF6B;
  font-size: .8em;
}

.polling_data thead td{
  font-weight:600;
  background-color: black;
  color:white;
  font-size:.8em;
}

.polling_data tbody td.Democrat{
  color:#00F;
}

.polling_data tbody td.Republican{
  color:red;
}

@media only screen and ( max-width : 1024px ){
	.state_info{
	    height: 600px;
		overflow-y: auto;
		width: 33%;
	}

	.state_info h2{
		margin-top:10px;
		margin-bottom:10px;
	}
}

@media only screen and ( max-width : 1023px ){
	.state_info{
		width:40%;
	}
	span.data_name {
		width: 60%;
		min-width: 60%;
	}

	span.data_point {
		width: 40%;
		min-width: 40%;
	}

	.polling_data td {
		font-size:.8em;
	}

	.politica_data ul.election_data li span.name{
		font-size: .9em;
		padding: 1px;
    	margin: 1px;
	}
	.politica_data .winner {
	    width: 17px;
	}

	.politica_data h4{
		margin-top: 10px;
    	margin-bottom: 10px;
	}
}

@media only screen and ( max-width : 768px ){
	.state_info{
	    height: 430px;
		overflow-y: auto;
	}

  .trending_data h3{
    font-size: 1em;
  }

  img.by_line_g {
    width: 96px;
  }
}

@media only screen and ( max-width : 767px ){
    [class*='close-'] {
      font: 20px/100% arial, sans-serif;
    }

  	.state_info{
    	position:absolute;
    	float:right;
    	border:1px #d0cdcd solid;
    	z-index:100;
    	background-color:white;
    	width:51%;
    	margin-left:5px;
    	margin-top:5px;
    	padding:10px;
    	display:none;
    	height: 240px;
    	overflow-y: auto;
  	}

  	.state_name h2{
    	font-size: 1.1em;
    	margin-top: 5px;
    	margin-bottom: 5px;
  	}

  	.trending_data h3{
    	font-size: .6em;
    	margin-top: 5px;
    	margin-bottom: 5px;
  	}

    img.by_line_g {
      width: 64px;
    }

  	span.data_name {
    	width: 80%;
    	min-width: 80%;
    	font-size: .8em;
  	}

  	span.data_point {
    	width: 20%;
    	min-width: 20%;
    	font-size: .8em;
  	}

  	.alpha-container .issues{
		  line-height: 25px
	  }

	.map_div em {
	    font-size: .4em;
	    line-height: 1px;
	}

	.politica_data ul.election_data li span{
	  width: 47%;
	  min-width:47%;
	}

	.politica_data ul.election_data li span.name, .politica_data ul.election_data li span.no_elec_data{
		font-size:.70em; 
	}

	.politica_data ul.election_data li span.name, .politica_data ul.election_data li span.no_elec_data{
	  padding: 1px;
	  margin: 1px;
	  font-size: .7em;
    padding-right:5px;
	}

	.state_info span.message{
	  font-size:.5em;
	}

	.politica_data .winner{
	  width: 13px;
	}

	.polling_data td {
		font-size:.7em;
	}

  .trends_logo{
    background-size: 100px 20px;
  }

  .red-vs-blue p, .search_message{
    font-size:.6em;
  }
}

.battle_ground_chart,
.red-vs-blue .red_chart,
.red-vs-blue .blue_chart,
.map_div_chart {
  position: relative;
}
  .battle_ground_chart .chart_logo,
  .red-vs-blue .red_chart .chart_logo,
  .red-vs-blue .blue_chart .chart_logo,
  .map_div_chart .chart_logo {
    position: absolute;
    top: 10px;
    right: 5px;
  }

@media only screen and ( max-width : 667px ){
  .state_info{
    height: 350px;
    overflow-y: auto;
  }
}

@media only screen and ( max-width : 425px ){
  .state_info{
    height: 250px;
    overflow-y: auto;
  }
}

@media only screen and ( max-width : 375px ){
  .state_info{
    height: 218px;
    overflow-y: auto;
  }
}

@media only screen and ( max-width : 320px ){
  .state_info{
    height: 180px;
    overflow-y: auto;
  }
  .trending_data h3{
    font-size: .5em;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  img.by_line_g {
    width: 60px;
  }
  .polling_data td {
    font-size: .6em !important;
  }
}