/* Global DMO CSS */
html {
  min-width:320px !important;
  margin:0 !important;
  padding:0 !important;
}
    
body {
	font-family: 'Alegreya Sans SC', sans-serif;
	text-transform:lowercase;
	font-size:100%;
    min-width:320px !important;
    margin:0 !important;
    padding:0 !important;    
}

body * {
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
p {
    color:#555 !important;
    }
        
#loading {
    display:none;
    }
    
h3 {
	font-size:123%;
}

h4 {
	font-size:100%;
}

h5 {
	font-size:90%;	
}

a {
  outline:0 !important;
  color:#71A10D;
}

/* main DMO header */

h1, h2 {
  color:rgba(50, 50, 50, 0.75);
}

h1 {
  font-family:'Codystar', cursive;
  font-size:213%;
  display:none;
}

h2, div.logo, p.error, p.dialog, button.ui-button {
  font-family: 'Audiowide', cursive;
  text-transform:capitalize;
    -moz-box-shadow:  0px 3px 15px -5px #187220;
    -webkit-box-shadow:  0px 3px 15px -5px #187220;
    box-shadow: 0px 3px 15px -5px #187220;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
    padding:2px 2px 2px 4px;  
}

#header h2 {
    padding:0 !important;

        color:#187220; 
        margin:0; 
            display:none;
    }
  
/* patch for linux */
.linux.gecko h1 {
  font-size:198%;
  letter-spacing:-1px;
}

.linux.gecko h2 {
  font-size:70%;
}

.linux.chrome h1 {
  font-size:219%;
}

.linux.chrome h2 {
  font-size:81%;
}

/* patch for windows */
.win.ff3 h1 {
  font-size:217%;
  letter-spacing:-1px;
}

.win.ff3 h2 {
  font-size:78%;
  line-height: 95%;
}


/*****************/
.clear {
	clear:both;
	height:0px !important;
	display:block;
}

.left {float:left;}
.right {float:right;}

a.rotate {
	position:relative !important;
	padding:0;
	margin:0;
}

li.visited {
	border:1px solid rgba(220,	20,	60, .75) !important;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
	-moz-box-shadow:    0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
	box-shadow:         0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

 a.visited span.track_no, a.visited span.rank, a.visited.genre, span.item_info.visited, span.item_upload.visited {
	border:1px solid rgba(220,	20,	60, .75) !important;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
	-moz-box-shadow:    0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
	box-shadow:         0px 0px 5px 0px rgba(220,	20,	60, 1) !important;
	border-radius: 12px !important;
	-moz-border-radius: 12px !important;
	-webkit-border-radius: 12px !important;	
}

span.item_info, span.item_upload {
	display:none;
	width:20px;
	height:20px;
	cursor:pointer;
    position:absolute;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(24,	114,	32, 1) !important;
	-moz-box-shadow:    0px 0px 5px 0px rgba(24,	114,	32, 1) !important;
	box-shadow:         0px 0px 5px 0px rgba(24,	114,	32, 1) !important;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	background-color:#187220;
	border:1px solid #71A10D;	
    top:0;
    right:0;
}

span.item_info, a.item_info {
  background:url('/IMG/info_icon.png') no-repeat center;
  background-color:#187220;
  z-index:99999;
}

 span.item_upload {
   background:url('/IMG/upload_icon.png') no-repeat center;
 }

span.item_info:hover, span.item_upload:hover, a.item_info:hover {
	box-shadow: 0px 0px 15px  #000;
	-moz-box-shadow: 0px 0px 15px  #000;
	-webkit-box-shadow: 0px 0px 15px #000;
	background-color:#262626;
	border:1px solid #fff;	
}

a.item_info {
	border:1px solid #71A10D;
    display:block;
    float:right;
    width:20px !important;
    height:20px !important;
	cursor:pointer;
	-webkit-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    1px 1px 8px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         1px 1px 8px 0px rgba(50, 50, 50, 0.75);
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	background-color:#187220;
	text-decoration:none;  
	margin:3px 5px 0 0;  
}


div.stats_panel {
	width:100%;
	top:0;
	left:0;
	position:relative;
	text-transform:capitalize;	
	max-height:360px;
}

span.jchart_back {
	margin:0px 5px 5px 10px;
	position:relative;
	z-index:99999;
	float:left;
	width:100px;
	height:30px;
	border:0;
	display:none;
	cursor:pointer;
	background:url('/IMG/highcharts_back_button.png') no-repeat !important;
	font-size:70%;
	font-family: 'Audiowide', cursive;
	text-transform:uppercase;	
	font-weight:bold;
}

#footer a, .join a {
	font-family: 'Lemon', cursive;
	color:#187220;
	text-transform:uppercase;
	font-size:70%;
}
.join a {
    font-size:85%;
    }
    
