@charset 'utf-8';
@media all {
    * {
        margin: 0;
        padding: 0;
    }
    a {
        outline: none;
    }
    body, html {
        width: 100%;
        height: 100%;
    }
    html {
        background: url(bg.jpg) repeat-x;
        overflow-y: scroll;
    }
    #container {
        width: 900px;
        min-height: 650px;
        height: 650px;
        margin: 0 auto;
        background: url(/static/map.gif) no-repeat 560px 160px;
    }
    html>/**/body #container {
        height: auto;
    }
    #header {
        height: 115px;
        overflow: hidden;
    }
    #header p {
        display: block;
        margin: -92px 45px 0 0;
        height: 30px;
        background: url(/static/header.slogan.jpg) no-repeat top right;
        text-indent: -10000px;
    }
    #header a {
        display: block;
        width: 215px;
        height: 62px;
        margin: 50px 45px 0 auto;
        background: url(/static/header.logo.jpg) no-repeat top right;
        text-indent: -10000px;
    }
    #footer {
        margin-top: 40px;
        height: 15px;
    }
    #footer a {
        display: block;
        float: left;
        color: #808080;
        margin-right: 20px;
        font: 8pt Verdana;
        text-decoration: none;
        height: 15px;
        text-indent: -10000px;
        background: url(/static/footer.allinone.gif) 0 1px no-repeat;
    }
    #footer a.inetradio {
        width: 60px;
        background-position: -1px 1px;
    }
    #footer a.stations {
        width: 80px;
        background-position: -61px 1px;
    }
    #footer a.sitemap {
        width: 61px;
        background-position: -144px 1px;
    }
    #content {
        position: relative;
        height: auto !important;
        height: 1px; /* stupid IE */
    }
    #content .onmap {
        width: 165px; /* 160 */
        height: 22px;
        background: url(/static/station.mark.gif) no-repeat left center;
        padding: 0 0 0 7px;
    }
    #content .siljaline-marker {
        position: absolute;
        width: 165px; /* 160 */
        height: 22px;
        background: url(/static/station.mark.blue.gif) no-repeat left center;
        padding: 0 0 0 7px;
    }
    #content .lomarengas-marker {
        position: absolute;
        width: 205px; /* 160 */
        height: 22px;
        background: url(/static/station.mark.yellow.gif) no-repeat left center;
        padding: 0 0 0 7px;
    }
    #content div.marker-enontekio {
        top: 120px;
        left: 650px;
    }
    #content div.marker-hankasalmi {
        top: 360px;
        left: 690px;
    }
    #content div.marker-inari {
        top: 76px;
        left: 708px;
    }
    #content .siljaline-marker-helsinki {
        top: 493px;
        left: 678px;
    }
    #content .siljaline-marker-turku {
        top: 472px;
        left: 615px;
    }
    #content .onmap .title, #content .siljaline-marker .title, #content .lomarengas-marker .title {
        padding: 0 4px 0 8px;
        display: block;
        font: bold 8pt Verdana;
        line-height: 22px;
        color: black;
        background: url(/static/map.title.bg.png) no-repeat left center;
        float: left;
    }
    #content .siljaline-marker .title, #content .lomarengas-marker .title {
        padding: 0 0 0 12px;
    }
    #content .siljaline-marker a, #content .lomarengas-marker a {
        color: #000;
        text-decoration: none;
    }
    #content .siljaline-marker a:hover, #content .lomarengas-marker a:hover {
        text-decoration: underline;
    }
    #content .onmap .hz, #content .siljaline-marker .arrow, #content .lomarengas-marker .arrow {
        padding: 0 7px 0 0;
        display: block;
        font: 8pt Verdana;
        line-height: 22px;
        color: black;
        background: url(/static/map.title.bg.png) no-repeat right center;
        float: left;
    }
    #content .siljaline-marker .arrow, #content .lomarengas-marker .arrow {
        overflow: hidden;
        font: 10pt Verdana;
        font-weight: normal !important;
        line-height: 18px;
        padding: 2px 8px 2px 0;
        color: transparent;
        width: 2px;
    }
    #content .siljaline-marker:hover .arrow, #content .lomarengas-marker:hover .arrow {
        color: #555;
        width: 8px;
        padding-left: 2px;
    }
    #content .onmap .mock {
        display: block;
        font: 8pt Verdana;
        line-height: 22px;
        color: black;
        background: url(/static/map.title.bg.png) no-repeat right center;
        float: left;
        width: 7px;
        height: 22px;
        margin-left: 0;
    }
    #content .ad-middle, #content .ad-bottom, #content .ad-right {
        font: 9pt Verdana;
    }
    #content .ad-middle {
        margin-top: -30pt;
        margin-bottom: 0;
    }
    #content .ad-middle iframe {
        border: none;
        overflow: hidden;
    }
    #content .ad-bottom {
        margin: 20pt 0 0 0;
        padding: 0;
        position: relative;
        left: -15pt;
    }
    #content .ad-right {
        padding: 0 0 30pt 0;
        position: absolute;
        left: 580px;
        top: 570px;
    }
    #container div.ad-top {
        position: absolute;
        top: 25px;
        border: 1px solid #BBB;
        background: #FFF;
        padding: 5px;
        margin-left: 40px;
    }
    #navigation {
        display: block;
        list-style: none;
        position: absolute;
        top: 0;
    }
    #navigation li {
        float: left;
    }
    #navigation li a {
        display: block;
        height: 30px;
        text-indent: -10000px;
        background: url(/static/menu.allinone.gif) 0 11px no-repeat;
    }
    #navigation li.all a {
        width: 100px;
        background-position: -1px 11px;
    }
    #navigation li.popular a {
        width: 100px;
        background-position: -99px 11px;
        margin-left: 20px;
    }
    #navigation li.yle a {
        width: 80px;
        background-position: -199px 11px;
        margin-left: 20px;
    }
    #navigation li.commercial a {
        width: 80px;
        background-position: -278px 11px;
        margin-left: 20px;
    }
    #navigation li.frequencies a {
        width: 75px;
        background-position: -357px 11px;
        margin-left: 20px;
    }
    #content .sortby {
        margin: -20px 20px -15px 0;
        height: 25px;
        widht: 100%;
        overflow: hidden;
    }
    #content .sortby a {
        text-indent: -10000px;
    }
    #content .sortby .rating {
        float: right;
        width: 24px;
        height: 24px;
        display: block;
        background: url(/static/sort.rating.gif) 4px 4px no-repeat;
    }
    #content .sortby .rating:hover {
        background: url(/static/sort.rating.hover.gif) 4px 4px no-repeat;
    }
    #content .sortby .alphabet {
        float: right;
        width: 24px;
        height: 24px;
        display: block;
        background: url(/static/sort.alphabet.gif) 4px 4px no-repeat;
    }
    #content .sortby .alphabet:hover {
        background: url(/static/sort.alphabet.hover.gif) 4px 4px no-repeat;
    }
    #stations {
        width: 280px;
        height: 300px;
        overflow: auto;
        margin: 13pt 0 0 25px;
        padding-bottom: 1px;
        list-style: none;
    }
    #content ul.medium, #content ol.medium {
        height: 300px;
    }
    #content ul.inline, #content ol.inline {
        width: 400px;
        margin-left: 0;
        margin-bottom: 17pt;
    }
    #content ul.auto, #content ol.auto {
        height: auto;
    }
    #stations li {
        border: 1px solid #999;
        border-width: 1px 0;
        margin-right: 5px;
        margin-bottom: -5px;
        height: 22px;
    }
    html>/**/body #stations li {
        margin-bottom: -1px;
    }
    #stations li a:hover {
        background: #EFEFEF;
    }
    #stations li a {
        height: 14px;
        display: block;
        padding: 4px 0 4px 10px;
        margin: 0 85px -4px 0;
        text-decoration: none;
        font: 9pt Verdana;
        line-height: 14px;
        color: black;
    }
    #stations .rating {
        display: block;
        float: right;
        margin: -18px 0 0;
        width: 80px;
        height: 22px;
        font: 5pt Verdana;
        background: white url(/static/starbox/star.small.empty.gif) 0 3px repeat-x; /* #ffcc1c */
        text-indent: -10000px;
    }
    #stations .rating .bg {
        background: #ffcc1c;
        width: 45px;
        height: 16px;
        display: block;
        margin: 3px 0 0 0;
    }
    #stations .rating .stars {
        background: url(/static/starbox/star.small.fill.gif) 0 0 repeat-x; /* #ffcc1c */
        width: 45px;
        height: 16px;
        display: block;
        margin: -16px 0 0 0;
    }
    #text {
        margin: 0 0 0 40px;
        padding-top: 70px;
        width: 400px;
        min-height: 370px;
    }
    * html #text {
        height: 370px; /* min-height for IE */
    }
    #text h1, #text h2, #text h3, #text h4 {
       /* TODO remove? */
    }
    #text p strong {
        font-weight: bold;
    }
    #text p em {
        font-style: italic;
    }
    #text a {
        color: #2E437D;
    }
    #text h1, #text h2 {
        margin-bottom: 12pt;
        padding-left: 22px;
    }
    #text h1 {
        font: 14pt Verdana;
        letter-spacing: 0.02em;
        height: 20px;
    }
    #text h2 {
        font: bold 10pt Arial;
        height: 20px;
    }
    #text h1.inetradio {
        background: url(/static/heading.internet-radio.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h1.stations {
        background: url(/static/heading.stations.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h1.popular {
        background: url(/static/heading.popular.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h1.yle {
        background: url(/static/heading.yle.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h1.commercial {
        background: url(/static/heading.commercial.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h2.listen {
        background: url(/static/heading.listen.gif) no-repeat 20px;
        height: 20px;
        text-indent: -10000px;
    }
    #text h2.radiocommunity {
        background: url(/static/heading.radiocommunity.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h2.listeners {
        background: url(/static/heading.listeners.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text h2.frequencies {
        background: url(/static/heading.frequencies.gif) no-repeat 20px;
        text-indent: -10000px;
    }
    #text p {
        margin-bottom: 13pt;
        font: 9pt Verdana;
        line-height: 12pt;
    }
    #text div.frequencies img {
        display: block;
        margin: 25pt 0 0 10pt;
        float: left;
    }
    #text div.frequencies a.live {
        display: block;
        width: 110px;
        height: 18px;
        background: url(/static/link.live-broadcast.gif) no-repeat;
        font: 9pt Verdana;
        text-indent: -10000px;
        margin: 35pt 0 0 14pt;
        float: left;
    }
    #text div.frequencies table {
        clear: both;
        margin: 20pt 0 0 0;
        padding: 0;
        border-collapse: collapse;
        font: 9pt Verdana;
        width: 100%;
        border-top: 1px solid #AAA;
    }
    #text div.frequencies table tr:hover td, #text div.frequencies table tr.hover td {
        background: #EFEFEF;
    }
    #text div.frequencies table tr th {
        text-align: left;
        padding-bottom: 7pt;
    }
    #text div.frequencies table tr td a {
        text-decoration: none;
        display: block;
        color: #2E437D;
        width: 100%; /* hasLayout */
    }
    #text div.frequencies table tr td a:hover {
        text-decoration: underline;
    }
    #text div.frequencies table tr td {
        border-bottom: 1px solid #AAA;
        line-height: 14.5pt;
        padding: 0 0 0 5pt;
    }
    #text div.frequencies table tr td.hz {
        width: 75px;
        text-align: right;
        color: #444;
        padding: 0 5pt 0 0;
    }
    #text div.frequencies table tr td.stations {
        width: 120px;
        text-align: right;
        color: #444;
        padding: 0 5pt 0 0;
    }
    #text div.frequencies table tr td a.find {
        display: block;
        float: right;
        margin: -22px 0 0 10px;
        width: 97px;
        height: 22px;
        background: url(/static/link.find.map.gif) no-repeat 0 4px;
        font: 9pt Verdana;
        text-indent: -10000px;
    }
    #station {
        padding-bottom: 13pt;
    }
    #station .slogan {
        display: block;
        font: 9pt sans-serif;
        height: 20px;
        color: #444;
        font-style: italic;
        margin-left: 50px;
        position: relative;
        top: -7px;
        margin-bottom: -20px;
    }
    #station .logo {
        margin: 50px 0 30px 10px;
    }
    #station p {
        margin: 0 0 7pt 0;
    }
    #station a {
        display: block;
        font: 8pt Verdana;
        line-height: 20px;
        margin-bottom: 40pt;
    }
    #content .rate {
        height: 20px;
        background: url(/static/loading.gif) no-repeat 40px 0;
        margin: 10px 0 5px 0;
        width: 90px;
    }
    #radio {
        width: 430px;
        height: 100px;
        position: absolute;
        top: 180px;
        left: 430px;
    }
    #radio span {
        display: block;
        font: bold 10pt Verdana;
    }
    #radio .name {
        display: block;
        color: #2E437D;
        font: 15pt Verdana;
        margin: 25px 0 0 15px;
    }
    #content .frequencies-all {
        display: block;
        background: url(/static/frequencies.all.gif) no-repeat 0 0;
        height: 18px;
        width: 130px;
        font: 9pt Verdana;
        text-indent: -10000px;
        position: absolute;
        top: 300px; /* 55 */
        left: 510px; /* 540 */
    }
    #content .see-also {
        margin: 7pt 0 0 0;
        font: 8pt Verdana;
        color: #333;
    }
    #content .see-also a {
        color: #444;
    }
    #sidebar {
        width: 185px;
        height: 300px;
        position: absolute;
        padding: 11px 14px;
        top: 122px;
        left: 527px;
        background: url(/static/sidebar.gif) no-repeat;
    }
    #sidebar h3 {
        display: block;
        height: 15px;
        background: url(/static/sidebar.heading.listen.gif) 15px 0 no-repeat;
        font: bold 8pt Verdana;
        text-indent: -10000px;
    }
    #sidebar ul {
        width: 160px;
        height: 230px;
        clear: both;
        margin: 10px 0 6px 0;
        list-style: none;
        border-top: 1px solid #999;
    }
    #sidebar ul li {
        border-bottom: 1px solid #999;
    }
    #sidebar ul li a:hover {
        background: #EFEFEF;
    }
    #sidebar ul li a {
        display: block;
        padding: 4px 0 4px 10px;
        text-decoration: none;
        font: 9pt Verdana;
        line-height: 14px;
        color: black;
    }
    #sidebar .more {
        display: block;
        background: url(/static/sidebar.more.gif) 0 1px no-repeat;
        font: 9pt Verdana;
        width: 54px;
        height: 19px;
        margin-left: 95px;
        text-indent: -10000px;
    }
    #player {
        clear: both;
    }
    #sitemap li {
        list-style: none;
    }
    #sitemap li ul {
        margin-left: 30px;
    }
    #sitemap li a {
        font: 9pt Verdana;
    }
}