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

/* Themes */

ol.comments li.orange,
ul.situations li.orange p.quote {
color: #cb7940;
}

ol.comments li.orange div.avatar {
background-color: #cb7940;
}

ol.comments li.green,
ul.situations li.green p.quote {
color: #427d25;
}

div.avatar-select-wrap div.green ul,
ol.comments li.green div.avatar {
background-color: #07d174;
}

ol.comments li.purple,
ul.situations li.purple p.quote {
color: #3a0e60;
}

div.avatar-select-wrap div.purple ul,
ol.comments li.purple div.avatar {
background-color: #9176a6;
}

ol.comments li.blue {
color: #265bac;
}

div.avatar-select-wrap div.blue ul,
ol.comments li.blue div.avatar {
background-color: #448eca;
}

div.avatar-select-wrap div.turquoise ul,
ol.comments li.turquoise div.avatar {
background-color: #338f8d;
}

ol.comments li.turquoise,
ul.situations li.turquoise p.quote {
color: #338f8d;
}

/* Graphic link */

.button {
margin: 0;
}

.button a {
display: block;
height: 66px;
background: url(../img/button-more-situations.gif) no-repeat;
text-indent: -999em;
overflow: hidden;
}

.button a:hover {
background-position: 0 -66px;
}

.download a {
background: url(../img/characters.jpg) 25px 0 no-repeat !important;
height: auto;
padding: 153px 0 0;
}

.download a span {
display: block;
background: url(../img/button-download.gif);
padding: 74px 38px 0;
height: 48px;
}

.download a:hover span {
background-position: 0 -122px;
}

.download a span span {
padding: 0;
height: 31px;
background: url(../img/communities.gif) no-repeat !important;
}

.ringtone a {
background-image: url(../img/button-ringtone.gif);
}

.discuss a {
height: 23px;
background: url(../img/button-discuss.gif) no-repeat !important;
}

.back a {
width: 89px;
height: 23px;
background: url(../img/back.gif) !important;
}

/* Tab function */

div.page-js-active {
display: none;
}

div.page-sel {
display: block;
}

/* Situations */

ul.situations li {
position: relative;
padding: 15px 0 15px 185px;
min-height: 115px;
border-top: 1px solid #ececec;
}

ul.situations li img {
position: absolute;
left: 0;
top: 15px;
}

ul.situations li h3 {
margin: 0 0 5px;
}

ul.situations li h3 a {
color: #3d3d3d;
background: url(../img/arrow.gif) no-repeat 100% 50%;
padding: 0 30px 0 0;
}

ul.situations li h4 {
background: url(../img/comment.gif) no-repeat 0 2px;
padding: 0 0 0 35px;
margin: 0 0 5px;
}

ul.situations li p {
margin: 0 0 5px;
}

ul.situations li p.quote {
background: url(../img/comment.gif) no-repeat;
text-indent: 35px;
margin: 0;
padding: 5px 0 0;
}

ul.situations li p span.name {
font-weight: bold;
padding: 0 5px 0 0;
}

/* Drop Down */

div.dropdown-js {
float: left;
position: relative;
width: 273px;
}

div.dropdown-js p.top {
margin: 0;
padding: 5px 15px 0;
height: 35px;
line-height: 35px;
color: #fff;
background: url(../img/drop-top.gif) no-repeat;
font-size: 2.2em;
cursor: pointer;
}

div.dropdown-js p.open {
background-position: 0 -40px;
}

div.dropdown-js ul {
position: absolute;
left: 1px;
top: 35px;
width: 264px;
color: #fff;
background: #cb7940;
border-left: 4px solid #965527;
border-right: 3px solid #965527;
border-bottom: 3px solid #965527;
font-size: 2.2em;
}

div.dropdown-js ul li.sel {
display: none;
}

div.dropdown-js ul li a {
display: block;
padding: 0 10px;
width: 244px;
color: #fff;
}

div.dropdown-js ul li a:hover {
background: #d98144;
}

/* Comment Form */

input.field,
textarea.field {
border: 1px solid #8c8c8c;
padding: 4px;
width: 220px;
}

textarea.field {
width: 450px;
height: 150px;
}

