Team:SDU-Denmark/navbar/css

1. navbarPosition {

 position:absolute;
 width: 65vw;
 left:15vw;

}

/**************HIGHLIGHT SWITCH************/ .switch {

   background-color: #ccc;
   border-radius: 15px;
   cursor: pointer;
   display: inline-block;
   height: 16px;
   right: -25%;
   position: relative;
   top: 23px;
   -webkit-transition: .2s;
   transition: .2s;
   width: 31px;

}

.slider {

   background-color: white;
   border-radius: 50%;
   bottom: 2px;
   position:absolute;
   content: "";
   height: 12px;
   left: 2px;
   -webkit-transition: .2s;
   transition: .2s;
   width: 12px;

}

.slider.active {

 -webkit-transform: translateX(15px);
 -ms-transform: translateX(15px);
 transform: translateX(15px);

}

.switch.active {

 background-color: #689C43;
 box-shadow: 0 0 1px #689C43;

}

/****************HIGHLIGHT BUTTON*****************/

1. highlightToggle {

   position: fixed;
   top:30px;
   right:5vw;
   overflow:visible;
   cursor:pointer;

}

1. editorsHighlights {

   position:relative;
   left: 0px;
   top: -30px;
   width: 100px;

}

1. editorsHighlights > p {

   font-size:11px !important;

}

.highlightOverlay {

   background-color: rgba(0,0,0,0.0);
   position: fixed;
   height: 100%;
   width: 100%;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
   z-index: 50;
 -webkit-transition: .7s;
 transition: .7s;
 pointer-events:none!important;

}

.highlightOverlay.active {

   background-color: rgba(0,0,0,0.25) !important;

}

1. HQ_page p.active {

 color:rgba(0,0,0,0.3) !important;
 pointer-events:none!important;

}

.list.active li {

 color:rgba(0,0,0,0.3) !important;
 pointer-events:none!important;

}

span.highlighted {

 -webkit-transition: .2s;
 transition: .2s;

}

span.highlighted.active {

 background-color:#FFFDE9;
 box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 padding: 2.5px 3px 0.8px 3px;
 position:relative;
 z-index:101;
 color:rgba(0,0,0,0.8) !important;
 border-radius: 4px;
 pointer-events:auto!important;

}

1. editorsHighlights.active > p.active {

 color:rgba(0,0,0,0.8) !important;

}

img.highlighted-image.active {

 position:relative;
 z-index: 101;
 box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);

}

object.highlighted-image.active {

 position:relative;
 z-index: 101;

}

div.highlighted-div.active {

 position:relative;
 z-index: 101;
 box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);

}

/**************************START OF NAVBAR***********************/ a {

 text-decoration: none !important;

}

1. navbar {

 position:fixed;
 overflow:visible;
 left:0;
 top:16px;
 right:0;
 height:72px;
 background: #f8f8f8;
 z-index:102;
 box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);

}

.nav-tabs > li, .nav-pills > li {

   float:none;
   display:inline-block;
   *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
   margin-bottom: -10px;

}

.nav-tabs, .nav-pills {

   text-align:center;

}

.nav-tabs > li > a {

 font-size:16px;
 font-weight: 300;
 line-height: 22px;

}

.nav-tabs > #navbarIntroduction> a {

 color:#485E65;

}

.nav-tabs > #navbarProject> a {

 color:#73918A;

}

.nav-tabs > #navbarProcedures> a {

 color:#556E3F;

}

.nav-tabs > #navbarPractices> a {

 color:#76925E;

}

.nav-tabs > #navbarProspects> a {

 color:#B3AA5A;

}

.nav-tabs > #navbarCredits> a {

 color:#CAC27F;

}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

 color: #76925E;
 cursor: default;
 background-color: rgb(248, 248, 248);
 border: 1px solid #ddd;
 border-bottom-color: transparent;
 height: 38px;

}

.nav > li > a:hover, .nav > li > a:focus {

   text-decoration: none;
   background-color: #eee;
   height: 38px;

}

