Difference between revisions of "Team:Macquarie Australia/CSS Navbar"

Revision as of 07:02, 24 September 2018

content {

   width: 100vw;
   margin: 0;
   margin-left: auto !important;
   margin-right: auto !important;
   padding: 0;

} /* Clear the default wiki settings */

home_logo, #sideMenu { display:none; }
sideMenu, #top_title, .patrollink {display:none;}
content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}

body {background-color: #f2f2f2; }

bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }

/********************************* DEFAULT WIKI SETTINGS ********************************/ /*FROM STYLESHEET*/

.dropdown-menu {

   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
   display: none;
   float: left;
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
   font-size: 14px;
   text-align: left;
   list-style: none;
   background-color: #fff;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 4px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

} /* Prevents header buttons fron turning dark upon hover */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

   color: #333;
   background-color: transparent;

}

/* Makes menu buttons stick to right hand side of screen */ @media (min-width: 768px) {

   .navbar-left {
       float: left !important;
   }
   .navbar-right {
       float: right !important;
       margin-right: -5px;
   }
   .navbar-right ~ .navbar-right {
       margin-right: 0;
   }

}

/* Makes drop-downs appear left to right instead of up to down */ @media (min-width: 768px) {

   .navbar-nav {
       float: left;
       margin: 0;
   }
   .navbar-nav > li {
       float: left;
   }
   .navbar-nav > li > a {
       padding-top: 15px;
       padding-bottom: 15px;
   }

}

/* Formatting navbar */ .navbar-fixed-top {

   top: 0;
   border-width: 0 0 1px;

} .navbar-fixed-top, .navbar-fixed-bottom {

   position: fixed;
   right: 0;
   left: 0;
   z-index: 1030;

} @media (min-width: 768px) {

   .container > .navbar-header,
   .container-fluid > .navbar-header,
   .container > .navbar-collapse,
   .container-fluid > .navbar-collapse {
       margin-right: 0;
       margin-left: 0;
   }

} a {

   color: #337ab7;
   text-decoration: none;

} @media (min-width: 768px) {

   .navbar-header {
       float: left;
   }

} .nav > li > a {

   position: relative;
   display: block;
   padding: 10px 15px;

} .nav {

   padding-left: 0;
   margin-bottom: 0;
   list-style: none;

} .dropdown-menu > li > a {

   display: block;
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
   color: #333;
   white-space: nowrap;

} .dropup, .dropdown {

   position: relative;

} .caret {

   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
   border-top: 4px dashed;
   border-top: 4px solid \9;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;

} .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {

   display: block;
   max-width: 100%;
   height: auto;

}

/*END FROM SPREADHEET */

/* Navbar */

.some-padding {

   padding-top: 20px;

}

/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar */

.navbar-default {

   background-color: white;
   border-color: rgba(255, 255, 255, 0.3);
   font-family: 'Quicksand', sans-serif;
   font-weight: 300;
   -webkit-transition: all 0.35s;
   -moz-transition: all 0.35s;
   transition: all 0.35s;

}

.navbar-default .navbar-header .navbar-brand {

   color: #52658F;
   font-family: 'Quicksand', sans-serif;
   font-weight: bold;
   font-size: 22px;
   display: inline-block;

}

.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus {

   color: #52658F;

}

.navbar-default .navbar-header .navbar-toggle {

   font-family: 'Quicksand', sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #333A56;
   text-transform: uppercase;

}

.navbar-default .nav > li > a, .navbar-default .nav > li > a:focus {

   text-transform: uppercase;
   font-family: 'Quicksand', sans-serif;
   font-weight: 400;
   font-size: 14px;
   color: #222222;

}

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover {

   color: #333A56;

}

.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus {

   color: #333A56 !important;
   background-color: white;

}

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

   background-color: white;

}

.navbar-default .navbar-toggle {

   border: none;

}

.navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus {

   background-color: #F7F5E6;
   color: #333A56;

}

.navbar-default .dropdown-menu {

   border: none;
   outline: none;
   font-family: 'Quicksand', sans-serif;
   text-transform: uppercase;
   font-weight: 400 !important;
   font-size: 13.2px !important;
   color: #222222;

}

sitelinks a {

   display: inline-block;
   border: 3px solid #fff;
   color: #fff;
   padding: 10px 20px;
   margin: 10px

}

footer {

   background: #333;
   text-align: center;
   color: #fff;
   line-height: 50px;

}

