/*
Theme Name: Name
Theme URI: http://www.url.se
Description: Description
Version: 1.0
Author: Oakwood Creative
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/**/
/* remember to define focus styles! */
:focus {
outline: 0;
}

body {
line-height: 1;
color: black;
background: white;
}

ol, ul {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
}

blockquote, q {
quotes: "" "";
}

/* Basic */

.structural {
position: absolute;
top: -999px;
left: -999px;
width: 0px;
height: 0px;
overflow: hidden;
}

.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clear {
display: inline-block;
clear: both;
}

/* Hides from IE-mac \*/
* html .clear {
height: 1%;
}

.clear {
display: block;
}

/* End hide from IE-mac */

.alignright {
float: right;
}

img.alignright {
margin: 0 0 1em 1em;
}

.alignleft {
float: left;
}

img.alignleft {
margin: 0 1em 1em 0;
}

/* Type */

body {
font: 0.625em/1.5 Arial, Helvetica, sans-serif;
}

strong {
font-weight: bold;
}

em {
font-style: italic;
}

a {
color: #cb7940;
font-weight: bold;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

h2 {
font-size: 3.2em;
font-weight: bold;
line-height: 1.1;
margin: 0 0 10px;
}

h3 {
font-size: 1.8em;
font-weight: bold;
color: #434343;
margin: 0 0 15px;
}

p {
font-size: 1.4em;
line-height: 1.5;
margin: 0 0 1em;
}

table {
margin: 0 0 20px;
}

td {
font-size: 1.4em;
line-height: 1.5;
vertical-align: top;
}

td p {
font-size: 1em;
}

.leading {
font-size: 1.8em;
line-height: 1.1;
}

.more a {
background: url(img/sprites.png) no-repeat 0 -200px;
padding: 0 0 0 25px;
}

ul {
font-size: 1.4em;
line-height: 1.5;
margin: 0 0 1em;
}

li {
background: url(img/sprites.png) no-repeat 0 -200px;
padding: 0 0 0 25px;
margin: 0 0 8px;
}

.module h2 {
font-size: 1.6em;
color: #676767;
background: url(img/line.png) no-repeat 0 100%;
padding: 0 0 5px;
}

.cufon-active .module h2 {
font-size: 2.5em;
}

/* Module */

.module {
margin: 0 0 20px;
}

/* Box */

.box {
height: 69px;
padding: 25px 30px;
margin: 0 0 20px;
color: #fff;
background: url(img/aco_tips1.jpg) no-repeat;
}

.box p {
margin: 0;
}

.box-orange {
height: 88px;
background-image: url(img/aco_tips2.jpg);
}

.box-green {
height: 93px;
padding-top: 35px;
background-image: url(img/aco_tips3.jpg);
}

/* Products */

.products {
font-size: 1em;
}

.products li {
position: relative;
padding: 20px 0 10px 180px;
margin: 0;
min-height: 165px;
background: url(img/line.png) no-repeat 0 0;
}

* html .products li {
height: 165px;
}

.products img {
position: absolute;
left: 0;
top: 15px;
}

/* More products */

.more-products {
width: 620px;
font-size: 1em;
}

.more-products li {
float: left;
padding: 0;
margin: 0;
width: 155px;
background: none;
}

.more-products li.first {
clear: left;
}

.more-products h3 a {
display: block;
background: url(img/sprites.png) no-repeat 0 -195px;
padding: 0 0 0 25px;
text-decoration: none !important;
}

/* Highscore */

.highscore {
padding: 0 0 0 10px;
font-size: 2em;
line-height: 20px;
text-transform: uppercase;
}

.highscore li {
float: left;
width: 225px;
padding: 10px 30px 10px 35px;
color: #fff;
background: url(img/sprites.png) no-repeat 0 -250px;
}

.highscore .second {
background-position: 0 -300px;
}

.highscore .third {
background-position: 0 -350px;
}

.highscore .name {
float: left;
}

.highscore .score {
float: right;
}

/* Product Map */

.product-map {
position: relative;
width: 540px;
height: 333px;
}

.sv .product-map {
background: url(img/matrix.jpg);
}

.nb .product-map {
background: url(img/matrix_nb.jpg);
}

.product-map li {
background: none;
padding: 0;
margin: 0;
}

.product-map a {
position: absolute;
display: block;
height: 100px;
width: 100px;
top: 0;
left: 0;
text-indent: -999em;
overflow: hidden;
}

.nb .map-mud-cleansermask {
top: 220px;
left: 40px;
width: 170px;
height: 100px;
}

.nb .map-overnight-spot-treatment {
top: 0px;
left: 145px;
width: 165px;
height: 65px;
}

.nb .map-daily-face-wash {
top: 143px;
left: 0px;
width: 190px;
height: 77px;
}
.nb .map-daily-moisturiser {
top: 50px;
left: 360px;
width: 170px;
height: 90px;
}

.nb .map-blemish-treating-moisturiser {
top: 175px;
left: 270px;
width: 210px;
height: 80px;
}

.nb .map-daily-purifying-toner {
top: 60px;
left: 200px;
width: 150px;
height: 80px;
}

.product-map .map-deep-cleaning {
top: 130px;
width: 200px;
height: 110px;
}

.product-map .map-blemish-treating {
top: 20px;
left: 170px;
width: 170px;
height: 120px;
}

.product-map .map-aterfuktning {
left: 350px;
width: 190px;
height: 170px;
}

.product-map .map-two-in-one {
top: 160px;
left: 220px;
width: 220px;
height: 110px;
}

.product-map .map-cover-stick {
top: 230px;
left: 320px;
width: 220px;
height: 100px;
}

/* Layout */

body {
color: #434343;
}

#wrapper {
width: 960px;
margin: 0 auto;
}

