/*
    Document   : common
    Created on : 2013年5月30日, 下午06:04:52
    Author     : Pong
    Description:
        Purpose of the stylesheet follows.
*/

@import url('header.css');
@import url('footer.css');
@import url('overrider.css');
@import url('beautyexchange/be_popup.css');
@import url('banner.css');


*{
    margin:0px;
    padding:0px;
}
#page_wrapper
iframe{
    border:0px;
}

.caption{
    font-size:13px;
}

.clear{
    clear:both;
}

body,html{
    margin:0px;
    padding:0px;
    background-color:#f0f0f0;
    font-size:12px;
    font-family: 'EB Garamond',"細明體", serif;
    -webkit-text-size-adjust:none;
    text-size-adjust: none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    letter-spacing:1px;
}

.cookie_policy{
    position: fixed;
    bottom:0px;
    height:75px;
    background-color:black;
    z-index:100000;
    width:100%;
    display: flex;
    justify-content: center;
}

.cookie_policy > div{
    padding:20px 0px;
    color:white;
    text-align: center;
}
.cookie_policy > div a{ color:#fff; text-decoration: underline}
html{
    background-color:inherit;
}

.grid_widget{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor:pointer;
    width: 22%;
    max-width:300px;
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    display: inline-block;
    margin:0px 0px 2% 2%;
    vertical-align: top;
    position: relative;

}

.grid_share{
    width: 25px;
    height: 25px;
    background: url('../image/menclub/common/btn_share.png') no-repeat -25px 0px;
    margin: 11px;
    background-color: #C7B19A;
    opacity: 0.8;
    border-radius: 10px;
}

.grid_share a{
    display: block;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    text-indent: -100%;
    overflow: hidden;
    border: 0 none;
}

.grid_detail{
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 75px;
    display: none;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index:50;
}

.grid_detail_text{
    font-family: 'EB Garamond',"細明體", serif;
    color: white;
    font-weight: bold;
    font-size: 11px;
    height: 65px;
    width: 100%;
    overflow:hidden;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
display: none;
}

.share_popup{   
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    z-index:1;
    display:none;
}

.share_overlay{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    background-color:#fff;
    z-index:1;
    opacity: 0.5;
}

.share_wrap{
    left:50%;
    top:50%;
    position:absolute;
    z-index:2;
}

.share_icon{
    display:block;
    position:absolute;
    width:44px;
    height:44px;
    left:-22px;
    top:-22px;
    opacity: 0;
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.250, 0.250, 0.400, 1.650),
	opacity 250ms           cubic-bezier(0.250, 0.250, 0.400, 1),
	height 250ms            cubic-bezier(0.250, 0.250, 0.400, 1),
	width 250ms             cubic-bezier(0.250, 0.250, 0.400, 1);
    -moz-transition:    -moz-transform 250ms    cubic-bezier(0.250, 0.250, 0.400, 1.650),
	opacity 250ms           cubic-bezier(0.250, 0.250, 0.400, 1),
	height 250ms            cubic-bezier(0.250, 0.250, 0.400, 1),
	width 250ms             cubic-bezier(0.250, 0.250, 0.400, 1);
    -o-transition:      -o-transform 250ms      cubic-bezier(0.250, 0.250, 0.400, 1.650),
	opacity 250ms           cubic-bezier(0.250, 0.250, 0.400, 1),
	height 250ms            cubic-bezier(0.250, 0.250, 0.400, 1),
	width 250ms             cubic-bezier(0.250, 0.250, 0.400, 1);
    -ms-transition:     -ms-transform 250ms     cubic-bezier(0.250, 0.250, 0.400, 1.650),
	opacity 250ms           cubic-bezier(0.250, 0.250, 0.400, 1),
	height 250ms            cubic-bezier(0.250, 0.250, 0.400, 1),
	width 250ms             cubic-bezier(0.250, 0.250, 0.400, 1);
    transition:         transform 250ms         cubic-bezier(0.250, 0.250, 0.400, 1.650),
	opacity 250ms           cubic-bezier(0.250, 0.250, 0.400, 1),
	height 250ms            cubic-bezier(0.250, 0.250, 0.400, 1),
	width 250ms             cubic-bezier(0.250, 0.250, 0.400, 1);
}

.share_icon.open {
    opacity: 1;
}

.share_icon.fb{    
    background: url('../image/menclub/common/btn_share_social.png') -88px 0 no-repeat;
}
.share_icon.gp{
    background: url('../image/menclub/common/btn_share_social.png') -132px 0 no-repeat;
}
.share_icon.fav{
    background: url('../image/menclub/common/btn_share_social.png') -220px 0 no-repeat;
}
.favourited .share_icon.fav{
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}

.share_icon.fb.open{
    -webkit-transform: translate(88px,  50px);
    -moz-transform:    translate(88px,  50px);
    -ms-transform:     translate(88px,  50px);
    -o-transform:      translate(88px,  50px);
    transform:         translate(88px,  50px);
}
.share_icon.gp.open{
    -webkit-transform: translate(-88px, 50px);
    -moz-transform:    translate(-88px, 50px);
    -ms-transform:     translate(-88px, 50px);
    -o-transform:      translate(-88px, 50px);
    transform:         translate(-88px, 50px);    
}
.share_icon.fav.open{
    -webkit-transform: translate(0px, -50px);
    -moz-transform:    translate(0px, -50px);
    -ms-transform:     translate(0px, -50px);
    -o-transform:      translate(0px, -50px);
    transform:         translate(0px, -50px);    
}


