* {
    color: #444;
    font-size: 1em;
}
body {
    font-family: 'Verdana';
    color: #fff;  font-size: 18px;
    background: #f1da36;
    overflow-x: hidden;
}

.top {
    position:absolute; top:0px; left:0px;
    display: block; z-index: 99; 
    width: 100%; height: 45px;
    overflow-x: hidden; overflow-y: hidden;
    }

.bottom {
 
    display: block; z-index: 99; 
    width: 100%; height: 30; 
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */    
    }
    
.content {
    position:absolute; top:0px; left:0px; 
    width: 100%;
    background: #fff;         
    }

.contenu {
    width: 100%;
    margin: 46px 0 60px 0;
}


h1 { margin-top: 60px; font-size:24px; font-weight:bold;}

h2 { 
background: #4c4c4c; /* Old browsers */
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */    position: absolute; top:0; width:100%; 
    margin: 0 ; 
    font-size:20px; font-weight:bold; text-align: center; color: #FFF;
    border-width: 3px;
    border-color: #000;
    border-bottom-style:solid;
    height:40px; line-height: 40px;
    overflow-x: hidden; overflow-y: hidden;
    }

h3  { color:#000; margin-top: 10px; padding:0; font-size:20px; font-weight:bold;}

a { color: #313131; font-weight: bold;}
    
.link { display:block;
    border-bottom-style: solid;
    border-width: 1px;
    height:30px ; line-height:30px ;
    margin: 0px 40px 0 40px;
    padding: 5px 40px 5px 20px;
    text-align:left;
    font-size:16px; 
    text-decoration: none; 
    background-image:url(../images/arrow.png);
    background-repeat: no-repeat; background-position: center right;
    background-color:#99FFFF;  
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

.menutitle{
    display:block;
    height:30px ; line-height:30px ;
    margin: 0px 10px 0 10px;
    padding: 5px 40px 5px 20px;
    border-bottom-style: solid;
    border-width: 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:left; 
    background-color:#99FFFF; 
    font-weight:bold;  
    font-size:16px;  
   overflow-x: hidden; overflow-y: hidden;
   word-wrap: break-word;
   word-break: break-all;
}

.arrow{    
    background-image:url(../images/arrow.png);
    background-repeat: no-repeat; background-position: center right;
}

.rightarrow{    
    background-image:url(../images/arrow-right.png);
    background-repeat: no-repeat; background-position: center right;
}

.menudown{
    background-color:#FEFF91;
    background-image:url(../images/arrow-down.png);
    background-repeat: no-repeat; background-position: center right; 
}

.submenu{
  margin: 5px 20px 0 20px;
  color: #000;
  font-size:16px;
  font-family:微軟正黑體,Arial,sans-serif;
  text-align:left;
  }

.subbutton {
    display:block;  border-bottom-style: solid; border-width: 1px;
    height:30px ; line-height:30px ;
    padding: 5px 50px 5px 20px;
    text-align:left;
    text-decoration: none;  
    background-image:url(../images/arrow.png);
    background-repeat: no-repeat; background-position: center right;
    background-color:#99FFFF;    
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px; 
   overflow-x: hidden; overflow-y: hidden;
   whitespace:nowrap;   
    }
    
.sublink {
    display:block;  border-bottom-style: solid; border-width: 1px;
    height:30px ; line-height:30px ;
    font-size:14px;
    padding: 5px 50px 5px 20px;
    text-align:left;
    text-decoration: none;  
    background-image:url(../images/arrow.png);
    background-repeat: no-repeat; background-position: center right;
    background-color:#99FFFF;    
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px; 
   overflow-x: hidden; overflow-y: hidden;
   word-wrap: break-word;
   word-break: break-all;
    }    

.subtel {
    border-bottom-style: solid; border-width: 1px;
    font-size:16px;
    padding: 3px 50px 3px 20px;
    text-decoration: none;  
    background-color:#99FFFF;    
    background-image:url(../images/arrow.png);
    background-repeat: no-repeat; background-position: center right;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px; 
    }    

select {
    display:block;  
    width:92%; height:40px ; line-height:40px ;
    margin: 10px 4% ;
    padding: 5px 10px;
    border-bottom-style: solid;
    border-width: 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:left; 
    background-color:#FEFF91; 
    font-weight:bold;
    }

option { height:40px }  
/*    
.styled-select {
    font-size: large;
    width:240px;   
    height:40px ; line-height:40px ;
    margin: 10px 3% ;
    padding: 0px;
    border-width: 3px;
    text-align:right; 
    font-weight:bold;
    background: #E6E6DC;
    overflow: hidden;
    background: url("../images/arrow-down.png") no-repeat right transparent;
} 
    
.styled-select select {   
    background: transparent; 
    font-size: large;  
    width: 240px;   
    padding: 5px;      
    border: 3px solid #ccc;   
    height: 45px;   
    -webkit-appearance: none; 
}​
    
*/      

.input {
    display:block;
    width:92%; height:40px ; line-height:40px ;
    margin: 10px 4% ;
    padding: 5px 10px;
    border-bottom-style: solid;
    border-width: 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:left; 
    background-color:#fff; 
    font-weight:bold;
    }

.submit {                                        
    display:block;  border-style: outline; border-width: 3px;
    width:92%; height:40px ; line-height:40px ;
    margin: 10px 4% ;   padding: 0px;
    font-size:20px; font-weight:bold;  text-align:center;  
    background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
   
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px; 
   overflow-x: hidden; overflow-y: hidden;
   whitespace:nowrap;   
   }
    

.submenu > li {
    position: relative;
    margin: 0;
    padding: 8px 0 8px 10px;
    font-size: 18px;
    font-weight: bold;
    list-style: none;
    font-family:微軟正黑體,Arial,sans-serif;
    border-top-style:outset;
    border-bottom-style:outset;
    border-color:#DCDCDC;
    border-width:1px;
}

.button {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 3px;
    width: auto;
    height: 28px;
    line-height: 30px;
    font-family:微軟正黑體,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    border-width: 2px; border-style: groove;  
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; 

}

.button {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 3px;
    width: auto;
    height: 28px;
    line-height: 30px;
    font-family:微軟正黑體,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    border-width: 2px; border-style: groove;  
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; 

}

.musicsearch {position:relative; float:right; top:0; right:5px; margin:0 1px 0 1px; width:15%; text-align:center; background-color: #000 ; border-color:#666;}
.board {overflow:hidden; font-weight:bold; font-size:18px; padding-top:5px; padding-left:10px;}
.song {font-weight:bold; font-size: 19px; padding-left: 40px; padding-right: 40px; color:blue; }
.player {font-size: 15px; padding-left: 40px; padding-right: 40px; color:red; }
.prev {font-size: 15px; padding-left: 40px; padding-right: 40px;}

ul {positon:relative; margin:0 5px 0 -35px; }

ul > li {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #E0E0E0;
    padding: 8px 0 8px 10px;
    font-size: 18px;
    font-weight: bold;
    list-style: none;
    font-family: Arial,sans-serif;
}

.click { text-decoration: none;}

.chart {
display: block; border-width:4px; border-style:inset; overflow-x:hidden; 
background: #ffffcc; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}


.count {
    display: block; position: absolute; margin: 0; left: 6px; top: 8px;
    width: 32px; height:32 px; 
    text-align: center; font-size: 110%;  letter-spacing: -0.07em; color: #FEFF91; 
    font-weight: bold; text-decoration: none; 
    width: 36px; height: 30px; padding: 7px 0 0 0;
    background-color:#8887EB; 
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; 
    border-right-style:outset;
    border-bottom-style:outset;
    border-color:#000;
    border-width:1px;
 
    } 

.bar {background-color:grey; height:32px; position: relative; margin:0; }

.navi {
    display: block; float:left; width:150px; 
    margin:2px; padding:5px 0 5px 0;
    border-style:groove; border-color:#666;
    text-align:center; background-color: #0300DC ; 
    text-align: center; font-size: 20px;  letter-spacing: -0.07em; color: #FEFF91; 
    font-weight: bold; text-decoration: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; 

}

.MVtitle { font-weight:bold; font-size: 16px; position:absolute; top:6px; left: 130px; margin-right: 6px; height:18px; color:blue; overflow-x:hidden; overflow-y:hidden; }
.MVdate { font-size: 12px; position:absolute; top:28px; left: 130px; margin-right: 6px; height:18px; color:red; overflow-x:hidden; overflow-y:hidden; }
.MVdescript {font-size: 12px; position:absolute; top:46px; left: 130px; margin-right: 6px; color:#000;  overflow-x:hidden;}



.block50 {
   float:left; margin:1%; display: block;  color:#fff;
   width:48%; height:140px; list-style-type:none; 
   background-color:#00FFFF;  background-repeat: no-repeat; 
   background-position: center 70%; vertical-align: text-bottom; 
   color:#FFF; font-size:18px;
text-shadow:1.5px  1.5px  1.5px  #000000;}
   
.block100 {
   float:left; margin:1%; display: block;
   width:98%; height:140px; list-style-type:none; 
   background-color:#00FFFF;  background-repeat: no-repeat; 
   background-position: center 70%; vertical-align: text-bottom;
   color:#FFF; font-size:18px;
text-shadow:1.5px  1.5px  1.5px  #000000;} 

.tab {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0 3px;
    width: auto;
    height: 28px;
    line-height: 30px;
    font-family:微軟正黑體,Arial,sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    border-width: 2px 2px 0 2px; border-style: groove;  
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;

}