header {
    width:100%;
    text-align:center;
}

header .logo {
    height:80px;
}
header h1 {
    font-size:60px;
    padding-top:13px;
}
header h1 span {
    font-size:30px;
    vertical-align: bottom;
}

header .bar {
    width:100%;
    height:30px;
    border:1px solid #987;
    border-left:none; border-right:none;
}
header .bar .item {
    display:block;
    float:left;
    text-transform: uppercase;
    font-size:24px;
    padding:4px 4px 2px 8px;
    cursor:pointer;
    margin-left:4px;
}
header .user.acc .item {
    text-transform: none;
}
header .bar .item:hover, header .bar .item.active {
    background:#987;
}

header .user.acc .notif_icon {
    position:relative;
}
header .user.acc .notif_icon.unread {
    color:#d00;
}
header .notifs {
    position:absolute;
    right:0;
    top:100%;
    background:#edc;
    color:#000;
    font-size:16px;
    z-index:6;
    display:none;
    white-space: nowrap;
    text-align: left;
    padding:5px 5px;
    cursor:default;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:400px;
}
header .notif_icon.active .notifs { display:block; }
header .notifs.loading, header .notifs.empty {
    padding:10px 15px;
}
header .notifs.loading:after { content:"Loading..."; }
header .notifs.empty:after { content:"You have no notifications"; }
header .notifs .notif {
    padding:3px 7px 2px;
    cursor:pointer;
    display:block;
}
header .notifs .notif.unopened:before {
    display:inline-block;
    vertical-align: middle;
    content:"new";
    color:#f00;
    width:25px;
}
header .notifs .notif:hover { background:#cba; }
header .notifs .notif .text {
    display:inline-block;
    vertical-align: top;
    width:425px;
    white-space: normal;
}
header .notifs .notif.unopened .text { width:400px; }
header .notifs .notif .time {
    display:inline-block;
    vertical-align: top;
    min-width:80px;
    text-align:right;
    color:#666;
}
header .notifs .notif preview {
    color:#090;
}
header .notifs .notif preview:before, header .notifs .notif preview:after { content:"\""; }

header .bar .sort {
    float:left;
    text-align:left;
}
header .bar .user {
    float:right;
    text-align:right;
}

@media (max-width:640px) {
    header .logo {
        height:60px;
    }
    header h1 {
        font-size:40px;
    }
    header h1 span {
        font-size:20px;
    }
}