@charset "utf-8";
/* CSS Document */

/* Interactive process map */
#interactive-map {
	position:relative;
	width: 600px; 
	height: 368px;
	background:url(../../assets/img/interactive-shale-play-map/us-shale-play-map.png) no-repeat top left;
	
}

.shaleplay, .binoculars-circle, .binoculars {
	position:absolute;
	background-repeat:none;
}

.shaleplay:focus, .binoculars-circle:focus, .binoculars:focus {
	outline:none;
}

#bakken {
	background:url(../../assets/img/interactive-shale-play-map/bakken.png);
	width:65px;
	height:42px;
	top:29px; 
	left:195px;
}

#bakken:hover {
	background-position:0 -43px;
}

#barnett {
	background:url(../../assets/img/interactive-shale-play-map/barnett.png);
	width:56px;
	height:51px;
	top:249px; 
	left:249px;
}

#barnett:hover {
	background-position:0 -55px;
}

#cline {
	background:url(../../assets/img/interactive-shale-play-map/cline.png);
	width:41px;
	height:23px;
	top:265px; 
	left:217px;
}

#cline:hover {
	background-position:0 -26px;
}


#eagleFord {
	background:url(../../assets/img/interactive-shale-play-map/eagleFord.png);
	width:66px;
	height:47px;
	top:294px; 
	left:242px;
}

#eagleFord:hover {
	background-position:0 -48px;
}


#haynesville {
	background:url(../../assets/img/interactive-shale-play-map/haynesville.png);
	width:80px;
	height:28px;
	top:264px; 
	left:304px;
}

#haynesville:hover {
	background-position:0 -28px;
}

.marcellus {
	background:url(../../assets/img/interactive-shale-play-map/marcellus.png);
	position:absolute;
	background-repeat:none;
	width:100px;
	height:122px;
	top:93px; 
	left:445px;
	z-index:0;
}

.marcellusHighlight {
	background-position:0 -124px;
	z-index:100;
}


#marcellusButton {
	background:url(../../assets/img/interactive-shale-play-map/marcellus-button.png);
	width:81px;
	height:17px;
	top:143px; 
	left:515px;
	z-index:200;
}

#marcellusButton:hover {
	background-position:0 -19px;
}

#tuscaloosa {
	background:url(../../assets/img/interactive-shale-play-map/tuscaloosa.png);
	width:96px;
	height:26px;
	top:278px; 
	left:330px;
}

#tuscaloosa:hover {
	background-position:0 -26px;
}

.utica {
	background:url(../../assets/img/interactive-shale-play-map/utica.png);
	position:absolute;
	background-repeat:none;
	width:98px;
	height:107px;
	top:72px; 
	left:440px;
	z-index:1;
}

.uticaHighlight {
	background-position:0 -108px;
	z-index:100;
}


#uticaButton {
	background:url(../../assets/img/interactive-shale-play-map/utica-button.png);
	width:46px;
	height:17px;
	top:123px; 
	left:550px;
	z-index:201;
}

#uticaButton:hover {
	background-position:0 -19px;
}

#woodford {
	background:url(../../assets/img/interactive-shale-play-map/woodford.png);
	width:70px;
	height:33px;
	top:215px; 
	left:248px;
}

#woodford:hover {
	background-position:0 -35px;
}


/* Interactive Process Diagram */
#interactive-process-map {
	position:relative;
	width: 720px; 
	height: 1008px;
	background:url(../img/interactive-process-map/process-diagram.jpg) no-repeat top left;
}

.binoculars-circle {
	background:url(../../assets/img/interactive-process-map/binoculars-circle.png);
	width:56px;
	height:56px;
}

.binoculars-circle:hover {
	background-position:0 -57px;
}

#upstream {
	top:255px; 
	left:84px;
}


#midstream {
	top:573px; 
	left:203px;
}

#downstream {
	top:873px; 
	left:86px;
}

.binoculars {
	background:url(../../assets/img/interactive-process-map/binoculars.png);
	width:38px;
	height:23px;
}

.binoculars:hover {
	background-position:0 -26px;
}

#bin1, #bin2 {
	top:272px; 
	left:310px;
}

#bin2 { 
	left:460px;
}

#bin3, #bin4, #bin5 {
	top:432px; 
	left:137px;
}

#bin4 { 
	left:307px;
}

#bin5 { 
	left:505px;
}

#bin6 {
	top:591px; 
	left:470px;
}

#bin7, #bin8 {
	top:750px; 
	left:182px;
}

#bin8 {
	left:367px;
}

#bin9, #bin10, #bin11 {
	top:907px; 
	left:335px;
}

#bin10 {
	left:448px;
}

#bin11 {
	left:556px;
}

div.orangeModal {
	position:relative;
	background-color:#e28725;
	color: #fff;
}

.orangeModal h3 {
	color: #fff;
}

.orangeModal .modal-header {
	padding:15px 15px 0 20px;
	border-bottom:none;
}

.orangeModal .modal-body {
	padding:15px 40px 10px 20px;
	border-bottom:none;
	max-height:none;
}

.triangle {
	position:absolute;
	width:10px;
	height:20px;
	top:70px;
}

#upstreamModal, #bin1Modal {
	width:430px;
	top:200px;
	left:290px;
}

#bin1Modal {
	width:285px;
	left:435px;
}

#bin2Modal {
	width:445px;
	top:200px;
}

#bin2Modal .triangle {
	left:435px;
}

#bin3Modal {
	width:440px;
	top:355px;
	left:280px;
}

#bin4Modal {
	width:265px;
	top:200px;
	left:455px;
}

#bin4Modal .triangle {
	top:225px
}

#bin5Modal {
	width:490px;
	top:355px;
}

#bin5Modal .triangle {
	left:480px;
}

#midstreamModal {
	width:290px;
	top:520px;
	left:430px;
}

#bin6Modal {
	width:460px;
	top:450px;
}

#bin6Modal .triangle {
	left:450px;
	top:140px;
}

#bin7Modal {
	width:430px;
	top:680px;
	left:290px;
}

#bin8Modal {
	width:355px;
	top:660px;
}

#bin8Modal .triangle {
	left:345px;
	top:85px;
}

#bin9Modal {
	width:320px;
	top:470px;
}

#bin9Modal .triangle {
	left:310px;
	top:435px;
}

#bin10Modal {
	width:440px;
	top:760px;
}

#bin10Modal .triangle {
	left:430px;
	top:145px;
}


#bin11Modal {
	width:550px;
	top:780px;
}

#bin11Modal .triangle {
	left:540px;
	top:128px;
}

#downstreamModal {
	width:400px;
	top:820px;
	left:320px;
}

#downstreamModal .triangle {
	top:85px;
}

.left-side {
	left: 0;
}