@import "reset.css";

html {
  background: #e1d3b4 url("../image/bg.jpg") center 218px repeat-y;
}

.body {
  float: left;
  display: inline;
  position: relative;
  width: 100%;
  height: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #333333;
  background: transparent;
}

.wrapper {
  position: relative;
  width: 960px;
  margin: 0px auto;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #333333;
  background: transparent;
}

#headerBackground {
  display: block;
  width: 100%;
  height: 218px;
  background: #e1d3b4 url("../image/header.jpg") top center no-repeat;
}

#bodyBackground {
  display: block;
  width: 100%;
  height: auto;
  background: #e1d3b4 url("../image/bg.jpg") center top repeat-y;
}

/************************ Header */

#header {
  height: 218px;
  margin: 0px;
}

#header a.logo {
  float: left;
  display: inline;
  width: 850px;
  height: 108px;
}

/************************ Nav */

#nav {
  float: right;
  display: inline;
  width: 657px;
  height: 60px;
  margin: 0px;
}

#nav a:link,
#nav a:visited {
  float: left;
  display: inline;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: top;
}

#nav a.here:link,
#nav a.here:visited,
#nav a:hover,
#nav a:active {
  background-position: bottom;
}

#nav a#navHome {
  width: 88px;
  background-image: url("../image/nav_home.jpg");
}

#nav a#navGRAMMY {
  width: 203px;
  background-image: url("../image/nav_grammy.jpg");
}

#nav a#navShow {
  width: 123px;
  background-image: url("../image/nav_showinfo.jpg");
}

#nav a#navConnect {
  width: 105px;
  background-image: url("../image/nav_connect.jpg");
}

#nav a#navSponsors {
  width: 138px;
  background-image: url("../image/nav_sponsors.jpg");
}

#nav a span {
  display: none;
}

/************************ Main */

#main {
  overflow: visible !important;
  margin: 0px 0px 20px 0px;
}

#left {
  float: left;
  display: inline;
  width: 215px;
  height: auto;
  margin: 20px 15px 0px 0px;
}

#middle {
  float: left;
  display: inline;
  width: 560px;
  height: auto;
  position: relative;
  top: -10px;
}

#right {
  float: right;
  display: inline;
  overflow: visible !important;
  width: 155px;
  height: auto;
  position: relative;
  top: -10px;
}

#wide {
  float: left;
  display: inline;
  width: 790px;
  height: auto;
  margin-top: 15px;
}

/************************ Show Info */

#middle div.third {
  display: inline;
  width: 180px;
  height: auto;
  margin-bottom: 10px;
}

#middle p img.fl {
  margin: 0px 15px 15px 0px;
}

#middle div.half {
  display: inline;
  width: 270px;
  height: auto;
  margin-bottom: 10px;
}

#middle p img.fl {
  margin: 0px 15px 15px 0px;
}

#middle img.buyButton {
  float: left;
  margin: 0px 10px 0px 0px;
}

/************************ Connect */

p.connect {
  position: relative;
  z-index: 1;
  top: 0px;
  left: 0px;
}

p.connect img#connectBackground {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}

p.connect a:link,
p.connect a:visited,
p.connect a:hover,
p.connect a:active {
  float: left;
  position: relative;
  z-index: 2;
}

#left p.connect a#connectConnect {
  margin: 0px;
}

#left p.connect a#connectTw {
  margin: 2px 0px 0px 17px;
}

#left p.connect a#connectFb {
  margin: 4px 0px 0px 4px;
}

#left p.connect a#connectMy {
  margin: 7px 0px 0px 5px;
}

#left p.connect a#connectYt {
  margin: 9px 0px 0px 5px;
}

#left p.connect a#connectNewsletter {
  margin: 10px 0px 0px 0px;
}

#right p.connect a#connectConnect {
  margin: 0px;
}

#right p.connect a#connectTw {
  margin: 8px 0px 0px 13px;
}

#right p.connect a#connectFb {
  margin: 10px 0px 0px 4px;
}

#right p.connect a#connectMy {
  margin: 11px 0px 0px 5px;
}

#right p.connect a#connectYt {
  margin: 12px 0px 0px 5px;
}

#right p.connect a#connectNewsletter {
  margin: 10px 0px 0px 0px;
}


/************************ Video Player */

#grammyCallout {
  position: absolute;
  top: 3px;
  left: 135px;
  z-index: 3;
}

div.video {
  float: left;
  display: inline;
  position: relative;
  width: 516px;
  height: 290px;
  margin: 0px;
  padding: 38px 24px 28px 20px;
  background: url("../image/video_bg.gif") no-repeat;
  z-index: 1;
}

