@charset "UTF-8";



/* -------------------------------------------------------------------------- **
**  DEMONSTRATION LAYOUT
** -------------------------------------------------------------------------- */
#body #content {
	text-align: left;
	}
#body .content-inner {
	width: 940px;
	margin: 0;
	padding-bottom: 75px;
	}
#main #maincol {
	width: 650px;
	}
	#main #maincol .h3_title {
		width: 100%;
		height: 0;
		margin: 0;
		margin-bottom: 0px;
		padding: 0;
		padding-top: 70px;
		background: transparent url(../images/demonstration/h3_title.png) left top no-repeat;
		line-height: 150px;
		overflow: hidden;
		}
	#main #maincol .h3_title.title1 { background-position: 0px 0px; }
	#main #maincol .h3_title.title2 { background-position: 0px -70px; }
	#main #maincol .h3_title.title3 { background-position: 0px -140px; }
	#main #maincol .h3_title.title4 { background-position: 0px -210px; }
	#main #maincol .h3_title.title5 { background-position: 0px -280px; }
	#main #maincol .h3_title.title6 { background-position: 0px -350px; }
	
	#main #maincol .h4_title {
		width: 635px;
		height: 50px;
		margin: 0;
		margin-bottom: 20px;
		padding: 0;
		padding-left: 15px;
		background: transparent url(../images/demonstration/h4_title_bg.png) left top no-repeat;
		color: #000;
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		}

			#main #sidecol .pnav li a {
				background: transparent url(../images/demonstration/pnav.png) left top no-repeat;
				}
			#main #sidecol .pnav li.pnav1 a { background-position: 0px 0px; }
			#main #sidecol .pnav li.pnav2 a { background-position: 0px -70px; }
			#main #sidecol .pnav li.pnav3 a { background-position: 0px -140px; }
			#main #sidecol .pnav li.pnav4 a { background-position: 0px -210px; }
			#main #sidecol .pnav li.pnav5 a { background-position: 0px -280px; }
			#main #sidecol .pnav li.pnav6 a { background-position: 0px -350px; }
			
			#main #sidecol .pnav li.pnav1 a:hover { background-position: -300px 0px; }
			#main #sidecol .pnav li.pnav2 a:hover { background-position: -300px -70px; }
			#main #sidecol .pnav li.pnav3 a:hover { background-position: -300px -140px; }
			#main #sidecol .pnav li.pnav4 a:hover { background-position: -300px -210px; }
			#main #sidecol .pnav li.pnav5 a:hover { background-position: -300px -280px; }
			#main #sidecol .pnav li.pnav6 a:hover { background-position: -300px -350px; }
			
			#main .content1 #sidecol .pnav li.pnav1 a { background-position: -300px 0px; cursor: default; }
			#main .content2 #sidecol .pnav li.pnav2 a { background-position: -300px -70px; cursor: default; }
			#main .content3 #sidecol .pnav li.pnav3 a { background-position: -300px -140px; cursor: default; }
			#main .content4 #sidecol .pnav li.pnav4 a { background-position: -300px -210px; cursor: default; }
			#main .content5 #sidecol .pnav li.pnav5 a { background-position: -300px -280px; cursor: default; }
			#main .content6 #sidecol .pnav li.pnav6 a { background-position: -300px -350px; cursor: default; }


.views-row ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 5px;
	padding-bottom: 20px;
	}
	.views-row ul li {
		float: left;
		margin-right: 10px;
		padding-bottom: 10px;
		}
		.views-row ul li a { display: block; }
		.views-row ul li a:hover {
			-webkit-opacity: 0.60;
			-moz-opacity: 0.60;
			-ms-opacity: 0.60;
			-o-opacity: 0.60;
			opacity: 0.60;
			filter: alpha(opacity=60);
			}
		.views-row ul li p {
			text-align: center;
			}

.views-row .playerarea {
	width: 650px;
	padding-top: 5px;
	background: #000;
	text-align: center;
	}

.backbtn {
	padding: 20px;
	text-align: center;
	}
	.backbtn a {
		}
	.backbtn a:hover {
		-webkit-opacity: 0.65;
		-moz-opacity: 0.65;
		-ms-opacity: 0.65;
		-o-opacity: 0.65;
		opacity: 0.65;
		filter: alpha(opacity=65);
		}

/* -------------------------------------------------------------------------- **
**  CONTENT RETINA
** -------------------------------------------------------------------------- */
@media only screen and (min-device-pixel-ratio:1.5),
	only screen and (-o-min-device-pixel-ratio:3/2),
	only screen and (-ms-min-device-pixel-ratio:1.5),
	only screen and (min--moz-device-pixel-ratio:1.5),
	only screen and (-webkit-min-device-pixel-ratio:1.5) {
		#main #sidecol .pnav li a { background-image: url(../images/demonstration/pnav_2x.png); background-size: 600px auto; }
		#main #maincol .h3_title { background-image: url(../images/demonstration/h3_title_2x.png); background-size: 310px auto; }
		#main #maincol .h4_title { background-image: url(../images/demonstration/h4_title_bg_2x.png); background-size: 650px auto; }
	}