.photo_div{
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.grid_widget:hover {
    box-shadow: 4px 4px 5px #b0b0b0;
}

.grid_widget:hover div.grid_detail{
    display:inline;
    opacity: 1.0;
}

.grid_right{
    margin-right: 0px !important;
}

.grid_desc{
    color: black;
    border-top:1.5px #B5A9A4 solid;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 20%;
    text-align: center;
}

.grid_title{
    font-size: 15px;
    height:21px;
    overflow: hidden;
}

.grid_date{
    font-size: 13px;
    height:21px;
    overflow: hidden;
    color:#888;
}

.grid_category{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-weight: bold;
}

.grid_photo{
    width:   100%;
}


a img{
    border:0px;
}

.be_btn{
    display:block;
    float:left;
}

ul{
    list-style:none;
    margin:0px;
    padding:0px;
}

ul li{
    float:left;
    list-style:none;
}

#page_wrapper{
    max-width: 1274px;
    min-width:1024px;
    min-height:400px;
    margin: 0 auto;
    position:relative;

}

#page_wrapper .right_column{
}

#page_wrapper.cover_page{
}

#page_wrapper.cover_page{
}

#page_wrapper.cover_page .left_column{
}

#page_wrapper.cover_page .right_column{
    display: none;
}

#page_wrapper.inner_page{
}

#page_wrapper.inner_page{
}

#page_wrapper.inner_page .left_column,
#page_wrapper.inner_page .right_column{
    float: left;
}

#page_wrapper.inner_page .left_column{
    width: 650px;
    margin-right: 15px;
}

#page_wrapper.inner_page .right_column{
    width: 300px;
}

#page_wrapper .fx{
    float: none !important;
    clear: both !important;
}

#grid_content{
    width:100%;
    max-width:1292px;
    min-width:980px;
    margin:5px auto 0 auto;
    position:relative;
    overflow:inherit;
    text-align: center;
}

.admin_tools{
    clear:both;
    width:100%;
    height:50px;
    margin:15px 0px;
}

.wrap{
    min-width:980px;
    max-width:1500px;
    margin:0px auto;
}

#wp .wp{
    max-width:1274px;
}


a{
    color:#666;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}


.breadcrumb_tag{
    width: 100%;
    height: auto;
    border-bottom: 1px dotted #000;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;    
    z-index: 98;
}
.breadcrumb_tag a{
    display: inline-block;
    color: black;
    font-family: 'EB Garamond',"細明體", serif;
    letter-spacing: 1px;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

.breadcrumb_tag span.separator{
    margin-left: 5px;
    margin-right: 5px;
}

.mc_title{
    font-size: 26px;
    text-align: center;
    font-weight: bolder;
    color: black;
    border-bottom: 1px solid #000;
    background-color: #ecede6;
    height: 55px;
    line-height:55px;
    width:100%;
    z-index: 99;
}

.loadmore{
    text-align:center;
    z-index:1000;
    display:none;
    position:absolute;
    top:-50px;
    height:50px;
    line-height: 50px;
    color:#fff;
    text-decoration: none;
    width:100%;
    background:rgba(0,0,0,0.6);
}

.loadmore:hover{
    text-decoration: none;
}

.loadmore[wait='yes']{
    cursor:pointer;
}

.loadmore[loading='yes']{
    cursor:wait;
}

.c{
    clear:both;
}

.scroll_container{
    position:relative;
}

.be_btn.scroll_top{
    background: url('../image/beautyexchange/icon/shortcut_down/shortcut_down.png') center center no-repeat;
    width:28px;
    height:43px;
    top:300px;
    right:-70px;
    position: absolute;
    display: none;
}

.dz_editor_container{
    border:1px #999 solid;
    height:400px;
}

.invis_block{
    z-index:10;
}

#scrolltop{
    display:none;
}

.mc_btn{
    display:block;
    float:left;
}

.mc_btn.text{
    letter-spacing: 3px;
    font-size:14px;
    color:#333;
    font-weight:bold;
}
.mc_btn.text:hover{
    text-decoration: none;
}

.mc_btn.common{
    color:#fff;
    padding:0 20px;
    height:25px;
    line-height:25px;
    text-align:center;
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color:#333;
}
.mc_btn.common:hover{
    background-color:#555;
    text-decoration: none;
}

.be_btn.right,
.mc_btn.right{
    float:right;
}

.be_btn.close_caption{
    font-family: "arial";
    font-size:11px;   
    color:#fff;
    text-decoration: none;
    width:5px;
}

.be_btn.common.tab{

}

.be_btn.common.inline{
    float:none;
    display:inline;
}

.be_btn.common{
    padding:0 20px;
    height:25px;
    line-height:25px;
    text-align:center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.be_btn.common:hover{
    text-decoration: none;
}

.be_btn.common.disable,
.be_btn.common.disable:hover,
.pn.pnc.disable,
.pn.pnc.disable:hover{
    background-color:#999;
    cursor:wait;
}

/* Image Uploader */
.be_btn_upload{
    background-color: #FFF;
    padding: 2px 4px;
    display: block;
    overflow: hidden;
}

/* Common notification message */
.notification_message_bg,
.notification_message{
    position: absolute;
    min-width: 100px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 2px #FFF;
    padding: 3px 12px;
    cursor: default;
}

.notification_message_bg{
    background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.notification_message{
}

.notification_message_bg .wrapper,
.notification_message .wrapper{
    position: relative;
}

.notification_message_bg .wrapper p,
.notification_message .wrapper p{
    color: #FFF;
    font-size: 13px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}


#comment_ul{
    padding-top:0px;
}

.add_fav{
    cursor:pointer;
}

#header div.homeless_top_zone{
    clear:both;
    display:block;
}

.be_overlay{
    opacity: 0.5;
    background-color:#fff;
    z-index:50000;
    width:100%;
    position:fixed;
    top:0px;
    display:none;
}