Line 1: | Line 1: | ||
− | /* | + | /* Default Font and Sizing of Website */ |
@media screen and (max-width: 760px) { | @media screen and (max-width: 760px) { | ||
Line 29: | Line 29: | ||
+ | /* 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 { | a:visited { | ||
Line 39: | Line 49: | ||
} | } | ||
+ | .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 { | .red { | ||
Line 80: | Line 114: | ||
body { | body { | ||
font-family: 'Karla', sans-serif; | font-family: 'Karla', sans-serif; | ||
− | padding-top: | + | padding-top: 40px; |
min-height: 400px; | min-height: 400px; | ||
− | margin-bottom: | + | margin-bottom: 100px; |
} | } | ||
+ | .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; | ||
+ | } | ||
html { | html { | ||
Line 285: | Line 344: | ||
line-height: 1.5; | line-height: 1.5; | ||
margin-bottom: 20px; | 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; | ||
+ | } | ||
} | } |
Revision as of 12:06, 25 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:50px; }
.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; min-height: 400px; margin-bottom: 100px;
}
.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;
}
html {
padding-bottom: 97px;
}
.container {
margin-top:10px;
}
/* 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; }
}