/* MoMA Media Player Styles */

BODY.media_player {	overflow: hidden !important; }

/* Local reset */
#mp_content H1, #mp_content H2, #mp_content P,  #mp_content UL, 
#mp_content LI, #mp_content IMG, #mp_content OBJECT, #mp_content IFRAME,
#mp_content A {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}
	
#mp_container {
	background: url(/images/multimedia/mma_bg_92.png);
	background: rgba(0,0,0,0.92); 
	position: fixed;
	overflow: hidden;
	
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	
	overflow-y: auto;
	margin-bottom: 55px; /* footer */
	
	font-family: Arial, sans-serif;
	color: #fff;
	font-size: 12px;
	
	z-index: 25;
	}
	#mp_container #overlay {
		position: absolute;
		overflow: hidden;	
		min-height: 100%;
		
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		
		background: #000;
		z-index: 0;
		display: none;
		opacity: 0;
		}

#mp_content {
	width: 980px;
	margin: 10px auto 0;
	position: relative;
	display: none;
	}
	
	/* Header */
	#mp_content #header {
		border-bottom: 1px solid #616161;
		overflow: hidden;
		margin-bottom: 10px;
		margin-top: 20px;
		}
		#mp_content #header H1 {
			float: left;
			font-size: 16px;
			margin-bottom: 5px;
			font-weight: bold;
			}
		#mp_content #header A#close {
			float: right;
			background-image: url(/images/multimedia/mma_assets.png);
			width: 16px;
			height: 20px;
			text-indent: -9999px;
			margin-top: 1px;
      		border-bottom: none; /* db */
			}
			#mp_content #header A#close:hover {
				opacity: 0.5;
				}

	/* Main */
	#mp_content #mp_main {
		overflow: hidden;
		margin-bottom: 25px;
		position: relative;
		}
		
		/* Sidebar */
		#mp_content #mp_main #sidebar {
			float: right;
			background-color: #1f1f1f;
			width: 245px;
			padding: 20px;
			height: 475px;
			text-align: left;
			
			/* for scroll bar */
			position: absolute;
			right: 0;
			}
			#mp_content #mp_main #sidebar .section {
				margin-bottom: 25px;
				}
			#mp_content #mp_main #sidebar H2.slide_title {
				font-size: 16px;
				xmargin: 0 0 10px;
				margin: 0 0 20px;
				display: none;
				}
				#mp_content #mp_main #sidebar .slide_count_wrapper {
					font-weight: bold;
                    margin: 0 0 10px;
					}
				#mp_content #mp_main #sidebar .slide_subtitle {
					font-style: italic;
					display: none;
					}
				#mp_content #mp_main #sidebar .slide_desc {
					display: none;
					margin-bottom: 20px;
					}
					#mp_content #mp_main #sidebar .slide_desc.alt {
						font-size: 11px;
						line-height: 15px;
						}
				#mp_content #mp_main #sidebar .related_links {
					display: none;
					}
			#mp_content #mp_main #sidebar P A {
				text-decoration: none;
				color: #696969;
				border-bottom: 1px dotted #696969;
				font-weight: bold; 
				
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				transition: all 200ms linear;
				
				/* iOS has problems with 'all' */
				/* -webkit-transition-property: border-color, color; */
				}
			#mp_content #mp_main #sidebar P A:hover {
				color: #bbb;
				border-color: #bbb;

				}
				
			/* Scroll bar */
			/*
			#mp_content #mp_main #sidebar #scrollbar {
				float: right;
				width: 12px;
				background: #4c4c4c;
				height: 515px;
				margin: -20px;
				}
				#mp_content #mp_main #sidebar #scrollbar #slider {
					background: #ececec;
					width: 100%;
					height: 20%;
					}
			*/
					
			/* related items */
			#mp_content #mp_main #sidebar UL#related {
				list-style-type: none;
				overflow: hidden;
				}
				#mp_content #mp_main #sidebar UL#related LI {
					float: left;
					margin-right: 7px;
					}
			
			/* http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/ */
			#mp_content #mp_main #sidebar UL#related LI a,
			#mp_content #mp_main #sidebar UL#related LI a img { border: none; overflow: hidden; float: left;}
			#mp_content #mp_main #sidebar UL#related LI a:hover { border: 1px solid #ececec; }
			#mp_content #mp_main #sidebar UL#related LI a:hover img { margin: -1px; }
			
			
		/* Slide */
		#mp_content #mp_main #slide_container {
			}
		
		#mp_content #mp_main #slide {
			height: 475px;
			width: 670px;
			overflow: hidden;
			position: relative;
			float: left;
			margin-bottom: 10px;
			}
			#mp_content #mp_main #slide UL#slide_inner {
				list-style-type: none;
				padding: 0;
				margin: 0;
				position: absolute;
				width: 100000px;
				}
				#mp_content #mp_main #slide UL#slide_inner LI {
					float: left;
					width: 670px;
					height: 475px;
					text-align: center;
					line-height: 475px;
					background: black;
					position: relative; /* So object can be absolute */
          padding: 0; /* db */
					}
					#mp_content #mp_main #slide UL#slide_inner LI A IMG {
						vertical-align: middle;
						}
						#mp_content #mp_main #slide UL#slide_inner LI A IMG.audio_slide {
							vertical-align: inherit;
							}
					#mp_content #mp_main #slide UL#slide_inner LI IFRAME {
						width: 670px;
						height: 475px;
						overflow: hidden;
						}
					#mp_content #mp_main #slide UL#slide_inner LI OBJECT,
					#mp_content #mp_main #slide UL#slide_inner LI AUDIO {
						position: absolute;
						bottom: 0;
						left: 0;
						}
					#mp_content #mp_main #slide UL#slide_inner LI AUDIO {
						width: 670px; /* for audio */
						/* ensure video takes up full screen and audio is positioned at bottom of slide */
						}
 			
			#mp_content #mp_main #slide A#slide_prev,
			#mp_content #mp_main #slide A#slide_next {
				
				background-color: #000;
				background-color: rgba(0,0,0,0.8);
				background-image: url(/images/multimedia/mma_assets.png);
				background-repeat: no-repeat;
				
				opacity: 0;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
				
				z-index: -1\9; /*ie8*/
				
				height: 475px;
				
				position: absolute;
				text-indent: -9999px;
				width: 35px;
				
				-webkit-transition: opacity 200ms linear;
				-moz-transition: opacity 200ms linear;
				transition: opacity 200ms linear;
				}
				#mp_content #mp_main #slide:hover A#slide_prev,
				#mp_content #mp_main #slide:hover A#slide_next {
					opacity: 1;
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
			
					z-index: 0\9; /*ie8*/
					}
				#mp_content #mp_main #slide A#slide_prev:hover,
				#mp_content #mp_main #slide A#slide_next:hover {
					opacity: 0.8;
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=64)";
					filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=64);
					}
			#mp_content #mp_main #slide A#slide_prev {
				left: 0;
				background-position: -20px 220px;
				}
			#mp_content #mp_main #slide A#slide_next {
				left: 635px;
				background-position: -55px 220px;
				} 
			
			#mp_content #mp_main #slide A#slide_prev.cropped,
			#mp_content #mp_main #slide A#slide_next.cropped {
				height: 435px;
				}
			#mp_content #mp_main #slide A#slide_prev.cropped_ios,
			#mp_content #mp_main #slide A#slide_next.cropped_ios {
				height: 427px;
				}
			
			#mp_content #mp_main #slide A#slide_prev.hidden,
			#mp_content #mp_main #slide A#slide_next.hidden {
				display: none;
				}
				
		/* Controls */
		#mp_content #mp_main #controls {
			float: left;
			width: 670px;
			}
			#mp_content #mp_main #current_time {
				font-style: italic;
				font-size: 9px;
				}
			#mp_content #mp_main #controls #controls_left {
				float: left;
				font-size: 10px;
				}
				
				#mp_content #mp_main #controls #controls_left .play_toggle {
					float: left;
					background: url(/images/multimedia/mma_assets.png) -177px -2px;
					width: 39px;
					height: 26px;
					}
					#mp_content #mp_main #controls #controls_left .play_toggle.active {
						background-position: -220px -2px;
						}
						#mp_content #mp_main #controls #controls_left .play_toggle:hover {
							opacity: 0.7;
							}
					
				#mp_content #mp_main #controls #controls_left .volume_outer {
					background: url(/images/multimedia/mma_assets.png) -288px -5px;
					float: left;
					width: 27px;
					height: 24px;
					margin-left: 10px;
					margin-top: 4px;
					}
					#mp_content #mp_main #controls #controls_left .volume_outer .volume_inner {
						background: url(/images/multimedia/mma_assets.png) -261px -5px;
						height: 24px;
						width: 27px;
						}
				
				#mp_content #mp_main #controls #controls_left .counter {
					float: left;
					margin-left: 10px;
					margin-top: 16px;
					}
				
				
				
			#mp_content #mp_main #controls #controls_right {
				float: right;
				}
			#mp_content #mp_main #controls A.control_link {
				background-color: #1f1f1f;
				padding: 8px;
				color: #fff;
				text-decoration: none;
				font-weight: bold;
				float: left;
				display: block;
				margin-left: 10px;
        border-bottom: none;  /* db */
				
				-webkit-transition: all 200ms linear;
				-moz-transition: all 200ms linear;
				transition: all 200ms linear;
				
				/* Define specific properties for iOS */
				-webkit-transition-property: background-color, color;
				}
				#mp_content #mp_main #controls A.control_link:hover {	
					background-color: #fff;
					color: #1f1f1f;
					}
				#mp_content #mp_main #controls A#share {
					background: url(/images/multimedia/mma_assets.png) -126px 3px #1f1f1f;
					margin-left: 10px;
					text-indent: -9999px;
					float: left;
					width: 30px;
					height: 30px;
					/*-webkit-transition: background-color 200ms linear;*/
					-moz-transition: background-color 200ms linear;
					transition: background-color 200ms linear;
					}
				#mp_content #mp_main #controls A#share:hover {	
					background-color: #fff;
					background-position: -146px 3px;
					}

		/* Carousel */
		#mp_content #carousel {
			margin-bottom: 15px;
			overflow: hidden;
			}
			#mp_content #carousel_outer {
				overflow: hidden;
				width: 956px;
				float: left;
				}
			#mp_content #carousel UL#carousel_inner {
				list-style-type: none;
				xwidth: 5000px;
				}
				#mp_content #carousel UL#carousel_inner LI {
					float: left;
					margin-right: 7px;
					margin-bottom: 10px;
					width: 100px;
          background:none; /* db */
          padding-left: 0px; /* db */
           

					
					/* large thumb override */
					width: 165px;
					}
					#mp_content #carousel UL#carousel_inner LI A {
						text-decoration: none;
						}
						#mp_content #carousel UL#carousel_inner LI A IMG {
							display: block;
							}
		
		
		#mp_content #carousel #carousel_next,		
		#mp_content #carousel #carousel_prev {
			float: left;
			width: 12px;
			height: 70px;
			text-indent: 9999px;
			background: url(/images/multimedia/mma_assets.png) #505050;
			-webkit-transition: background-color 200ms linear;
			-moz-transition: background-color 200ms linear;
			transition: background-color 200ms linear;
			
			/* large thumb override */
			height: 80px;
			background-position: 0 -5px;
			}
		#mp_content #carousel #carousel_prev {
			xbackground-position: -94px 24px;
			
			/* large thumb override */
			background-position: -94px 31px;
			}
		#mp_content #carousel #carousel_next {
			xbackground-position: -114px 24px;
			
			/* large thumb override */
			background-position: -114px 31px;
			}
		
		#mp_content #carousel #carousel_next:hover,		
		#mp_content #carousel #carousel_prev:hover {
			background-color: #303030;
			}
		
		#mp_content #carousel #carousel_next.disabled,		
		#mp_content #carousel #carousel_prev.disabled {
			opacity: 0.2 !important;
			}
		
