/* 分類品牌樣式 - Categories & Brands Styles */

/* Filter Styles */
.filter dl{
    padding:5px 0;
    line-height:18px;
    background:url('../img/horizontal_spacer.gif') repeat-x left top;
    margin-bottom: 0
}

.filter .first{
    background-image:none
}

.filter dt{
    float:left;
    width:50px;
    padding:5px 0;
    font-weight:bold;
    text-align:left
}

.filter dd{
    padding:3px 10px 3px 0
}

.filter dd a{
    display:inline-block;
    margin-right:5px;
    padding:2px 8px;
    white-space:nowrap;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.filter dd a:hover{
    text-decoration:none;
    background-color:#eee;
    text-shadow:0 1px 0 #fff
}

.filter dd a.all{
    font-weight:bold;
    background-color:#eee
}

.filter dd a.current{
    color:#fff;
    background:#666;
    text-shadow:0 1px 0 #333
}

/* Category Styles */
.category .bd{
    padding:6px 5px 5px
}

.category a:hover{
    text-decoration:none
}

.category li.level_1{
    float:left;
    width:100%;
    border-top:1px dashed #ccc;
}

.category li.first{
    border-top-width:0
}

.category p.level_1{
    padding:10px 10px 0
}

.category p.level_1 .icon{
    display:block;
    float:right;
    height:16px;
    width:16px;
    margin-top:1px;
    text-indent:-999em;
    background:#fff url('../img/toggle_icon.gif') no-repeat -16px 0
}

.category p.level_1 .icon:hover{
    background-position:-16px -16px
}

.category a.level_1{
    font-size:14px;
    font-weight:bold;
    line-height:18px
}

.category li.level_1 li.hover{
    z-index:100
}

.category .sub_cat_lv1{
    padding:5px 0 10px
}

.category .hide_sub .sub_cat_lv1{
    display:none
}

.category .hide_sub p.level_1 .icon{
    background-position:0 0
}

.category .hide_sub p.level_1 .icon:hover{
    background-position:0 -16px
}

.category li.level_2 {
    position: relative;
    display: block;
    width: 100%;
    padding: 5px 10px;
    height: auto;
}

.category a.level_2 {
    display: block;
    width: 100%;
    padding: 5px 0 0 10px;
    height: 30px;
}

.category .level_2.hover {
    background-color: #eeeeee;
}

.category .level_2.hover a{
    color:#333;
}

.category .level_2.hover .current,.category li .current {
    color: #000;
    font-weight: bold
}

.category ul.level_1 .current a.level_1{
    color:#ff4e00
}

.category ul.level_2 .current a{
    color:#ff4e00;
    font-weight:bold
}

.category .sub_cat_lv2{
    display:none;
    position:absolute;
    left:70px;
    top:-13px;
    height:auto;
    background-color:#fff;
    border:3px solid #ffcb59
}

.category li.level_2:hover .sub_cat_lv2, .category li.hover li.hover .sub_cat_lv2{
    display:block
}

.category .inner_lv2{
    border:1px solid #ffa140
}

.category .inner_lv2 .arrow{
    display:block;
    position:absolute;
    top:9px;
    left:-12px;
    height:25px;
    width:13px;
    text-indent:-999em;
    background:url('../img/border_arrow_left.gif') no-repeat left top
}

.category ul.level_3 {
    width: 100%;
    clear: both;
}

.category li.level_3{
    display:block;
    width:100%;
    position:relative;
    padding: 5px 10px;
    margin: 10px 0;
}

li.level_3.hover {
    background-color: #333;
}

li.level_3.hover a {
    color: #fff;
}

.category a.level_3{
    display:block;
    padding:0 0 0 5px;
    font-size:14px;
    line-height:18px;
    width: 100%;
}

.category .show_children .sub_cat_lv1{
    display:block;
    position:static;
    width:188px;
    margin:2px 0;
    padding:10px 0 0 0;
    background:#fff url('../img/category_sub.gif') no-repeat left top
}

.category .show_children .top_lv1, .category .show_children .bottom_lv1{
    display:none
}

.category .show_children ul.level_2{
    width:168px;
    padding:0 10px 10px 10px;
    background:#fff url('../img/category_sub.gif') no-repeat -188px bottom
}

.category .show_children ul.level_2 li.level_2{
    width:168px
}

.category .show_children ul.level_2 a.level_2{
    height:24px;
    line-height:24px;
    padding:0 8px 0 20px;
    background:url('../img/icon.gif') no-repeat 10px -112px
}

.category .show_children li.level_1:hover a.level_1, .category .show_children li.hover a.level_1{
    color:#444;
    background:#e0f2ff url('../img/category_bg.gif') no-repeat left 0;
    text-shadow:0 1px 0 #fff
}

.category .show_children li.level_1:hover a.level_1 span, .category .show_children li.hover a.level_1 span{
    background-position:right -32px
}

.category .show_children li.level_1 a.level_1:hover, .category .show_children li a.level_1.hover{
    color:#fff;
    background-color:#ff8c22;
    background-position:left -64px;
    text-shadow:0 1px 0 #c4620d
}

.category .show_children li.level_1 a.level_1:hover span, .category .show_children li a.level_1.hover span{
    background-position:right -96px
}

.category .show_children li.level_2:hover .sub_cat_lv2, .category .show_children li.level_2_hover .sub_cat_lv2{
    display:block
}

/* All Category List */
.all_cat_list .bd{
    padding:19px
}

.all_cat_list p.level_1{
    padding:8px 10px;
    font-size:14px;
    font-weight:bold;
    line-height:20px;
    background:#fff url('../img/horizontal_spacer.gif') repeat-x left bottom
}

.all_cat_list p.level_1 a{
    color:#333
}

.all_cat_list p.level_1 a sup{
    display:inline-block;
    margin-left:5px;
    padding:0 5px;
    color:#999;
    background-color:#eee;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.all_cat_list p.level_2{
    float:left;
    padding:5px;
    line-height:18px;
    font-weight:bold
}

.all_cat_list p.level_2 a{
    float:left;
    padding:2px 5px 2px 5px;
    white-space:nowrap
}

.all_cat_list li.level_3{
    float:left;
    padding:5px;
    line-height:18px
}

.all_cat_list li.level_3 a{
    float:left;
    padding:2px 5px 2px 15px;
    white-space:nowrap;
    background:url('../img/icon.gif') no-repeat 5px 10px
}

.all_cat_list li.level_3 a sup{
    display:inline-block;
    margin-left:5px;
    padding:0 5px;
    color:#ccc;
    background-color:#f8f8f8;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

/* All Category Wrapper */
.all_cat_wrapper{
    position:absolute;
    left:10px;
    bottom:0;
    height:28px;
    width:200px
}

.all_cat_wrapper .all_cat{
    display:block;
    height:21px;
    width:200px;
    text-indent:-999em;
    background:url('../img/all_cat.gif') no-repeat 0 0
}

.all_cat_wrapper .fixed{
    height:8px;
    overflow:hidden;
    background-color:#fff;
    border-left:2px solid #464646;
    border-right:2px solid #464646
}

.all_cat_wrapper .all_category{
    display:none;
    width:200px;
    z-index:100
}

.all_cat_wrapper:hover .all_category, .all_cat_wrapper_hover .all_category{
    display:block
}

.all_cat_wrapper:hover .all_cat, .all_cat_wrapper_hover .all_cat{
    background-position:0 -21px
}

#page_index .all_cat_wrapper .all_cat{
    background-position:0 -21px
}

#page_index .all_cat_wrapper:hover .all_cat, #page_index .all_cat_wrapper_hover .all_cat{
    background-position:0 -21px
}

