/* begin some basic styling here                     */
body {
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 0px;
	background-color:#336699;

	background: #336699; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#336699, black); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#336699, black); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#336699, black); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#336699, black); /* Standard syntax */
	//background: linear-gradient(black, #336699); /* Standard syntax */
}
div#topblock{ position: absolute; top: 5px; left: 5px;
		border: solid #233333 0px;
		width: 1850px;
		height:80px;
		background-color:#336699;
		}
div#playlist{ 
		border: solid #333333 1px;
		margin-bottom: 1px;
		margin-left: 5px;
		margin-top: 1px;		
		width: 70%;		
		vertical-align:top;
		min-height:500px;
		height: 90vh;		
		overflow-y: scroll;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 18px; 
		color: #000000;
		z-index: 999;
		display: inline-block;
		//float:left;
		}
#playlistQ .inner {    
     max-height:800px;
}
#playlistQ .inner .scroller {
    overflow-y: scroll;
    height: 800px;
}
.mob{
	//float:left !important;
	border: solid #333333 1px;
	margin-top: 2px;
	width: 800px !important;
	height:300px !important;	
	max-height:300px !important;	
	overflow-y: scroll;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px; 
	color: #000000;
	z-index: 999;
	
}
div#songindex:not(.mob){ 
	display: inline-block;
	//float:left;
	border: solid #333333 1px;
	margin-top: 2px;
	min-width: 330px;
	min-height:500px;	
	width: 10%;	
	height: 90vh;	
	overflow-y: scroll;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px; 
	color: #000000;
	z-index: 999;
}


.artistletter{ 	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; color: #eee;
	text-decoration:none;
	cursor:pointer;
	border-bottom: 2px solid #ccc;
	border-top: 2px solid #ccc;
	margin-top: 12px;
	text-align:center;
	z-index: 999;
}
.topartistletter{ 	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; color: #eee;
	text-decoration:none;
	cursor:pointer;	
	text-align:center;
	margin-right:9px;
	z-index: 999;
}
#songindexQ .inner {
     width: 100%;
    overflow-y: scroll;
}
#songindexQ .inner .scroller {
     width: 100%;
     height:400px;	
}
.artistlist{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;; 
	//font-weight: bold;
	color: #9b9;
	margin-right:1px;
	margin-top:1px;
	cursor: pointer;
	//float:left;
}
.artistlist:hover {  text-decoration: underline; color: #ccc;}
.artistlisteven:hover {  text-decoration: underline; color: #ccc;}

.artistlisteven{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	//font-style:italic;
	//font-weight: bold;
	color: #9b9;
	margin-right:1px;
	margin-top:2px;
	cursor: pointer;
	//float:left;
	//background-color:#fff;
}
.songlist{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;; 
	color: #aaa;
	margin-right:10px;
	cursor: pointer;
	float:left;
	white-space: nowrap;
}
div.whitestripe{ position: relative;top: 0px; left: 0px;
		border: solid #333333 2px;
		width: 1060px;
		height:20px;
		left: 0px;
		background-color:#ffffff;
		}
div.menustripe1{ position: relative;
		left: 5px;
		left: 0px;
		margin-left: 0px;
		margin-top: 2px;
		margin-bottom: 2px;
		background-color:#336699;
		}
div.menustripe2{ 
		border: solid #333333 0px;
		//width: 1060px;
		height:25px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color:#336699;
		}
div#generalblock{ 
		position: relative;top: 5px; left: 0px;
		border: solid #333333 0px;
		//width: 1500px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 80%;
		margin-bottom: 5px;
		margin-top: 5px;
		background-color:#FFFFFF;
		z-index: 999;
		}
div#contentblock{
		border: solid #333333 1px;
		margin-bottom: 5px;
		margin-top: 0px;
		//width: 420px;
		height:1500px;
		background-color:#FFFFFF;
		overflow: auto;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 70%; color: #000000;
}
div#contentblock2{
		position: absolute;top: 161px; left: 430px;
		border: solid #333333 1px;
		margin-bottom: 5px;
		margin-top: 5px;
		//width: 435px;
		height:7000px;
		background-color:#FFFFFF;
		overflow: auto;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 70%; color: #000000;
}
{font-family: Arial, Helvetica, sans-serif;
font-size: 70%; color: #000000;
}

div #logo{position: absolute;
	left:1%;
	width:15%;
	top:0px;
}
div #ShefTitle{
		position: absolute;
		left:2%;
		width:620;
		top:1px;
		background-color:#336699;}
div #info_paste{position: absolute;
		height:130px;
		left:65%;
		width:15%;
		top:4px;
		font: normal 60% Verdana, helvetica; 
		color: #FFFFFF;  
		text-align: left
}


