html{
	background-color: white;
}

body {
	font-family: SourceSansPro-Regular, Arial, sans-serif;
	font-size:11pt;
	color:#231F20;
	fill:#AFBABF;
	background-color: white;
}

#main{
	margin-top: -40px;
}
#main svg{
	margin-top: -40px;
}
.style-head {
	font-size:36px;
	line-height:52px;
	text-align:left;
	color:#8b8a8a;
	font-family: "Times New Roman", Times, Georgia, serif;
	font-style: italic;
	font-weight: 100;
}
.style-explain {
	font-size:18px;
	line-height:24px;
	text-align:left;
	color:#000000;
	margin-bottom: 20px;
}

.lawyer-side{
	display:inline-block;
	vertical-align: top;
	width:320px;
	margin-right: 70px;
}
.lawyer-main{
	font-family: SourceSansPro-Bold;
	font-size: 20px;
}
strong{
		font-family: SourceSansPro-Bold;
}
.lawyer-rep{
	font-style: italic;
	margin-top: 10px;
	margin-bottom: 5px;
}
.lawyer-explain{
	line-height: 1.2;
}

section {
	display: block;
	position: relative;
}

.countyTips{
	fill:white !important;
}
.countyTips:hover{
	fill:orange !important;
	opacity:1 !important;
}

.judges{
	display:inline-block;
	vertical-align: top;
}	
.judges.for{
	margin-right: 50px;
}
.judgename{
	display:inline-block;
	width:80px;
	text-align: center;
}
.image-holder{
	margin-bottom: 40px;
}
.judge-side{
	margin-bottom:5px;
}

section#ReutersGraphicsCharts section#overviewCharts .chart {
	display:inline-block;
	margin-top:10px;
  margin-right: 0px;
	width:600px;
	height:343px;
  right: 0px;
}

section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic1 {
	width: 800px;
	height: 250px;
}

section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic2 {
	width: 800px;
	height: 300px;
}

section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic3 {
	width: 500px;
	height: 300px;
	float: right;
}

/*section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic7 {
   width: 375px;
   margin-right: 0px;
   right: 0px;
   float: right;
}
*/
section#ReutersGraphicsCharts section#overviewCharts .labelBox{
	margin:0 0 -15px 0;
}

section#ReutersGraphicsCharts section#overviewCharts .chartLabel{
	display:inline-block;
	width:450px;
	font-size: 28px;
	font-family:SourceSansPro-Light, Arial, sans-serif;
	margin: 20px 0 -20px 0px;
}

section#ReutersGraphicsCharts section#overviewCharts .chartLabel p{
	font-size: 12pt;
	font-family:SourceSansPro-Light, Arial, sans-serif;
	line-height: 1.2;
}

section#ReutersGraphicsCharts #source{
	font-size: 11pt;
	line-height: 1.4;
  font-family:SourceSansPro-Light, Arial, sans-serif;
  color:grey;
  margin-top:80px;
  margin-bottom: -50px;
  width: 100%;
}

section#bar {
	margin-bottom: 20px;
}

section#alabama-map {
	display: block;
	overflow: hidden;
	position: relative;
}


.sectionHead {
	position: absolute;
	display: inline-block;
	width: 400px;
	margin-bottom: 30px;
}

#head2 {
	margin-top: 100px;
	margin-left: 50px;
}

/* --CUSTOM CHART-- */

.row {
	margin-top:-50px;
}

.counties {
  fill: none;
}

.states-lines {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width:1px;
}

#legendblock {
	position: relative;
	float: right;
	height: 100px;
	margin-top: 40px;
}

.chartlegend {
	max-width: 300px;
	width: 100%;
	height: 25px;
	position: relative;
}

.key path {
  display: none;
}

.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.keyText {
	fill: black;
	font-size: 1.2em;

}

.keyLabel {
	font-family: SourceSansPro-Bold, Arial, sans-serif;
}

.chartlegend svg {
font-size: 11px;
padding-top: 20px;
padding-left: 125px;
}

.clear {
	clear: both;
}

.tipHed {
	font-family: SourceSansPro-Regular, Arial, sans-serif;
}

.tipValue {
	font-family: SourceSansPro-Bold, Arial, sans-serif;	
	font-size: 1.4em;
}

.tipLabel {
	font-size: 0.85em;
	line-height: 0.9em;
}

.switch {
	display: inline-block;
}

.toggle-label {
	display: inline-block;
	vertical-align: top;
	margin-right: 15px;
	margin-left: 5px;
}

.toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.toggle + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.toggle-round + label {
  padding: 1px;
  width: 50px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 25px;
}
input.toggle-round + label:before,
input.toggle-round + label:after {
  display: inline-block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 15px;
  transition: background 0.4s;
}
input.toggle-round + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.toggle-round:checked + label:before {
  background-color: rgba(216,179,101,0.5);
}
input.toggle-round:checked + label:after {
  margin-left: 25px;
}


#zoom{
	background-image: url(../img/zoom.jpg);
	background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
	width: 20px;
	margin: 10px 10px 0 20px;
	padding-bottom: 4%;
	display: inline-block;
	vertical-align: middle;
}


/* --END CUSTOM CHART-- */

/*other setup*/
section#ReutersGraphicsCharts{
	width:100%;
	margin: 0 auto 0 auto;
	position:relative;
	
}

section#ReutersGraphicsCharts #mainGraphic{
  padding-bottom: 40px;
  width:800px;
  margin: 50px auto 100px auto;
  position: relative;
    padding-left: 10px;
  padding-right: 10px;
}

section{
   position: relative;
}

section#ReutersGraphicsCharts #intro {
	margin-bottom: 5%;
}

/* --ANCHORS--- */
.pageContainer {
	width: 100%;
	margin: 0 auto 0 auto;
	display:none;
}

.pageContainer.selected {
	display:block;
}

nav {
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.1em;
}

.menuItem a {
	text-decoration: none;
	color : #BBBBBB;
}

.menuItem {
	vertical-align: top;
	display:inline-block;
	font-size : 1em;
	color : #BBBBBB;
	margin: 0px 0 0 0 !important;
	text-align: center !important;
	text-transform: uppercase;
}

.menuItem a:hover {
	color : black;
}

.menuItem.selected a {
	color: orange;
	font-family: SourceSansPro-Bold, arial, sans-serif;
}

.menuPipe {
	vertical-align: top;
	display:inline-block;
	font-size : 1em;
	color : #BBBBBB;
	margin: 0px 2px 0 0;
}

a.anchor {
	display: block;
	position: relative;
	top: -100px;
	visibility: hidden;
}

#backtotop {
  position: fixed;
  bottom: 20px;
  right: 30px;
  background: rgba(160,160,160,0);
  background: rgba(160,160,160,0.7);
  width: 40px;
  height: 40px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#backtotop  i {
  color: #fff;
  margin: 0;
  position: relative;
  font-size: 25px;
  left: 12px;
  top: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#backtotop:hover {
  background: rgba(0, 0, 0, 0.9);
}

#backtotop:hover i {
  color: #fff;
  top: 5px;
}


/*Main sections*/

h1{
	font-family: SourceSansPro-Light, Arial, sans-serif;
	font-size: 70px;
	width: 100%;
	display: inline-block;
	margin: 45px auto 10px auto;
	position: relative;
	text-align: center;
}

h2{
font-family: SourceSansPro-Semibold, Arial, sans-serif;
font-size: 22px;
margin: 20px auto 10px auto;
width: 100%;
}

h3 {
	font-family: SourceSansPro-Semibold, Arial, sans-serif;
	font-size: 20px;
	margin: 0 auto 10px auto;
	width: 100%;
}

p{
font-family: SourceSansPro-Light, Arial, sans-serif;
font-size: 18px;
margin:0 auto 0;
line-height: 120%;
}

p.main
{
width:80%;
margin: 20px auto 30px auto;
position: relative;
text-align: center;
}

p.descriptions
{
position: relative;
width:100%;
margin-top:12px;
margin-bottom:20px;
}

p.titles
{
font-family: SourceSansPro-SemiBold, Arial, sans-serif;
margin-bottom: -16px;
margin-top: 15px;
font-size: 19px;
}


p.captions
{
position: relative;
margin-top: 10px;
margin-bottom: 30px;
}


p.credit {
	color:grey;
	margin-top:0px;
	margin-bottom:-20px;
	font-size: 14px;
	line-height: normal;
	width:100%;
	text-align: right;
	position: relative;
	top: -30px;
}

p.date {
	color:grey;
	margin-top:0px;
	margin-bottom:0px;
	font-size: 14px;
	line-height: normal;
	width: 800px;
	text-align: right;
	position: absolute;
	top: 6px;
}

.custom-tip {
	font-size: 1em;
	line-height: 1.5em;
}

.black {
	font-family: SourceSansPro-SemiBold, Arial, sans-serif;
	font-weight:600;
	background-color: #000000;
	color: #ffffff;
	padding: 0 8px 1px 8px;
	margin-right: 8px;
}

.bold{
	font-family: SourceSansPro-SemiBold, Arial, sans-serif;
}


/* --CHARTS-- */

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

/*images etc*/

