body {
  background: #999 url(../images/texture_bg.png); 
  margin: 0;
  font: 12px bold "Bookman Old Style", "Palatino",
    "Serifa BT", 
    "URW Bookman L",
    "itc bookman";
}
h1 {
  color: #f5f1e9;
  font-size: 5em;
  margin: .1em 0;
  font-family: 'Action Jackson'; 
  text-align: center;
  text-shadow: 0 1px 3px #000;
}
h2, h3 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);    
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
  margin: .8em 0;
}
h2 a {
  color: #fff;
  text-decoration: none;
}
h2 a:hover {
  text-shadow:0 2px 2px #333 ;
}
p {
  color: #fff;
  text-shadow: 0 2px 1px #000;
  font-size: 1.2em;
}

p a {
  color: #eee;
  text-decoration: none;
  font-weight: bold;
}
p a:hover {
  border-bottom: 1px solid #999;  
}

#screen {
  width: 320px;
  height: 350px; 
  position: absolute; 
  background: #999;
  display: none;  
}

#upper {
  padding-top: 20px;
  border-top: 4px solid #415b74;
  border-left: 1px solid #89acd1; 
  border-right: 1px solid #89acd1;   
  background-image: url(../images/wood.jpg);      
}

#header {
  width: 960px;
  margin: 20px auto 0 auto;
}

#center {
  width: 962px;
  padding:0;
  border: 25px solid #5a92cb;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  margin: 0 auto;
  -webkit-box-shadow:0 -2px 15px rgba(0,0,0,.5);  
  -moz-box-shadow:0 -2px 15px rgba(0,0,0,.5);   
  position: relative;
  z-index: 10;
}

#instructions {
  font-family: "Courier New", Courier, mono;
  background-image: url(../images/paper.png);
  width: 600px;
  height: 4.5em;
  margin: 0 auto -10px auto;
  padding: 30px 50px 1em 50px;
  position: relative;
  z-index: 1;
   -webkit-transform: rotate(2deg);  
}
#instructions h4 {
  font-size: 16px;
  margin: .5em 0 0 0;
}
#instructions p {
  color: #000;
  text-shadow: none;
  margin: .5em 0;
}
#showcase {
  background: #fff url(../images/white_noise.gif);
  width: 320px;
  height: 350px;  
  float: left;
  position: relative;
  overflow: auto;
  border-top: 2px ridge #654c18;   
  -webkit-box-shadow:0 0 10px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 10px rgba(0,0,0,.7);      
}
#showcase p {
  color: #eee;
  text-shadow: none;
  margin-top: 0;
}

#spotlight span.date {
  color: #666;
  font-size: 1.3em;
  margin: .2em 0;
  display: block;
}

#contact {
  width: 290px;
  float: left;
  padding: 0 20px 0 10px;
}
#showcase #spotlight {
  padding: 0 30px;
  margin-top: 20px;
  height: 300px;
  position: relative;
  z-index: 20;
  overflow: auto;
}
#showcase h2 {
  margin: 10px 0 10px 0;
}
#showcase #screen-overlay {
  height: 350px;
  width: 319px;
  z-index: 0;
  margin-left: -1px;
  position: absolute;
  background-image: url(../images/screen-overlay.png);
  border-left: 1px solid #1e1102;  
  border-right: 1px solid ;
}

#lower {
  background-image: url(../images/wood.jpg);	
  border-top: 2px groove #5d4922;
  border-bottom: 2px solid #95bbe3;  
  padding-bottom: 20px; 
  border-left: 1px solid #89acd1;  
  border-right: 1px solid #89acd1;    
}

#legend {
width: 638px;
margin: 0 ;
float: left;
}

#legend h3 {
  margin: .8em 30px;
}

#legend ul, a#viewall {
  display: inline-block;
  vertical-align: top;
  list-style: none; 
  color: #fff;
  font-weight: bold;
  padding: 0 10px;
  margin: 0 22px;
  width: 250px;
  background: rgba(0,0,0,.6);
  -webkit-border-radius:10px;
-moz-border-radius:10px;
border-top: 4px ridge rgba(63,43,8,0.39);
border-bottom: 2px groove rgba(174,118,30,0.39);
border-left: 1px solid rgba(174,118,30,0.39);
border-right: 1px solid rgba(174,118,30,0.39);  
}
#legend ul li {
  margin:.8em 0;
}
#legend ul li img {
  vertical-align: middle;
  margin-right: 5px;
}

a#viewall {
  display: block;
  width: 5.5em;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  position: relative;
  margin-top:-2.3em;
  float: right;
  border: none;
}
a#viewall:hover {
  background: rgba(0,0,0, .9);
}
.roles {
  margin-top: 2px;
  padding: 4px 20px;	
  /*background: rgba(245,241,233,0);*/
}
#spotlight .roles {
  padding: 0;
}

.roles span {
  clear: both;
  display: inline-block;
  width: 24px;
  height: 18px;
  text-indent: -999em;
  background-repeat: no-repeat;
  margin-right: 5px;
}

.TE {
  background-image: url(../images/roles/tracking.png);
}
.ME {
  background-image: url(../images/roles/mixing.png);
}
.M {
  background-image: url(../images/roles/musician.png);
}
.P {
  background-image: url(../images/roles/producer.png);
}
.D {
  background-image: url(../images/roles/designer.png);
}
.F {
  background-image: url(../images/roles/front-end.png);
}
.A {
  background-image: url(../images/roles/artist.png);
}

.clear {
  clear: both;
}

#reactions {
  margin: 40px auto;
  width: 960px;
  min-height: 100px;
}
#reactions h1 {
  font-size: 40px;
}
#reactions p {
  text-shadow: none;
  color: #333;
}
#reactions a {
  color: #333;
  text-shadow: 0 1px 1px rgba(256,256,256,0);  
  -webkit-transition:text-shadow, .3s;  
}
#reactions a:hover {
  -webkit-transition:text-shadow, .3s;
  text-shadow: 0 1px 1px rgba(256,256,256,.5);
  border: none;
}
#reactions > div {
  width: 440px;
  float: left;
  margin: 0 20px;
  text-align: center;
}