* { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } .navbar { padding: 6px 12px 6px 12px; overflow: hidden; /*here code changed in line below*/ /*background-color: #264163;*/ /*background-color: #FF9800;*/ background-color: #002047 /*background-color: #0055bd*/ } .navbar .active { color: #FFFFF5; /*font-weight: bold;*/ border-style: solid; border-width: 0px 0px 4px 0px; border-color: #27C26C; } .navbar a { float: left; font-size: 14px; color: #A3A6B5; text-align: center; padding: 14px 16px; text-decoration: none; cursor: pointer; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 14px; border: none; outline: none; color: #A3A6B5; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .active { color: #FFFFF5; } .navbar a:hover, .dropdown:hover .dropbtn { color: white; background-color: #333; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { color: black; background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } /* Right-aligned section inside the top navigation */ .topnav-right { float: right; color: #FFFFF5; } /*#===========================================*/ /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } /*===========================================*/ /*------------------------------------*/ .setup-your-account { display: none; width: 20%; height: 1200px; padding: 20px; float: left; border-style: solid; border-width: 1px 1px 0px 0px; border-color: #CCCCD0; background-color: #F9F9F9; overflow: hidden; } /* The container */ .setup-your-account .container { display: block; position: relative; padding-left: 35px; margin-bottom: 32px; cursor: pointer; font-size: 14px; color: #555; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .setup-your-account .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .setup-your-account .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; } /* On mouse-over, add a grey background color */ .setup-your-account .container:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .setup-your-account .container input:checked ~ .checkmark { background-color: #27C26C; } /* Create the checkmark/indicator (hidden when not checked) */ .setup-your-account .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .setup-your-account .container input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .setup-your-account .container .checkmark:after { left: 9px; top: 5px; width: 3px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /*-------------------------------------*/ .page-content { width: 100%; height: auto; float: left; border-style: none; background-color: #FFFFFF; } .page-header { width: 100%; height: 56px; padding: 2px 14px 7px 12px; color: white; /*here code changed in line below*/ /*background-color: #0B4E92;*/ background-color: #0B4E92; float: left; } .page-header .dropdown { padding: 3px 14px 7px 12px; } .page-header .dropdown .dropbtn { color: white; } .page-header h1 { padding: 3px 12px 1px 6px; float: left; font-size: 14px; padding-top:8px; font-weight: unset; } .page-header .page-header-right { width: 50%; height: auto; padding: 3px 14px 7px 12px; float: right; } .page-header .page-header-right a { margin: 0px 10px 0px 10px; padding: 17px 1px 8px 1px; float: right; text-decoration: none; color: #B7B8C1; font-size: 14px; } .page-header .page-header-right a.active { color: #FFFFF5; font-weight: bold; border-style: solid; border-width: 0px 0px 4px 0px; border-color: #27C26C; } .page-header .page-header-right div.current-date { margin: 0px 30px 0px 0px; padding: 1px 0px 1px 0px; float: right; color: #FFFFF5; font-size: 14px; font-weight: bold; } .page-header .page-header-right div.current-date a { margin: 0px 10px 0px 10px; padding: 15px 1px 13px 1px; float: right; text-decoration: none; color: #FFFFF5; font-size: 18px; font-weight: bold; } .page-header .page-header-right div.current-date div { margin: 0px 1px 0px 1px; padding: 17px 1px 13px 1px; float: right; font-size: 14px; } @media screen and (max-width: 600px) { .page-header h1 { padding: 1px 12px 1px 6px; float: left; font-size: 18px; } .page-content h2 { font-size: 17px; } .page-content p { font-size: 14px; } .dropdown .dropbtn {font-size: 12px;} .navbar #reports {display: none;} .navbar #screencasts {display: none;} .navbar #videos {display: none;} .navbar #settings {display: none;} .navbar #add_managers {display: none;} .navbar #download {font-size: 12px;} }