Line 129: | Line 129: | ||
max-width: 50px; | max-width: 50px; | ||
margin-top: 25px; | margin-top: 25px; | ||
− | margin-bottom: | + | margin-bottom: 0px; |
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
Line 152: | Line 152: | ||
.container { | .container { | ||
− | margin-top: | + | margin-top:0px; |
} | } | ||
Revision as of 20:54, 28 August 2017
/* Default Font and Sizing of Website */
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
nav ul {
position: static; display: flex; float: right; margin: 0px; margin-top:0px; padding: 0px 0px; justify-content:space-around;
}
/*Create vertical spacing*/ li { margin-bottom: 1px; } /*Make all menu links full width*/ ul li, li a { width: 100%; }
}
/* 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;
}
.content { margin-top:0px; }
.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: 'Karla', sans-serif; padding-top: 40px; margin-bottom: 0px;
}
.indent {
text-indent: 50px;
}
hr {
border-color: #333A56; border-width: 3px; max-width: 50px; margin-top: 25px; margin-bottom: 0px; margin-left: auto; margin-right: auto;
}
hr.light {
border-color: white;
}
hr.grey {
border-color: #E8E8E8;
}
hr.blue {
border-color: #333A56;
}
html {
padding-bottom: 0px;
}
.container {
margin-top:0px;
}
/* Navbar */
.some-padding {
padding-top: 0px;
}
/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar BACKGROUND*/
.navbar-default {
background-color: #black; 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; margin : 0 !important;
}
/*NavBar UNOTT Information*/
.navbar-default .navbar-header .navbar-brand {
color: #white; font-family: 'Karla', sans-serif; font-weight: none; font-size: 22px; display: inline-block; background: black
}
/*Changes colour of the iGEM logo in the navbar.*/
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus {
color: #white;
}
.navbar-default .navbar-header .navbar-toggle {
font-family: 'Karla', sans-serif; font-weight: 400; bold; font-size: 14px; color: #white; text-transform: uppercase;
}
/* FONT */ .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus {
text-transform: uppercase; font-family: 'Karla', sans-serif; font-weight: bold; font-size: 14px; color: #white;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover {
color: #white;
}
/*Navbar background colour*/
.navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus {
color: #CF5435 !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: #CDD7B6; color: #blue;
}
.navbar-default .dropdown-menu {
border: none; outline: none; font-family: 'Karla', sans-serif; text-transform: uppercase; font-weight: bold; font-size: 14.2px !important; color: #CF5435;
}
- 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;
}
.btn-default {
color: #222222; background-color: #F7F5E6!important; border-color: white; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
color: #222222; background-color: #E8E8E8 !important; border-color: #ededed !important;
}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {
background-color: white; border-color: white;
}
.btn-default .badge {
color: white; background-color: #222222;
}
.btn-primary {
color: white !important; background-color: #52658F !important; border-color: #333A56 !important; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
color: white !important; background-color: #333A56 !important; border-color: #52658F !important;
}
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
background-color: #333A56; border-color: #333A56;
}
.btn-primary .badge {
color: #333A56; background-color: white;
}
.btn {
font-family: 'Quicksand', sans-serif; border: none; border-radius: 300px; font-weight: 400; font-size: 15px !important; text-transform: uppercase;
}
.btn-xl {
padding: 15px 30px;
}
- -moz-selection {
color: white; text-shadow: none; background: #222222;
}
- 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;
}
/* TIMELINE */
img {
max-width: 100%;
}
h1, h2 {
font-family: "Open Sans", sans-serif; font-weight: bold;
}
/* -------------------------------- Modules - reusable parts of our design -------------------------------- */
.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; }
}