/* http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
 **/
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, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;  padding: 0; border: 0;  font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: '';content: none;}
ol, ul {list-style: none;}
b, strong {font-weight: bold;}
.clr {clear:both;}
*:focus{outline: none;}

body {background: url('images/layer-body2.jpg.html') center 0px;padding: 0;margin: 0;}
#page-wrapper {position:relative;margin: 0 auto; background: url('images/layer-background.jpg.html') no-repeat center 40px;
  height:930px;width:1100px;zoom:1; }
.rounded {border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px;}

/* navibar */
/* test git */
#navibar{position:relative;width: 1080px; margin: 60px auto 0px auto;height: 200px;z-index: 10;}
#logo {position:absolute; top: -60px; left:-115px;z-index:2000;}
#navibar a {position:absolute;background-image: url('images/sprite-navi-24.png');display: block; float: left;zoom:1;
  height: 168px; width: 205px;}
#navibar a#navi-etusivu {left: 340px; top: 25px;background-position: -3px -4px;z-index:3;}
#navibar a#navi-etusivu:hover, #navibar a#navi-etusivu.selected {background-position: -4px -179px;z-index:10;}
#navibar a#navi-sarja {height: 146px;width:230px;left: 490px; top: 75px;background-position: -232px -9px;
  z-index:2;}
#navibar a#navi-sarja:hover, #navibar a#navi-sarja.selected {background-position: -232px -184px;z-index:10;}
#navibar a#navi-profiilit {height: 173px;width:210px;left: 640px; top: -15px;background-position: -469px -3px;
  z-index:3;}
#navibar a#navi-profiilit:hover, #navibar a#navi-profiilit.selected{background-position: -469px -179px;z-index:10;}
#navibar a#navi-pelit {height: 143px;width:230px;left: 720px; top: 105px;background-position: -693px -3px;
  z-index:2;}
#navibar a#navi-pelit:hover, #navibar a#navi-pelit.selected {background-position: -693px -173px;z-index:10;}
#navibar a#navi-makingof {height: 173px;width:210px;left: 890px; top: 25px;background-position: -932px -16px;
  z-index:3;}
#navibar a#navi-makingof:hover, #navibar a#navi-makingof.selected {background-position: -931px -192px;z-index:10;}
#navibar a#navi-forum {background: url('images/toforum.png');top: 205px; left: 15px;
  height:140px;width:260px;z-index:10;}

/* content */
#content-wrapper {z-index:1;position:relative; margin: 0 auto;width: 1080px; height: 670px;}
#content {position:absolute;}
#link-layer a {display:block;position:absolute;/*border: solid 1px red;*/}
#content-layer {position: absolute;font-family: arial, sans-serif;overflow: auto;/*border:solid 1px red;*/} 

/* index content */
.content-index {left: -35px;top:0px;background: url('images/layer-index.jpg.html') no-repeat;
  width:1197px; height: 721px;}
.content-index #content-layer {text-align: center;width: 330px; height: 200px; top: 65px; left: 475px;line-height: 1.1;
  font-size: 15px;overflow: hidden;}
#index-profiilit {height: 500px; width: 410px; top: 200px; left: 20px;}
#index-sarja {height: 200px; width: 230px; top: 35px; right: 40px;}
#index-pelit {height: 200px; width: 230px; top: 215px; right: 40px;z-index:2;}
#index-makingof {height: 80px; width: 350px; top: 580px; left: 430px;z-index:2;}

/* tvseries content */
.content-tv {left: -96px;top:7px;background: url('images/layer-tv.jpg.html') no-repeat;
  width:1197px; height: 721px;}
.content-tv #content-layer {text-align: justify;width: 320px; height: 100px; top: 480px; left: 470px;font-family:"CrackedJohnnie", arial, sans-serif;
  font-size: 14px;}
#tv-episodes {padding-left: 150px;margin: 100px auto 0 auto;width: 680px;height: 320px;overflow: auto;}
#tv-episodes a {text-transform: uppercase;padding-left: 70px; position: static;float:left; 
   height: 120px; width: 250px;text-decoration: none;color: #000;font-size:13px;font-family:"CrackedJohnnie", arial, sans-serif;}
#tv-episodes a span {font-size: 36px;display:block;font-family:"IndigoJoker";margin-bottom: 5px; }
#tv-episode {padding-left: 180px;margin: 100px auto 0 200px;width: 680px;}

/* profiles content */
.content-profiles {left: -5px;top:5px;background: url('images/layer-profiles.jpg.html') no-repeat;
  width:1197px; height: 721px;}
