*{
margin:0;
padding:0;
border:0;
outline:none;
}
a{
text-decoration: none;
}
body {
background-color:rgba(192,192,192,0.3);
}
#square-mainWrapper{
}
.square{
display:flex;
position:center;
width: 680px;
}
.componentWrapper{
max-width: 680px;
max-height: auto;
}
.componentWrapper .playerHolder{
display:flex;
position:relative;
padding-top: 100%;
background:#000;
}
.componentWrapper .playerHolder_fs{
position:fixed;
top:0px !important;
left:0px !important;
width:100% !important;
height:100% !important;
margin:0px !important;
padding:0px !important;
background:#000 !important;
z-index:999999 !important;
overflow:hidden!important;
}
.componentWrapper .mediaHolder,
.componentWrapper .mediaPreview,
.componentWrapper .youtubeIframeMain{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:hidden;
display:none;
}
.flashMain{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
outline:none;
}
.fsOverflow{
overflow:hidden !important;
}
.ap_media{
max-width:none!important;
}
/* context menu */
.ap-context-menu{
display:none;
position:absolute;
padding:10px;
font: 12px Arial, Helvetica, sans-serif;
white-space:nowrap;
z-index:10000;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
background: #f5f5f5;
}
.ap-context-menu li{
list-style:none;
border-top: 1px solid #FFF;
border-bottom: 1px solid #DDD;
padding:5px;
}
.ap-context-menu li:first-child{
border-top: none;
}
.ap-context-menu li:last-child{
border-bottom: none;
}
.ap-context-copyright span {
background-color: #666;
color: #E5E5E5;
font-size: 10px;
}
.ap-context-menu li:hover > span{
opacity: 0.5;
}
.componentWrapper .preloader{
position:absolute;
top:50%;
left:50%;
margin:-25px 0px 0px -25px;
background:#000 url('../data/loader.gif') no-repeat center center;
width:50px;
height:50px;
z-index:999;
opacity:0.7;
display:none;
}
/* icons */
.componentWrapper .icon_color{
color:#cccccc !important;
}
.componentWrapper .icon_rollover_color{
color:#cc6666 !important;
}
.componentWrapper .ap_cc{
font-size: 18px;
position:absolute;
top:7px;
left:11px;
}
.componentWrapper .ap_qual{
font-size: 18px;
position:absolute;
top:7px;
left:11px;
}
.componentWrapper .ap_vol{
font-size: 18px;
position:absolute;
top:7px;
left:9px;
}
.componentWrapper .ap_mute{
font-size: 18px;
position:absolute;
top:7px;
left:9px;
}
.componentWrapper .ap_play{
font-size: 16px;
position:absolute;
top:8px;
left:11px;
}
.componentWrapper .ap_pause{
font-size: 14px;
position:absolute;
top:9px;
left:11px;
}
.componentWrapper .ap_down{
font-size: 16px;
position:absolute;
top:8px;
left:12px;
}
.componentWrapper .ap_fs_ent{
font-size: 16px;
position:absolute;
top:8px;
left:12px;
}
.componentWrapper .ap_fs_exit{
font-size: 16px;
position:absolute;
top:8px;
left:12px;
}
.componentWrapper .ap_pl_back{
font-size: 23px;
position:absolute;
top:12px;
left:15px;
}
.componentWrapper .ap_pl_forw{
font-size: 23px;
position:absolute;
top:13px;
left:15px;
}
.componentWrapper .ap_pl_info{
font-size: 19px;
position:absolute;
top:9px;
left:11px;
}
.componentWrapper .ap_pl_share{
font-size: 19px;
position:absolute;
top:9px;
left:11px;
}
.componentWrapper .ap_more{
font-size: 16px;
position:absolute;
top:7px;
left:13px;
}
.componentWrapper .ap_shr{
font-size: 17px;
position:absolute;
top:8px;
left:10px;
}
.componentWrapper .ap_info{
font-size: 16px;
position:absolute;
top:8px;
left:11px;
}
.componentWrapper .ap_clinfo{
color:#eee;
font-size: 20px;
position:absolute;
top:7px;
left:18px;
}
/* player controls */
.componentWrapper .playerControls{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:33px;
background:#111 !important;
display:none;
}
.componentWrapper .player_toggleControl{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
float:left;
border-top: 1px solid #222;
}
.componentWrapper .player_mediaTime_current{
position:relative;
top:0px;
left:0px;
height:33px;
width:50px;
line-height:33px;
text-align: center;
float:left;
color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-left: 1px solid #222;
border-top: 1px solid #222;
border-right: 1px solid #222;
pointer-events:none;
}
.componentWrapper .player_mediaTime_current p{
text-align: center;
line-height: 33px;
}
.componentWrapper .player_seekbar{
position:relative;
top:0px;
left:0px;
height:33px;
float:left;
border-top: 1px solid #222;
}
.componentWrapper .progress_bg{
position:absolute;
top:13px;
left:15px;
width:362px;
height:7px;
background:#333333;
overflow:hidden;
}
.componentWrapper .load_level{
position:absolute;
top:0px;
left:0px;
width:0px;
height:7px;
background:#ffffff;
}
.componentWrapper .progress_level{
position:absolute;
top:0px;
left:0px;
width:0px;
height:7px;
background:#999;
}
.componentWrapper .player_progress_tooltip{
position:absolute;
top:0px;
width:1px;
height:1px;
background:#111;
display:none;
}
.componentWrapper .player_mediaTime_total{
position:relative;
top:0px;
height:33px;
width:50px;
left:0px;
line-height:33px;
text-align: center;
float:left;
color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-left: 1px solid #222;
border-top: 1px solid #222;
pointer-events:none;
}
.componentWrapper .player_mediaTime_total p{
text-align: center;
line-height: 33px;
}
.componentWrapper .player_volume_wrapper{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
float:left;
border-left: 1px solid #222;
border-top: 1px solid #222;
}
.componentWrapper .player_volume{
position:absolute;
top:0px;
left:0px;
width:36px;
height:33px;
}
.componentWrapper .volume_seekbar{
position:absolute;
top:-72px;
left:-1px;
width:36px;
height:70px;
background:#111;
border: 1px solid #222;
border-bottom: none;
display:none;
}
.componentWrapper .volume_bg{
position:absolute;
bottom:10px;
left:14px;
width:7px;
height:50px;
background:#333;
}
.componentWrapper .volume_level{
position:absolute;
bottom:10px;
left:14px;
width:7px;
height:25px;
background:#999;
}
.componentWrapper .player_volume_tooltip{
position:absolute;
top:0px;
left:0px;
width:35px;
height:1px;
background:#111;
display:none;
}
.componentWrapper .player_fullscreen{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
border-left: 1px solid #222;
border-top: 1px solid #222;
float:left;
}
/* controls rest */
.componentWrapper .player_ctrl_wrapper{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
float:left;
border-left: 1px solid #222;
border-top: 1px solid #222;
}
.componentWrapper .player_ctrl{
position:absolute;
top:0px;
left:0px;
width:36px;
height:33px;
}
.componentWrapper .player_ctrl_rest{
position:absolute;
top:-35px;
right:0px;
height:33px;
display:none;
}
/* caption menu */
.componentWrapper .player_captions{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
background:#111;
line-height:13px;
text-align: center;
float:right;
border-top: 1px solid #222;
border-left: 1px solid #222;
display:none;
}
.componentWrapper .caption_btn{
position:absolute;
top:0px;
left:0px;
width:36px;
height:33px;
}
.componentWrapper .caption_holder{
position:relative;
height:100%;
display:none;
right:-1px;
float:right;
}
.componentWrapper .captions_menu {
border: 1px solid #222;
background: #111;
}
.componentWrapper .captions_menu li {
display:block;
width:100%;
list-style:none;
text-align:left;
padding:5px 10px !important;
margin:0!important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.componentWrapper .captionOver {
color:#c66;
font-size:13px;
text-decoration:none;
white-space:nowrap;
}
.componentWrapper .captionOut {
color:#ccc;
font-size:13px;
text-decoration:none;
white-space:nowrap;
}
/* quality menu */
.componentWrapper .player_quality{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
background:#111;
line-height:13px;
text-align: center;
float:right;
border-top: 1px solid #222;
border-left: 1px solid #222;
display:none;
}
.componentWrapper .quality_btn{
position:absolute;
top:0px;
left:0px;
width:36px;
height:33px;
}
.componentWrapper .quality_holder{
position:relative;
height:100%;
display:none;
right:-1px;
float:right;
}
.componentWrapper .quality_menu {
border: 1px solid #222;
background: #111;
}
.componentWrapper .quality_menu li {
display:block;
width:100%;
list-style:none;
text-align:left;
padding:5px 10px!important;
margin:0!important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.componentWrapper .qualityOver {
color:#c66;
font-size:13px;
text-decoration:none;
white-space:nowrap;
}
.componentWrapper .qualityOut {
color:#ccc;
font-size:13px;
text-decoration:none;
white-space:nowrap;
}
.componentWrapper .player_download{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
background:#111;
border-top: 1px solid #222;
border-left: 1px solid #222;
float:right;
display:none;
}
.componentWrapper .player_info{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
background:#111;
border-top: 1px solid #222;
border-left: 1px solid #222;
float:right;
display:none;
}
/* share, embed */
.componentWrapper .player_share{
position:relative;
top:0px;
left:0px;
width:36px;
height:33px;
background:#111;
border-top: 1px solid #222;
border-left: 1px solid #222;
float:right;
}
@media only screen and (max-width: 768px) {
.componentWrapper .player_mediaTime_current, .componentWrapper .player_mediaTime_total{
display: none;
}
}
/* description */
.componentWrapper .infoHolder{
position:absolute;
overflow:hidden;
background: #699;
background: rgba(0, 0, 0, 0.5);
display:none;
}
.componentWrapper .close_info{
position:absolute;
top:0px;
right:0px;
width:50px;
height:35px;
background: #111;
border: 1px solid #222;
}
.componentWrapper .infoInner{
display: inline-block;
position:relative;
margin:50px;
background: #111;
border: 1px solid #222;
}
.componentWrapper .infoInner p{
color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding:10px;
background: #111;
}
.componentWrapper .infoTitle{
color:#0CF;
font-size:16px;
}
.componentWrapper .infoHolder a{
color:#FF6;
}
/* share, embed */
.componentWrapper .shareHolder{
position:absolute;
overflow:hidden;
background: #699;
background: rgba(0, 0, 0, 0.5);
display:none;
}
.componentWrapper .close_share{
position:absolute;
top:0px;
right:0px;
width:50px;
height:35px;
background: #222;
border: 1px solid #333;
}
/* share */
.componentWrapper .ap_share_holder{
position:absolute;
background: #111;
border: 1px solid #222;
}
.componentWrapper .share_title{
color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding:5px;
}
.componentWrapper .ap_share_holder li{
list-style:none;
float:left;
padding:5px;
}
.componentWrapper .ap_share_holder li a img{
display:block;
width:16px;
height:16px;
}
/* embed */
.componentWrapper .embedInner{
position:relative;
max-width:400px;
}
.componentWrapper .embed_wrap{
background: #111;
border: 1px solid #222;
padding:5px;
}
.componentWrapper .embed_title{
color:#ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding-bottom:5px;
}
.componentWrapper .embed_code_wrap{
float:left;
width:100%;
}
.componentWrapper .embed_code{
padding:5px;
background: #222;
border: 1px solid #333;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin-right:45px;
}
.componentWrapper .embed_copy{
padding:5px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
background: #fff;
margin-left:-40px;
float:left;
}
.componentWrapper .big_play{
position:absolute;
width:76px;
height:76px;
top:50%;
left:50%;
margin-left:-37px;
margin-top:-37px;
background: #111;
background: rgba(0,0,0,0.5);
border-radius: 50%;
behavior: url(../php/PIE.php);
display:none;
}
.componentWrapper .ap_bplay{
color:#ccc;
font-size: 30px;
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-14px;
}
/* logo */
.componentWrapper .playerLogo{
position:absolute;
}
.componentWrapper .click_blocker{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background: url(../data/clickblocker.png) repeat;
display:none;
}
/* video advert */
.ap_adv{
display:none;
}
.skip_out{
right:0px !important;
top:360px !important;
}
.ap_adv_skip{
position:absolute;
height:60px;
right:30px;
bottom:43px;
background:#555;
background: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
display:none;
}
.ap_adv_msg{
width:95px;
height:60px;
float:right;
display: table;
}
.ap_adv_msg p{
font-size:12px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.ap_adv_img{
width:87px;
height:60px;
float:right;
overflow:hidden;
}
.ap_adv_img .adv_thumb{
display:block;
width:90px;
height:55px;
padding:1px 1px 1px 0;
}
.ap_adv_msg_end{
width:182px;
height:60px;
display:none;
}
.ap_adv_msg_end p{
font-size:18px;
color:#eee;
text-align: center;
line-height:60px;
}
/* mail download confirm */
.download_confirm{
position:absolute;
width: 200px;
left:50%;
top:50%;
margin-left:-100px;
display:none;
}
.download_confirm p{
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#fff;
background:#ccc;
text-align: center;
}
#api_panel {
position:fixed;
padding-top: 100px;
top:50px;
right:0px;
height:100%;
overflow-y:auto;
display:none;
}
#api_panel_inner {
padding: 80px;
background:#444;
font-family: sans-serif;
font-size: 16px;
color:#eee;
-moz-box-shadow: 2px 2px 5px #222;
-webkit-box-shadow: 2px 2px 5px #222;
box-shadow: 2px 2px 5px #222;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#222222');
}
#api_panel li a{
color:#fff;
}
#api_panel li a:hover, #api_panel li .current{
text-decoration: underline;
}
.toggle_panel {
position:fixed;
top:0px;
right:0px;
width:40px;
height:40px;
background: #444 url('../data/icons/api_open.png') no-repeat center center;
display:none;
}
.toggle_panel_close {
position:fixed;
top:0px;
right:0px;
width:40px;
height:40px;
background: #444 url('../data/icons/api_close.png') no-repeat center center;
}