/* Launch Button */
#insert-ooyala-button {
}
	.ooyala-buttons-icon {
		display: inline-block;
		padding-left: 24px;
		padding-top: 18px;
		background: url(img/ooyala-logo-small.png) no-repeat;
		background-size: 18px 18px;
		vertical-align: text-top;
	}
.disabled.button .ooyala-buttons-icon {
	filter: Alpha(opacity=50); /* for IE8 -__- */
	opacity: 0.5;
}

/* Title bar */
.ooyala-title-bar {
	position: relative;
	height: 100%;
}
	.ooyala-title-bar .ooyala-title {
		overflow: hidden;
		background: url(img/ooyala-title.png) no-repeat center;
		background-size: 224px 40px;
		padding: 0 8px;
		position: absolute;
		left: 0;
		top: 0px;
		height: 40px;
		width: 224px;
		height: 100%;
		text-indent: -99999px;
	}
		@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
			.ooyala-title-bar h1 {
				background-image: url(images/ooyala-logo-2x.png);
				background-size: auto 30px;
			}
		}

	.ooyala-title-bar .ooyala-title-links {
		position: relative;
		line-height: 45px;
		float: right;
		margin-right: 40px;
	}
		.ooyala-title-links .ooyala-title-link {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			position: relative;
			margin: 0 .5em;
		}
		.ooyala-title-links .ooyala-login-toggle.ooyala-logged-in {
			font-weight: bold;
		}
		.ooyala-browse-link.ooyala-browsing {
			display: none;
		}

		/* Hide links for unsupported browsers */
		.ooyala-unsupported-browser .ooyala-browse-link, .ooyala-unsupported-browser .ooyala-upload-toggle {
			display: none;
		}

/* Unsupported Browser messaging */
.ooyala-unsupported-browser-message {
	padding: 2em;
}

/* About screen */
.ooyala-about-text {
	position: relative;
	padding: 1em 5em 1em 2.5em;
}
	.ooyala-about-text h2 {
		color: #444;
	}
	.ooyala-close-x {
		position: absolute;
		right: 20px;
		cursor: pointer;
	}
	.ooyala-close-x:before {
		content: '\f158';
		font: normal 20px/1 'dashicons';
	}
	.ooyala-about-text p {
		text-indent: .5em;
	}
	.ooyala-about-text dt {
		font-weight: bold;
		font-size: 1.2em;
	}
	.ooyala-about-text dd {
		padding: .5em;
		margin: .5em;
	}

