html{
	background-color: white;
}

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

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.2;
  font-family:SourceSansPro-Light, Arial, sans-serif;
  color:grey;
  margin-top:80px;
  margin-bottom: -50px;
  width: 100%;
}

/*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;
}

/* --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: 50px;
	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:100%;
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;
}

.mobilehead{
  display: none;
}

#mobiletext{
display: none;
}

.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;
}

.lighthed{
	font-size: 38px;
}

#abshead {
   position: absolute;
   width: 30%;
   top: -20px;
}

#abstext, #abstextscreen{
top: 33px;
position: absolute;
width: 30%;
}

#abstext2{
top: 33px;
position: absolute;
width: 50%;
}

#abstext3{
top: 33px;
position: absolute;
width: 28%;
}


/*images etc*/

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

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

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

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

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

#altitude{
	display: none;
}

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

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

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

#signal{
	background-image: url(../img/signal@2x.png);
	padding-bottom: 150%;
  display: none;
}

#bboxes {
	background-image: url(../img/bbox.jpg);
	padding-bottom: 85%;
}

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

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

#microbursts {
	background-image: url(../img/microburst.png);
	padding-bottom: 57.5%;
}


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

#field {
	background-image: url(../img/debris.gif);
	padding-bottom: 66%;
}

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

#field {
	background-image: url(../img/debris.gif);
	padding-bottom: 66%; 
}

#wings {
	display: none;
}

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