input.error,
textarea.error {
border-color: #ff6868;
background: #ffe1e1;
}

button.submit {
background: none;
border: none;
padding: 0;
margin: 0;
width: 1;
overflow: hidden;
cursor: pointer;
}

button.submit span {
display: block;
width: 87px;
height: 38px;
background: url(../img/button-submit.gif) no-repeat;
text-indent: -999em;
overflow: hidden;
}

div.comment-form {
border-top: 1px solid #ececec;
padding: 15px 0 0;
}

/*div.comment-form h2 {
height: 18px;
background: url(../img/header-comment.gif) no-repeat;
margin: 0 0 15px;
text-indent: -999em;
overflow: hidden;
}*/

div.form h2 {
font-size: 2em;
font-weight: normal;
letter-spacing: -0.02em;
margin: 0 0 0.5em;
color: #000;
}

div.situation-form h2 {
background: url(../img/arrow-toggle.gif) no-repeat 0 4px;
padding: 0 0 0 25px;
cursor: pointer;
}

div.situation-form h2.open {
background-position: 0 -30px;
}

div.situation-form div.notice {
width: 197px;
height: 114px;
font-weight: bold;
background: url(../img/notice.gif) no-repeat;
color: #3c599d;
}

div.situation-form div.notice p {
margin: 0;
padding: 15px 20px;
}

div.form label {
font-size: 1.2em;
font-weight: bold;
display: block;
}

div.form div.row {
margin: 0 0 10px;
}

div.form div.col-1 {
float: left;
width: 260px;
}

div.form div.col-2 {
float: left;
width: 200px;
}

div.form div.col-2 div.avatar-select-wrap {
float: left;
width: 110px;
}

div.form div.col-2 div.theme-select-wrap {
float: left;
width: 90px;
}

div.form div.col-2 div.theme-select {
padding: 5px 0 0 0;
}

div.form div.agree {
float: left;
}

div.form div.buttons {
float: right;
}

div.form div.agree label {
display: inline;
font-weight: normal;
}

div.form div.error label {
color: #ff1616;
}

div.error-dialog {
height: 50px;
padding: 25px 0 0 100px;
background: url(../img/error-bg.gif) no-repeat;
color: #ff1616;
font-weight: bold;
}

div.success-dialog {
color: #666;
background: #ffedad;
border: 1px solid #eec971;
padding: 10px;
font-weight: bold;
text-align: center;
}

div.success-dialog p {
margin: 0;
}

/* Downloads */

ul.downloads {
width: 964px;
margin: 0 0 20px;
font-size: 1.2em;
font-weight: bold;
}

ul.downloads li {
float: left;
width: 211px;
margin: 0 30px 10px 0;
}

ul.downloads li a {
display: block;
padding: 0 0 0 15px;
color: #2960af;
background: url(../img/arrow-blue.gif) no-repeat 0 2px;
}

ul.profile li {
width: 230px;
margin-right: 5px;
}

ul.faces li {
width: 104px;
margin-right: 15px;
}

ul.ringtones {
width: 954px;
}

ul.ringtones li {
width: 142px;
margin-right: 17px;
}

ul.wallpapers li {
width: 289px;
margin-right: 32px;
}

ul.wallpapers li p {
float: left;
font-size: 1em;
}

ul.wallpapers li ul {
float: left;
}

ul.wallpapers li ul li {
width: auto;
float: left;
display: inline;
overflow: visible;
margin: 0 0 0 10px;
}

ul.wallpapers li ul li a {
background: none;
padding: 0;
}

/* Comments */

ol.comments li {
position: relative;
padding: 0 0 15px 100px;
margin: 0 0 15px;
width: 350px;
min-height: 85px;
overflow: visible;
border-bottom: 1px solid #ececec;
}

ol.comments li div.avatar {
position: absolute;
top: 0;
left: 0;
width: 85px;
height: 85px;
line-height: 85px;
text-align: center;
background: #ececec;
}

ol.comments li div.avatar img {
vertical-align: middle;
}

ol.comments li p.header {
font-size: 1.6em;
margin: 0 0 0.33em;
}

ol.comments li p.header span.name {
font-weight: bold;
}