.thumb_link {
	overflow: hidden;
	}


/* http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/ */
#mp_content #carousel_outer a,
#mp_content #carousel_outer a img { border: none; overflow: hidden; float: left; }
#mp_content #carousel_outer a.active { border: 1px solid #ececec; cursor: default; }
#mp_content #carousel_outer a.active img { margin: -1px; }

/*#mp_content #carousel_outer a:hover { border: none; }
#mp_content #carousel_outer a:hover img { margin: 0; }*/

/* solves hover/active situation */
#mp_content #carousel_outer A.active:hover .timecode {
	xwidth: 98px;
	xheight: 40px;
	xpadding-top: 28px;
	
	/* Large thumb override */
	width: 163px;
	xheight: 45px;
	xpadding-top: 33px;
	
	/* For long descs */
	height: 75px;
	padding-top: 3px;
	}

#mp_content #carousel_outer A {
	xoverflow: hidden;
	position: relative;
	}
#mp_content #carousel_outer A:hover {
	background-color: #000;
	}
	#mp_content #carousel_outer A .timecode {
		display: none;
		xwidth: 100px;
		xheight: 41px;
		position: absolute;

		background: rgba(0,0,0,0.7);
		-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#b3000000', EndColorStr='#b3000000')";
		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#b3000000', EndColorStr='#b3000000');
		
		text-align: center;
		color: #fff;
		font-weight: bold;
		xpadding-top: 29px;
		
		/* Large thumb override */
		width: 165px;
		xheight: 46px;
		xpadding-top: 34px;
		
		/* For long descs */
		height: 76px;
		padding-top: 4px;
		}
		#mp_content #carousel_outer A:hover .timecode {
			display: block;
			}


