/*
Theme Name: SFI - Ekonomi
Theme URI: http://www.sfiekonomi.se
Description: SFI - Ekonomi
Version: 1.0
Author: Oakwood Creative
Author URI: http://www.oakwood.se
*/

@import url("css/reset.css");
@import url("css/basic.css");
@import url("css/type.css");

p.more {
margin: 0;
background: url(img/bullets.gif) no-repeat 0 -497px;
padding: 0 0 0 25px;
}

/* Layout */

div.content div.main {
float: left;
width: 530px;
}

div.content div.side {
float: right;
width: 325px;
}

/* Test box */

div.test {
background: #fadb32 url(img/box-yellow.gif) no-repeat;
width: 269px;
height: 155px;
padding: 20px 25px;
margin: 0 0 60px;
}

div.test p,
div.test h3 {
font-size: 2em;
line-height: 1.1;
}

div.test p.more {
font-size: 1.4em;
}

div.test a {
color: #333 !important;
}

div.box {
padding: 20px 30px 20px;
background: #789471;
color: #fff;
margin: 0 0 20px;
}

div.box h3 {
font-size: 2em;
margin: 0 0 15px;
}

div.box h4 {
font-size: 1.8em;
font-weight: normal;
}

div.inverted {
padding: 20px 26px 20px;
border: 2px solid #789471;
background: #fff !important;
color: #333;
}

/* Quiz */

form.quiz ol {
list-style: decimal;
margin: 0 0 50px 30px;
font-size: 1.8em;
font-weight: bold;
color: #fadb32;
}

form.quiz ol li {
margin: 0 0 20px;
vertical-align: top;
}

form.quiz ol li fieldset {
display: inline;
color: #333;
padding: 0;
margin: 0;
vertical-align: top;
}

form.quiz ol li fieldset legend {
line-height: 1.5;
padding: 0;
}

form.quiz ol li fieldset label {
font-weight: normal;
}

form.answered ol,
form.answered ol legend,
form.answered ol li label.answer  {
color: #f00;
}

form.answered ol li input  {
display: none;
}

form.answered ol li.correct,
form.answered ol li.correct legend,
form.answered ol li.correct label.answer {
color: #28ca2c;
}

form.quiz ol h3 {
font-size: 1.22em;
}

form.quiz ol div.more-info {
background: #f9ed33;
padding: 25px 35px;
margin: 20px 0 0 -20px;
}

form.quiz ol p.more {
font-size: 0.77em;
font-weight: normal;
}

form.quiz button {
width: 300px;
border: none;
background: none;
font-size: 22px;
font-weight: bold;
color: #333;
}

form.quiz button span {
float: left;
background: #fadb32 url(img/button.gif) no-repeat 100% 0;
line-height: 63px;
height: 63px;
padding: 0 40px 0 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-bottomleft: 10px;
border-radius-topleft: 10px;
border-radius-bottomleft: 10px;
}

/* Layout */

body {
background: url(img/noise-bg.gif);
color: #fff;
}

div#header div.inner,
div#content div.inner,
div#footer div.inner {
width: 960px;
padding: 0 20px;
margin: 0 auto;
}

/* Header */

div#header {
padding: 38px 0 25px;
}

div#header div.inner {
position: relative;
}

div#header h1 {
margin: 0 0 35px;
}

div#header h1 a {
display: block;
width: 267px;
height: 34px;
background: url(img/header.gif);
text-indent: -999em;
overflow: hidden;
}

div#navigation,
div#navigation ul {
float: left;
}

div#navigation ul li{
float: left;
margin: 0 11px 0 0;
}

div#navigation ul li a {
float: left;
width: 72px;
height: 40px;
background: url(img/menu.gif);
text-indent: -999em;
overflow: hidden;
}

div#navigation ul li a {
float: left;
width: 72px;
height: 40px;
background: url(img/menu.gif);
text-indent: -999em;
overflow: hidden;
}