.nav > li > a {

   padding: 8px 15px 15px 15px;

}

a.anchor {

 display:block;
 position:relative;
 top:-60px;
 visibility:hidden;

}

/***********SUBNAVBAR*********/

1. menu1 h5 {

color: #485E65;

}

1. menu2 h5 {

color: #73918A;

}

1. menu3 h5 {

color: #556E3F;

}

1. menu4 h5 {

color: #76925E;

}

1. menu5 h5 {

color: #B3AA5A;

}

1. menu6 h5 {

color: #CAC27F;

}

.navbar-nav {

   width: 100%;
   text-align: center;
   overflow:hidden;

}

.nav-item.nav-link {

   display: inline-block;
   padding-right: 20px;
   padding-left: 20px;
   overflow:hidden;

}

.navbar-nav a:hover {

   background-color: #eee;
   padding-top: 1px;
   margin-top: -2px;
   border-radius: 0px 0px 5px 5px;

}

.anchorMargin {

 padding-top:200px;

}

.nav-item.nav-link.active {

   text-decoration: underline !important;

}

1. menu1 a.active {

   color:#485E65;

}

1. menu2 a.active {

   color:#73918A;

}

1. menu3 a.active {

   color:#556E3F;

}

1. menu4 a.active {

   color:#76925E;

}

1. menu5 a.active {

   color:#B3AA5A;

}

1. menu6 a.active {

   color:#CAC27F;

}

/**************************END OF NAVBAR***********************/

/**********************PROGRESS BAR************************/

.progressContainer {

 width:75%;
 height: 1px;
 position: absolute;
 margin-bottom: 0px;
 overflow: hidden;
 background-color: rgba(200,200,200,.5);
 content: "";
 display: table;
 table-layout: fixed;
 z-index:1000;
 left:12%;
 bottom:30%;

}

.active .progressContainer {

 position: absolute;
 left:12%;
 bottom:14%;

}

.nav > li > a:hover + .progressContainer {

 position: absolute;
 left:12%;
 bottom: 14%;

}

.progressBar1 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar2 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar3 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar4 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar5 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar6 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

@media only screen and (max-width: 1600px) {

 #navbarPosition {
   width: 70vw;
   left:12vw !important;
 }

 #highlightToggle {
 right:5vw !important;
 }

 .nav.nav-tabs > li {
   margin-left: -2px;
   margin-right: -2px;
 }

}

@media only screen and (max-width: 1400px) {

 #navbarPosition {
   width: 80vw;
   left:7vw !important;
 }

 #highlightToggle {
 right:0vw !important;
 }

}

@media only screen and (max-width: 1024px) {

 #navbarPosition {
   width: 95vw;
   left:1% !important;
 }

 .nav.nav-tabs > li {
   margin-left: -2px;
   margin-right: -2px;
   padding-left:-15px;
   padding-right:-15px;
 }

 .nav-tabs > li > a {
   font-size:14px;
   padding: 8px 13px 15px 13px;
 }

HQ_page h5 {

   font-size:1.1rem;
 }

 #highlightToggle {
   top:90px;
 }

1. homePage2 {

 bottom:-8px;
 left:5%;
 width:90%;

}

1. homePage3 {

 top:0px;
 right:0px;
 width:90%;

}

1. homePageText {

 top:25%;

}

1. HQ_page h1 {

 font-size: 245%;

}

span#PowerLeafH1 {

 font-size: 135%;

}

1. homePage p {

   letter-spacing: 2.3em;
   font-size:12px;

}

}

@media only screen and (max-width: 768px) {

 #navbarPosition {
   width: 100vw;
   left:-1% !important;
 }

 .nav.nav-tabs > li {
   margin-left: -3px;
   margin-right: -3px;
 }

 #highlightToggle {
   top:90px;
 }

 .nav-item.nav-link {
   margin-top: -5px;
 }

 .navbar-nav a:hover {
   margin-top: -6px;
 }

 .navbar-nav {
   margin: 0 15px;
 }

