/* Author: Simon Korzun Author URI: http://www.simonkorzun.com */ /****************************************************************************************************************************************************************/ /**| Golbals |***************************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ .error {color:#a22125; } /****************************************************************************************************************************************************************/ /**| Golbals -> Typography |*************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ /* The font-size percentage is of 16px (0.75 * 16px = 12px) */ body { font-size:80%; line-height:23px; color:#000000; font-family:Arial, sans-serif; } p { margin-bottom:18px; } p.first { } p.last { margin-bottom: 0; } p img { float: left; margin: 0 1.5em .5em 0; padding: 0; } strong { font-weight: bold; } em { font-style: italic; } .opaque { opacity: .75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75);} .alignLeft { float: left; } .alignRight { float: right; } .clearBoth { clear: both; } /* For IE */ @font-face {font-family:'Clarendon'; src:url('../fonts/GenBasR.eot');} @font-face {font-family:'Clarendon BT'; src:url('../fonts/GenBasR.eot');} /* For Other Browsers */ @font-face {font-family:'Clarendon'; src:url('../fonts/Clarendon.ttf') format('truetype'); } @font-face {font-family:'Clarendon BT'; src:url('../fonts/Clarendon BT.ttf') format('truetype'); } @font-face {font-family:'Clarendon BT Bold'; src:url('../fonts/Clarendon BT Bold.ttf') format('truetype'); } /****************************************************************************************************************************************************************/ /**| Golbals -> Headings |***************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ h1,h2,h3,h4,h5,h6 { color:#000000;} h1 { } h2 { } h3 { } h4 { } h5 { } h6 { } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;} /****************************************************************************************************************************************************************/ /**| Golbals -> Links |******************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ a { text-decoration:none; color:#000000; cursor:pointer; } a:focus, a:hover { } a:visited { } a:visted:hover { } /* CSS Outline Supression http://people.opera.com/patrickl/experiments/keyboard/test#outline-suppressed-on-active */ a:hover, a:active, a:focus { outline:none; } /****************************************************************************************************************************************************************/ /**| Page |******************************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ /* Easy Vertical Centering with CSS http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ margin-top and margin-left must be half the height and width respectivly */ #page { width:960px; height:780px; margin-left:auto; margin-right:auto; text-align:left; } /****************************************************************************************************************************************************************/ /**| Splash |******************************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #splash { position:relative; top: -800px; left:-1000000px; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:1.5s; -webkit-animation-name:splash; } @-webkit-keyframes splash { 0% { left:0px; } 50% { left:0px; } 99% { left:0px; } 100% { left:-1000000px;} } #splash .black { width:5000px; height:50000px; position:absolute; top:0px; opacity:1.0; background-color:black; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:1.5s; -webkit-animation-name:logo; } #splash .content { width: 960px; margin-right:auto; margin-left:auto; position: relative; } #splash .logo { display: block; position: relative; top:73px; left:0px; opacity:0.0; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:1.5s; -webkit-animation-name:logo; } @-webkit-keyframes logo { 0% { opacity:1.0; } 50% { opacity:1.0; } 100% { opacity:0.0; } } #splash .animation { width: 1500px; height: 1500px; position: absolute; top:-280px; left:-260px; opacity:0.0; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:1.5s; } #splash .circleOne { background:-webkit-gradient(radial, 390 25%, 10, 390 25%, 100, from(white), to(black)); -webkit-animation-name:circleOne; } #splash .circleTwo { background:-webkit-gradient(radial, 390 25%, 50, 390 25%, 300, from(white), to(black)); -webkit-animation-name:circleTwo; } #splash .circleThree { background:-webkit-gradient(radial, 390 25%, 150, 390 25%, 700, from(white), to(black)); -webkit-animation-name:circleThree; } #splash .circleFour { background:-webkit-gradient(radial, 390 25%, 350, 390 25%, 1300, from(white), to(black)); -webkit-animation-name:circleFour; } @-webkit-keyframes circleOne { 0% { opacity:0.0; } 50% { opacity:1.0; } 100% { opacity:0.0; } } @-webkit-keyframes circleOne { 0% { opacity:0.0; } 50% { opacity:1.0; } 100% { opacity:0.0; } } @-webkit-keyframes circleThree { 0% { opacity:0.0; } 50% { opacity:1.0; } 100% { opacity:0.0; } } @-webkit-keyframes circleFour { 0% { opacity:0.0; } 20% { opacity:0.0; } 70% { opacity:1.0; } 100% { opacity:0.0; } } /****************************************************************************************************************************************************************/ /**| Page -> Header |**********************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #header { margin-top:19px; } #header h2 { font-family:"Clarendon BT"; font-size: 13px; line-height:15px; letter-spacing:6px; text-transform:uppercase; } #header h2.one { right:0px; margin-left:102px;} #header h2.two { left:0px; margin-top:3px; margin-left:280px;} #home #header h2 { visibility: hidden; } #header h1 { margin-top:20px; font-family:"Clarendon"; font-size: 50px; line-height:50px; letter-spacing:-2px; background-repeat:no-repeat; background-position:143px 2px; } #header h1 span.i { visibility: hidden; } #home #header h1 { background-image:url("../images/dots.gif"); } #home #header h1 span.i { visibility:hidden; } /****************************************************************************************************************************************************************/ /**| Page -> Navigation |****************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #navigation { height:450px; width:290px; float:left; margin-top:24px; font-size:15px; font-family:"Clarendon BT Bold"; } #navigation ul { margin-left:0px; padding-left:0px; list-style:none; } #navigation ul li { position:relative; } #navigation ul li a { padding-left:33px; background-repeat:no-repeat; background-position:0 5px; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear;} #navigation ul li a:hover { color:#a22125; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear;} #navigation li#whoNav { margin-top:0px; margin-left:80px; } #navigation li#whatNav { margin-top:2px; margin-left:20px; } #navigation li#whyNav { margin-top:10px; margin-left:120px; } #navigation li#saidNav { margin-top:33px; margin-left:10px; } #navigation li#clientsNav { margin-top:16px; margin-left:87px; } #navigation li#contactNav { margin-top:10px; margin-left:60px; } #who #navigation li#whoNav a, #what #navigation li#whatNav a, #why #navigation li#whyNav a, #said #navigation li#saidNav a, #clients #navigation li#clientsNav a, #contact #navigation li#contactNav a { background-image:url("../images/dots.gif"); } #who #navigation li#whoNav a:hover, #what #navigation li#whatNav a:hover, #why #navigation li#whyNav a:hover, #said #navigation li#saidNav a:hover, #clients #navigation li#clientsNav a:hover, #contact #navigation li#contactNav a:hover { color:#000000; } #home #navigation li#whoNav, #home #navigation li#whatNav, #home #navigation li#whyNav, #home #navigation li#saidNav, #home #navigation li#clientsNav, #home #navigation li#contactNav { -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:ease-out; -webkit-animation-duration:5.0s; } #home #navigation li#whoNav { -webkit-animation-name:whoNav; } #home #navigation li#whatNav { -webkit-animation-name:whatNav; } #home #navigation li#whyNav { -webkit-animation-name:whyNav; } #home #navigation li#saidNav { -webkit-animation-name:saidNav; } #home #navigation li#clientsNav { -webkit-animation-name:clientsNav; } #home #navigation li#contactNav { -webkit-animation-name:contactNav; } @-webkit-keyframes whoNav { 0% { opacity:0.00; left:25px; } 60% { opacity:0.00; left:25px; } 100% { opacity:1.00; left:0px; } } @-webkit-keyframes whatNav { 0% { opacity:0.00; right:25px; } 64% { opacity:0.00; right:25px; } 100% { opacity:1.00; right:0px; } } @-webkit-keyframes whyNav { 0% { opacity:0.00; left:25px; } 68% { opacity:0.00; left:25px; } 100% { opacity:1.00; left:0px; } } @-webkit-keyframes saidNav { 0% { opacity:0.00; top:-25px; right:0px; } 70% { opacity:0.00; top:-25px; right:0px; } 100% { opacity:1.00; top:0px; right:0px; } } @-webkit-keyframes clientsNav { 0% { opacity:0.00; top:-25px; } 74% { opacity:0.00; top:-25px; } 100% { opacity:1.00; top:0px; } } @-webkit-keyframes contactNav { 0% { opacity:0.00; top:-25px; } 78% { opacity:0.00; top:-25px; } 100% { opacity:1.00; top:0px; } } /*********************************************/ @-webkit-keyframes navLeft { 0% { opacity:0.00; left:25px; } 60% { opacity:0.00; left:25px; } 100% { opacity:1.00; left:0px; } } @-webkit-keyframes navRight { 0% { opacity:0.00; right:25px; } 60% { opacity:0.00; right:25px; } 100% { opacity:1.00; right:0px; } } /****************************************************************************************************************************************************************/ /**| Page -> Content |*******************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #content { float:left; width:640px; height:455px; margin-left:20px; padding-right:10px; font-size:13px; line-height:18px; overflow:hidden;} #content a { text-decoration:underline; color:#0000FF; } #content p { width:500px; margin-left:20px; margin-bottom:18px; } #content ul { width:500px; margin-left:20px; } #content ul li { margin-left:-20px; padding-left:18px; list-style:none; background-repeat:no-repeat; background-position:0 4px; background-image:url("../images/dot.png"); } #home #content h2 { position:relative; font-family:"Clarendon BT"; font-size: 13px; line-height:15px; letter-spacing:6px; text-transform:uppercase; } #home #content h2.one { margin-left:02px;} #home #content h2.two { margin-top:3px; margin-left:180px;} #content q { display:block; margin-top:10px; font-style:italic; } #content q:before { content:"\201C"; } #content q:after { content:"\201D";} #content .default { margin-top:60px; } #content .arrows { position:relative; float:left; height:330px; width:31px; } #content .arrows .arrow { cursor:pointer; position:absolute; display:block; margin-left:5px; margin-right:5px; height:15px; width:21px; background-image:url("../images/arrows.png"); background-repeat:no-repeat;} #content .arrows .upArrow { top:0px; background-position:0px -16px; } #content .arrows .downArrow { bottom:0px; background-position:0px 0px; } #content .scroll { position:relative; height:330px; overflow:hidden; } #content .scroll div.fade { height:10px; width:600px; position:absolute; background-repeat:repeat-x; z-index:10; } #content .scroll div.topFade { top:0px; background-image:url(../images/fadeTop.png); } #content .scroll div.bottomFade { top:320px; background-image:url(../images/fadeBottom.png);} #content .scroll div { position:relative; top:0px; } #content .scroll div .page { position:relative; height:310px; } #content .scroll div .page img { position:absolute;} #content .scroll ul li { background-image:none; padding-left:0px; padding-top:4px; list-style:none;} #content .scroll ul li strong { display:block; padding-bottom:13px; } #content .scroll ul li img { height:30px; width:30px; } #said #content p { margin-top:-50px;} #said #content ul { margin-bottom:85px;} #said #content a { font-weight:600; color:black; text-decoration:none; } #said #content a:hover { } #said #content a { color:#000000; text-decoration:none; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear;} #said #content a:hover { color:#a22125; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear;} #said #content li.endorsements, #said #content li.acclaim { position:relative; padding-left:18px; } #said #content li.endorsements { margin-top:-3px; margin-left:20px; } #said #content li.acclaim { margin-top:0px; margin-left:60px; } #said #content .active { background-repeat:no-repeat; background-position:-10px 5px; background-image:url("../images/dots.gif"); } #said #content .active a:hover { color:#000000; } #said #content ul li { background-image:none; list-style: none; } #said #content .scroll { height:330px; } #said #content .arrows { height:330px; } #said #content .scroll div.bottomFade { top:320px; } #clients #content ul li { list-style: none; } #clients #content .scroll { height:330px; } #clients #content .arrows { height:330px; } #clients #content p { width:100%; } #shimOne { width: 110%; } /** Animation **/ #home #content h2.one { -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:ease-out; -webkit-animation-duration:4s; -webkit-animation-name:headOne; } #home #content h2.two { -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:ease-out; -webkit-animation-duration:4s; -webkit-animation-name:headTwo; } @-webkit-keyframes headOne { 0% { opacity:0.00; left:75px; } 35% { opacity:0.00; left:75px; } 100% { opacity:1.00; left:0px; } } @-webkit-keyframes headTwo { 0% { opacity:0.00; right:75px; } 35% { opacity:0.00; right:75px; } 100% { opacity:1.00; right:0px; } } /****************************************************************************************************************************************************************/ /**| Page -> Footer |********************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #footer { position:relative; top:30px; font-size:15px; font-family:"Clarendon BT"; letter-spacing:5px; opacity:.99; } #footer ul { list-style:none; position:relative; overflow:visible;} #footer ul li a { position: relative; z-index: 10; padding-left:33px; background-repeat:no-repeat; background-position:0 5px; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear; transition: color; transition-duration: .5s; transition-timing-function: linear; } #footer ul li:hover a { color:#a22125; -webkit-transition: color; -webkit-transition-duration: .5s; -webkit-transition-timing-function: linear; -moz-transition: color; -moz-transition-duration: .5s; -moz-transition-timing-function: linear; } #home #footer li a { -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:6.0s; -webkit-animation-name:fade; } #footer ul li a.ani { width:300px; opacity:0.0; display:block; position:absolute; z-index:1; -webkit-animation-iteration-count:2; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:7.0s;} #what #footer ul li a.ani { width:300px; opacity:0.0; display:block; position:absolute; z-index:1; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-timing-function:linear; -webkit-animation-duration:7.0s;} #home #footer li#performanceNav a.ani, #what #footer li#performanceNav a.ani, #home #footer li#castingNav a.ani, #what #footer li#castingNav a.ani, #home #footer li#writingNav a.ani, #what #footer li#writingNav a.ani, #home #footer li#otherNav a.ani, #what #footer li#otherNav a.ani { -webkit-animation-name:animateY; } #home #footer li#musicNav a.ani, #what #footer li#musicNav a.ani, #home #footer li#directingNav a.ani, #what #footer li#directingNav a.ani, #home #footer li#soundNav a.ani, #what #footer li#soundNav a.ani { -webkit-animation-name:animateX; } #footer li#performanceNav { position:absolute; top:-25px; left:445px;} #footer li#castingNav { position:absolute; top:15px; left:50px; } #footer li#musicNav { position:absolute; top:25px; left:365px; } #footer li#writingNav { position:absolute; top:50px; left:140px; } #footer li#directingNav { position:absolute; top:7px; left:610px; } #footer li#soundNav { position:absolute; top:65px; left:550px; } #footer li#otherNav { position:absolute; top:90px; left:690px; } #performance #footer li#performanceNav a, #casting #footer li#castingNav a, #music #footer li#musicNav a, #writing #footer li#writingNav a, #directing #footer li#directingNav a, #sound #footer li#soundNav a, #other #footer li#otherNav a { background-image:url("../images/dots.gif"); } #performance #footer li#performanceNav a:hover, #casting #footer li#castingNav a:hover, #music #footer li#musicNav a:hover, #writing #footer li#writingNav a:hover, #directing #footer li#directingNav a:hover, #sound #footer li#soundNav a:hover, #other #footer li#otherNav a:hover { color:#000000; } @-webkit-keyframes fade { 0% { opacity: 0.0; } 80% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes animateY { 0% { opacity: 0.0; -webkit-transform:scaleY(1.0); -moz-transform:scaleY(1.0); transform:scaleY(1.0); } 1% { opacity: 0.9; -webkit-transform:scaleY(1.4); -moz-transform:scaleY(1.4); transform:scaleY(1.4); } 20% { opacity: 0.0; -webkit-transform:scaleY(5.0); -moz-transform:scaleY(5.0); transform:scaleY(5.0); } 100% { opacity: 0.0; -webkit-transform:scaleY(1.0); -moz-transform:scaleY(1.0); transform:scaleY(1.0); } } @-webkit-keyframes animateX { 0% { opacity: 0.0; -webkit-transform:scaleX(1.0); -moz-transform:scaleX(1.0); transform:scaleX(1.0); } 1% { opacity: 0.9; -webkit-transform:scaleX(1.1); -moz-transform:scaleX(1.1); transform:scaleX(1.1); } 20% { opacity: 0.0; -webkit-transform:scaleX(1.6); -moz-transform:scaleX(1.6); transform:scaleX(1.6); } 100% { opacity: 0.0; -webkit-transform:scaleX(1.0); -moz-transform:scaleX(1.0); transform:scaleX(1.0); } } /****************************************************************************************************************************************************************/ /**| Footer -> Copyright |***************************************************************************************************************************************/ /****************************************************************************************************************************************************************/ #footer .copyright { }