Difference between revisions of "Team:UNOTT/CSS"

(Created page with "<h1>UNOTT iGEM CSS Page </h1>")
 
Line 1: Line 1:
 
<h1>UNOTT iGEM CSS Page </h1>
 
<h1>UNOTT iGEM CSS Page </h1>
 +
 +
/* Default Font and Sizing of Website */
 +
 +
@media screen and (max-width: 760px) {
 +
  /*Make dropdown links appear inline*/
 +
  ul {
 +
    position: static;
 +
    display: none;
 +
    float:left;
 +
    margin: 0; auto;
 +
}
 +
  /*Create vertical spacing*/
 +
  li {
 +
    margin-bottom: 1px;
 +
  }
 +
  /*Make all menu links full width*/
 +
  ul li,
 +
  li a {
 +
    width: 100%;
 +
  }
 +
}
 +
 +
html,
 +
body {
 +
  height: 98%;
 +
}
 +
 +
 +
/* Visiting Links */
 +
 +
a,
 +
a:hover {
 +
  color: #52658F;
 +
  text-decoration: none;
 +
  -webkit-transition: all .5s ease;
 +
  -moz-transition: all .5s ease;
 +
  -o-transition: all .5s ease;
 +
  transition: all .5s ease-in-out;
 +
}
 +
 +
a:visited {
 +
  color: #333A56;
 +
}
 +
 +
.col-centered {
 +
  float: none;
 +
  margin: 0 auto;
 +
}
 +
 +
.backTop {
 +
  height: 40px;
 +
  width: 40px;
 +
  position: fixed;
 +
  bottom: 10px;
 +
  right: 5px;
 +
  z-index: 1000;
 +
  cursor: pointer;
 +
  -webkit-transition: all ease 0.4s;
 +
  -moz-transition: all ease 0.4s;
 +
  -ms-transition: all ease 0.4s;
 +
  -o-transition: all ease 0.4s;
 +
  transition: all ease 0.4s;
 +
}
 +
 +
.backTop:hover {
 +
  -webkit-transform: rotate(180deg);
 +
  -moz-transform: rotate(180deg);
 +
  -ms-transform: rotate(180deg);
 +
  -o-transform: rotate(180deg);
 +
  transform: rotate(180deg);
 +
}
 +
 +
.red {
 +
  color: #EA3923;
 +
}
 +
 +
.blue {
 +
  color: #0C68E6;
 +
}
 +
 +
.darkblue {
 +
  color: #52658F;
 +
}
 +
 +
.yellow {
 +
  color: #FFDF1E;
 +
}
 +
 +
.green {
 +
  color: #32BE01;
 +
}
 +
 +
.cream {
 +
  color: #F7F5E6;
 +
}
 +
 +
.grey {
 +
  color: #E8E8E8;
 +
}
 +
 +
.darkgrey {
 +
  color: #8C8C8C;
 +
}
 +
 +
 +
/* Body */
 +
 +
body {
 +
  font-family: 'Roboto', sans-serif;
 +
}
 +
 +
.indent {
 +
  text-indent: 50px;
 +
}
 +
 +