.ui-tooltip {
	font-size:.8em;
	margin-top:-300px;
    padding:2px !important; 
}

.ui-widget-content {
  padding:0;
  margin:0;
}

#content,  #footer, #main {
    min-width:320px;
	margin:0 auto;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	padding:0 1px 0 0;
	display:block;
    text-align:center;
   
}

#footer {
    margin:0 auto 20px auto !important;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
    -moz-box-shadow:    0px 0px 5px 0px rgba(55, 20, 60, 0.75) !important;
    box-shadow:         0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
    border:3px solid #187220; 
    background-color:#000000; 
    max-width:1024px; 
    min-width:300px;    
}

#footer_wrapper {
    padding: 5px 10px 10px 10px;
    }
    
#footer p, #logo_wrapper {
	box-shadow: 1px 1px 16px 1px #187220;
	-moz-box-shadow: 1px 1px 16px 1px #187220;
	-webkit-box-shadow: 1px 1px 16px 1px #187220;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color:#ffffff;
}

#logo_wrapper { 
	margin: 1px 1px 1px -1px !important;
	background-color:#000000 !important;
	border:none;
	}
	
#footer p {
    margin: 3px
    }
    
#DMO_social, #DMO_video {
        min-width:140px !important;
	    max-width:290px !important;
	    margin:5px auto -5px auto;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
        -moz-box-shadow:    0px 0px 5px 0px rgba(55, 20, 60, 0.75) !important;
        box-shadow:         0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
        border:3px solid #187220; 
        background-color:#000000;	
        border-radius: 12px;
	    -moz-border-radius: 12px;
	    -webkit-border-radius: 12px;
	    display:inline-block;
	    vertical-align:top;
	    height:35px;
  }
  
#RS_merch, #DMO_Shop {
        min-width:180px !important;
	    max-width:180px !important;
	    margin:5px auto -5px auto;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
        -moz-box-shadow:    0px 0px 5px 0px rgba(55, 20, 60, 0.75) !important;
        box-shadow:         0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
        border:3px solid #187220; 
        background-color:#000000;	
        border-radius: 12px;
	    -moz-border-radius: 12px;
	    -webkit-border-radius: 12px;
	    display:inline-block !important;
	    vertical-align:top;
	    padding:4px 0 0 2px;
  }

#DMO_Shop.KoFi {
    height:35px !important;
    }
    
div.btn-container {
    width:170px !important;
    height:22px !important;
    }
    
div.btn-container a.kofi-button, div.btn-container span.kofitext  {
    height:22px !important;
    line-height:22px !important;  
    padding-top:0 !important;
    margin-top:-1px !important;  
    }
    
    
#RS_merch IMG, #DMO_Shop:not(.KoFi) IMG {
       width:160px !important;
       height:20px !important;
        border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;     
	      	            -webkit-box-shadow: 0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
        -moz-box-shadow:    0px 0px 5px 0px rgba(55, 20, 60, 0.75) !important;
        box-shadow:         0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
	    }
	    
	    
