html, body { width: 100%; height: 100%; }
body { background: #000; color: #fff; font: 14px / 20px 'Didact Gothic', Helvetica, Arial, Verdana, sans-serif; min-height: 940px; }
b, strong { font-weight: bold; letter-spacing: -1px; }
a { color: #808080; text-decoration: none; }
a:hover { color: #fff; }
p { font-size: 16px; line-height: 28px; text-shadow: 0px 0px 5px rgba(0,0,0,0.75); }
h1 { font-size: 40px; font-weight: bold; text-shadow: 0px 0px 10px rgba(0,0,0,0.8); letter-spacing: 2px; line-height: 40px; margin-bottom: 20px; }
#container { max-width: 1600px; min-width: 900px; height: 100%; min-height: 940px; text-align: center; position: relative; margin: 0px auto; overflow: hidden; }
.left { float: left; }
.right { float: right; }
.clearfix::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
/* TRANSITION SPEEDS */
.trans-fast { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.trans-slow { -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition: all 1s ease-in; transition: all 1s ease-in; }
.trans-bg { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; }
.show { opacity: 1 !important; -webkit-opacity: 1 !important; -moz-opacity: 1 !important; visibility: visible !important; }
.hide { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
/* PRELOADER */
#preloader { height: 100%; position: fixed; background: #000; z-index: 101; top: 0; width: 100%; }
#preloader #preload-title { margin: 0px auto; margin-top: 350px; width: 48px; position: relative; z-index: 34; }
#preloader #preload-title #preload-spinner { position: absolute; top: 1px; left: 1px; }
#preloader #preload-glow { top: -105px; left: -17px; position: relative; z-index: 33; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); text-align: center; }
#preload-contents { display: none; }
/* HEADER & FOOTER PLACEMENT */
header { background: #201c15 url('../gfx/header-bg.jpg') repeat-x; width: 100%; height: 43px; position: fixed; top: 0; z-index: 100; }
header #release-date { text-transform: uppercase; letter-spacing: 1px; margin-top: 15px; margin-right: 10px; line-height: 13px; }
footer { background: #fff; z-index: 100; height: 34px; color: #000; width: 100%; position: fixed; bottom: 0; }
footer a { color: #666; }
footer a:hover { color: #000; }
footer #socials { z-index: 33; position: absolute; left: 0; top: 0; }
footer #socials ul { margin: 7px 0 5px 20px; }
footer #socials ul li { display: inline-block; text-indent: -9999px; margin-left: 10px; opacity: 0.6; -webkit-opacity: 0.6; -moz-opacity: 0.6; }
footer #socials ul li:hover { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
footer #socials ul li:first-child { margin: 0; }
footer #socials ul li a { display: block; background: url(../gfx/footer-social-icons.jpg) no-repeat left top; width: 24px; height: 20px; }
footer #socials ul li#twitter a { background-position: -30px 0; }
footer #socials ul li#pinterest a { background-position: -62px 0; }
footer #socials ul li#tumblr a { background-position: -94px 0; }
footer #socials ul li#youtube a { background-position: -126px 0; }
footer #legal-hover { width: 100%; text-align: center; float: left; position: absolute; left: 0; top: 0; text-transform: uppercase; font-size: 11px; padding: 7px 0; z-index: 31; background: #fff; }
footer #legal-hover > a { background: url(../gfx/footer-legal-arrow.jpg) no-repeat right center; padding-right: 12px; }
footer #legal-hover:hover #legal { height: 140px; }
footer #legal { z-index: 1; position: absolute; z-index: 30; height: 0; text-align: center; width: 100%; overflow: hidden; bottom: 34px; width: 100%; background: #000; }
footer #legal #legal-links { position: relative; bottom: 70px; color: #999; font-family: Helvetica, Arial, Verdana; }
footer #legal #legal-links a { color: #999; }
footer #legal #legal-links a:hover { color: #ccc; }
footer #share { position: absolute; right: 0; z-index: 33; }
footer #share li { display: inline-block; margin-top: 6px; width: 100px; }
footer #share li#pinit { width: 50px; }
footer #share li#fblike { }
footer #share li#fblike .fb_iframe_widget { height: 21px; overflow: hidden; }
footer #share li#fblike .fb_iframe_widget span { vertical-align: baseline; }
/* TITLE */
#title { position: relative; text-align: center; margin: 0 auto; min-height: 940px; z-index: 30; }
#title #from-author { top: 90px; position: relative; }
#title #lower-title { position: absolute; bottom: 44px; width:100%; }
#title #lower-title #film-title { position: relative; margin-bottom: 14px; z-index: 22; }
#title #lower-title #title-glow { position: absolute; top: -53px; z-index: 21; width: 100%; }
#title #lower-title #film-title { position: relative; z-index: 22; }
/* COPY */
#context { width: 100%; height: 100%; position: absolute; top: 0; z-index: 40; }
#context #intro-text { top: 496px; position: absolute; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); width: 100%; }
.intro #context #intro-text { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); visibility: visible; }
#context #choose-side { top: 100px; z-index: 21; position: relative; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; visibility: hidden; width: 100%; position: absolute; }
.choose #context #choose-side { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1;filter: alpha(opacity=100); visibility: visible; top: 175px; }
/* BACKGROUND */
#bg-container { z-index: 10; position: absolute; top: 0; opacity: 0.7; -moz-opacity: 0.7; -webkit-opacity: 0.7; width: 100%; height: 100%; width: 100%; overflow: hidden; }
#bg-container #bg-inner { margin: 0 auto; position: relative; overflow: hidden; background: #000; width: 100%; height: 1080px; }
#bg-inner .cloud { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; width: 900px; height: 100%; position: absolute; z-index: 11; }
#bg-cloud-left { right: -10px; background: url(../gfx/bg-cloud.png) repeat-y center top; }
#bg-cloud-right { left: -10px; background: url(../gfx/bg-cloud-left.png) repeat-y center top; }
#bg-main { background: #000 url(../gfx/bg.jpg) no-repeat center top; position: absolute; top: 0; left: 0; min-height: 100%; width: 100%; margin: 0px auto; }
#bg-container #profile-bgs { position: absolute; top: 1150px; width: 100%; height: 1030px; }
#bg-container #profile-bgs #bg-lower-fade { background: url(../gfx/bg-fade.png) repeat-x center bottom; height: 100px; width: 100%; left: 0; bottom: 0; position: absolute; z-index: 1; }
#profile-bgs .bg { width: 100%; height: 1030px; line-height: 0; margin: 0px auto; position: absolute; background-position: center top !important; background-repeat: no-repeat !important; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
.choose #bg-container { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
.choose #bg-inner { top:-50px;}
.profile #bg-inner { top:-1150px; }
.profile #profile-bgs { top:-42px !important; }
#bg-fade-left { background: url(../gfx/bg-fade-left.png) repeat-y; width: 100px; position: absolute; height: 100%; left: 0; z-index: 30; }
#bg-fade-right { background: url(../gfx/bg-fade-right.png) repeat-y; width: 100px; position: absolute; height: 100%; right: 0; z-index: 30; }
/* PROFILE CONTAINER */
#profile-wrapper { position: absolute; top: 0; width: 100%; }
#profile-container { position: relative; top: 220px; width: 990px; margin: 0 auto; z-index: 41; }
/*
#profile-container { position: absolute; top: 220px; left: 410px; width: 540px !important; }
*/
#profile-container a { text-decoration: none; }
#profile-container #close-profile { text-align: right; margin-bottom: 8px; }
#profile-container #close-profile a, #fancybox-close { padding-right: 16px; background: url(../gfx/icon-close.png) no-repeat right center; text-transform: uppercase; font-size: 15px; line-height: 15px; color: #fff; opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5;filter: alpha(opacity=50); }
#profile-container #close-profile a:hover, #fancybox-close:hover { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
#profile-container #close-profile a.hide { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; }
#profile-container #profile-nav, #profile-container #close-profile { margin-bottom: 12px; visibility: hidden; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;filter: alpha(opacity=0); margin-left: 410px; }
#profile-container #profile-nav { height: 36px; }
#profile-container #profile-nav ul { list-style: none; }
#profile-container #profile-nav ul li { display: inline-block; width: 138px; background: url(../gfx/subnav-bg.png) no-repeat 0 0; font-size: 16px; line-height: 16px; text-transform: uppercase; color: #94999a; margin-left: 6px; cursor: pointer; position: relative; }
#profile-container #profile-nav ul li a { color: #fff; padding: 9px 0; line-height: 15px; display: block; width: 100%; height: 100%; }
#profile-container #profile-nav ul li .nav-bg { background: url(../gfx/subnav-bg.png) no-repeat 0 -34px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
#profile-container #profile-nav ul li.hide { display: none; }
#profile-container #profile-nav ul li:first-child { margin: 0; }
#profile-container #profile-nav ul li:hover,
#profile-container #profile-nav ul li.select { color: #e7f1f4; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
#profile-container #profile-nav ul li:hover .nav-bg,
#profile-container #profile-nav ul li.select .nav-bg { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
#profile-container #profile-content { margin-left: 410px; text-align: left; position: relative; }
#profile-container #profile-content > div { visibility: hidden; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
#profile-content a { color: #cdcdcd; }
#profile-container .text-right { text-align: right; }
#profile-container #bio-content, #profile-container #videos-content, #profile-container #photos-content, #profile-container #downloads-content { position: absolute; top: 46px; left: 0; width: 100%; color: #cdcdcd; }
/* BIO ELEMENTS */
#bio-content { font-size: 15px; line-height: 28px; }
#bio-content > div { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
/*#bio-content #bio-quote, #bio-content #bio-copy { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }*/
#bio-content #bio-quote { font-style: italic; font-weight: bold; width: 380px; margin: 0 auto; }
#bio-content #bio-copy { background: url(../gfx/profile-bio-bg.png) no-repeat center center; width: 376px; height: 220px; padding: 25px 20px; margin: 0 auto; margin-top: 25px; }
/* VIDEO ELEMENTS */
#videos-content { }
#videos-content #video-full { background: url(../gfx/profile-video-bg.png) no-repeat; width: 458px; height: 195px; margin: 0 auto; margin-bottom: 12px; padding: 5px; }
#video-full:hover .mejs-controls { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
#videos-content #video-thumbs { margin-left: 50px; }
#videos-content #video-thumbs li { display: inline-block; width: 140px; margin-left: 30px; height: 150px; background-repeat: no-repeat !important; background-position: center top !important; position: relative; }
#videos-content #video-thumbs li.show { cursor: pointer; }
#videos-content #video-thumbs li a { position: relative; position: absolute; bottom: 0; width: 100%; text-align: center; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
#videos-content #video-thumbs li:hover a { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
#videos-content #video-thumbs li .state { display: block; width: 140px; height: 140px; }
#videos-content #video-thumbs li.show:before { content: ""; position: absolute; width: 140px; height: 140px; background: url(../gfx/video-play-btn.png) no-repeat center center; top: 4px; display: block; }
#videos-content #video-thumbs li.playing:before { background-image: url('../gfx/video-playing.png') !important;}
#videos-content #video-thumbs li:first-child { margin: 0; }
#videos-content > #video-full, #videos-content > div > ul > li { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
.mejs-mediaelement { overflow: hidden; }
/* PHOTOS & DOWNLOADS GRID ELEMENTS */
.grid { margin-left: 60px; }
.grid li { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
.grid li > a > .title { line-height: 15px; margin-top: -14px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; }
.grid li > a:hover > .title { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; }
/* PROFILE GRID ELEMENTS */
#profile-container .grid { line-height: 0; }
#profile-container .grid li { display: inline-block; width: 150px; height: 150px; margin: 0 2px; position: relative; text-align: center; }
#profile-container .grid li .hover { position: absolute; width: 100%; height: 100%; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; background: url(../gfx/thumb-over.png) no-repeat center top; left: 0; }
#profile-container .grid li a { display: block; line-height: 0; }
#profile-container .grid li:hover .hover { opacity: 0.75; -webkit-opacity: 0.75; -moz-opacity: 0.75; }
/* DOWNLOADS */
#media-container { display: none; }
.media_buttons { position: absolute; bottom: 30px; text-align: center; width: 100%; z-index: 1105; }
.media_buttons a { border: 1px solid #212323; padding: 5px 20px; margin-right: 10px; background: rgba(0,0,0,.8); color: #cfcfcf; }
.media_buttons a:hover { color: #fff; }
.media_buttons a:last-child { margin: 0; }
/* CANVAS */
/*#canvas-container { min-width: 990px; width: 100%; margin: 0 auto; border: 1px solid #fff; }*/
#canvas-container { position: absolute; top: 0; overflow: hidden; height: 900px; width: 100%; min-width: 990px; }
#canvas { z-index: 20; position: absolute; top: 0; left: 0; }
/* CHARACTERS */
#characters { z-index: 50; position: relative; width: 990px !important; margin: 0 auto; top: 0; }
#characters > .character { position: absolute; left: 0; top: 0; width: 170px; height: 170px; cursor: pointer; z-index: 51; }
.character.inactive, .character.hide { cursor: default !important; }
.character.inactive .comingsoon { position: relative; width: 100%; height: 100%; opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; z-index: 34; }
.character.inactive:hover .comingsoon { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
.character.inactive .comingsoon img { max-width: 100%; max-height: 100%; }
.intro .character.inactive, .character.hide { cursor: pointer }
.character .profile-group { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.character .profile_img { width: 100%; height: 100%; position: absolute; }
.character .profile_img .inner { overflow: hidden; width: 100%; height: 100%; position: relative; }
.character .profile_img .inner img { max-width: 100%; min-width: 100%; }
.character .profile_img.off img { position: relative; top: -100%; }
.character .profile_img.hover { opacity: 0; -webkit-opacity: 0; -moz-opacity: 0; }
.character .profile_img.hover img { position: relative; top: -200%; }
.character:hover .profile_img.hover { opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; }
#characters > #melanie-wanda { width: 310px; height: 310px; }
#characters > #melanie-wanda #wanda { z-index: 31; }
#characters > #jared, #characters > #ian { width: 284px; height: 284px; }
/*===================
LIGHTBOX
===================*/
#fancybox-outer { background: transparent url(../gfx/lightbox-bg.png) no-repeat !important; padding: 5px; }
#fancybox-content:before { content: ""; background: url(../gfx/fancy-img-overlay.png) no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1103; }
#fancybox-overlay { background: #000 !important; }
#fancybox-left-ico { background: url(../gfx/arrow-nav-left.png) no-repeat; height: 57px; }
#fancybox-right-ico { background: url(../gfx/arrow-nav-right.png) no-repeat; height: 57px; }
#fancybox-left-ico, #fancybox-right-ico { margin-top: -30px; }
#fancybox-left, #fancybox-right { width: 20% !important; }
/*===================
VIDEO PLAYER
===================*/
.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
margin: 0;
padding: 0;
border: none;
outline: none;
}
mejs-container {
position: relative;
background: #000000;
}
.mejs-inner {
position: relative;
width: inherit;
height: inherit;
}
.me-plugin { position: absolute; }
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
width: 100%;
height: 100% !important;
background: #000;
}
.mejs-embed,
.mejs-embed body {
margin: 0;
padding: 0;
overflow: hidden;
}
.mejs-container-fullscreen {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1000;
}
.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
position: absolute;
top: 0;
left: 0;
}
.mejs-poster img { display: block; }
.mejs-overlay-play { cursor: pointer; }
.mejs-container .mejs-controls {
opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;
position: absolute;
width: 100%;
height: 34px;
left: 0;
bottom: 0;
background: url(../gfx/video-control-bg.png) repeat-x center top;
}
mejs-container .mejs-controls.show { /*opacity: 0; -webkit-opacity: 0; -moz-opacity: 0;filter: alpha(opacity=0);*/ }
.mejs-controls > div {
width: 20px; height: 16px;
display: block;
float: left;
margin: 0;
padding: 0;
margin-top: 12px;
}
.mejs-controls .mejs-button button {
display: block;
cursor: pointer;
width: 20px;
height: 16px;
background: transparent url(../gfx/video-control-sprites.png);
}
.mejs-controls .mejs-button button:hover {
background-position-x: -20px;
}
/* VIDEO CONTROL BUTTONS */
.mejs-controls div.mejs-playpause-button {
padding: 0 4px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 20px;
height: 16px;
background-position: 0 0;
}
.mejs-controls .mejs-pause button { background-position: 0 -16px; }
.mejs-controls div.mejs-volume-button {
width: 10px;
}
.mejs-controls .mejs-mute button {display: none;}
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
background-position: -12px 0;
}
.mejs-controls .mejs-unmute button { background-position: -12px -12px; }
.mejs-controls div.mejs-fullscreen-button {
padding-left: 6px;
}
.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
width: 20px;
height: 16px;
background-position: 0 -32px;
}
.mejs-controls .mejs-unfullscreen button { background-position: 0 -48px; }
/* VOLUME SLIDER */
.mejs-controls div.mejs-horizontal-volume-slider {
width: 60px;
position: relative;
padding-top: 6px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 60px;
background: #666;
height: 1px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
left: 0;
top: -1px;
width: 50px;
height: 3px;
margin: 0;
padding: 0;
font-size: 1px;
background: #4ad6fd;
position: relative;
}
/* PROGRESS BAR */
.mejs-controls div.mejs-time-rail {
padding-top: 6px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
cursor: pointer;
width: 100%;
height: 10px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #666;
height: 1px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
background: rgb(0,0,0);
background: rgba(0,0,0, .3);
height: 1px;
}
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; height: 3px; background: #4ad6fd; }
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
cursor: pointer;
width: 16px;
height: 18px;
top: -3px;
/*background: url(../img/handle.png);*/
}
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
/*background: url(../img/tooltip.png);*/
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
position: absolute;
display: block;
left: 0;
top: 4px;
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }
#log { top: 0; left: 0; width: auto; background: #000; font-size: 12px; z-index: 100; position: fixed; display: none; z-index: 1000; }
.android #context { border: 1px solid #000; }
/* iPad ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
header, footer { position: fixed; max-width: 1024px; }
#characters > #melanie-wanda { width: 284px; height: 284px; }
#container { width: 100%; max-width: 1024px; }
#canvas-container { min-width: 768px; }
#profile-container { width: 100%; }
canvas { display: none !important; }
#videos-content #video-thumbs li a { opacity: 1; }
#fancybox-left, #fancybox-right { opacity: 1 !important; }
}
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
#container { min-width: inherit; }
#characters { margin-left: -128px; }
#profile-container #profile-nav, #profile-container #close-profile, #profile-container #profile-content { margin-left: 186px; }
#legal img { width: 100%; height: auto; }
footer #legal-hover:hover #legal { height: 120px; }
footer #legal #legal-links { bottom: 54px; }
}
/* Android ----------- */
@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) {
.trans-fast { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; }
canvas { display: none; }
#videos-content #video-thumbs li a { opacity: 1; }
.grid li > a > .title { opacity: 1; }
#fancybox-left, #fancybox-right { opacity: 1 !important; }
}
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) {
.trans-fast { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; }
canvas { display: none; }
#videos-content #video-thumbs li a { opacity: 1; }
.grid li > a > .title { opacity: 1; }
#fancybox-left, #fancybox-right { opacity: 1 !important; }
}