@charset "utf-8";

@import url("media004-jscrollpane.css");
/* media Design Styles */
/*.pg_overlay { width:100%; background:#222; z-index:-1; height:100%; position:fixed; top:0; left:0;}*/

.pg_overlay04 { width:100%; background: url(../mediaimages/bg_004.jpg) repeat-x; z-index:-1; height:100%; position:fixed; top:289px; left:0;}
#catpro h3 { font-size:20px; color:#FFF; font-weight:normal}

.toptitle_strip{
	width:439px;
	height:15px;
	background:url(../mediaimages/toptitle_strip_004.png) no-repeat;
	position:absolute;
	top:120px;
	left:20px;/*75px*/; /*opacity 0*/
	z-index:20;
}

h1.mediatitle {
	position:absolute;
	top:54px;
	left:20px;
	font-size:50px;
	font-weight:normal;
	font-style:normal;
	font-family:'LibelSuitRegular';
	color:#fff;
	width:519px;
	height:50px;
	line-height:60px;
	padding-left:15px;
	padding-top:0px;
	-moz-opacity:1;
	-webkit-opacity:1;
	opacity:1;
	z-index:5;
}

.mediatopstrip_04 {
	width:100%;
	height:289px;
	text-align:center;
	background:url(../mediaimages/toptitle_bg_004.jpg) repeat-x;
	position:fixed;
	top:0px;
	left:0px/*75px*/;
	/*opacity 0*/
	z-index: 0;
}

.mediabottomstrip_04 {
	width:100%;
	height:25px;
	text-align:center;
	background:url(../mediaimages/toptitle_bg_004.jpg) repeat-x;
	border-bottom:#000 6px solid;
	position:fixed;
	bottom:0px;
	left:0px/*75px*/;
	/*opacity 0*/
	z-index: 2;
}

#mainframe { width:940px;
	position:fixed;
	top:155px;
	margin:0 auto;
	padding-right:0px;
	z-index:0;
	background:url(../mediaimages/mainframe_bg_004.png) no-repeat;
	/*background:transparent url(../img/bg90.png) repeat;*/
	color:#FFF;
	height: 660px; overflow:auto;}

#avplaylistBx { width:830px;
	position:absolute;
	top:210px;
	margin:0 auto;
	padding-left:50px;
	z-index:0;
	background:none;
	/*background:transparent url(../img/bg90.png) repeat;*/
	color:#FFF;
	height:540px; /*overflow:auto;*/}
#avplaylistBx iframe { width:420px; height:315px; }
.mediacontent {
	width:100%;
	
	text-align:center; height:335px;
	/*background:transparent url(../img/bg90.png) repeat;*/
	padding:8px 0 30px 0; clear:both
}

.soundCloudWrap { padding-top:72px; clear:both; margin-bottom:20px;}

.closeicon {
	top:144px;
	right:71px;
	position:absolute;
	z-index:10;
}

.pg_overlay { opacity:1}

iframe { z-index:1}

.insidem { position:relative; width:100%;}

h3.mttl {
	background: url(../mediaimages/filename_bg.png) no-repeat;
	font-family:'LibelSuitRegular';
	font-size:24px;
	font-weight:normal;
	padding:13px 0 0 20px;
	text-align:left;
	height:45px;
	position:absolute;
	width:292px;
	top:13px;
	left:14px;
	z-index:10
	
}
iframe.mfrm {
	position:absolute;
	top:28px;
	left:342px;
	z-index:11;
}
.frame {
	background: url(../mediaimages/bigframe004.jpg) no-repeat;
	width:454px;
	height:346px;
	position:absolute;
	top:13px;
	left:327px;
	z-index:2;
}


