/*
  Eric Meyer's CSS reset
  http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}


body {
  background-color: #282912;
  font-size: 16px;
  padding-bottom: 16px;
}

body, input, select, textarea {
  font-family: Georgia, Times, serif;
}

h1 {
  color: #DAE400;
  font-size: 1.625em;
}

img {
  border: none;
}

ul, li { list-style-type: none; }

/* Forms */

input, select, textarea {
  font-size: 1em;
}

input, textarea {
  background: #F6F4E8;
  border: 1px solid #969859;
  margin-top: 4px;
  padding: 4px;
  width: 342px;
}

input.check,
div.column-left form input.check {
  background-color: transparent;
  border: none;
  width: auto;
}

label {
  color: white;
}

label span.small {
  font-size: 0.77em;
  font-weight: normal;
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  display: block;
}

button.cancel,
button.submit {
  height: 43px;
  text-indent: -9999px;
  width: 150px;
}

button.cancel:hover,
button.submit:hover {
  background-position: 0 -43px;
}

button.submit {
  background: transparent url(images/buttons/submit.gif) no-repeat scroll top left;
}

button.cancel {
  background: transparent url(images/buttons/cancel.gif) no-repeat scroll top left;
}

/* end forms */


/*em {
  background-color: #333;
  color: white;
  font-style: normal;
  padding: 0 4px;
}*/

em.yellow {
  background-color: #FCF77F;
  color: black; 
}

div.tell-a-friend p {
  color: white !important;
}

span.selection-title { 
  color: #dae400; 
  font-size: 14pt;
}

span.pull {
  font-size: 1.25em;
  color: white;
}


.clearfix:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
}
* html .clearfix { height: 1%; }
.clearfix { display: block; }


/* Layout */

div.clear {
  clear: both;
}

div.strip {
  clear: both;
  width: 100%;
}

div.inner {
  margin: 0 auto;
  position: relative;
  width: 960px;
}


div#container {
  background: url(images/bg/wallpaper.jpg);
  min-height: 100%;
  position: relative;
  height: auto !important;
  height: 100%;
  margin: 0 auto;
}

div.main {
  padding-bottom: 16px;
}

div.main div.inner { padding-top: 8px; }

/* Page title and selection actions */

div.page-title,
div.actions {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  margin: 0 8px 1px;
  position: relative;
  width: 944px;
}

div.page-title {
  margin-top: 10px;
  min-height: 53px;
}

div.page-title a.arrow,
div.page-title h1 { 
  position: absolute;
}

div.page-title a.arrow {
  cursor: pointer;
  display: block;
  height: 69px;
  text-indent: -9999px;
  top: -8px;
  width: 78px;
  z-index: 9999;
}

div.page-title a.arrow.left {
  background: transparent url(images/buttons/prev.png) no-repeat scroll top left;
  left: 8px;
}

div.page-title a.arrow.right {
  background: transparent url(images/buttons/next.png) no-repeat scroll top left;
  right: 8px;
}

div.page-title a.arrow.left:hover,
div.page-title a.arrow.right:hover {
  background-position: 0 -69px;
}

div.page-title h1 {
  line-height: 53px;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}


div.actions li {
  float: left;
  margin: 6px;
}

div.actions li a, div.actions li button {
  color: #EFEFEF;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-size: 1.125em;
  text-decoration: none;
}


div.row { clear: left; }


/* Two column layout */

div.column-left, 
div.column-right { 
  float: left;
}

div.column-left a,
div.column-right a {
  color: white;
}

div.column-left h2,
div.column-right h2 {
  color: #95993E;
}

div.column-left p,
div.column-right p {
  color: #262E17;
  margin: 8px 0;
}

div.column-left {
  margin: 6px 0 16px 0;
  padding-left: 16px;
  width: 381px;
}

div.column-left form { margin-top: 16px; }

div.column-left form p { margin: 8px 0; }

div.column-left form input,
div.column-left form textarea {
  width: 354px;
}

div.column-left form label.subscribe { color: #DAE400; }

div.column-right {
  margin: 16px 8px 16px 16px;
  width: 531px;
}


#recaptcha_widget_div {
  margin-top: 4px;
}


/* Rounded corners in Webkit and Mozilla */

.rounded { 
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}

.rounded-bottom {
  -webkit-border-bottom-left-radius: 8px 8px;
  -webkit-border-bottom-right-radius: 8px 8px;
  -moz-border-radius-bottomleft: 8px;
  -moz-border-radius-bottomright: 8px;
}


div#header {
  background: url(images/bg/header.jpg) repeat-x scroll top center;
  height: 95px;
}

div#header h1 {
  color: #000;
  height: 104px;
  position: absolute;
  top: 18px;
  width: 261px;
  z-index: 10000;
}

div#header h1 a {
  display: block;
  height: 100%;
  position: relative;
  text-indent: -9999px;
  width: 100%;
}

div#header h1 span {
  background: url(images/h/logo_large.png) no-repeat scroll top left;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* header nav */

div#header ul {
  height: 67px;
  left: 260px;
  position: absolute;
  top: 28px;
  width: 576px;
}

div#header ul li { float: left; }

div#header ul li a {
  background: transparent url(images/bg/nav.png) no-repeat scroll top left;
  display: block;
  height: 67px;
  position: absolute;
  text-indent: -9999px;
}

div#header ul li a#nav-home {
  background-position: 0 0;
  left: 0;
  width: 117px;
}

