Difference between revisions of "Team:TUDelft/css/custom/test2"
Schmidtchen (Talk | contribs) |
Schmidtchen (Talk | contribs) |
||
| (13 intermediate revisions by 2 users not shown) | |||
| Line 33: | Line 33: | ||
font-weight: 300; | font-weight: 300; | ||
} | } | ||
| + | |||
| Line 82: | Line 83: | ||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", | ||
sans-serif; | sans-serif; | ||
| − | |||
} | } | ||
| + | ul.nav-pills li.open { | ||
| + | z-index: 1000; | ||
| + | } | ||
| + | |||
@media (max-width: 1200px) { | @media (max-width: 1200px) { | ||
| Line 193: | Line 197: | ||
background-color: #E2E8E4; | background-color: #E2E8E4; | ||
} | } | ||
| − | + | .nav-pills | |
div.col-sm-9 div { | div.col-sm-9 div { | ||
| Line 394: | Line 398: | ||
} | } | ||
| − | |||
| − | |||
| Line 474: | Line 476: | ||
background:#F8F8F8 !important; | background:#F8F8F8 !important; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| Line 515: | Line 514: | ||
} | } | ||
| − | |||
| − | |||
| − | |||
.nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{ | .nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{ | ||
background: none !important; | background: none !important; | ||
| Line 572: | Line 568: | ||
text-align: left !important; | text-align: left !important; | ||
color: #0092CB !important; | color: #0092CB !important; | ||
| + | background:#F8F8F8 !important; | ||
| + | padding: 15px; | ||
| + | } | ||
| + | |||
| + | .tableheaderjnnbl { | ||
| + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; | ||
| + | font-size: 18px !important; | ||
| + | text-align: left !important; | ||
| + | color: #00B4C7 !important; | ||
| + | background:#F8F8F8 !important; | ||
| + | padding: 15px; | ||
| + | } | ||
| + | |||
| + | .tableunevenjnnbl { | ||
| + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; | ||
| + | font-size: 18px !important; | ||
| + | text-align: left !important; | ||
| + | color: #00B4C7 !important; | ||
| + | background:#FFFFFF !important; | ||
| + | padding: 15px; | ||
| + | } | ||
| + | |||
| + | .tableevenjnnbl { | ||
| + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; | ||
| + | font-size: 18px !important; | ||
| + | text-align: left !important; | ||
| + | color: #00B4C7 !important; | ||
background:#F8F8F8 !important; | background:#F8F8F8 !important; | ||
padding: 15px; | padding: 15px; | ||
| Line 1,010: | Line 1,033: | ||
ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl { | ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl { | ||
list-style: none; | list-style: none; | ||
| + | font-size: 18px; | ||
} | } | ||
ul.uladpbl li::before { | ul.uladpbl li::before { | ||
content: "\2022"; color: #0092CB; | content: "\2022"; color: #0092CB; | ||
display: inline-block; width: 1em; | display: inline-block; width: 1em; | ||
| − | margin-left: -1em | + | margin-left: -1em; |
} | } | ||
ul.ulorngcrl li::before { | ul.ulorngcrl li::before { | ||
content: "\2022"; color: #FFCCBB; | content: "\2022"; color: #FFCCBB; | ||
display: inline-block; width: 1em; | display: inline-block; width: 1em; | ||
| − | margin-left: -1em | + | margin-left: -1em; |
} | } | ||
ul.uljnnbl li::before { | ul.uljnnbl li::before { | ||
content: "\2022"; color: #00B4C7; | content: "\2022"; color: #00B4C7; | ||
display: inline-block; width: 1em; | display: inline-block; width: 1em; | ||
| − | margin-left: -1em | + | margin-left: -1em; |
} | } | ||
ul.ulgrnbl li::before { | ul.ulgrnbl li::before { | ||
content: "\2022"; color: #006C84; | content: "\2022"; color: #006C84; | ||
display: inline-block; width: 1em; | display: inline-block; width: 1em; | ||
| − | margin-left: -1em | + | margin-left: -1em; |
} | } | ||
| Line 1,048: | Line 1,072: | ||
margin-top: -20px; | margin-top: -20px; | ||
} | } | ||
| − | ol p { | + | ol p, ol pi i { |
| − | font-size: | + | font-size: 17px !important; |
} | } | ||
| Line 1,065: | Line 1,089: | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| − | + | ||
| − | + | ||
| − | + | ||
ul.reflist li { | ul.reflist li { | ||
| Line 1,093: | Line 1,115: | ||
.modal-body { | .modal-body { | ||
overflow-x: auto; | overflow-x: auto; | ||
| + | } | ||
| + | .modal-dialog { | ||
| + | width: 60%; | ||
} | } | ||
| Line 1,129: | Line 1,154: | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| − | |||
| − | |||
.imagequote { | .imagequote { | ||
float: right; | float: right; | ||
| − | width: | + | width: 30%; |
height: auto; | height: auto; | ||
padding: 20px; | padding: 20px; | ||
padding-bottom: 40px; | padding-bottom: 40px; | ||
margin-top: -25px; | margin-top: -25px; | ||
| + | position: relative; | ||
| + | top: 50%; | ||
} | } | ||
Latest revision as of 01:28, 18 October 2018
/* Removing default wiki layout */
/**************************************************************************************************************************************************************************************************/
- home_logo,
- sideMenu {
display: none; }
- sideMenu,
- top_title,
.patrollink { display: none; }
- content {
margin-left: 0px; margin-top: -7px; padding: 0px; width: 100%; background: none !important; }
body {
background-image: url("
") !important;
background-repeat: no-repeat;
background-position: bottom left;
background-attachment: fixed;
position: relative;
margin-top: 40px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
font-weight: 300;
}
- bodyContent h1,
- bodyContent h2,
- bodyContent h3,
- bodyContent h4,
- bodyContent h5,
- bodyContent h6, {
margin-bottom: 0px; }
.judges-will-not-evaluate {
border: 4px solid #e4dede;
padding: 2% !important;
width: 92%!important;
}
html { scroll-behavior: smooth !important; }
.adopeicon { height: 40px; width: auto; margin: 10px; padding-left: 10px; }
/* TOPNAV */
nav, footer, #myScrollspy, .content, .blockquoteadpbl, .blockquotegrnbl, blockquoteorngcrl {
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.content {
padding: 25px; background-color: #FFFFFF;
}
.navbar {
z-index: 500 !important;
}
.dropdown-menu { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } ul.nav-pills li.open { z-index: 1000; }
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0; border-width: 0 0 1px; }
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 12px; } .navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
} }
#custom-nav {
margin-left: -15px !important;
margin-right: -15px !important;}
/* FOOTER */ .footer { background-color: #F8F8F8; position: relative; right: 0; bottom: -30px; left: 0; padding: 1rem; }
legend { background-color: rgba(249, 251, 251, 1); border: none; color: #797979; }
.logo { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor:pointer; }
.sponsorimg { max-height: 80px; width: auto; } .sponsorimg2 { max-height: 150px; width: auto; } .sponsorimg3 { max-height: 50px; width: auto; }
.sponsimgg {
float: right; max-width: 30%; height: auto; padding-left: 10px; margin-left: 25px; max-height: 250px;
}
/* SIDEBAR */
ul.nav-pills { top: 160px; left: 45px; position: fixed; color: #006C84 !important; font-size: 15px; margin-right: 30px; }
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff; background-color: #E2E8E4;
} .nav-pills
div.col-sm-9 div { height: 250px; font-size: 28px; }
.sponsors img { height: 6em; padding: 1em; }
.sponsors > div > a { display: block; position: relative; /* top: -2.5em;*/ }
/* GENERAL LAYOUT STUFF */
h1 {
font-size: 45px; font-weight: lighter !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important; }
} h2 {
font-size: 35px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
font-weight: 100 !important;
}
h3 {
font-size: 30px; font-weight: lighter !important;
}
h4 {
font-size: 25px; font-weight: lighter !important;
}
h5 {
font-size: 22px; font-weight: lighter !important;
}
h6 {
font-size: 20px; font-weight: lighter !important;
}
/* GREEN-BLUE */ .grnbl {
color: #006C84;
}
a.grnbl { color: #006C84 !important; }
h1.grnbl {
border-bottom: 2px solid #006C84 !important; padding:5px;
}
/* ADOPE BLUE */
.adpbl {
color: #0092CB;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
a.adpbl { color: #0092CB !important; }
h1.adpbl {
border-bottom: 2px solid #0092CB !important; padding:5px;
}
/* ORANGE-CORAL */
.orngcrl {
color: #FFCCBB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
a.orngcrl { color: #FFCCBB !important; }
h1.orngcrl {
border-bottom: 2px solid #FFCCBB !important; padding:5px;
}
/* THE GREYS */
.thgrys {
color: #777777;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important; }
a.thgrys { color: #777777 !important; }
h1.thgrys {
border-bottom: 2px solid #777777 !important; padding: 5px;
}
/* JANINE's BLUE */
.jnnbl {
color: #00B4C7;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
a.jnnbl { color: #00B4C7 !important; }
h1.jnnbl {
border-bottom: 2px solid #00B4C7 !important; padding:5px;
}
p { font-size: 19px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify; }
p.DNAstyle {
font-family: "Courier New", Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace! important;
word-wrap: break-word;
}
.blockquotegrnbl {
text-align: justify; margin: 20px 0; padding: 20px; border-left: 5px solid #006C84; color: #006C84; background-color: #F8F8F8; line-height: 35px; font-size: 26px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
}
.opinions
{font-size: 20px !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
text-align: right !important;
width:100%;
font-style: italic !important;
}
.blockquoteorngcrl {
text-align: justify; margin: 20px 0; padding: 20px; border-left: 5px solid #FFCCBB; color: #FFCCBB; background-color: #F8F8F8; line-height: 35px; font-size: 26px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
}
.blockquoteadpbl {
text-align: justify; margin: 20px 0; padding: 20px; border-left: 5px solid #0092CB; color: #0092CB; background-color: #F8F8F8; line-height: 35px; font-size: 26px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
}
.figadpbl {
color: #0092CB;
text-align: justify;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
.figgrnbl {
color: #006C84;
text-align: justify;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
.figjnnbl {
color: #00B4C7;
text-align: justify;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif !important;
}
/* BARCODING */ .backgroundbarcoding{ background:#F8F8F8 !important;
padding: 5px;
border: 1px solid #00B4C7;
}
.textDNAbarcoding {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left!important;
color: #00B4C7 !important;
}
.textboxesDNAbarcoding {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 16px !important;
text-align: left!important;
color: #00B4C7 !important;
background:#F8F8F8 !important;
padding: 5px;
border: 2px solid #00B4C7;:
}
.headerDNAbarcoding {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: center !important;
color: #00B4C7 !important;
background:#F8F8F8 !important;
padding: 5px;
}
.DNAbarcoding { font-family: "Courier New" !important;
font-size: 13.8px !important;
text-align: left !important;
color: #00B4C7 !important;
background:#FFFFFF !important;
padding: 5px;
}
.jnnblbarcoding {
font-family: "Courier New" !important;
font-size: 13.8px !important;
color: #00B4C7;
}
.adpblbarcoding {
font-family: "Courier New" !important;
font-size: 13.8px !important;
color: #0092CB;
}
.grnblbarcoding {
font-family: "Courier New" !important;
font-size: 13.8px !important;
color: #006C84;
background:#F8F8F8 !important;
}
- myCarousel {
max-width: 800px; max-height: 600px; } .carousel-caption { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.peopleCarouselImg img { height: 400px; max-height: 400px; width: auto; }
.container { /*background-color: rgba(249, 251, 251, 1);*/ } .container-fluid { /*background-color: rgba(249, 251, 251, 1);*/ }
.img-top {
max-width: 50% !important; height: auto;
}
.imgprotocols {
width: 5% !important; height: 5% !important;
}
.spcmkr {
height: 65px;
}
.nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{ background: none !important; }
.tableheadergrnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #006C84 !important;
background:#F8F8F8 !important;
padding: 15px;
}
.tableunevengrnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #006C84 !important;
background:#FFFFFF !important;
padding: 15px;
}
.tableevengrnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #006C84 !important;
background:#F8F8F8 !important;
padding: 15px;
}
.tableheaderadpbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #0092CB !important;
background:#F8F8F8 !important;
padding: 15px;
}
.tableunevenadpbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #0092CB !important;
background:#FFFFFF !important;
padding: 15px;
}
.tableevenadpbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #0092CB !important;
background:#F8F8F8 !important;
padding: 15px;
}
.tableheaderjnnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #00B4C7 !important;
background:#F8F8F8 !important;
padding: 15px;
}
.tableunevenjnnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #00B4C7 !important;
background:#FFFFFF !important;
padding: 15px;
}
.tableevenjnnbl {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;
font-size: 18px !important;
text-align: left !important;
color: #00B4C7 !important;
background:#F8F8F8 !important;
padding: 15px;
}
/* THIS IS FOR DROPDOWNMENU */
.collapsible {
cursor: pointer; padding: 16px; width: 100%; border: none; text-align: left; outline:; font-size: 17px; background-color: #FFFFFF:
}
.cadpbl {
color: white; background-color: #0092CB;
} .cgrnbl {
color: white; background-color: #006C84;
} .corngcrl {
color: #777777; background-color: #FFCCBB;
} .cthgrys {
color: white; background-color: #777777;
} .cjnnbl {
color: white; background-color: #00B4C7;
}
.activedropdownadpbl.collapsible:hover {
background-color: #F8F8F8; color: #0092CB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.cadpbl.collapsible:hover {
background-color: #F8F8F8; color: #0092CB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.corngcrl.collapsible:hover {
background-color: #F8F8F8; color: #FFCCBB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.cjnnbl.collapsible:hover {
background-color: #F8F8F8; color: #00B4C7; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.activedropdownadpblprotocols.collapsible:hover {
background-color: #F8F8F8; color: #0092CB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.activedropdownorngcrl.collapsible:hover {
background-color: #F8F8F8; color: #FFCCBB; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.activedropdownjnnbl.collapsible:hover {
background-color: #F8F8F8; color: #00B4C7; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.collapsible:after {
content: '\002B'; color: none; font-weight: bold; float: right; margin-left: 5px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.activedropdownadpblprotocols:after, activedropdownadpbl:after, .activedropdownjnnbl:after, .activedropdownorngcrl:after{
content: "\2212"; /* color: #F8F8F8; */ /* background-color: #0092CB; */ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
.content {
padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #777777 color: white; font-size: 17px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify;
}
- CircleLife {
max-height:600px !important; length:auto !important;
}
button{ position:relative; } button span, { position:absolute; top:-85px;}
a.repositioner{ position:absolute; top:-85px;} span.repositioner{ position:absolute; top:-85px;}
section#timeline {
width: 80%; margin: 20px auto; position: relative;}
section#timeline:before {
content: ; display: block; position: absolute; left: 51.7%; top: 0; margin: 0 0 0 -1px; top: 8%; bottom: 80%; width: 2px; height: 90%; background: #0092CB;}
section#timeline article {
width: 80%; margin: 0 0 20px 0; left: 12%; right: -4%; position: relative;}
section#timeline article:after {
content: ; display: block; clear: both;}
section#timeline article div.inner {
width: 43%; float: left; margin: 20px 0 0 0; border-radius: 6px;}
section#timeline article div.inner span.date {
display: block; width: 60px; height: 60px; padding: 5px 0; position: absolute; top: 0; left: 50%; margin: 0 0 0 -32px; border-radius: 110%; font-size: 10px; font-weight: 900; line-height: normal; text-transform: uppercase; background: #25303B; /*Date circle color*/ color: #FFCCBB; /*date letter color*/
/* border: 4px solid red; inner ring r*/
box-shadow: 0 0 0 7px #0092CB;} /*outer ring color*/
section#timeline article div.inner span.date span {
display: block; text-align: center;}
section#timeline article div.inner span.date span.day {font-size: 10px;} section#timeline article div.inner span.date span.month {font-size: 16px;} section#timeline article div.inner span.date span.year {font-size: 10px;} section#timeline article div.inner h2 {
padding: 15px; margin: 0; color: #f7f7f7; font-size: 18px; text-transform: uppercase; letter-spacing: -1px; border-radius: 6px 6px 0 0; position: relative;}
section#timeline article div.inner h2:after {
content: ; position: absolute; top: 10px; right: -5px; width: 10px;
height: 10px;
-webkit-transform: rotate(-45deg);}
section#timeline article div.inner p {
padding: 10px; margin: 0; font-size: 10px; background: #f7f7f7; color: #656565; border-radius: 0 0 6px 6px;}
section#timeline article:nth-child(2n+2) div.inner {float: right;} section#timeline article:nth-child(2n+2) div.inner h2:after {left: -5px;} section#timeline article:nth-child(5n) div.inner h2 {background: #006C84;} /*COLOR OF CONTAINER*/ section#timeline article:nth-child(5n) div.inner h2:after {background: #006C84;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+1) div.inner h2 {background: #00B4C7;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+1) div.inner h2:after {background: #00B4C7;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+2) div.inner h2 {background: #FFCCBB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+2) div.inner h2:after {background: #FFCCBB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+3) div.inner h2 {background: #0092CB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+3) div.inner h2:after {background: #0092CB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+4) div.inner h2 {background: #008284;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+4) div.inner h2:after {background: #008284;}/*COLOR OF ARROW*/
/* ------ TEAM MEMBERS ------ */
- team .card {
border: none; background: #ffffff; padding: 40px; padding-bottom: 20px; overflow: auto; }
- supervisors .card_sup {
border: none; height: 430px; background: #ffffff; padding: 30px; padding-bottom: 20px; overflow: auto; margin: 20px; position: relative; z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }
.img_sup { max-width: 60%; height: auto; border-radius: 50%; }
.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); border-radius: .25rem; }
.image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }
.mainflip { -webkit-transition: 2s; -webkit-transform-style: preserve-3d; -ms-transition: 2s; -moz-transition: 2s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 2s; transform-style: preserve-3d; position: relative; }
.frontside { position: relative; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }
.backside {
position: absolute;
top: 0;
left: 0;
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
-moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}
.frontside,
.backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 2s;
-webkit-transform-style: preserve-3d;
-moz-transition: 2s;
-moz-transform-style: preserve-3d;
-o-transition: 2s;
-o-transform-style: preserve-3d;
-ms-transition: 2s;
-ms-transform-style: preserve-3d;
transition: 2s;
transform-style: preserve-3d;
}
.frontside .card, .backside .card { height: 500px; width: auto; }
.frontside .card .card-title, .backside .card .card-title { color: #007b5e !important; }
.frontside .card .card-body img { max-width: 60%; height: auto; border-radius: 50%; }
.sup_title {
margin: -3px !important;
}
/* KATEX */
.katex-display {
position: relative;
}
.katex-display .katex .eqno {
display: block; position: absolute; right: 0; top: 40%; line-height: .2;
} .text {
font-size: 17px; padding: 16px 2px;
}
/* ------ SUB-DROPDOWNS ------ */
/*hide the inputs/checkmarks*/
input.inputhide {
display: none;
}
/*hide the submenu*/ ul.submenu {
max-height: 0; overflow: hidden;
} .subcontent {
margin-top: 20px; font-size: 17px;
}
.subdropdown{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; font-size: 17px; text-decoration: none !important; font-weight: 300 !important; padding: 18px; margin: -11px;
}
/*position the label*/ label {
position: relative; display: block; cursor: pointer;
}
/*show the submenu when checked*/ input:checked~ul.submenu {
max-height: 300px;
}
.content {
overflow: auto;
}
/*bullet points in our colours*/
ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl {
list-style: none;
font-size: 18px;
}
ul.uladpbl li::before {
content: "\2022"; color: #0092CB; display: inline-block; width: 1em; margin-left: -1em;
} ul.ulorngcrl li::before {
content: "\2022"; color: #FFCCBB; display: inline-block; width: 1em; margin-left: -1em;
} ul.uljnnbl li::before {
content: "\2022"; color: #00B4C7; display: inline-block; width: 1em; margin-left: -1em;
} ul.ulgrnbl li::before {
content: "\2022"; color: #006C84; display: inline-block; width: 1em; margin-left: -1em;
}
/* MEDALS */
img.medals {float: right;
max-width: 30%;
height: auto;
padding: 20px;
margin-top: -10px;
}
img.medals2 {float: left;
max-width: 30%;
height: auto;
padding: 20px;
margin-right: 20px;
margin-top: -20px;
}
ol p, ol pi i {
font-size: 17px !important;
}
.medalicon {
height: 25px !important;
}
- to_dna.input {
visibility: visible !important; }
ul.acklist li {
list-style: none !important; font-size: 20px; font-weight: bold;
}
ul.reflist li {
list-style: none !important; font-size: 16px;
}
.looove { margin: 20px; padding: 20px; max-height: 500px !important; }
.loooove { margin: 20px; padding: 20px; max-height: 600px !important; }
figcaption { text-align: justify !important; font-size: 16px !important; }
.modal-body { overflow-x: auto; } .modal-dialog { width: 60%; }
.moniek {
position: relative; width: 33.3333%; float: left; margin-bottom: 40px;
}
.storyimage {
opacity: 1; display: block; width: 110%; height: auto; transition: .5s ease; backface-visibility: hidden;
}
.middle {
transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;
}
.moniek:hover .storyimage {
opacity: 0.3;
}
.moniek:hover .middle {
opacity: 1;
}
.imagequote {
float: right; width: 30%; height: auto; padding: 20px; padding-bottom: 40px; margin-top: -25px; position: relative; top: 50%;
}