@charset "UTF-8";

body {
	margin: 0px;
	padding: 0px;
	font-family:Verdana,"Microsoft JhengHei","微軟正黑體", Geneva, sans-serif;
}
img{border:none;}

#mainFrameDiv{ width:800px; margin:auto; margin-top:50px; position:relative;}
#contentDiv{ margin:20px 5px 0 5px;}
#footerDiv{margin:30px 0 50px 0; font-size:12px; color:#666; padding:10px; background:#E9E9E9;}
#footerDiv a{display:block; float:right; color: #666; text-decoration:none;}
#footerDiv a:hover{color: #999;}
#shopNowDiv{ position:absolute; right:20px; bottom:20px;}
h1{font-size:16px; color:#999; font-weight:bold; margin:10px 10px 10px 0;}
#contentDiv p{ font-size:12px; color:#666;}
#contentDiv a{color:#999; text-decoration:none;}
#contentDiv a:hover{color:#666;}
table{font-size:12px; color:#999;}
table td{vertical-align:top;padding:5px 0 5px 0; border-bottom:1px dotted #CCC;}
.clear {clear:both} 
/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
	font-size:14px;
}   
     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        width:88px; 
        background:#ccc; 
        position:relative;
        z-index:500; 
        margin:0 6px;
    }
	
	#nav li li{
		margin:0;
	}
         
    /* this is the parent menu: background:#bcbdc1*/
    #nav li a {
        display:block; 
        width:88px;
        height:20px; 
        text-decoration:none; 
        color:#bcbdc1; 
        text-align:center; 
		background:#fff;
		padding:2px 0 1px 0;
    }
 
    #nav li a:hover {
        color:#333;
		background:#FFF;
    }
	
	#nav li a.currentPage{
		color:#333;
		background:#FFF;
	}
	
	#nav li li a {
        display:block; 
        width:88px;
        height:20px; 
        text-decoration:none; 
        color:#bcbdc1; 
        text-align:center; 
		background:#FFF;
		padding:1px 0 1px 0;
    }
 
    #nav li li a:hover {
        color:#333;
		background:#FFF;
		text-decoration:none;
    }
	
     
    /* you can make a different style for default selected value */
    #nav a.selected {
		color:#797b83;
        background:#dcdddf;
    }
	#nav a.selected:hover {
		color:#797b83;
        background:#dcdddf;
		text-decoration:none;
    }
     
        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
            margin:0 0 0 0px; 
            padding:0; 
            list-style:none;
			background:#bcbdc1;
        }
         
        #nav ul li {
            width:88px; 
            float:left; 
            border-top:0px solid #fff;
        }
         
        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;  
            height:25px;
            width:88px;
            color:#FFF;
        }
         
        #nav ul a:hover {
            text-decoration:underline;  
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}



/*   */
h5{font-size:16px;}
#contactContent{font-size:12px; color:#666; line-height:20px; margin:20px;}
#contactContent a{color:#999; text-decoration:none;}
#contactContent a:hover{color:#666;}


/*  */
#albumContainer img, #albumContainerPress img{ border:4px solid #F5F5F5;}
#albumContainer img:hover, #albumContainerPress img:hover{ border:4px solid #E1E1E1;}

/*FB DIV   */
#fbActivity{width:520px; float:left;}
#fbComment{margin:0 0 0 520px; width:270px; min-height:560px; background:#F5F5F5;}

/**/
#videoDiv{margin:0 0 10px 0;}
#videoDiv div{ float:left; width:173px; height:133px; margin:11px 11px 25px 11px; text-align:center;}
#videoDiv span.titleName{width:165; height:20px;}
#videoDiv img{border:4px solid #F5F5F5; margin:0 0 5px 0;}
#videoDiv img:hover{ border:4px solid #E1E1E1;}
#videoDiv a{font-size:10px; color:#333;}

/*collection    */
#collectionMenuDiv{float:left; width:120px; background:none; height:300px; margin:0 0 0 20px;}
#collectionMenuDiv ul, #collectionMenuDiv li{margin:0px; list-style:none; padding:0;}
#collectionMenuDiv ul{margin:0 0 10px 0; }
#collectionMenuDiv li{font-size:16px; font-weight:normal; color:#333;}
#collectionMenuDiv li li{font-size:14px; font-weight:normal;}

#collectionContentDiv{margin:0 0 0 160px;}
#collectionContentDiv img{ width:280px; margin:0 20px 20px 0; float:left;}

#subMenuDiv{width:630px; background:none; border-top:1px dotted  #F2F2F2;}
#subMenuDiv img{width:110px;}

.moreBtn{float:right; margin:0 20px 0 0;}
.buyBtn{float:right; margin:0 20px 0 0;}

/* sub scroll */
div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}