Template:Heidelberg/body/CSS
body {
font-family: 'Josefin Sans' !important; font-size: 16px; font-weight: 300; color: #888; overflow-x: hidden; text-align: center;
}
p {font-family: 'Josefin Sans' !important; font-size: 20px !important; color: #444 !important;font-weight: 300 !important;}
h1,h2,h3,h4,h5,h6{font-weight:100 !important; color: #393939 !important;font-family: 'Josefin Sans' !important;line-height: 70px !important;}
.global_wrapper {
margin: 150px 6% 0px 6%;
}
#footer-sec h4 {
color: white !important;
font-size: 26px !important;
}
#footer-sec p {
color: grey !important; font-size: 18px !important; font-family: 'Josefin Sans' !important; text-align: center; }
#footer-sec a {
color: grey !important;
}
#footer-sec a:hover {
color: white !important;
transition: color 1s !important;
}
article li {
text-align: justify;
}
.inline_table {
font-size: 18px !important;
font-family: 'Josefin Sans' !important, sans-serif;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
padding-top: 10px !important;
padding-bottom: 50px !important;
}
.mw-body {
background-color: red !important;
height: 0px !important;
}
.table-of-contents {
background: #eee;
}
.table-of-contents {
list-style: none;
text-align: left !important;
line-height: normal !important;
}
.table-of-contents li {
padding: 10px 30px 30px 30px;
}
.table-of-contents a {
text-decoration: none;
font-size: 16px;
color: #393939 !important;
}
.table-of-contents a:hover,
.table-of-contents a:active {
text-decoration: underline;
}
.toc-nav li {
padding-bottom: 10px;
}
.toc-nav a {
font-family: 'Josefin Sans' !important;
font-size: 20px !important;
color: #444 !important;
font-weight: 300 !important;
}
strong { font-weight: 500; }
a, a:hover, a:focus { color: black; text-decoration: none;
-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}
h1 { margin-top: 10px; font-family: 'Josefin Sans', sans-serif !important; font-size: 58px !important; font-weight: 300 !important; color: #393939 !important; line-height: 58px !important; opacity: 0.9; text-align:center; color: #393939;} h2 { margin-top: 10px; font-family: 'Josefin Sans', sans-serif; font-size: 48px; font-weight: 300; color: #393939; line-height: 56px; opacity: 0.9; text-align:center}
h3 { font-family: 'Josefin Sans', sans-serif; font-size: 40px; font-weight: 300; color: #555; line-height: 40px; } h4 { font-family: 'Josefin Sans', sans-serif; font-size: 35px; font-weight: 300; color: #555; line-height: 40px; } h5 { font-family: 'Josefin Sans', sans-serif; font-size: 30px; font-weight: 300; color: #555; line-height: 40px; } h6 { font-family: 'Josefin Sans', sans-serif; font-size: 25px; font-weight: 300; color: #555; line-height: 40px; } h7 { font-family: 'Josefin Sans', sans-serif; font-size: 22px; font-weight: 300; color: #555; line-height: 40px; }
img { max-width: 100%; }
.medium-paragraph { font-size: 18px; line-height: 34px; }
.colored { color: #df6482; }
- -moz-selection { background: #df6482; color: #fff; text-shadow: none; }
- selection { background: #df6482; color: #fff; text-shadow: none; }
/***** General style, all sections *****/
.section-container { margin: 0 auto; padding-bottom: 80px; } .section-description { margin-top: 60px; padding-bottom: 10px; } .section-description p { margin-top: 20px; padding: 0 120px; }
/***** Divider *****/
.divider-1 { padding: 25px 0 15px 0; } .divider-1 .line { width: 160px; margin: 0 auto; border-bottom: 1px dashed #ccc; }
/***** Top menu *****/ .navbar { margin-bottom: 0;
z-index: 10; position: fixed;
background: white; border-bottom: 1px solid white;
box-shadow: 2px 0px 30px black ;
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
.navbar-no-bg { padding-top: 10px; background: white; }
ul.navbar-nav {
padding-top: 10px;
font-family: 'Josefin Sans', sans-serif; font-size: 14px; color: #fff; font-weight: 400;
display: inline-block;
text-transform: uppercase; } .navbar-inverse ul.navbar-nav li a { color: grey; border: 0; } .navbar-inverse ul.navbar-nav li a:hover { color: #000; border: 0; } .navbar-inverse ul.navbar-nav li a:focus { color: #000; outline: 0; border: 0; }
.navbar-brand {
width: 100%;
position: absolute; top: 1px;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0; }
.dropdown:hover .dropdown-menu {
display: block; background-color: white; font-family: 'Josefin Sans', sans-serif;
font-size: 14px; font-weight: 400; text-transform: uppercase;
border-top: none;
} .dropdown-menu>li>a {
color: grey;
}
/* Animate */
.top-content .text h1 { color: #393939; }
.top-content .description { margin: 30px 0 10px 0; } .top-content .description p { opacity: 0.8; } .top-content .description a { color: #fff; border-bottom: 1px dotted #fff; } .top-content .description a:hover, .top-content .description a:focus { color: #fff; border: 0; }
/***** Features *****/
.features-box { margin-top: 30px; text-align: left; } .features-box .features-box-icon { font-size: 60px; color: #df6482; line-height: 60px; text-align: center; } .features-box h3 { margin-top: 0; padding: 0 0 10px 0; }
- footer-sec {
position: relative; background-color: #393939;
font-family: 'Josefin Sans', sans-serif; }
- footer-sec h4 {
color: white;
}
- footer-sec li > a {
color: grey; font-size: 16x; }
- footer-sec span {
font-family: 'Josefin Sans', sans-serif; color: grey; font-size: 16px; }
- footer-sec li {
color: grey; font-size: 16px; list-style: none;
padding-bottom: 2px;
}
- footer-sec li > a:hover{
color: white; text-decoration: none; transition-delay: 0.1s; -webkit-transition: color 1s; /* Safari */ transition: color 1s;
}
- facebook, #twitter {
color: grey }
- facebook:hover,#twitter:hover {
color: white; transition-delay: 0.1s; -webkit-transition: color 1s; /* Safari */ transition: color 1s;
}
/***** MEDIA QUERIES *****/
@media (max-width: 1211px) {
.global_wrapper {
margin: 150px 2% 0px 2%;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-brand {position: absolute; left: 10px;top: 1px;}
#circle:before {
height: 61px !important;
}
.navbar {
height: 77px;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
- circle {
position: relative; box-shadow: 2px 0px 30px black ; background-color: blue; height: 120px; width: 120px; border-radius: 50%;
}
- circle:before{
position: absolute; content: ""; width: 260%; height: 60px; left: -90%; background: white;
}
- circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
background-image: url('https://static.igem.org/mediawiki/2017/8/8f/Heidelberg_2017_phage_logo.svg');
background-size: 90px 90px;
background-repeat: no-repeat;
background-position: center;
}
.input_form {
background-color: #939393;
border: none;
color: white;
padding: 5px 32px;
margin-top: 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
input[type="text"] {
display: block;
margin: 0;
width: 100%;
height: 30px;
font-size: 18px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: none;
-moz-border-radius: none;
-ms-border-radius: none;
-o-border-radius: none;
border-radius: none;
}
#sidenav {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
list-style: none;
}
#sidenav {
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
}
#sidenav > li > ul > li {
list-style: none;
}
#sidenav > li > ul > li > a {
color: firebrick;
}
#sidenav > li > ul > li > a:hover {
color: #393939;
transition: color 1s ease;
}
.navmenu-brand > img {
border-radius: 200px;
width: 100px;
height: auto;
}
.navmenu-brand {
text-align: center;
font-size: 20px;
color: #fff;
font-weight: 400;
}
.abstract {
background-color: #eee;
padding: 30px;
}
