/*
    
    Stylesheet to hold any styling to do with the header bar
    
    Created: 04.03.2016
    By: NP

*/

.toolbar
{
    
}
.toolbar

.header_toolbar_content{position:relative;height:45px;padding-bottom:5px}
.header_toolbar_content_item_container{float:left;position:relative;width:100%;height:100%;display:table}
.header_toolbar_content_item_container p{padding:10px}
.header_toolbar_content_item{display:table-cell;vertical-align:middle;text-align:center;padding:0;height:100%;}


/*#header
{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:45px;
    z-index:20;
    background:transparent;
    min-width:300px;
    display:none;
}*/

#header p 
{
    padding:0px;
    margin:0px;
    font-size:0.8em;
}

#header > .header_inner
{
    width:100%;
    height:100%;
    max-width:1000px; 
    margin-left:auto;
    margin-right:auto;
}

#header > .header_inner > div
{
    float:left;
    position:relative;
    height:100%;
}

#header_login_table
{
    width:100%;
    float:right;
    max-width:700px;
}
#header_login_table td
{
    vertical-align:middle;
}
#header_login_table .td_loginbtn
{
    padding-right:8px; 
    padding-left:10px; 
    width:90px; 
    height:50px;
    width:1px;
    vertical-align:middle;
}
#header_login_table .td_forgottenpass > p
{
   text-align:right;
   padding:0px;
   font-size:0.7em;
}

.header_toolbar_content_item_container input[type=text], .header_toolbar_content_item_container input[type=password]  
{
    border:none; 
    border-bottom:1px solid #DDD; 
    border-radius:0px;
    background:transparent; 
    color:#000; 
    font-size:0.8em;
}
.header_toolbar_content_item_container input[type=text]:focus, .header_toolbar_content_item_container input[type=password]:focus  
{
    border:none; 
    border-bottom:1px solid #FFF; 
}

#header ::-webkit-input-placeholder{ color:#FFF; }
#header :-moz-placeholder{ color:#EEE; }
#header ::-moz-placeholder{ color:#EEE; }
#header :-ms-input-placeholder{ color:#EEE; }
#header input:-moz-placeholder{ color:#EEE; }
#header input::placeholder{ color:#EEE; }

#header > .header_inner > div.headerbtn
{
    width:45px;
}
#header > .header_inner > div.headertext
{
    width:110px;
}
#header > .header_inner > div.headersearch
{
    width:50%;
    max-width:350px;
}
#header > .header_inner > div.headerlogin
{
    width:80%;
}
#header > .header_inner > div.headerbtn.right, #header > .header_inner > div.headertext.right, #header > .header_inner > div.headersearch.right, #header > .header_inner > div.headerlogin.right
{
    float:right;
}


#header > .header_inner > div.headerbtn.popupbtn.open:before, #header > .header_inner > div.headertext.popupbtn.open:before
{
    content:' ';
    position:absolute;
    width:0;
    height:0;
    right:18px;
    bottom:0px;
    border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid rgba(249,249,249,0.99);    
}
#header > .header_inner > div.headerbtn.popupbtn.open:after, #header > .header_inner > div.headertext.popupbtn.open:after
{
    content:' ';
    position:absolute;
    width:0;
    height:0;
    right:20px;
    bottom:0px;
    border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 3px solid rgba(249,249,249,0.99);
}
#header > .header_inner > div.headertext.popupbtn.open:before
{
    right:45px;
}
#header > .header_inner > div.headertext.popupbtn.open:after
{
    right:49px;
}

#header .iconbutton, #header .textbutton
{
    height:auto;
    width:auto;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    border:none;
    position:relative;
}
#header .iconbutton
{
    color:#FFF;
}
#header .iconbutton:hover
{
    color:#EEE;
}
#header .iconbutton a, #header .textbutton a
{
    display:block;
    text-align:center;
}
#header .textbutton
{
    line-height:90%;
    text-align:center;
    font-size:0.8em;
    padding: 0 5px;
    width: auto;
}
#header .textbutton.right
{
    text-align:right;
}
#header .textbutton .subtext
{
    font-size:0.74em;
    color:rgba(255,255,255,0.5);
}


#updatepanel_header_login
{
    width:100%;
    display:table-cell;
    vertical-align:middle;
    height:100%
}

#header_notification_container
{
    position: fixed;
    display: none;
    width: 100%;
    height: auto;
    padding: 20px 3% 20px 3%;
    background: rgba(255, 255, 255, 0.98);
    color: #000;
    left: 0;
    top: -1000;
    text-align: center;
    z-index: 20;
    font-size:0.9em;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#header_notification_container .material-icons
{
    padding-right: 5px;
    display:inline;
    vertical-align:baseline;
}

#notification_count_label, #cart_quantity_label
{
    position: absolute;
    left: 0px;
    bottom: 6px;
    background: rgba(255,0,0,0.8) none repeat scroll 0% 0%;
    color: #FFF;
    padding: 1px 2px 0px 2px;
    width: auto;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 6px 0px 6px 6px;
    font-size:0.65em;
    min-width: 20px;
    text-align: center;
}
#cart_quantity_label
{
    display:none;
    border-radius: 6px 6px 6px 0px;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    min-width: 0;
    left: 27px;
    bottom: 27px;
}
#notification_count_label {
    left: auto;
    font-size: 0.5em;
    min-width: 10px;
    padding: 0px;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    line-height: 12px;
    bottom: 20px;
    margin-left: 7px;
    border: 1px solid rgba(242,0,44,0.6);
    overflow: visible;
}

.open #notification_count_label, .open #notification_count_label > .pulsering
{
    animation:none;
}


.pulsering {
    border: 2px solid rgba(255,0,0,0.5);
    border-radius: 30px;
    height: 13px;
    width: 13px;
    position: absolute;
    left:-2px;
    top:-2px;
    animation: pulsate 3s ease-out;
    animation-iteration-count: infinite;
    opacity: 0.0;
    z-index:400;
}
@keyframes pulsate {
    0% {transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {transform: scale(3, 3); opacity: 0.0;}
}


.loggedinastext
{
    margin: 10px 10px 10px 0px;
    font-size: 0.7em;
    text-align: right;
    padding:0;
}

.service-notification {
    display: block;
    position: sticky;
    background-color: #FFFFFF;
    width: 100%;
    padding: 20px 3% 20px 3%;
    margin: 0px;
    text-align: center;
    z-index: 19;
    top: 45px
}