/* ------------------------

  * Main CSS *

--------------------------- */

html { 
	
}

body {
  background: url('../../assets/img/background.jpg') no-repeat center top #000000;
}

.clearfix {
  clear:both; 
}

/* =TYPOGRAPHY
--------------------------- */

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:62.5%; /* The base font size of the TT is 10px, which means 1em is 10px, 1.2em is 12px and so on. */
  line-height:1.4em;
}

h1, h2, h3, h4 {
  font-weight:normal;  
}

h1 {
  float:left;
  font-size:2.1em;
  width:100%;
}

h2 {
  line-height:1.1em;
  font-family: "Times New Roman", serif;
  font-size:2.1em;

}

h3 {
  line-height:1em;
  font-family: "Times New Roman", serif;
  font-size:1.8em;
  margin-top:1em;
}

h4 {
  font-size:1.2em;
}

p {
  font-size:1.2em;
  margin:1em 0 0 0; 
}

p#skip-to-content {
  display:none;
}


/* =CONTAINERS
--------------------------- */

div#container {
  margin:0 auto;
  width:984px;
  font-size:1.2em;
  color:#FFFFFF;
}

div#content {
  clear:both;
}

#header{
  height:50px;
  padding-top:20px;
}
#social-media{
  float: left;
}

  #social-media ul li.twitter{
    background: url('../../assets/img/icon-twitter.png') no-repeat;
      width:24px;
      height:24px; 
      float:left;  
      margin-right:6px;
  }
  
    #social-media ul li.twitter a{
      width:24px;
      height:24px;
      text-indent: -9999px ;
      float:left;
    }  
    
  #social-media ul li.facebook{
    background: url('../../assets/img/icon-facebook.png') no-repeat;
    width:24px;
    height:24px; 
    float:left;   
  } 
  
     #social-media ul li.facebook a{
      width:24px;
      height:24px;
      text-indent: -9999px; 
      float:left;
    }   

#site-tools{
  float:right;
}

  #site-tools input.search-box{
    width:174px;
    height:24px;
    color:#fff;
    background:#8c8c8c;
    border:0;
    padding-left: 10px;
  }
  
  #site-tools input#btn-search{
    background: url('../../assets/img/btn-search.png') no-repeat;
    border:0;
    text-indent: -9999px; 
    width:54px;
    height:24px;
    margin-right:10px;
  } 
  
  #site-tools input#btn-checkout{
    background: url('../../assets/img/btn-checkout.png') no-repeat;
    border:0;
    text-indent: -9999px; 
    width:99px;
    height:24px;
  }  
  

#calls-to-action,#shop-information,#shop-links,#latest-news{
  float:left;
}

#calls-to-action{
  width:256px;
}

#calls-to-action p{
  width:165px;
  margin: 5px 0 25px 0;
  font-size:1em;
}

#calls-to-action a{
  color: #f1da3f;
  text-decoration: none;
  display: block;
  margin-top: 10px;
}

#calls-to-action img{
  display: block;
}

#calls-to-action a:hover{
  text-decoration: underline;
}

  
#shop-information{
  width:165px;
  padding-top:287px;
}

  #shop-information ul{
    margin-bottom: 25px; 
  }

#shop-links{
  width:400px;
  margin-top: 240px;
}

  #shop-links ul li{
    float:left;
    width:100px;
    height:100px;
  }
  
  #shop-links ul li a{
    float:left;
    height:100px;
    text-indent:-9999px;
    width:100px;
  }  
  
  #shop-links ul li.tickets,#shop-links ul li.latest-cds,#shop-links ul li.new-vinyl,#shop-links ul li.crash-news,
  #shop-links ul li.local-stock,#shop-links ul li.ticket-and-travel,#shop-links ul li.information,#shop-links ul li.merchandise,
  #shop-links ul li.mailing-list{
    background: url('../../assets/img/shop-links-sprite.png');
    margin-right:20px;
    margin-bottom:20px;
  }
  
#shop-links ul li.tickets{
  backg round-position: 0 0;
}
#shop-links ul li.latest-cds{
  background-position: -121px 0;
}
#shop-links ul li.new-vinyl{
  background-position: -242px 0;
}
#shop-links ul li.crash-news{
  background-position: 0 -115px;
}
#shop-links ul li.local-stock{
  background-position: -121px -115px;
}
#shop-links ul li.ticket-and-travel{
  background-position: -242px -115px;
}
#shop-links ul li.information{
  background-position: 0 -230px;
}
#shop-links ul li.merchandise{
  background-position: -121px -230px;
}
#shop-links ul li.mailing-list{
  background-position: -242px -230px;
}
  
  

#latest-news{
  width:150px;
  margin-top:20px;
}

  #latest-news ul li.heading{
    color:#eed839;
    font-size:2em;
    margin-bottom:20px;
  }
  
   #latest-news ul li{
    margin-bottom:20px;
  }

  #latest-news ul li a{
    color:#FFFFFF;
    text-decoration:none; 
  }
  
  #latest-news ul li a:hover{
    text-decoration:underline; 
  }
  
   #latest-news ul li.latest-news a{
    color:#eed839;
    font-weight:bold;
  }