div#header ul li a#nav-selections {
  background-position: -117px 0;
  left: 117px;
  width: 189px;
}

div#header ul li a#nav-suggestions {
  background-position: -306px 0;
  left: 306px;
  width: 149px;
}

div#header ul li a#nav-your-cart {
  background-position: -455px 0;
  color: #E8F300;
  font: italic 1.75em Georgia, Times, serif;
  left: 455px;
  line-height: 1em;
  text-decoration: none;
  text-indent: 110px;
  width: 120px;
}

div#header ul li a#nav-twitter {
  background-position: -575px 0;
  left: 600px;
  width: 93px;
}

div#header ul li a#nav-your-cart.empty-cart {
  background-position: -455px -134px;
}

body.home div#header ul li a#nav-home,
div#header ul li a#nav-home:hover {
  background-position: 0 -67px;
}

body.selection div#header ul li a#nav-selections,
body.selections div#header ul li a#nav-selections,
div#header ul li a#nav-selections:hover {
  background-position: -117px -67px;
}

body.suggestions div#header ul li a#nav-suggestions,
div#header ul li a#nav-suggestions:hover {
  background-position: -306px -67px;
}

body.carts div#header ul li a#nav-your-cart,
div#header ul li a#nav-your-cart:hover {
  background-position: -455px -67px;
}

div#header ul li a#nav-twitter:hover {
  background-position: -575px -67px;
}

body.carts div#header ul li a#nav-your-cart.empty-cart,
div#header ul li a#nav-your-cart.empty-cart:hover {
  background-position: -455px -201px;
}

/* header nav ends */


div#header div#login-outer {
  background:  url(images/bg/left_log_state.gif) no-repeat top left;
  position: absolute;
  right: 10px;
}

div#header div#login-inner {
  background: url(images/bg/right_log_state.gif) no-repeat top right;
}

div#header div#login-state {
  background: url(images/bg/middle_log_state.gif) repeat-x scroll top right;
  color: #000;
  font-size: 8pt;
  height: 18px;
  margin: 0 9px 0 9px;
  padding: 4px 10px 0px 10px;
  text-align: center;
}

div#header div#login-state a {
  color: #505050;
}

div#header div#login-state a:hover {
  color: #00B605;
}

div#header div#login-state a.logout {
  color: #D20C00;
}

div#header div#login-state a.logout:hover {
  color: #F10E00;
}


#new-feature-suggestions {
  left: 606px;
  position: absolute;
  top: 24px;
}

body.home div.main,
body.selection div.main {
  background: url(images/bg/burst.jpg) no-repeat scroll top center;
}


/* Selection options */

#subscription-form p {
  color: white;
}

ul#selection-options li a {
  background-attachment: scroll;
  background-color: transparent;
  background-position: top left;
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
}

ul#selection-options li #action-comment {
  background-image: url(images/buttons/your_comments.png);
  color: #E8F300;
  display: block;
  font: italic 1.3em Georgia, Times, serif;
  height: 48px;
  line-height: 1em;
  padding-top: -8px;
  text-indent: 110px;
  vertical-align: top;
  width: 141px;
}

ul#selection-options li #action-email {
  background-image: url(images/buttons/tell_a_friend.png);
  height: 48px;
  width: 101px;
}

ul#selection-options li #action-add-this {
  margin-top: 14px;
  text-indent: 0;
  width: 125px;
}

ul#selection-options li #action-comment:hover,
ul#selection-options li #action-email:hover {
  background-position: 0 -48px;
}

ul#selection-options li #action-comment:hover { color: #DAE400; }

ul#selection-options li button { line-height: normal; }

ul#selection-options li button#buy,
ul#selection-options li button#free {
  height: 43px;
  text-indent: -9999px;
  width: 94px;
}

ul#selection-options li button#buy:hover,
ul#selection-options li button#free:hover { background-position: 0 -43px; }

ul#selection-options li button#buy { background: transparent url(images/buttons/buy.gif) no-repeat scroll top left; }
ul#selection-options li button#free { background: transparent url(images/buttons/free.gif) no-repeat scroll top left; }


/* Rate selection */

ul.rate-selection {
  background: transparent url(images/bg/hearts.png) repeat-x scroll top left;
  float: right;
  height: 39px;
  margin-right: 8px;
  margin-top: 10px;
  position: relative;
  width: 211px;
}

ul.rate-selection li {
  margin: 0;
}

ul.rate-selection a,
ul.rate-selection span {
  display: block;
  height: 39px;
  position: absolute;
  text-indent: -9999px;
  width: 42px;
  z-index: 2;
}

ul.rate-selection li a:hover {
  background: transparent url(images/bg/hearts.png) 0 -39px;
  left: 0;
  z-index: 1;
}

ul.rate-selection a.heart-1 { left: 0; }
ul.rate-selection a.heart-2 { left: 42px; }
ul.rate-selection a.heart-3 { left: 84px; }
ul.rate-selection a.heart-4 { left: 126px; }
ul.rate-selection a.heart-5 { left: 168px; }

ul.rate-selection a.heart-1:hover { width: 42px; }
ul.rate-selection a.heart-2:hover { width: 84px; }
ul.rate-selection a.heart-3:hover { width: 126px; }
ul.rate-selection a.heart-4:hover { width: 168px; }
ul.rate-selection a.heart-5:hover { width: 210px; }