hr {
 +
  border-color: #333A56;
 +
  border-width: 3px;
 +
  max-width: 50px;
 +
  margin-top: 25px;
 +
  margin-bottom: 25px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 +
hr.light {
 +
  border-color: white;
 +
}
 +
 +
hr.grey {
 +
  border-color: #E8E8E8;
 +
}
 +
 +
hr.blue {
 +
  border-color: #333A56;
 +
}
 +
 +
/* Navbar */
 +
 +
.some-padding {
 +
  padding-top: 20px;
 +
}
 +
 +
 +
/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/
 +
 +
.navbar-default {
 +
  background-color: white;
 +
  border-color: rgba(255, 255, 255, 0.3);
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: 300;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
 +
 +
 +
/*NavBar UNOTT Information*/
 +
 +
.navbar-default .navbar-header .navbar-brand {
 +
  color: #52658F;
 +
  font-family: 'Helvetica', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 22px;
 +
  display: inline-block;
 +
}
 +
 +
 +
/*Changes colour of the iGEM logo in the navbar.*/
 +
 +
.navbar-default .navbar-header .navbar-brand:hover,
 +
.navbar-default .navbar-header .navbar-brand:focus {
 +
  color: #52658F;
 +
}
 +
 +
.navbar-default .navbar-header .navbar-toggle {
 +
  font-family: 'Helvetica', sans-serif;
 +
  font-weight: 400; bold;
 +
  font-size: 14px;
 +
  color: #333A56;
 +
  text-transform: uppercase;
 +
}
 +
 +
/* Navbar font */
 +
.navbar-default .nav > li > a,
 +
.navbar-default .nav > li > a:focus {
 +
  text-transform: uppercase;
 +
  font-family: 'Helvetica', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 14px;
 +
  color: #959595;
 +
}
 +
 +
.navbar-default .nav > li > a:hover,
 +
.navbar-default .nav > li > a:focus:hover {
 +
  color: #333A56;
 +
}
 +
 +
/*Navbar background colour*/
 +
 +
.navbar-default .nav > li.active > a,
 +
.navbar-default .nav > li.active > a:focus {
 +
  color: #333A56 !important;
 +
  background-color: black;
 +
}
 +
 +
.navbar-default .nav > li.active > a:hover,
 +
.navbar-default .nav > li.active > a:focus:hover {
 +
  background-color: black;
 +
  border-left-color: black; border-top-color: black;
 +
}
 +
 +
.navbar-default .navbar-toggle {
 +
  border: none;
 +
}
 +
/*dropdown menu colours*/
 +
.navbar-default .dropdown-menu > li > a:hover,
 +
.navbar-default .dropdown-menu > li > a:focus {
 +
  background-color: #white;
 +
  color: #2eacdd;
 +
}
 +
 +
.navbar-default .dropdown-menu {
 +
  border: none;
 +
  outline: none;
 +
  font-family: 'Helvetica', sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: bold;
 +
  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;
 +
}
 +
 +
 +
/* Titles and text */
 +
 +
specialh1 {
 +
  font-size: 100px;
 +
  font-weight: 400;
 +
  font-family: 'Quicksand', sans-serif;
 +
  text-align: center;
 +
  color: #333A56;
 +
  letter-spacing: 3px;
 +
  border-bottom: none;
 +
}
 +
 +
specialh2 {
 +
  font-size: 40px;
 +
  font-weight: 400;
 +
  font-family: 'Quicksand', sans-serif;
 +
  text-align: center;
 +
  color: #333A56;
 +
  border-bottom: none;
 +
  text-transform: uppercase;
 +
}
 +
 +
specialh3 {
 +
  font-size: 30px;
 +
  font-weight: 400;
 +
  font-family: 'Quicksand', sans-serif;
 +
  text-align: center;
 +
  color: #52658F;
 +
  border-bottom: none;
 +
}
 +
 +
specialh4 {
 +
  font-size: 22px;
 +
  font-weight: 400;
 +
  font-family: 'Quicksand', sans-serif;
 +
  text-align: center;
 +
  color: #52658F;
 +
  border-bottom: none;
 +
}
 +
 +
h1 {
 +
  font-family: 'Quicksand', sans-serif !important;
 +
  font-size: 50px !important;
 +
}
 +
 +
h2 {
 +
  font-family: 'Quicksand', sans-serif !important;
 +
  font-size: 40px !important;
 +
}
 +
 +
h3 {
 +
  font-family: 'Quicksand', sans-serif !important;
 +
  font-size: 35px !important;
 +
}
 +
 +
h4 {
 +
  font-family: 'Quicksand', sans-serif !important;
 +
  font-size: 30px !important;
 +
}
 +
 +
p {
 +
  font-family: 'Roboto', sans-serif !important;
 +
  ;
 +
  font-weight: 400 !important;
 +
  ;
 +
  font-size: 18px !important;
 +
  line-height: 1.5;
 +
  margin-bottom: 20px;
 +
}
 +
 +
.bg-primary {
 +
  background-color: #F7F5E6;
 +
  color: black;
 +
}
 +
 +
.bg-dark {
 +
  background-color: #333A56;
 +
}
 +
 +
.bg-danger {
 +
  background-color: #52658F;
 +
}
 +
 +
.text-faded {
 +
  color: rgba(255, 255, 255, 0.7);
 +
}
 +
 +
.text-dark {
 +
  color: rgba(38, 12, 12, 0.8);
 +
}
 +
 +
section {
 +
  padding: 100px 0;
 +
}
 +
 +
aside {
 +
  padding: 50px 0;
 +
}
 +
 +
.no-padding {
 +
  padding: 0;
 +
}
 +
 +
.section-heading {
 +
  margin-top: 0;
 +
}
 +
 +
.service-box {
 +
  max-width: 400px;
 +
  margin: 50px auto 0;
 +
}
 +
 +
.call-to-action h2 {
 +
  margin: 0 auto 20px;
 +
}
 +
 +
.text-primary {
 +
  color: #333A56;
 +
}
 +
 +
.no-gutter > [class*='col-'] {
 +
  padding-right: 0;
 +
  padding-left: 0;
 +
}
 +
 +
.
 +
::selection {
 +
  color: white;
 +
  text-shadow: none;
 +
  background: #222222;
 +
}
 +
 +
img::selection {
 +
  color: white;
 +
  background: transparent;
 +
}
 +
 +
img::-moz-selection {
 +
  color: white;
 +
  background: transparent;
 +
}
 +
 +
body {
 +
  webkit-tap-highlight-color: #222222;
 +
}
 +
 +
 +
 +
.cd-container {
 +
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 +
  width: 90%;
 +
  max-width: 1170px;
 +
  margin: 0 auto;
 +
}
 +
 +
.cd-container::after {
 +
  /* clearfix */
 +
  content: '';
 +
  display: table;
 +
  clear: both;
 +
}
 +
 +
 +
/* -------------------------------- Main components -------------------------------- */
 +
 +
header {
 +
  height: 200px;
 +
  line-height: 200px;
 +
  text-align: center;
 +
  background: #303e49;
 +
}
 +
 +
header h1 {
 +
  color: white;
 +
  font-size: 18px;
 +
  font-size: 1.125rem;
 +
}
 +
 +
@media only screen and (min-width: 1170px) {
 +
  header {
 +
    height: 300px;
 +
    line-height: 300px;
 +
  }
 +
  header h1 {
 +
    font-size: 24px;
 +
    font-size: 1.5rem;
 +
  }
 +
 +
 +
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
#sideMenu,
 +
#top_title {
 +
  display: none;
 +
}
 +
 +
#content {
 +
  padding: 0px;
 +
  width: 100%;
 +
}
 +
 +
body {
 +
  background-color: white;
 +
  width: 100%;
 +
}
 +
 +
#bodyContent h1,
 +
#bodyContent h2,
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
  margin-bottom: 0px;
 +
}
 +
 +