#right #playerCallout {
  float: left;
  display: inline;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0px 0px 5px 0px;
  z-index: 1;
}

/************************ Video Thumbs */

div.thumbnails {
}

div.thumbnails div.top {
  float: left;
  display: inline;
  width: 100%;
  height: 16px;
  font-size: 1px;
  line-height: 1px;
  background: url("../image/thumbnails_top.gif") no-repeat;
}

div.thumbnails div.middle {
  float: left;
  display: inline;
  width: 538px;
  height: auto;
  margin: 0px 9px 0px 4px;
  padding: 0px 0px 0px 9px;
  font-size: 1px;
  line-height: 1px;
  background: #1c465d url("../image/thumbnails_bg.gif") top no-repeat;
}

div.thumbnails div.middle div.row {
  float: left;
  display: inline;
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
}

div.thumbnails div.middle a:link,
div.thumbnails div.middle a:visited {
  float: left;
  padding: 9px;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: bold;
}

div.thumbnails div.middle a.video:link,
div.thumbnails div.middle a.video:visited,
div.thumbnails div.middle a.video:hover,
div.thumbnails div.middle a.video:active {
  display: inline;
  width: 114px;
  height: auto;
}

div.thumbnails div.middle a:hover,
div.thumbnails div.middle a:active {
  color: #eeeeee;
}

div.thumbnails div.bottom {
  float: left;
  display: inline;
  width: 100%;
  height: 14px;
  font-size: 1px;
  line-height: 1px;
  background: url("../image/thumbnails_bottom.gif") no-repeat;
}

/************************ Road to a GRAMMY */

p.artists img.fl {
  margin: 0px 0px 20px 0px;
}

p.artists img.fr {
  margin: 20px 15px 0px 0px;
}

/************************ Newsletter Signup */

#newsletterForm {
  width: 500px;
  height: auto;
}

/************************ Footer */

#footer {
  float: left;
  display: inline;
  width: 910px;
  padding: 10px 0px 20px 50px;
  margin-top: 10px;
  border-top: solid 1px #bbaa99;
}

#footer p {
  color: #887766;
  text-align: center; 
  font-size: 11px;
}

#footer p span,
#footer p a:link,
#footer p a:visited {
  color: #887766;
  margin: 0px 8px;
}

#footer p a:hover,
#footer p a:active {
  color: #665544;
}

#footer p.centered img {
  float: none;
  display: inline;
  margin: 0px 10px;
}

/************************** Tags */

h1, h2, h3, h4, p, div.list {
  float: left;
  display: inline;
  width: 100%;
  height: auto;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px 0px 15px 0px;
}

h1 {
  font-size: 34px;
  line-height: 40px;
  font-weight: bold;
  color: #111111;
  letter-spacing: -2px;
}

h2 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -1px;
}

h3 {
  margin: 0px 0px 5px 0px;
  font-size: 17px;
  line-height: 24px;
  font-weight: bold;
  color: #111111;
  letter-spacing: -1px;
}