#RS_merch IMG:hover, #DMO_Shop IMG:hover {	    
	            -webkit-box-shadow: none !important;
        -moz-box-shadow:   none !important;
        box-shadow:         none !important;
        }
	    
  #DMO_video {

    min-width:38px !important;
    padding:3px 3px 5px 7px;
    margin-left:10px;
    }
       
    #DMO_social img {
        width:28px;
        height:28px; 
        border:1px solid #187220;
        border-radius: 15px;
	    -moz-border-radius: 15px;            
        } 
        
    #DMO_social img:hover {
          border:1px solid #71A10D;
          }        
  
    #header {
        min-width:320px !important;
	    max-width:830px !important;
      margin:10px auto;
      display:block;
      background:transparent;
      border:none;
          text-align:center;
    }

    #header div.logo {
        margin:0 auto;
        background-color:#000000;
        border:none;
        }
       
    #nav li {

      display:inline-block;
      box-shadow: 0px 3px 15px -5px #187220;
      -moz-box-shadow: 0px 3px 15px -5px #187220;
      -webkit-box-shadow: 0px 3px 15px -5px #187220;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      text-align:center;
      margin:0 8px 3px 0;
      padding:0px 5px;
      font-size:110%;
    }
    
    #nav {
      width:100%;
      text-align:center;
      display:inline-block;
      border:0px solid #f00;
      margin:0 0 5px 0 !important;
    }
    
    #nav ul { 
      padding:0;
      text-align:center;    
    }        
    
    #nav li a {
      text-decoration:none;
      color:#187220;
      display:inline-block;
      width:100%;
      margin:2px 0 0 0;
      font-weight:bold;
    }
    
    #nav li:hover {
          
      background-color:#187220;
      cursor:pointer;
		box-shadow: 1px 1px 16px 1px #187220;
		-moz-box-shadow: 1px 1px 16px 1px #187220;
		-webkit-box-shadow: 1px 1px 16px 1px #187220;
    }
    
    #nav li a:hover {
              color:#dcdcdc;
      background-color:#187220;
      cursor:pointer;
		box-shadow: 1px 1px 16px 1px #187220;
		-moz-box-shadow: 1px 1px 16px 1px #187220;
		-webkit-box-shadow: 1px 1px 16px 1px #187220;              
          }
          
    #nav li.active {
      -webkit-box-shadow: 0px 0px 5px 0px rgba(220, 20, 60, 1) !important;
      -moz-box-shadow:    0px 0px 5px 0px rgba(220, 20, 60, 1) !important;
      box-shadow:         0px 0px 5px 0px rgba(220, 20, 60, 1) !important;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;  
    }    
    
    @media only screen and (min-width: 300px) and (max-width: 600px) { 
    
        .widget300.join p {
        
            font-size:90% !important;
            } 
    }      
          
    @media only screen and (min-width: 100px) and (max-width: 320px) { 

        div.logo h2 {
            font-size:80%;
            margin-top:0px !important;
        }     
              
        #nav li {
            padding:0px 3px  !important;
            font-size:55%  !important;
            margin:0px  !important;
        }       
        
        #main {
            width:320px !important;
            max-width:320px !important;
            overflow:hidden;
            }              

        #DMO_Shop {
            width: 172px !important;     
            min-width: 172px !important;    
            max-width: 172px !important;     
            height:30px !important;           
            }    
             
        #nav {
            padding:2px !important;
            margin:-5px 1px 3px 1px !important;
            }
                
        #DMO_FB, #RS_merch {
            display:none !important;
            }            
        
        
        #DMO_Shop img {
            margin:-2px 0 0 -3px !important;
            }
                                             
    }
              
        
    @media only screen and (min-width: 321px) and (max-width: 380px) { 

        div.logo h2 {
            font-size:85%;
            margin-top:0px !important;
        }     
              
        #nav li {
            padding:0px 3px  !important;
            font-size:55%  !important;
            margin:0px  !important;
        }       
        
        #main {
            width:320px !important;
            max-width:320px !important;
            overflow:hidden;
            }              

        #DMO_Shop {
            width: 172px !important;     
            min-width: 172px !important;    
            max-width: 172px !important;     
            height:30px !important;           
            }    
             
        #nav {
            padding:2px !important;
            margin:-5px 1px 3px 1px !important;
            }
                
        #DMO_FB, #RS_merch {
            display:none !important;
        
        #DMO_Shop img {
            margin:-2px 0 0 -3px !important;
            }
                                             
    }
                
    @media only screen and (min-width: 381px) and (max-width: 500px) { 

        div.logo h2 {
            font-size:85%;
            margin-top:0px !important;
        }     
              
        #nav li {
            padding:0px 3px  !important;
            font-size:55%  !important;
            margin:0px  !important;
        }       
        
        #main {
            width:320px !important;
            max-width:320px !important;
            overflow:hidden;
            }              

        #DMO_Shop {
            width: 172px !important;     
            min-width: 172px !important;    
            max-width: 172px !important;     
            height:30px !important;           
            }    
             
        #nav {
            padding:2px !important;
            margin:-5px 1px 3px 1px !important;
            }        
        
        #DMO_Shop img {
            margin:-2px 0 0 -3px !important;
            }
                                             
    }     

    @media only screen and (min-width: 501px) and (max-width: 640px) { 

        div.logo h2 {
            font-size:95%;
        }     
              
        #nav li {
            width:75px;
            font-size:70%;
        }        
           
        #main {
            width:320px !important;
            max-width:320px !important;
            overflow:hidden;
            }
                            
    }

    @media only screen and (min-width: 641px) and (max-width:959px) { 

               
        div.logo h2 {
            font-size:100%;
        }     
        #main {
            width:620px !important;
        }           
        
        #nav li {
            width:80px;
            font-size:85%;
        }           
                  
    }

    @media only screen and (min-width: 960px) { 
        div.logo h2 {
            font-size:110%;
        }           
    }
    

