/*--------------------------------------------------------
| |  (_)         | |                             (_) |   
| | ___ _ __   __| | ___ _ __ _ __ ___  _   _ ___ _| | __
| |/ / | '_ \ / _` |/ _ \ '__| '_ ` _ \| | | / __| | |/ /
|   <| | | | | (_| |  __/ |  | | | | | | |_| \__ \ |   < 
|_|\_\_|_| |_|\__,_|\___|_|  |_| |_| |_|\__,_|___/_|_|\_\
----------------------------------------------------------*/


/*----------------------------------
   document
----------------------------------*/
body { font-family: Helvetica, Arial, Sans Serif; font-size: 12px;
       color: #333333;
       background-image: url(../img/background.png);
       background-color: #eaeff1;
       background-position: center top;
       background-repeat: no-repeat; }
#page-container { width: 980px; margin: auto;
                  background: url(../img/page-shadow-bg.png) center top repeat-y;}
#page-container-footer { width: 980px; margin: auto; height: 4px;
                         background: url(../img/page-shadow-bottom-bg.png) center top repeat-y;}
#page { width: 970px; margin: auto; }


/*----------------------------------
   standard elements
----------------------------------*/   
h1 { font-size: 22px; color: #005ba6; font-weight: normal;
     margin-bottom: 16px; }
p { margin-bottom: 15px; }
hr { border: 0; width: 100%; color: #DCE4E7; background-color: #DCE4E7;
     height: 3px; }