ul.rate-selection span {
  left: 210px;
  text-indent: 0;
}

ul.rate-selection li.rated {
  background: url(images/bg/hearts.png) repeat-x 0 -78px;
  display: block;
  height: 39px;
  left: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
  width: 0;
}

ul.rate-selection li.rated-1 { width: 42px; }
ul.rate-selection li.rated-2 { width: 84px; }
ul.rate-selection li.rated-3 { width: 126px; }
ul.rate-selection li.rated-4 { width: 168px; }
ul.rate-selection li.rated-5 { width: 210px; }


/* SELECTION DISPLAY */

div.cell,
div.center-action {
  float: left;
  position: relative;
  width: 192px;
}


/* Track images */

div.cell div.track-image {
  background: transparent url(images/bg/sleeve.png) no-repeat scroll top left;
  height: 192px;
  position: relative;
}

div.cell div.track-image img {
  margin: 18px;
}

div.cell div.track-image.highlighted {
  background-position: 0 -192px;
}

div.cell div.track-summary {
  display: block;
  margin: -6px 8px 0;
  padding: 4px 0;
}

div.cell div.track-image div.tapes {
  background: transparent url(images/bg/tape.png) no-repeat scroll top left;
  height: 200px;
  left: -4px;
  position: absolute;
  top: -4px;
  width: 201px;
  z-index: 9998;
}


/* Track headers */

div.cell h3,
div.cell h4 {
  color: #FFFFFF;
  font-size: 0.75em;
  margin: 0 10px;
  width: 156px;
}

div.cell h3 {
  font-weight: normal;
  margin-top: 8px;
  text-transform: uppercase;
}


/* Track info (popup) */

div.cell div.track-info {
  background: transparent url(images/bg/green_square.gif) repeat scroll top left;
  color: white;
  display: none;
  left: 8px;
  padding: 4px 0;
  position: absolute;
  top: 186px;
  width: 176px;
  z-index: 9999;
}

div.cell div.track-info h3,
div.cell div.track-info h4 {
  color: white;
}

div.cell div.track-info p {
  color: #000;
  font-size: 0.75em;
  margin: 0 8px;
}

div.cell div.track-info h4,
div.cell div.track-info p {
  margin-bottom: 4px;
}


/* Track options (little icons with background) */

div.cell div.track-options {
  background: transparent url(images/bg/opaque_white_30.png) repeat scroll top left;
  margin: 2px 8px;
  padding: 4px 8px;
  position: relative;
}

div.cell div.track-info div.track-options {
  background: transparent url(images/bg/turquoise_square.gif) repeat scroll top left;
}

div.cell div.track-options form { display: inline; }

div.track-options .button,
div.track-options div.tick {
  float: left;
  margin-right: 8px;
}

div.cell div.track-options .button {
  background: transparent url(images/buttons/track_buttons.gif) no-repeat scroll top left;
  display: block;
  height: 25px;
  text-decoration: none;
  text-indent: -9999px;
}

div.cell div.track-options .button.listen {
  background-position: -69px 0;
  left: 69px;
  width: 32px;
}

div.cell div.track-options .button.listen.buffering {
  background-image: url(images/bg/spinner_green.gif);
  background-position: 6px 5px;
}

div.cell div.track-info div.track-options .button.listen.buffering {
  background-image: url(images/bg/spinner_turquoise.gif);
  background-position: 6px 5px;
}

div.cell div.track-options .button.goto-boomkat {
  background-position: -34px 0;
  left: 34px;
  width: 30px;
}

div.cell div.track-options .button.add {
  background-position: 0 0;
  left: 0;
  width: 27px;
}

div.cell div.track-options .button.listen:hover {
  background-position: -69px -25px;
}

div.cell div.track-options .button.goto-boomkat:hover {
  background-position: -34px -25px;
}

div.cell div.track-options .button.add:hover {
  background-position: 0 -25px;
}

div.cell div.track-options div.tick {
  height: 26px;
  width: 30px;
}

div.track-options form div.tick {
  display: none;
}

div.track-options form.included div.tick {
  display: block;
}

div.track-options form.included .button {
  display: none;
}

div.cell div.track-options div.price.ninety-nine {
  background: transparent url(images/bg/price_99.png) no-repeat scroll top left;
  height: 41px;
  margin-right: 0;
  position: absolute;
  right: -4px;
  top: -6px;
  width: 40px;
}

div.cell div.track-options div.price.free {
  background: transparent url(images/bg/price_free.png) no-repeat scroll top left;
  height: 45px;
  margin-right: 0;
  position: absolute;
  right: -6px;
  top: -6px;
  width: 66px;
}


/* Central 'buy selection' etc bit */

div.center-action div.selection-image {
  text-align: center;
  width: 192px;
}

div.center-action button {
  height: 111px;
  margin-top: 8px;
  text-indent: -9999px;
  width: 186px;
}

#buy-selection { background: transparent url(images/buttons/buy_selection.png) no-repeat scroll top left; }
#buy-selection:hover { background-position: 0 -111px; }
#free-selection { background: transparent url(images/buttons/free_selection.png) no-repeat scroll top left; }
#free-selection:hover { background-position: 0 -111px; }


/* Selection list, desription etc */

div.secondary {
  background-color: #282912;
  color: #839066;
  padding-bottom: 16px;
}

div.secondary div.inner { padding-top: 8px; }

div.secondary div.inner h2,
div.secondary div.inner h3 {
  font-style: italic;
  font-weight: normal;
}

