body {
    margin: 0;
}

#header_bar {
    width: 100%;
    background: #000;
    font-size: 10px;
    font-family: Arial;
    color: #FFFFFF;
    height: 100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
#header_bar .header_content {
    height: 50px;
    background: url("//media.freeola.com/images/header-sprite.png") no-repeat scroll 0 0 transparent;
    text-decoration: none;
    text-transform: uppercase;
    border-right: 1px dotted #777;
}
.header_content {
    max-width: 1000px;
    min-width: 1000px;
    margin: 0 auto;
}
#header_bar .header_content .title {
    padding-top: 20px;
    padding-left: 70px;
    float: left;
}
#header_bar .header_content .right_button {
    display: block;
    float: right;
    height: 50px;
    line-height: 50px;
    padding: 0 15px 0 40px;
    color: #fff;
    text-decoration: none;
    outline : none;
    transition: background 200ms ease-in-out 0s;
    -o-transition: background 200ms ease-in-out 0s;
    -webkit-transition: background 200ms ease-in-out 0s;
    -moz-transition: background 200ms ease-in-out 0s;
    border-right: 1px dotted #777;
    position:relative;
}
#header_bar .header_content .right_button .fa-search {
    font-size:1.5em;
    position:absolute;
    top:16px;
    left:16px;
}
#header_bar .header_content .right_button:hover {
    background-color: #ea4e01;
}
#header_bar .header_content .back {
    height: 40px;
    line-height: 40px;
    margin: 5px;
    border:1px solid #cf492a;
    background-color: #ea4e01;
    background-image: url("//media.freeola.com/images/header-sprite.png");
    background-repeat: no-repeat;
    background-position: 15px -165px;
}
#header_bar .header_content .back:hover {
    border-color:#dc3f1b;
    background-color: #f8521a;
}
#header_bar .header_content .cross {
    border-left: 1px dotted #777;
    border-right: 1px dotted #777;
    background-position: 18px -3421px;
}
#header_bar .header_content .cross:hover {
    background-color: #444;
}
#header_bar .message {
    background: #222;
    font-size: 16px;
    line-height: 20px;
    padding: 10px 0;
    border-top: 1px dotted #777777;
    border-bottom: 1px dotted #777777;
}
#header_bar .message_content {
    width: 1000px;
    margin: 0 auto;
}
#header_bar .message_content .smaller-text {
    font-size:12px;
    display:block;
    position:relative;
    top:5px;
}
#header_bar .notice .message_content {
    text-align:center;
}

#header_bar .message_content a { font-weight:bold; border-bottom: 1px solid #fff; color: #FFF; text-decoration: none; }
#header_bar .message_content a:hover { border-bottom: 1px solid #999; }


.preview-modes {
    display:block;
    position:relative;
    overflow:hidden;
    float:right;
    border-left: 1px dotted #777;
    border-right: 1px dotted #777;
}

.preview-modes .preview-mode {
    display:block;
    float:left;
    text-decoration:none;
    color:#fff;
    position:relative;
}

.preview-modes .preview-mode:not(:first-child) {
    border-left: 1px dotted #555;
}

.preview-modes a {
    display:block;
    float:left;
    text-decoration:none;
    padding:5px 10px;
    height:40px;
    width:40px;
    color:#fff;
    outline:0 none;
}
.preview-modes a:not(:first-child) {
    padding-left:0px;
}
.preview-modes a:not(:last-child) {
    padding-right:0px;
}
.preview-modes a:hover {
    background-color:#333;
}
.preview-modes a.preview-current {
    background-color:#555;
}
.preview-modes a.preview-current:hover {
    background-color:#555;
}
.preview-modes .preview-icon,
.preview-modes .preview-text {
    text-align:center;
}

.preview-modes .preview-text {
    position:absolute;
    width:100%;
    top:37px;
    left:0;
    pointer-events:none;
}

.preview-modes-label {
    padding-top: 20px;
    padding-right: 20px;
    float: right;
}

.fa-desktop {
    margin-left:-2px;
}

.preview-container {
    position:fixed;
    overflow:hidden;
    top:112px;
    bottom:0;
    left:0;
    right:0;
    background-color:#eeeeee;
}

.preview-container iframe {
    border:0 none;
    z-index:10;
}

.preview-device {
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:100%;
    overflow:auto;
}

