html { background-color: #e2e2e2; } .container-fluid{ background-color: #e2e2e2; } #hodor-logo { position: absolute; top: 5px; left: 45%; height:auto; width: 15%; } #sidenavbar a { position: fixed; left: -245px; transition: 0.3s; padding: 15px; width: 290px; font-size: 20px; color: black; border-radius: 0 5px 5px 0 ; background-color: #000000; text-align: center; text-decoration: none; font-family: 'Titillium Web', sans-serif; z-index: 99 !important; } #sidenavbar a img { border-radius: 50%; width: 50px; } #sidenavbar>a>i { position: absolute; right: 10px; color: #ffffff; } #sidenavbar>#profile>i { top: 35%; } #sidenavbar>#docs>a { } #sidenavbar>#docs>i { right: 18px; } #sidenavbar a:hover { left: 0; /* #background-color: #03a9f4; */ /*blue*/ background-color: #e53935; /*red*/ /*background-color: #43A047;*/ /*green*/ z-index: 99 !important; } #sidenavbar a:hover i { color: black; } #profile>i { top: 5px; } #profile { top: 12.35%; } #dashboard { top: 30%; } #learn { top: 40%; } #leaderboard { top: 50%; } #ctf { top: 60%; } #docs { top: 70%; } #logout { top: 80%; } #modal-header img { border-radius: 50%; width: 75px; } .modalhead { font-size: 60px !important; } .tab-content h3{ font-size: 20px; } .tab-content p{ font-size: 15px; } <!------------------------------Dashboard------------------------------------ --> .level-label, .progress, .questionbuttons, #timelinechart, #piechart{ position: relative; clear: both; margin-left: 5px; margin-right: 5px; margin-top: 15px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } .amcharts-graph-g1 .amcharts-graph-fill { filter: url(#blur); } .amcharts-graph-g2 .amcharts-graph-fill { filter: url(#blur); } .amcharts-cursor-fill { filter: url(#shadow); } .solves-chart{ position: absolute; } <!------------------------------Learn------------------------------------ --> .questions { position: absolute; top:20%; left:200px; margin-left:15%; } .navbar-inverse { background-color: #000000!important; position: absolute; top: 20%; left:5%; right: 2% } .navbar-inverse .navbar-brand { color: #ffffff; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #ffffff; } .navbar-inverse .navbar-text { color: #ffffff; } .navbar-inverse .navbar-nav > li > a { color: #ffffff; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #ffffff; background-color: darkred; } .navbar-inverse .navbar-nav > li > .dropdown-menu { background-color: #000000; } .navbar-inverse .navbar-nav > li > .dropdown-menu > li > a { color: #ffffff; } .navbar-inverse .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav > li > .dropdown-menu > li > a:focus { color: #ffffff; background-color: #e53935; } .navbar-inverse .navbar-nav > li > .dropdown-menu > li.divider { background-color: #e53935; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #e53935; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; background-color: #e53935; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { color: #ffffff; background-color: #e53935; } .navbar-inverse .navbar-toggle { border-color: #e53935; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #e53935; } .navbar-inverse .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #ffffff; } .navbar-inverse .navbar-link { color: #ffffff; } .navbar-inverse .navbar-link:hover { color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #ffffff; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #e53935; } } .navbar-inverse>.container-fluid{ background-color: black; }