/* @override http://interim-results.imi.axisto.local/stylesheets/player.scaffold/scaffold.axisto.css */

/* scaffold.axisto.css contains style information that sets up the layout of the player it doesn't contain CSS for branding and colours. For the default branding edit the stylesheets in the default.skin folder. You an override styles in this file from there. */

/* @group Development styles */
/* Giving the body tag a class of 'axp-player-dev' will allow for development only styles */

body.axp-player-dev #axp-player {
	background: transparent url('./images/12_col.gif') -10px top repeat;
}

/* @end */

#axp-player {
	position: relative;
	width: 960px;
	height: 600px;
}

/* @group Object Layouts */

/* These styles will position the different objects according to a class set on the axp-player container */

/* @group Video Left, Slideshow Right */
/* As video left is the default layout for a player you must specify the styles for both #axp-player.left and also for just #axp-player together */

#axp-player.axp-left #axp-media-object1, #axp-player #axp-media-object1 {
	float: left;
	margin: 0 20px 20px 0px;
}
#axp-player.axp-left #axp-media-object2, #axp-player #axp-media-object2 {
	position: relative;
	float: right;
}

/* @end */

/* @group Video Right, Slideshow left */

#axp-player.axp-right #axp-media-object1 {
	float: right;
	margin: 0 0 20px 20px;
}
#axp-player.axp-right #axp-media-object2 {
	float: left;
}
#axp-player.axp-right .ui-player-chapter-container {
	clear: right;
	float: right;
}

/* @end */

/* @end */

/* @group tools */

#axp-player .axp-clear{
    clear: both;
}

/* @end */

/* @group JQuery UI */
/* Styles for JQuery UI widgets */

/* @group Component Containers */
/* JQuery UI component container styles */

#axp-player .ui-widget-content {
    color: #222;
}
#axp-player .ui-widget-content a {
    color: #222;
}
#axp-player .ui-widget-header {
    background: #ccc;
    color: #222;
    font-weight: bold;
}
#axp-player .ui-widget-header a {
    color: #222;
}

/* @end */

/* @group Interaction States */
/* States used by all UI widgets */

#axp-player .ui-state-default {
    border: 1px solid #d3d3d3;
    background-color: #e6e6e6;
    font-weight: normal;
    color: #555;
    outline: none;
}
#axp-player .ui-state-default a, #axp-player .ui-state-default a:link, #axp-player .ui-state-default a:visited {
    color: #555;
    text-decoration: none;
    outline: none;
}
#axp-player .ui-state-hover, #axp-player .ui-state-focus {
    border: 1px solid #999;
    background: #dadada;
    font-weight: normal;
    color: #212121;
    outline: none;
}
#axp-player .ui-state-hover a, #axp-player .ui-state-hover a:hover {
    color: #212121;
    text-decoration: none;
    outline: none;
}
#axp-player .ui-state-active {
    border: 1px solid #aaa;
    background: #fff;
    font-weight: normal;
    color: #212121;
    outline: none;
}
#axp-player .ui-state-active a, #axp-player .ui-state-active a:link, #axp-player .ui-state-active a:visited {
    color: #212121;
    outline: none;
    text-decoration: none;
}

/* @end */

/* @group Tabs */
/* JQuery Tabs UI */

#axp-player .ui-tabs {
	float: left;
}
#axp-player .ui-tabs-nav {
	position: relative;
	list-style: none;
}
#axp-player .ui-tabs-nav li {
	position: relative;
	float: left;
	border-bottom-width: 0;
	margin: 0 .2em -1px 0;
	padding: 0;
}
#axp-player .ui-tabs-nav li a {
	float: left;
	text-decoration: none;
	padding: .3em .8em;
}
#axp-player .ui-tabs-selected {
	padding-bottom: 1px;
	border-bottom-width: 0;
}
#axp-player .ui-tabs-selected a, #axp-player .ui-state-disabled a, #axp-player .ui-state-processing a {
	cursor: text;
}
/* First selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
#axp-player .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
}
#axp-player .ui-tabs-panel {
	clear: left;
	display: block;
	border: 1px solid #aaa;
	background: none;
}
#axp-player .ui-tabs-hide {
	display: none;
}

/* @end */

/* @end */

/* @group Forms */

#axp-player label.error {
	display: block;
}

/* @end */

/* @group Header */

#axp-player #axp-header {
	
}

/* @end */

/* @group Footer */

#axp-player #axp-footer {
	clear: both;
}

/* @end */

/* @group Registration View */

#axp-player #axp-user-registration {
	float: left;
	margin-right: 20px;
}
#axp-player #axp-user-login {

}

/* @end */

/* @group Webcast View */
/* The Webcast View displays the actual webcast  */

