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

(Created page with "#content { width: 100vw; margin: 0; margin-left: auto !important; margin-right: auto !important; padding: 0; } /********************************* DEFAULT...")
 
 
(5 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
     padding: 0;
 
     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  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/*FROM STYLESHEET*/
 
/*FROM STYLESHEET*/
−
   
+
 
 
.dropdown-menu {
 
.dropdown-menu {
−
  position: absolute;
+
    position: absolute;
−
  top: 100%;
+
    top: 100%;
−
  left: 0;
+
    left: 0;
−
  z-index: 1000;
+
    z-index: 1000;
−
  display: none;
+
    display: none;
−
  float: left;
+
    float: left;
−
  min-width: 160px;
+
    min-width: 160px;
−
  padding: 5px 0;
+
    padding: 5px 0;
−
  margin: 2px 0 0;
+
    margin: 2px 0 0;
−
  font-size: 14px;
+
    font-size: 14px;
−
  text-align: left;
+
    text-align: left;
−
  list-style: none;
+
    list-style: none;
−
  background-color: #fff;
+
    background-color: #fff;
−
  -webkit-background-clip: padding-box;
+
    -webkit-background-clip: padding-box;
−
          background-clip: padding-box;
+
    background-clip: padding-box;
−
  border: 1px solid #ccc;
+
    border: 1px solid #ccc;
−
  border: 1px solid rgba(0, 0, 0, .15);
+
    border: 1px solid rgba(0, 0, 0, .15);
−
  border-radius: 4px;
+
    border-radius: 4px;
−
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
−
          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 */
 
/* Prevents header buttons fron turning dark upon hover */
−
    .navbar-default .navbar-nav > li > a:hover,  
+
.navbar-default .navbar-nav > li > a:hover,  
 
.navbar-default .navbar-nav > li > a:focus {
 
.navbar-default .navbar-nav > li > a:focus {
−
  color: #333;
+
    color: #333;
−
  background-color: transparent;
+
    background-color: transparent;
 
}
 
}
  
 
/* Makes menu buttons stick to right hand side of screen */
 
/* Makes menu buttons stick to right hand side of screen */
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
−
  .navbar-left {
+
    .navbar-left {
−
    float: left !important;
+
        float: left !important;
−
  }
+
    }
−
  .navbar-right {
+
    .navbar-right {
−
    float: right !important;
+
        float: right !important;
−
    margin-right: -5px;
+
        margin-right: -5px;
−
  }
+
    }
−
  .navbar-right ~ .navbar-right {
+
    .navbar-right ~ .navbar-right {
−
    margin-right: 0;
+
        margin-right: 0;
−
  }
+
    }
 
}
 
}
  
 
/* Makes drop-downs appear left to right instead of up to down */
 
/* Makes drop-downs appear left to right instead of up to down */
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
−
  .navbar-nav {
+
    .navbar-nav {
−
    float: left;
+
        float: left;
−
    margin: 0;
+
        margin: 0;
−
  }
+
    }
−
  .navbar-nav > li {
+
    .navbar-nav > li {
−
    float: left;
+
        float: left;
−
  }
+
    }
−
  .navbar-nav > li > a {
+
    .navbar-nav > li > a {
−
    padding-top: 15px;
+
        padding-top: 15px;
−
    padding-bottom: 15px;
+
        padding-bottom: 15px;
−
  }
+
    }
 
}
 
}
  
 
/* Formatting navbar */
 
/* Formatting navbar */
 
.navbar-fixed-top {
 
.navbar-fixed-top {
−
  top: 0;
+
    top: 0;
−
  border-width: 0 0 1px;
+
    border-width: 0 0 1px;
 
}
 
}
 
.navbar-fixed-top,
 
.navbar-fixed-top,
 
.navbar-fixed-bottom {
 
.navbar-fixed-bottom {
−
  position: fixed;
+
    position: fixed;
−
  right: 0;
+
    right: 0;
−
  left: 0;
+
    left: 0;
−
  z-index: 1030;
+
    z-index: 1030;
 
}
 
}
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
−
  .container > .navbar-header,
+
    .container > .navbar-header,
−
  .container-fluid > .navbar-header,
+
    .container-fluid > .navbar-header,
−
  .container > .navbar-collapse,
+
    .container > .navbar-collapse,
−
  .container-fluid > .navbar-collapse {
+
    .container-fluid > .navbar-collapse {
−
    margin-right: 0;
+
        margin-right: 0;
−
    margin-left: 0;
+
        margin-left: 0;
−
  }
+
    }
 
}
 
}
 
