/* ----------------------------------------------- DEFAULT STYLESHEET -------------------------------------------- */
html {
 height: 100%;}

body {
 margin: 0; 
 padding: 0; 
 background: url(images/bg-sandfullsize.gif) no-repeat center center fixed; 
 /* -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover; */
 background-size: cover;
 /* -moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
 -webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out; */
 /* transition: left 100ms ease-in-out, right 100ms ease-in-out; */}

 a:link {color: #074783; text-decoration: none;}
 a:visited {color: #074783; text-decoration: none;}
 a:hover {color: #BE5F07; text-decoration: none; transition:.4s;}
 a:active {color: #074783; text-decoration: none;}
 
 a.type2:link {color: #10466a; text-decoration: none; transition: all 0.4s ease-in-out;}    
 a.type2:visited {color: #10466a; text-decoration: none;}
 a.type2:hover {color: #F97408; text-decoration: underline; 
				transition:.4s; 
				text-shadow: 1px 1px 2px #000; 
				-webkit-transform:scale(2.0, 1.0);
                -moz-transform:scale(2.0, 1.0);
                -ms-transform:scale(2.0, 1.0);
                -o-transform:scale(2.0, 1.0);
                transform:scale(2.0,1.0);}
 a.type2:active {color: #10466a;  text-decoration: none;}
 
 a.type3:link {color: #ffffff; text-decoration: none; transition: all 0.4s ease-in-out;}
 a.type3:visited {color: #ffffff; text-decoration: none;}
 a.type3:hover {color: #3f3e45; text-decoration: none; 
                -o-transition:.4s; 
				-ms-transition:.4s; 
				-moz-transition:.4s; 
				-webkit-transition:.4s; 
				transition:.4s; 
				text-shadow: 2px 2px 3px #000;}
 a.type3:active {color: #ffffff;  text-decoration: none;}
 
 a.type4:link {color: #83c0f9; text-decoration: none; transition: all 0.4s ease-in-out;}
 a.type4:visited {color: #83c0f9; text-decoration: none;}
 a.type4:hover {color: #ffffff; text-decoration: none; 
                -o-transition:.4s; 
				-ms-transition:.4s; 
				-moz-transition:.4s; 
				-webkit-transition:.4s; 
				transition:.4s; 
				text-shadow: 1px 1px 2px #000; 
				-webkit-transform:scale(2.0, 1.0);
                -moz-transform:scale(2.0, 1.0);
                -ms-transform:scale(2.0, 1.0);
                -o-transform:scale(2.0, 1.0);
                transform:scale(2.0,1.0);}
 a.type4:active {color: #83c0f9;  text-decoration: none;}
  
.helptext {
  width: 400px;
  height: auto;
  position: relative;
  margin: 0; 
  padding: 10px;
  display: none;
  border: 1px solid #936;
  background-color: #FFF;}
 
ul.type1 {
 list-style: disc;
 padding: 0;
 margin: 10px 0 10px 0;
 display: inline-block;}

li.type1 {
 text-align: left;
 font-family: 'Raleway', sans-serif;
 font-size: 12pt;
 font-weight: normal;
 font-style: normal;
 margin: 0;
 padding: 0;
 color: #435c86;
 line-height: 145%;}
 
/* ----------------------- PRELOAD IMAGES ------------------- */
.preload {
 display: none;}
 
/* ----------------------- BEGIN FONTS -------------------- */
h1 {
 text-align: center;
 text-shadow: 2px 2px 4px #161e56;
 font-family: 'Poiret One', cursive;
 font-size: 25pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0 0 0 0;
 color: #ffffff;
 letter-spacing: 0;
 line-height: 100%;}
 
h1.error {
 text-align: center;
 text-shadow: 2px 2px 4px #161e56;
 font-family: 'Poiret One', cursive;
 font-size: 45pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 0 0;
 color: #10466a;
 letter-spacing: 0;
 line-height: 100%;}
 
h3 {
 text-align: center;
 text-shadow: 1px 1px 2px #454545;
 font-family: 'Poiret One', cursive;
 font-size: 32pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 10px 0;
 color: #10466a;
 letter-spacing: 0;}
 
h3.errorpage {
 text-align: center;
 text-shadow: 2px 2px 4px #161e56;
 font-family: 'Poiret One', cursive;
 font-size: 25pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 0 0;
 color: #BE5F07;
 letter-spacing: 0;
 line-height: 100%;}
 
h3.dark {
 text-align: center;
 font-family: 'Poiret One', cursive;
 font-size: 32pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 40px 0 10px 0;
 color: #1a4792;
 letter-spacing: 0;}
 
h3.white {
 text-align: center;
 font-family: 'Poiret One', cursive;
 font-size: 32pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 40px 0 10px 0;
 color: #ffffff;
 letter-spacing: 0;}
 
h3.center {
 text-align: center;
 font-family: 'Poiret One', cursive;
 font-size: 18pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 0 0;
 color: #064b8b;
 letter-spacing: 6px;
 line-height: 100%;}
 
h3.sub {
 text-align: left;
 text-shadow: 2px 2px 3px #000;
 font-family: "Times New Roman", serif;
 font-weight: 400;
 font-size: 24pt;
 font-style: normal;
 padding: 0;
 margin: 10px 0 10px 10px;
 color: #FFFFFF;
 letter-spacing: 0;}
 
h3.sub-center {
 text-align: center;
 text-shadow: 2px 2px 3px #000;
 font-family: "Times New Roman", serif;
 font-weight: 400;
 font-size: 24pt;
 font-style: normal;
 padding: 0;
 margin: 0;
 color: #FFFFFF;
 letter-spacing: 0;}
 
h3.error {
 text-align: center;
 text-shadow: 2px 2px 3px #000;
 font-family: "Times New Roman", serif;
 font-weight: 400;
 font-size: 18pt;
 font-style: normal;
 padding: 0;
 margin: 0;
 color: #FFFFFF;
 letter-spacing: 0;}
 
h3.box {
 text-align: left;
 font-family: "Times New Roman", serif;
 font-weight: 400;
 font-size: 18pt;
 font-style: normal;
 padding: 0;
 margin: 10px 0 10px 10px;
 color: #915f37;
 letter-spacing: 0;}
 
h3.main {
 text-align: left;
 font-family: 'Poiret One', cursive;
 font-weight: 400;
 font-size: 18pt;
 font-style: normal;
 padding: 0;
 margin: 10px 0 5px 10px;
 color: #915f37;
 letter-spacing: 0;}
 
h3.subcategory {
 text-align: left;
 text-shadow: 1px 1px 2px #000;
 font-family: 'Poiret One', cursive;
 font-weight: 400;
 font-size: 24pt;
 font-style: normal;
 padding: 0;
 margin: 10px 0 10px 0;
 color: #10466a;
 letter-spacing: 0;}

h4 {
 text-align: center;
 text-shadow: 1px 1px 2px #454545;
 font-family: 'Poiret One', cursive;
 font-size: 24pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 10px 0;
 color: #10466a;
 letter-spacing: 0;}
 
h5 {
 text-align: left;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #5e5858;
 letter-spacing: 0;}
 
h5.right {
 text-align: right;
 font-family: 'Forum', cursive;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 5px 5px 0 0;
 color: #5e5858;
 letter-spacing: 0;}
 
h5.white {
 text-align: right;
 font-family: Arial, Verdana, sans-serif;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 5px 5px 0 0;
 color: #ffffff;
 letter-spacing: 0;
 text-shadow: 2px 2px 2px #000;}
 
h5.main {
 text-align: left;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0 0 30px 10px;
 color: #5e5858;
 letter-spacing: 0;}
 
h5.song {
 text-align: left;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0;
 color: #5e5858;
 letter-spacing: 0;
 line-height: 110%;}
 
h5.center {
 text-align: center;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 12pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #1a4792;
 letter-spacing: 0;}
 
h5.usercenter {
 text-align: center;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 12pt;
 font-weight: normal;
 font-style: normal;
 padding: 0 0 10px 0;
 margin: 10px 0 0 0;
 color: #1a4792;
 letter-spacing: 0;}
 
h5.usertitle {
 text-align: center;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 12pt;
 font-weight: 700;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #1a4792;
 letter-spacing: 0;}
 
h5.center-light {
 text-align: center;
 font-family: 'Forum', "Times New Roman", serif;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #83c0f9;
 letter-spacing: 0;
 text-shadow: 1px 1px 2px #000;}
 
h5.left-white {
 text-align: left;
 font-family: 'Forum', "Times New Roman", serif;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 20px 0 0 0;
 color: #83c0f9;
 letter-spacing: 0;
 text-shadow: 1px 1px 2px #000;}
 
h5.center-white {
 text-align: center;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #ffffff;
 letter-spacing: 0;}
 
h5.errortext {
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 10px 0 0 0;
 color: #1a4792;
 letter-spacing: 0;}
 
h6 {
 text-align: center;
 font-family: 'Forum', "Times New Roman", serif;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0 20px 20px 0;
 margin: 0;
 color: #031f39;
 letter-spacing: 0;
 text-shadow: 1px 1px 2px #fff;}
 
h6.footer-right {
 text-align: right;
 font-family: 'Forum', cursive;
 font-size: 10pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0;
 color: #064b8b;
 letter-spacing: 0;}
 
h6.footer-left {
 text-align: left;
 font-family: 'Forum', cursive;
 font-size: 10pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0;
 color: #707376;
 letter-spacing: 0;}
 
p {
 text-align: center;
 font-family: 'Forum', cursive;
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 5px 0 0 0;
 color: #5e5858;
 letter-spacing: 0;}
 
p.button {
 padding: 0;
 margin: 0;
 font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0;
 text-shadow: 2px 2px 2px #000;}
 
p.button:hover {
 padding: 0;
 margin: 0;
 font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0;
 text-shadow: 2px 2px 2px #000;}
 
.bold {
 font-weight: bold;}
 
.bold-title {
 font-weight: bold;
 text-decoration: underline;
 color: #999;}
 /* ----------------------- END FONTS -------------------- */
 
 


 
/* ----------------------- BEGIN CONTAINERS -------------------- */ 

#orange-box {
 width: 21%; 
 height: 215px; 
 float: left; 
 border: 2px solid #f1c809; 
 background-color: #f19109; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f19109), to(#f15b09)); 
 background: -webkit-linear-gradient(top, #f19109, #f15b09); 
 background: -moz-linear-gradient(top, #f19109, #f15b09); 
 background: -ms-linear-gradient(top, #f19109, #f15b09); 
 background: -o-linear-gradient(top, #f19109, #f15b09); 
 box-shadow: 1px 1px 10px 0 rgba(0,0,0,.45); 
 margin: 0 15px 0 0; 
 padding: 10px; 
 display: inline-block; 
 border-radius: 7px;  
 -moz-border-radius: 7px; 
 -webkit-border-radius: 7px; 
 -khtml-border-radius: 7px;}
 
#orange-box:hover { 
 border: 2px solid #ffffff; 
 box-shadow: 1px 1px 10px 0 rgba(241,91,9,.75); 
 background-color: rgba(241,91,9,.5);}

#blue-box {
 width: 21%; 
 height: 215px; 
 float: left; 
 border: 2px solid #1e89c6; 
 background-color: #216298; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#216298), to(#14466f)); 
 background: -webkit-linear-gradient(top, #216298, #14466f); 
 background: -moz-linear-gradient(top, #216298, #14466f); 
 background: -ms-linear-gradient(top, #216298, #14466f); 
 background: -o-linear-gradient(top, #216298, #14466f); 
 box-shadow: 1px 1px 10px 0 rgba(0,0,0,.45); 
 margin: 0 0 0 15px; 
 padding: 10px; 
 display: inline-block; 
 border-radius: 7px;  
 -moz-border-radius: 7px; 
 -webkit-border-radius: 7px; 
 -khtml-border-radius: 7px;}

#burgundy-box {
 width: 21%; 
 height: 215px; 
 float: right; 
 border: 2px solid #8e9a89; 
 background-color: #63705e; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63705e), to(#3b4b35)); 
 background: -webkit-linear-gradient(top, #63705e, #3b4b35); 
 background: -moz-linear-gradient(top, #63705e, #3b4b35); 
 background: -ms-linear-gradient(top, #63705e, #3b4b35); 
 background: -o-linear-gradient(top, #63705e, #3b4b35); 
 box-shadow: 1px 1px 10px 0 rgba(0,0,0,.45); 
 margin: 0 0 0 15px; 
 padding: 10px; 
 display: inline-block; 
 border-radius: 7px;  
 -moz-border-radius: 7px; 
 -webkit-border-radius: 7px; 
 -khtml-border-radius: 7px;}

#green-box {
 width: 21%; 
 height: 215px; 
 float: right; 
 border: 2px solid #c45e91;
 background-color: #993366; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#993366), to(#701d47)); 
 background: -webkit-linear-gradient(top, #993366, #701d47); 
 background: -moz-linear-gradient(top, #993366, #701d47); 
 background: -ms-linear-gradient(top, #993366, #701d47); 
 background: -o-linear-gradient(top, #993366, #701d47); 
 box-shadow: 1px 1px 10px 0 rgba(0,0,0,.45); 
 margin: 0 15px 0 0; 
 padding: 10px; 
 display: inline-block; 
 border-radius: 7px;  
 -moz-border-radius: 7px; 
 -webkit-border-radius: 7px; 
 -khtml-border-radius: 7px;}




/* ---------------------- BEGIN USERS TABLE ---------------------- */
table.users {
 border: 2 solid #0099FF;
 border-collapse: collapse;
 background-color: #ffffff;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#dedbde)); /* Safari 4-5, Chrome 1-9 */ 
 background: -webkit-linear-gradient(top, #ffffff, #dedbde); /* Safari 5.1, Chrome 10+ */
 background: -moz-linear-gradient(top, #ffffff, #dedbde); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #ffffff, #dedbde); /* IE 10 */
 background: -o-linear-gradient(top, #ffffff, #dedbde); /* Opera 11.10+ */
 margin: 0 auto;
 padding: 0;
 width: 95%;
 -moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
 -webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
 transition: left 100ms ease-in-out, right 100ms ease-in-out;}
   
tr, td {
 border: 1px solid #bec0c1;
 -moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
 -webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
 transition: left 100ms ease-in-out, right 100ms ease-in-out;}
 
th {
 background-color: #995374;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#995374), to(#7E2E51)); /* Safari 4-5, Chrome 1-9 */ 
 background: -webkit-linear-gradient(top, #995374, #7E2E51); /* Safari 5.1, Chrome 10+ */
 background: -moz-linear-gradient(top, #995374, #7E2E51); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #995374, #7E2E51); /* IE 10 */
 background: -o-linear-gradient(top, #995374, #7E2E51); /* Opera 11.10+ */}
   
tr.highlight:hover {
 background-color: #fff;
 box-shadow: 1px 1px 10px 0 rgba(0,0,0,.45);
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 border: 2px solid #4fa9fc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}




/* ----------------------- BEGIN DRAG N' DROP CONTAINERS -------------------- */ 
.dragsongs {
 width: 25%;
 height: auto;
 display: inline-block;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 0 20px 0 0;
 padding: 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;
 float: left;}
/* ----------------------- END DRAG N' DROP CONTAINERS -------------------- */ 





/* ------------------------------ BEGIN B0X 1 ------------------------ */
.box1 {  
 width: 300px;
 height: 300px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 margin: 0 auto; 
 background: url(images/music-1.png);
 background-size: cover;
 border: 2px solid #3f3e45;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 overflow: hidden;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transition: all 0.8s ease-in-out;}
  
.box1:hover {
 opacity: 1;
 border: 2px solid #f29d0b;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 border-radius: 150px;
 -moz-border-radius: 150px;
 -webkit-border-radius: 150px;
 -khtml-border-radius: 150px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 box-shadow: 1px 1px 40px 0 rgba(242,157,11,.75);
 background: url(images/music-1-grey.png);
 background-size: cover;}

.box1:hover .overlay {
 opacity: 1;
 width: 100%;
 height: 100%;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;}
 /* ------------------------------ END B0X 1 ------------------------ */
 
/* ------------------------------ BEGIN B0X 2 ------------------------ */
.box2 {  
 width: 300px;
 height: 300px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 margin: 0 auto; 
 background: url(images/music-2.png);
 background-size: cover;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 overflow: hidden;
 border: 2px solid #3f3e45;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transition: all 0.8s ease-in-out;}
 
.box2:hover {
 opacity: 1;
 border: 2px solid #0166ea;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 border-radius: 150px;
 -moz-border-radius: 150px;
 -webkit-border-radius: 150px;
 -khtml-border-radius: 150px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 box-shadow: 1px 1px 40px 0 rgba(1,102,234,.75);
 background: url(images/music-2-grey.png);
 background-size: cover;}

.box2:hover .overlay {
 opacity: 1;
 width: 100%;
 height: 100%;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;}
 /* ------------------------------ END B0X 2 ------------------------ */
 
 
 /* ------------------------------ BEGIN B0X 3 ------------------------ */
.box3 {  
 width: 300px;
 height: 300px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 margin: 0 auto; 
 background: url(images/music-3.png);
 background-size: cover;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 overflow: hidden;
 border: 2px solid #3f3e45;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transition: all 0.8s ease-in-out;}
 
.box3:hover {
 opacity: 1;
 border: 2px solid #fb0d77;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 border-radius: 150px;
 -moz-border-radius: 150px;
 -webkit-border-radius: 150px;
 -khtml-border-radius: 150px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 box-shadow: 1px 1px 40px 0 rgba(251,13,119,.75);
 background: url(images/music-3-grey.png);
 background-size: cover;}

.box3:hover .overlay {
 opacity: 1;
 width: 100%;
 height: 100%;
 -webkit-transition: all .8s ease-in-out;
 -moz-transition: all .8s ease-in-out;
 -o-transition: all .8s ease-in-out;
 transition: all .8s ease-in-out;}
 /* ------------------------------ END B0X 3 ------------------------ */

.overlay {  
 background: rgba(0,0,0,.55); /* ----- LIGHTEN DARK OVERLAY -------- */
 text-align: center;
 padding: 125px 0 0 0;
 opacity: 0;
 -webkit-transition: opacity .25s ease;
 -moz-transition: opacity .25s ease;
 width: 100%;
 height: 100%;}

.text {  
 font-family: Arial, Helvetica;
 font-weight: 900;
 color: rgba(255,255,255,.85);
 font-size: 36px;}
 
.container-datafeed {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 0 solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 50px;
 margin-bottom: 0;
 padding: 0; 
 overflow: visible; 
 text-align: left;
 font-family: 'Forum', cursive, "Lucida Console";
 font-size: 14pt;
 font-weight: normal;
 font-style: normal;
 color: #5e5858;
 letter-spacing: 0;}
 
.container-blank {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 0 solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 50px;
 margin-bottom: 0;
 padding: 0 0 10px 0;
 text-align: center; 
 overflow: visible;
 display: table;}
 
.container-text {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 0 solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0;
 margin-bottom: 0;
 padding: 0;
 text-align: center; 
 overflow: visible;}
 
#category-l {
 width: 33%;
 height: auto;
 border: 0 solid #3498db;
 display: inline-block;
 float: left;
 margin: 0 0 20px 0;
 padding: 0;
 text-align: center;}
 
#category-c {
 width: 33%;
 height: auto;
 border: 0 solid #3498db;
 display: inline-block;
 margin: 0 0 20px 0;
 padding: 0;
 text-align: center;}
 
#category-r {
 width: 33%;
 height: auto;
 border: 0 solid #3498db;
 display: inline-block;
 float: right;
 margin: 0 0 20px 0;
 padding: 0;
 text-align: center;} 
 
/* ------------------------------ BEGIN PULSE EFFECT ------------------------- */	
#container {
 width: 33%;
 position: relative;
 text-align: center;}

.pulse {
 width: 275px;
 height: 275px;
 border: 2px solid #3f3e45;
 background: url(images/music-3.png);
 background-size: cover;
 z-index: 10;
 position: relative;
 top: 35px;
 left: 35px;
 transition: all 0.8s ease-in-out;}
 
.pulse:hover {
 width: 275px;
 height: 275px;
 border: 2px solid #f29d0b;
 -webkit-border-radius: 150px;
 -moz-border-radius: 150px;
 border-radius: 150px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
 box-shadow: 2px 2px 6px #f29d0b;
 background: url(images/music-3-grey.png);
 background-size: cover;
 z-index: 10;
 position: relative;
 top: 35px;
 left: 35px;}

.dot {
 border: 10px solid #f29d0b;
 background: transparent;
 -webkit-border-radius: 360px;
 -moz-border-radius: 360px;
 border-radius: 360px;
 height: 325px;
 width: 325px;
 -webkit-animation: pulse 3s ease-out;
 -moz-animation: pulse 3s ease-out;
 animation: pulse 3s ease-out;
 -webkit-animation-iteration-count: infinite;
 -moz-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 position: absolute;
 top: 35px;
 left: 35px;
 z-index: 1;
 opacity: 0;}

@-moz-keyframes pulse {
0% {
 -moz-transform: scale(0);
 opacity: 0.0;}
	
25% {
 -moz-transform: scale(0);
 opacity: 0.1;}
	
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.2;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

@-webkit-keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
}
/* ------------------------------ END PULSE EFFECT ------------------------- */


.formatted-small {
 text-align: left; 
 font-family: Arial; 
 font-size: 9pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 0; 
 color: #959191;
 line-height: 90%;}

.formatted {
 text-align: left; 
 font-family: Arial; 
 font-size: 12pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 5px 3px 0 0; 
 color: #1a4792;}
 
.formatted-grey {
 text-align: left; 
 font-family: Arial; 
 font-size: 12pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 5px 5px 0 10px; 
 color: #959191;}
 
.artist-container {
 height: auto; 
 width: 200px; 
 display: inline-block; 
 text-align: left; 
 padding-top: 8px;  
 margin-top: -25px;
 float: left; 
 border: 0 solid #990;
 font-family: Arial; 
 font-size: 9pt; 
 font-weight: normal; 
 font-style: normal;  
 color: #959191;
 line-height: 90%;}
 
.formatted-artist {
 text-align: left; 
 font-family: Arial; 
 font-size: 9pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 0; 
 color: #959191;
 line-height: 90%;
 display: inline-block;}
 
.formatted-title {
 text-align: right; 
 font-family: Arial; 
 font-size: 10pt; 
 font-weight: bold; 
 font-style: italic; 
 padding: 0; 
 margin: 0 0 0 20px; 
 color: #959191;}
 
.formatted-songs {
 text-align: center; 
 font-family: Arial; 
 font-size: 12pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 5px 3px 0 0; 
 color: #1a4792;
 line-height: 150%;}
 
.formatted-songs::after { 
 content: "| ";
 font-size: 10pt;
 color: #999999;
 position: relative;
 top: -2px;}
 
.formatted-songs:last-child:after { 
 content: "";}
 
.id3-formatted-title {
 text-align: right; 
 font-family: Arial; 
 font-size: 10pt; 
 font-weight: bold; 
 font-style: italic; 
 padding: 0; 
 margin: 0; 
 color: #959191;
 line-height: 100%;}
 
.id3-formatted-songs {
 text-align: left; 
 font-family: Arial; 
 font-size: 12pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 0; 
 color: #1a4792;
 line-height: 100%;}
 
.id3-query-name {
 width: 75px;
 height: 20px;
 float: left;
 border: 0 solid #00ff00;
 display: inline-block;
 margin: 0 5px 0 0;
 padding: 0;
 text-align: right;
 clear: both;}
 
.id3-text {
 text-align: left; 
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 9pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 0; 
 color: #999;
 line-height: 200%;}
 
.song-title {
 text-align: center; 
 font-family: Arial; 
 font-size: 9pt; 
 font-weight: normal; 
 font-style: normal; 
 padding: 0; 
 margin: 0; 
 color: #1a4792;
 line-height: 130%;}
 
.id3-song-title {
 font-weight: bold;
 text-decoration: underline;
 color: #999;}
 
header {
 width: 100%;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #0766be, #074783); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #0766be, #074783); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #0766be, #074783); /* IE 10 */ 
 background: -o-linear-gradient(top, #0766be, #074783); /* Opera 11.10+ */
 height: auto;
 text-align: center;
 margin: 0 auto;
 padding: 10px 0 10px 0;}
 
.headerleft {
 float: left; 
 width: 24%; 
 height: auto; 
 border: 0 solid #ffffff; 
 text-align: left; 
 display: inline-block;}
 
.headercenter {
 margin: 0 auto; 
 width: 48%; 
 height: 35px; 
 border: 0 solid #CCC; 
 text-align: center; 
 display: inline-block;}
 
.headerright {
 float: right; 
 width: 24%; 
 height: 35px; 
 border: 0 solid #CCC; 
 text-align: right; 
 display: inline-block;}
 
.container {
 width: 75%;
 max-width: 600px;
 height: auto;
 border-top: 2px solid #9f9e9e;
 border-left: 2px solid #9f9e9e;
 border-bottom: 2px solid #fff;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center;
 overflow: auto;
 background-color: #c5c6c7;
 background-image: url(images/texture1.png);
 background-position: 0% 0%;
 background-repeat: repeat;
 box-shadow: 2px 2px 2px #646567 inset;}
 
.containerblue {
 width: 75%;
 max-width: 600px;
 height: auto;
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center;
 overflow: hidden;
 /* background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); 
 background: -webkit-linear-gradient(top, #0766be, #074783); 
 background: -moz-linear-gradient(top, #0766be, #074783); 
 background: -ms-linear-gradient(top, #0766be, #074783); 
 background: -o-linear-gradient(top, #0766be, #074783); */
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 background-color: rgba(6,80,148, .8);
 color: #12247c;
 text-shadow: 0 0 3px #64bbf9;}
 
.indexcontainer {
 width: 75%;
 max-width: 600px;
 height: auto;
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center;
 overflow: hidden;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #0766be, #074783); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #0766be, #074783); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #0766be, #074783); /* IE 10 */ 
 background: -o-linear-gradient(top, #0766be, #074783); /* Opera 11.10+ */
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);}
 
.outer-container {
 width: 100%;
 height: 100%;
 min-height: 772px;
 margin: 0; 
 padding: 0; 
 background-color: #ffffff;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#67656f), to(#000000));
 background: -webkit-linear-gradient(top, #67656f, #000000);
 background: -moz-linear-gradient(top, #67656f, #000000);
 background: -ms-linear-gradient(top, #67656f, #000000);
 background: -o-linear-gradient(top, #67656f, #000000);
 background-image: url(images/grain.png);
 overflow: auto;}
 
.test-container {
 width: 75%;
 max-width: 600px;
 height: auto;
 border-top: 2px solid #9f9e9e;
 border-left: 2px solid #9f9e9e;
 border-bottom: 2px solid #fff;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center;
 overflow: auto;
 background-color: #c5c6c7;
 background-image: url(images/texture1.png);
 background-position: 0% 0%;
 background-repeat: repeat;
 box-shadow: 2px 2px 2px #646567 inset;}
 
.container-wide {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center; 
 overflow: auto;
 background-color: #eae7dc;
 background-image: url(images/texture1.png);
 background-position: 0% 0%;
 background-repeat: repeat;
 box-shadow: 2px 2px 2px #646567 inset;
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
 -webkit-column-gap: 10px;
 -moz-column-gap: 10px;
 column-gap: 10px;}
 
.container-wide-blue {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 10px;
 padding: 20px;
 text-align: center; 
 overflow: auto;
/* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); 
 background: -webkit-linear-gradient(top, #0766be, #074783);
 background: -moz-linear-gradient(top, #0766be, #074783);  
 background: -ms-linear-gradient(top, #0766be, #074783);
 background: -o-linear-gradient(top, #0766be, #074783); */
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
 -webkit-column-gap: 10px;
 -moz-column-gap: 10px;
 column-gap: 10px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 background-color: rgba(6,80,148, .8);}
 
.blue-container-generic {
 width: 55%;
 max-width: 1200px;
 height: auto;
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 10px;
 padding: 20px 100px 20px 100px;;
 text-align: center; 
 overflow: auto;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #0766be, #074783); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #0766be, #074783); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #0766be, #074783); /* IE 10 */ 
 background: -o-linear-gradient(top, #0766be, #074783); /* Opera 11.10+ */
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);}
 
.copyright-home {
 width: 100%;
 max-width: 1200px;
 height: auto;
 margin: 100px auto 0 auto;
 padding: 0px;
 border: 0 solid #0C6;
 overflow: auto;}
 
.copyright-other {
 width: 100%;
 max-width: 1200px;
 height: auto;
 margin: 25px auto 0 auto;
 padding: 0px;
 border: 0 solid #0C6;
 overflow: auto;}

.foot-container {
 width: 100%;
 max-width: 1200px;
 height: auto;
 margin: 0 auto 20px auto;
 padding: 0px;
 border: 0 solid #0C6;
 overflow: auto;}
 
.foot-left {
 float: left;
 width: 40%;
 height: auto;
 display: inline-block;
 text-align: left;
 margin: 0px;
 padding: 0px;
 border: 0 solid #074783;}
 
.foot-right {
 float: right;
 width: 40%;
 height: auto;
 display: inline-block;
 text-align: left;
 margin: 0px;
 padding: 0px;
 border: 0 solid #074783;}
 
.container-artist {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px 20px 0 20px;
 text-align: center;
 overflow: auto;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #0766be, #074783); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #0766be, #074783); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #0766be, #074783); /* IE 10 */ 
 background: -o-linear-gradient(top, #0766be, #074783); /* Opera 11.10+ */
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);}
 
 /* --------------------------------------------- BEGIN HOMEPAGE CONTAINERS ------------------ */
.container-flat {
 width: 95%;
 max-width: 1200px;
 height: auto;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 margin-bottom: 20px;
 padding: 20px;
 text-align: center;
 overflow: auto;
 background-color: #ffffff;
 box-shadow: 2px 2px 2px #646567;}
 
.left-column {
 float: left;
 width: 32%;
 max-width: 300px;
 height: auto;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin: 0;
 padding: 1%;
 text-align: center;
 overflow: auto;
 background-color: #FFFFFF;
 display: inline-block;}
 
.right-column {
 float: right;
 width: 66%;
 max-width: 1025px;
 height: auto;
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 margin: 0;
 padding: 1%;
 text-align: center;
 overflow: auto;
 background-color: #FFFFFF;
 display: inline-block;}
 /* --------------------------------------------- END HOMEPAGE CONTAINERS ------------------ */
 
.multi-column {
 width: 75%;
 height: auto;
 overflow-x: auto;
 word-wrap: normal;
 margin: 20px auto;
 padding: 20px 20px 10px 20px;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 -webkit-column-gap: 20px;
 -moz-column-gap: 20px;
 column-gap: 20px;
 /* border: 1px solid #0000ff; */
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 7px;
 background-color: #eae7dc;
 background-image: url(images/bg-bump.png);
 background-position: 0% 0%;
 background-repeat: repeat;
 box-shadow: 2px 2px 2px #646567 inset;
 text-align: center;}
 
.multi-column-blue {
 width: 75%;
 height: auto;
 overflow-x: auto;
 word-wrap: normal;
 margin: 20px auto;
 padding: 20px 20px 10px 20px;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 -webkit-column-gap: 20px;
 -moz-column-gap: 20px;
 column-gap: 20px;
 /* border: 1px solid #0000ff; */
 border: 2px solid #074783;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #0766be, #074783); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #0766be, #074783); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #0766be, #074783); /* IE 10 */ 
 background: -o-linear-gradient(top, #0766be, #074783); /* Opera 11.10+ */
 text-align: center;}
 
.multi-column-test {
 width: 75%;
 height: auto;
 overflow-x: auto;
 word-wrap: normal;
 
 margin: 20px auto;
 padding: 20px 20px 10px 20px;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 -webkit-column-gap: 20px;
 -moz-column-gap: 20px;
 column-gap: 20px;
 /* border: 1px solid #0000ff; */
 border: 1px solid #117cf5;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 background-color: #eae7dc;
 background-image: url(images/texture1.png);
 background-position: 0% 0%;
 background-repeat: repeat;
 box-shadow: 2px 2px 2px #646567 inset;
 text-align: center;}
 
.multi-column-hidden {
 width: 75%;
 height: auto;
 overflow-x: auto;
 word-wrap: normal;
 margin: 20px auto;
 padding: 20px 20px 10px 20px;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 -webkit-column-gap: 20px;
 -moz-column-gap: 20px;
 column-gap: 20px;
 /* border: 1px solid #0000ff; */
 border-top: 2px solid #9f9e9e;
 border-left: 2px solid #9f9e9e;
 border-bottom: 2px solid #fff;
 border-right: 2px solid #fff;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 background-color: #dee0e2;
 text-align: center;
 display: none;}
 
.data {
 width: 95%; 
 height: auto; 
 border: 1px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px; 
 margin: 20px 0; 
 padding: 5px;
 display: inline-block;
 text-align: left;
 background-color: #ece9fb;
 transition: all 1.0s ease-in-out;}

.data:hover {
 border: 1px solid #F78B0B;
 box-shadow: 0 0 10px #547e5b;
 /* -o-transition: .6s; 
 -ms-transition: .6s; 
 -moz-transition: .6s; 
 -webkit-transition: .6s; */
 transition: 1.0s;
 background-color: #eefbf1;
 background-image: url(images/music-notes.png);
 background-position: 100% 90%;
 background-repeat: no-repeat;}

.form-left {
 width: 24%;
 height: auto;
 float: left;
 border: 0 solid #069;
 display: inline-block;
 margin: 0 0 20px 0;
 text-align: right;}
 
.form-left-content {
 width: 100%;
 height: 25px;
 border: 0 solid #069;
 display: inline-block;
 margin: 0 0 20px 0;
 text-align: right;}
 
.form-right {
 width: 74%;
 height: auto;
 float: right;
 border: 0 solid #ff0000;
 display: inline-block;
 margin: 0 0 20px 0;
 text-align: center;}
 
.form-right-content {
 width: 100%;
 height: 25px;
 border: 0 solid #ff0000;
 display: inline-block;
 margin: 0 0 20px 0;
 text-align: left;}
 
.button-container {
 width: 75%;
 height: auto;
 float: right;
 border: 0 solid #ffffff;
 display: inline-block;
 margin: 0 auto;
 padding: 0;
 text-align: center;} 
 
.form-buttons {
 width: 99%;
 height: auto;
 float: right;
 border: 0 solid #ff0000;
 display: inline-block;
 margin: 20px auto;
 text-align: center;}
 
.form-corners {
 border: 1px solid #999;
 border-radius: 22px;
 -moz-border-radius: 22px;
 -webkit-border-radius: 22px;
 -khtml-border-radius: 22px;
 height: 25px;
 clear: both;
 margin: 0;
 padding: 0 0 2px 10px;
 font-size: 18pt;
 width: 99%;
 color: #5b5d5e;
 font-family: 'Quicksand', Verdana, sans-serif;
 box-shadow: 1px 1px 20px 0 rgba(0,0,0,.45);
 transition: all 0.8s ease-in-out;}
 
.form-corners:focus {
 outline: none;
 border-color: #ec6a01;
 box-shadow: 1px 1px 20px 0 rgba(255,255,255,.85);
 -o-transition: .4s; 
 -ms-transition: .4s; 
 -moz-transition: .4s; 
 -webkit-transition: .4s; 
 transition: .4s;}
 
.form-corners-ta {
 border: 1px solid #B0D3D7;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 height: 125px;
 clear: both;
 margin: 0;
 padding: 0 0 0 5px;
 font-size: 14pt;
 width: 99%;
 color: #5b5d5e;
 font-family: 'Quicksand', Verdana, sans-serif;
 box-shadow: 1px 1px 15px 0 rgba(0,0,0,.45);
 transition: all 0.4s ease-in-out;}
 
.query-name {
 width: 125px;
 height: auto;
 float: left;
 border: 0 solid #00ff00;
 display: inline-block;
 margin: 0;
 text-align: right;
 clear: both;}
 
.letters {
 width: 99%;
 max-width: 1200px;
 height: 30px;
 border: 0 solid #00ff00;
 display: table; 
 margin: 10px auto;
 padding: 0;
 text-align: center;
 overflow: auto;}
 
.artist {
 width: 98%;
 height: auto;
 display: inline-block;
 background-color: #ffffff;
 border: 1px solid #960;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin-top: 0;
 margin-bottom: 10px;
 margin-left: auto;
 margin-right: auto;
 padding: 10px;
 text-align: left;}
 
.artist-right {
 width: 95%;
 height: auto;
 display: inline-block;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px 0 0 0;
 padding: 10px;
 text-align: center;
 float: right;
 box-shadow: 1px 1px 20px 0 rgba(0,0,0,.45);}
 
.info-left {
 width: 47%;
 height: auto;
 display: inline-block;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 0 0 25px 0;
 padding: 10px 5px 5px 10px;
 text-align: left;
 float: left;
 box-shadow: 1px 1px 20px 0 rgba(0,0,0,.45);}
 
.info-right {
 width: 47%;
 height: auto;
 display: inline-block;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 0 0 20px 0;
 padding: 10px 5px 5px 10px;
 text-align: center;
 float: right;
 box-shadow: 1px 1px 20px 0 rgba(0,0,0,.45);}
 
.songs-left {
 float: right; 
 width: 35%; 
 height: auto; 
 margin-right: 10px;
 border: 0 solid #066;}
  
.songs-right {
 float: right; 
 width: 35%;
 height: auto; 
 margin-right: 10px;
 border: 0 solid #066;}
 
.artist-header {
 width: 99%; 
 height: auto; 
 border: 0 solid #00ff00; 
 display: inline-block;}
 
.songs-container {
 width: 49%; 
 height: auto; 
 border: 0 solid #00ff00; 
 display: inline-block; 
 float: right;}
/* ----------------------- END CONTAINERS -------------------- */




/* ----------------------- BEGIN HELP CONTAINERS -------------------- */
.help-container {
 width: 300px; 
 height: auto; 
 border: 0 solid #00ff00; 
 display: inline-block; 
 float: none;
 margin: 0;
 padding: 10px;}
/* ----------------------- END HELP CONTAINERS -------------------- */ 
 
 
 
 
 
/* -------------------- BEGIN SONG INDEX STYLES ----------------------- */
.a {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/a.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.a:hover {
 background-image: url(images/a-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.b {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/b.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.b:hover {
 background-image: url(images/b-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.c {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/c.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.c:hover {
 background-image: url(images/c-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.d {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/d.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 margin: 10px auto;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.d:hover {
 background-image: url(images/d-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.e {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/e.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.e:hover {
 background-image: url(images/e-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.f {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/f.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.f:hover {
 background-image: url(images/f-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.g {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/g.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.g:hover {
 background-image: url(images/g-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.h {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/h.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.h:hover {
 background-image: url(images/h-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.i {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/i.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.i:hover {
 background-image: url(images/i-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.j {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/j.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.j:hover {
 background-image: url(images/j-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.k {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/k.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.k:hover {
 background-image: url(images/k-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.l {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/l.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.l:hover {
 background-image: url(images/l-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.m {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/m.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.m:hover {
 background-image: url(images/m-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.n {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/n.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.n:hover {
 background-image: url(images/n-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}

.o {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/o.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.o:hover {
 background-image: url(images/o-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.p {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/p.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.p:hover {
 background-image: url(images/p-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.q {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/q.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.q:hover {
 background-image: url(images/q-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.r {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/r.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.r:hover {
 background-image: url(images/r-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.s {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/s.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.s:hover {
 background-image: url(images/s-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.t {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/t.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.t:hover {
 background-image: url(images/t-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.u {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/u.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.u:hover {
 background-image: url(images/u-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.v {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/v.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.v:hover {
 background-image: url(images/v-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.w {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/w.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.w:hover {
 background-image: url(images/w-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.x {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/x.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.x:hover {
 background-image: url(images/x-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.y {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/y.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.y:hover {
 background-image: url(images/y-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.z {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/z.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.z:hover {
 background-image: url(images/z-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
 
.zero-nine {
 width: 95%;
 height: auto;
 display: inline-block;
 background-image: url(images/0-9.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 background-color: #ffffff;
 border: 2px solid #4fa9fc;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 margin: 10px auto;
 padding: 60px 5px 5px 10px;
 text-align: left;
 text-align: left;
 transition: all 0.4s ease-in-out;}
 
.zero-nine:hover {
 background-image: url(images/0-9-blue.png);
 background-position: 2% 2%;
 background-repeat: no-repeat;
 border: 2px solid #F78B0B;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 box-shadow: 0 0 5px #0979e1;
 -o-transition: .5s; 
 -ms-transition: .5s; 
 -moz-transition: .5s; 
 -webkit-transition: .5s; 
 transition: .5s;
 box-shadow: 0 0 10px #02284b;}
/* -------------------- BEGIN SONG INDEX STYLES ----------------------- */




 
/* -------------------- BEGIN SEARCH BUTTON --------------------- */
.search-button {
 width: 35%;
 height: 20px;
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 display: inline-block;
 text-align: center;
 /* font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0; */
 padding: 2px 0 2px 0;
 margin: 10px auto;
 border: 1px solid #3f3e42;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
 box-shadow: 1px 1px 2px #000;}
 
.search-button:hover {
 background-color: #F78B0B; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F78B0B), to(#BE5F07)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F78B0B, #BE5F07); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F78B0B, #BE5F07); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F78B0B, #BE5F07); /* IE 10 */ 
 background: -o-linear-gradient(top, #F78B0B, #BE5F07); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 -webkit-box-shadow: 2px 2px 4px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 2px 2px 4px #000;  /* Firefox 3.5 - 3.6 */
 box-shadow: 2px 2px 4px #000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
 
.search-button:active {
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #FC0;}
/* -------------------- END SEARCH BUTTON --------------------- */


/* -------------------- BEGIN RESET BUTTON --------------------- */
.reset-button {
 width: 35%;
 height: 20px;
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */
 display: inline-block;
 text-align: center;
 /* font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0; */
 padding: 2px 0 2px 0;
 margin: 10px;
 border: 1px solid #3f3e42;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 -o-transition:.7s; -ms-transition:.7s; -moz-transition:.7s; -webkit-transition:.7s; transition:.7s;
 float: right;
 box-shadow: 1px 1px 2px #000;}
 
.reset-button:hover {
 background-color: #F78B0B; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F78B0B), to(#BE5F07)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F78B0B, #BE5F07); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F78B0B, #BE5F07); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F78B0B, #BE5F07); /* IE 10 */ 
 background: -o-linear-gradient(top, #F78B0B, #BE5F07); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 -webkit-box-shadow: 2px 2px 4px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 2px 2px 4px #000;  /* Firefox 3.5 - 3.6 */
 box-shadow: 2px 2px 4px #000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
 
.reset-button:active {
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #FC0;}
/* -------------------- END RESET BUTTON --------------------- */


/* -------------------- BEGIN SUBMIT BUTTON --------------------- */
.submit-button {
 width: 35%;
 height: 20px;
 background-color: #5a9de0; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5a9de0), to(#3d5d8e)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #5a9de0, #3d5d8e); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #5a9de0, #3d5d8e); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #5a9de0, #3d5d8e); /* IE 10 */ 
 background: -o-linear-gradient(top, #5a9de0, #3d5d8e); /* Opera 11.10+ */ 
 display: inline-block;
 text-align: center;
 /* font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0; */
 padding: 2px 0 2px 0;
 margin: 10px auto;
 border: 1px solid #3f3e42;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
 
.submit-button:hover {
 background-color: #68b2fc; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#68b2fc), to(#4970aa)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #68b2fc, #4970aa); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #68b2fc, #4970aa); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #68b2fc, #4970aa); /* IE 10 */ 
 background: -o-linear-gradient(top, #68b2fc, #4970aa); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 -webkit-box-shadow: 2px 2px 4px #888;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 2px 2px 4px #888;  /* Firefox 3.5 - 3.6 */
 box-shadow: 2px 2px 4px #888;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
 
.submit-button:active {
 background-color: #7b9292; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7b9292), to(#556666)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #7b9292, #556666); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #7b9292, #556666); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #7b9292, #556666); /* IE 10 */ 
 background: -o-linear-gradient(top, #7b9292, #556666); /* Opera 11.10+ */ 
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #FC0;}
/* -------------------- END SUBMIT BUTTON --------------------- */





/* -------------------- BEGIN LOGIN BUTTON --------------------- */
.login-button {
 width: 35%;
 height: 30px;
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 display: inline-block;
 text-align: center;
 font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0;
 padding: 2px 0 2px 0;
 margin: 10px auto;
 border: 1px solid #3f3e42;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
 color: #ffffff;
 text-shadow: 1px 1px 2px #000000;}
 
.login-button:hover {
 background-color: #fa892e; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fa892e), to(#c26920)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #fa892e, #c26920); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #fa892e, #c26920); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #fa892e, #c26920); /* IE 10 */ 
 background: -o-linear-gradient(top, #fa892e, #c26920); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition: .2s;
 -webkit-box-shadow: 1px 1px 2px #000000;
 -moz-box-shadow: 1px 1px 2px #000000;
 box-shadow: 1px 1px 2px #000000;
 text-shadow: 1px 1px 2px #000000;}
 
.login-button:active {
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to(#F97408)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #F97408); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #F97408); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #F97408); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #F97408); /* Opera 11.10+ */ 
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #ffffff;
 font-weight: 700;
 letter-spacing: 2px;}
/* -------------------- END LOGIN BUTTON --------------------- */





/* -------------------- BEGIN SIGNIN BUTTON --------------------- */
.signin-button {
 width: 35%;
 height: 30px;
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 display: inline-block;
 text-align: center;
 font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0;
 padding: 2px 0 2px 0;
 margin: 10px auto;
 border: 1px solid #3f3e42;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
 color: #ffffff;
 text-shadow: 1px 1px 2px #000000;}
 
.signin-button:hover {
 background-color: #fa892e; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fa892e), to(#c26920)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #fa892e, #c26920); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #fa892e, #c26920); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #fa892e, #c26920); /* IE 10 */ 
 background: -o-linear-gradient(top, #fa892e, #c26920); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition: .2s;
 -webkit-box-shadow: 1px 1px 2px #000000;
 -moz-box-shadow: 1px 1px 2px #000000;
 box-shadow: 1px 1px 2px #000000;
 text-shadow: 1px 1px 2px #000000;}
 
.signin-button:active {
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to(#F97408)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #F97408); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #F97408); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #F97408); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #F97408); /* Opera 11.10+ */ 
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #ffffff;
 font-weight: 700;
 letter-spacing: 2px;}
/* -------------------- END SIGNIN BUTTON --------------------- */




/* -------------------- BEGIN MODIFY BUTTON --------------------- */
.modify-button {
 width: 90%;
 height: 30px;
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 display: inline-block;
 text-align: center;
 font-family: 'Quicksand', sans-serif;
 font-style: normal;
 font-weight: normal;
 font-size: 12pt;
 color: #ffffff;
 letter-spacing: 0;
 padding: 2px 0 2px 0;
 margin: 10px AUTO;
 border: 1px solid #3f3e42;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
 float: none;
 box-shadow: 1px 1px 2px #000;}
 
.modify-button:hover {
 background-color: #F78B0B; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F78B0B), to(#BE5F07)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F78B0B, #BE5F07); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F78B0B, #BE5F07); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F78B0B, #BE5F07); /* IE 10 */ 
 background: -o-linear-gradient(top, #F78B0B, #BE5F07); /* Opera 11.10+ */ 
 border: 1px solid #747677;
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 -webkit-box-shadow: 2px 2px 4px #000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 2px 2px 4px #000;  /* Firefox 3.5 - 3.6 */
 box-shadow: 2px 2px 4px #000;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */}
 
.modify-button:active {
 background-color: #F97408; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F97408), to (#A85009)); /* Safari 4-5, Chrome 1-9 */  
 background: -webkit-linear-gradient(top, #F97408, #A85009); /* Safari 5.1, Chrome 10+ */ 
 background: -moz-linear-gradient(top, #F97408, #A85009); /* Firefox 3.6+ */ 
 background: -ms-linear-gradient(top, #F97408, #A85009); /* IE 10 */ 
 background: -o-linear-gradient(top, #F97408, #A85009); /* Opera 11.10+ */ 
 -o-transition:.2s; 
 -ms-transition:.2s; 
 -moz-transition:.2s; 
 -webkit-transition:.2s;
 transition:.2s;
 border: 1px solid #747677;
 text-shadow: 2px 2px 4px #16562d;
 color: #FC0;}
/* -------------------- END MODIFY BUTTON --------------------- */

	



/* -------------------- BEGIN XML STYLES --------------------- */
table.xml {
 border: 1px solid #bec0c1;
 border-collapse: collapse;
 background: -moz-linear-gradient(top, #ffffff, #dedbde);
 border-radius: 0 0 10px 10px;
 -moz-border-radius: 0 0 10px 10px;
 -webkit-border-radius: 0 0 10px 10px;
 margin: 0 auto;
 padding: 0;}
   
tr, td {
 border: 1px solid #bec0c1;}
   
tr.highlight:hover {
 background-color: #fff;}
	 
#xml {
 width: 90%;
 height: auto;
 min-height: 150px;
 border: 0 solid #36F;
 padding: 0 0 0 0;
 margin: 10px auto;}
 
.heading {
 font-family: Arial;
 font-size: 10pt;
 font-weight: normal;
 text-align: center;
 color: #fff;
 padding: 0 0 0 0;
 margin: 0 0 0 0;}
 

/* -------------------- END XML STYLES --------------------- */


.player {
 width: 91%;}​


/* -------------------- BEGIN IMAGES --------------------- */
.tooltip {
 width: 25px;
 height: 25px;
 margin: 0 0 -5px 0;
 text-align: left;
 padding: 0;
 display: inline-block;}
 
.about-graphic {
 width: 200px;
 height: 160px;
 margin: 0 20px 0 0;
 padding: 0;
 float: left;
 display: inline-block;
 border: 2px solid #4fa9fc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}

#scream {
 width: 300px;
 height: 304px;
 margin: 10px 0;
 text-align: center;
 padding: 0;}

#band-led-zeppelin {
 width: 222px;
 height: 125px;
 float: left;
 margin: 10px;
 padding: 0;
 border: 1px solid #960;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}

#band-led-zeppelin:hover {
 border: 1px solid #117cf5;
 -o-transition:.5s; 
 -ms-transition:.5s; 
 -moz-transition:.5s; 
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-box-shadow: 3px 3px 5px #053048;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 3px 3px 5px #053048;  /* Firefox 3.5 - 3.6 */
 box-shadow: 3px 3px 5px #053048;}  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 
#band-pearl-jam {
 width: 222px;
 height: 125px;
 float: left;
 margin: 10px;
 padding: 0;
 border: 1px solid #960;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}
 
#band-pearl-jam:hover {
 border: 1px solid #117cf5;
 -o-transition:.5s; 
 -ms-transition:.5s; 
 -moz-transition:.5s; 
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-box-shadow: 3px 3px 5px #888;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 3px 3px 5px #888;  /* Firefox 3.5 - 3.6 */
 box-shadow: 3px 3px 5px #888;}  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

#houses-of-the-holy {
 width: 125px;
 height: 125px;
 float: left;
 margin: 10px;
 padding: 0;
 border: 1px solid #960;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}

#houses-of-the-holy:hover {
 border: 1px solid #117cf5;
 -o-transition:.5s; 
 -ms-transition:.5s; 
 -moz-transition:.5s; 
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-box-shadow: 3px 3px 5px #888;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 3px 3px 5px #888;  /* Firefox 3.5 - 3.6 */
 box-shadow: 3px 3px 5px #888;}  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 
#led-zeppelin-1 {
 width: 125px;
 height: 125px;
 float: left;
 margin: 10px;
 padding: 0;
 border: 1px solid #960;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}

#led-zeppelin-1:hover {
 border: 1px solid #117cf5;
 -o-transition:.5s; 
 -ms-transition:.5s; 
 -moz-transition:.5s; 
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-box-shadow: 3px 3px 5px #888;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 3px 3px 5px #888;  /* Firefox 3.5 - 3.6 */
 box-shadow: 3px 3px 5px #888;}  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 
#led-zeppelin-iv {
 width: 125px;
 height: 125px;
 float: left;
 margin: 10px;
 padding: 0;
 border: 1px solid #960;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}

#led-zeppelin-iv:hover {
 border: 1px solid #117cf5;
 -o-transition:.5s; 
 -ms-transition:.5s; 
 -moz-transition:.5s; 
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-box-shadow: 3px 3px 5px #888;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
 -moz-box-shadow: 3px 3px 5px #888;  /* Firefox 3.5 - 3.6 */
 box-shadow: 3px 3px 5px #888;}  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
 
#divider {
 width: 1100px;
 height: 2px;
 margin-top: 20px;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 padding: 0;
 display: block;}
 
.expand-collapse-button {
 float: right; 
 width: 120px; 
 height: 25px; 
 margin-right: 15px;
 margin-bottom: 0;}
 
#music-note {
 width: 40px;
 height: 40px;
 margin-right: 20px;
 padding: 0;
 border: 0 solid #960;}
 
#music-note-right {
 width: 40px;
 height: 40px;
 margin-left: 20px;
 padding: 0;
 border: 0 solid #960;}
 
#search-database {
 width: 40px;
 height: 40px;
 margin-right: 20px;
 padding: 0;
 border: 0 solid #960;}
 
#search-database2 {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#icon-about {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#icon-contact {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#modify-database {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#icon-playlist {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#plus-sign {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#songs {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#artists {
 width: 75px;
 height: 83px;
 margin: 0 20px -27px 0;
 padding: 0;
 border: 0 solid #960;}
 
#gears {
 width: 40px;
 height: 40px;
 margin-right: 20px;
 padding: 0;
 border: 0 solid #960;}
 
#login {
 width: 35px;
 height: 35px;
 margin-right: 20px;
 padding: 0;
 border: 0 solid #960;}
 
#error {
 width: 40px;
 height: 40px;
 margin-right: 20px;
 padding: 0;
 border: 0 solid #960;}
 
.help {
 width: 15px;
 height: 16px;
 margin: 10px 20px 0 20px;
 padding: 10px;
 border: 0 solid #960;}
 
.bye {
 width: 200px;
 height: 150px;
 margin: 10px 0 20px 0;
 padding: 10px;
 border: 0 solid #960;}
 /* -------------------- END IMAGES --------------------- */
 
 
 /* ------------------- BEGIN TIME STAMP STYLEING -------------------- */
 ul#time {
 float: right;
 text-align: right;
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;}
 
ul#time li {
 display: inline;
 color: #fff;
 font: normal 9pt Arial, Verdana, Tahoma, sans-serif, Helvetica;
 text-align: right;
 padding: 0 20px 0 0;
 margin: 0;}
/* ---------------------------------- END TIME STAMP STYLING --------------------------------- */




/* --------------------------------- BEGIN PLAYLIST STYLING ---------------------------------- */
#playlist, audio, vusualizer {
 width: 92%;
 padding: 20px;
 margin: 0 auto 10px auto;
 background: #fff;
 border: 2px solid #4fa9fc;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);}
 
.active a {
 color: #BE5F07;
 text-decoration: none;
 margin-left: 5px;
 font-weight: bold;
 font-style: italic;
 background-image: url(images/now-playing.png);
 background-repeat: no-repeat;
 background-position: 100% 50%;
 font-size: 10pt;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;}
 
li a{
 color: #eeeedd;
 padding: 5px;
 display: block;
 font-size: 10pt;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 text-align: left;}
 
li a:hover{
 text-decoration:none;}
 
 /* ORDERED LIST TEST */
ol {
 counter-reset: li; /* Initiate a counter */
 margin-left: 0; /* Remove the default left margin */
 padding-left: 0; /* Remove the default left padding */}
 
ol > li {
 position: relative; /* Create a positioning context */
 margin: 0 0 0 1.45em; /* Give each list item a left margin to make room for the numbers */
 padding: 2px 5px; /* Add some spacing around the content */
 list-style: none; /* Disable the normal item numbering */
 border-top: 1px solid #666;
 background: #f6f6f6;}
 
ol > li:before {
 content: counter(li); /* Use the counter as content */
 counter-increment:li; /* Increment the counter by 1 */
 /* Position and style the number */
 position: absolute;
 top: -2px;
 left: -2em;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 width: 2em;
 margin-right: 0;
 padding: 4px;
 border-top: 1px solid #666;
 color: #fff;
 background-color: #666;
 font-size: 10pt;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;}
 
li ol, li ul {
 margin-top: 6px;}
 
ol ol li:last-child {
 margin-bottom: 0;}
 /* ---------------------------------------------- END PLAYLIST STYLING -------------------------------------- */
 
 
 
 /* ---------------------------------------------- GRAPHIC VISUALIZER ELEMENTS -------------------------------- */
.bar-wrapper {
 height: 100px;
 position: relative;}
	
.bar {
 position: relative;
 bottom: 0;
 width: 5px;
 display: inline-block;
 border: 1px solid red;
 height: 5px;
 border-bottom: 3px solid #fff;}
 
 
 /* - - - - - - - - - - - - - - - - BEGIN DIAGNOSTIC - - - - - - - - - - - - - - - - - - - - -  */
 .diagnostic {
  margin: 0 auto;
  padding: 0;
  width: 150px;
  height: 30px;
  border: 0 solid #939;
  background-image: url(images/css-default.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  float: left;
  z-index: 999;
  display: none;}
  /* - - - - - - - - - - - - - - - - END DIAGNOSTIC - - - - - - - - - - - - - - - - - - - - -  */
  
  
 /* - - - - - - - - - - - - - - - -  BEGIN IMAGE CONTROL - - - - - - - - - - - - - - - - - - - */
.bandpicture {
 width: 570px;
 height: 323px;
 float: left;
 margin: 10px auto;
 padding: 0;
 border: 2px solid #4fa9fc;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);}
 
.band-pic {
 width: 570px;
 height: 323px;
 float: left;
 margin: 10px auto;
 padding: 0;
 border: 2px solid #4fa9fc;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 box-shadow: 1px 1px 40px 0 rgba(0,0,0,.45);
 object-fit: cover;}
 
.albumcover {
 width: 115px;
 height: 115px;
 float: left;
 margin: 5px auto;
 padding: 0;
 border: 2px solid #4fa9fc;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;}
 
 
/* --------------------------------------------- BEGIN TOOLTIP ---------------------------------------------- */
.ddimgtooltip{
 box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
 -webkit-box-shadow: 3px 3px 5px #818181;
 -moz-box-shadow: 3px 3px 5px #818181;
 display: none;
 position: absolute;
 border: 1px solid #074783;
 border-radius: 7px;
 -moz-border-radius: 7px;
 -webkit-border-radius: 7px;
 -khtml-border-radius: 7px;
 background: white;
 color: #074783;
 z-index: 2000;
 padding: 10px;
 transition: all 0.8s ease-in-out;
 text-align: center;}
 
 
/* - - - - - - - - - - - - - - - - - - BEGIN NEW MENU - - - - - - - - - - - - - - - - - - - */
.wholemenu {
 width: 100%;
 height: 26px;
 background: #454545;
 background: linear-gradient(top, #565656 0%, #000000 100%);
 background: -moz-linear-gradient(top, #565656 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #565656 0%, #000000 100%);
 border: 0 solid #ff0000;
 padding: 0 0 0 0;
 border: 0 solid #ff00ff;
 display: inline-block;}
 
.menu-left {
 float: left;
 width: 100%;
 border: 0 solid #00ff00;
 display: inline-block;}
 
.menu-right {
 float: right;
 width: 24%;
 border: 0 solid #0000ff;
 display: inline-block;}
/* ------------------------- BEGIN PRIMARY MENU --------------------------- */
 /* ------------------------- BEGIN MAIN MENU ITEMS --------------------------- */
#menu, #menu ul {
 margin: 0;
 padding: 0;
 list-style: none;}
	
#menu {
 width: 100%;
 margin: 0;
 background: #454545;
 background: linear-gradient(top, #565656 0%, #000000 100%);
 background: -moz-linear-gradient(top, #565656 0%, #000000 100%);
 background: -webkit-linear-gradient(top, #565656 0%, #000000 100%);
 border: 0 solid #930;
 border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 /* box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; */
 -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 display: table;}

#menu:before,  #menu:after {
 content: "";
 display: table;}
 
#menu:after {
	clear: both;
}
#menu {
	zoom:1;
}
#menu li {
	float: left;
	border-right: 1px solid #222;
	-moz-box-shadow: 1px 0 0 #444;
	-webkit-box-shadow: 1px 0 0 #444;
	box-shadow: 1px 0 0 #444;
	position: relative;
}
#menu a {
	float: left;
	padding: 5px 15px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
	color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
	color: #fafafa;
}
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 24px; /* DISTANCE DROP DOWN MENU TOUCHED MAIN MENU */
	left: 0;
	z-index: 1;
	background: #444;
	background: -moz-linear-gradient(#444, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
	background: -webkit-linear-gradient(#444, #111);
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-box-shadow: 0 -1px rgba(255, 255, 255, .3);
	-webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}
#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
	-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
	box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
}
#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
	-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#menu ul a {    /* DROPDOWN MENU */
	padding: 10px;
	width: 130px;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}
#menu ul a:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec, #0186ba);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
	border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3;
	border-bottom-color: transparent;
}
#menu ul li:last-child > a {
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}
/* Mobile */
	#menu-trigger {
	display: none;}
	
	
	
/* CONDITIONAL BUTTON DISPLAY CONTAINER */
.reveal {
 display: none;}

.reveal_activator:checked + .reveal {
 display: inline-block;
 float: right;
 width: 100%;}
 
.agree-to-terms {
 float: none;
 display: inline-block;
 width: 50%;
 height: auto;
 border: 0 solid #969;
 text-align: center;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 font-weight: normal;
 font-style: normal;
 padding: 0 0 0 0;
 margin: 20px auto;
 color: #ffffff;}
/* END */
/* - - - - - - END NEW MENU - - - - - - - */
/* ---------------------------------------- END DEFAULT ----------------------------------------------- */