.content-profiles #content-layer {width: 770px; height: 480px; top: 120px; left: 200px;
  font-size: 14px;padding-left: 10px;}
.profile {width: 340px;float:left;}
.profile-name {display:block;font-size:32px;padding-bottom: 10px;}
.profile-note {width: 130px; height: 135px;border: solid 1px #222;font-size: 11px;padding: 10px;font-weight:bold;}
.profile-left {margin-right: 75px;}
.profile-right .profile-name {}
.profile-right .profile-note {}
.profile-right .profile-image {float: right;}
.profile-left .profile-name {float: right;}
.profile-left .profile-note {float: right; clear:both;}
.profile-text {width: 308px; height: 220px; margin-top: 30px;border: solid 1px #222;font-size: 13px;
  padding: 10px 15px;}
.profile-text p {margin-bottom: 10px;}
#profiili_fasu {position:absolute;top: 165px; left: 70px; width: 118px; height: 70px;}
#profiili_aino {position:absolute;top: 252px; left: 70px; width: 118px; height: 70px;}
#profiili_anastasia {position:absolute;top: 336px; left: 70px; width: 118px; height: 70px;}
#profiili_suski {position:absolute;top: 425px; left: 70px; width: 118px; height: 70px;}
#profiili_rosa {position:absolute;top: 515px; left: 70px; width: 118px; height: 70px;}
#read-more-about-our-class {position:absolute;top: 155px; right: 110px; width: 100px; height: 400px;}
.profile {display:none;}
.showonload {display: block;}

/* profile comics */
#verso-teaser {display:none;height: 30px; width: 300px; padding: 40px 50px 60px 50px; position: absolute; top: 300px; right: 50px;z-index: 20;
background: #222;text-align: center;border: solid 4px #D08E0C;color: #fff;font-family:"CrackedJohnnie", arial, sans-serif;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
#close-verso-teaser {text-decoration:none;position: absolute; top: -30px; right: 20px; 
    height: 30px; padding: 5px;width: 100px; font-size: 12px;color: #222;background: #fff;text-align: right;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;font-family: arial, sans-serif;}
#close-verso-teaser img {float:right;}
#close-verso-teaser span {float:right;padding-top: 5px;display:block;}
#comics {display:none;background: #fff; width: 570px; height: 430px;padding: 20px; position:absolute; top: 140px; left:270px;z-index: 3001;
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 0 30px #000;}
#comics-center {float: left;padding: 0 10px 0 0px;}
#comics-left {width: 200px;height: 500px; padding-top: 100px;text-align: right;}
#comics-right {float: right;width: 180px;height: 500px; padding-top: 100px;}
#comics-left a, #comics-right a {font-family:"CrackedJohnnie", arial, sans-serif;color: #fff; text-decoration: none;display: block;margin-bottom: 45px;}
#comic {background: #eee; height: 360px;width: 540px;margin: 20px auto 20px auto;text-align:center;}
#comic img {height: 360px;}
#next-comic {font-family:"CrackedJohnnie", arial, sans-serif;color: #e1a830;text-decoration: none;float: right;margin-top: 10px;}
#comics-center {width: 560px; height: 400px;}
.comics-column { background: #eee;height: 600px;position: relative;}
#verso-logo {position: absolute; bottom: 0px; left: 0px;}

#comics-splash {display:none;box-shadow: 0 0 30px #000;position:absolute; top: 85px; left: 185px;width: 760px; height: 500px;background:url(images/alkusivu.jpg.html) no-repeat #fff;z-index: 2000;
  border: solid 20px #fff;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
.open-comic {position:absolute;display:block;width: 150px; height: 80px;}
#close-splash {text-decoration:none;position: absolute; top: -50px; right: 20px; 
    height: 30px; padding: 5px;width: 100px; font-size: 12px;color: #222;background: #fff;text-align: right;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;font-family: arial, sans-serif;}
#close-splash img {float:right;}
#close-splash span {float:right;padding-top: 5px;display:block;}

/* games content */
.content-games {left: -10px;top:3px;background: url('images/layer-games.jpg.html') no-repeat;
  width:1197px; height: 721px;}
#games-Vetopeto {width: 290px; height: 80px;top: 188px;left: 150px;background:url(images/vetopeto.png) no-repeat;}
#games-Rokkikukko {width: 290px; height: 80px;top: 188px;left: 480px;background:url(images/rokkikukko.png) no-repeat;}
#games-Sanaattori {width: 290px; height: 80px;top: 300px;left: 150px;background:url(images/sanaattori.png) no-repeat;}
#games-Moshit {width: 290px; height: 80px;top: 300px;left: 480px;background:url(images/moshit.png) no-repeat;}
#games-Mop {width: 290px; height: 90px;top: 420px;left: 305px;background:url(images/mop.png) no-repeat;}

#game-on {position: absolute; top: 140px; left: 150px; width: 600px; height: 440px;text-align:center;}
/* makingof content */
.content-makingof {left: -47px;top:2px;background: url('images/layer-makingof.jpg.html') no-repeat;
  width:1197px; height: 721px;}
.content-makingof #content-layer {text-align: justify;width: 540px; height: 280px; top: 210px; left: 180px;
  font-size: 16px;padding: 0 20px;}
.blog-entry p {margin-bottom: 15px;}
.blog-entry h2 {margin-bottom: 10px;font-weight: bold;}
.blog-entry img {margin: 20px;}
.blog-entry-hidden {display: none;}
#prev-blog {width: 200px; height: 70px;top: 500px;left: 200px;}
#next-blog {width: 200px; height: 70px;top: 500px;left: 540px;}

/* parents content */
/*.content-parents {left: -7px;top:-180px;background: url('/css/images/layer-parents.png') no-repeat;
  width:1197px; height: 860px;}*/
.content-parents #content-layer {width: 900px; height: 500px;top: 150px; left: 100px;}
.content-parents h2 {font-size: 14px; margin: 10px 0 15px 0;font-family:"CrackedJohnnie", arial, sans-serif;}
.content-parents p {margin-bottom: 15px;}

/* assoc content */
.content-assoc #content-layer {width: 700px; height: 600px;top: 50px; left: 200px;font-size: 12px;line-height: 1.2;overflow: hidden;text-align:center;}
.content-assoc h2 {font-size: 14px; margin: 10px 0 5px 0;font-family:"CrackedJohnnie", arial, sans-serif;}

/* footer */
#footer {position:relative; z-index:12;padding:20px 0 0 280px;}
#footer a {background: url('images/sprite-bottomlinks.png');display:block;float:left;
  height: 30px;width: 180px;}
