﻿html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}a:link,a:active,a:visited,a:hover{color:inherit;text-decoration:underline}a:hover{text-decoration:none}h1{margin:10px 0}p{margin:8px 0}ul{list-style-image:none;list-style-position:outside;list-style-type:none}ol{list-style-position:inside}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}tt,code,pre{font-family:"Courier New", Courier, monospace}table{border-collapse:collapse;border-spacing:0}strong,b{font-weight:900}i{font-style:italic}sub{vertical-align:sub;font-size:smaller;line-height:normal}sup{vertical-align:super;font-size:smaller;line-height:normal}select{padding:1px}table th{text-align:left;font-weight:900}div,li{position:relative;}
body {color: #333; font: normal normal 300 16px Arial, Helvetica, Verdana, Sans-Serif;}
html, body {height: 100%;}
form, #container {min-height: 100%;}
.clearb {clear: both;}
#header {display: none; padding: 10px; background: #000; overflow: hidden;}
#header .logo {float: left; background: url("/images/v4/template-sprites-v20140422.png") no-repeat scroll -133px -60px rgba(0, 0, 0, 0); display: block; height: 33px; margin-right: 10px; text-indent: -9999px; width: 76px;}
#header .back-link {float: right; color: #fff; text-decoration: none; padding: 6px 0;}
#header .back-link:hover {text-decoration: underline;}
#container {overflow: hidden; margin: auto; /*border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px 0 #000;*/ background-color: #fff;}
.innertube {padding: 10px 15px;}
#hero {margin-right: 34%; height: 100%; text-align: center; z-index: 8;}
.preload, #hero {background: transparent url('/images/v4/icons/loader.gif') no-repeat center center;}
#hero img {max-width: 100%; max-height: 100%; height: auto; width: auto; /* Fix for IE */ margin: 0 auto;}
#hero figcaption {font-size: 80%;}
#library {float: right; width: 34%; min-width: 150px; bottom: 0; border-left: 1px solid #ccc; z-index: 10; height: 100%; overflow: auto; position: absolute; right: 0; top: 0;}
#library .media {overflow: auto; border: 1px solid #ccc; border-top: 0; padding: 15px 0 15px 15px;}
#library li {text-align: center; float: left; margin: 0 15px 15px 0; width: 64px; height: 64px;}
#library li.video {}
#library li.360 {}
#library li.focus a {border: 1px solid #444; box-shadow: 0 0 4px #444;}
#library li .overlay {position: absolute; bottom: -1px; left: 1px;}
#library li a {background: #fff url() no-repeat center center; display: block; width: 64px; height: 64px; border: 1px solid #ccc;}
#library li.video a {background-color: #000000;}
#library li span {width: 0; height: 0; display: none;}
.media-selector {border: 1px solid #ccc; background: #eee; text-align: center; padding: 4px;}
iframe {display: block; margin: 0 auto; max-height: 100%; max-width: 100%; border: 0;}
iframe.video-iframe {height: 100%; width: 100%;}
@media all and (max-width: 950px) {
	#library {width: 27%;}
	#hero {margin-right: 27%;}
}