/*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;
	}
	
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px), (max-width:600px) {

	nav#menu {
		display: none;
	}

	#backtotop {
		display: none !important;
	}

	section#ReutersGraphicsCharts section#overviewCharts .chart, section#ReutersGraphicsCharts section#overviewCharts .chart1{
		display:inline-block;
		margin-top:10px;
		width:100%;
    position: relative !important;
	}
        
  section#ReutersGraphicsCharts section#overviewCharts .chart{
		height:400px;
	}
        
                
	section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic1 {
		width:100%;
	  position: relative;
	  margin-bottom: 0px;
	  height:240px !important;
	}

	section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic2 {
		width:100%;
	  position: relative;
	  margin-bottom: 0px;
	  height:240px !important;
	}

	section#ReutersGraphicsCharts section#overviewCharts #overviewgraphic3 {
		width:100%;
	  position: relative;
	  margin-bottom: 0px;
	  height:300px !important;
	}

	section#ReutersGraphicsCharts section#overviewCharts .labelBox{
		margin:0 0 0 0;
		height: auto;
    position: relative;
    width: 100%;
	}

	section#ReutersGraphicsCharts section#overviewCharts .chartLabel{
		display:inline-block;
		position: relative;
		width:100%;
		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;
  }
	
  #chartlabelabsolute, #chartlabelabsolute3 {
    font-size: 22px;
    top: 0px;
    margin: 0 0 0 0;
  }

  #chartlabelabsolute2{
		top: 0px;
    margin-bottom: 10px;
  }
                
	#chartlabelabsolute3{
	display: none;
	}
        
  .scale-objects {
    display: none;
  }
  
  .legendContainer{
    display: none;   
  }
	        
	#mainmap{
		background-image: url(../img/mainmap@2x.png);
		padding-bottom: 83%;
	}

	#stages{
		background-image: url(../img/stages@2x.png);
		padding-bottom: 76%;
	}

	#circle{
		background-image: url(../img/circle@2x.png);
		padding-bottom: 100%;
	}

	#altitude{
		display: block;
	        background-image: url(../img/altitude@2x.png);
		padding-bottom: 90%;
	}

	#patterns{
		background-image: url(../img/patterns@2x.png);
		padding-bottom: 72%;
	}

	#drift{
		background-image: url(../img/drift@2x.png);
		padding-bottom: 76%;
	}

	#search{
		background-image: url(../img/search@2x.png);
		padding-bottom: 120%;
	}

	#signal{
		background-image: url(../img/signal@2x.png);
		padding-bottom: 150%;
	        display: none;
	}

	#currents{
		background-image: url(../img/currents@2x.png);
		padding-bottom: 78%;
	}

	#frequency {
		background-image: url(../img/frequency@2x.png);
		padding-bottom: 36%;
	}

	#noise {
		background-image: url(../img/noise@2x.png);
		padding-bottom: 110%;
	}

	#bboxes {
		background-image: url(../img/bbox@2x.jpg);
		padding-bottom: 300%;
	}
	        
	#signal{
		background-image: url(../img/signal@2x.png);
		padding-bottom: 150%;
	  display: block;
	}

	#field {
		background-image: url(../img/debris@2x.gif);
		padding-bottom: 82%; 
	}

	#microbursts {
		background-image: url(../img/microburst@2x.png);
		padding-bottom: 71%;
	}


	#microstages {
		background-image: url(../img/microstages@2x.png);
		padding-bottom: 62%;
	}
	
	#instruments {
	background-image: url(../img/instruments@2x.jpg);
	padding-bottom: 224%;
	}
	
	#stall {
	background-image: url(../img/stall@2x.png);
	padding-bottom: 46%;
}

	#wings {
	display: block;
	background-image: url(../img/wings@2x.png);
	padding-bottom: 31%;
}
        
	.backgroundmap, .covermap, .covermap1, .pictureBoxes {
	padding-bottom: 78%;
	margin: 30px auto 40px auto;
	width:100%;
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: 100%;
        position: relative;
	}

	.pictureBoxes {
		margin: 30px 0px 30px 0px !important;
		background-size: 100%;
		background-repeat: no-repeat;
		overflow: hidden;
    position: relative;
	}
	
	.absolute{
		position: relative;
		width:100%;
    margin-bottom: 0px;
	}

	#fallback{
	  display: none;
	}

	#mobiletext{
		display: block;
	}

	#screentext{
		display: none;
	}

  .mobilehead{
    display: block;
	}

  .screenhead{
    display: none;
	}
	
	p.main{
		margin top: -10px;
	}
	
	p.date{
		text-align: left;
		width: 100%;
		position: relative;
		margin-top: -18px;
		margin-bottom: 26px !important;
	}
	
	p.source{
		width: 100%;
	}

	p {
		text-align: left !important;
	}

	section#ReutersGraphicsCharts #mainGraphic{
		width: 94%;
		margin-bottom: 60px;
	}

	.share-toolbar{
		display: none !important;
	}
	
	h1{
		text-align: left;
		font-size: 40px;
		top: -12px;
		margin-bottom: -14px;
    margin-top: 50px;
	}
        
        
	h2.absolute{
		position: relative !important;
		width: 100%;
		margin-bottom: 18px;
	}
        
	#abshead, .smallhead2{
		position: relative !important;
		width: 100%;
		display: block;
		float: none;
	}
	
	#abshead {
		top: auto;
		margin: 40px 0px 0px 0px;
	}
	
	
	.smallhead2{
		margin: 0px 0px -18px 0px;
	}
	
	.smallhead{
		display: none;
	}
		
	.pictureBoxes {
		margin: 30px 0px 20px 0px !important;
	}
	
	
  #subhed{
    margin: 30px 0 -50px 0;
    top: -10px;
    font-family: SourceSansPro-SemiBold, Arial, sans-serif;
    position: relative;
    color: #000000;
  }
  
	#abstext, #abstext2, #abstext3{
		width:100%;
		position: relative;
		top: 0px;
		margin: 8px 0 20px 0;
	}	

  #abstextscreen{
    display: none;
  }
        
	hr {
		margin: 0 0 6px 0;
	}
		
}

/*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;
	
}

/*size the hed and dek and tooltips*/	
section#ReutersGraphicsCharts .hed {
	font-size: 40pt;
	margin-bottom:13px;
	margin-top:10px;
	text-align: left; 
	font-family: SourceSansPro-Light, arial, sans-serif;
	}
section#ReutersGraphicsCharts .dek {
	font-size: 14pt;
	text-align: left;
	font-family: SourceSansPro-Light, arial, sans-serif;

	}	

/*tooltips get centered*/
.tip1, .tip2, .tip3 {
	text-align: center;
	font-size: 10pt; 
}
.tip1 {
	font-family: SourceSansPro-Bold, Arial, sans-serif;
	font-size: 14pt;
	line-height: 1.4;
	}

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;
}