html, body{    
    background: #181b20;
    font-family: "UniversLight", "ParalucentExtraLight";
    font-size: 12px;
    color: #575f6a;
    font-weight:normal;
    background: #181b20 url(media/image/bg.png) top left no-repeat;
    letter-spacing: 0;
    height: 101%;
}
*{ outline: none; }
body.transparent{ opacity:0; }
h1,h2,h3,h4,h5,h6,p{
    font-weight: normal;
}
img{margin:0; padding:0; display: block;}
a:link,
a:hover,
a, .color{
    color: #65a2be;
    text-decoration: none;
}
#header img{ display: inline; }
.center{ text-align: center; }
.clear{ clear:both; }
.wrapper{
    width: 960px;
    margin: 0 auto;
}
#header{
    border-bottom: solid 1px #4d535c;
    padding: 35px 0 17px 0;
    margin-bottom: 10px;
}
ul.navbar{
    color: #4d535c;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 14px;
    display: inline-block;
    vertical-align: top;
    margin-right: 40px;
    float:left;
}
ul.navbar li{
    margin: 2px 0;
}
ul.navbar li a{
    color: #4d535c;
    letter-spacing: 0.07em;
}
ul.navbar li.active a, ul.navbar li:hover a{
    color: #65a2be;
}
#footer{
    letter-spacing: 0.08em;
    padding: 27px 0;
    color: #4d535c;
    margin-top: 10px;
    font-size: 12px;
}
#footer.no-border{
    border-top: none;
    margin-top: 0;
}
#footer.border{
    border-top: solid 1px #4d535c;
}
.color-white{ color: white; }
.bold{ font-weight: bold; }
.work .color-white{ color: #aeb2b5; }
.home .hoverable{
    width: 960px;
}
.hoverable img{
    float: left;
}
.hoverable .content{
    font-size: 22px;
    width: 685px;
    height: 210px;
    background: rgba(10,11,13,0.7);
    margin-top: -260px;
    margin-left: 225px;
    padding: 25px;
    float:left;
    line-height: 24px;
}
.home.t1 .hoverable .content,
.home.t2 .hoverable .content{
    height: 90px;
    margin-top: -140px;
    display: none;
}
.hoverable .content.play{
    height: 137px;
    margin-top: -482px;
    display: none;
    padding-top: 60px;
}
.home.t1 .hoverable .content.play,
.home.t2 .hoverable .content.play{
    height: 178px;
    margin-top: -403px;
}
.home.t3 .hoverable .content{
    height: 130px;
    margin-top: -180px;
}
.home.t3 .hoverable .content.play{
    height: 130px;
    margin-top: -180px;
    width: 65px;
    margin-left: 0;
    padding: 25px 80px;
    display: block;
}
.home.t3 .hoverable .content.play img{
    display: none;
}
.home.t3 .hoverable:hover .content.play img{
    display: block;
}
.home.t1 .hoverable .content.play img,
.home.t2 .hoverable .content.play img{
    margin-top: 65px;
}
.home .hoverable h1{
    color: #4d535c;
    font-size: 22px;
}
.home .hoverable h2{
    color: #65a2be;
    font-size: 22px;
}
.home .hoverable h2.color-white{
    color: white;
}
.home .hoverable p{
    color: white;
    margin-top: 15px;
    line-height: 1.3em;
}
.hoverable .content .tags{
    color: #65a2be;
    font-family: "Helvetica Neue";
    letter-spacing: 0.08em;
    font-size: 11px;
    margin-top: 10px;
    display: none;
}
.home.t3 .hoverable .content .tags{
    display: block;
}
.home ul#works{
    border-top: solid 1px #4d535c;
    margin-top: 15px;
}
ul#works li{
    border-top: solid 1px #4d535c;
    padding: 15px 0;
    height: 163px;
    overflow: hidden;
}
ul#works li .content{
    display: block;
    margin: 0 -8px 0 -8px;
    padding: 0 8px 3px 8px;
}
ul#works li:hover p.color-white{
    color: #65a2be;
}
ul#works li.last-row, .last-row{
    border-bottom: solid 1px #4d535c;
}
.home ul#works li.no-top-border{
    border-top: none;
}
.works ul#works li.no-top-border{
    border-top: none;
}
/*
.expandable{
    height: 585px;
    overflow: hidden;
}
*/
ul#works li img{
    margin-bottom: 5px;
    float:left;
    display: block
}
ul#works li p{
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.07em;
    margin: 2px 0;
}
ul#works li a.play{
    float:left;
    background: rgba(10,11,13,0.7);
    width: 198px;
    height: 102px;
    margin-top: -133px;
    padding: 13px 15px;
    display: none;
}
ul#works li a.play img{
    margin: 0;
    float: none;
}
ul#works li.together{
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 8px;
    padding-right: 8px;
}
ul#works li.together.alpha{
    padding-left: 0;
}
ul#works li.talpha{
    padding-right: 8px;
    margin-right: 0;
}
ul#works li.together.omega{
    padding-right: 0;
}
#video{
    margin-top: -69px;
    z-index:-1;
}
#video-holder{
    min-height: 405px;
}
#video iframe{
    float: left;
    width: 716px;
    height: 403px;
}
#video embed{
    float: left;
    width: 716px;
    height: 403px;
    margin-top: 20px;
}
#video img{
    display: none;
    margin-top: 20px;
}
a#close-btn, .info-close{
    display: block;
    float:right;
    cursor:pointer;
    margin-top: 30px;
    width: 20px;
    height: 20px;
    background: url(images/close.png) no-repeat 0 0;
}
.info-close{
    margin-top: -10px;
    margin-left: 190px;
    position: absolute;
}
a#close-btn:hover, .info-close:hover {
    background: url(images/close.png) no-repeat -21px 0;
}
#info-block, #share-block{
    height: 353px;
    float: left;
    /* margin-top: -418px; */
    margin-left: 243px;
    padding: 25px;
    width: 195px;
    background: rgba(10,11,13,0.7);
    overflow: hidden;
    display: none;
    z-index: 3;
    position:absolute;
}
#info-block.iphone, #share-block.iphone{
    /* margin-top: -420px; */
    margin-top: 10px;
    padding-bottom: 26px;
    margin-left: 244px;
    height: 352px;
}
#info-block.ipad, #share-block.ipad{
}
#video #theimage.ipad{
    float:left;
}
#share-block label, #share-block input{
    display: block;
    width: 100%;
    margin: 5px 0;
}
#share-block input[type="text"]{
    font-family: "Helvetica Neue";
    font-size: 11px;
}
#share-block input[type="submit"]{
    background: transparent;
    font-size: 22px;
    line-height: 24px;
    border: none;
    text-align: left;
    margin-top: 18px;
    cursor: pointer;
}
#info-block p,
#share-block label{
    margin-top: 11px;
    line-height: 15px;
}
#share-block label.first{
    margin-top: 0;
}
#info-block p.tags{
    margin-top: 0;
}
.project-center{
    width: 716px;
    float: right;
    margin-bottom: 15px;
}
.project-center h1, .project-center h2, .project h2, .project h1{
    font-size: 22px;
    line-height: 24px;
}
.project-center iframe{
    margin-top: 19px;
}
.project-center h1{ color: white; }