div#navigation ul li a:hover,
div#navigation ul li.m-start-sel a {
background-position: 0 -40px;
}

div#navigation ul li.m-dina-pengar a {
width: 111px;
background-position: -83px 0;
}

div#navigation ul li.m-dina-pengar a:hover,
div#navigation ul li.m-dina-pengar-sel a {
background-position: -83px -40px;
}

div#navigation ul li.m-betala a {
width: 69px;
background-position: -203px 0;
}

div#navigation ul li.m-betala a:hover,
div#navigation ul li.m-betala-sel a {
background-position: -203px -40px;
}

div#navigation ul li.m-skydda a {
width: 77px;
background-position: -284px 0;
}

div#navigation ul li.m-skydda a:hover,
div#navigation ul li.m-skydda-sel a {
background-position: -284px -40px;
}

div#navigation ul li.m-lana-pengar a {
width: 119px;
background-position: -374px 0;
}

div#navigation ul li.m-lana-pengar a:hover,
div#navigation ul li.m-lana-pengar-sel a {
background-position: -374px -40px;
}

div#navigation ul li.m-spara-pengar a {
width: 136px;
background-position: -502px 0;
}

div#navigation ul li.m-spara-pengar a:hover,
div#navigation ul li.m-spara-pengar-sel a {
background-position: -502px -40px;
}

div#extra-navigation {
float: right;
padding: 20px 0 0;
}

* html div#extra-navigation {
display: inline;
margin: 0 -10px 0 0;
}

div#extra-navigation ul,
div#footer-extra-navigation ul {
float: left;
font-size: 1.4em;
line-height: 1;
}

div#extra-navigation ul li,
div#footer-extra-navigation ul li {
float: left;
margin: 0 10px 0 0;
}

div#extra-navigation ul li a,
div#footer-extra-navigation ul li a {
background: url(img/bullets.gif) no-repeat 0 4px;
padding: 0 0 0 15px;
}

div#extra-navigation ul li a:hover,
div#footer-extra-navigation ul li a:hover {
text-decoration: underline;
}

/* Lärarrummet */

div#teacher-room {
position: absolute;
top: 0;
right: -10px;
width: 146px;
height: 64px;
padding: 5px 15px;
background: url(img/teacher-arrow.gif) no-repeat;
color: #333;
}

div#teacher-room h2 {
font-size: 2em;
font-weight: normal;
margin: 0;
}

div#teacher-room p {
font-size: 1.2em;
line-height: 1.16;
margin: 0;
}

div#teacher-room p a {
color: #333;
}

div#teacher-room p a:hover {
text-decoration: underline;
}

/* Content */

div#content {
padding: 140px 0 50px;
min-height: 500px;
background: #fff url(img/backgrounds/bg-1.jpg) no-repeat 50% 0;
color: #333;
}

div#main {
float: left;
width: 530px;
}

div#side {
float: right;
width: 325px;
padding: 170px 0 0;
}

/* Footer */

div#footer {
padding: 20px 0 150px;
}

div#footer-navigation {
float: left;
}

div#footer-navigation ul {
float: left;
display: inline;
margin: 0 0 0 -9px;
font-size: 1.4em;
line-height: 1;
overflow: hidden;
}

div#footer-navigation ul li {
float: left;
display:  inline;
padding: 0 10px;
margin: 0 0 0 -1px;
border-left: 1px solid #fff;
}

div#footer-navigation ul li a:hover {
text-decoration: underline;
}

div#footer-extra-navigation {
float: right;
}

/* Start Page */

div#start-intro {
width: 630px;
margin: 0 0 60px;
}

div#start-test {
position: relative;
float: left;
display: inline;
width: 191px;
height: 192px;
margin: 0 80px 0 -25px;
background-image: url(img/box-yellow-2.gif);
}

div#start-slideshow {
position: relative;
float: left;
width: 664px;
height: 230px;
background: url(img/slideshow-bg.gif);
}

