/*
    Copyright (c) 2020 The Japan Times
    All rights reserved.
    
    CSS for header elements. initially implemented for JT Theme design changes related to Piano Paywall integration  

*/

/* mobile */
div.login_header ul{
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height:14px;
    font-weight:bold;
    letter-spacing: .2px;
    min-height:36px;
    background-color:#333;
    color: #fff !important;
    border-bottom:none;
    padding: 11px 0 0;
}

div.login_header ul li a {
    color: #fff !important;
}

.login_header ul span {
    padding:0 12px;
}

li#login_info a#m_piano-login-button svg {
    margin:-2px 5px -2px 0;
}

li#my-account_info a#m_piano-my-account svg {
    margin:-2px 5px -2px 0;
}

div.login_header ul li#jt_view_count {
    display:block;
    background-color:#ddd;
    padding:7px;
    margin-top:11px;
    font-weight:200;
}

div.login_header ul li#organization_name {
    display:block;
    font-weight:200;
}

div.login_header ul li#jt_view_count,
div.login_header ul li#jt_view_count span,
div.login_header ul li#jt_view_count strong,
div.login_header ul li#organization_name {
    color:#666;
}

li#jt_view_count,
li#jt_view_count span.counterPW, 
li#jt_view_count strong, 
li#organization_name {
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: .7rem;
}


/* PC */

ul#user_account_header{
    padding:0;
    margin:10px 0 0 0;
}


ul#user_account_header li#login_info,
ul#user_account_header li#logout_info {
    display:block;
}


ul#user_account_header li#login_info,
ul#user_account_header li#logout_info {
    float:right;
    margin-left:10px;
}
ul#user_account_header li#my-account_info a{
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height:14px;
    font-weight:bold;   
    letter-spacing: .3px;
    display:inline-block;
    background-color: #fff;
    border: 1px solid #898989;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 7px 12px; 
}
ul#user_account_header li#my-account_info a:hover{
    color: #c8102e;
    border-color: #c8102e;
}
ul#user_account_header li#my-account_info a:hover > svg g#MyAccountHead,
ul#user_account_header li#my-account_info a:hover > svg path#MyAccountPath{
    stroke: #c8102e;
}
/* logout button */
li#logout_info a#piano-logout-button {
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:.8rem;
    line-height:1rem;
    font-weight:bold !important;
    letter-spacing: .3px;
    color:#fff !important;
    margin:15px 0;
    padding:5px 40px;
    text-align:center;
    background-color:#898989;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

li#logout_info a#piano-logout-button:hover {
    background-color:#c8102e;
} 

/* -- */
ul#user_account_header li#subscribe_info, ul#user_account_header li#login_info, ul#user_account_header li#my-account_info{
    margin-bottom:8px;
}
li#login_info a#piano-login-button {
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height:14px;
    font-weight:bold;
    letter-spacing: .3px;
    background-color: #fff;
    border: 1px solid #898989;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 7px 25px;
}

li#login_info a#piano-login-button:hover {
    color: #c8102e !important;
    border-color: #c8102e;

}
li#login_info a#piano-login-button:hover > svg g#MyAccountHead, 
li#login_info a#piano-login-button:hover > svg path#MyAccountPath{
    stroke: #c8102e;
}

li#login_info a#piano-login-button svg {
    margin-right:.5rem;
}

li#subscribe_info a#piano-register-button{
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height:14px;
    font-weight:bold !important;
    letter-spacing: .3px;
    color: #fff !important;
    background-color: #333;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 8px 22px;

}
li#subscribe_info a#piano-register-button:hover{
    background-color: #c8102e;
}

li#my-account_info{
    margin-top:10px;
    margin-bottom: 2px !important;
}

li#print_subscribers_info {
	padding-bottom: 0 !important;
}

li#my-account_info a#piano-register-button{
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height:14px;
    font-weight:200;
    letter-spacing: .2px;
    background-color: #fff;
    border: 1px solid #898989;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 6px 15px;
}

li#my-account_info a svg{
    margin-right:.5rem;
}

ul#user_account_header li#jt_view_count,
ul#user_account_header li#jt_view_count span.counterPW, 
ul#user_account_header li#jt_view_count strong, 
ul#user_account_header li#organization_name{
    color: #999;
}

li#free_membership_info a{
    font-family: Pluto, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
ul#user_account_header li#organization_name{
    margin-top:60px;
}