.project #menu{
    width: 220px;
}
.project #menu li{
    margin-bottom: 0;
}
.project #menu .last{
    margin-right: 0;
}
.grid_1{
    width: 228px !important;
}
#letterspacing{
    position: absolute;
    border: solid 1px white;
    padding: 5px;
    top: 0;
    right: 0;
    color: white;
}
#share{
    position: absolute;
    margin-left: 200px;
    margin-top: 22px;
    z-index: 2;
}
#rollovers{
    position: absolute;
    margin-top: 24px;
    right: 50%;
    margin-right: 190px;
}
#share span#info, #share span#heart, #share span#download{
    background: url(images/share-icons.png) no-repeat 0 0;
    width: 20px;
    height: 22px;
    display: block;
    margin: 5px 0;
}
#share span#download{
    background: url(images/share-icons.png) no-repeat 0 -56px;
}
#share span#heart{
    background: url(images/share-icons.png) no-repeat 0 -27px;
}
#share span:hover{
    cursor: pointer;
}
#rollovers p{
    background: white url(images/share-rollover-triangle.jpg) no-repeat right center;
    color: black;
    float: left;
    margin-right: 100px;
    padding: 7px 15px 8px 10px;
    font-size: 9px;
    font-family: "Helvetica Neue";
    display: none;
    font-weight: bold;
    letter-spacing: -0.05em;
    overflow: hidden;
}
#rollovers p#roll-heart{
    margin-top: 27px;
}
#rollovers p#roll-download{
    margin-top: 54px;
}
.about{ margin: 20px 0; }
.about p {
    font-size: 14px;
    line-height: 15px;
    color: #4d535c;
}
.about .left, .about .right{
    display: inline;
    float: left;
    position: relative;
    width: 440px;
    margin-right: 40px;
}
.about .right{
    margin-right: 0;
    text-align: right;
    width: 480px;
}
.contact > div{
    width: 460px;
    float: left;
    display: inline;
    position: relative;
    font-size: 14px;
    margin-right: 20px;
}
.contact > div.even{
    margin-left: 20px;
    margin-right: 0;
}
.contact > div h3{
    margin: 25px 0 20px 0;
}
.contact > div.representation{
    width: 225px;
    margin-right: 20px;
    min-height: 190px;
    overflow: hidden;
}
.contact > div.representation.last{
    margin-right: 0; 
}
#loadmore{
    background: url(images/load-more.png) no-repeat 0 0;
    width: 89px;
    height: 24px;
    display: block;
    position: absolute;
    cursor: pointer;
    margin-top: 60px;
    right: 50%;
    margin-right: -480px;
    margin-top: 20px;
}
#loadmore:hover {
    background: url(images/load-more.png) no-repeat 0 -24px;
}
#backtotop{
    font-family: "Helvetica Neue";
    font-size: 10px;
    color: white;
    line-height: 13px;
    float:right;
    letter-spacing: -0.05em;
    margin-top: 25px;
    display: none;
    cursor: pointer;
    position: absolute;
    margin-left: 427px;
    left: 50%;
}
#gallery{
    height: 417px; 
    margin-bottom: 25px;
}
#gallery img{
    position: absolute;
    display: none;
}
#gallery img.active{
    display: inline;
}
#controller{
    margin-left: 45px;
    margin-right: 45px;
    width: 870px;
    height: 67px;
}
#controller .viewport{
    height: 67px;
    width: 870px;
    overflow: hidden;
}
#controller .viewport .container{
    width: 9999px;
}
#controller span{
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
}
#controller span{
    width: 82px;
}
#controller span.active,
#controller span:hover {
    border-bottom: #65a2be 4px solid;
}
#controller img{
    display: inline-block;
}
#buttons{
    float: left;
    margin-top: -45px;
    z-index: 0;
}
#buttons span#btn-prev, #buttons span#btn-next{
    background: url(images/gallery-arrows.png) no-repeat 0 0;
    width: 15px;
    Height: 19px;
    display: block;
    cursor: pointer;
    margin-left: 15px;
    display: inline-block;
}
#buttons span#btn-next{
    background: url(images/gallery-arrows.png) no-repeat -15px 0;
    margin-left: 900px;
}
.lionsden #gallery{
    margin-top: 20px;
}
.lionsden #gallery img{
    position: absolute;
    float:left;
    z-index: 0;
}
.lionsden .image-block{
    padding: 45px 20px 20px 20px;
    width: 415px;
    height: 352px; 
    font-size: 14px;
    line-height: 14px;
    background: rgba(10,11,13,0.7);
    display: none;
    position: absolute;
    margin-left: 505px;
    z-index:10;
}
.lionsden #gallery .holder{
    height: 417px;
    position: absolute;
}
.lionsden #gallery .holder:hover .image-block{
    display: block;
}