a {
 
a {
−
  color: #337ab7;
+
    color: #337ab7;
−
  text-decoration: none;
+
    text-decoration: none;
 
}
 
}
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
−
  .navbar-header {
+
    .navbar-header {
−
    float: left;
+
        float: left;
−
  }
+
    }
 
}
 
}
 
.nav > li > a {
 
.nav > li > a {
−
  position: relative;
+
    position: relative;
−
  display: block;
+
    display: block;
−
  padding: 10px 15px;
+
    padding: 10px 15px;
 
}
 
}
 
.nav {
 
.nav {
−
  padding-left: 0;
+
    padding-left: 0;
−
  margin-bottom: 0;
+
    margin-bottom: 0;
−
  list-style: none;
+
    list-style: none;
 
}
 
}
 
.dropdown-menu > li > a {
 
.dropdown-menu > li > a {
−
  display: block;
+
    display: block;
−
  padding: 3px 20px;
+
    padding: 3px 20px;
−
  clear: both;
+
    clear: both;
−
  font-weight: normal;
+
    font-weight: normal;
−
  line-height: 1.42857143;
+
    line-height: 1.42857143;
−
  color: #333;
+
    color: #333;
−
  white-space: nowrap;
+
    white-space: nowrap;
 
}
 
}
 
.dropup,
 
.dropup,
 
.dropdown {
 
.dropdown {
−
  position: relative;
+
    position: relative;
 
}
 
}
 
.caret {
 
.caret {
−
  display: inline-block;
+
    display: inline-block;
−
  width: 0;
+
    width: 0;
−
  height: 0;
+
    height: 0;
−
  margin-left: 2px;
+
    margin-left: 2px;
−
  vertical-align: middle;
+
    vertical-align: middle;
−
  border-top: 4px dashed;
+
    border-top: 4px dashed;
−
  border-top: 4px solid \9;
+
    border-top: 4px solid \9;
−
  border-right: 4px solid transparent;
+
    border-right: 4px solid transparent;
−
  border-left: 4px solid transparent;
+
    border-left: 4px solid transparent;
 
}
 
}
 
.img-responsive,
 
.img-responsive,
Line 137: Line 143:
 
.carousel-inner > .item > img,
 
.carousel-inner > .item > img,
 
.carousel-inner > .item > a > img {
 
.carousel-inner > .item > a > img {
−
  display: block;
+
    display: block;
−
  max-width: 100%;
+
    max-width: 100%;
−
  height: auto;
+
    height: auto;
 
}
 
}
  
Line 153: Line 159:
  
 
.some-padding {
 
.some-padding {
−
  padding-top: 20px;
+
    padding-top: 20px;
 
}
 
}
  
Line 160: Line 166:
  
 
.navbar-default {
 
.navbar-default {
−
  background-color: white;
+
    background-color: white;
−
  border-color: rgba(255, 255, 255, 0.3);
+
    border-color: rgba(255, 255, 255, 0.3);
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
−
  font-weight: 300;
+
    font-weight: 300;
−
  -webkit-transition: all 0.35s;
+
    -webkit-transition: all 0.35s;
−
  -moz-transition: all 0.35s;
+
    -moz-transition: all 0.35s;
−
  transition: all 0.35s;
+
    transition: all 0.35s;
 
}
 
}
  
 
.navbar-default .navbar-header .navbar-brand {
 
.navbar-default .navbar-header .navbar-brand {
−
  color: #52658F;
+
    color: #52658F;
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
−
  font-weight: bold;
+
    font-weight: bold;
−
  font-size: 22px;
+
    font-size: 22px;
−
  display: inline-block;
+
    display: inline-block;
 
}
 
}
  
Line 180: Line 186:
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:focus {
 
.navbar-default .navbar-header .navbar-brand:focus {
−
  color: #52658F;
+
    color: #52658F;
 
}
 
}
  
 
.navbar-default .navbar-header .navbar-toggle {
 
.navbar-default .navbar-header .navbar-toggle {
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
−
  font-weight: 400;
+
    font-weight: 400;
−
  font-size: 14px;
+
    font-size: 14px;
−
  color: #333A56;
+
    color: #333A56;
−
  text-transform: uppercase;
+
    text-transform: uppercase;
 
}
 
}
  
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a:focus {
 
.navbar-default .nav > li > a:focus {
−
  text-transform: uppercase;
+
    text-transform: uppercase;
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
−
  font-weight: 400;
+
    font-weight: 400;
−
  font-size: 14px;
+
    font-size: 14px;
−
  color: #222222;
+
    color: #222222;
 
}
 
}
  
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:focus:hover {
 
.navbar-default .nav > li > a:focus:hover {
−
  color: #333A56;
+
    color: #333A56;
 
}
 
}
  
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a:focus {
 
.navbar-default .nav > li.active > a:focus {
−
  color: #333A56 !important;
+
    color: #333A56 !important;
−
  background-color: white;
+
    background-color: white;
 
}
 
}
  
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:focus:hover {
 
.navbar-default .nav > li.active > a:focus:hover {
−
  background-color: white;
+
    background-color: white;
 
}
 
}
  
 
.navbar-default .navbar-toggle {
 
.navbar-default .navbar-toggle {
−
  border: none;
+
    border: none;
 
}
 
}
  
 
.navbar-default .dropdown-menu > li > a:hover,
 