#main {
float: left;
width: 540px;
padding: 0 100px 0 0;
}

#side {
float: left;
width: 320px;
}

#side section {
margin: 0 0 20px;
}

/* Header */

#header {
padding: 45px 0 0;
margin: 0 0 35px;
background: url(img/sprites.png) no-repeat 605px 75px;
}

#header h1 {
float: left;
margin: 0 35px 20px 0;
}

#header p {
float: right;
margin: 20px 0 0;
}

#header .tagline {
float: left;
width: 210px;
font-size: 1.2em;
font-weight: normal;
line-height: 1.16;
color: #666;
margin: 20px 0 0;
}

.tagline span {
font-weight: bold;
text-transform: uppercase;
color: #333;
}

.cufon-active .tagline span {
font-size: 1.4em;
}

/* Navigation */

#navigation {
float: left;
width: 100%;
background: url(img/sprites.png) repeat-x 0 -130px;
}

#navigation ul {
float: left;
font: 2.0em/41px Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0;
}

#navigation li {
float: left;
margin: 0;
padding: 0;
background: none;
}

#navigation a {
float: left;
height: 41px;
padding: 10px 20px 0 15px;
background: url(img/menu.png) 100% 0;
border-bottom: 4px solid #bdbdbd;
color: #898989;
text-decoration: none !important;
}

#navigation a:hover {
color: #fff;
}

#navigation .start a:hover,
#navigation .start-2 a:hover,
#navigation .tavling a:hover,
#navigation .konkurranse a:hover {
background-position: 100% -60px;
border-color: #39711a;
}

#navigation .finnskolan a:hover,
#navigation .kviseskolen a:hover,
#navigation .om-oss a:hover,
#navigation .om-aco a:hover {
background-position: 100% -120px;
border-color: #224290;
}

#navigation .produkter a:hover,
#navigation .produkter-2 a:hover {
background-position: 100% -180px;
border-color: #287a79;
}

#navigation .spotless-the-game a:hover,
#navigation .spotless-the-game-2 a:hover {
background-position: 100% -240px;
border-color: #965527;
}

#navigation .sel a {
color: #898989 !important;
border: none;
background-position: 100% -300px !important;
height: 45px;
}

#navigation .start,
#navigation .start-2 {
background: url(img/menu.png) no-repeat 0 -5px;
padding: 0 0 0 14px;
}

#navigation .start a,
#navigation .start-2 a {
padding-left: 11px;
}

#navigation .start:hover:not(.sel),
#navigation .start-2:hover:not(.sel) {
background-position: 0 -65px !important;
}

#navigation .over {
background-position: 0 -65px !important;
}

/* Subnavigation */

#subnavigation {
float: left;
width: 100%;
background: #fff;
border-bottom: 2px solid #dedede;
}

