/* 
' Package: Visualizing Palestine
' Version: 1.0
' Date Created: 11-05-2015
' Last Modified: 11-05-2015
' Authors: Rami Zebian <Rami.Zebian@progous.com>
' Copyright 2015 by Progous sarl, All Rights Reserved
*/

/********************************
 ** FILE: base.css
 ********************************/

/* Chrome modifications */

#main div.storyHeader h1 {
	display: none;
}

.ledeStory .storySummary {
	display: none;
}

.ledeStory .dateline {
	margin-left: 11px;
}

/* Structure */

#fixie-container {
	position: relative;
	height: 200px;
}

.g-header {
/*	position: relative;*/
/*	height: 95px;*/
	z-index: 3;
	width: 70px;
	border-bottom: 1px solid #efefef;
	margin-bottom: 10px;
	background-color: #fff;
}

	.ink-is-fixed .g-header {
		box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .4);
	}
	
	.g-header-left {
		width: 42%;
		margin-right: 2%;
		float: left;
		margin-left: 20px;
		padding: 10px 0 15px 0;
	}
	
		#interactiveAB .g-header h1,
		#interactiveABC .g-header h1 {
			font-size: 28px;
			font-weight: normal;
			margin-bottom: 7px;
		}

		.g-header .g-top-byline {
			font-family: Arial, Sans-Serif;
			font-size: 12px;
			color: #333;
		}
		
		.g-header .g-description {
			margin-top: 8px;
			font-size: 14px;
			line-height: 19px;
		}
	
		ul#g-key {
			font-family: Arial, Sans-Serif;
		}

			ul#g-key li {
				background: none;
				padding: 0;
				margin: 0;
				float: left;
				margin-right: 30px;
				padding-top: 1px;
				color: #333;
			}
			
				ul#g-key li b {
					display: inline-block;
					margin-right: 7px;
					height: 16px;
					width: 16px;
					vertical-align: -4px;
					border-radius: 50px;
				}

				ul#g-key li.g-key-today b {
					background-color: #588fbc;
				}
        
				ul#g-key li.g-key-submerged b {
					background-color: #a3bdd9;
				}
				
		.g-header-left .percent-flooded-key {
			font-family: Arial, Sans-Serif;
			font-size: 12px;
			color: #333;
		}
				
		.g-header-left .percent-flooded-values {
			float: left;
		}
		
			.g-header-left .percent-flooded-values span {
				display: block;
				padding: 1px 9px 10px 0;
			}