.navbar-default .dropdown-menu > li > a:hover,
 
.navbar-default .dropdown-menu > li > a:focus {
 
.navbar-default .dropdown-menu > li > a:focus {
−
  background-color: #F7F5E6;
+
    background-color: #F7F5E6;
−
  color: #333A56;
+
    color: #333A56;
 
}
 
}
  
 
.navbar-default .dropdown-menu {
 
.navbar-default .dropdown-menu {
−
  border: none;
+
    border: none;
−
  outline: none;
+
    outline: none;
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
−
  text-transform: uppercase;
+
    text-transform: uppercase;
−
  font-weight: 400 !important;
+
    font-weight: 400 !important;
−
  font-size: 13.2px !important;
+
    font-size: 13.2px !important;
−
  color: #222222;
+
    color: #222222;
 
}
 
}
  
 
#sitelinks a {
 
#sitelinks a {
−
  display: inline-block;
+
    display: inline-block;
−
  border: 3px solid #fff;
+
    border: 3px solid #fff;
−
  color: #fff;
+
    color: #fff;
−
  padding: 10px 20px;
+
    padding: 10px 20px;
−
  margin: 10px
+
    margin: 10px
 
}
 
}
  
 
#footer {
 
#footer {
−
  background: #333;
+
    background: #333;
−
  text-align: center;
+
    text-align: center;
−
  color: #fff;
+
    color: #fff;
−
  line-height: 50px;
+
    line-height: 50px;
 
}
 
}
  
 
#footer a {
 
#footer a {
−
  color: #fff;
+
    color: #fff;
 
}
 
}
  
  
  
−
   
+
 
 
/*END FROM STYLESHEET*/
 
/*END FROM STYLESHEET*/
  
 
body {
 
body {
−
  background-color: white;
+
    background-color: white;
−
  width: 100%;
+
    width: 100%;
−
  padding-top: 50px;
+
    padding-top: 50px;
 
}
 
}
  
  
 
#bodyContent {
 
#bodyContent {
−
  padding-right: 0px;
+
    padding-right: 0px;
 
}
 
}
  
 
#globalWrapper {
 
#globalWrapper {
−
  font-size: 100%;
+
    font-size: 100%;
−
  padding: 0px;
+
    padding: 0px;
−
  margin: -10px -20px -20px -20px;
+
    margin: -10px -20px -20px -20px;
 
}
 
}
  
 
.navbar-collapse {
 
.navbar-collapse {
−
  padding-left: 0px;
+
    padding-left: 0px;
 
}
 
}
  
 
#banner {
 
#banner {
−
  margin-top: 50px;
+
    margin-top: 50px;
 
}
 
}
  
 
#sideMenu {
 
#sideMenu {
−
  margin-top: 10px;
+
    margin-top: 10px;
 
}
 
}
  
 
.dropdown-menu li:hover .sub-menu {
 
.dropdown-menu li:hover .sub-menu {
−
  visibility: visible;
+
    visibility: visible;
 
}
 
}
  
 
.dropdown:hover .dropdown-menu {
 
.dropdown:hover .dropdown-menu {
−
  display: block;
+
    display: block;
 
}
 
}
  
 
.navbar-nav .dropdown-menu,
 
.navbar-nav .dropdown-menu,
 
.navbar .dropdown-menu {
 
.navbar .dropdown-menu {
−
  margin-top: 0;
+
    margin-top: 0;
 
}
 
}
  
Line 307: Line 313:
  
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 +
  
 
.content_wrapper {
 
.content_wrapper {
−
  width: 85%;
+
    width: 85%%;
−
  margin-left: 150px;
+
    margin-left: 150px;
−
  padding: 0px;
+
    padding: 0px;
−
  float: left;
+
    float: left;
−
  background-color: white;
+
    background-color: #f2f2f2;
 
}
 
}
  