footer a {

   color: #fff;

}

/*END FROM STYLESHEET*/

body {

   background-color: white;
   width: 100%;
   padding-top: 50px;

}

bodyContent {

   padding-right: 0px;

}

globalWrapper {

   font-size: 100%;
   padding: 0px;
   margin: -10px -20px -20px -20px;

}

.navbar-collapse {

   padding-left: 0px;

}

banner {

   margin-top: 50px;

}

sideMenu {

   margin-top: 10px;

}

.dropdown-menu li:hover .sub-menu {

   visibility: visible;

}

.dropdown:hover .dropdown-menu {

   display: block;

}

.navbar-nav .dropdown-menu, .navbar .dropdown-menu {

   margin-top: 0;

}

/********************************* CONTENT OF THE PAGE ********************************/

/* Wrapper for the content */

.content_wrapper {

   width: 85%%;
   margin-left: 150px;
   padding: 0px;
   float: left;
   background-color: #f2f2f2;

}

/*LAYOUT */

.column {

   padding: 10px 0px;
   float: left;
   background-color: white;

}

.full_size {

   width: 100%;

}

.full_size img {

   padding: 10px 15px;
   width: 96.5%;

}

.half_size {

   width: 50%;

}

.half_size img {

   padding: 10px 15px;
   width: 93%;

}

.img:hover {

   opacity: 1.0 !important;

}

/*STYLING */

/* styling for the titles */

.content_wrapper h1, .content_wrapper h2 {

   padding: 5px 15px;
   border-bottom: 0px;
   color: #72c9b6;

}

.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {

   padding: 5px 15px;
   border-bottom: 0px;
   color: #000000;

}

/* font and text */

.content_wrapper p {

   padding: 0px 15px;
   font-size: 13px;
   font-family: 'Roboto', sans-serif;

}

/* Links */

.content_wrapper a {

   font-weight: bold;
   text-decoration: underline;
   text-decoration-color: #72c9b6;
   color: #72c9b6;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;

}

/* hover for the links */

.content_wrapper a:hover {

   text-decoration: none;
   color: #000000;

}

/* non numbered lists */

.content_wrapper ul {

   padding: 0px 20px;
   font-size: 13px;
   font-family: 'Quicksand', sans-serif;

}

/* numbered lists */

.content_wrapper ol {

   padding: 0px;
   font-size: 13px;
   font-family: 'Quicksand', sans-serif;

}

/* Table */

.content_wrapper table {

   width: 97%;
   margin: 15px 10px;
   border: 1px solid #d3d3d3;
   border-collapse: collapse;

}

/* table cells */

.content_wrapper td {

   padding: 10px;
   vertical-align: text-top;
   border: 1px solid #d3d3d3;
   border-collapse: collapse;

}

/* table headers */

.content_wrapper th {

   padding: 10px;
   vertical-align: text-top;
   border: 1px solid #d3d3d3;
   border-collapse: collapse;
   background-color: #f2f2f2;

}

/* Button class */

.button_click {

   margin: 10px auto;
   padding: 15px;
   width: 12%;
   text-align: center;
   font-weight: bold;
   background-color: #72c9b6;
   cursor: pointer;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;

}

/* button class on hover */

.button_click:hover {

   background-color: #000000;
   color: #72c9b6;

}

.top-pad {

   padding: 35px;

}

/* NEW STUFF FROM CURRENT PAGE

/* column stuff */ .column {

   float: left;
   padding: 1px;

}

/* side columns */ .column.side {

   width: 20%;

} /* side columns */ .column.side.left {

   width: 20%;

}

.column.side.right {

   width: 20%;

}

/* main content */ .column.middle {

   Width: 60%;
   min-height: 850px;

   /* change the background image of the main column */
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;

}

/* Clear floats after the columns */ .row:after {

   content: "";
   display: table;
   clear: both;

}

/* footer*/ .footer {

   background-color: white;
   text-align: center;
   padding: 35px;

}

/*ROTATING SCRIPT */ .rotate {

   -webkit-animation: spin .8s infinite linear;
   animation: spin 20s infinite linear;

} @-webkit-keyframes spin {

   100% { -webkit-transform: rotate(360deg); }

} @-moz-keyframes spin {

   100% { -moz-transform: rotate(360deg); }

} @keyframes spin {

   100% {
       -moz-transform:rotate(360deg);
       -o-transform:rotate(360deg);
       transform:rotate(360deg);
   }

}