/* mooscroll styles */
.scrollBar {
	display: block;
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	width:12px;
	background: #4c4c4c;
	}

.scrollHandle {
	display:block;
	position:absolute;
	top:0px;
	right:0;
	width:12px;
	xheight:35px;
	min-height:13px;
	cursor: pointer;
	background: #ececec;
	
	-webkit-transition: background 200ms linear;
	-moz-transition: background 200ms linear;
	transition: background 200ms linear;
	
	}

.scrollHandle:hover {
	background: #fff;
	}

#mp_content #mp_main #slide .tooltip_div,
#mp_content #mp_main #slide .loader_slide,
#mp_container .loader_global {
	background: #fff;
	padding: 5px 25px;
	position: absolute;
	left: 43%;
	bottom: 47%;
	color: #000;
	font-weight: bold;
	}
#mp_content #mp_main #slide .tooltip_div {
	cursor: pointer;
	}
	
#mp_container .loader_global {
	left: 45%;
	bottom: auto;
	top: 282px;
	visibility: hidden;
	}
#mp_content #mp_main #slide .loader_slide {
	visibility: hidden;
	}
		
#mp_content #mp_main #slide .loader_slide,
#mp_container .loader_global {
	z-index: 1;
	}

#large_image  {
	position: absolute;
	z-index: 1;
	width: 980px;
	}
	#large_image IMG {
		display: none;
		-webkit-box-shadow: 0px 0px 15px #000;
		-moz-box-shadow: 0px 0px 15px #000;
		box-shadow: 0px 0px 15px #000;
		} 
		
/*.JS_MediaPlayer a, .JS_MediaPlayer a:hover {
  border-bottom: none;
}*/
a.create_mp, a.create_mp:hover {
  border-bottom: none;
}