/* Sidebar */
.ooyala-sidebar-container {
	background: #f5f5f5;
	border-left: 1px solid #dfdfdf;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}
	.ooyala-sidebar {
		padding: 0 16px;
		max-height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ooyala-sidebar .media-sidebar {
		padding: 0;
		position: static;
		background: transparent;
		border: none;
	}
	.ooyala-sidebar-details {
		padding: 0 10px;
		height: 100%;
	}
	.ooyala-sidebar .attachment-display-settings {
		float: none;
	}

/* Loading spinner */
.ooyala-spinner {
	display: block;
	width: 24px;
	height: 24px;
}

/* Ooyala Browser */
.media-frame .ooyala-attachments-browser {
	padding-right: 300px;
	width: auto;
}
	.ooyala-attachments-browser .ooyala-search-toolbar {
		position: relative;
	}
		.ooyala-toolbar .media-selection {
			right: 200px;
		}

		/* Override WP's limitation of width of these elements */
		.media-modal-content .ooyala-search-toolbar .media-toolbar-primary,
		.media-modal-content .ooyala-search-toolbar .media-toolbar-secondary {
			width: auto;
		}

		.ooyala-toolbar .selection .attachment-preview {
			padding-bottom: 0;
		}
		.ooyala-toolbar .selection-view .attachments {
			position: absolute;
		}
		.ooyala-toolbar .ooyala-label-search {
			display: none;
			margin-left: 5px;
		}
			.ooyala-toolbar.has-label .ooyala-label-search {
				display: block;
			}
			.ooyala-toolbar .ooyala-label-search .ooyala-clear-label {
				text-decoration: none;
				vertical-align: middle;
				font-size: small;
				text-align: left;
				box-shadow: none;
			}
				.ooyala-toolbar .ooyala-label-search .ooyala-clear-label:before {
					vertical-align: middle;
				}
			.ooyala-toolbar .ooyala-label-search .ooyala-selected-label {
				font-style: italic;
				margin-left: 5px;
			}


	.ooyala-browser-container {
		height: 100%;
	}
	.ooyala-attachments-browser .ooyala-browser-flex-container {
		border-collapse: collapse;
		border: 0;
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 0;
	}
	.ooyala-search-spinner {
		display: none;
	}
	.no-more.search-loading  .ooyala-search-spinner {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: #fff;
		background: rgba(255,255,255,.8);
	}
	.ooyala-attachments-browser .ooyala-browser {
		position: relative;
		height: 100%;
	}
	.ooyala-attachments-browser .ooyala-results {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		transition: left 0.4s;
	}
		.ooyala-results .selected.attachment:not(.details) {
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		.ooyala-results .attachments {
			position: relative;
			height: 100%;
			top: 0;
			left: 0;
		}
		.ooyala-results .attachments::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 7px;
		}
			.ooyala-results .attachments::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background-color: rgba(0,0,0,.5);
				-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
			}
		.ooyala-results .ooyala-more {
			display: none;
		}
			.have-more .ooyala-more {
				display: block;
				position: relative;
			}
			.ooyala-more .attachment-preview {
				display: table-cell;
				vertical-align: middle;
				font-size: 1.2em;
				line-height: 2em;
				color: #888;
			}
				.ooyala-more .ooyala-more-text-container {
					line-height: 0;
					position: relative;
					z-index: 2;
				}
				.ooyala-more .ooyala-more-spinner {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
				.ooyala-more .ooyala-number-remaining {
					font-weight: bold;
					font-size: 1.2em;
					color: #444;
					display: block;
				}
				.ooyala-more .ooyala-more-text {
					font-weight: bold;
					font-size: 1.1em;
					color: #888;
					display: block;
			}

/* Individual attachments */
.ooyala-attachment {
	padding-bottom: 4.5em;
	overflow: hidden;
}
	.ooyala-attachment .thumbnail {
		width: 100%;
		height: 0 !important;
		padding-bottom: 100%;
	}
		.ooyala-attachment .thumbnail .centered img {
			max-height: 100%;
			max-width: 100%;
		}
	.ooyala-attachment .asset-details .image-collection {
		display: block;
		color: #888;
	}
	.ooyala-attachment .image-id {
		font-weight: bold;
	}
	.ooyala-attachment .asset-details {
		position: absolute;
		width: 100%;
		top: 0;
		padding-top: 100%;
	}
	.media-selection .ooyala-attachment .thumbnail {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.media-selection .attachments, .media-selection .ooyala-attachment {
		overflow: visible;
	}
	.media-selection .attachment {
		margin-right: 7px;
	}
	.ooyala-toolbar li.attachment.ooyala-attachment-item:focus,
	.ooyala-toolbar li.attachment.ooyala-attachment-item,
	.ooyala-results li.attachment.ooyala-attachment-item:focus:not(.selected) {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.media-selection .ooyala-attachment .asset-details {
		display: none;
	}
	.ooyala-more .attachment-preview {
		display: block;
	}
	.ooyala-more-text-container {
		position: absolute !important;
		top: 0;
		padding-top: 50%;
		width: 100%;
	}

.ooyala-toolbar .search-results-total {
	float: right;
	display: none;
}
	.have-searched .ooyala-toolbar .search-results-total {
		display: block;
	}

.ooyala-toolbar .search-results-refresh {
	display: none;
	float: right;
	cursor: pointer;
	margin-left: 1em;
	font-size: 16px;
	line-height: 24px;
}

/* Upload panel */
.ooyala-upload-panel {
	position: absolute;
	width: 300px;
	/* Center the panel in its space */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
	@media only screen and (max-width: 600px) {
		.ooyala-upload-panel {
			position: static;
		}
	}

	.ooyala-upload-panel label.setting, .ooyala-upload-panel label.setting input, .ooyala-upload-panel label.setting textarea {
		display: block;
		margin: 5px 0 10px;
		width: 275px;
	}
		.ooyala-upload-panel div.file-name {
			line-height: 28px;
		}

	.ooyala-upload-browser-container {
		text-align: center;
		font-size: 200%;
	}
	.ooyala-upload-controls .ooyala-stop-upload, .ooyala-upload-controls .progress {
		display: none;
	}
		.ooyala-upload-controls.uploading .ooyala-stop-upload {
			display: inline-block;
		}
		.ooyala-upload-controls.uploading .progress {
			display: block;
		}
		.ooyala-upload-controls.uploading .ooyala-start-upload {
			display: none;
		}

/* Label management */
.ooyala-edit-labels .ooyala-label-remove {
	font-size: 1em;
	line-height: 1.2em;
	font-size: 1.1em;
	cursor: pointer;
	color: inherit;
}

.ooyala-label-list {
	line-height: 1.2em;
	max-width: 100%;
}
	.ooyala-label-list .ooyala-label {
		display: inline-block;
	}
	.ooyala-label-list .dashicons-warning:before {
		color: red;
	}

/* Asset details panel (sidebar) */
.ooyala-attachments-browser .ooyala-image-details {
}
	.ooyala-display-settings .message {
		display: none;
		color: darkred;
	}
		.ooyala-display-settings .message a {
			display: block;
			font-style: italic;
			margin: 1em 0;
			box-shadow: none;
		}
		.ooyala-display-settings.embed-warning .setting {
			display: none;
		}
		.ooyala-display-settings.embed-warning .message {
			display: block;
		}
	.ooyala-image-details .thumbnail img,
	.ooyala-image-details .thumbnail {
		max-height: 300px;
		max-width: 100%;
		float: none;
		clear: both;
		display: block;
		margin: 0 auto .5em;
	}
		.ooyala-image-details .ooyala-status-text {
			display: inline-block;
			width: 50%;
			text-align: left;
		}

		.ooyala-image-details .thumbnail {
			max-height: 300px;
			position: relative;
			padding-bottom: 30px;
		}

		.ooyala-thumbnail-action {
			height: 30px;
			text-align: center;
			position: absolute;
				left: 0; right: 0; bottom: 0;
		}
		.ooyala-image-details .thumbnail button {
			margin: .25em .5em;
		}
		.ooyala-image-details-list {
			line-height: 1.5em;
		}
			.ooyala-image-details-list dt {
				display: inline-block;
				float: left;
				margin: 0 .75em 0 0;
				width: auto;
				text-shadow: 0 1px 0 #fff;
				line-height: inherit;
			}
			.ooyala-image-details-list dd {
				display: block;
				margin: 0 .5em 1em;
				color: #333;
				clear: right;
				line-height: inherit;
			}
			.ooyala-image-details-list dd .description {
				line-height: inherit;
				font-size: inherit;
			}
			.ooyala-image-details-list .ooyala-labels .ooyala-label {
				display: inline-block;
			}
			.ooyala-image-details-list span.more {
				display: none;
			}
			.ooyala-image-details-list span.show.more {
				display: inline;
			}
			.ooyala-image-details-list a.show-more {
				font-style: italic;
				box-shadow: none;
			}
			dd.ooyala-status {
				color: goldenrod;
			}
			dd.ooyala-status.ooyala-status-live {
				color: green;
			}
			dd.ooyala-status.ooyala-status-error, dd.ooyala-status.ooyala-status-duplicate {
				color: darkred;
			}

/* Labels */
.ooyala-labels-container .ooyala-label-input-container {
	position: relative;
}

/* Settings fields */
.ooyala-settings-wrapper {
	float: left;
	width: 100%;
	clear: both;
}
	.ooyala-settings-wrapper .ooyala-version-setting label {
		display: inline-block;
		margin-right: 1em;
		padding-top: 8px;
	}
	.media-sidebar .ooyala-settings-wrapper .setting span {
		width: 30%;
	}

	.ooyala-settings-wrapper .ooyala-version-setting input[type="radio"] {
		margin-top: 0;
	}

	.ooyala-settings-wrapper .setting.ooyala-numeric-input input {
		width: 30%;
		float: none;
	}
	.ooyala-settings-wrapper .setting.ooyala-numeric-input input {
		width: 30%;
		float: none;
	}

	.ooyala-settings-wrapper .ooyala-setting textarea {
		width: 98%;
		float: none;
	}
		.ooyala-settings-wrapper .ooyala-setting .ooyala-error-message {
			float: none;
			display: none;
			color: darkred;
			font-weight: normal;
		}
		.ooyala-settings-wrapper .ooyala-setting.ooyala-error .ooyala-error-message {
			display: block;
		}
		.ooyala-settings-wrapper .ooyala-setting.ooyala-error textarea {
			background-color: lightpink;
		}

	.ooyala-settings-wrapper .setting em.loading {
		padding-top: 8px;
		display: block;
		line-height: 16px;
	}

	.ooyala-settings-wrapper .ooyala-playlist-select-wrapper::after { /* clearfix */
		display: table;
		content: "";
		clear: both;
	}

	.ooyala-settings-wrapper em.ooyala-playlist-help {
		padding-top: 0.5em;
		display: block;
		border-top: 1px solid #ccc;
		margin-top: 0.5em;
	}

			/* duplicate margin/padding on button for text */
			.ooyala-status-text {
				display: inline-block;
				line-height: 28px;
				margin: .25em .5em;
				padding: 0 11px 2px;
			}
				.ooyala-status-text .dashicons {
					line-height: 28px;
				}
				.ooyala-status-featured {
					margin-left: -.5em;
				}


		/* animated ellipsis for loading message */
		.ooyala-attachments-browser .loading:after { /* TODO: make sure this looks good in all browsers... */
			overflow: hidden;
			display: inline-block;
			vertical-align: bottom;
			-webkit-animation: ellipsis steps(4,end) 900ms infinite;
			animation: ellipsis steps(4,end) 900ms infinite;
			content: "\2026"; /* ascii code for the ellipsis character */
			width: 0px;
		}

		@keyframes ellipsis {
			to {
				width: 1.25em;
			}
		}

		@-webkit-keyframes ellipsis {
			to {
				width: 1.25em;
			}
		}

		.ooyala-settings-wrapper .settings-group {
			width: 65%; /* this should match the responsiveness of other elements */
			float: right;
		}

			.ooyala-settings-wrapper.ooyala-playlist-settings .setting {
				margin-top: 8px;
			}

			.ooyala-settings-wrapper .settings-group label {
				float: none;
			}

			.ooyala-settings-wrapper .settings-group label input[type] {
				margin-top: 0;
			}

			.ooyala-settings-wrapper .setting.resolution .custom-resolution {
				display: none;
			}

			.ooyala-settings-wrapper .setting.resolution .custom-resolution.custom-entry {
				display: block;
			}

			.ooyala-settings-wrapper .setting.resolution .custom-resolution input[type=text] {
				width: 40%;
				float: none;
			}

/* Playlist browser */
.ooyala-playlists {
	padding-right: 300px;
	height: 100%;
}

.ooyala-playlists .ooyala-playlists-browser-wrapper {
	height: 100%;
	overflow: auto;
}

.ooyala-playlists .ooyala-playlists-list {
	margin: 0px;
}

.ooyala-playlists .ooyala-playlists-list li {
	padding: 1em 2em;
	border-bottom: 1px solid #ddd;
	margin: 0;
}

.ooyala-playlists .ooyala-playlists-list li:hover {
	background: rgba(0, 0, 0, .04);
	cursor: pointer;
}

.ooyala-playlists .ooyala-playlists-list li.selected {
	font-weight: bold;
	background: rgba(0, 0, 0, .1);
}

.ooyala-playlists .ooyala-playlists-select {
	display: none;
}

/* Top-level search form */
.ooyala-search-toolbar .media-toolbar-primary {
		float: none;
		position: relative;
		padding-top: 50px;
		overflow: hidden;
		max-width: none;
}
	.ooyala-search-toolbar .ooyala-search-input-container {
		position: absolute;
		top: 0;
		left: 5px;
		right: 95px;
	}
		.ooyala-search-input-container .search {
			font-size: 120% !important;
			width: 100%;
			max-width: none !important;
		}

	.ooyala-search-toolbar .media-toolbar-primary .button {
		position: absolute;
		right: 5px;
		top: 0;
		width: 80px;
		text-align: center;
	}

	/* "Secondary" toolbar shows as gray bar */
	.ooyala-search-toolbar .media-toolbar-secondary {
		float: none;
		position: relative;
		background-color: #f0f0f0;
		border-top: 1px solid #d8d8d8;
		border-bottom: 1px solid #d8d8d8;
		width: 100%;
		padding: 0px 5px;
		margin-left: -5px;
		height: 24px;
		line-height: 24px;
		margin-bottom: -1px;
		max-width: none;
	}

.ooyala-filter { float: left; margin: .5em; }
	.ooyala-filter em {
		display: block;
		font-weight: bold;
		font-size: .9em;
		color: #777;
	}
	.ooyala-filter input {
		margin-right: .5em;
	}
	.ooyala-filter label {
		margin-right: 1em;
	}

/*
 * Frame toolbar
 */
.ooyala-toolbar {
	overflow: visible;
}
	.ooyala-toolbar .attachment .media-progress-bar div {
		min-width: 0;
	}

/**
 * Tiny bit of responsiveness
 */
@media only screen and (max-width: 1000px) {
	.ooyala-results {
		font-size: .8em;
		line-height: 1.25em;
	}
}
@media only screen and (max-width: 900px) {
	.ooyala-search-toolbar .media-selection .attachments {
		display: block;
	}
	.media-frame .ooyala-attachments-browser {
		padding-right: 263px;
	}
	.media-modal .attachments-browser .ooyala-search-toolbar .media-toolbar-primary,
	.media-modal .attachments-browser .ooyala-search-toolbar .media-toolbar-secondary {
		width: 100%;
	}
	.ooyala-toolbar .media-selection .attachments {
		display: block;
	}
	.ooyala-toolbar .media-selection .attachment {
		margin-bottom: 20px; /* attachments might wrap, so push them down and out of view */
	}
}

/**
 * Tweaks to the settings screen
 */
.ooyala-settings input.widefat {
	width: 400px;
	max-width: 100%;
}

.ooyala-settings .textarea-invalid {
	border-color: #dc3232 !important;
	-webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
	box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
}

.ooyala-settings .alt-accounts-wrap th,
.ooyala-settings .alt-accounts-wrap td {
	padding: 10px 0px 5px 10px;
}

.ooyala-settings h2 {
	white-space: nowrap;
}

.ooyala-tabs-wrapper {
	margin: 2em 0;
}

.ooyala-tabs,
.ooyala-tabs li {
	display: inline;
}

.ooyala-tabs li::after {
	content: ' | ';
}

.ooyala-tabs li:last-child::after {
	content: none;
}

.ooyala-tabs a.active {
	font-weight: bold;
}

.ooyala-tab-container {
	display: none;
}
	.ooyala-tab-container.active {
		display: block;
	}

.ooyala-tab-container > p:first-child {
	font-style: italic;
}

.ooyala-tab-container .ooyala-settings:not(.enabled) {
	opacity: .5;
}

.ooyala-advanced-params-wrapper:not(.js--shown) .js--hide {
	display: none;
}

.ooyala-advanced-params-wrapper .ooyala-advanced-params {
	display: none;
}

.ooyala-advanced-params-wrapper.js--shown .js--show {
	display: none;
}

.ooyala-advanced-params-wrapper.js--shown .ooyala-advanced-params {
	display: block;
}