.preview-transitions .preview-device,
.preview-transitions .preview-device-sizer,
.preview-transitions .preview-device .preview-device-rotator {
    transition:500ms ease-in-out;
}

.preview-device .iframe-outer {
    position:absolute;
    z-index:5;
    left:0;
    right:0;
    top:0;
}

.preview-device.preview-device-rotated .marvel-device {
}

.preview-device.preview-device-rotated .iframe-outer {
}

.preview-device .iframe-outer,
.preview-device .marvel-device {
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
    -ms-transform:translateY(-50%) translateX(-50%);
    -webkit-transform:translateY(-50%) translateX(-50%);
    -moz-transform:translateY(-50%) translateX(-50%);
    -o-transform:translateY(-50%) translateX(-50%);
}

.preview-device .preview-device-rotator {
    position:absolute;
    left:50%;
    top:50%;
    height:0;
    width:0;
    overflow:visible;
}

.preview-device-rotated .preview-device-rotator {
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}
.preview-device-unrotated .preview-device-rotator {
    transform:rotate(-0deg);
    -ms-transform:rotate(-0deg);
    -webkit-transform:rotate(-0deg);
    -moz-transform:rotate(-0deg);
    -o-transform:rotate(-0deg);
}

.preview-device-rotate .preview-device-rotator {
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}
.preview-device-unrotate .preview-device-rotator {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
}

.preview-device-rotated .preview-device-rotator-iframe,
.preview-device-unrotated .preview-device-rotator-iframe {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
}

.preview-device-unrotate .preview-device-rotator-iframe {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}

.preview-device-rotate .preview-device-rotator-iframe {
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

.preview-transitions .preview-device-rotated .preview-device-rotator-iframe,
.preview-transitions .preview-device-unrotated .preview-device-rotator-iframe {
    transition-duration:0ms;
}

.preview-transitions .preview-device-unrotate .preview-device-rotator-iframe {
    transition-duration:500ms;
}

.preview-transitions .preview-device-rotate .preview-device-rotator-iframe {
    transition-duration:500ms;
}

.preview-device-sizer {
    position:relative;
    height:100%;
    width:100%;
    overflow:hidden;
}

.preview-device.preview-device-active {
    left:0;
    top:0;
}

.preview-device .marvel-device {
    /* cursor:pointer; */
}

.preview-device .marvel-device .screen,
.preview-device .device-image {
    background-color:#333;
}

.preview-device.preview-device-has-frame .marvel-device .screen,
.preview-device.preview-device-has-frame .device-image {
    background-color:#fff;
}

.preview-device-desktop {
    overflow:visible;
    left:calc(100% + 100px);
}

.preview-device-desktop .device-image {
    height:100%;
    width:100%;
}
.preview-device-desktop .device-image::before {
    content:' ';
    position:absolute;
    left:-100px;
    width:100px;
    border-left:3px solid #ccc;
    border-right:3px solid #000;
    background-color:#fff;
    box-sizing:border-box;
    top:0;
    bottom:0;
}

.preview-device-desktop .iframe-outer {
    height:100%;
    width:100%;
}

.preview-device-tablet .iframe-outer,
.preview-device-tablet .marvel-device {
    height:1024px;
    width:768px;
}

.preview-device-tablet.preview-device-rotated .iframe-outer {
    height:768px;
    width:1024px;
}

.preview-device-tablet .preview-device-sizer {
    min-height:1225px;
    min-width:845px;
}
.preview-device-tablet.preview-device-rotated .preview-device-sizer,
.preview-device-tablet.preview-device-rotate .preview-device-sizer {
    min-height:845px;
    min-width:1225px;
}
.preview-device-tablet.preview-device-unrotate .preview-device-sizer {
    min-height:1225px;
    min-width:845px;
}

.preview-device-mobile .iframe-outer,
.preview-device-mobile .marvel-device {
    height:568px;
    width:330px;
}

.preview-device-mobile.preview-device-rotated .iframe-outer {
    height:330px;
    width:568px;
}

.preview-device-mobile .preview-device-sizer {
    min-height:860px;
    min-width:410px;
}
.preview-device-mobile.preview-device-rotated .preview-device-sizer,
.preview-device-mobile.preview-device-rotate .preview-device-sizer {
    min-height:410px;
    min-width:860px;
}
.preview-device-mobile.preview-device-unrotate .preview-device-sizer {
    min-height:860px;
    min-width:410px;
}