Template:Hong Kong HKUST/styles.css/CSS⁠⁠⁠⁠

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); .navbar-brand { 

 z-index: 1;

} .navbar-header{ 

   display: block;
   background-color: #CCFFFF;
   position: fixed; /* Set the navbar to fixed position */
   top: 0; /* Position the navbar at the top of the page */
   width: 100%; /* Full width */

}

a { 

   text-decoration: none !important;

}

  1. cssmenu {
 padding-top: 32px;
 padding-left: 120px;
 background: #f0f0ff;
 width: auto;
 height: 130px;

}

  1. cssmenulol {
 position: fixed;
 padding-top: 32px;
 padding-left: 50px;
 background: #f0f0ff;
 width: 100%;
 height: 130px;

}

  1. cssmenu ul {
 list-style: none;
 margin: 0;
 padding: 2;
 line-height: 1;
 display: block;
 zoom: 1;

}

  1. cssmenu ul:after {
 content: " ";
 display: block;
 font-size: 0;
 height: 0;
 clear: both;
 visibility: hidden;

}

  1. cssmenu ul li {
 display: inline-block;
 padding: 0;
 margin: 0;

}

  1. cssmenu.align-right ul li {
 float: right;

}

  1. cssmenu.align-center ul {
 text-align: center;

}

  1. cssmenu ul li a {
 color: #5b6ed9;
 text-decoration: none;
 display: block;
 padding: 15px 25px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 14px;
 position: relative;
 -webkit-transition: color .5s;
 -moz-transition: color .5s;
 -ms-transition: color .5s;
 -o-transition: color .5s;
 transition: color .5s;

}

  1. cssmenu ul li a:hover {
 color: #ffffff;

}

  1. cssmenu ul li a:hover:before {
 width: 100%;

}

  1. cssmenu ul li a:after {
 content: "";
 display: block;
 position: absolute;
 right: -3px;
 top: 19px;
 height: 6px;
 width: 6px;
 background: #8baef9;
 opacity: .5;

}

  1. cssmenu ul li a:before {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 3px;
 width: 0;
 background: #5b6ed9;
 -webkit-transition: width .25s;
 -moz-transition: width .25s;
 -ms-transition: width .25s;
 -o-transition: width .25s;
 transition: width .25s;

}

  1. cssmenu ul li.last > a:after,
  2. cssmenu ul li:last-child > a:after {
 display: none;

}

  1. cssmenu ul li.active a {
 color: #2b3e99;

}

  1. cssmenu ul li.active a:before {
 width: 100%;

}

  1. cssmenu.align-right li.last > a:after,
  2. cssmenu.align-right li:last-child > a:after {
 display: block;

}

  1. cssmenu.align-right li:first-child a:after {
 display: none;

}

footer { 

 padding: 4rem 0;
 border-top: 1px solid #999999;
 font-family: 'Roboto', sans-serif;
 font-size: 1.125rem;
 color: #999999;
 text-align: left;

}

footer .icon-facebook-sign, footer .icon-camera, footer .icon-linkedin-sign, footer .icon-envelope-alt { 

 font-size:3rem;

}

  1. right {
 text-align: right !important;
 position: relative;
 margin-left:40%;
 color: #999999;
 -webkit-transition: .5s;
 transition: color .5s;

}

  1. right:hover {
 color: #3b5998;

}

  1. rightsmall {
 text-align: right !important;
 position: relative;
 margin-left: 2em;
 color: #999999;
 -webkit-transition: .5s;
 transition: color .5s;

}

  1. rightsmall:hover {
 color: #5599ff;

}

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

 #cssmenu {
   width: 60%;
 }
 #cssmenu ul li {
   float: none;
   display: block;
 }
 #cssmenu ul li a {
   height: 100px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-bottom: 1px solid #abdef9;;
 }
 #cssmenu ul li.last > a,
 #cssmenu ul li:last-child > a {
   border: 0;
 }
 #cssmenu ul li a:after {
   display: none;
 }
 #cssmenu ul li a:before {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 3px;
 width: 0;
 background: #5b6ed9;
 -webkit-transition: width .5s;
 -moz-transition: width .5s;
 -ms-transition: width .5s;
 -o-transition: width .5s;
 transition: width .5s;
 }

}