ol.comments li p.alert {
text-align: right;
font-size: 1.1em;
margin: 0;
}

ol.comments li p.alert a {
color: #a3a3a3;
background: url(../img/alert.gif) no-repeat;
padding: 0 0 0 15px;
}

ol.comments li p.alert a:hover {
color: #606060;
background-position: 0 -36px;
}

/* Comments - JS */

ol.comments-js-active li {
display: none;
}

ol.comments-js-active li.active {
display: block;
}

/* Paging */

ul.comments-paging {
font-size: 1.2em;
font-weight: bold;
text-align: right;
}

ul.comments-paging li {
display: inline;
padding: 0 5px 0 0;
}

ul.comments-paging li.sel {
font-weight: normal;
}

/* Avatar select */

div.avatar-select {
position: relative;
width: 95px;
height: 95px;
}

div.avatar-select ul {
position: absolute;
left: 0;
top: 0;
width: 95px;
height: 95px;
background: #cb7940 url(../img/avatar-select.png);
cursor: pointer;
z-index: 10;
}

div.avatar-select ul li {
float: left;
display: none;
width: 95px;
height: 95px;
line-height: 95px;
text-align: center;
cursor: pointer;
}

div.avatar-select ul li img {
vertical-align: middle;
cursor: pointer;
}

div.avatar-select ul.open {
width: 285px;
height: auto;
background-image: none;
}

div.avatar-select ul.open li,
div.avatar-select ul li.sel {
display: block;
}

div.avatar-select ul.open li.hover {
background: url(../img/avatar-bg.png);
}

/* Module */

div.module {
margin: 0 0 30px;
}

/* Layout */

body {
padding: 0 20px;
}

div#wrapper {
width: 950px;
margin: 0 auto;
overflow: visible;
}

div#header {
padding: 11px 0 0 7px;
margin: 0 0 15px;
}

div#header h1 {
float: left;
}

div#header h2 {
float: right;
padding: 60px 0 0;
}

div#header img {
display: block;
}

div#flash {
margin: 0 0 30px;
min-height: 754px;
}

div#flash-replace {
background: url(../img/flash-backup.jpg) no-repeat;
}

div#flash-replace p {
margin: 0;
text-align: center;
line-height: 560px;
}

div#flash object {
display: block;
}

div#content {
padding: 0 10px;
margin: 0 0 30px;
}

div#content div.main {
float: left;
width: 460px;
margin: 0 20px 0 0;
overflow: visible;
}

div#content div.side {
float: left;
width: 450px;
}

div#footer {
padding: 10px;
color: #606060;
background: url(../img/footer-bg.gif) no-repeat;
}

div#footer p {
font-size: 1.1em;
}

div#footer a {
color: #606060;
}

/* Navigation */

div#navigation {
background: url(../img/menu-bg.png) no-repeat 0 100%;
padding: 0 7px;
margin: 0 0 20px;
}

div#navigation ul li {
float: left;
}

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

div#navigation ul li a:hover {
background-position: 0 -54px;
}

div#navigation ul li.sel a {
background-position: 0 -108px;
}

div#navigation ul li#m-irl a {
width: 175px;
background-position: -98px 0;
}

div#navigation ul li#m-irl a:hover {
background-position: -98px -54px;
}

div#navigation ul li#m-irl.sel a {
background-position: -98px -108px;
}

div#navigation ul li#m-download a {
width: 166px;
background-position: -273px 0;
}

div#navigation ul li#m-download a:hover {
background-position: -273px -54px;
}

div#navigation ul li#m-download.sel a {
background-position: -273px -108px;
}

div#navigation ul li#m-about a {
width: 136px;
background-position: -439px 0;
}

div#navigation ul li#m-about a:hover {
background-position: -439px -54px;
}

div#navigation ul li#m-about.sel a {
background-position: -439px -108px;
}

div#navigation ul li#m-blog a {
width: 150px;
background-position: -575px 0;
}

div#navigation ul li#m-blog a:hover {
background-position: -575px -54px;
}

div#navigation ul li#m-blog.sel a {
background-position: -575px -108px;
}

div#navigation ul li#m-boss a {
width: 188px;
background-position: -725px 0;
}

