/* @group Reset */

@-webkit-keyframes progressFlashing {
	from { background-color: rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 7px rgba(0,0,0,.8); -webkit-animation-timing-function: ease-out; }
	50% { background-color: rgba(100,100,100,0.1); -webkit-box-shadow: 0 0 7px rgba(255,255,255,0.3); }
	100% { background-color: rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 7px rgba(0,0,0,.8); -webkit-animation-timing-function: ease-out; }
}

body { background: #141414 repeat; overflow-x: hidden; }

.wrapper { border-top: none; }
#branding { position: absolute; height: 50px; background: -webkit-gradient(linear, 0 top, 0 bottom, from(rgba(0,0,0,0.6)), to(transparent), color-stop(30%, rgba(0,0,0,0.3))); border-top: 5px #323A45 solid; }
#wyctimbar nav li > a { color: #fff; border-left: 1px transparent solid; }
#wyctimbar nav li > a:hover { background-color: rgba(0,0,0,0.3); }

#search { background-color: #222; border: 1px transparent solid; -webkit-box-shadow: none; }
#search.focused { padding: 0 4px 4px 9px; border: 2px #c00000 solid; }
#search.focused input { background-position: left 4px;	 }
#search input { color: #fff; background: url(/images/core/icons/magnifying-glass-white.png) left 4px no-repeat; border: none; -webkit-box-shadow: none; }
#search label { color: #fff; }

/* @end */

/* @group Content */

div#content { position: relative; margin-top: 0; top: 0; padding-top: 100px; background-color: #141414; background: -webkit-gradient(radial, 430 200, 300, 500 170, 0, from(#141414), to(#4A4A4A)); overflow: hidden; color: #fff; }

#podcast-logo h2 { font-size: 32px; font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2", Helvetica, Arial, sans-serif; position: absolute; top: 105px; left: 50px; text-transform: uppercase; letter-spacing: -2px; text-shadow: #000 0 2px 5px; z-index: 102; color: #fff; }

#introduction { width: 180px; font-size: 21px; color: #aaa; position: absolute; left: 50px; top: 175px; z-index: 102; text-shadow: #000 0 0 5px; font-variant: small-caps; -webkit-font-smoothing: antialiased; }
#introduction p { margin-bottom: 32px; }

/* @end */

/* @group Episode List */

#episode-container { width: 215px; height: 215px; overflow: hidden; position: absolute; left: 244px; z-index: 100; }

#episodes { position: relative; top: 4px; }
#episodes img { margin: 0 auto; display: block; cursor: pointer; position: relative; margin-bottom: 15px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-transition: -webkit-box-shadow 0.15s ease-out; }
#episodes img:hover { -webkit-box-shadow: 0 0 10px rgba(255,255,255,0.35); }

#episode-overlay { width: 204px; height: 204px; position: absolute; z-index: 99; background: url(/images/podcast/album-overlay.png) no-repeat; border: 4px #00A2F9 solid; -webkit-box-shadow: rgba(0, 0, 0, 0.746094) 0px 0px 6px, inset 0 0 5px rgba(0,0,0,0.5); -webkit-border-radius: 3px; }
#player, #playbutton { width: 38px; height: 38px; position: absolute; top: 72px; left: 73px; z-index: 100; background: rgba(0,0,0,0.6) url(/images/podcast/play.png) center center no-repeat; border: 4px #fff solid; -webkit-box-shadow: 0 0 7px rgba(0,0,0,.8); padding: 10px; -webkit-border-radius: 50px; }
.progress { -webkit-animation: progressFlashing 2s ease-out; -webkit-animation-iteration-count: infinite; }

#progress-bar-wrapper { width: 202px; height: 30px; position: absolute; top: 178px; left: 5px; z-index: 100; }
#progress-bar { width: 0; height: 30px; background: rgba(0,0,0,0.3); position: absolute; z-index: 101; }
input[type="range"] { width: 100%; height: 30px; position: absolute; background: transparent; z-index: 102; -webkit-appearance: none; }
 input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; display: block; width: 0 !important; height: 0 !important; background: transparent; }
#player:active { background: rgba(0,0,0,0.7) url(/images/podcast/play.png) center center no-repeat; }

/* #progress { width: 38px; height: 38px; position: absolute; top: 225px; left: 118px; z-index: 99; border: 4px transparent solid; border-top: 10px #000 solid; padding: 10px; -webkit-border-radius: 50px; }*/

#not-webkit { font-family: Helvetica, Arial, sans-serif; display: none; width: 400px; background-color: #f8f8f8; background: -moz-linear-gradient(-90deg, #fff, #eee); color: #000; position: absolute; left: 50%; margin-left: -200px; top: 180px; text-align: center; padding: 12px; z-index: 1000; -moz-border-radius: 10px; -moz-box-shadow: #000 0 2px 10px; }
#not-webkit a { color: #000 !important; }

.hud-button { font-family: Arial, sans-serif; padding: 4px 10px; background: rgba(0,0,0,0.7); border: 2px #fff solid; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; font-size: 13px; font-weight: bold; text-decoration: none; -webkit-font-smoothing: antialiased; }
.hud-button:hover, .hud-button:hover:active{ color: #fff; }

/* @end */

@media screen and (max-width: 960px) {
	.container_12 { margin-left: auto; margin-right: auto; width: 960px; overflow: visible; }
	
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; }
	
	.alpha { margin-left: 0; }
	.omega { margin-right: 0; }
	
	.container_12 .grid_1 { width:60px; }
	.container_12 .grid_2 { width:140px; }
	.container_12 .grid_3 { width:220px; }
	.container_12 .grid_4 { width:300px; }
	.container_12 .grid_5 { width:380px; }
	.container_12 .grid_6 { width:460px; }
	.container_12 .grid_7 { width:540px; }
	.container_12 .grid_8 { width:620px; }
	.container_12 .grid_9 { width:700px; }
	.container_12 .grid_10 { width:780px; }
	.container_12 .grid_11 { width:860px; }
	.container_12 .grid_12 { width:940px; }
	
	.container_12 .prefix_1 { padding-left:80px; }
	.container_12 .prefix_2 { padding-left:160px; }
	.container_12 .prefix_3 { padding-left:240px; }
	.container_12 .prefix_4 { padding-left:320px; }
	.container_12 .prefix_5 { padding-left:400px; }
	.container_12 .prefix_6 { padding-left:480px; }
	.container_12 .prefix_7 { padding-left:560px; }
	.container_12 .prefix_8 { padding-left:640px; }
	.container_12 .prefix_9 { padding-left:720px; }
	.container_12 .prefix_10 { padding-left:800px; }
	.container_12 .prefix_11 { padding-left:880px; }
}