@charset "utf-8";
#header_container {
	background-color: #af28b4;
	height: 110px;
	width: 100%;
	position: relative;
}
.top_header_container{
	height: 68px;
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	}
a.header_omusic_logo_btn{
	float: left;
	 width: 262px;
	height: 68px;
	background-image: url(../../images/friday/header_omusic_logo_friday.png);
	background-repeat: no-repeat;
     -moz-background-size: 100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	}
a.header_omusic_logo_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
}

.header_btn_container{
	float: right;
	height: 68px;
	width: auto;
	}

a.header_login_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_login_btn.png);
	background-repeat: no-repeat;
	}
a.header_login_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

a.header_singup_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_singup_btn.png);
	background-repeat: no-repeat;
	}
a.header_singup_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

a.header_memberarea_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_memberarea_btn.png);
	background-repeat: no-repeat;
	}
a.header_memberarea_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

a.header_news_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_news_btn.png);
	background-repeat: no-repeat;
	}
a.header_news_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

a.header_shopping_cart_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_shopping_cart_btn.png);
	background-repeat: no-repeat;
	}
a.header_shopping_cart_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

/* 會員登出 */
.header_logout_btn_container{
	float: right;
	height: 68px;
	width: 362px;
	}
a.header_logout_btn{
	float: left;
	height: 68px;
	width: 68px;
	background-image: url(../../images/header_logout_btn.png);
	background-repeat: no-repeat;
	}
a.header_logout_btn:hover{
	opacity:0.4;
	filter:alpha(opacity=20);
	background-color: #750669;
}

/* TOP Menu */
.bottom_header_container{
	height: 42px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background-color: #32323a;
	}

.menu_container{
	height: 42px;
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	}

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
	float:left;
	background-color: #32323a;
	width: 700px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
	color: #ffffff;
	display: block;
	font-family: "微軟正黑體";
	text-decoration: none;
	height: 42px;
	line-height: 42px;
	font-size: 12px;
	padding-right: 10px;
	padding-left: 10px;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  display: inline-block;
  float: left;
  margin: 0;
}
#cssmenu.align-center {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  font-size: 15px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width:100%;
  height: 0;
  position: absolute;
  bottom: 0px;
  border-bottom: 3px solid #af28b4;

}
#cssmenu > ul > li:first-child > a {

}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a{
	color: #ffffff;
	display: block;
	font-family: "微軟正黑體";
	text-decoration: none;
	height: 42px;
	line-height: 42px;
	padding-right: 10px;
	padding-left: 10px;
	}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
	background: #32323a;
	font-size: 14px;
	filter: none;
	display: block;
	height: 42px;
	color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4e4e4e;
}
#cssmenu .has-sub ul li:hover a {
	background: #070707;
	background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
	background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
	background: -o-linear-gradient(top, #262626 0%, #070707 100%);
	background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
	background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}

#cssmenu .has-sub ul li:hover:after {
  content: '';
  display: block;
  width:100%;
  height: 0;
  position: absolute;
  bottom: 0px;
  }
#cssmenu ul ul li:hover > a {
  color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
  border-bottom: 0;
}

.tag_logo{
	background-image: url(../../images/friday/tag_omusic_logo.png);
	background-repeat: no-repeat;
	height: 42px;
	width: 20px;
	float: left;
	margin-right: 5px;
	}

/* TOP Menu END */


/*會員頭像*/
.memberpic {
	float:left;
	width:40px;
	height:40px;
    border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
    border:2px solid #fff;
	margin:13px 10px 5px 5px;
	}
.memberID{
	font-family: "微軟正黑體";
	font-size:12px;
	line-height:40px;
	color:#FFFFFF;
	float:left;
	margin:13px 10px 5px 5px;
	}

#memberpic_earphones{
	width: 54px;
	height: 50px;
	position: absolute;
	background-image: url(../../images/earphones_icon.png);
	background-repeat: no-repeat;
	top: 10px;
	left: 706px;
	text-indent:-9999px;
	}

/*search*/
.search_box{
	font-family: "微軟正黑體";
	font-size:12px;
	color:#6C6C6C;
	float:right;
	height: 22px;
    width: 180px;
	margin-top:10px;
	margin-right:15px;
    padding: 0 12px 2px 22px;
	background: #FFF url(../../images/search_icon.png) 6px 4px no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #fff #fff;
    border-radius: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    }

/* Footer */

#footer{
	float:left;
	width:100%;
	height: 60px;
	border-top-style: solid;
	padding-top: 10px;
	background-color: #32323a;
	border-color:#af28b4 #32323a #32323a;
	border-top-width:3px;
	border-left-width:3px;
	border-right-width:1px;
	border-bottom-width:1px;
	border-style:solid;
	margin-top:15px;
	}

.footer_inside{
	overflow: auto;
	width: 1000px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	text-decoration: none;
    }

.footer_container{
	float:left;
	font-family: "微軟正黑體";
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	width:auto;
	line-height: 24px;
	position: relative;
	background-image: url(../../images/friday/omusic_c_logo.png);
	background-repeat: no-repeat;
	background-position: 49px 28px;
	}

.footer_fb_container{
	height:48px;
	float:right;
	font-family: "微軟正黑體";
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	width: 398px;
	border-left-width:1px;
	border-left-style:solid;
	border-color:#FFF;
	}

.footer_fb_container a{
	color:#FFF;
	text-decoration:none;
	}

.footer_fb_container :hover{
	color:#848488;
	text-decoration:none;
	}

.footer_logo{
	float:left;
	position:relative;
	margin-left:20px;
	width:108px;
	height:48px;
	background-image: url(../../images/friday/footer_logo.png);
	background-repeat: no-repeat;
     -moz-background-size: 100%;
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	}

.footer_fb_info{
	float:left;
	position:relative;
	margin-left:15px;
	width:120px;
	height:48px;
	text-align: left;
	}

a.footer_link{
	font-family: "微軟正黑體";
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	}
a.footer_link:hover {
	opacity:0.4;
	filter:alpha(opacity=50);
}

.fb_like{
	float:left; margin:2px 0 0 2px;
	}

.omusic_c_logo{
	height: 14px;
	width: 55px;
	position: absolute;
	top: 0px;
	right: 0px;
	}
