/* Controls size for all modal dialogs */
.modalSize{
	width: 960px;
	height: 450px;
	margin-left: -480px; /*So it centers properly */
}

/* These two put the bootstrap modal under the vimeo modal */
.modal {
	z-index: 500;
}

.modal-backdrop {
	z-index: 499;
}

.videoPopup {
	width: 215px;
	height: 150px;
}

/* Header specific stuff */
.modalHeaderFix {
	border-bottom: none;
	height: 50px;
	padding-bottom: 0;
	
}

  /*If I just add a class it doesn't overwrite ".modal-header img" */
.modal-header img {
	width:915px;
	height: 50px;
}

/* Body specific stuff */
.modalBodyFix {
	max-height: 480px;
	max-width: 960px;
}

/* This is a fix for the border around visited modal links */
.modal-open .modal,.btn:focus, a:focus{
    outline:none!important;
}

/* Helper style */
.center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.spaceAfter {
	margin-bottom: 20px;
}

.modalSectionHeader {
	background-color: #949599;
	color: #FFFFFF;
	font-weight: bold;
	padding-left: 10px;
	margin-bottom: 10px;
}

#leftColumn {
	width: 215px;
	float: left;
}

#middleColumn {
	width: 500px;
	float: left;
}

.modalMiddleImage {
	width: 400px;
	height: 347px;
}

#rightColumn {
	width: 215px;
	float: left;
}

/* ============================================================================
 * Specific Modals
 * ============================================================================
 */

.dynamicsModalMiddleImage {
	width: 450px;
	height: 376px;
}

.atmosphericModalMiddleImage {
	width: 400px;
	margin-top: 10px;
}

.airAndSeaLeftColumn {
	width: 715px;
	height: 350px;
	overflow: scroll;
	float: left;
	font-size: 10pt;
}

.airAndSeaLeftColumn .modalMiddleImage {
	float:right;
	margin: 10px 10px 10px 10px;
}

.airAndSeaLeftColumn .profilePic {
	float:left;
	width: 215px;
	height: 150px;
	margin:  10px 30px 10px 30px;
}

.atmosMiddle {
	font-weight: bold;
	color: #000000;
	padding-left: 100px;
	padding-right: 100px;
	text-align: center;
}


/* ============================================================================
 * Modal Slider Stuff 
 ============================================================================*/

.window
{
	margin-top: 20px;
    overflow:hidden;
    width: 400px;
    height: 272px;
}

.slidesWrapper1 {
	width: 3200px;
	height: 272px;
}

.slidesWrapper2 {
	width: 3200px;
	height: 272px;
}

.sliderWrapper {
	width: 400px;
}

.modalMiddleSlides
{
    width:3200px;
    height:272px;
}

/* ============================================================================
 * INFOGRAPHIC
 * ============================================================================
 */

.infoIcon {
	height: 45px;
	width: 45px;
	display:inline-block;
	
}

.infoIcon:hover {
	background-position: -45px 0;
}

.infoIcon .AirAndSea {
	
}

.infoIcon .Atmospheric {
	
}

.infoIcon .Coastal {
	
}

.infoIcon .Dynamics {
	
}

.infoIcon .OceanGeneral {
	
}

.infographicContainer{
	width: 1334px;
	height: 947px;
	position: relative;
}

.infographicBackground {
	
}

.infographicContainer .infographicInstructions {
	position: absolute;
	right: 75px;
	bottom: 100px;
}

.infographicContainer .infographicImageAnchor{
	position: absolute;
}

.infographicAirAndSea {
	height: 133px;
	width: 613px;
	left:301px ;
	top: 307px;
}

.infographicAtmospheric {
	height: 287px;
	width: 689px;
	left: 78px ;
	top: 64px;
}

.infographicDynamics {
	height: 217px;
	width: 251px;
	left: 446px;
	top: 399px;
}

.infographicCoastal {
	height: 74px;
	width: 378px;
	left: 656px;
	top: 276px;
}

.infographicOceanGeneral {
	height: 98px;
	width: 323px;
	left: 565px;
	top: 453px;
}

.infographicWeatheringImage {
	position: absolute;
	height: 268px;
	width: 291px;
	left: 197px;
	top: 443px;
}

/* Styles specifically for the infographic on smaller devices */

/*The instructions are about to be cut */
@media (max-width: 1300px) 
   and (min-width: 1000px) {
    
    .infographicContainer{
		width: 1000px;
		height: 710px;
		position: relative;
	}
	
	.infographicBackground {
		
	}
	
	.infographicContainer .infographicInstructions {
		position: absolute;
		right: 75px;
		bottom: 0px;
	}
	
	.infographicContainer .infographicImageAnchor{
		position: absolute;
	}
	
	.infographicAirAndSea {
		height: 100px;/*133*/
		width: 460px;/*613*/
		left:226px;/*301*/
		top: 230px;/*307*/
	}
	
	.infographicAtmospheric {
		height: 215px;/*287*/
		width: 516px;/*689*/
		left: 58px ;/*78*/
		top: 48px;/*64*/
	}
	
	.infographicDynamics {
		height: 163px;/*217*/
		width: 188px;/*251*/
		left: 334px;/*446*/
		top: 299px;/*399*/
	}
	
	.infographicCoastal {
		height: 55px;/*74*/
		width: 283px;/*378*/
		left: 492px;/*656*/
		top: 207px;/*276*/
	}
	
	.infographicOceanGeneral {
		height: 73px;/*98*/
		width: 242px;/*323*/
		left: 424px;/*565*/
		top: 340px;/*453*/
	}
	
	.infographicWeatheringImage {
		position: absolute;
		height: 201px;/*268*/
		width: 218px;/*291*/
		left: 148px;/*197*/
		top: 332px;/*443*/
	}
}
/*=============================================================================
 * TEAM
 * ============================================================================
 */

.hideTeam {
	margin-top: 50px;
}

.teamImage {
	float: left;
}

.teamImage img {
	margin-right: 25px;
	margin-bottom: 5px;
}

#roleSelect {
	margin-top: 15px;
	margin-bottom: 25px;
}

.selectHeader {
	margin-top: 20px;
	float: left;
	margin-right: 30px;
}

.instButton {
	cursor: pointer;
}