h4 {
  margin: 0px 0px 5px 0px;
  font-size: 14px;
  line-height: 20px;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a, a:link, a:visited {
  color: #225588;
}

a:hover, a:active {
  color: #4477aa;
}

a.disabled:link,
a.disabled:visited,
a.disabled:hover,
a.disabled:active {
  cursor: default;
}

img {
  display: block;
}

div.break {
  float: left;
  display: inline;
  clear: both;
  width: 100%;
  height: 1px;
  font-size: 1px;
  line-height: 1px;
}

div.hr {
  float: left;
  display: inline;
  clear: both;
  width: 100%;
  height: 1px;
  font-size: 1px;
  line-height: 1px;
  margin: 0px 0px 15px 0px;
  border-top: solid 1px #c1b391;
}

/************************** Lists */

ul, ol {
    margin: 0px;
}

ul {
    list-style: disc;
    padding: 0px 0px 0px 18px;  
}

ol {
    list-style: decimal;
    padding: 0px 0px 0px 28px;  
}

ul li, ol li {
    padding: 0px 0px 8px 0px;
    margin: 0px;
}

ul li ul {
    margin: 4px 0px;
    padding: 0px 0px 0px 18px;  
}

ol li ol {
    margin: 4px 0px;
    padding: 0px 0px 0px 18px;  
}

ul li ul li, ol li ol li {
    font-size: 12px;
    line-height: 16px;
    padding: 0px;
    margin: 0px;
}

/************************** Left Nav */

div.leftNav div.top {
  float: left;
  display: inline;
  width: 100%;
  height: 7px;
  font-size: 1px;
  line-height: 1px;
  background: url("../image/leftnav_top.gif") no-repeat;
}

div.leftNav div.middle {
  float: left;
  display: inline;
  width: 185px;
  height: auto;
  margin: 0px;
  padding: 5px 15px 0px;
  font-size: 1px;
  line-height: 1px;
  background: url("../image/leftnav_bg.gif") top repeat-y;
}

div.leftNav div.bottom {
  float: left;
  display: inline;
  width: 100%;
  height: 15px;
  font-size: 1px;
  line-height: 1px;
  background: url("../image/leftnav_bottom.gif") no-repeat;
}

div.leftNav div.list {
  margin: 0px;
}

div.leftNav ul {
  list-style: none;
  padding: 0px;
}

div.leftNav ul ul {
  padding: 0px 0px 0px 15px;
}

div.leftNav ul li {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -1px;
  color: #111111;
}

div.leftNav ul ul li {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0px;
  color: #554433;
}

div.leftNav li a:link,
div.leftNav li a:visited {
  color: #111111;
}

div.leftNav li a:hover,
div.leftNav li a:active {
  color: #333333;
}

div.leftNav li li a:link,
div.leftNav li li a:visited {
  color: #554433;
}

div.leftNav li li a:hover,
div.leftNav li li a:active {
  color: #776655;
}

/***************************** Tables */

table {
  float: left;
  display: inline;
  width: 625px;
  height: auto;
  margin: 0px 0px 10px 0px;
  border-collapse: collapse;
}

th, td {
  width: auto;
  height: auto;
  vertical-align: middle; 
}

th {
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -1px;
  color: #333333;
  padding: 10px 10px 10px 0px;
}

td {
  font-weight: normal;
  padding: 10px 0px 10px 10px;
}

/***************************** Forms */

input.text {
  width: 350px;
  padding: 4px;
  border: solid 1px #77aacc;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

input.text.zip {
  width: 100px;
}

textarea {
  width: 350px;
  height: 150px;
  padding: 4px;
  border: solid 1px #77aacc;
  color: #111111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

input.submit,
a.submit:link,
a.submit:visited {
  width: auto;
  height: auto;
  padding: 3px 5px;
  border: solid 1px #aacf58;
  color: #486409;
  background: #cdeb8b;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -1px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

input.submit:hover,
a.submit:hover,
a.submit:active  {
  border: solid 1px #73991e;
  color: #2c3e04;
  background: #e2f3bd;
}

input.cancel,
a.cancel:link,
a.cancel:visited {
  width: auto;
  height: auto;
  padding: 3px 5px;
  border: solid 1px #996666;
  color: #996666;
  background: #ffdddd;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 18px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

a.cancel:hover,
a.cancel:active {
  border: solid 1px #882222;
  color: #882222;
  background: #ffbbbb;
}

/****************** twitter */

p.tweet {
  overflow: hidden;
}

/****************** Recaptcha */

.recaptchatable .recaptcha_image_cell, 
#recaptcha_table {
   background: transparent !important;
}
 
#recaptcha_table {
  width: auto !important;
  border-width: 0px !important; 
}
 
#recaptcha_response_field { 
  border: solid 1px #77aacc !important;
}

.recaptchatable .recaptcha_image_cell center img {
  border: solid 1px #77aacc !important;
}

/************************** Columns */

.third       { width: 30%; }
#wide .third { width: 250px; }


.third.pdf {
  width: 160px !important;
  padding: 0px 0px 0px 20px;
  background: url("../image/pdf.gif") top left no-repeat;
}

/************************** Classes */

.error { color: #990000; font-weight: bold; }

.fl { float: left; }
.fr { float: right; }
.centered { text-align: center; }
img.centered { display: inline; margin: 0 auto; }
img.border { border: solid 4px #c1b391; }
img.smallBorder { border: solid 2px #c1b391; }
.ar { text-align: right; }

.zeroBottom { margin-bottom: 0px !important; }

.cl { clear: left; }

.nm { margin: 0px; }
.sm { margin-bottom: 5px; }
.mb { margin-bottom: 10px; }
.mt { margin-top: 10px; }
.bigmt { margin-top: 40px; }
.ml { margin-left: 10px; }
.mr { margin-right: 10px; }

.pt { padding-top: 10px; }
.pb { padding-bottom: 10px; }

.tiny   { font-size: 10px; line-height: 16px; }
.small  { font-size: 11px; line-height: 16px; }
.normal { font-size: 12px; line-height: 17px; }
.medium { font-size: 14px; line-height: 22px; }
.big    { font-size: 18px; line-height: 28px; }

.grey  { color: #777777; }
.black { color: #111111; }
.blue  { color: #225588; }
.ltblue { color: #aaccee; }

.bb { border-bottom: solid 1px #ccbbaa; }
.bt { border-top: solid 1px #ccbbaa; }