div#start-slideshow-i {
width: 664px;
height: 230px;
overflow: hidden;
}

div#start-slideshow-i-i {
height: 230px;
}

div#start-slideshow div.slide {
float: left;
width: 574px;
height: 210px;
padding: 10px 45px;
}

div#start-slideshow div.slide h3 {
float: left;
margin: 0 10px 0 0;
line-height: 30px;
}

div#start-slideshow div.slide img {
/*display: block;*/
margin: 0 -10px;
}

div#start-slideshow div.slide p.more {
float: left;
background-position: 0 -489px;
line-height: 30px;
}

div#start-slideshow div.controls {
position: absolute;
top: 50%;
margin: -41px 0 0;
left: -40px;
width: 56px;
height: 82px;
background: url(img/controls.png);
text-indent: -999em;
overflow: hidden;
cursor: pointer;
}

div#start-slideshow div.controls:hover {
background-position: 0 -82px;
}

div#start-slideshow div.next {
right: -40px;
left: auto;
background-position: -56px 0;
}

div#start-slideshow div.next:hover {
background-position: -56px -82px;
}

/* Kontakt */

div#maps {
width: 530px;
height: 470px;
margin: 0 0 25px;
}

div#maps .gmnoprint h3 {
font-size: 1.2em;
}

div#maps .gmnoprint p {
font-size: 1.1em;
}

div#more h3 {
font-size: 1.4em;
}

div#controls {
margin: 0 0 15px;
}

div#controls select {
float: left;
}

div#controls p.more {
float: right;
background-position: 0 -493px;
}

/* Theme - Dina pengar */

body.page-dina-pengar div#content {
background-image: url(img/backgrounds/bg-3.jpg);
}

/* Theme - Betala */

body.page-betala div#content {
background-image: url(img/backgrounds/bg-6.jpg);
}

body.page-betala div.box {
background-color: #4276ba;
}

body.page-betala div.inverted {
border-color: #4276ba;
}

body.page-betala div#content ul.links li a:hover {
color: #4276ba;
background-position: 0 -1497px;
}

/* Theme - Skydda */

body.page-skydda div#content {
background-image: url(img/backgrounds/bg-4.jpg);
}

body.page-skydda div.box {
background-color: #bdb19d;
}

body.page-skydda div.inverted {
border-color: #bdb19d;
}

body.page-skydda div#content ul.links li a:hover {
color: #bdb19d;
background-position: 0 -1997px;
}

/* Theme - Låna pengar */

body.page-lana-pengar div#content {
background-image: url(img/backgrounds/bg-5.jpg);
}

body.page-lana-pengar div.box {
background-color: #a8c666;
}

body.page-lana-pengar div.inverted {
border-color: #a8c666;
}

body.page-lana-pengar div#content ul.links li a:hover {
color: #a8c666;
background-position: 0 -2497px;
}

/* Theme - Spara pengar */

body.page-spara-pengar div#content {
background-image: url(img/backgrounds/bg-2.jpg);
}

body.page-spara-pengar div.box {
background-color: #8065b0;
}

body.page-spara-pengar div.inverted {
border-color: #8065b0;
}

body.page-spara-pengar div#content ul.links li a:hover {
color: #8065b0;
background-position: 0 -2997px;
}

/* Theme - Testet */

body.page-kunskapstest div#content {
background-image: url(img/backgrounds/bg-7.jpg);
}

/* Theme - Kontakt */

body.page-kontakt div#content {
background-image: url(img/backgrounds/bg-8.jpg);
}

body.page-kontakt div.box {
background-color: #10ad16;
}

body.page-kontakt div.inverted {
border-color: #10ad16;
}

body.page-kontakt div#side {
padding-top: 0;
}

/* Theme - Lärarrummet */

body.page-lararrummet div#content {
background-image: url(img/backgrounds/bg-9.jpg);
}

body.page-lararrummet div#side {
padding-top: 250px;
}