/***** Global Settings *****/
body { color: #fff; font-family: Arial, Helvetica, Verdana, Trebuchet MS, Tahoma;  }

a, a:visited { color: #fff; }
a:hover, a:active { color: #c29c4f; text-decoration: none; }

h1,h2,h3,h4 { font-family: Rockwell; text-transform: uppercase; font-weight: normal; }

DIV#wrapper { text-align: center; }

#talentphoto { display: none; margin: 0px auto 0px; }

#title { padding-bottom: 20px; }

#txt_maintitle { z-index:1; margin: 0px auto; padding: 0px; font-size: 7.1em; line-height: 1.0em; }
#txt_subtitle  { z-index:1; margin: 0px auto; padding: 0px; font-size: 4.5em; line-height: 1.0em; }

#txt_maintitle SPAN { background: #c29c4f; display: inline-block; padding: 5px 25px 0px; }
#txt_subtitle SPAN { background: #000; display: inline-block; padding: 5px 20px 3px; }

.article { width:506px; height: 108px; padding: 12px 12px 29px; text-align:left; background: url(../images/article_bg.png) bottom center no-repeat; background-size: 1000px 250px; }
.article .thumb { width: 205px; height: 107px; float: left; margin-right: 12px; overflow: hidden; }
.article .thumb img { width: 100%; }
.article h1 { font-family: Rockwell; text-transform: uppercase; padding: 0px; margin: 0px 0px 10px; line-height: 1.0em; }
.article p { font-size: 1.1em; }

#choosestations { text-align: center; }
#choosestation_hdr { margin: 0px auto 10px; width:240px; height: 50px; font-size: 1.8em; line-height: 2.3em; text-align: center; font-family: Rockwell; text-transform: uppercase; background: url(../images/choosestation_bg.png) bottom center no-repeat; background-size: 100%; }
#choosestation_list { margin: 0px auto; }
#choosestation_list .station { font-size: 1.3em; display: inline-block; font-family: Rockwell; text-transform: uppercase; text-align: left; background-position: center 8px; background-repeat: no-repeat; }
#choosestation_list .station_gold1043 { background-image: url(../images/logo_gold1043.png)}
#choosestation_list .station_wsfm { background-image: url(../images/logo_wsfm.png)}
#choosestation_list .station_4kq { background-image: url(../images/logo_4kq.png)}
#choosestation_list .station_cruise1323 { background-image: url(../images/logo_cruise1323.png)}

/* iPad (landscape) and Desktop */
@media only screen and (min-width : 1024px) {
    body { background: #000 url(../images/background.jpg) center 50px no-repeat; }

    DIV#wrapper { width: 1000px; height: 584px; position: relative; margin: 0px auto; text-align:left; margin-top: 50px; }
    BODY.debug DIV#wrapper { background: url(../images/background_guide2.png) top left no-repeat; }

    #txt_maintitle { margin-left: 140px; padding-top:53px; }
    #txt_subtitle  { margin-left: 668px; }

    .article { margin-left: 445px; }
    #choosestations { position: absolute; bottom: 30px; left: 445px;  }
    #choosestation_list { width:506px; height: 106px; background: #000; padding: 12px; }
    #choosestation_list .station { float: left; margin: 0px 13px; width: 100px; padding-top: 90px; text-align: center }
    #choosestation_list .station:hover { background-color: transparent; color: #c29c4f; }
    #choosestation_list .station .stationname { display: none; }

    #talentphoto { display: none !important; }
}

/* iPads (portrait) or Mobile ----------- */
@media only screen and (max-width : 1023px) { 
    .article { margin: 0px auto 10px; width: 80%; }
    #choosestations { width: 310px; margin: 0px auto 0px; position: relative; }
    #choosestation_hdr {   }
    #choosestation_list { width: 100%; }
    #choosestation_list .station { display: block; color: #c29c4f; background-color: #fff; background-size: 30px; background-position: 10px center; border-radius: 12px; padding: 0px 0px 0px 50px; margin: 0px 0px 10px; font-size: 2.0em; line-height: 2.4em; }
    #choosestation_list .station .stationname { display: inline-block; color: #c29c4f; width: 40%; float: left; }
    #choosestation_list .station .city { display: inline-block; color: #999; width: 50%; padding-left: 15px; float: left; background: url(../images/station_sep.png) left center no-repeat; }
}

/* iPads (portrait) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1023px)  {
    BODY.debug DIV#wrapper { background: url(../images/background_guide_tablet.png) top center no-repeat; background-size: 768px 1024px; }
    body { background: #000 url(../images/background_tablet.jpg) top center no-repeat;  background-size: 100%; }

    DIV#wrapper {
        width: 100%;
        padding-top: 30px; 
    }

    #txt_maintitle { margin-top: 30px; font-size: 6.0em }
    #txt_subtitle  { padding-left: 175px; font-size: 3.5em; }

    #talentphoto { display: block; height: 240px; }

    #choosestations { width: 400px; }

    .article { width: 68%; }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 767px) {
    BODY.debug DIV#wrapper { background: url(../images/background_guide_mobile2.png) top center no-repeat; background-size: 320px 568px; }
    body { background: #000 url(../images/background_mobile.jpg) top center no-repeat;  background-size: 100%; }

    DIV#wrapper {
        width: 100%;
        padding-top: 30px; 
    }

    #txt_maintitle { font-size: 25px; line-height: 30px; font-size:  }
    #txt_subtitle  { font-size: 17px; line-height: 17px; margin-left: 100px}

    #txt_maintitle span { padding: 6px 13px 3px; }
    #txt_subtitle  span { padding: 3px 10px; }

    #choosestations { width: 90%; max-width: 350px; }
    #choosestation_hdr{ width: 220px; height: 44px; font-size: 1.6em; }
    #choosestation_list { }
    #choosestation_list .station { margin-bottom: 8px; font-size: 1.45em; line-height: 2.4em; background-size: 25px; padding-left: 40px;  }

    .article { width: 85%; max-width: 450px; height: 68px; }
    .article .thumb { width: 130px; height: 68px; }
    .article h1 { font-size: 1.4em; }
    .article p { display: none; }
}