p {  font-family: Arial, Helvetica, sans-serif; color: white; font-size: 100% !important;}
h1 {  font-family: Arial, Helvetica, sans-serif; font-size: 180%; color: #000000;}
h2 {  font-family: Arial, Helvetica, sans-serif; font-size: 130%; color: #000000; font-weight: bold;}
h3 {  font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #ffffff; font-size: 120%}
h4 {  font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 110%; color: #999999;}
h5 {  font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; color: #999999;}
h6 {  font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; color: #999999;}

select {  font-family: Arial, Helvetica, sans-serif; clip:  rect(   )}

input {  font-family: Arial, Helvetica, sans-serif}

textarea {  font-family: Arial, Helvetica, sans-serif}

td { font Verdana, helvetica;  
font-size: 12px;  color: #9b9;text-align: left;
}
a { font normal 60% Verdana, helvetica;  
font-size: 11px;  color: #AA00AA;text-align: left;
}

a:link {  text-decoration: none; color: #9b9}
a:active {  text-decoration: none; color: #9b9}
a:visited {  text-decoration: none; color: #9b9}
a:hover {  text-decoration: none; color: #9b9}

a.mouseover:link {  text-decoration: none; color: #AA0000}
a.mouseover:active {  text-decoration: none; color: #AA0000}
a.mouseover:visited {  text-decoration: none; color: #AA0000}
a.mouseover:hover {  text-decoration: none; color: #000000}


th {	font: 70% Verdana, helvetica;
	font-weight: bold;
	color: #000000;
	text-align: center;
	white-space: nowrap ;
	//background: #bbb;
	//border-bottom: 0px solid #aaa;
	//border-left: 0px solid #aaa;
	//border-right: 1px solid #ccc;
	//border-top: 0px solid #AAA;
	//padding: 2px 3px
  }
th.smblue a.smblue {  font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  font-weight: bold; color: #001144;text-align: left;
}
th.smblue a.smblue:link {  font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  font-weight: bold; color: #003366;text-align: left;
}
th.smblue a.smblue:active {  font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  font-weight: bold; color: #003366;text-align: left;
}
th.smblue a.smblue:visited {  font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  font-weight: bold; color: #003366;text-align: left;
}
th.smblue a.smblue:hover  {  font-family: Arial, Helvetica, sans-serif;
font-size: 100%;  font-weight: bold; color: #000000;text-align: left;
}

td.formText { font-family: Arial, Helvetica, sans-serif; font-size: 80%; color: #000000}

td.just {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; color: #000000;text-align:justify;

}
td.Just {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; color: #000000;text-align:justify;
}

td.vert {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; color: #000000;text-align:justify;
vertical-align: middle
}
td.white {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; color: #ffffff
}
td.contentHeader {  font-family: Arial, Helvetica, sans-serif;
font-size: 90%; color: #000000
}
td.title {  font-family: Arial, Helvetica, sans-serif; font-size: 140%; color: #000000; font-weight: bold; vertical-align: bottom;}
.headerfooter  {  text-decoration: none; color: #666666;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		border:0 solid white;
		font-size:100%}
td.resttop{font: bold 70% Verdana, helvetica; color: #000000;  text-align: center}
td.resttopright{font: bold 70% Verdana, helvetica; color: #000000;  text-align: right}
td.rest{font: normal 70% Verdana, helvetica; color: #000000;  text-align: center}
td.restl{font: normal 70% Verdana, helvetica; color: #000000;  text-align: left}
td.restlred{font: normal 70% Verdana, helvetica; color: #DD0000;  text-align: left}
td.restsmall{font: normal 60% Verdana, helvetica; color: #000000;  text-align: center}
td.restleft{font: normal 70% Verdana, helvetica; color: #000000;  text-align: left; background-color: #FFFFFF;}
td.right {  font-family: Arial, Helvetica, sans-serif;
font-size: 11px; color: #000000;text-align:right;
}

th.sm {  font-family: Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold; color: #ccc;text-align: left;
}
th.smwhite {  font-family: Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; color: #000000;text-align: left;
background: #FFFFFF;border-right: 0px solid #aaa;
}
th.smital {  font-family: Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: normal;font-style: italic; color: #000000;text-align: left;
background: #FFFFFF;border-right: 0px solid #aaa;
}
th.smwhiter {  font-family: Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; color: #000000;text-align: right;
background: #FFFFFF;border-right: 0px solid #aaa;
}
th.smright {  font-family: Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; color: #000000;text-align: right;
}
td.sm {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; font-weight: bold; color: #000000;text-align: left;
}
th.smblue {  font-family: Arial, Helvetica, sans-serif;
font-size: 70%; font-weight: bold; color: #003366;text-align: left;
}
td.huge {  font-family: Arial, Helvetica, sans-serif;
font-size: 32px; font-weight: bold; color: #336699; text-align: left;
}


th.batots {font: bold 70% Verdana, helvetica; color: #000000;  text-align: center}

td.inbox{font: normal 60% Verdana, helvetica; color: #FFFFFF;  text-align: left}


td.o{
	border-left: 0px solid #cccccc;
	border-right: 0px solid #dddddd;
	border-top: 0px solid #777777;
	font-weight: normal;
	padding: 2px 2px;
	}
th a:link {  text-decoration: none; color: #9b9}
th a:active {  text-decoration: none; color: #9b9}
th a:visited {  text-decoration: none; color: #9b9}
th a:hover {  text-decoration: none; color: #9b9}

th.login{
	background: #336699;	
}

tr.normalRow td {
	font: normal 70% Verdana, helvetica; color: #000000;
	background: #FFF;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-right: 1px solid #AAA;
	border-top: 1px solid #AAA;
	padding: 2px 3px
}

tr.alternateRow td {
	background: #EEE;
	font: normal 70% Verdana, helvetica; color: #000000;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-right: 1px solid #AAA;
	border-top: 1px solid #AAA;
	padding: 2px 3px
}
td a:link {  text-decoration: none; color: #ccc}
td a:active {  text-decoration: none; color: #ccc}
td a:visited {  text-decoration: none; color: #ccc}
td a:hover {  text-decoration: none; color: #cFc}

a.thbahead:link {  text-decoration: none; color: #003366}
a.thbahead:active {  text-decoration: none; color: #336699}
#a.thbahead:visited {  text-decoration: none; color: #336699}
a.thbahead:hover {  text-decoration: none; color: #336699}

a.info:link {  text-decoration: none; color: #003366}
a.info:active {  text-decoration: none; color: #003366}
a.info:visited {  text-decoration: none; color: #003366}
a.info:hover {  text-decoration: none; color: #003366}

a.numlink:link {  text-decoration: none; color: #003366;  text-align: center}
a.numlink:active {  text-decoration: none; color: #003366;  text-align: center}
a.numlink:visited {  text-decoration: none; color: #003366;  text-align: center}
a.numlink:hover {  text-decoration: none; color: #003366;  text-align: center}


th.le{font: normal 70% Verdana, helvetica; color: #FFFFFF;  text-align: left; background: #336699;	 }
th.r{font: normal 70% Verdana, helvetica; color: #FFFFFF;  text-align: right }


.footer  {  text-decoration: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: normal; border:0px solid white;}
a.footer,a.footer:active,a.footer:visited {  text-decoration: none; color:white;}
a.footer:hover { text-decoration: none; color: black;}

.searchbox {
font-family: Arial, Helvetica, sans-serif; font-size: 80%; text-align: left; vertical-align: middle;
border:1px solid #336699;
height:17px;
width:170%;
}

.small { font-family: Arial, Helvetica, sans-serif;
	border:0px solid white; }

.blueTitle {  color: #333366;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 100% }
.blueCat {
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 70% }
		#color: #99CCFF;
a.blueCat {
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 70%; color: #ffffff}
a.blueCat:link {  text-decoration: none; color: #ffffff}
a.blueCat:active {  text-decoration: none; color: #ffffff}
a.blueCat:visited {  text-decoration: none; color: #ffffff}
a.blueCat:hover {  text-decoration: none; color: #ff9933}
.smallBlueTitle {  font-family: Arial, Helvetica, sans-serif;
font-weight: bold; color: #336699; text-decoration: none }

.nav {  font-family: verdana, MS Sans Serif,Geneva,sans-serif;font-size: 8pt }

.whiteLink { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF}


.whiteArial { text-decoration: none; color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif; font-weight: bold}

.sidenav  {  text-decoration: none;
		color: #ffffff;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 100%}
a.sidenav,a.sidenav:active,a.sidenav:visited  {  text-decoration: none;
		color: #ffffff;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal; font-size: 100%}
a.sidenav:hover { text-decoration: none; color: #ff9933}

/* end basic styling                                 */

.prog{
	margin-left:20px;
	margin-top:2px;
	text-align:center;
}
input[type="range"].prog{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    height: 17px;
    width:400px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #94A14E),
        color-stop(0.15, #C5C5C5)
    );
}

input[type='range'].prog::-webkit-slider-thumb  {
    -webkit-appearance: none !important;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 20px;
    width: 8px;
}

.playlistcheck{
	float:left;
	// vertical-align: middle;  
}

.buttongif{
 height:28px; 
 margin-right:3px;
}


.locimage{
  /*
  border:solid 2px;
  border-bottom-color:#ffe;
  border-left-color:#eed;
  border-right-color:#eed;
  border-top-color:#ccb;
  max-height:100%;
  max-width:100%;
  */
  width:26px;height:26px; 
}
.locimagediv{
  width:28px;height:26px; 
  margin-top:1px;
  margin-bottom:1px;

}
.locimagedivQ{
	background-color:#ddc;
  border:solid 5vmin #eee;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-radius:2px;
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
  margin:10vh 10vw;
  height:80vh;
  padding:8vmin;
  position:relative;
  text-align:center;
  &:before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
  &:after {
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
}