/* All Category */
.all_category{
    position:relative;
    z-index:1
}

.all_category.box .head {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #FFFFFF;
    font-size: 18px;
    font-family: 'FjallaOneRegular';
    padding: 10px 17px;
    text-transform: uppercase;
    background: #555;
}

.all_category .hd{
    display:none
}

.all_category .bd{
    padding: 6px 5px 5px;
    background-color: #f7f7f7;
    border: 1px solid #ebebeb;
}

.all_category.box a {
    color: #666666;
}

.col_sub .all_category{
    background-image:none;
    padding-bottom:0
}

.col_sub .all_category .bd{
    border-bottom-width:2px
}

.all_category li {
    padding: 5px 0;
}

.all_category a:hover{
    text-decoration:none;
    color: #428bca
}

.all_category li.level_1{
    position:relative;
    float:left;
    width:100%;
    border-bottom:1px solid #eee
}

.all_category a.level_1{
    display:block;
    height:32px;
    overflow:hidden;
    padding:0 10px;
    font-size:14px;
    line-height:32px
}

.all_category li:hover, .all_category li.hover{
    z-index:100
}

.all_category li.level_1:hover a.level_1, .all_category li.hover a.level_1{
    color:#fff;
    font-weight:bold;
    background:#464646;
    border-radius:3px
}

.all_category .sub_cat_lv1{
    visibility:hidden;
    overflow:hidden;
    position:absolute;
    left:258px;
    top:0;
    width:660px;
    background-color:#fff;
    border: 1px solid #ebebeb;
}

