/* 
    Document   : com_login
    Created on : 2014.12.15., 9:21:31
    Author     : Gege <gergo@infoartnet.hu>
*/

div#header-whi div.part-login{
    position: relative;
    float: right;
    display: inline-block;
    margin: 0 20px 0 0;
}

div#header-whi div.part-login h2.component-heading{
    display: inline-block;
    background: #fff url('../gfx/icon-login.png') no-repeat 5px 50%;
    color: #004B84;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 10px 0 25px;
    cursor: pointer;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    
    
    
}

div#header-whi div.part-login div.component-body{
    float: right;
}

div#header-whi div.part-login div.component-body .com-content a.reg{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    background: #FFF;
    color: #004B84;
    text-decoration: none;
    padding: 0 10px 0 10px;
    /* border-radius: 0px 5px 5px 0; */
    text-transform: uppercase;
}
div#header-whi div.part-login h2.component-heading:hover,
div#header-whi div.part-login h2.component-heading.toggled,
div#header-whi div.part-login div.component-body .com-content a.reg:hover{
    color: #004B84;
}


/*Loginform*/
div#header-whi div.part-login form#loginForm:before{
    content: '';
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FFF;
    position: absolute;
    top: -10px;
    left: 140px;
}
div#header-whi div.part-login form#loginForm{
    display: none;
    position: absolute;
    top: 100%;
    right: 0px;
    width: 300px;
    z-index: 1000;
    box-sizing: border-box;
    margin-top: 11px;
    background: #004B84;
    padding: 15px;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
div#header-whi div.part-login form#loginForm div.box-input{
    padding: 10px 0;
}
div#header-whi div.part-login form#loginForm div.box-input label{
    display: block;
    font-weight: 600;
    margin: 0 0 10px;
    color: #FFFFFF;
}
div#header-whi div.part-login form#loginForm div.box-input input[type="text"],
div#header-whi div.part-login form#loginForm div.box-input input[type="password"]{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25); 
    color: rgba(255,255,255,0.25);
}

div#header-whi div.part-login form#loginForm input#login{
    background: transparent;
    text-transform: uppercase;
    border: none; 
    color: #FFFFFF;
}
div#header-whi div.part-login form#loginForm input#login:hover{
    color: rgba(255,255,255,0.25);
}

div#header-whi div.part-login form#loginForm a.reglink{
    background: transparent;
    float: right;
    text-transform: uppercase;
    border: none; 
    color: #FFFFFF;
    height: 36px;
    line-height: 36px;
}
div#header-whi div.part-login form#loginForm a.reglink:hover{
    color: rgba(255,255,255,0.25);
}

/*logged in*/

div#header-whi div.part-login div.logged {
    max-width: 190px;
}
div#header-whi div.part-login div.logged strong {
    height: 36px;
    line-height: 36px;
    display: inline-block;
    font-weight: 500;
    color: #004B84;
}
div#header-whi div.part-login div.logged span.logout { display: none; }
.beloldal div#header-whi div.part-login div.logged strong { color: #FFF; }

/*----content login -------------------*/

div#content .part-login{
    margin: 0 0 20px;
}
div#content .part-login h1.component-heading{
    font-size: 21px;
    background: #004B84;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: 10px 20px;
    /*border-radius: 5px 5px 0 0;*/
    font-family: 'Open Sans Light', sans-serif;
    text-transform: uppercase;
}
div#content .part-login div.component-body{
    margin: 10px 0 0;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    position: relative;
}

div#content .part-login form#loginForm{}
div#content .part-login form#loginForm div.box-input{
    width: 48%;
    margin: 0 1% 10px;
    float: left;
}
div#content .part-login form#loginForm div.box-input label{
    display: block;
    margin: 0 0 10px;
}
div#content .part-login form#loginForm div.box-input input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

div#content .part-login form#loginForm input#login{
    border: none;
    background: transparent;
    text-transform: uppercase;
    color: #004B84;
    float: right;
    padding: 0 10px;
}
div#content .part-login form#loginForm input#login:hover{
    text-decoration: underline;
}
div#content .part-login form#loginForm a.reglink{
    text-transform: uppercase;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
}
div#content .part-login form#loginForm a.reglink:hover{
    text-decoration: underline;
}



/*------- MEDIA QUERIES -------*/

@media only screen and (min-width: 1323px){}

@media only screen and (min-width: 994px) and (max-width: 1323px) {}

@media only screen and (min-width: 640px) and (max-width: 993px) {}

@media only screen and (max-width:993px) {
    div#header-whi div.part-login {
        margin-right:0;
    }
    
    div#header-whi div.part-login div.logged {
        padding-left:12px;
        padding-right:12px;
    }
    
    div#header-whi div.part-login form#loginForm::before {
        display:none;
    }
}

@media only screen and (max-width:639px) {
    
    div#header-whi div.part-login {
        float:none;
        clear:both;
        display:block;
    }
    
    div#header-whi div.part-login div.component-body {
        width:calc(50% - 2px);
    }
    
    div#header-whi div.part-login h2.component-heading {
        float:none;
        width:calc(50% - 2px);
    }
    
    div#header-whi div.part-login div.component-body .com-content a.reg {
        display:block;
    }
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
   div#header-whi div.part-login { margin: 0; }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    
    div#header-whi div.part-login {
        margin-bottom:8px;
        margin-top:8px;
    }
   
   div#header-whi div.part-login form#loginForm { width: 280px; }
   div#header-whi div.part-login div.logged strong { margin: 0 10px 0 35px; }
   .beloldal div#header-whi div.part-login div.logged strong { margin: 6px 10px 0 10px; }
   .beloldal div#header-whi div.part-login h2.component-heading {
      padding: 0 15px 0 25px;
      
   }
}