/********************************************   
********************************************/

body {
  margin: 0;
  padding: 0;
  font: 14px/16px Helvetica;
  height:  500px;
  font: 18px/20px Helvetica;

  background: #ab9d63; /* Old browsers */
  background: -moz-linear-gradient(top, #ab9d63 0%, #afa063 83%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ab9d63), color-stop(83%,#afa063)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ab9d63 0%,#afa063 83%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ab9d63 0%,#afa063 83%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ab9d63 0%,#afa063 83%); /* IE10+ */
  background: linear-gradient(top, #ab9d63 0%,#afa063 83%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab9d63', endColorstr='#afa063',GradientType=0 ); /* IE6-9 */

}        

h1.toptext {
  margin: 0px;
  padding: 5px 0 5px 5px;
  font-size: 50px;
  line-height: 42px;
  font-family: Myriad Pro;
  font-weight: bold;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(128,128,128,.1);
  text-shadow: -1px -1px 2px rgba(0,0,0,.8), 1px 1px 2px rgba(255,255,255,.6);
  color: #ab9d63;
}

h2 {
  font-size: 36px;
  line-height: 30px;
  font-family: Arial, san-serif;
  font-weight: bold;
  text-align: center;
  -webkit-text-stroke: 1px rgba(128,128,128,.1);
  text-shadow: -1px -1px 2px rgba(0,0,0,.8), 1px 1px 2px rgba(255,255,255,.6);
  color: #ab9d63;
}

h3 {
  font-size: 24px;
  line-height: 30px;
  margin-left: 24px;
  font-family: Arial, san-serif;
  font-weight: bold;
  text-align: left;
  text-shadow: -1px -1px 2px rgba(0,0,0,.9), 1px 1px 2px rgba(255,255,255,.4);
  color: #ab9d63;  
}

.spqrtext {
  position:fixed;
  top: 0;
  left: 0;
}

.spqrtext p {
  margin-top: 60px;
  margin-left: 10px;
  font-size: 120px;
  line-height: -0px;
  color: transparent;
  //-webkit-text-stroke: 1px rgba(0,0,0,.2);
  //text-stroke: 1px rgba(0,0,0,.2);

  text-shadow: -2px -2px 3px rgba(0,0,0,.02), 1px 1px 2px rgba(255,0,0,.02);
}

/**********************************************************

**********************************************************/

.navitems {
  margin: 0 15px 0 15px;
}        


.navitems ul {
  position: relative;
  margin-left: -25px;
  padding: 0;
  list-style: none;
  color: black;
}
                
.navitems ul li {
  border: 1px solid #888;
  margin-top: 3px;
  margin-bottom: 6px;
  width: 260px;
  -webkit-box-shadow: -2px 3px 10px #666;
  -moz-box-shadow: -2px 3px 10px #666;

  -webkit-border-radius: 10px;
  padding-left: 8px;
  display: block;
  text-decoration: none;
  text-align: left;
  float:  left;
  margin-left: 20px;

  background: #a2915c; /* Old browsers */
  background: -moz-linear-gradient(top, #a2915c 0%, #b6ab66 13%, #b6ab66 59%, #a18f52 96%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a2915c), color-stop(13%,#b6ab66), color-stop(59%, #b6ab66), color-stop(96%,#a18f52)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a2915c 0%,#b6ab66 13%,#b6ab66 59%,#a18f52 96%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a2915c 0%,#b6ab66 13%,#b6ab66 59%,#a18f52 96%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a2915c 0%,#b6ab66 13%,#b6ab66 59%,#a18f52 96%); /* IE10+ */
  background: linear-gradient(top, #a2915c 0%,#b6ab66 13%,#b6ab66 59%,#a18f52 96%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2915c', endColorstr='#a18f52',GradientType=0 ); /* IE6-9 */

}
 
.navitems ul li:first-child {
  border-top: 0px solid #000;
}
        
/********************************************

********************************************/
       
ul {
    margin-top: 10px;
    list-style: none;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
}

ul li {
      float: left;
      margin-bottom: 10px;
}

li a:visited, a:link {
      color: white;
      font-size: 20px;
      font-weight: bold;
}

li a:hover {
      color: #89F469;
      font-size: 24px;
      -webkit-transform: translate(-35px,0px);
	-webkit-transition: font-size;
}


li, a {
      text-decoration: none; 
      font-size: 14px;
      color: white;
}

/* --------------------------------------
   Styling for the play buttons
---------------------------------------*/

.content ul {
   position: relative;
   margin: 0;
   padding: 0;
   list-style: none;
}
                
.content ul li {
   border: 2px solid #888;
   -webkit-box-shadow: -2px -2px 5px rgba(0,0,0,.7), 2px 2px 5px rgba(255,255,255,.5);
   -moz-box-shadow: -2px -2px 5px rgba(0,0,0,.7), 2px 2px 5px rgba(255,255,255,.5);

   box-shadow: -2px -2px 5px rgba(0,0,0,.7), 2px 2px 5px rgba(255,255,255,.7);
   width: 10px;
   margin-top: 10px;
   margin-left: 16px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   display: block;
   font-size: 22px;
   font-weight: bold;
   text-decoration: none;
   padding: 10px 25px 10px 40px;
   float:  left;

   cursor: hand; 
   cursor: pointer; 
}
        
.content ul li:first-child {
   border-top: 0px;             
}
        
.content ul li {
   background: url(../images/media_btn.png) no-repeat 8px 9px;
}
.content ul li#playing {
   background: url(../images/media_play_btn.png) no-repeat 8px 7px;
}
        
.content ul li#paused {
   background: url(../images/media_pause_btn.png) no-repeat 8px 7px;
}

/* --------------------------------------
 Styling for the buttons
---------------------------------------*/

.button{
  width: 90px;
  height: 24px;
  margin-right: 8px;
  padding: 5px 16px 3px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border: 2px solid #ccc;
  position: relative;

  background-color: rgba(60, 132, 198, 0.8);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;
  -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
  -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */

  /* Label */
  font-family: Lucida Sans, Helvetica, sans-serif;
  font-weight: 800;
  //color: #fff;
  //text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: wrap;
}