h4 { margin-top: 15px; margin-bottom: 15px; font-size: 16px; }
h4.blue { color: #005ba6; }
a, a:visited, a:hover { color: #005ba6; text-decoration: none;}
a:hover { color: #000b56; }

h2.purple { color: #391261; }
h2.blue { color: #005ba6; }
h1.purple { color: #391261; }
h1.large { font-size: 48px; }
h1.fuschia { color: #ce198e; }

.white-square { background-color: #fff; width: 95px; height: 75px; }
.white-square .block { }

.errorlist li { color: #f00; font-weight: bold;}
input, textarea { font-family: Sans-serif; font-size: 11px; }


/*----------------------------------
   utility
----------------------------------*/   
.clear { clear: both; }
.block { padding: 14px; }
.block.shallow { padding-top: 2px; padding-bottom: 2px; }
.block.flush-right { padding-right: 0px; }
.block.flush-top { padding-top: 0px; }
.column { float: left; margin-right: 10px; }
.column.last { margin-right: 0px; }
.column.wide { width: 725px; }
.column.narrow { width: 206px; }
.column.inner.half { width: 340px; }
a img { text-decoration: none; padding: 0; }
.row { margin-bottom: 15px; }
.row.last { margin-bottom: 0px; }
.text-block { line-height: 18px; }
.dark { background-color: #e3ebef; }
.center { text-align: center; }
.align-right { text-align: right; }
p.large { font-size: 14px; }

a.underline { text-decoration: underline; }


/*----------------------------------
   modal window(s))
----------------------------------*/
#modal { 
    display: none;
    
    position: fixed;
    top: 5%;
    left: 50%;
    
    margin-left: -250px;
    width: 500px;
    
    background-color: #fff;
    color: #333;
    border: 1px solid black;
    padding: 12px;
         }

#ecard-modal { 
    display: none;
    
    position: fixed;
    top: 3%;
    left: 50%;
    
    margin-left: -365px;
    width: 710px;
    
    background-color: #fff;
    color: #333;
    border: 1px solid black;
    padding: 12px;
         }


/*----------------------------------
   rounded-corner boxes
----------------------------------*/   
.rounded-box .box-content { background: url(../img/box-body-bg.png) top left repeat-y;
                            width: 724px; }
.rounded-box .box-footer { background: url(../img/box-footer-bg.png) top left no-repeat;
                           width: 724px; height: 7px; }
.rounded-box .box-head { width: 724px; height: 42px; }
.box-head-blue { background: url(../img/box-head-blue.png) top left no-repeat; }
.box-head-age { background: url(../img/box-head-age.png) top left no-repeat; }
.box-head-albums { background: url(../img/box-head-albums.png) top left no-repeat; }
.box-head-style { background: url(../img/box-head-style.png) top left no-repeat; }
.box-head-themes { background: url(../img/box-head-themes.png) top left no-repeat; }
.box-head-tracks { background: url(../img/box-head-tracks.png) top left no-repeat; }


.rounded-box .box-head h2 { color: #fff; position: relative; top: 20px; left: 25px;
                            font-size: 15px; }

.small-rounded-box { width: 340px; height: 33px; }
.small-rounded-box.light { background: url(../img/small-rounded-box-light-bg.png) top left no-repeat; }
.small-rounded-box.dark { background: url(../img/small-rounded-box-dark-bg.png) top left no-repeat; }
.small-rounded-box .block { padding: 10px; }


/*----------------------------------
   header row
----------------------------------*/   
#header { background: url(../img/kindermusic-header.png) top left no-repeat;
          width: 970px; height: 107px; position: relative; }
#account-control-panel { color: #fff; position: absolute; top: 10px; right: 20px; }
#language-control-panel { color: #fff; position: absolute; top: 85px; right: 20px; }
#language-control-panel span { font-weight: bold; }
#language-control-panel a { color: #fff; text-decoration: underline; }
#language-control-panel a:hover { text-decoration: none; }
#account-control-panel a { color: #fff; text-decoration: none; }
#account-control-panel a:hover { text-decoration: underline; }
#credits-indicator { position: absolute; right: 20px; top: 35px;
                     background: url(../img/head-button-background.png) top left no-repeat;
                     width: 229px; height: 42px; color: #666;}
#credits-indicator-content { position: relative; }
#credits-indicator-content .label { position: absolute; left: 15px; top: 14px;
                                    font-size: 14px; }
#credits-indicator-content .credits-count { position: absolute; left: 75px; top: 12px;
                                            font-size: 18px; }
#credits-indicator-content #header-redeem-button { position: absolute;
                                                   top: 10px;
                                                   right: 65px;}
#credits-indicator-content #header-credits-button { position: absolute;
                                                   top: 10px;
                                                   right: 5px;}


/*----------------------------------
   content row
----------------------------------*/   
#content { background-color: #fff; min-height: 600px; }
.content-block { padding-top: 5px; }


/*----------------------------------
   footer row
----------------------------------*/   
#footer { color: #8d8d8d; padding-top: 10px; padding-bottom: 25px;
          font-size: 11px; margin-top: 10px; width: 980px; margin: auto;}
#footer a { color: #8d8d8d; }
#footer a:hover { color: #333; }
#footer-links { float: left; margin-left: 190px; }
#copyright { float: left; margin-left: 50px; }


/*----------------------------------
   browse/search
----------------------------------*/
#browse-sidebar { background: url(../img/browse-bg.png) top left no-repeat;
                  width: 206px; height: 277px; position: relative; }
#browse-sidebar .sidebar-label { color: #481d7c; position: absolute; left: 13px; top: 16px;
                                 font-size: 15px; font-weight: bold;}
#browse-links { position: absolute; top: 46px; left: 11px; }
#browse-links a { display: block; margin-bottom: 3px; position: relative;
                  width: 185px; height: 33px; }
#browse-links a span { position: absolute; left: 10px; top: 10px; color: #fff;
                       font-size: 13px; font-weight: bold; }

a#browse-by-tracks-link { background-image: url(../img/browse-by-tracks.png);
                          margin-bottom: 6px; }
a#browse-by-tracks-link:hover { background-image: url(../img/browse-by-tracks_active.png); }
a#browse-by-albums-link { background-image: url(../img/browse-by-albums.png);
                          margin-bottom: 4px; }
a#browse-by-albums-link:hover { background-image: url(../img/browse-by-albums_active.png); }
a#browse-by-age-link { background-image: url(../img/browse-by-age.png);
                       margin-bottom: 5px; }