Line 320: Line 327:
  
 
.column {
 
.column {
−
  padding: 10px 0px;
+
    padding: 10px 0px;
−
  float: left;
+
    float: left;
−
  background-color: white;
+
    background-color: white;
 
}
 
}
  
 
.full_size {
 
.full_size {
−
  width: 100%;
+
    width: 100%;
 
}
 
}
  
 
.full_size img {
 
.full_size img {
−
  padding: 10px 15px;
+
    padding: 10px 15px;
−
  width: 96.5%;
+
    width: 96.5%;
 
}
 
}
  
 
.half_size {
 
.half_size {
−
  width: 50%;
+
    width: 50%;
 
}
 
}
  
 
.half_size img {
 
.half_size img {
−
  padding: 10px 15px;
+
    padding: 10px 15px;
−
  width: 93%;
+
    width: 93%;
 
}
 
}
  
 
.img:hover {
 
.img:hover {
−
  opacity: 1.0 !important;
+
    opacity: 1.0 !important;
 
}
 
}
  
Line 356: Line 363:
 
.content_wrapper h1,
 
.content_wrapper h1,
 
.content_wrapper h2 {
 
.content_wrapper h2 {
−
  padding: 5px 15px;
+
    padding: 5px 15px;
−
  border-bottom: 0px;
+
    border-bottom: 0px;
−
  color: #72c9b6;
+
    color: #72c9b6;
 
}
 
}
  
Line 365: Line 372:
 
.content_wrapper h5,
 
.content_wrapper h5,
 
.content_wrapper h6 {
 
.content_wrapper h6 {
−
  padding: 5px 15px;
+
    padding: 5px 15px;
−
  border-bottom: 0px;
+
    border-bottom: 0px;
−
  color: #000000;
+
    color: #000000;
 
}
 
}
  
Line 374: Line 381:
  
 
.content_wrapper p {
 
.content_wrapper p {
−
  padding: 0px 15px;
+
    padding: 0px 15px;
−
  font-size: 13px;
+
    font-size: 13px;
−
  font-family: 'Roboto', sans-serif;
+
    font-family: 'Roboto', sans-serif;
 
}
 
}
  
Line 383: Line 390:
  
 
.content_wrapper a {
 
.content_wrapper a {
−
  font-weight: bold;
+
    font-weight: bold;
−
  text-decoration: underline;
+
    text-decoration: underline;
−
  text-decoration-color: #72c9b6;
+
    text-decoration-color: #72c9b6;
−
  color: #72c9b6;
+
    color: #72c9b6;
−
  -webkit-transition: all 0.4s ease;
+
    -webkit-transition: all 0.4s ease;
−
  -moz-transition: all 0.4s ease;
+
    -moz-transition: all 0.4s ease;
−
  -ms-transition: all 0.4s ease;
+
    -ms-transition: all 0.4s ease;
−
  -o-transition: all 0.4s ease;
+
    -o-transition: all 0.4s ease;
−
  transition: all 0.4s ease;
+
    transition: all 0.4s ease;
 
}
 
}
  
Line 398: Line 405:
  
 
.content_wrapper a:hover {
 
.content_wrapper a:hover {
−
  text-decoration: none;
+
    text-decoration: none;
−
  color: #000000;
+
    color: #000000;
 
}
 
}
  
Line 406: Line 413:
  
 
.content_wrapper ul {
 
.content_wrapper ul {
−
  padding: 0px 20px;
+
    padding: 0px 20px;
−
  font-size: 13px;
+
    font-size: 13px;
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
 
}
 
}
  
Line 415: Line 422:
  
 
.content_wrapper ol {
 
.content_wrapper ol {
−
  padding: 0px;
+
    padding: 0px;
−
  font-size: 13px;
+
    font-size: 13px;
−
  font-family: 'Quicksand', sans-serif;
+
    font-family: 'Quicksand', sans-serif;
 
}
 
}
  
Line 424: Line 431:
  
 
.content_wrapper table {
 
.content_wrapper table {
−
  width: 97%;
+
    width: 97%;
−
  margin: 15px 10px;
+
    margin: 15px 10px;
−
  border: 1px solid #d3d3d3;
+
    border: 1px solid #d3d3d3;
−
  border-collapse: collapse;
+
    border-collapse: collapse;
 
}
 
}
  
Line 434: Line 441:
  
 
.content_wrapper td {
 
.content_wrapper td {
−
  padding: 10px;
+
    padding: 10px;
−
  vertical-align: text-top;
+
    vertical-align: text-top;
−
  border: 1px solid #d3d3d3;
+
    border: 1px solid #d3d3d3;
−
  border-collapse: collapse;
+
    border-collapse: collapse;
 
}
 
}
  