.all_category li.level_1:hover .sub_cat_lv1, .all_category li.hover .sub_cat_lv1{
    visibility:visible
}

.all_category ul.level_2{
    float:left;
    width:457px;
    padding:10px 20px;
}

.all_category li.level_2{
    padding-bottom:5px;
    border-top:1px solid #eee
}

.all_category li.level_2_first{
    border-top-width:0
}

.all_category a.level_2{
    display:block;
    padding-top:5px;
    font-weight:bold;
    line-height:22px
}

.all_category a.level_3{
    padding-right:13px;
    font-size:12px;
    line-height:24px;
    white-space:nowrap
}

.all_category .level_2_extra{
    float:right;
    width:200px;
    padding:10px 20px;
    background-color:#f8f8f8;
    margin-bottom:-999em;
    padding-bottom:999em;
    position:relative
}

.all_category .level_2_extra dl{
    margin-bottom:10px
}

.all_category .level_2_extra dt{
    padding:5px 0;
    font-weight:bold
}

.all_category .level_2_extra .cat_brands dd{
    float:left
}

.all_category .level_2_extra .cat_brands dd a{
    padding:0 8px;
    font-size:12px;
    line-height:20px;
    white-space:nowrap
}

.all_category .level_2_extra .cat_promotion dd{
    padding:3px 0
}

.all_category .level_2_extra .cat_promotion dd a{
    display:block;
    height:16px;
    width:182px;
    overflow:hidden;
    padding:0 8px 0 10px;
    font-size:12px;
    line-height:16px;
    white-space:nowrap;
    text-overflow:ellipsis;
    background:url('../img/icon.gif') no-repeat 3px 4px
}

.all_category .level_2_extra .ads li{
    margin-bottom:10px;
}

.all_category .level_2_extra .ads img{
    display:block;
    width:200px;
}

.all_category .hide_extra .sub_cat_lv1{
    width:430px
}

.all_category .hide_extra .level_2_extra{
    display:none
}

.all_category .all{
    display:block;
    margin-top:5px;
    padding:8px;
    color:#333;
    text-align:right;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.all_category .all:hover{
    color:#fff;
    background-color:#464646
}

/* Brand Styles */
.brand_details .bd{
    padding:9px
}

.brand_details div {
    padding: 10px;
}

.brand_details div img{
    margin: 3px 5px 5px;
}

.brand_details h1{
    padding:5px;
    margin-bottom:10px;
    color:#333;
    font-size:20px;
    font-weight:bold;
    line-height:24px;
    background:url('../img/horizontal_spacer.gif') repeat-x left bottom
}

.brand_details .description{
    font-size:14px;
    line-height:20px
}

.brand_details .website{
    padding:10px;
    line-height:20px
}

.brand_details .cat_list{
    clear:both;
    padding:10px;
    line-height:18px;
    background:url('../img/horizontal_spacer.gif') repeat-x left top
}

.brand_details .cat_list strong{
    display:block;
    margin-bottom:5px
}

.brand_details .cat_list a{
    display:inline-block;
    margin:0 5px 5px 0;
    padding:2px 8px;
    white-space:nowrap;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px
}

.brand_details .cat_list a.current{
    color:#fff;
    background:#ff8c22 url('../img/slight_bg.gif') repeat-x left -90px
}

.brand_details .cat_list a:hover{
    text-decoration:none;
    background-color:#eee
}

.brand_details .cat_list sup{ 
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    color: #FF932B;
    top: 0;
    font-size: 14px;
}

.brand_details .cat_list a:hover sup, .brand_details .cat_list a.current sup{
    color:#f60;
    background-color:#fff
}

.brand_list li{
    display:block;
    float:left;
    width:210px;
    height:90px;
    padding:15px;
    text-align:center
}

.brand_list .logo{
    display:block;
    color:#f60;
    line-height:60px;
    font-size:16px;
    font-weight:bold
}

.brand_list .logo img{
    max-width:180px
}

.brand_list .name{
    display:block;
    padding:4px;
    line-height:16px
}

.all_brand_list li{
    padding:15px
}

/* Brands Box */
.brands li{
    display:block;
    height:60px;
    padding:8px 0;
    text-align:center;
    background:url('../img/horizontal_spacer.gif') repeat-x left top
}

.brands li.first{
    background-image:none
}

.brands li img{
    max-width:180px
}

.brands.box .bottom_button {
    text-align: center;
}

/* Compare Wrapper */
.compare_wrapper .bd{
    padding:14px
}

.compare_wrapper .button{
    margin:3px
}