@import url('reset.css');

body {
  font: 62.5% Georgia, Times, serif;
  background: url('../images/bg_body.gif') 50% 0 repeat-y;
}

#wrapper {
  overflow: hidden; zoom: 1;
  width: 885px;
  min-height: 1003px;
  margin: 0 auto;
  padding: 0 17px;
  background: url('../images/bg.gif') 50% 0 no-repeat;
}

hr { display: none; }


/* Intro -------------------------------------------------------------------*/

#intro {
  width: 400px;
  float: left;
  margin-right: 85px;
  padding-top: 40px;
  padding-bottom: 100px;
}

  #intro h1 {
    width: 400px;
    height: 232px;
    background: url('../images/header.png') 100% 100% no-repeat;
    text-indent: -9999px; overflow: hidden;
    font: bold 3em Helvetica, Arial, sans-serif;
    color: #f78c0e;
    margin-bottom: 20px;
  }
  body.en #intro h1 { background-image: url('../images/header_en.png'); }

  #intro p {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 18px;
    text-align: right;
  }

  #intro h2 {
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    color: #f78c0e;
    text-align: right;
  }

  #intro .fria-tidningen { overflow: hidden; zoom: 1; }
    #intro .fria-tidningen a {
      display: block;
      float: right;
      width: 188px;
      height: 28px;
      text-align: left;
      text-indent: -9999px; overflow: hidden;
      background: url('../images/fria-tidningen.gif') no-repeat;
    }

  #intro .hr {
    float: right;
    width: 400px;
    height: 11px;
    margin: 50px -10px 10px 0;
    background: url('../images/intro_hr.gif') 100% 0 no-repeat;
  }

  #intro .starring {
    float: right;
    margin: 6px 0 0;
    text-align: left;
  }
    #intro .starring a {
      float: right;
      display: block;
      width: 152px;
      height: 18px;
      background: url('../images/starring.gif') no-repeat;
      text-indent: -9999px; overflow: hidden;
    }
    body.en #intro .starring a {
      width: 160px;
      background-image: url('..../images/starring_en.gif');
    }


/* Content -----------------------------------------------------------------*/

#content {
  width: 400px;
  padding-top: 50px;
  float: right;
}


  /* Randomizer */

  #content .instructions {
    width: 299px;
    height: 164px;
    margin-left: -4px;
    margin-bottom: 6px;
    text-indent: -9999px; overflow: hidden;
    background: url('../images/instructions.gif') no-repeat;
  }
  body.en #content .instructions { background-image: url('../images/instructions_en.gif'); }

  #content .randomizer {
    float: left;
    width: 291px;
    margin-bottom: 30px;
    background: #e3a739 url('../images/bg_randomizer.gif') 0 100% no-repeat;
  }

    #content .randomizer textarea {
      width: 265px;
      height: 160px;
      padding: 12px;
      border: 1px inset #ddd;
      font: 1em "Lucida Grande", Helvetica, Arial, sans-serif;
      color: #525252;
    }

    #content .randomizer .button {
      float: left;
      width: 291px;
      border-top: 1px solid #dc9108;
      background: url('../images/bg_randomizer.gif') 100% 100% no-repeat;
    }
      #content .randomizer .button a {
        display: block;
        width: 155px;
        height: 36px;
        margin: 5px auto;
        text-indent: -9999px; overflow: hidden;
        background: url('../images/btn_randomize.gif') 0 0 no-repeat;
      }
      body.en #content .randomizer .button a { background-image: url('../images/btn_randomize_en.gif'); }
        #content .randomizer .button a:hover { background-position: -155px 0; }
        #content .randomizer .button a:active { background-position: -310px 0; }

    #content .sharethis {
      clear: left;
      color: #fff;
      font-size: 1.2em;
      margin-bottom: 20px;
    }
      #content .sharethis a { color: #fff; }

    #content .blog-button {
      margin-left: -4px;
      margin-bottom: 20px;
    }
      #content .blog-button a {
        display: block;
        width: 268px;
        height: 89px;
        text-indent: -9999px; overflow: hidden;
        background: url('../images/blog-button.gif') no-repeat;
      }
      body.en #content .blog-button a { background-image: url('../images/blog-button_en.gif'); }

    #content .links h2 {
      height: 17px;
      text-indent: -9999px; overflow: hidden;
      background: url('../images/h_lanktips.gif') no-repeat;
    }
    body.en #content .links h2 { background-image: url('../images/h_links.gif'); }
    #content .links ul {
      font-size: 1.2em;
      line-height: 16px;
      color: #fff;
    }
      #content .links ul a {
        color: #fff;
        padding-left: 7px;
        background: url('../images/link-arrow.gif') 0 60% no-repeat;
      }


