/* Default Font and Sizing of Website */
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/ nav ul { position: static; display: none; float:left; margin: 0px; margin-top:0px; padding: 0px 0px;
}
/*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;
}
.content {margin-top: -20px;} .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;
}
/* Cover Image */
- banner {
position: relative; z-index: 0; background: url(); /*background-position: 10px -200px;*/ background-color: #F7F5E6; background-size: contain; background-repeat: no-repeat;
}
- GRObanner {
position: relative; z-index: 0; background: url(); background-position: 0px -200px; background-color: #aaa; background-size: cover; background-repeat: no-repeat;
}
- integratedbanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- outreachbanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- modelbanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- safetybanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- Protobanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- Proofbanner {
position: relative; z-index: 0; background: url();
background-position: 200px 70px;
background-size: contain; background-repeat: no-repeat;
}
- humanbanner {
position: relative; z-index: 0; background: url(); background-size: cover; background-repeat: no-repeat;
}
- brainbanner {
position: relative; z-index: 0; background: url(); background-size: contain;
background-position: 200px 40px;
background-repeat: no-repeat;
}
- collabbanner {
position: relative; z-index: 0;
background-position: 0px -160px;
background: url();
background-position: 200px 70px;
background-size: contain; background-repeat: no-repeat;
}
- attribbanner {
position: relative; z-index: 0; background: url(); background-position: 200px 70px; background-size: contain; background-repeat: no-repeat;
}
- bannercontent:not(center) {
height: 75%; padding-top: 25%; padding-left: 20px; padding-right: 20px; padding-bottom: 25%; box-sizing: border-box; margin: auto;
}
.container, .container-fluid {
color-background: #F7F5E6; color: black;
}
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #52658F;
}
.carousel-inner img {
width: 100%; max-height: 600px
}
.Image-inner img {
width: 90%; max-height: 400px
}
.carousel-control {
width: 0;
}
.carousel-control.left, .carousel-control.right {
opacity: .7; color: #52658F; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none;
}
.carousel-control.left span {
padding: 30px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .fa-arrow-left, .carousel-control .fa-arrow-right, .carousel-control .icon-prev, .carousel-control .icon-next {
position: absolute; top: 50%; z-index: 5; display: inline-block;
}
.carousel-control .fa-arrow-left, .carousel-control .icon-prev {
left: 0;
}
.carousel-control .fa-arrow-right, .carousel-control .icon-next {
right: 0;
}
.carousel-control.left span, .carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover, .carousel-control.right span:hover {
opacity: 1; filter: alpha(opacity=70);
}
/* 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: transparent; 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: #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;
}
.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; }
}
- cd-timeline {
position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em;
}
- cd-timeline::before {
/* this is the vertical line */ content: ; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; }
}
.cd-timeline-block {
position: relative; margin: 2em 0;
}
.cd-timeline-block:after {
content: ""; display: table; clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; }
}
.cd-timeline-img {
position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block; width: 24px; height: 24px; position: relative; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;
}
.cd-timeline-img.cd-picture {
background: #75ce66;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; }
}
@-webkit-keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes cd-bounce-1 {
0% { opacity: 0; -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); }
}
@keyframes cd-bounce-1 {
0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
.cd-timeline-content {
position: relative; margin-left: 60px; background: white; border-radius: 0.25em; padding: 1em; box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: ""; display: table; clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px; font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0; line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left; padding: .8em 0; opacity: .7;
}
.cd-timeline-content::before {
content: ; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 { font-size: 20px; font-size: 1.25rem; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; }
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: white; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .cssanimations .cd-timeline-content.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-content.bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; -moz-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; }
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */ .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; -moz-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; }
}
@-webkit-keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); } 100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes cd-bounce-2 {
0% { opacity: 0; -moz-transform: translateX(-100px); } 60% { opacity: 1; -moz-transform: translateX(20px); } 100% { -moz-transform: translateX(0); }
}
@keyframes cd-bounce-2 {
0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes cd-bounce-2-inverse {
0% { opacity: 0; -moz-transform: translateX(100px); } 60% { opacity: 1; -moz-transform: translateX(-20px); } 100% { -moz-transform: translateX(0); }
}
@keyframes cd-bounce-2-inverse {
0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
.timeline {
background-color: rgb(82, 101, 143);
}
.animated {
-webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s;
}
@-webkit-keyframes bounceIn {
0% { opacity: 0; -webkit-transform: scale(0.8); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes bounceIn {
0% { opacity: 0; -moz-transform: scale(0.8); } 50% { opacity: 1; -moz-transform: scale(1.05); } 100% { opacity: 1; -moz-transform: scale(1); }
}
@-o-keyframes bounceIn {
0% { opacity: 0; -o-transform: scale(0.8); } 50% { opacity: 1; -o-transform: scale(1.05); } 100% { opacity: 1; -o-transform: scale(1); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); }
}
.bounceIn {
-webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn;
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 1; }
}
.delay {
-webkit-animation-delay: 0.30s; -moz-animation-delay: 0.30s; -o-animation-delay: 0.30s; animation-delay: 0.30s;
}
.delay-three {
-webkit-animation-delay: 0.60s; -moz-animation-delay: 0.60s; -o-animation-delay: 0.60s; animation-delay: 0.60s;
}
.delay-two {
-webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s;
}
.delay-one {
-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s;
}
.fadeIn {
-webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInUp {
0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInUp {
0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); }
}
@keyframes fadeInUp {
0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); }
}
.fadeInUp {
-webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInDown {
0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInDown {
0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); }
}
.fadeInDown {
-webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes fadeInLeft {
0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); }
}
@-o-keyframes fadeInLeft {
0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); }
}
@keyframes fadeInLeft {
0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); }
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft;
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); }
}
@-moz-keyframes fadeOutLeft {
0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); }
}
@-o-keyframes fadeOutLeft {
0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); }
}
@keyframes fadeOutLeft {
0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); }
}
@-webkit-keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
}
@-o-keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fadeOut {
0% { opacity: 1; } 100% { opacity: 0; }
}
.animated.fadeOut {
-webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut;
}
.animated.fadeOutLeft {
-webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft;
}
/********************************* 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; }
}