/* styles specific to the application bar (app-bar) component
 * 
 */
#app-bar{
    float: right;
    overflow:hidden;
}
#app-bar .nav-bar {
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
}
#app-bar .nav-bar a {
    line-height: 24px;
}
    #app-bar .nav-bar .active {
        color: #668bac;
    }
    
#app-panel-outer{overflow:hidden}

.icon-24-login{width: 49px;height:24px;background:transparent url('../icons/icon-login.png') 0 0 no-repeat;}
.icon-24-menu{background-position: -48px 0}
.icon-24-search{background-position: 0 0}
.icon-24-login.active{background-position: 0 -24px}
.icon-24-menu.active{background-position: -48px -24px}
.icon-24-search.active{background-position: 0 -24px}

.icon-24-home{
    border-right:1px solid #668BAC;
    background-position: -72px 0;
    padding-right:1em;
}


@media screen and (min-width:346px){
    header .icon-24-home{
        background: url('../img/logo-unisa-landscape-white.png') top left no-repeat;
        border: none;
        border-radius: 0;
        padding-right:0;
        padding-top:50px;
		margin-top:16px !important;
        width:200px;
    
	}
}
@media screen and (min-width:640px){
    #app-bar{float:none;}
    header .icon-24-home{float:none;}
} 
@media screen and (min-width:1024px){
        
    #app-panels{
        background: url('../img/building-hawke.png') no-repeat;
        background-position: 0 -25%;
        background-attachment: fixed;
        background-size: 50%;
    }
}