/*
    Created on : Feb 21, 2014, 12:05:15 PM
    Author     : Paul Salerno
*/

/**
 * Styles that are only used on the videos page, and won't be used for video views on other parts of the site.
 * Mostly responsive design.
 */

/*@media ( max-width : 352px ) {
	#embedded-video-title {
		width: 73%;
	}
}*/

@media (max-width: 588px) {
	.video-navigator .video-navigator-left {
		width: 75%;
	}
}

@media (max-width: 470px) {
	.video-navigator .video-navigator-left {
		width: 89%;
	}
}

/*
 * This CSS handles the truncation of the breadcrumbs as the window width decreases.
 * We need to make this change at a wider window width than main.css.
 */
@media (min-width: 596px) {
	#breadcrumbs .crumb-wrapper i {
		display: inline !important;
	}

	#breadcrumbs .crumb {
		display: inline !important;
	}
}

/*
 * This CSS handles the transition from left sidebar to dropdown in tablet mode.
 * We need to make this change at a wider window width than main.css.
 */
@media (max-width: 767px) {
	#side-column .white-panel {
		margin: 15px 0 0 0 !important;
	}

	.grid-1-3 {
		width: 100% !important;
	}

	.grid-2-3 {
		width: 100% !important;
	}

	#side-column a {
		float: none !important;
		width: 100% !important;
	}
}

@media (max-width: 839px) {
	.links-container {
		width: 50%;
		float: left;
		vertical-align: top;
	}

	.thumbnail-view-container {
		margin-top: 0px;
		float: right;
		vertical-align: top;
	}

	#main-column {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (max-width: 685px) {
	.links-container {
		float: none;
		width: 100%;
		display: block;
	}

	.thumbnail-view-container {
		float: none;
		display: block;
		margin-left: 0px;
		margin-top: 30px;
	}
}

/*
 * We hide the left sidebar earlier than normal on Jason's request.  We do this because otherwise, the top videos/subject page awkwardly
 * switches the alignment of the video links vs. thumbnail to horizontal, vertical, horizontal, vertical as the window width decreases.
 * By hiding the sidebar earlier, the transition is just horizontal to vertical.
 */
@media (max-width: 929px) {
	#breadcrumbs-wrapper #submenu-icon {
		display: block;
	}

	#breadcrumbs .title-wrapper {
		display: none;
	}

	#breadcrumbs .title-wrapper + .crumb-wrapper {
		margin-left: 15px;
	}

	#main-content.left-navigation #main-column-standard {
		margin-left: 0;
		float: none;
	}

	#main-content {
		max-width: 100%;
		padding: 0;
	}

	.grid {
		letter-spacing: -0.31em;
		*letter-spacing: normal;
		*word-spacing: -0.43em;
		text-rendering: optimizespeed;
		padding: 10px;
	}
	.grid-1-3,
	.grid-2-3 {
		display: inline-block;
		zoom: 1;
		*display: inline;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;
		text-rendering: auto;
	}
	.grid-1-3 {
		width: 33%;
	}

	.grid-2-3 {
		width: 66%;
	}

	#side-column-wrapper,
	#side-column {
		display: none;
		float: none;
		width: 100%;
		height: 100%;
		margin: 0;
		min-height: 150px !important;
	}

	#side-column .white-panel {
		margin: 0 0 20px 10px;
	}

	#side-column .submenu a {
		display: block;
		float: left;
		width: 49.5%;
		line-height: 32px;
		overflow: hidden;
		white-space: nowrap;
	}

	.submenu:before,
	.submenu:after {
		content: " ";
		display: table;
	}

	.submenu:after {
		clear: both;
	}

	#side-column .white-panel a {
		float: none;
		width: 100%;
	}

	#main-content.left-navigation,
	.store #main-content.left-navigation,
	.school #main-content.left-navigation,
	.community #main-content.left-navigation,
	.resources #main-content.left-navigation {
		background-image: none;
	}

	#side-column-wrapper.tablet {
		display: block;
		height: auto !important;
	}
	#side-column-wrapper.tablet #side-column {
		display: block;
		height: auto !important;
	}

	#breadcrumbs-wrapper #submenu-icon {
		float: right;
		color: white;
		margin-right: 10px;
		font-size: 25px;
		cursor: pointer;
		display: block;
	}

	.left-navigation #main-column {
		width: 100%;
	}

	#main-content.left-navigation #main-column-standard {
		margin-left: 0;
		float: none;
	}

	#main-content {
		max-width: 100%;
		width: 100%;
		padding: 0;
	}

	#main-content.left-navigation,
	.resources #main-content.left-navigation {
		background-image: none;
	}
}

@media (max-width: 1270px) {
	#embedded-video-container {
		margin-left: 0;
	}
}

/*
 * Hide feed buttons right when the feed disappears.
 */
@media (max-width: 700px) {
	#embedded-video-title-bar .community-link-button {
		display: none;
	}

	#embedded-video-title.has-alcumus-button {
		width: 87%;
	}

	#embedded-video-title.no-alcumus-button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	/*	#breadcrumbs-wrapper #submenu-icon {
		display : none;
	}*/

	.video-navigator-chapter .video-navigator-right {
		display: none;
	}

	.video-navigator-chapter .video-navigator-left {
		border-right: none;
		width: 100%;
	}

	.video-navigator-subject {
		font-size: 15pt;
	}
}

/*
	Stuff for the admin page
*/

.admin-guide-text {
	padding-left: 25px;
	font-size: smaller;
}

.admin-contest-info {
	text-align: center;
}

.admin-button-space {
	margin-top: 10px;
}

.admin-table-entry {
	text-align: center;
}

.delete-cell,
.editable-cell {
	cursor: pointer;
}