/* Blog button -------------------------------------------------------------*/

#blogbutton {
  display: none;
  position: absolute;
  z-index: 99;
  top: 180px;
  margin: 0 auto;
  width: 510px;
  padding: 20px 20px 10px;
  background-color: #fff;
}

#blogbutton_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  background: #000;
}

  #blogbutton p.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font: 1.1em Helvetica, Arial, sans-serif;
  }
    #blogbutton p.close a { color: #666; text-decoration: none; }
      #blogbutton p.close a:hover { color: #000; text-decoration: underline; }

  #blogbutton p.intro {
    font-size: 1.2em;
    margin-bottom: 1em;
  }

  #blogbutton .image {
    clear: left;
    overflow: hidden; zoom: 1;
    padding-bottom: 10px;
  }
    #blogbutton .image img {
      display: block;
      float: left;
      margin-right: 20px;
      width: 100px;
      height: 100px;
      background: url('../images/transparent.gif');
    }
    #blogbutton .image h2 {
      width: 60%;
      float: left;
      font-size: 1.2em;
      margin-top: 8px;
      margin-bottom: 0.5em;
    }
    #blogbutton .image textarea {
      float: left;
      width: 384px;
      height: 40px;
      padding: 0;
      border: 1px inset #ddd;
      font: 1.2em "Courier New", Courier, monospace;
      color: #333;
    }

    /* Sound player -------------------------------------------------------------*/

    #sound-player {
      float:left;
      width: 314px;
      height: 214px;
      background: #dd9108 url('../images/sound-player-bg.gif') 0 0 no-repeat;
      margin-left: -22px;
      margin-bottom: 30px;
    }

    #sound-player-select {
      margin-left: 60px;
      margin-top:120px;
      width: 150px;
      background: #fff;
      border:0;
      color: #555;
      height: 30px;
      font-family: "Times New Roman";
      font-size: 12px;
      padding: 6px;
      -moz-border-radius: 8px;
      background-color: #dadada;
    }

    #sound-player-play {
      float:left;
      margin-left: 45px;
      margin-top: 10px;
      background: url('../images/sound-player-play.gif') 0 0 no-repeat;
      width: 64px;
      height: 35px;
      text-indent: -9999px; overflow: hidden;
    }

    #sound-player-stop {
      float:left;
      margin-left: 45px;
      margin-top: 10px;
      background: url('../images/sound-player-play.gif') -127px 0 no-repeat;
      width: 64px;
      height: 35px;
      text-indent: -9999px; overflow: hidden;
      display:none;
    }

    #sound-player-play:hover { background-position: -63px 0; }
    #sound-player-stop:hover { background-position: -189px 0; }

    #sound-player-download {
      float:left;
      margin-left: 10px;
      margin-top: 23px;
      background: url('../images/sound-player-download.gif') 0 0 no-repeat;
      width: 100px;
      height: 13px;
      text-indent: -9999px; overflow: hidden;
    }

    #sound-player div{
      padding:0;
      margin:0;
    }

    #sound-player div:after,  #sound-player-big:after, .randomizer-big:after{
        content: "."; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;
    }

    body.en #content #sound-player-download {
      background: url('../images/sound-player-download-en.gif') 0 0 no-repeat;
    }

    body.en #content #sound-player-play {
        background: url('../images/sound-player-play-en.gif') 0 0 no-repeat;
    }
    body.en #content #sound-player-play:hover { background-position: -63px 0; }
    body.en #content #sound-player-stop:hover { background-position: -189px 0; }

    body.en #content #sound-player {
        background: #dd9108 url('../images/sound-player-bg-en.gif') 0 0 no-repeat;
    }