a#browse-by-age-link:hover { background-image: url(../img/browse-by-age_active.png); }
a#browse-by-theme-link { background-image: url(../img/browse-by-theme.png); }
a#browse-by-theme-link:hover { background-image: url(../img/browse-by-theme_active.png); }
a#browse-by-style-link { background-image: url(../img/browse-by-style.png); }
a#browse-by-style-link:hover { background-image: url(../img/browse-by-style_active.png); }


#search-box { background: url(../img/search-box-bg.png) top left no-repeat;
              width: 186px; height: 32px; position: absolute;
              left: 10px; top: 235px; }
#search-contents { padding-left: 8px;  padding-top: 4px; }
#search-submit-button { display: block; }
#search-input { border: 0; font-size: 12px; display: block; float: left;
                padding-top: 5px; width: 135px; margin-right: 12px; color: #666; }


/*----------------------------------
   recently viewed sidebar
----------------------------------*/
#recently-viewed-sidebar { position: relative; }
#recently-viewed-sidebar .recently-viewed-header { color: #3A1565; position: absolute;
                                                   left: 15px; top: 20px; font-size: 15px;
                                                   font-weight: bold; }
#recently-viewed-sidebar .block { padding-top: 55px; }
#recently-viewed-sidebar li { padding-top: 5px; padding-bottom: 5px; padding-left: 25px;
                              background: url(../img/small-blue-arrow.png) 5px center no-repeat; }


/*----------------------------------
   homepage
----------------------------------*/   
#homepage-tabs { /*background: url(../img/homepage-tabs-bg.png) top left no-repeat;*/
                 width: 725px; /*height: 275px;*/ margin-top: 15px;}
#about-tab { display: block; }
.homepage-tab { display: none; }
#homepage-tab-controls { background: url(../img/hp-tabs/about.png) top left no-repeat;
                         width: 725px; height: 42px; display: table;}
.homepage-tab-link { display: block; float: left; width: 144px; height: 43px;
                     font-size: 15px; }
.homepage-tab-link div { padding-top: 18px; text-align: center; }
.homepage-tab-link.active { color: #fff; font-weight: bold; }
.homepage-tab-link { color: #666; }
#recently-viewed-sidebar { background: url(../img/recently-viewed-bg.png) top left no-repeat;
                           width: 206px; height: 232px; }
.spotlight .box { padding-top: 10px; }

.spotlight-inactive { display: none; }
.spotlight-active { display: block; }

.spotlight-image { background: url(../img/spotlight-cover-frame.png) top left no-repeat;
                   width: 212px; height: 212px; margin-top: 5px; }

.spotlight-image img { margin-left: 5px; margin-top: 5px; }
#spotlight-controls { text-align: right; position: relative; top: -6px;
                      right: 10px; }
