@import url(https://reset5.googlecode.com/hg/reset.min.css); html{ } body{ font: bold 14px/1 'Mate SC', serif; text-align:center; text-transform:uppercase; height:100%; width:100%; position:absolute; min-height:150px; min-width:610px; } #landing{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: 0.8s; -webkit-transition: 0.8s; transition: 0.8s; -moz-animation: pulse 2s ease-in-out; -webkit-animation: pulse 2s ease-in-out; z-index:9; background:url(/wp-content/themes/canvas/images/concrete.png) center repeat; -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } #folio{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: 0.8s; -webkit-transition: 0.8s; transition: 0.8s; -moz-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; z-index:1; opacity:0; /* Rotating the page by default */ -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); background:url(/wp-content/themes/canvas/images/concrete.png) center repeat; overflow:auto; } #landing .centralized{ position:absolute; top:50%; left:50%; height:150px; width:610px; margin: -75px 0 0 -305px; color: #000; text-shadow: 1px 1px 1px #fff; letter-spacing:3px; zoom: 1; filter: alpha(opacity=50); opacity: 0.5;} #landing .centralized h1{ font: bold 100px/1 helvetica neue, helvetica, arial, sans-serif; margin-top:-3px; letter-spacing:-1px; /*text-shadow: 2px 1px 2px #666;*/ cursor:pointer; -webkit-mask-image: url(/wp-content/themes/canvas/images/knockout.png); -o-mask-image: url(/wp-content/themes/canvas/images/knockout.png); -moz-mask-image: url(/wp-content/themes/canvas/images/knockout.png); -ms-mask-image: url(/wp-content/themes/canvas/images/knockout.png); mask-image: url(/wp-content/themes/canvas/images/knockout.png); } #landing .centralized h1{ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px){ } #folio .centralized{ background:url(/wp-content/uploads/2012/folio_dvi.png) center no-repeat; height:100%; width:100%; position:absolute; } /* Firefox Keyframe Animation */ @-moz-keyframes pulse{ 0%{ box-shadow:0 0 1px #008aff;} 50%{ box-shadow:0 0 8px #008aff;} 100%{ box-shadow:0 0 1px #008aff;} } /* Webkit keyframe animation */ @-webkit-keyframes pulse{ 0%{ box-shadow:0 0 1px #008aff;} 50%{ box-shadow:0 0 10px #008aff;} 100%{ box-shadow:0 0 1px #008aff;} } body.flipped #landing{ opacity:0; /** * Rotating the landing page when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); } body.flipped #folio{ opacity:1; /* Rotating the folio div into view */ -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } .bwWrapper { position:relative; display:block; border-top: 1px solid #CCC; border-left: 2px solid #ccc; } .blackFrame{position:relative; float: left;margin: 30px;border: 10px outset #222;box-shadow: 3px 1px 5px black;} .whiteMatte{padding: 20px 20px 40px 20px;background:white;box-shadow:inset 3px 1px 5px #777;float:left;} #frameContainer{width:880px;margin:0 auto;} .pieceTitle{ position: absolute; margin-top: 157px;text-align: center; width: 210px; font-size:0.2em;z-index:1;top:0;left:0;width:212px; }
Design & Build
Los Angeles, California