body {margin: 0; font: normal 0.8em Verdana; background: #FFF url(i/body-back.gif) repeat-x top; text-align: center}

#container {width: 950px; text-align: left; margin: 0 auto; border-left: 1px solid #333; border-right: 1px solid #333; background:  url(i/content-back.gif) repeat-y left}

#top-bar {height: 202px; background: #000 url(i/top.jpg) no-repeat left top;}
#top-bar h1 {display: none}
#main-navi {clear: both; background: #000; padding: 0 0 2px 0}
#main-navi ul {height: 24px; margin: 0; padding: 0}
#main-navi li {float: left; display: inline; padding: 3px 0 0 0; margin: 0}
#main-navi li a {display: block; padding: 2px 13px; color: #FFF; text-decoration: none; background:  url(i/arrow-white.gif) no-repeat left}
#main-navi li #current-area, #sub-navi li #current-area {font-weight: bold;}
#main-navi li a:hover {color: #DDD; background-image:  url(i/arrow-lightgrey.gif)}

#index #navi-etusivu, #perusta #navi-perusta, #harjoitukset #navi-harjoitukset, #portaat #navi-portaat, #credits #navi-credits{font-weight: bold}

#sub-navi {float: left; width: 205px; margin: 10px 0; display: inline;}
#sub-navi ul {margin: 5px 0; padding: 0; list-style-type: none; display: inline}
#sub-navi li {display: inline}
#sub-navi ul a {padding: 3px; margin: 0 10px; display: block; color: #333; text-decoration: none}
#sub-navi ul a:hover {text-decoration: underline;}
#sub-navi ul ul {margin: 0 0 5px 0; padding: 0 0 5px 0;}
#sub-navi ul ul a.level2 {font-size: 0.85em; padding: 3px 3px 3px 10px; background:  url(i/arrow-darkgrey.gif) no-repeat 3px 6px;}
#sub-navi ul ul a.level2:hover {text-decoration: underline}
#current-sub {font-weight: bold;}

.level3 {margin: 5px 10px 5px 25px; padding: 0 0 0 15px;}
.level3 a {color: #333; margin: 3px 0; text-decoration: none}
.level3 a:hover {text-decoration: underline}

#main-content {float: left; width: 425px; margin: 10px 0; display: inline;}
.ranskalaiset {margin: 10px 20px; padding: 0 20px}
.ranskalaiset li {margin: 0}
.kehys {background: #EBEBEB; margin: 0 10px; padding: 10px 0}
#sec-content .kehys {font-size: .9em; line-height: 1.5em; background: none; margin: 0}

#sec-content {float: left; width: 316px; margin: 10px 0; display: inline;}
#footer {clear: both; background: #000; color: #FFF; padding: 0 10px 1px 10px; font-size: .8em; border-bottom: 1px solid #333; border-top: 4px solid #FF0000}
#footer p {margin: 5px 0}

.c-b {clear:both}
h1, h2, h3, p {margin: 10px 20px;}

h1 {font-size: 1.8em}
h2 {font-size: 1.3em}
h3 {font-size: 1em}
#sub-navi p {font-size: .8em}
#main-content p, #main-content li {line-height: 1.4em; color: #333}

h1 {color: #FF0000}

#sec-content h2 img {width: 270px}

.next {text-align: right;}
.next a {color: #333}

.steps ul {padding: 0; margin: 0 20px}
.steps li {border: 1px solid #330000; list-style-type: none; margin: 4px 0;}
.steps li a {display: block; text-decoration: none; background: #FF0000 url(i/arrow-lightgrey.gif) no-repeat 3px; color: #DDD; font-weight: normal; padding: 3px 3px 3px 13px}
.steps li a strong {letter-spacing: 2px}
.steps li a:hover {background-color: #333; color: #FFF; background-image:  url(i/arrow-white.gif)}

.tavoitteet {padding: 0 20px; list-style: none}
.tavoitteet li a {display: block; background: url(i/arrow-darkgrey.gif) no-repeat 0 4px; padding: 0 0 0 12px}

.block {display: block; width: 100%;}
.box {position: absolute; width: 400px; height: 200px; background: #EDEDED; border: 1px solid #333366; cursor: pointer}