@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
Webdesign
Los Angeles, California