.spotlight.active .spotlight-links { display: block;  position: absolute; right: 5px; top: 0px; }
.spotlight .spotlight-links { display: none; }
.spotlight-links span { color: #888; padding-right: 10px; }
.spotlight-links a { padding: 4px; margin-right: 5px; text-decoration: none;
                     padding-top: 4px; padding-left: 6px; }
.spotlight-links a img { position: relative; top: 4px; }
.spotlight-links a:hover { text-decoration: none; }
.spotlight-links a.arrow { padding: 0px; padding-bottom: 0px; padding-top: 0px; }
.spotlight-links .active, .spotlight-links .active:visited { background: url(../img/spotlight-button-active-bg.png) top left no-repeat;
                                                             color: #fff; }

.spotlight-links a.inactive, .spotlight-links a.inactive:visited { background: url(../img/spotlight-button-inactive-bg.png) top left no-repeat;
                                                                   color: #333; }
.spotlight-rating { margin-top: 50px; }
.spotlight-download { margin-top: 10px; }


/*----------------------------------
   pagination
----------------------------------*/   
/*.pager span { color: #888; padding-right: 10px; }*/
.pager a { margin-right: 5px; text-decoration: none;
           padding-top: 4px; text-align: center; padding: 4px;
           padding-left: 2px; }
.pager a img { position: relative; top: 4px; }
.pager a:hover { text-decoration: none; }
.pager a.arrow { padding: 0px; padding-bottom: 0px; padding-top: 0px; }
.pager .active, .pager .active:visited { background: url(../img/spotlight-button-active-bg.png) top left no-repeat;
                                           color: #fff; }
.pager a.inactive { background-color: #fff; color: #333;
                    background: url(../img/spotlight-button-inactive-bg.png) top left no-repeat; }
.pager .pager-label { padding-right: 10px; }


/*----------------------------------
   browse-by-alpha pages
----------------------------------*/   
.alpha-browser { width: 700px; }
.alpha-browser-head { background: url(../img/alpha-browse-head-bg.png) top left no-repeat;
                      width: 700px; height: 15px; }
.alpha-browser-footer { background: url(../img/alpha-browse-footer-bg.png) top left no-repeat;
                      width: 700px; height: 15px; }

.alpha-browser .results { width: 693px; border: solid 3px #dce0ef;
                          border-top: none; border-bottom: none;
                          background-color: #eaeff2; }

.alpha-browser .results ul { display: block; float: left; width: 229px;
                    margin: 0; padding: 0; list-style-type: none; }
.alpha-browser .results ul.first { width: 235px; }
.alpha-browser .results ul li { width: 100%; margin: 0; padding: 0; list-style-type: none; }
.alpha-browser .results ul li div { padding-right: 0px; padding-left: 0px;
                                    padding-top: 10px; padding-bottom: 10px; }
.alpha-browser .results ul.first li div { padding-left: 15px; }
.alpha-browser .results ul li.light { background-color: #eaeff2; }
.alpha-browser .results ul li.dark { background-color: #e3e8ec; }
.alpha-browser .results ul li a { text-decoration: none; padding-left: 25px;
                                  background: url(../img/small-blue-arrow.png) 5px center no-repeat; }
.alpha-browser .results ul li a.has-activity { background: url(../img/activity-button-small.png) 5px center no-repeat; }
.alpha-range-links { background-color: #e3e8ec; padding-top: 10px; padding-bottom: 10px;
                     border: solid 3px #dce0ef;
                     width: 693px; border-bottom: none; border-top: none; }
.alpha-range-link { text-align: center; width: 64px; height: 35px; float: left;
                    background: url(../img/alpha-button-inactive-bg.png) top left no-repeat;
                    margin-left: 11px; }
.alpha-range-link.first { margin-left: 17px; }
.alpha-range-link.active { background: url(../img/alpha-button-active-bg.png) top left no-repeat; }
.alpha-range-link a { color: #333; text-transform: uppercase; padding-top: 11px;
                      display: block; text-decoration: none; }
.alpha-range-link.active a { color: #fff; padding-top: 11px; display: block; }
.alpha-browser .pager-row { background-color: #eaeff2; border: solid 3px #dce0ef;
                            width: 693px; border-bottom: none; border-top: none; }
.alpha-browser .pager { float: right; padding-right: 20px; padding-top: 15px;
                        padding-bottom: 10px; }


/*----------------------------------
   browse/search filtering
----------------------------------*/   
.browse-search-filters { margin-top: 25px; margin-bottom: 25px; }
.browse-search-filters .search-filter-option { float: left; margin-right: 10px; }
.browse-search-filters h5 { margin-bottom: 10px; margin-top: 10px; }


/*----------------------------------
   track/album details
----------------------------------*/   
.framed-image { background: url(../img/image-frame.png) top left no-repeat;
                width: 250px; height: 250px; margin-top: 5px; }
.framed-image .block { padding: 8px; }
.small-framed-image { background: url(../img/small-image-frame.png) top left no-repeat;
                      width: 130px; height: 130px; margin-top: 7px; }
.small-framed-image .block { padding: 5px; }

.track-detail .download-link-area, .album-detail .download-link-area { margin-top: 50px; display: block; }
.download-link-area a, .download-link-area a { display: block; float: left; margin-left: 5px; }

.rounded-table td .download-link-area { margin-top: 0px; }

.download-link-area.wide { width: 110px; }

.related-albums { width: 727px; height: 164px;
                  background: url(../img/recommendations-bg.png) top left no-repeat; }

/*----------------------------------
   rounded/gray table
----------------------------------*/
.rounded-table td, .rounded-table th { padding: 15px;
                                       padding-bottom: 10px;
                                       padding-top: 10px; }
.rounded-table th { text-align: center; }

.rounded-table tr.dark td,.rounded-table tr.dark th { background-color: #D6DEE1; }
.rounded-table tr.light td,.rounded-table tr.light th { background-color: #E4EBF1; }
.rounded-table { border-collapse: separate;
                 border-spacing: 5px 5px; position: relative;
                 left: -5px; }
.rounded-table-container .column { margin-right: 0px; }
.rounded-table { width: 100%; }


/*----------------------------------
   search results page
----------------------------------*/
.search-results-head { margin-top: 10px; }
.search-results-head { padding-left: 5px; }
.search-results-head h1 { margin-top: 8px; }
.large-search-controls { border: solid 1px #ccc; width: 500px; }
.large-search-controls .large-search-input { border: 0; width: 300px;
                                             padding-top: 6px;
                                             font-size: 14px;
                                             color: #666; }
.search-results-head .button-column { background-color: #DCE1E5;
                                      width: 162px; }
.large-search-controls .filter-select { position: relative; top: -5px; }
.large-search-controls .search-submit { position: relative; top: 3px;
                                        left: 5px; }


/*----------------------------------
   customer welcome pages
----------------------------------*/
.member-class-album { margin-bottom: 20px; }
.member-class-album.row2 { background-color: #f0f0f0; }
.member-class-album .images-album-download .cover-image { float: left; margin-right: 10px; }
.member-class-album .cover-image .block { padding: 5px; }
.member-class-album .pdf-cover-image { margin-top: 7px; }
.member-class-album h2 { font-size: 15px; margin-top: 10px;}
.class-download.single .top { display: none; }
.class-download.single .bottom { display: none; }
.class-download.single { background: url(../img/class-music-frame-bg.png) top left no-repeat;
                         width: 339px; height: 197px; }
.class-download h2 { font-size: 15px; }
.class-download .album-title { margin-top: 10px; margin-bottom: 15px; }
.free-download { margin-top: 15px; }
.free-download .download-song-link { position: relative; top: 7px; }

.white-square { background-color: #fff; width: 95px; height: 70px; }
.white-square .block { text-align: center; }


/*----------------------------------
   account information
----------------------------------*/
table.member-info-table td, table.member-info-table th { padding: 15px;
                                                        font-size: 14px; }
table.member-info-table th { text-align: right; font-weight: bold; }
.player-widget { height: 25px; }


/*----------------------------------
   forms
----------------------------------*/
label.required { font-weight: bold; }
fieldset div { padding-bottom: 30px;}
fieldset { margin-bottom: 30px; margin-top: 30px; padding-left: 25px; }
fieldset.border-bottom { border-bottom: solid 2px #aaa; }
legend { font-size: 14px; font-weight: bold; margin-bottom: 10px; }

fieldset label { display: block; float: left; width: 145px;
                 padding-top: 5px; text-align: right; }
fieldset label span { padding-right: 10px; }
fieldset input { display: block; float: left; width: 140px; }

fieldset div.inline { float: left; margin-right: 15px; }
fieldset div.inline.last { margin-right: 0px;}
fieldset div.last { clear: right; }
fieldset div.full input { width: 450px; clear: right; }
fieldset div.help-text { padding-top: 25px; padding-bottom: 0px;
                         width: 595px; text-align: right; }
fieldset div.inline-help div.help-text { display: inline; }
fieldset div.long-label label { width: 500px; }

fieldset.hidden, fieldset div.hidden, fieldset div.hidden * { display: none; }

#id_CountryCode { width: 150px; }
#id_State { width: 150px; }

#login-form input, #registration-form input { width: 200px; }
#change-account-form input { width: 200px; }
#payment-summary { font-size: 16px; }
#payment-summary p.small { font-size: 14px; }
#hint_id_class_code { margin-bottom: 0px; }
#hint_id_gift_code { margin-bottom: 0px; }
.uniForm .formHint { font-size: 10px; line-height: 1.2em; }


/*----------------------------------
   ratings widget
----------------------------------*/
.rating-widget { width: 130px; height: 128px;
                 background: url(../img/rating-widget-bg.png) top left no-repeat;
                 position: relative; }
.rating-widget .parent-rating { position: absolute; left: 13px;
                                top: 20px; }
.rating-widget .child-rating { position: absolute; left: 13px;
                               top: 77px; }
.rating-heading { font-size: 12px; color: #777; font-weight: bold; display: block;
                  padding-bottom: 6px; }

/*----------------------------------
   buy credits
----------------------------------*/
#add-credits-table td,#add-credits-table th { padding: 15px; }
#add-credits-table td { text-align: left; }
#add-credits-table th { text-align: right; }
#price-chart-container { margin-top: 25px; }
#price-chart { background-color: #fff; width: 165px;}
#price-chart h4 { font-size: 14px; text-align: center; }
#price-chart tr.light { background-color: #eaeff2; }
#price-chart tr.dark { background-color: #c7d7da; }
#price-chart td { text-align: center; width: 80px;
                  padding-top: 5px; padding-bottom: 5px; }
/*#make-payment-form-container */


/*----------------------------------
   ecards
----------------------------------*/
.flash-container { display: block; }
.ecard-preview-homepage h2 { font-size: 16px; margin-top: 10px;
                             margin-bottom: 10px; }
.ecard-thumb-set { margin-top: 5px; }
.ecard-thumb-container { float: left; margin-right: 7px;
                         width: 105px; height: 66px;
                         margin-bottom: 12px; 
                         border: solid 2px #ccc; }
.ecard-thumb-container:hover { border: solid 2px #00c;
                               cursor: pointer; }
.ecard-thumb-container .block { padding: 3px; padding-top: 4px; }
#send-ecard-form #id_message { width: 200px; height: 75px; }
#send-ecard-form td { padding-bottom: 10px; }
#send-ecard-form label { font-weight: normal; }
#send-ecard-form th { text-align: right; padding-right: 5px; }
#send-ecard-form tr { vertical-align: top; }
.char-limit-info { font-weight: bold; padding-left: 10px;
                   color: #666; }
.char-limit-info-block { display: block; text-align: right;
                         padding-left: 0px; padding-top: 5px;}
.char-limit-info.over-limit { color: #f00; }

/*----------------------------------
   kinder hits
----------------------------------*/
#kinder-hits-controls .control-box { float: left; background-color: #d6dee1;
                                     text-align: center; width: 128px; font-size: 14px;
                                     height: 30px; margin-right: 5px; color: #333;}
#kinder-hits-controls .control-box a { color: #333; }
#kinder-hits-controls .control-box .block { padding-top: 10px; }
#kinder-hits-controls .control-box.active { background-color: #d21e4e;
                                            color: #fff; }
#kinder-hits-controls .control-box.active a { color: #fff; }
#kinder-hits-controls .control-box.last { margin-right: 0px; }
#kinder-hits-controls .control-box.divider { background-color: #d6dee1;
                                             width: 3px; margin-left: 15px;
                                             margin-right: 15px;}

/*----------------------------------
   buttons
----------------------------------*/
.button { color: #fff; font-size: 10px; font-family: Arial;
          display: block; background-repeat: no-repeat; }
.button:hover { color: #fff; }
.button span { display: block; text-align: center; padding-top: 6px; color: #fff; }

.more-info-button { background: url(../img/more-info-button.png); width: 67px;
                    height: 26px; }
.lang-es .more-info-button span {padding-top: 2px; }

.add-button { background: url(../img/add-button.png); width: 59px;
              height: 26px;  }
#header-redeem-button { background: url(../img/redeem-button.png); width: 60px;
                        height: 26px;}
.add-more-credits-button { background: url(../img/add-more-credits-button.png); width: 107px;
                           height: 25px; }
.find-a-class-button { background: url(../img/find-a-class-button.png); width: 126px;
                       height: 27px; float: left; font-size: 12px;}
.find-a-class-button span { padding-top: 5px; }