#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: white;
 +
}
 +
 +
 +
/*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;
 +
}
 +
 +
.clear {
 +
  clear: both;
 +
}
 +
 +
.highlight {
 +
  width: 90%;
 +
  margin: auto;
 +
  padding: 15px 5px;
 +
  background-color: #f2f2f2;
 +
}
 +
 +
.judges-will-not-evaluate {
 +
  border: 4px solid #72c9b6;
 +
  display: block;
 +
  margin: 5px 15px;
 +
  width: 95%;
 +
  font-weight: bold;
 +
}
 +
 +
 +
/*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: 'Karla', 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: 'Karla', sans-serif;
 +
}
 +
 +
 +
/* numbered lists */
 +
 +
.content_wrapper ol {
 +
  padding: 0px;
 +
  font-size: 13px;
 +
  font-family: 'Karla', 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;
 +
}
 +
 +
 +
/********************************* RESPONSIVE STYLING ********************************/
 +
 +
 +
/* IF THE SCREEN IS LESS THAN 1000PX */
 +
 +
@media only screen and (max-width: 1000px) {
 +
  #content {
 +
    width: 100%;
 +
  }
 +
  .menu_wrapper {
 +
    width: 15%;
 +
  }
 +
  .content_wrapper {
 +
    margin-left: 15%;
 +
  }
 +
  .menu_item {
 +
    display: block;
 +
  }
 +
  .icon {
 +
    display: none;
 +
  }
 +
  .highlight {
 +
    padding: 10px 0px;
 +
  }
 +
}
 +
 +
 +