#top-controls{
    background: rgba(77,83,92,0.5);
    padding: 10px 15px; 
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 370px; 
}
#top-controls span{
    display: block;
    height: 23px;
    width: 25px;
    cursor: pointer;
    display: inline-block;
}
#top-controls span#search{
    background: url(images/top-menu-icons.png) no-repeat 0 0;
}
#top-controls span#search:hover {
    background: url(images/top-menu-icons.png) no-repeat 0 -23px;
}
#top-controls span#login{
    background: url(images/top-menu-icons.png) no-repeat -34px 0;
}
#top-controls span#login:hover {
    background: url(images/top-menu-icons.png) no-repeat -34px -23px;
}
#top-controls span#facebook{
    background: url(images/top-menu-icons.png) no-repeat -68px 0;
}
#top-controls span#facebook:hover {
    background: url(images/top-menu-icons.png) no-repeat -68px -23px;
}
#loginform, #searchform{
    background: rgba(77,83,92,0.8);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 86px;
    padding: 12px 10px 12px 15px;
    display: none;
}
#searchform{
    margin-left: 239px;
}
#loginform input, #loginform label, #searchform input, #searchform label{
    background: transparent;
    border:none;
    font-family: "Helvetica Neue";
    font-size: 11px;
    margin-right: 5px;
    color: white;
}
#loginform input[type="submit"]{
    color: white;
    background: url(images/submit-arrow.png) right center no-repeat;
    padding-right: 10px;
    cursor: pointer;
}
#loginform input[type="submit"]:hover{
    color: #181b20;
    background: url(images/arrow_rollover.png) right center no-repeat;
}
#loginform input[type="text"], #searchform input[type="text"]{
    width: 101px;
    padding: 5px 0;
}
#content{ min-height: 600px; }
img.map{
    margin-top: 10px;
}
img#loading{
    position: absolute;
    left: 50%;
    display: none;
    margin-top: 50px;
}
#loyal a{
    color: #575f6a;
}