body{background:#338299;margin:0;padding:0;}
::selection{background:rgba(0,0,0,0.3);}
.clear{clear:both;}
.shaded{box-shadow:0px 2px 4px rgba(0,0,0,0.3);}
header#pageHead{background:#ebebeb;border-bottom:4px solid #d6d6d6;height:96px;margin-top:50px;}
header#pageHead div{background:#338299;display:block;height:100px;margin:0 auto;position:relative;width:300px;overflow:hidden;}
#logo{background:#ebebeb url('i/logo.png') center center no-repeat;cursor:pointer;display:block;height:96px;position:absolute;width:100%;-webkit-transition:all 100ms ease-in-out;-moz-transition:all 100ms ease-in-out;-ms-transition:all 100ms ease-in-out;z-index:999;border-bottom:4px solid #d6d6d6;}
#logo:hover{background-color:#e1e1e1;box-shadow:inset -2px 0 5px -2px #a9a9a9, inset 2px 0 5px -2px #a9a9a9;margin-top:4px;}
nav{background:#ebebeb;border-bottom:4px solid #d6d6d6;height:46px;margin-top:25px;}
nav ul{background:#338299;height:50px;list-style-type:none;margin:0 auto;padding:0;width:981px;overflow:hidden;}
nav li{float:left;}
nav li a{background:#ebebeb;border-bottom:4px solid #d6d6d6;color:#444;display:block;font-family:'PTSansNarrowBold',sans-serif;font-size:1.35em;font-weight:700;height:46px;line-height:50px;margin:0;text-align:center;text-decoration:none;text-shadow:1px 1px 0 #fff;width:195px;-webkit-transition:all 100ms ease-in-out;-moz-transition:all 100ms ease-in-out;-ms-transition:all 100ms ease-in-out;}
nav li.divider{background:#d6d6d6;height:50px;width:1px;}
nav li a.active{background:#e1e1e1;box-shadow:inset -2px 0 5px -2px #a9a9a9, inset 2px 0 5px -2px #a9a9a9;height:46px;line-height:50px;margin-top:4px;}
#content{color:#fff;letter-spacing:0.12em;margin:25px auto 0;width:981px;word-spacing:0.2em;}
#content a{border-bottom:1px dashed #fff;color:#fff;text-decoration:none;}
#content a:hover{border-bottom:1px dashed #e1e1e1;color:#e1e1e1;}
hr{background:transparent;border:0;border-bottom:1px dashed rgba(0,0,0,0.2);height:0;margin:25px auto;width:500px;}
header h1{color:#fff;font-family:'Alike',serif;font-size:2.2em;margin:0 0 10px;padding:0;text-shadow:1px 1px 0 rgba(0,0,0,0.3);}
p,aside{font-family:'Alike',serif;font-size:1.2em;margin:5px 0 0;text-shadow:1px 1px 0 rgba(0,0,0,0.3);}
aside{margin-top:330px;text-align:center;}
section.column{float:left;padding:10px;width:307px;font-size:0.85em;position:relative;}
section.column div.cell{position:absolute;background:#fff;border:1px solid #d6d6d6;border-radius:3px;height:285px;padding:10px;width:285px;-webkit-transform:skew(10deg, -5deg) scale(0.85);-moz-transform:skewX(10deg) skewY(-5deg) scale(0.85);-ms-transform:skew(10deg, -5deg) scale(0.85);box-shadow:-2px 2px 4px rgba(0,0,0,0.3);-webkit-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;-ms-transition:all 200ms ease-in-out;}
section.column div.cell.layerTwo{margin-left:-10px;margin-top:10px;}
section.column div.cell.layerOne{margin-left:-5px;margin-top:5px;}
section.column:hover > div.cell{-webkit-transform:scale(1.0);-moz-transform:scale(1.0);-ms-transform:scale(1.0);margin:0;}
section.column:hover > div.cell.layerTwo{-webkit-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-ms-transform:rotate(-6deg);}
section.column:hover > div.cell.layerOne{-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);}
div.cell#html5{background:#fff url('i/home-sprite.png') left top no-repeat;}
div.cell#colors{background:#fff url('i/home-sprite.png') left bottom no-repeat;}
div.cell#compat{background:#fff url('i/home-sprite.png') right top no-repeat;}
footer{background:#ebebeb;border-bottom:4px solid #d6d6d6;margin:25px 0 50px;}
#footContent{margin:0 auto;min-height:136px;padding:10px 0;width:981px;font-family:'PTSansNarrowBold',serif;color:#444;text-shadow:1px 1px 0px #fff;font-size:1.2em;}
#footLogo{height:74px;padding:10px 0;}
#footLogo a{background:url('i/logos.png') left bottom no-repeat;display:block;height:74px;margin:0 auto;width:270px;}
#footLogo a:hover{background-position:right bottom;}

@media (min-device-width: 320px) and (max-device-width: 1024px), screen and (max-width: 1023px) {
    header#pageHead{margin-top:20px;height:96px;border-bottom:none;}
    header#pageHead div{height:96px;width:100%;}
    #logo{height:96px;position:absolute;width:100%;border-bottom:none;}
    #logo:hover{margin-top:0;}
    nav{border-bottom:none;height:255px;margin-top:0;}
    nav ul{background:#ebebeb;height:255px;list-style-type:none;margin:0 auto;display:block;width:100%;}
    nav li{float:none;display:block;border-top:1px solid #d6d6d6;}
    nav li a{border-bottom:none;width:100%;height:50px;line-height:55px;}
    nav li.divider{display:none;}
    nav li a.active{margin-top:0;height:50px;line-height:55px;}
    #content{margin-top:0;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px;}
    hr{width:90%;}
    header h1{font-size:1.75em;}
    section.column{float:none;display:block;margin:0 auto;padding:10px;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #d6d6d6;border-radius:3px;background:#fff;box-shadow:-2px 2px 4px rgba(0,0,0,0.3);color:#000;margin-bottom:10px;overflow:hidden;}
    section.column div.cell{position:absolute;float:none;margin:-25px 0 0 50%;left:-150px;border:none;border-radius:0;box-shadow:none;height:285px;padding:10px;width:280px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);}
    aside{margin-top:260px;width:100%;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    section.column div.cell.layerTwo,section.column div.cell.layerOne{display:none;}
    section.column:hover > div.cell{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);margin:-25px 0 0 50%;}
    footer{margin-bottom:20px;}
    #footContent{min-height:136px;padding:10px;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
}