/* Note: Try to remove the following lines to see the effect of CSS positioning */
html, body{font-family: 'Arial Narrow', sans-serif;font-size:18px}
.affix {top: 0;width: 100%;z-index: 9999 !important;}
.affix + .container-fluid {padding-top: 70px;}

.navbar-brand {left: 45%;position: absolute; width:500px;}
.navbar-brand > a{color:#FFF;font-size:18px;padding:0 0 0 10px;position:relative;top:6px}
.navbar-brand > a:hover,.navbar-brand > a:focus{text-decoration: none;}
#logo{position:relative;top:-33px;float:left}
#top-header{color:#AAAAAA;padding:5px 20px 5px 20px;font-size:16px}

.navbar-inverse{background:#6ABBE8;font-size:18px;color:#fff;border:none;}
.navbar-inverse .navbar-nav > li > a{color:#C7E6F7;padding-top: 22px;padding-bottom: 22px;}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{color:#FFF;}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{color:#FFF;background:none}

.navbar-inverse .navbar-nav>.open>a{background:none;}
.navbar-inverse .navbar-nav>.open>a:hover{background:none;}
.dropdown-menu>li>a{color:#6ABBE8;}
.dropdown-menu{min-width: 10px;}
.open > .dropdown-toggle.btn-default{background:none;}
.dropdown-toggle:active, .open .dropdown-toggle {
        background:none !important; 
        color:#FFF !important;
    }
.navbar-inverse .navbar-toggle{border-color:#FFF}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #C7E6F7;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border: none;
}

footer{background:#6ABBE8;padding:20px 0;color:#C6E5F7}

@media (max-width: 767px){
	.navbar-brand {width:auto;}
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
	    color: #C7E6F7;
	}
}