#axp-player #axp-player-view-webcast {
	position: relative;
}

/* @group Object One */
/* Object One is typically used to display the video or audio object */

#axp-player #axp-media-object1 {
	width: 320px;
}
#axp-player #axp-media-object1 #axp-media-player1, #axp-player #axp-media-object1.audio #axp-media-image1 {
	width: 320px;
	height: 240px;
}
#axp-player #axp-media-object1.axp-audio #axp-media-player1 {
	width: 1px;
	height: 1px;
}

/* @end */

/* @group Player Controls */
/* Controls for changing the video/audio; play, pause, scrub, volume etc */

#axp-player .ui-playcontrols {
	position: relative;
	width: 96%;
	padding: 2%;
    color: white;
    background: #bbb;
}
#axp-player .ui-playcontrols-control {
	cursor: pointer;
}
#axp-player .ui-playback {
	position: relative;
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    cursor: pointer;
    background: #fff;
}
#axp-player .ui-playback .ui-slider-range {
    height: 16px;
    background: #ccc;
}
#axp-player .ui-playback .ui-slider-handle {
    display: block;
    position: relative;
    top: -16px;
    width: 1px;
    height: 16px;
    border: 0;
    background: #000;
}
#axp-player .ui-playstate-controls {
	float: left;
	margin-right: 6px;
}
#axp-player .ui-playstate-playpause {
    width: 16px;
    height: 16px;
}
#axp-player .ui-time-display {
	height: 17px;
	line-height: 17px;
}
#axp-player .ui-volume-controls {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 136px;
	height: 16px;
}
#axp-player .ui-volume-track {
	position: absolute;
	top: 2px;
	left: 16px;
    width: 100px;
    height: 12px;
    background: #fff;
}
#axp-player .ui-volume-track .ui-slider-range {
    width: 50px;
    height: 12px;
    background: #ccc
}
#axp-player .ui-volume-track .ui-slider-handle {
	display: block;
	position: relative;
	top: -12px;
	width: 1px;
	height: 12px;
	border: 0;
	background: #000;
}
#axp-player .ui-volume-updown {
    cursor: pointer;
    width: 16px;
    height: 16px;
}
#axp-player .ui-volume-down {
	position: absolute;
	left: 0;
}
#axp-player .ui-volume-up {
	position: absolute;
	right: 0;
}

/* @end */

/* @group Object Two */
/* Object Two is typically used to display slides and other content */

#axp-player #axp-media-object2 {
	position: relative;
	width: 620px;
}
#axp-player .ui-tabs-nav {
	float: left;
	background-color: white;
}
#axp-player .ui-tabs-panel {
	padding: 10px;
}
#axp-player #axp-media-object2 #axp-media-player2 {
	width: 100%;
	height: 100%;
}
#axp-player #axp-media-object2 #axp-media-player2.axp-loading {
	width: 1px;
	height: 1px;
}

/* @end */

/* @group Chapters */

#axp-player .ui-player-current-chapter {
	cursor: pointer;
}
#axp-player .ui-player-chapter-container {
	z-index: 20;
	clear: left;
	width: 320px;
	background-color: #fff;
}
#axp-player .ui-player-chapter-container.axp-dropdown .ui-player-chapters {
	position: absolute;
	width: 320px;
	margin: 0;
}
#axp-player .ui-player-chapter {
	overflow: auto;
	padding: 3px 5px;
	cursor: pointer;
}
#axp-player .ui-player-chapter.active, #axp-player .ui-player-chapter:hover {
	background-color: #eee;
}

/* @end */

/* @group Slides */

#axp-player .ui-player-slide-container {
	clear: both;
	padding-top: 10px;
}
#axp-player .ui-player-slide-scroller {
	position: relative;
	overflow: hidden;
	float: left;
	width: 98%;
}
#axp-player .ui-move-list {
	width: 1%;
	height: 100%;
	margin: 0;
}
#axp-player .ui-prev {
	float: left;
}
#axp-player .ui-next {
	float: right;
}
#axp-player .ui-player-slides {
	width: 100%;
	margin: 0;
}
#axp-player .ui-player-slide {
	float: left;
	width: 84px;
	height: 81px;
	padding: 0 5px;
	cursor: pointer;
}
#axp-player .ui-player-slide.active {
	background-color: #aaa;
}
#axp-player .ui-player-slide img {
	width: 100%;
}
#axp-player .ui-player-slide-begin {
	display: none;
}

/* @end */

/* @group Enlargement */

#axp-player .axp-enlarge {
	position: absolute;
	right: 0;
}
TB_window {
	position: absolute;
}
#TB_ajaxContent {
	float: left;
}
#TB_closeAjaxWindow {
	font-family: inherit;
	font-size: inherit;
}

/* @end */

/* @end */