1. homePage2 {

 bottom:-8px;
 left:0;
 width:150%;

}

1. homePage3 {

 top:40px;
 right:0px;
 width:100%;

}

1. homePageCloud1, #homePageCloud2, #homePageCloud3, #homePageCloud4, {

 width:100%;

}

1. homeCloud1, #homeCloud2, #homeCloud3, #homeCloud4, {

 width:200%;
 bottom:10%

}

1. homePageText {

 top:25%;

}

1. HQ_page h1 {

 font-size: 190%;

}

span#PowerLeafH1 {

 font-size: 130%;

}

1. homePage p {

   letter-spacing: 2.1em;
   font-size:10px;

}

.nav > li > a {

   padding: 8px 10px 15px 10px;

}

.nav-tabs > li > a {

   font-size: 13px;

}

ul.nav.nav-tabs {

   position: relative;
   margin-right: -3px;

}

.nav-item.nav-link {

   padding-right: 17px;
   padding-left: 17px;

}

 #HQ_page h5 {
   font-size:1.15rem !important;
   margin-top:0px;
 }

.tab-content {

   position: absolute;
   width: 100%;
   left: -10px;

}

ul.nav.nav-tabs {

   margin-right: -10px;
   margin-left: 0px;

}

}

@media only screen and (max-width: 600px) {

1. homePage3 {

 top:80px;
 right:0px;
 width:150%;

}

.nav > li > a {

   padding: 8px 5px 15px 5px;

}

.nav-tabs > li > a {

   font-size: 11px;

}

ul.nav.nav-tabs {

   position: relative;
   margin-right: -3px;

}

.nav-item.nav-link {

   padding-right: 14px;
   padding-left: 14px;

}

 #HQ_page h5 {
   font-size:1.0rem !important;
   margin-top:0px;
 }

.nav.nav-tabs > li {

   margin-left: -4px;
   margin-right: -4px;

}

.tab-content {

   position: absolute;
   width: 100%;
   left: -10px;

}

ul.nav.nav-tabs {

   margin-right: -10px;
   margin-left: 0px;

}

1. HQ_page h1 {

 font-size: 160%;

}

span#PowerLeafH1 {

 font-size: 130%;

}

1. homePage p {

   letter-spacing: 2.1em;
   font-size:8px;

}

}

@media only screen and (max-width: 500px) {

1. homePage3 {

 top:80px;
 right:0px;
 width:180%;

}

.nav-tabs > li > a {

   font-size: 9px;

}

ul.nav.nav-tabs {

   position: relative;
   margin-right: -3px;

}

.nav-item.nav-link {

   padding-right: 14px;
   padding-left: 14px;

}

 #HQ_page h5 {
   font-size:0.9rem !important;
   margin-top:0px;
 }

.nav.nav-tabs > li {

   margin-left: -4px;
   margin-right: -4px;

}

1. HQ_page h1 {

 font-size: 250%;

}

1. homePage p {

   letter-spacing: 1.2em;
   font-size:10px;

}

}

@media only screen and (max-width: 400px) {

1. homePage3 {

 top:80px;
 right:0px;
 width:180%;

}

.nav-tabs > li > a {

   font-size: 8px;

}

ul.nav.nav-tabs {

   position: relative;
   margin-right: -3px;

}

.nav-item.nav-link {

   padding-right: 14px;
   padding-left: 14px;

}

 #HQ_page h5 {
   font-size:0.8rem !important;
   margin-top:0px;
 }

.nav.nav-tabs > li {

   margin-left: -5px;
   margin-right: -5px;

}

1. HQ_page h1 {

 font-size: 200%;

}

1. homePage p {

   letter-spacing: 0.9em;
   font-size:10px;

}

}

@media only screen and (max-width: 350px) {

1. HQ_page h1 {

 font-size: 175%;

}

1. homePage p {

   letter-spacing: 0.8em;
   font-size:10px;

}

.nav.nav-tabs > li {

   margin-left: -6px;
   margin-right: -6px;

}

}