div.secondary div.inner h2 {
  color: #DAE400;
  font-size: 2.25em;
  line-height: normal;
  margin: 0;
}

div.secondary div.inner h3 {
  color: #95993E;
  font-size: 1.5em;
  line-height: normal;
}

div.secondary div.inner #selection-information div.description {
  color: #839066;
  font-size: 1.5em;
  line-height: normal;
}


/* Previous selection list */

h2#recent-selections {
  height: 167px;
  margin-left: -16px;
  position: relative;
  text-indent: -9999px;
  width: 397px;
}

h2#recent-selections a {
  display: block;
  height: 100%;
  width: 100%;
}

h2#recent-selections span {
  background: url(images/h/recent_selections.png) no-repeat scroll top left;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

a.view-more-selections {
  background: transparent url(images/buttons/view_more.gif) no-repeat scroll top left;
  display: block;
  height: 43px;
  margin-bottom: 30px;
  text-indent: -9999px;
  width: 94px;
}

a.view-more-selections:hover {
  background-position: 0 -43px;
}

div.secondary div.inner #selection-list ul {
  width: 366px;
}

div.secondary div.inner #selection-list ul li {
  border-bottom: 1px dotted #424332;
  margin: 8px 0;
  padding: 4px 0;
}

div.secondary div.inner #selection-list ul li.last { border-bottom: none; }

div.secondary div.inner #selection-list ul li a {
  color: #839066;
  font-size: 1em;
  font-style: normal;
  text-decoration: none;
}

div.secondary div.inner #selection-list ul li a:hover { color: #FFF; }

div.secondary div.inner #selection-list ul li img { vertical-align: middle; }

div#selections { margin: 16px 8px; }

div.selection {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  float: left;
  margin-bottom: 16px;
  padding: 16px;
  text-align: center;
  width: 432px;
}

div.selection a { text-decoration: none; }

div.selection h2 {
  font-size: 1.5em;
  font-style: italic;
  font-weight: normal;
  margin: 4px 0 8px;
  text-shadow: black -2px -2px 0;
}

div.selection h2 a { color: white; }
div.selection div { text-align: center; }
div.selection div a { color: #dae400; }
div.selection ul { 
  float: none;
  margin: 4px auto;
}

div.selection ul li {
  float: left;
}

div.selection p {
  clear: left;
  color: #C8C8C8;
  margin-top: 4px;
  text-shadow: black 1px 1px 1px;
}

div.selection.even { margin-left: 16px; }

div.selection:hover { background: transparent url(images/bg/opaque_black_60.png) repeat scroll top left; }


div#comments {
  border-top: 1px solid #57584A;
  color: #FFF;
  padding-bottom: 16px;
}


/* Comment list */

div#comment-list {
  margin-left: 32px;
  width: 515px;
}

div#comments div#comment-list h2 {
  color: #dae400;
  font-size: 2.25em;
  font-style: italic;
  font-weight: normal;
  margin-top: 16px; 
}

div#comments div#comment-list div.comment {
  line-height: normal;
  margin: 0 0 1.25em 0;
}

div#comments div#comment-list div.comment h3 {
  color: #dae400;
  font-size: 1.875em;
  font-style: italic;
  font-weight: normal;
  margin-top: 4px;
}
div#comments div#comment-list div.comment h4 {
  color: #262E17;
  font-size: 0.875em;
  font-weight: normal;
}

div#comments div#comment-list div.comment h4 a {
  color: white;
  font-size: 0.85em;
  text-decoration: none;
}

div#comments div#comment-list div.comment h4 a:hover { text-decoration: underline; }

div#comments div#comment-list div.comment h4 span.name {
  font-size: 1.28em;
  font-style: italic;
}

div#comments div#comment-list div.comment div.comment_body {
  font-size: 1.125em;
  margin-top: 4px;
}


/* Comment form */

div#comment-form h2 {
  height: 167px;
  margin-left: -16px;
  position: relative;
  text-indent: -9999px;
  width: 397px;
}

div#comment-form h2 span {
  background: url(images/h/leave_comment.png) no-repeat scroll top left;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

div#comment-form p,
div#comment-form div {
  margin: 8px 0;
}

div#comment-form p.blurb,
div#comment-form div.blurb {
  color: #DAE400;
  font-size: 0.875em;
  margin-bottom: 0;
  margin-top: 0;
}


/* Recaptcha */

div#comment-form p#recaptcha_widget_div div,
div#comment-form div#recaptcha_widget_div div {
  margin: 0;
}

div#comment-form iframe { width: 350px; }
div#comment-form iframe p { color: white; }


div.fieldWithErrors {
  display: inline;
}

div.fieldWithErrors label  {background-color: #C9363D; color: white; }

div.assigned-user-message {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  color: #C9363D !important;
  font-family: arial;
  font-size: 10pt;
  line-height: 15px;
  padding: 5px;
  width: 352px;
}

/* firery red E94938 */

div.assigned-user-message strong {
  font-weight: bold;
}

div.assigned-user-message input {
  width: 200px !important;
}

div.assigned-user-message div {
    text-align: center;
}

div.rating {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  margin: 16px 8px;
  padding: 16px 0;
  text-align: center;
}

div.rating select {
  margin-top: 4px;
}

div.rating button {
  margin: 12px auto 0;
}

/* actions for the cart are a little different */

div#cart-contents div.actions { margin: 16px 8px 1px; }

div#cart-contents div.actions ul {
  float: right;
  margin-right: 2px;
}


