.mbox-packer{}

.mbox-packer-data{
position:fixed;
top:15px;
left:15px;
right:15px;
bottom:15px;
background:#fff;
border:1px solid gray;
box-shadow: 0 0 3px #000;
}

.mbox-close{
position:fixed;
right:15px;
top:15px;
width:24px;
line-height:20px;
text-align:center;
border:0;
cursor:pointer;
font:bold 20px verdana;
color:red;
}

.mbox-nav-prev, .mbox-nav-next{
width:100px;
background:url(flush_prev.png) no-repeat center left;
position:fixed;
top:66px;
bottom:66px;
left:16px;
cursor:pointer;
}

.mbox-nav-next{
right:416px;
background:url(flush_next.png) no-repeat center right;
left:auto;
}

.mbox-close:hover{
color:#000;
}

.mbox-left{
top:16px;
left:16px;
right:416px;
bottom:16px;
border-right:1px solid gray;
overflow:hidden;
position:fixed;
background:#000;
}

.mbox-right{
top:16px;
bottom:16px;
right:16px;
width:380px;
padding:10px;
border-left:1px solid gray;
overflow:auto;
position:fixed;
}

.mbox-bg{
top:0;
left:0;
right:0;
bottom:0;
background:url(pattern.png);
position:fixed;
}

.mbox-image-block-img{
border:0;
display:block;
margin:0 auto;
width:100%;
}

.mbox-image-block{
display: table-cell;
vertical-align: middle;
text-align: center;
}

.mbox-outer {
display: table;
width: 100%;
height: 100%;
}

.mbox-fullscreen{
background: #fff url("fullscreen_alt.png") no-repeat center center;
width:45px;
height:45px;
cursor:pointer;
right:416px;
top:16px;
bottom:16px;
position:fixed;
left:auto;
border-left:1px solid gray;
border-bottom:1px solid gray;
}

.mbox-noflow{
overflow:hidden;
}

.mbox-image-title{
right:416px;
top:auto;
bottom:16px;
position:fixed;
left:16px;
background: url('img_bg.png');
font:bold 12px arial;
padding:10px;
text-align:left;
border-top:1px solid gray;
display: none;
}

.mbox-image-title:hover, .mbox-yt-title:hover{
background: #fff;
}

.mbox-descr{display:none;}

.mbox-nav-prev, .mbox-nav-next, .mbox-fullscreen{
opacity:0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-moz-opacity:0.4;
-webkit-opacity:0.4;
-ms-opacity:0.4;
-o-opacity:0.4;
-khtml-opacity:0.4;
transition:opacity 0.4s;
-moz-transition:opacity 0.4s;
-webkit-transition:opacity 0.4s;
-ms-transition:opacity 0.4s;
-o-transition:opacity 0.4s;
-khtml-transition:opacity 0.4s;
}

.mbox-nav-prev:hover, .mbox-nav-next:hover, .mbox-fullscreen:hover{
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-webkit-opacity:1;
-ms-opacity:1;
-o-opacity:1;
-khtml-opacity:1;
}

/* CSS FOR FULLSCREEN */

.mbox-alternate-mode .mbox-fullscreen, .mbox-full-mode .mbox-fullscreen{
border:1px solid gray;
}

.mbox-full-mode .mbox-image-title, .mbox-alternate-mode .mbox-image-title{
right:0;
left:0;
bottom:0;
top:auto;
padding:10px 20px;
}

.mbox-full-mode .mbox-fullscreen, .mbox-alternate-mode .mbox-fullscreen{
right:15px;
left:auto;
bottom:auto;
top:15px;
background: #fff url("fullscreen_exit.png") no-repeat center center;
}

.mbox-full-mode .mbox-nav-prev, .mbox-alternate-mode .mbox-nav-prev{
left:0;
right:auto;
top:50px;
bottom:50px;
width:100px;
}

.mbox-full-mode .mbox-nav-next, .mbox-alternate-mode .mbox-nav-next{
left:auto;
right:0;
top:50px;
bottom:50px;
width:100px;
}


.mbox-alternate-mode{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background:#000;
width:100%;
border-right:0;
}

.mbox-full-mode{
width:100%;
background:#000;
border-right:0;
top:0;
bottom:0;
left:0;
right:0;
}


.mbox-alternate-mode .mbox-iframe-outer .mbox-iframe, .mbox-full-mode  .mbox-iframe-outer .mbox-iframe, 
.mbox-alternate-mode .yt-box-outer, .mbox-full-mode  .yt-box-outer{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}

.mbox-alternate-mode .mbox-yt-title, .mbox-full-mode .mbox-yt-title{
top:0;
bottom:auto;
border-top:0;
border-bottom:1px solid gray;
}

.mbox-alternate-mode .mbox-html-outer, .mbox-full-mode .mbox-html-outer{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}

/* END CSS FOR FULLSCREEN */

.mbox-iframe-outer, .yt-box-outer{
position:fixed;
top:16px;
bottom:16px;
left:16px;
right:416px;
}

.mbox-yt-title{
top:16px;
bottom:auto;
border-top:0;
border-bottom:1px solid gray;
}

.mbox-iframe{
width:100%;
height:100%;
}

.mbox-ajax-loading{
min-height:64px;
background:#fff url('loading.png') center center no-repeat;
}


/* CSS FOR HTML */
.mbox-html-outer{
bottom: 16px;
left: 16px;
overflow: auto;
padding: 10px;
position: fixed;
right: 416px;
text-align: left;
top: 16px;
background-color:#fff;
}

.mbox-html-outer pre{
padding:5px;
border:1px solid gray;
background:#eee;
}
/* CSS FOR HTML ENDS */