/* Screen CSS Copyright (c) 2013 by SPOILED MILK http://www.spoiledmilk.com */ /* NORMALIZE ............................................ */ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body { height: 100%; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, div, dl, dt, dd, pre, form, fieldset, input, table, th, td, embed, object { margin: 0; padding: 0; } :focus { outline: 0 } :link, :visited { text-decoration: none } /* clearfix */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* HTML ELEMENTS....................................... */ body { background: #fff; color: #666; font: 13px/1.4em 'Open Sans', sans-serif; text-align: left; } /* heading */ h1, h2, h3, h4, h5, h6 { line-height: 1em; margin: 1em 0; } h1 { font-size: 2.2em; } h2 { font-size: 2em; } h3 { font-size: 1.8em; } h4 { font-size: 2.2em; text-align: center; text-shadow: 5px 5px 5px #FF0000; } h5 { font-size: 1em; text-align: center; } /* LAYOUT ............................................. */ /* Header .............. */ header{ background-color: #ccc; height: 50px; width: 100%; font-size: 30px; text-align: center; } /* Navigation .......... */ nav { background-color: #999; width: 100%; } nav ul { list-style: none; margin: 0 auto; max-width: 940px; overflow: hidden; padding: 0; } nav ul li { float: left; font-size: 15px; height: 40px; line-height: 40px; margin: 0; padding: 0 20px; width: auto; } nav ul li a:link, nav ul li a:visited { color: #fff; transition: color 0.15s linear; } nav ul li a:hover, nav ul li a:active { color: #000; } nav ul li.active a:link, nav ul li.active a:visited, nav ul li.active a:hover, nav ul li.active a:active { color: #000 !important; } nav ul li.center { float: center; } nav ul li.right { float: right; } box { width: 300px; height: 400px; background-color: none; box-shadow: 10px 10px 10px #888888; } /* Main ................ */ main { margin: 40px auto; max-width: 920px; } /* Animation ................ */ #animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:15px; padding:10px; animation:animated_div 5s 1; -moz-animation:animated_div 5s 1; -webkit-animation:animated_div 5s 1; -o-animation:animated_div 5s 1; border-radius:5px; -webkit-border-radius:5px; } @keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } @-webkit-keyframes animated_div { 0% {-webkit-transform: rotate(0deg);left:0px;} 25% {-webkit-transform: rotate(20deg);left:0px;} 50% {-webkit-transform: rotate(0deg);left:500px;} 55% {-webkit-transform: rotate(0deg);left:500px;} 70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-webkit-transform: rotate(-360deg);left:0px;} } @-moz-keyframes animated_div { 0% {-moz-transform: rotate(0deg);left:0px;} 25% {-moz-transform: rotate(20deg);left:0px;} 50% {-moz-transform: rotate(0deg);left:500px;} 55% {-moz-transform: rotate(0deg);left:500px;} 70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {-moz-transform: rotate(-360deg);left:0px;} } @-o-keyframes animated_div { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(20deg);left:0px;} 50% {transform: rotate(0deg);left:500px;} 55% {transform: rotate(0deg);left:500px;} 70% {transform: rotate(0deg);left:500px;background:#1ec7e6;} 100% {transform: rotate(-360deg);left:0px;} } /* Header .............. */ table{ border-spacing: 0; width: 670px; } .bordered{ border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; } .bordered tr:hover{ background: #ff00ff; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .bordered td{ background-color: dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); background-image: -webkit-linear-gradient(top, #ebf3fc #dce9f9); background-image: -moz-linear-gradient(top, #ebf3fc #dce9f9); background-image: -ms-linear-gradient(top, #ebf3fc #dce9f9); background-image: -o-linear-gradient(top, #ebf3fc #dce9f9); background-image: linear-gradient(top, #ebf3fc #dce9f9); -webkit-box-shadow: 0 1px 0 rgba(255.255.255.8) inset; -moz-box-shadow: 0 1px 0 rgba(255.255.255.8) inset; box-shadow: 0 1px 0 rgba(255.255.255.8) inset; border-top: none; text-shadow: 0 1px 0 rgba(255.255.255.5); } /* aside */ aside { float: left; max-width: 250px;} .inside { background-color: #f4f4f4; padding: 10px; } #sidebar.sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; } /* main content */ .main_content { float: right; max-width: 670px; } /* Footer .............. */ footer { background-color: #999; height: 50px; width: 100%; div.img { margin: 5px; padding: 5px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 5px; border: 1px solid #ffffff; } div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 5px; } }