a#continue-shopping {
  background: transparent url(images/buttons/continue_shopping.gif) no-repeat scroll top left;
  display: block;
  float: left;
  height: 43px;
  margin: 6px 0 6px 8px;
  text-indent: -9999px;
  width: 150px;
}

a#continue-shopping:hover { background-position: 0 -43px; }

/* cart contents table */

table.cart {
  background: transparent url(images/bg/opaque_black_light.png) repeat scroll top left;
  color: white;
  margin: 0 8px 16px;
  width: 944px;
}

table.cart td {
  border-bottom: 1px solid #5C791D;
  color: white;
  font-size: 0.875em;
  padding: 4px;
  vertical-align: middle;
}

table.cart td.price, 
table.cart td.you-pay, 
table.cart td.selection-discount { 
  text-align: right;
}

table.cart td.price { width: 60px; }

table.cart td.remove {
  text-align: center;
  width: 150px; 
}

table.cart td.sleeve { width: 32px; }

table.cart td button { color: white; }

table.cart td.remove button {
  background: transparent url(images/buttons/remove.gif) no-repeat scroll top left;
  height: 21px;
  margin: 0 auto;
  text-indent: -9999px;
  width: 70px;
}

table.cart td.remove button:hover { background-position: 0 -21px; }

table.cart td.white-border { border-bottom-color: white; }

table.cart tr td:first-child { padding-left: 8px; }

table.cart tr td:last-child { padding-right: 8px; }

table.cart tr:first-child td { padding-top: 8px; }

table.cart tr:last-child td { padding-bottom: 8px; }

table.cart tr.visit td { text-align: center; }

table.cart tr.visit td a {
  color: #DAE400;
  font-size: 1.2em;
  font-style: italic;
  text-decoration: none;
}

table.cart tr.visit td a:hover { color: #DAE400; }

table.cart tr.expandable-selection { cursor: pointer; }

table.cart tr.expandable-selection a {
  color: white;
  text-decoration: none;
}

table.cart tr.expandable-selection a:hover {
  text-decoration: underline;
}

table.cart tr.expandable-selection:hover { background: transparent url(images/bg/opaque_black_light.png) repeat scroll top left; }

table.cart tr.expandable-track,
table.cart tr.selection-discount {
  background: transparent url(images/bg/opaque_black_light.png) repeat scroll top left; 
}

table.cart tr.expandable-track td {
  color: #5C791D;
  font-size: 0.7em; 
}

table.cart tr.selection-discount td {
  border-bottom: 1px solid #5C791D;
  color: #DAE400;
  font-style: italic;
  padding: 8px; 
}

table.cart tr.total td {
  border: none;
  color: #DAE400;
  padding: 10px 4px;
  font-size: 1.5em;
  font-style: italic; 
}

span.selection-arrow {
  cursor: pointer;
  font-family: "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 1.5em; 
}


/* Empty and Checkout buttons */

button#empty-cart,
button.proceed-to-boomkat {
  background-attachment: scroll;
  background-color: transparent;
  background-position: top left;
  background-repeat: no-repeat;
  height: 43px;
  text-indent: -9999px;
  width: 150px;
}

button#empty-cart { background-image: url(images/buttons/empty_basket.gif); }

button.proceed-to-boomkat { background-image: url(images/buttons/boomkat_checkout.gif); }

button#empty-cart:hover,
button.proceed-to-boomkat:hover {
  background-position: 0 -43px;
}


/* No tracks in cart */

h2.no-tracks {
  font-size: 2em;
  font-style: italic;
  color: #262E17;
  margin-bottom: 32px;
  margin-top: 32px;
  text-align: center; 
}

h2.no-tracks a {
  color: white;
}


#vote-up, #vote-down {
  background: transparent url(images/buttons/thumbs.gif) no-repeat scroll top left;
  height: 25px;
  text-indent: -9999px;
  width: 24px;
}

#vote-up {
  background-position: -24px 0;
}

#vote-down {
  background-position: 0 0;
}

#vote-up:hover {
  background-position: -24px -25px;
}

#vote-down:hover {
  background-position: 0 -25px;
}

#submit-suggestion {
  background: transparent url(images/buttons/submit_suggestion.png) no-repeat scroll top left;
  height: 43px;
  text-indent: -9999px;
  width: 314px;
}

#submit-suggestion:hover {
  background-position: 0 -43px;
}

#log-in {
  background: transparent url(images/buttons/login.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

#log-in:hover {
  background-position: 0 -43px;
}

#register-button {
  background: transparent url(images/buttons/register.png) no-repeat scroll top left;
  height: 43px;
  text-indent: -9999px;
  width: 150px;
}

#register-button:hover {
  background-position: 0 -43px;
}

body.suggestions div.inner {
  color: #DAE400;
}

body.suggestions div.page-title {
  margin-bottom: 20px;
  padding-bottom: 10px;
}

body.suggestions div.page-title {
  text-align: center;
}

body.suggestions div.page-title h1 {
  position: relative !important;
}

body.suggestions div.column-left h1 {
  height: 167px;
  margin-left: -16px;
  position: relative;
  text-indent: -9999px;
  width: 397px;
}

