.navbar-header{
    margin-left: 0 !important; margin-right: 0 !important;
}

.navbar-header .functions[data-function="view"]{
    margin-left: 20px;
}


.navbar-inverse .navbar-nav>li{
    margin-left: 3px;
}
.navbar-inverse .navbar-nav>li>a{
    background: #b0b0b0; width: 121px;
    color: #17375e; text-align: center;

    padding-top: 16px; padding-bottom: 16px;
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{
    background: #b0b0b0;color: #c16919;
}

.navbar-inverse .navbar-nav>li.active>a, .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
    color: #c16919;
    background: #17375e;
}


li.config{float: right;position: relative}

li.config.item #analysis-box{
    top: 28px;
}
li.config > a:focus{
    color: #9d9d9d;
}

#analysis-button{ font-size: 24px; padding-top: 14px !important; padding-bottom: 14px !important;}
li.config.item a{
    padding-bottom: 0;
    padding-top: 0;
}
.functions{
    background: url("images/item.png") !important;
    color: #9d9d9d;
    height: 100%; width: 120px; display: inline-block;
    margin-left: 3px; text-align: center; line-height: 52px;
}

.functions[data-active="true"]{
    background: url("images/active-item.png") !important;
    color: white;
}
/* computer */ 
@media (min-width: 1301px) {
    .navbar-header{
        width: 500px;
    }
}
/* tablet */
@media (max-width: 1300px) and (min-width: 640px) {
    #analysis-button{
        float: right;
        padding-top: 12px !important;
        margin-right: 10px;
    }
    .navbar-toggle {
        display: block;
        background: #333;
    }
    .navbar-header{
        display: block;
		min-width: 500px !important;
        width: 100%;
		height: 52px;
    }

    .collapse .navbar-nav{
        display: none;
    }
    .collapse.in .navbar-nav{
        display: block;
        float: right !important;
    }
    .navbar-inverse .navbar-nav>li {
        display: inline-block;
    }
    .navbar-nav .profile{
        position: absolute; left: 0;
    }
	.user-summary{
        position: absolute;
        left: 54px;
    }
}

/* phone */
@media (max-width: 640px) {
    #analysis-button{
        float: right;
        padding-top: 12px !important;
        margin-right: 10px;
    }
    .navbar-inverse .navbar-nav>li{
        display: inline-block;
    }
    .menu-first{
        width: 50%;
    }
    #user-login, #user-signup{width: 47%; float: right}
    #user-signup{margin-top: 8px;}
    #user-login a, #user-signup a{width: 97%;}
    #navbar{background: white}

    .navbar-nav .functions{
        width: 47% !important; display: inline-block;
    }
    .livetracking{
        display: none !important;
    }
    .livetracking-a{
        width: 97% !important;
    }
    .menu-first{float: left;}


    .logged .menu-first{
        width: 100%;
    }
    .logged .functions{
        width: 24% !important;
    }
    .user-summary{
        float: right;
        /*max-width: 125px;*/
    }

    .logged .profile{
        float: right; margin-right: 20px;
    }

    .livetracking{display: inline-block !important;}

    .navbar-nav a{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    li.livetracking, li.sessions, li.track{
        width: 32% !important;
        float: none !important;
    }

    li.livetracking a, li.sessions a, li.track a{
        width: auto !important;
    }

    .user-summary{
        margin-top: 2px;
    }
    #profile-menu, .user-summary .remaining-stints{
        height: 25px;
    }
	
	.user-popup .title-user-popup {
		background-color: #333333;
		text-transform: capitalize;
		color: white;
		padding: 2px 0px;
		font-size: 14px;
		font-weight: 400;
		cursor: pointer;
		text-align: left;
		border: 1px solid #ffffff;
	}
	
	.user-popup .title-user-popup p {
		margin: 0px;
	}
	.help-box a{
		color: #e98701 !important;
	}
}