div#navigation ul li#m-boss a:hover {
background-position: -725px -54px;
}

div#navigation ul li#m-boss.sel a {
background-position: -725px -108px;
}

/* IRL */

div#irl-header {
padding: 0 0 15px;
margin: 0 0 15px;
border-bottom: 1px solid #ececec;
}

div#irl-start {
width: 960px;
}

div#irl-intro {
float: left;
width: 460px;
min-height: 200px;
margin: 0 20px 0 0;
}

div#irl-intro h2 {
margin-bottom: 1em;
}

div#irl-intro img {
margin-right: 20px;
}

div#irl-start ul.situations {
display: inline;
}

div#irl-start ul.situations li {
float: left;
width: 220px;
padding-left: 240px;
margin-right: 20px;
min-height: 200px;
overflow: visible;
}

div#irl-header div.main h2 {
float: left;
margin: 0 10px 0 0;
}

div#irl-header div.main ul {
float: left;
}

div#irl-header div.side h2 {
float: left;
}

div#irl-header div.side p.back {
float: right;
margin: 10px 0 0;
}

div#tab-irl div.js-active {
display: none;
}

div#tab-irl div.selected {
display: block;
}

div#tab-about,
div#tab-blog,
div#tab-boss {
padding: 0 360px 0 0;
}

/* Splash */

div#splash {
background: url(../img/splash-bg.gif);
width: 619px;
height: 250px;
overflow: hidden;
padding: 62px 0 0;
margin: 45px auto 100px;
}

div#splash h2 {
width: 296px;
height: 22px;
margin: 0 auto 45px;
background: url(../img/splash-choose.gif);
text-indent: -999em;
overflow: hidden;
}

div#splash ul {
width: 448px;
margin: 0 auto;
}

div#splash ul li {
float: left;
}

div#splash ul li a {
float: left;
background: url(../img/splash-swedish.gif) no-repeat;
width: 107px;
height: 91px;
margin: 0 5px 0 0;
text-indent: -999em;
overflow: hidden;
}

div#splash ul li a:hover {
background-position: 0 -91px;
}

div#splash ul li#splash-norway a {
background-image: url(../img/splash-norwegian.gif);
}

div#splash ul li#splash-finland a {
background-image: url(../img/splash-finish.gif);
}

div#splash ul li#splash-denmark a {
background-image: url(../img/splash-danish.gif);
}

/* Themes */

body.da div#navigation ul li a {
background-image: url(../img/menu-dk.png);
}

body.no div#navigation ul li a {
background-image: url(../img/menu-no.png);
}

body.fi div#navigation ul li a {
background-image: url(../img/menu-fi.png);
}

body.da .button a {
background-image: url(../img/button-more-situations-dk.gif);
}

body.no .button a {
background-image: url(../img/button-more-situations-no.gif);
}

body.fi .button a {
background-image: url(../img/button-more-situations-fi.gif);
}

body.da .download a span {
background-image: url(../img/button-download-dk.gif);
}

body.no .download a span {
background-image: url(../img/button-download-no.gif);
}

body.fi .download a span {
background-image: url(../img/button-download-fi.gif);
}

body.da .ringtone a {
background-image: url(../img/button-ringtone-dk.gif);
}

body.no .ringtone a {
background-image: url(../img/button-ringtone-no.gif);
}

body.fi .ringtone a {
background-image: url(../img/button-ringtone-fi.gif);
}

body.da .discuss a {
background-image: url(../img/button-discuss-dk.gif) !important;
}

body.fi .discuss a {
background-image: url(../img/button-discuss-fi.gif) !important;
}

body.no .discuss a {
background-image: url(../img/button-discuss-no.gif) !important;
}

body.da .back a {
background-image: url(../img/back-dk.gif) !important;
}

body.fi .back a {
background-image: url(../img/back-fi.gif) !important;
}

body.no .back a {
background-image: url(../img/back-no.gif) !important;
}

body.fi button.submit span {
background-image: url(../img/button-submit-fi.gif);
}

body.da button.submit span,
body.no button.submit span {
background-image: url(../img/button-submit-dk-no.gif);
}