@font-face {
    font-family: 'LibelSuitRegular';
    src: url('fonts/libelsuit-webfont.eot');
    src: url('fonts/libelsuit-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/libelsuit-webfont.woff') format('woff'),
         url('fonts/vlibelsuit-webfont.ttf') format('truetype'),
         url('fonts/libelsuit-webfont.svg#LibelSuitRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@media only screen and (max-width: 592px) and (min-width: 320px){

	#mainframe { width:100%; background-size:100% 60%; top:82px;}
	.mediatopstrip_04 { height:90px;}
	#avplaylistBx { width:92%; margin:0; left:2%; height:316px; top:110px; padding:0;}
	h1.mediatitle { width:96%; left:2%; font-size:1.64em; top:2%; padding:0; line-height:normal; }
	.closeicon { top:0; right:4%;}
	.closeicon img { width:38px; height:auto; }
	.toptitle_strip { width:100%;}
	.frame { width:100%; left:0; background-size:100%; height:324px; z-index:-1; top:80px; }
	iframe.mfrm { left:2%; width:262px !important; height:196px !important; position:static !important; clear:both;  }
	h3.mttl { width:94%; font-size:98%; position:static; clear:both; background-size:100%; height:58px; margin-bottom:20px; }
	
	.mediacontent { height:305px;}
	.toptitle_strip { left:0; top:90px; background-position:center top; }
	.pg_overlay03 { background-size:100%; }
	
	.mediabottomstrip_04 { display:none;}
	
}

@media only screen and (max-width: 479px) and (min-width: 343px){
	
}
@media only screen and (max-width: 592px) and (min-width: 480px){
	#mainframe { top:64px; }
	.mediatopstrip_04 { height:60px;}
	#avplaylistBx { width:92%; left:3%; top:88px; height:280px}
	.closeicon { top:0; right:2%;}
	h1.mediatitle { width:98%; left:1%; font-size:1.64em; top:1%; padding:0; }
	h3.mttl { margin-bottom:30px;}
	
	.toptitle_strip { top:70px; background-position:center top; }
	
	.frame { width:100%; left:0; background-size:70%; background-position:center top;  height:324px; z-index:-1; }
	iframe.mfrm { left:26%;}
	.mediabottomstrip_04 { display:none;}
}

@media only screen and (max-width: 800px) and (min-width: 768px){
	#mainframe { width:100%; background-size:100%; top:120px;}
	.mediatopstrip_04 { height:100px;}
	#avplaylistBx { width:92%; margin:0; padding:0; left:4%; top:150px; height:472px}
	h1.mediatitle { width:96%; left:2%; font-size:1.64em; top:2%; }
	.closeicon { top:0; right:4%;}
	.toptitle_strip { width:100%;}
	.frame { width:100%; left:0; background-position:center 80px; height:514px; z-index:-1; }
	iframe.mfrm { left:20%; position:static !important; clear:both;  }
	h3.mttl { width:94%; position:static; clear:both; background-size:100%; height:58px; margin-bottom:40px; padding-left:30px;}
	
	.mediacontent { height:405px;}
	.toptitle_strip { left:0; background-position:center top;}
	.pg_overlay03 { background-size:100%; }
	.mediabottomstrip_04 { display:none;}
}

@media only screen and (max-width: 1024px) and (min-width: 1000px){
	#mainframe { width:100%; background-size:100%; top:100px;}
	.container_all { height:770px;}
	.mediatopstrip_04 { height:100px;}
	#avplaylistBx { width:90%; margin:0; left:1%; top:160px; height:450px}
	h1.mediatitle { width:96%; left:2%; font-size:1.64em; top:2%; }
	.closeicon { top:0; right:4%;}
	.toptitle_strip { width:100%;}
	.frame { width:100%; left:0; background-position:center 80px; height:464px; z-index:-1;  }
	iframe.mfrm { left:27%; position:static !important; clear:both;  }
	h3.mttl { width:94%; position:static; clear:both; background-size:100%; height:58px; margin-bottom:40px; padding-left:60px;}
	
	.mediacontent { height:405px;}
	.toptitle_strip { left:0; background-position:center top; }
	.mediabottomstrip_04 { display:none;}
}