body.suggestions div.column-left h1 span {
  background: url(images/h/suggest_a_title.png) no-repeat scroll top left;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

body.suggestions div.column-right {
  margin-right: 0;
  width: 539px;
}

body.suggestions div.column-right p {
  color: white;
}

#login, #register, #login-or-register, #new-suggestion {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  position: relative;
  width: 100%;
}

#login, #register {
  display: none;
  float: left;
}

#new-suggestion {
  padding-top: 8px;
}

body.suggestions div.actions form input,
body.suggestions div.actions form label {
  margin-top: 10px;
}

body.suggestions div.actions form textarea {
  font-size: 1em;
  height: 200px;
  margin-top: 10px;
  text-align: left;
}

body.suggestions div.column-left p {
  color: white;
}

#new-suggestion h2 {
  color: white;
  font-size: 1.3em;
  margin-bottom: 4px;
  text-align: center;
}

#new-suggestion div {
  margin: 0 16px 16px;
  font-size: 1.4em;
}

#new-suggestion label {
  display: block;
  text-align: center;
}

#new-suggestion form input,
#new-suggestion form textarea {
  background-color: #FAFF84;
  color: #25300C;
  padding: 8px;
}

#new-suggestion form input.field {
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 8px;
  text-align: center;
  width: 489px;
}
#new-suggestion form textarea {
  height: 200px;
  width: 489px;
}

#new-suggestion div.toggle {text-align: center;}  
#new-suggestion div.toggle a {
  font-family: arial;
  color: #04BCCB;
  font-size: 0.6em;
  text-decoration: none;
} 

#new-suggestion div.toggle a:hover {
  color: #00ECFF;
  text-decoration: underline;
}

#new-suggestion div.fieldWithErrors label {
  font-size: 16pt;
/*  display: inline;*/
}

#login form div.attribute input, #register form div.attribute input {
  margin-top: 2px;
}

#login-or-register {
  padding: 8px 0;
}

#login-or-register p {
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
}

#login * {
  text-align: left;
}

#login p,
#register p {
  margin: 10px;
  font-size: 0.8em;
}

#login div.attribute {
  margin-left: 10px;
}

#login div.attribute label, #register div.attribute label {
  font-size: 16pt;
  display: block;
  margin: 0;
  padding: 0;
}

#login h2, #register h2 {
  font-size: 1.5em;
  font-style: italic;
  margin: 10px;
}

#login h2 span.small,
#register h2 span.small {
  font-size: 0.66em;
}

#login a,
#login-or-register a,
#register a {
  color: #04BCCB;
}

#login a:hover,
#login-or-register a:hover,
#register a:hover {
  color: #00ECFF;
}

#login div.details,
#register div.details {
/*  float: left;*/
  margin: 20px 0 20px 20px;
}

body.suggestions div.help {
  float: none;
  margin: 0 20px 40px;
}

#login div.help li,
#register div.help li {
  color: white;
}

#register form div.attribute {
  margin: 0 0 5px 10px;
}

#suggestions {
  margin-top: 2px;
}

#suggestions h2 {
  float: left;
  font-size: 2em;
  margin: 14px 0 auto 10px;
}

#suggestions h2 span {
  color: white;
  font-size: 0.6em;
  font-style: italic;
}

#suggestions table {  
  border-collapse: collapse;
  clear: both;
  font-family: arial;
  width: 100%;
  margin-bottom: 20px
}

#suggestions table th {
  background: transparent url(images/bg/opaque_black_light.png) repeat scroll top left;
  font-family: Georgia;
  color: #DDD;
  letter-spacing: 0.1em;
  padding: 10px;
}

#suggestions table th.date, #suggestions table th.votes {
  text-align: center;
  width: 140px;
}

#suggestions table td {
  border-top: 1px solid #5c791d;
  border-bottom: 1px solid #5c791d;
  padding: 10px;
}

#suggestions tr.voted-on {
  background-color: #364812;
}

#suggestions div.pagination {
  padding-bottom: 20px;
}

td.description {
  background: #292929;
}

span.person {
  color: white;
  font-size: 0.70em;
}

span.show-description {
  color: #04BCCB;
  font-size: 0.7em;
}

td.date, td.rank, td.vote, td.description {
  font-size: 0.75em;
}

td.date, td.votes {
  text-align: center;
}

td.vote {
  color: #999;
  font-size: 8pt;
  width: 80px;
  text-align: center;
  
}

td.date {
  color: white;
}

td.vote div.vote-separator {
  background: #DAE400; 
  float: left; 
  height: 25px; 
  margin-right: 10px;
  width: 1px; 
}

tr.expandable-description td {
  background: #222;
  color: white;
  font-size: 0.8em;
}

div.clear {
  clear: both;
  margin: 0;
} 

form.vote {
  display: inline;
}

form.vote button {
  float: left;
  margin-right: 10px;
}

div.filters {
  background: transparent url(/stylesheets/images/bg/opaque_black_40.png) repeat scroll top left;
  color: white;
  float: right;
  margin: 14px 10px;
  padding: 7px;
}

div.filters a {
  color: white;
  text-decoration: none;
}

div.filters a:hover {
  color: #DAE400;
  text-decoration: underline;
}

div.filters a.selected {
  color: #DAE400;
  text-decoration: underline;
}

body.suggestions div.pagination {
  text-align: center;
}

body.suggestions div.pagination a {
  color: #04BCCB;
}

body.suggestions div.pagination a:hover {
  color: #00ECFF;
}