/* IF THE SCREEN IS LESS THAN 680PX */
 +
 +
@media only screen and (max-width: 680px) {
 +
  .collapsable_menu_control {
 +
    display: block;
 +
  }
 +
  .menu_item {
 +
    display: none;
 +
  }
 +
  .menu_wrapper {
 +
    width: 100%;
 +
    height: 15%;
 +
    position: relative;
 +
  }
 +
  .content_wrapper {
 +
    width: 100%;
 +
    margin-left: 0px;
 +
  }
 +
  .column.half_size {
 +
    width: 100%;
 +
  }
 +
  .column img {
 +
    width: 100%;
 +
    padding: 5px 0px;
 +
  }
 +
  .icon {
 +
    display: block;
 +
  }
 +
  .highlight {
 +
    padding: 15px 5px;
 +
  }
 +
}

Revision as of 12:50, 14 July 2017

UNOTT iGEM CSS Page

/* Default Font and Sizing of Website */

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

 /*Make dropdown links appear inline*/
 ul {
   position: static;
   display: none;
   float:left;
   margin: 0; auto;

} 

 /*Create vertical spacing*/
 li {
   margin-bottom: 1px;
 }
 /*Make all menu links full width*/
 ul li,
 li a {
   width: 100%;
 }

}

html, body { 

 height: 98%;

}


/* Visiting Links */

a, a:hover { 

 color: #52658F;
 text-decoration: none;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease-in-out;

}

a:visited { 

 color: #333A56;

}

.col-centered { 

 float: none;
 margin: 0 auto;

}

.backTop { 

 height: 40px;
 width: 40px;
 position: fixed;
 bottom: 10px;
 right: 5px;
 z-index: 1000;
 cursor: pointer;
 -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;

}

.backTop:hover { 

 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

.red { 

 color: #EA3923;

}

.blue { 

 color: #0C68E6;

}

.darkblue { 

 color: #52658F;

}

.yellow { 

 color: #FFDF1E;

}

.green { 

 color: #32BE01;

}

.cream { 

 color: #F7F5E6;

}

.grey { 

 color: #E8E8E8;

}

.darkgrey { 

 color: #8C8C8C;

}


/* Body */

body { 

 font-family: 'Roboto', sans-serif;

}

.indent { 

 text-indent: 50px;

}

hr { 

 border-color: #333A56;
 border-width: 3px;
 max-width: 50px;
 margin-top: 25px;
 margin-bottom: 25px;
 margin-left: auto;
 margin-right: auto;

}

hr.light { 

 border-color: white;

}

hr.grey { 

 border-color: #E8E8E8;

}

hr.blue { 

 border-color: #333A56;

}

/* Navbar */

.some-padding { 

 padding-top: 20px;

}


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

.navbar-default { 

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

}


/*NavBar UNOTT Information*/

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

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

}


/*Changes colour of the iGEM logo in the navbar.*/

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

 color: #52658F;

}

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

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

}

/* Navbar font */ .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { 

 text-transform: uppercase;
 font-family: 'Helvetica', sans-serif;
 font-weight: bold;
 font-size: 14px;
 color: #959595;

}

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

 color: #333A56;

}

/*Navbar background colour*/

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

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

}

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

 background-color: black;
 border-left-color: black; border-top-color: black;

}

.navbar-default .navbar-toggle { 

 border: none;

} /*dropdown menu colours*/ .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus { 

 background-color: #white;
 color: #2eacdd;

}

.navbar-default .dropdown-menu { 

 border: none;
 outline: none;
 font-family: 'Helvetica', sans-serif;
 text-transform: uppercase;
 font-weight: bold;
 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;

}


/* Titles and text */

specialh1 { 

 font-size: 100px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 letter-spacing: 3px;
 border-bottom: none;

}

specialh2 { 

 font-size: 40px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #333A56;
 border-bottom: none;
 text-transform: uppercase;

}

specialh3 { 

 font-size: 30px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

specialh4 { 

 font-size: 22px;
 font-weight: 400;
 font-family: 'Quicksand', sans-serif;
 text-align: center;
 color: #52658F;
 border-bottom: none;

}

h1 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 50px !important;

}