.pictureBoxes {
	margin: 30px 0px 5px 0px;
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

#alabama{
	background-image: url(../img/alabama.png);
	padding-bottom: 55%;
}

#population-bar{
	background-image: url(../img/bar.jpg);
	padding-bottom: 10%;
}

#timeline{
	background-image: url(../img/timeline.png);
	padding-bottom: 45%;
}


/*rules*/

/* ---reduce bottom margin for single data point in tooltip--- */
hr {
  border: 0;
  height: 1px;
  background: #cccccc;
  width: 100%;
	margin: 0px auto 6px auto;
}

hr.divider {
	margin: 0px auto 30px auto;
}

/*media*/


/*@media (max-width: 800px) {

	section#ReutersGraphicsCharts #mainGraphic{	
	  padding-bottom: 40px;
	  width:100%;
	  margin: 40px auto 100px auto;
	  position: relative;
	}
	
}*/


/*clickable navigation*/
section#ReutersGraphicsCharts .nav, section#ReutersGraphicsCharts .play, section#ReutersGraphicsCharts .reset, section#ReutersGraphicsCharts .scalebox  {
	font-family: SourceSansPro-Bold, Arial, sans-serif;
	font-size: 12pt;
	cursor:pointer;
	}

section#ReutersGraphicsCharts .legend{
	cursor:pointer;	
}

section#ReutersGraphicsCharts .nav:hover{
	fill:#ff9c00;
	
}

section#ReutersGraphicsCharts .nav.selected{
	fill:#231F20;
	
}

/*BUNCHA BOLD STUFF*/
section#ReutersGraphicsCharts .label, section#ReutersGraphicsCharts .instructions, section#ReutersGraphicsCharts .captiontop  {
	font-family: SourceSansPro-Bold, Arial, sans-serif;
	}

/*other chart text is black*/	
section#ReutersGraphicsCharts .key, section#ReutersGraphicsCharts .legend, section#ReutersGraphicsCharts .source {
	fill: #231F20;
	}	

section#ReutersGraphicsCharts .legend.clicked{
	opacity:0.2;
	
}


section#ReutersGraphicsCharts .caption {
	font-size: 18pt;
	width:200px;
	}	
section#ReutersGraphicsCharts .captiontop {
	font-size: 14pt;
	margin-bottom:6px; 
	}

/*chart stuff*/
/*axis*/
section#ReutersGraphicsCharts .axis line, section#ReutersGraphicsCharts .axiszero line  {
	fill: none;
	stroke: #AFBABF;
	shape-rendering: crispEdges;
	}
section#ReutersGraphicsCharts .axiszero line {  
	stroke: #231F20;
	stroke-width: 1.5px;
	}
section#ReutersGraphicsCharts .axis text {
	font-family:  SourceSansPro-Semibold, Arial, sans-serif;
	font-size: 10pt;
	}
section#ReutersGraphicsCharts .axiszero text, section#ReutersGraphicsCharts .axis path, section#ReutersGraphicsCharts .axiszero path {
  display: none;
}

/*lines and area and plot space*/
section#ReutersGraphicsCharts .line {
  fill: none;
  stroke: #231F20;
  stroke-linejoin: round;
  stroke-linecap:round;
} 
section#ReutersGraphicsCharts .lineChart {
  stroke-width:2.5px;
} 

section#ReutersGraphicsCharts .lineChart:hover {
  stroke-width:6px;
} 

section#ReutersGraphicsCharts .lineChart.notSelected {
  opacity:0.4;
} 

section#ReutersGraphicsCharts .bar:hover{fill:black !important;}
/*
section#ReutersGraphicsCharts .bar.notSelected {
  opacity:0.4;
} 
*/
section#ReutersGraphicsCharts .area, section#ReutersGraphicsCharts .area2 {
	opacity:0.8;
}

section#ReutersGraphicsCharts .plot{
fill: #ffffff;
}
section#ReutersGraphicsCharts .states {
  fill: none;
  stroke: #ffffff;
  stroke-linejoin: round;
}
/*section#ReutersGraphicsCharts .cursorline {
  stroke: #AFBABF;
  stroke-width: 2px;
}*/
section#ReutersGraphicsCharts .recessionBox {
  fill: #e9eae8;
}
section#ReutersGraphicsCharts #scaleHeader{
	display:inline-block;
	margin:-10px 0 10px 0;
	color:#AFBABF;
	text-transform: uppercase;
	text-align: left;
}

section#ReutersGraphicsCharts #scaleDate{
	display:inline-block;
	text-align: right;
	margin:-10px 0 10px 0;
	color:#AFBABF;
	text-transform: uppercase;
}