body.suggestions div.pagination a.prev-page, body.suggestions div.pagination span.prev-page {margin-right: 5px;}
body.suggestions div.pagination a.next-page, body.suggestions div.pagination span.next-page {margin-left: 5px;}



/* Miscellaneous pages */

#subscriptions h1,
#about h1,
#share h1 {
  height: 167px;
  margin-left: -16px;
  position: relative;
  text-indent: -9999px;
  width: 397px;
}

#subscriptions h1 { margin-top: 6px; }

#about h1 span,
#share h1 span,
#subscriptions h1 span {
  background-attachment: scroll;
  background-color: transparent;
  background-position: top left;
  background-repeat: no-repeat;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#about h1 span { background-image: url(images/h/about.png); }
#share h1 span { background-image: url(images/h/tell_a_friend.png); }
#subscriptions h1 span { background-image: url(images/h/subscribe_to_newsletter.png); }


div.main {
  color: white;
}

div.registration, 
div.login {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  margin: 0 8px 1px;
  position: relative;
  width: 944px;
}

body.sessions div.details, 
body.people div.details {
  float: left;
  padding: 20px;
}

body.people div.attribute,
body.people div.details form p,
body.sessions div.details form p {
  margin-bottom: 10px;
}

body.people div.name,
body.people div.email {
  clear: both;
}

body.people div.first-name, 
body.people div.last-name, 
body.people div.password, 
body.people div.password-confirmation {
  float: left;
}

body.people div.last-name, 
body.people div.password-confirmation {
  margin-left: 10px;
}

body.people div.name input, 
body.people div.password input {
  width: 160px;
}

body.people div.details div.fieldWithErrors {display: inline;}
body.people div.details div.fieldWithErrors label {background-color: #C9363D; color: white; }

body.people div.details div.errorExplanation ul li {
  float: none;
}

div.problems {
  float: left;
  margin-top: 20px;
  margin-left: 40px;
  width: 500px;
}

div.problems h2,
div.problems p,
div.problems li {
  background-color: #C9363D;
}

div.help {
  float: left;
  margin-top: 20px;
  margin-left: 40px;
}

div.help a,
div.problems a { color: #04BCCB; }
div.help a:hover,
div.problems a:hover { color: #00ECFF;}

div.help h2,
div.problems h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

div.help p,
div.problems p {
  line-height: 120%;
  font-weight: 100;
  margin-top: 10px;
  margin-bottom: 20px;
}

div.help p strong,
div.problems p strong {
  font-weight: bold;
}

div.help ul,
div.problems ul { list-style-type: circle; }
div.help ul li,
div.problems ul li {
  float: none;
  font-size: 0.9em;
  list-style-type: circle;
  list-style-image: none;
  list-style-position: inside;
  margin-bottom: 10px;
}

div.help ul li em,
div.problems ul li em{
  background: none;
  font-style: italic;
}

div.problems div.errorExplanation h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

div.spinner {
  position: absolute;
  background: url('/images/ajax-loader.gif') no-repeat top left;
  top: 113px;
  left: 380px;
  width: 126px;
  height: 22px;
}

body.people #activate-your-account {
  background: transparent url(images/buttons/activate_your_account.png) no-repeat scroll top left;
  height: 43px;
  text-indent: -9999px;
  width: 150px;
}

body.people #activate-your-account:hover {
  background-position: 0 -43px;
}

body.people #log-in {
  background: transparent url(images/buttons/login.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

body.people #log-in:hover {
  background-position: 0 -43px;
}

body.people #register-button {
  background: transparent url(images/buttons/register.png) no-repeat scroll top left;
  height: 43px;
  text-indent: -9999px;
  width: 150px;
}

body.people #register-button:hover {
  background-position: 0 -43px;
}

body.people #reset-password {
  background: transparent url(images/buttons/reset_password.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

body.people #reset-password:hover {
  background-position: 0 -43px;
}

body.people #save-password {
  background: transparent url(images/buttons/save_password.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

body.people #save-password:hover {
  background-position: 0 -43px;
}

input#remember_me, input#person_subscribed {
  width: 15px;
}

body.subscriptions #unsubscribe-button {
  background: transparent url(images/buttons/unsubscribe_button.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

body.subscriptions #unsubscribe-button:hover {
  background-position: 0 -43px;
}

body.subscriptions #subscribe-button {
  background: transparent url(images/buttons/subscribe_button.png) no-repeat scroll top left;
  height: 43px;
  margin-top: 10px;
  text-indent: -9999px;
  width: 150px;
}

body.subscriptions #subscribe-button:hover {
  background-position: 0 -43px;
}

div#footer {
  background-color: #282912;
}

div#footer ul {
  background: #333 url(images/bg/footer_nav.gif) no-repeat scroll top left;
  height: 69px;
  margin: 16px 8px;
  position: relative;
  width: 737px;
}

div#footer ul li { float: left; }

div#footer ul li a {
  background: #333 url(images/bg/footer_nav.gif) no-repeat scroll top left;
  display: block;
  height: 69px;
  position: absolute;
  text-indent: -9999px;
}

div#footer ul li#footer-home a {
  background-position: 0 0;
  left: 0;
  width: 219px;
}

div#footer ul li#footer-subscribe a {
  background-position: -219px 0;
  left: 219px;
  width: 165px;
}

div#footer ul li#footer-cart a {
  background-position: -384px 0;
  left: 384px;
  width: 187px;
}

