body {font: normal 81% Arial; background: #FFF; color:#5b5b5b; margin: 0}
#wrapper {overflow:hidden; min-height: 780px; background: #FFF url(img/bg_intro.jpg) no-repeat 50% 0;}
a {color: #333399}
#content {width: 820px; margin: 0 auto; padding: 30px 0; background: #FFF; position: relative; border: 1px solid #999;  min-height: 480px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding-top: 0; margin-bottom: 10px;}
#content.index {background: none; border: none; width: 940px; margin-top: 30px}

#header  {width: 820px; height: 38px; margin: 0px auto; padding: 10px 5px}
h1 {background: url(img/logo_pieni.png) no-repeat 0 0; width: 620px; height: 38px; float: left; }
h1 span {display: none}

/* Etusivu */
.map {width: 272px; height: 456px; float: right; margin: -7px 70px 0 0}
.no-finland {float: right; position: absolute; right: 10px; text-decoration: none;}
ul {margin: 0 110px 0 190px; padding: 0}
#question li {cursor: pointer}
li {list-style: none; margin: 0 0 5px 0; padding: 5px 10px 5px 40px; overflow: hidden}
li span {display: block; float: left; background: url(img/icon_checkbox.gif) no-repeat 0 0; width: 38px; height: 38px; margin: -14px -8px 0 -35px; cursor: pointer}
li.selected span {background:  url(img/icon_checkbox.gif) no-repeat 0 -42px;}
li.selected {background: #efefef;}

.next {display: none; position: absolute; right: -50px; top: 40%; width: 110px; height: 110px; background: url(img/icon_next.png) no-repeat 0 0}
.prev {position: absolute; z-index:100; left: -50px; top: 40%; width: 110px; height: 110px; background: url(img/icon_prev.png) no-repeat  0 0}
.next span, .prev span {display: none}
.next.show {display: inline}

.tracker {position: absolute; font-weight: bold; color: #cccccc; bottom: 20px; right: 52px; border-left: 1px solid #cecece; overflow: hidden; margin: 20px 0 0 10px}
.tracker li {float: left; padding: 1px 28px; border: 1px solid #cecece; border-width: 1px 1px 1px 0; margin: 0}
.tracker li.currentrack {background: #bdbdbd url(img/bg_tracker.gif) repeat-x 0 0; color: #FFF}

.question_figure_1 {display: block; position: absolute; background: url(img/q1.png) no-repeat 0 0; width: 99px; height: 276px; left: 20px; bottom: -57px}
.question_figure_2 {display: block; position: absolute; background: url(img/q2.png) no-repeat 0 0; width: 222px; height: 301px; left: -48px; bottom: -57px}
.question_figure_3 {display: block; position: absolute; background: url(img/q3.png) no-repeat 0 0; width: 200px; height: 253px; left: -50px; bottom: -20px}
.question_figure_4 {display: block; position: absolute; background: url(img/q4.png) no-repeat 0 0; width: 263px; height: 185px; left: -80px; bottom: -8px}
.question_figure_5 {display: block; position: absolute; background: url(img/q5.png) no-repeat 0 0; width: 267px; height: 439px; left: -63px; bottom: 0}
.question_figure_6 {display: block; position: absolute; background: url(img/q6.png) no-repeat 0 0; width: 130px; height: 196px; left: -20px; bottom: -2px}
.question_figure_7 {display: block; position: absolute; background: url(img/q7.png) no-repeat 0 0; width: 261px; height: 135px; left: -85px; bottom: -25px}
.question_figure_8 {display: block; position: absolute; background: url(img/q8.png) no-repeat 0 bottom; width: 200px; height: 328px; left: -9px; bottom: -18px}
.question_figure_9 {display: block; position: absolute; background: url(img/q9.png) no-repeat 0 0; width: 148px; height: 328px; left: 40px; bottom: -8px}

h2 { font-size: 14px; margin: 20px 0; padding: 20px 80px; text-align: center; background: #eee;}
h2.result-header {font-size: 50pt; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; }

.total {left: -11px; top: 10px; color: #FFF; padding: 12px 0 0 20px; background: url(img/icon_vinjet.png) no-repeat; width: 77px; height: 62px; position: absolute; z-index: 10;font: normal 22px "Times New Roman", Times, serif;}
.answer {width: 480px; border: 2px solid #eee; padding: 20px; margin: 15px 0 10px 190px; display: none; position: relative; background: #FFF}

#article_container {margin: 10px auto -30px auto; width: 940px}
.article_container {display: none}
.fancy {float: right; margin: -6px 10px 2px 10px; text-decoration: none}
.fancy:hover {text-decoration: underline}

.profileinfo {width: 400px; margin: 30px 20px 0 20px; border: 10px solid #5d276a; padding: 10px; position: relative}
.profileinfo ul {margin: 0}
.profileinfo li {margin: 0 0 5px 20px; padding: 0;}
.profilemap {float: right; width: 350px; text-align: right; position: absolute; right: 0; top: 50px}
.profilemap p.profileinmap {width: 180px; position: absolute;  float: left; margin-top: 130px; text-align: right; color:#5b5b5b; font-family: Trebuchet MS,Arial,sans-serif; font-size:19pt}
.profilemap p.profileinmap span {display: block; color: #581468; text-transform: uppercase}
.profileimage {position: relative; margin: -100px 20px -32px 30px}

.type_a {border-color: #31961d}
.type_b {border-color: #3387ec}
.type_c {border-color: #581468}
.type_d {border-color: #be6b00}
.type_e {border-color: #b20202}

.facebook {position: absolute; left: 200px; top: -60px; right: -30px}
#tablefbholder .facebook {position: relative; top: 0; left: 30px; margin-top: 40px; }

.quotation {font-style: italic; color: #581468; margin: 30px 20px 20px 20px; text-align: left}
span.quote, .profiles .quotation span {display: block; font-style:normal; margin-top: 5px}

.q_a {color: #31961d}
.q_b {color: #3387ec}
.q_c {color: #581468}
.q_d {color: #be6b00}
.q_e {color: #b20202}

.article {border: 2px solid #ccc; padding: 10px; width: 400px; background: #FFF}
.article-link1, .article-link2 {display: block; margin: 10px 0 40px 0; font: bold 20px Arial; padding: 18px; text-decoration: none; width: 142px; position: relative}
.article-link1:hover, .article-link2:hover {text-decoration: underline}
.loop_1 {background: #000; color: #FFF;}
.loop_2 {background: #FFF; color: #de0000; border: 1px solid #de0000; font-size: 17px}
.loop_3 {background: #fac90e; color: #000}
.loop_4 {background: #FFF}
.loop_5 {background: #FFF; color: #000; border: 1px solid #000; width: 180px; font-size: 20px; float: right; right: -30px}
#article_container table {border-collapse: collapse; width: 960px; margin: 20px 0 0 -70px;background: transparent}
#article_container td {width: 150px; vertical-align: top}
#article_container td.article_td {padding: 10px; width: 300px}
.border-right {border-right: 1px solid #5b5b5b}

.kyylafooter {margin: -10px auto 5px; width: 940px; float: right}
.kyylafooter a {background: #000; text-decoration: none; color: #FFF; display: block; padding: 5px 28px; float: left}
.kyylafooter a:hover {text-decoration: underline}

.profiles {width: 600px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.profiles td {vertical-align: top; background: url(img/stripe.gif) repeat-x 0 60px}
.profiles div {background: #FFF}
.profiles h3 {font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; font-size: 36pt; font-style: italic; text-align: center; text-transform: uppercase}

.fare {margin: 0;}
.fare li {margin: 0 0 5px 0}