CSS3 tyylit

css3-tyylit.css

* { margin: 0; padding: 0; font-size: 100%; }
body { 
	font-family: "Helvetica Neue", Arial, sans-serif; 
	line-height: 1.4;
	padding: 1.5em;
}

/* Vanhemmat selaimet eivät ymmärrä uusia HTML5-elementtejä,
   joten ne pitää muistaa erikseen määritellä block- tai inline-tyyppisiksi.
*/
section, article, nav, figure, figcaption, header, footer {
        display: block;
}

h1, p, nav { margin-bottom: 1.5em; }

nav {
	background: #eee;
}
nav ul {
	list-style: none;
}

nav a {
	color: black;
	display: block;
	line-height: 2.5em;
	text-decoration: none;
	padding: 0.5em
}
nav a:hover {
	background: red;
	text-shadow: 2px 2px 3px white;
	
	/* Tyylikäs häivytys navigointilinkeille */
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

article {
	border-top: 1px dashed #999;
	padding-top: 1.5em;
}

figure {
	margin: 1.5em;
	padding: 0.5em;
	
	background: #eee;
}

time, figcaption {
	font-size: 0.8em;
}

time {
	font-family: Georgia, serif;
	font-style: italic;
}

/* Alla olevat tyylit näkyvät vain yli 700px leveillä ruuduilla */
@media all and (min-width: 700px) {
	/* Listataan navigointilinkit vierekkäin */
	nav li,
	nav a
	 {
		display: inline-block;
	}		

	
	/* Nostetaan sivupalkki sisällön oikealle puolelle */
	body > section {
		width: 70%;
		float: left;
		margin-right: 2%;
	}
	
	body > aside {
		width: 28%;
		float: right;
	}
	
	body > footer {
		clear: both;
	}
}