div#footer ul li#footer-about a {
  background-position: -571px 0;
  left: 571px;
  width: 166px;
}

div#footer ul li#footer-home a:hover { background-position: 0 -69px; }
div#footer ul li#footer-subscribe a:hover { background-position: -219px -69px; }
div#footer ul li#footer-cart a:hover { background-position: -384px -69px; }
div#footer ul li#footer-about a:hover { background-position: -571px -69px; }


div#footer a#made-by-rumble,
div#footer a#made-for-boomkat {
  background: #333 url(images/bg/made_by_rumble_for_boomkat.gif) no-repeat scroll top left;
  float: left;
  display: block;
  height: 17px;
  text-indent: -9999px;
}
  div#footer a#made-by-rumble {
    background-position: 0 0;
    clear: left;
    margin: 0 1px 0 8px;
    width: 152px;
  }
    div#footer a#made-by-rumble:hover { background-position: 0 -17px; }
  div#footer a#made-for-boomkat {
    background-position: -152px 0;
    width: 155px;
  }
    div#footer a#made-for-boomkat:hover { background-position: -152px -17px; }

div#footer img { margin-left: 8px; }

div#footer #footer-copyright {
  color: #AFB083;/*#BFC190;*/
  font-family: Georgia,Times,serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: -0.25px;
  margin-left: 10px;
}


/* alerts, popups, flash messages, form errors etc */

div.errorExplanation h2 {
  font-size: 1.625em;
}

div.form-errors {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  color: #c9363d;
  margin: 16px 8px 0;
  padding: 16px;
  text-align: center;
  width: 912px;
}

div.no-script,
div#flash-target {
  background-color: #AA191D;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  color: white;
}

div.no-script div.inner,
div#flash-target div.inner {
  font-size: 1.5em;
  font-style: italic;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  width: 944px;
}

div#flash {
  text-align: center;
}

div#flash div {
  color: white;
  cursor: pointer;
  font-size: 1.5em;
  font-style: italic;
  padding: 8px;
  width: 456px;
}

div#flash.success div { background-color: #009404; }
div#flash.success div:hover { background-color: #007104; }
div#flash.error div { background-color: #c9363d; }
div#flash.error div:hover { background-color: #b52229; }

div#flash a {
  color: #DAE400;
}


div.alert {
/*  background: white; */
/*  color: black; */
  background: #009404;
  color: white;
  display: none;
  padding: 12px;
  position: absolute;
  width: 400px;
  z-index: 9999;
}

div.alert.success {
  background: #009404;
  color: white;
}

div.alert.failure {
  background: #c9363d;
  color: white;
}

div.alert h4 {
  font-size: 2em;
  font-style: italic;
  text-align: center;
}

div.alert button {
  font-size: 1.5em;
  margin-top: 10px;
  padding: 8px;
}

div.alert button.yes, div.alert button.no {
  height: 43px;
  text-indent: -9999px;
  width: 94px;
}

div.alert button.yes:hover,
div.alert button.no:hover {
  background-position: 0 -43px;
}

div.alert button.yes {
  background: transparent url(images/buttons/yes.gif) no-repeat scroll top left;
  float: right;
}

div.alert button.no {
  background: transparent url(images/buttons/no.gif) no-repeat scroll top left;
  float: left;
}

div.alert.proceed button.yes { background: transparent url(images/buttons/yes_green.gif) no-repeat scroll top left; }
div.alert.proceed button.yes:hover { background-position: 0 -43px; }

div.alert p,
div.alert li {
  line-height: 1.4em;
}

div.alert p { margin: 8px 0; }

div.alert li {
  margin: 8px 0 8px 16px;
  list-style-type: disc;
}

div.alert.remove {
  background-color: #FFE07D;
  color: #B06603;
}

div.alert.remove button { color: #B06603; }

div.alert.remove h2 {
  font-size: 1.5em;
  font-style: italic;
}

div.dimmer {
  background: transparent url(images/bg/dimmer.png) repeat fixed top left;
  display: none;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 9998;
}


/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  .sIFR-active div.page-title h1, .sIFR-active div.page-title p {
    font-family: Georgia, serif;
    color: #DAE400;
    line-height: 1em;
    visibility: hidden;
  }
}

div.scrolly div.items div.selection_item {
  float: left;
}


div.scrolly div.previous,
div.scrolly div.next,
div.scrolly div.items {
  display: none;
}

div.scrolly div.scrolly-spinner {
  left: 454px;
  position: absolute;
  top: 40px;
}

/* Chooser */

div#selection-chooser {
  background: transparent url(images/bg/opaque_black_40.png) repeat scroll top left;
  height: 98px;
  margin: 20px auto 10px auto;
  overflow-y: hidden;
  padding: 10px 0 0 0;
  position: relative;
  width: 940px;
}

div#selection-list-area {
  width: 834px;
  height: 84px;
  margin-left: 53px;
  position: relative;
  overflow: hidden;
}

div#selection-list-area div.items {
  left: 0;
  position: absolute;
  margin: 0;
  width: 9999px;
}

/* note: if you change the margin, also update scrolly.js */
div.selection-item {
  float: left;
  margin: 0 0 0 8px;
}

div#chooser-left,
div#chooser-right {
  position: absolute;
  width: 38px;
  height: 55px;
  top: 28px;
}

div#chooser-left {
  left: 8px;
}

div#chooser-right {
  right: 8px;
}