#footer a#footer-aikuisille {background: url(images/aikuisille.png);}
#footer a#footer-yhteistyokumppanit {background-position:-175px 0;width:260px;margin-left: 140px;}


/* forum overlay */
#forum-teaser {display:none;height: 30px; width: 300px; padding: 40px 50px 60px 50px; position: absolute; top: 200px; left: 50px;z-index: 20;
background: #222;text-align: center;border: solid 4px #D08E0C;color: #fff;font-family:"CrackedJohnnie", arial, sans-serif;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
#close-forum-teaser {text-decoration:none;position: absolute; top: -30px; right: 20px; 
    height: 30px; padding: 5px;width: 100px; font-size: 12px;color: #444;background: #D08E0C;text-align: right;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;font-family: arial, sans-serif;}    
#close-forum-teaser img {float:right;}
#close-forum-teaser span {float:right;padding-top: 5px;display:block;}    
    
#forum-overlay {display: none;padding: 5px;position: absolute; top: 120px; left:90px;z-index: 3000;
  background: #eee;box-shadow: 0 0 30px #000;}
#close-forum-iframe {text-decoration:none;position: absolute; top: -30px; right: 20px; 
    height: 30px; padding: 5px;width: 100px; font-size: 12px;color: #444;background: #eee;text-align: right;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;font-family: arial, sans-serif;}
#close-forum-iframe img, #goto-forum-iframe img {float:right;}
#close-forum-iframe span, #goto-forum-iframe span {float:right;padding-top: 5px;display:block;}
#goto-forum-iframe {text-decoration:none;position: absolute; top: -30px; right: 140px; 
    height: 30px; padding-top: 5px;width: 160px; font-size: 12px;color: #666;background: #eee;text-align: center;
    border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;font-family: arial, sans-serif;}


/*FONTS*/

/* first for IE 6/7/8 */
@font-face {
  font-family: CrackedJohnnie;
  src: url(fonts/CrackedJohnnie.eot.html);
}
@font-face {
  font-family: CrackedJohnnie;
  src: url(fonts/CrackedJohnnie.ttf.html);
}
/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: CrackedJohnnie;
  src: url(fonts/CrackedJohnnie.woff.html) format (‘woff’);
} 
/* first for IE 6/7/8 */
@font-face {
  font-family: IndigoJoker;
  src: url(fonts/IndigoJoker.eot.html);
}
@font-face {
  font-family: IndigoJoker;
  src: url(fonts/IndigoJoker.ttf.html);
}
/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: IndigoJoker;
  src: url(fonts/IndigoJoker.woff.html) format (‘woff’);
}