.g-controls {
	float: left;
	padding: 22px 0 20px 0;
	font-family: Arial, Sans-Serif;
}

	.nytg-slider-title {
		margin-left: 2px;
		margin-top:2px;
		margin-bottom: 10px;
		padding-bottom:10px;
		font-size: 12pt;
		font-weight: bold;
		font-family: 'Effra_Std_Lt';
		color: #91D3D1;
	}

	.nytg-slider{
	  	height: 195px;
		width: 1px;
		float: left;
		margin-left: 14px;
	  	background: #000;
	}
	
	a#scale-footnote {
		font-size: 12px;
		position: absolute;
		z-index: 3;
		right: 28px;
		bottom: 5px;
		display: block;
		padding: 10px 0;
		float: right;
	}
	
	.nytg-handle{
		/* turn these off for slider to jump from tick to tick */
		/* turn these on for slider to move smoothly */
	    -webkit-transition: bottom 0.8s;
		-moz-transition:    bottom 0.8s;
		-o-transition:      bottom 0.8s;
	}
	
		.nytg-track {
		  border-radius: 3px;
		  border-top: solid 0px #BBB;
		  border-right: solid 0px #CCC;
		  border-bottom: solid 0px #DDD;
		  border-left: solid 0px #CCC;
		  background: #000;
		  position: relative;	  
		  width: 100%;
		  -webkit-box-sizing: padding-box;		  
		}
		
			#nytg-track-blue.nytg-track {
				height: 0 !important;
				bottom: -3px;
				background-color: #A7A9AC;
				border-top-right-radius: 15;
				border-top-left-radius: 15;
				-webkit-box-sizing: padding-box;
				
				-webkit-transition: height 0.8s;
			    -moz-transition:    height 0.8s;
			    -o-transition:      height 0.8s;
			}
				
				.flood-level-5 #nytg-track-blue.nytg-track {
					height: 75px !important;
				} 
				
				.flood-level-12 #nytg-track-blue.nytg-track {
					height: 135px !important;
				}
				
				.flood-level-25 #nytg-track-blue.nytg-track {
					height: 199px !important;
				}

		.nytg-knob {
			width: 14px;
			height: 8.5px;
			border-radius: 5px;
			background: #91D4D1;
			border: solid 0px #91D4D1;
			/*-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
			-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
			box-shadow: 0px 1px 2px rgba(0,0,0,0.3);*/
            /*margin-left:-1px;*/
			padding-left: 15px;
			margin-left: 11px;
			cursor:-webkit-grab;
			cursor:-moz-grab;
			cursor:grab;
			background: #91D4D1 center center no-repeat;
		}
		
			.nytg-isDragging,
			.nytg-isDragging .nytg-knob {
				cursor:-webkit-grabbing;
				cursor:-moz-grabbing;
				cursor:grabbing;
			}

		.nytg-tickContainer {
    
		}
		
			.nytg-tickContainer .nytg-sliderTick:first-child span {
/*				width: 200px !important;
				text-align: left;*/
			}
		
		.nytg-sliderTick {
		  	border-left: solid 0px #CCC;
		  	font-family: Arial, Sans-Serif;
		  	font-size: 13px;
		  	color: #777;
			cursor:default;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
			.nytg-sliderTick .nytg-tickLabel {
				border-top: 0px solid #efefef;
				white-space: nowrap;
			}
			
			.nytg-sliderTick:last-child .nytg-tickLabel {
				border-top: 0px solid #fff;
			}
		
			.nytg-sliderTick .nytg-tickLabel span.g-link { 
				color: #D1D2D4;
				font-family: 'Effra_Std_Lt';
				font-size: 36px;				
			}
			
				.nytg-sliderTick .nytg-tickLabel:hover span.g-link 
				{
				    color: #A0D5D4;
				    font-family: 'Effra_Std_Lt';
				    font-size: 36px;
				}
				
			.nytg-sliderTick .nytg-tickLabel span.g-linkSelected { 
				color: #A0D5D4;
				font-family: 'Effra_Std_He';
				font-size: 36px;
				margin-left:3px;				
			}	
		
			.nytg-sliderTick .nytg-tickLabel strong {
				/*color: #777;*/
			}
		
			.nytg-sliderTick span:hover {
				color: #333;
				cursor: pointer;
			}
			
				.nytg-sliderTick span:hover strong {
					color: #333;
				}
			
			.nytg-sliderTick.nytg-selected {
				border-left: solid 1px #000;
			}

		.nytg-sliderTick.nytg-selected {
		  border-left: solid 1px #000;
		}


#g-regions-grid {
	clear: both;
	margin-left: 0px;
	margin-top: 0px;
}

	.g-region {
		width: 248px;
		float: left;
		margin: 0;
	}
	
			
	
		.g-region-images {
			height: 675px;
			
		}
	
		.g-region-image img {
			position: absolute;
			opacity: 0;
			z-index: 0;
			margin: 0;
			border: 0px solid #ddd;
			-webkit-transition: opacity 2s;
			-moz-transition:    opacity 2s;
			-o-transition:      opacity 2s;
		}
	
			.flood-level-0 .g-region-image.g-region-image-0 img,
			.flood-level-5 .g-region-image.g-region-image-5 img,
			.flood-level-12 .g-region-image.g-region-image-12 img,
			.flood-level-25 .g-region-image.g-region-image-25 img {
				opacity: 1;
				z-index: 1;
			}

		.g-region-images .g-region-overlay {
			position: absolute;
			z-index: 2;
		}
		
			.g-region-images .g-region-overlay .g-overlay-label {
				position: absolute;
/*        text-shadow: 1px 1px 0 rgba(255, 255, 255, .8);*/
/*        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjExRkU1NTUyQzNBMTFFMjkwQUFDOEZFNjZGMjBENzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjExRkU1NTYyQzNBMTFFMjkwQUFDOEZFNjZGMjBENzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMTFGRTU1MzJDM0ExMUUyOTBBQUM4RkU2NkYyMEQ3NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyMTFGRTU1NDJDM0ExMUUyOTBBQUM4RkU2NkYyMEQ3NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgqdnbkAAAAbSURBVHjaYvz//78vAxGAiYFIMKqQOgoBAgwATz8DXn23n78AAAAASUVORK5CYII=);
        background: rgba(256, 256, 256, .4);
*/				
                padding: 5px 7px;
				border-radius: 6px;
				margin-top: -5px;
				margin-left: -7px;
			}
			
				.g-region-images .g-region-overlay .g-overlay-label h3 {
					font-weight: 500;
				}
				

		.g-region .g-caption 
		{
			width: 154px;
			height: 260px;
			font-family: 'Effra_Std_Lt';
			font-size: 13pt;
			color: #D1D2D4;
			margin-top:-0px;						
		}
		
		
			.g-region .g-caption span {			
			/*display: none;*/
			
			opacity:0;			
		    -webkit-transition: opacity 2s;
			-moz-transition:    opacity 2s;
			-o-transition:      opacity 2s;
			
			}
		
			.flood-level-0 .g-region .g-caption .g-caption-0,
			.flood-level-5 .g-region .g-caption .g-caption-5,
			.flood-level-12 .g-region .g-caption .g-caption-12,
			.flood-level-25 .g-region .g-caption .g-caption-25 {
				display: inline;
				opacity:1;
			}
			
			.g-caption-0{position:absolute;bottom:85px;}
			.g-caption-5{position:absolute;bottom:65px;}
			.g-caption-12{position:absolute;bottom:105px;}
			.g-caption-25{position:absolute;bottom:65px;}
	
	.g-region-title {
		font-family: Arial, Sans-Serif;
	}
	
		.g-number-label {
			font-family: Arial, Sans-Serif;
			color: #333;
			color: rgba(0,0,0,.7);
			font-size: 12px;
		}
	
		.percent-flooded-values span {
			display: none;
			font-weight: bold;
			font-size: 15px;
			font-family: nytfranklin, Arial, Sans-Serif;
			color: #b43030;
		}
		
			.flood-level-0 .percent-flooded-values span.g-number-label-0,
			.flood-level-5 .percent-flooded-values span.g-number-label-5,
			.flood-level-12 .percent-flooded-values span.g-number-label-12,
			.flood-level-25 .percent-flooded-values span.g-number-label-25 {
				display: inline;
			}
	
		.g-region h3 {
			margin-right: 4px;
			font-family: nytfranklin, Arial, Sans-Serif;
			display: inline;
			font-size: 19px;
			line-height: 21px;
		}
		
			.g-region .g-region-overlay h3 {
				margin-right: 0;
			}

#g-footnote {
	padding: 30px 40px 20px 20px;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	line-height: 1.35em;
	color: #777;
}

/* Scoop Fixes */

span.noWrap.feedback {
  white-space: normal;
}

#main #interactiveFooter {
    border-top:1px solid #DDDDDD;
    margin-top:10px;
    padding-top:12px;
}

#main div.storyHeader h1 {
    font-size: 26px;
    margin-bottom:4px;
    margin-top:3px;
}

.g-captionBold {
			font-family: 'Effra_Std_He';
			font-size: 13pt;
			color: #D1D2D4;						
		}