.nav_wait {
  height:60px;
  text-align:center;
  float:left;
  display:block;
  min-width:529px !important;
  border:0px solid #f00;
  background-color:transparent;
  background:url('/static/images/loading2.gif') 50% no-repeat;
}

.nav_wait img {
  height:60px;
  vertical-align:middle;
}


/* form validation psuedo classes */
span.tickcross  {
  width:15px;
  height:15px;
  display:inline-block;
  font-family: 'FontAwesome';
  cursor:help;
  clear:both;
}

.invalid, .invalid + input {
  background-color:pink !important;
  opacity:.8;
}

/* form validation awesomeness for psuedo class */
span.tickcross::after, input + span + span.tickcross::after { content: '\f071'; }
span.tickcross {color:green;}
:required + span.tickcross,:required + input + span + span.tickcross {color:orange;}

.invalid + span.tickcross::after,.invalid + input + span + span.tickcross::after { content: '\f071'; }
.invalid + span.tickcross, .invalid + input + span + span.tickcross {color:red;}

.valid + span.tickcross::after,.valid + input + span + span.tickcross::after { content: '\f058'; }
.valid + span.tickcross,.valid + input + span + span.tickcross {color:green;}


#progressMeter {
  text-align:center;
  width:150px;
  margin:20px;
}

.no-close .ui-dialog-titlebar-close {
  display: none !important;
}

.wait {
    display:inline-block;
     -webkit-box-shadow: 0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
     -moz-box-shadow:    0px 0px 5px 0px rgba(55, 20, 60, 0.75) !important;
     box-shadow:         0px 0px 5px 0px rgba(55, 55, 60, 0.75) !important;
     border:3px solid #187220; 
     background-color:#f4f4f4;
        z-index:99999;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	padding:5px;	        
    }
    
#thumb {
    z-index:99999;
    }

/* join / donate widget */   
.join h4.title, .donate h4.title {
    text-align:center !important;
    margin:3px 4px 0px 4px !important;
    }

.join .panel, .donate .panel, .signup .panel {
	margin:0px 2px 4px 3px;
	text-align:center;
	padding:3px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
    border:1px solid #187220;
	min-width:293px;
	font-family:'Carrois Gothic SC', sans-serif;
	text-transform:capitalize;
	font-size:85%;
	color:#f4f4f4 !important;  
	  	box-shadow: 1px 1px 16px 1px #187220;
	-moz-box-shadow: 1px 1px 16px 1px #187220;
	-webkit-box-shadow: 1px 1px 16px 1px #187220;
	font-weight:bold;
    }   

.panel2 {
	margin:0px 2px 4px 3px;
	text-align:center;
	padding:3px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
    border:3px solid #187220;
	min-width:293px;
	font-family:'Carrois Gothic SC', sans-serif;
	text-transform:uppercase;
	font-size:100%;
	  	box-shadow: 1px 1px 16px 1px #187220;
	-moz-box-shadow: 1px 1px 16px 1px #187220;
	-webkit-box-shadow: 1px 1px 16px 1px #187220;
	font-weight:bold;
    }  
    
.join legend {
    text-align:left;
    }
    
#spotlight_artist img#loading_chart, #top_album img#loading_chart {
    height:224px;
    width:295px;
    }    
    
span.ui-dialog-title {

  font-family:'Codystar', cursive;
  text-transform:uppercase;
}
   
/*section.widget300.donate .panel {             
    overflow-y: scroll !important;
    } */  

/* JQuery UI PITA */   
.ui-dialog {
    margin:10px !important;
    }
    
.ui-dialog-buttonpane {text-align:center !important;}    

.ui-button {
    min-width:100px;

}
.ui-dialog .ui-dialog-buttonpane button {
    margin:2px;
    padding:0 !important;
    }
    
.ui-button-text-only .ui-button-text {
    margin:0px;
    padding:3px 5px !important;
    } 
    
main#cookies {
    text-align:center;
    }
    
main#cookies p { 
    padding:5px;
    text-align:left;
    color:#ffffff;
    }