h2 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 40px !important;

}

h3 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 35px !important;

}

h4 { 

 font-family: 'Quicksand', sans-serif !important;
 font-size: 30px !important;

}

p { 

 font-family: 'Roboto', sans-serif !important;
 ;
 font-weight: 400 !important;
 ;
 font-size: 18px !important;
 line-height: 1.5;
 margin-bottom: 20px;

}

.bg-primary { 

 background-color: #F7F5E6;
 color: black;

}

.bg-dark { 

 background-color: #333A56;

}

.bg-danger { 

 background-color: #52658F;

}

.text-faded { 

 color: rgba(255, 255, 255, 0.7);

}

.text-dark { 

 color: rgba(38, 12, 12, 0.8);

}

section { 

 padding: 100px 0;

}

aside { 

 padding: 50px 0;

}

.no-padding { 

 padding: 0;

}

.section-heading { 

 margin-top: 0;

}

.service-box { 

 max-width: 400px;
 margin: 50px auto 0;

}

.call-to-action h2 { 

 margin: 0 auto 20px;

}

.text-primary { 

 color: #333A56;

}

.no-gutter > [class*='col-'] { 

 padding-right: 0;
 padding-left: 0;

}

.

selection {
 color: white;
 text-shadow: none;
 background: #222222;

}

img::selection { 

 color: white;
 background: transparent;

}

img::-moz-selection { 

 color: white;
 background: transparent;

}

body { 

 webkit-tap-highlight-color: #222222;

}


.cd-container { 

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 width: 90%;
 max-width: 1170px;
 margin: 0 auto;

}

.cd-container::after { 

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}


/* -------------------------------- Main components -------------------------------- */

header { 

 height: 200px;
 line-height: 200px;
 text-align: center;
 background: #303e49;

}

header h1 { 

 color: white;
 font-size: 18px;
 font-size: 1.125rem;

}

@media only screen and (min-width: 1170px) { 

 header {
   height: 300px;
   line-height: 300px;
 }
 header h1 {
   font-size: 24px;
   font-size: 1.5rem;
 }


/********************************* DEFAULT WIKI SETTINGS ********************************/

  1. sideMenu,
  2. top_title {
 display: none;

}

  1. content {
 padding: 0px;
 width: 100%;

}

body { 

 background-color: white;
 width: 100%;

}

  1. bodyContent h1,
  2. bodyContent h2,
  3. bodyContent h3,
  4. bodyContent h4,
  5. bodyContent h5 {
 margin-bottom: 0px;

}

  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: white;

}


/*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;

}

.clear { 

 clear: both;

}

.highlight { 

 width: 90%;
 margin: auto;
 padding: 15px 5px;
 background-color: #f2f2f2;

}

.judges-will-not-evaluate { 

 border: 4px solid #72c9b6;
 display: block;
 margin: 5px 15px;
 width: 95%;
 font-weight: bold;

}


/*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: 'Karla', 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: 'Karla', sans-serif;

}


/* numbered lists */

.content_wrapper ol { 

 padding: 0px;
 font-size: 13px;
 font-family: 'Karla', 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;

}


/********************************* RESPONSIVE STYLING ********************************/


/* IF THE SCREEN IS LESS THAN 1000PX */

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

 #content {
   width: 100%;
 }
 .menu_wrapper {
   width: 15%;
 }
 .content_wrapper {
   margin-left: 15%;
 }
 .menu_item {
   display: block;
 }
 .icon {
   display: none;
 }
 .highlight {
   padding: 10px 0px;
 }

}


/* IF THE SCREEN IS LESS THAN 680PX */

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

 .collapsable_menu_control {
   display: block;
 }
 .menu_item {
   display: none;
 }
 .menu_wrapper {
   width: 100%;
   height: 15%;
   position: relative;
 }
 .content_wrapper {
   width: 100%;
   margin-left: 0px;
 }
 .column.half_size {
   width: 100%;
 }
 .column img {
   width: 100%;
   padding: 5px 0px;
 }
 .icon {
   display: block;
 }
 .highlight {
   padding: 15px 5px;
 }

}