Line 444: Line 451:
  
 
.content_wrapper th {
 
.content_wrapper th {
−
  padding: 10px;
+
    padding: 10px;
−
  vertical-align: text-top;
+
    vertical-align: text-top;
−
  border: 1px solid #d3d3d3;
+
    border: 1px solid #d3d3d3;
−
  border-collapse: collapse;
+
    border-collapse: collapse;
−
  background-color: #f2f2f2;
+
    background-color: #f2f2f2;
 
}
 
}
  
Line 455: Line 462:
  
 
.button_click {
 
.button_click {
−
  margin: 10px auto;
+
    margin: 10px auto;
−
  padding: 15px;
+
    padding: 15px;
−
  width: 12%;
+
    width: 12%;
−
  text-align: center;
+
    text-align: center;
−
  font-weight: bold;
+
    font-weight: bold;
−
  background-color: #72c9b6;
+
    background-color: #72c9b6;
−
  cursor: pointer;
+
    cursor: pointer;
−
  -webkit-transition: all 0.4s ease;
+
    -webkit-transition: all 0.4s ease;
−
  -moz-transition: all 0.4s ease;
+
    -moz-transition: all 0.4s ease;
−
  -ms-transition: all 0.4s ease;
+
    -ms-transition: all 0.4s ease;
−
  -o-transition: all 0.4s ease;
+
    -o-transition: all 0.4s ease;
−
  transition: all 0.4s ease;
+
    transition: all 0.4s ease;
 
}
 
}
  
Line 473: Line 480:
  
 
.button_click:hover {
 
.button_click:hover {
−
  background-color: #000000;
+
    background-color: #000000;
−
  color: #72c9b6;
+
    color: #72c9b6;
 
}
 
}
  
 
.top-pad {
 
.top-pad {
−
  padding: 35px;
+
    padding: 35px;
 
}
 
}
  
−
   
+
 
−
   
+
 
−
   
+
 
 
/* NEW STUFF FROM CURRENT PAGE
 
/* NEW STUFF FROM CURRENT PAGE
−
   
+
 
 
/* column stuff */
 
/* column stuff */
 
.column {
 
.column {
−
float: left;
+
    float: left;
−
padding: 1px;
+
    padding: 1px;
 
}
 
}
  
 
/* side columns */
 
/* side columns */
 
.column.side {
 
.column.side {
−
width: 20%;
+
    width: 20%;
 +
}
 +
/* side columns */
 +
.column.side.left {
 +
    width: 20%;
 +
}
 +
 
 +
.column.side.right {
 +
    width: 20%;
 
}
 
}
  
 
/* main content */
 
/* main content */
 
.column.middle {
 
.column.middle {
−
Width: 60%;
+
    Width: 60%;
−
min-height: 850px;
+
    min-height: 850px;
  
−
/* change the background image of the main column */
+
    /* change the background image of the main column */
−
background-size: contain;
+
    background-size: contain;
−
background-position: center;
+
    background-position: center;
−
background-repeat: no-repeat;
+
    background-repeat: no-repeat;
 
}
 
}
  
Line 526: Line 541:
 
/*ROTATING SCRIPT */
 
/*ROTATING SCRIPT */
 
.rotate {
 
.rotate {
−
     -webkit-animation: spin .8s infinite linear;
+
     -webkit-animation: spin 0.8s infinite linear;
 
     animation: spin 20s infinite linear;
 
     animation: spin 20s infinite linear;
 
}
 
}

Latest revision as of 06:08, 2 October 2018

  1. content {
   width: 100vw;
   margin: 0;
   margin-left: auto !important;
   margin-right: auto !important;
   padding: 0;

} /* Clear the default wiki settings */

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

body {background-color: #f2f2f2; }

  1. 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;

}

  1. sitelinks a {
   display: inline-block;
   border: 3px solid #fff;
   color: #fff;
   padding: 10px 20px;
   margin: 10px

}

  1. footer {
   background: #333;
   text-align: center;
   color: #fff;
   line-height: 50px;

}

  1. footer a {
   color: #fff;

}



/*END FROM STYLESHEET*/

body { 

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

}


  1. bodyContent {
   padding-right: 0px;

}

  1. globalWrapper {
   font-size: 100%;
   padding: 0px;
   margin: -10px -20px -20px -20px;

}

.navbar-collapse { 

   padding-left: 0px;

}

  1. banner {
   margin-top: 50px;

}

  1. 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 0.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);
   }

}