#subnavigation ul {
float: left;
margin: 0;
padding: 11px 10px;
line-height: 28px;
}

#subnavigation li {
float: left;
margin: 0 10px 0 0;
padding: 0;
background: none;
}

#subnavigation a {
float: left;
padding: 0 12px;
}

#subnavigation a:hover,
#subnavigation .sel a {
color: #fff;
background: url(img/sprites.png) 100% -500px;
text-decoration: none;
}

/* Share */

#share {
margin: 50px 0 20px;
height: 30px;
}

#share p {
margin: 0;
float: right;
}

#share a {
display: block;
width: 189px;
height: 30px;
text-indent: -999em;
overflow: hidden;
}

.sv #share a {
background: url(img/sprites.png) 0 -550px;
}

.nb #share a {
background: url(img/sprites.png) 0 -600px;
}


#share iframe {
float: left;
}

/* Footer */

#footer {
padding: 15px;
color: #bdbdbd;
background: url(img/line.png) no-repeat 0 0;
}

#footer p {
font-size: 1.2em;
}

#footer a {
color: #bdbdbd;
font-weight: normal;
text-decoration: underline;
}

/* Page: Start */

#video-special2,
#video-special {
width: 620px;
height: 374px;
cursor: pointer;
text-indent: -999em;
overflow: hidden;
margin: 0 0 20px;
}

#video-special2 {
height: 382px;
}

.sv #video-special {
background: url(img/youtube_sv.jpg);
}

.sv #video-special2 {
background: url(img/youtube2_sv.jpg);
}

.nb #video-special {
background: url(img/youtube_nb.jpg);
}

.nb #video-special2 {
background: url(img/youtube2_nb.jpg);
}

#video-special2.active,
#video-special.active {
cursor: auto;
text-indent: 0;
overflow: visible;
background: none;
}

/* Module: Tävling */

#competition-form-toggle {
position: relative;
display: block;
width: 315px;
height: 175px;
background: url(img/tavling.png);
text-indent: -999em;
overflow: hidden;
}

#competition-form-wrap {
margin: -25px 0 0 1px;
}

#competition-form {
display: none;
width: 280px;
padding: 0 10px 6px;
background: #bdbdbd;
}

#competition-form .inner {
padding: 25px 10px 10px;
background: #f8f8f8;
color: #727272;
}

#competition-count {
width: 90px;
}

#competition-submit {
margin: 0 0 10px;
text-align: right;
}

#competition-agree {
float: left;
margin: 0 5px 0 0;
}

#competition-submit label {
float: left;
width: 115px;
font-size: .85em;
font-weight: bold;
text-align: left;
}

#competition-submit button {
width: 86px;
height: 37px;
padding: 0;
margin: 0;
font-size: 16px;
text-transform: uppercase;
background: url(img/sprites.png) no-repeat 0 -400px;
border: none;
color: #fff;
cursor: pointer;
}

#competition-terms {
display: none;
}

#competition-terms p {
font-size: 1.2em;
}

#competition-close {
font-weight: bold;
height: 30px;
line-height: 30px;
text-transform: uppercase;
margin: 0;
background: url(img/sprites.png) no-repeat 0 -480px;
}

#competition-close a {
float: right;
padding: 0 0 0 20px;
color: #535656;
background: url(img/sprites.png) no-repeat 0 -443px;
}

.field {
width: 250px;
margin: 0 0 5px;
padding: 3px;
border: 2px solid #d1d1d1;
background: #d1d1d1;
font: 11px Arial, Helvetica, sans-serif;
}

.error {
background: #d1a5a5;
border-color: #d17474;
}

label.error {
background: none;
color: #f00;
}

.message {
color: #4d4e38;
background: #fff992;
border: 2px solid #b9c000;
padding: 5px 10px;
}

.message ul,
.message p {
font-size: 1.1em;
margin: 0;
}

/* Module: Elins film */

#elins-movie a {
display: block;
width: 300px;
height: 194px;
background: url(img/elin.jpg);
text-indent: -999em;
overflow: hidden;
}

#elins-movie a:hover {
background-position: 0 -194px;
}

/* Theme: Game */

.spotless-the-game #header {
margin: 0;
}

.spotless-the-game #main {
width: 100%;
padding: 0;
}

.spotless-the-game #side {
display: none;
}