@font-face { font-family: 'exo2'; src:url('../fonts/exo2.ttf'); } body { font: 90%/160% exo2; color: #666; width: 900px; max-width: 96%; margin: 0 auto; } p { margin: 0 0 20px; } a { color: #69C; text-decoration: none; } a:hover { color: #F60; } h1, h2, h3 { color: #000; line-height: 120%; margin: 30px 0 10px; } h1 { font-size: 1.7em; color: #000; } h2 { font-size: 1.4em; border-top: solid 1px #eee; padding-top: 20px; } h3 { font-size: 1.1em; } /* nav */ .nav { margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; *display:inline; /* ie7 */ } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; } /* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; } @media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all