Template:CSS/EPFL csscustom
From 2014.igem.org
body, html { height: 100%; width: 100%; }
h1, h2, h3, h4, h5, h6 {
border: none;
margin: auto; }
- bodyContent h1, #bodyContent h2 {
margin-bottom: 0px;
}
hr { margin: auto; margin-top: 20px; margin-bottom: 20px; }
body, h1, h2, h3, h4, h5, h6 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.whitebg a, .whitebg a:visited, .whitebg a:active {
color: #649CD2 !important;
}
.whitebg a:hover {
color: #A5D2DA !important;
}
.intro-header {
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
padding-bottom: 50px;
color: #f8f8f8;
background: url('https://static.igem.org/mediawiki/2014/f/f1/Rlc2.jpg') no-repeat center center;
background-size: cover;
text-align: center;
}
.intro-message { position: relative; padding-top: 10%; padding-bottom: 10%; }
.intro-message > h1 { margin: 0; font-size: 5em; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); }
.intro-divider { width: 400px; border-top: 1px solid #f8f8f8; border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.intro-message > h3 { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); }
@media (max-width: 767px) { .intro-message { padding-bottom: 15%; }
.intro-message > h1 { font-size: 3em; }
ul.intro-social-buttons > li { display: block; margin-bottom: 20px; padding: 0; }
ul.intro-social-buttons > li:last-child { margin-bottom: 0; }
.intro-divider { width: 100%; } }
.network-name { text-transform: uppercase; font-size: 14px; font-weight: 400; letter-spacing: 2px; }
.content-section-a { background-color: #f8f8f8; padding: 50px 0; }
.content-section-b { border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; padding: 50px 0; }
.section-heading { margin-bottom: 30px !important; }
.section-heading-spacer { border-top: 3px solid #e7e7e7; width: 200px; float: left; }
.banner { padding: 100px 0; color: #f8f8f8; background: url(../img/banner-bg.jpg) no-repeat center center; background-size: cover; }
.banner h2 { margin: 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); font-size: 3em; }
.banner ul { margin-bottom: 0; }
.banner-social-buttons { float: right; margin-top: 0; }
@media (max-width: 1199px) { ul.banner-social-buttons { float: left; margin-top: 15px; } }
@media (max-width: 767px) { .banner h2 { margin: 0; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); font-size: 3em; }
ul.banner-social-buttons > li { display: block; margin-bottom: 20px; padding: 0; }
ul.banner-social-buttons > li:last-child { margin-bottom: 0; } }
footer { background-color: #f8f8f8; padding: 50px 0; }
p.copyright { margin: 15px 0 0; }
- content {
width: 100% !important; background: none !important;
}
- top-section {
border: none; height:auto;
width: 100%; }
- globalWrapper {
font-size: 100%; padding-bottom: 0px !important; }
.navbar-brand { padding: 0px; }
- content {
border: none; padding: 0px !important; margin: 0px !important; width: 100% !important;
}
.right-menu li a {
background-color: transparent;
color: transparent; }
- menubar:hover .right-menu li {
color: white !important; }
- menubar {
background-color: transparent; color: white !important;
}
- menubar:hover {
background-color: transparent; color: white !important;
}
- menubar:hover li {
background-color: transparent; color: white !important;
}
- menubar {
top: 0px;
}
footer { text-align: center; }
body{ background:#a5d2da; padding:0; color: #454545; font-family: "Helvetica Neue", "PT Sans", sans-serif;}
a,a:hover{text-decoration:none; color:#FE5214}
h2,h3{color:#fff; text-rendering: optimizelegibility; text-shadow: 1px 2px 3px #40a1b2; }
h1{padding:0px; font-weight: 200;font-size: 32px;color: #3f3f3f;margin: 0;font-family: "PT Sans", sans-serif;text-rendering: optimizelegibility;}
.debug{ border:1px solid #FFCC33;}
h1.brand {
background: none repeat scroll 0 0 #299A0B; border-radius: 86% 86% 86% 86%; box-shadow: 0 0 4px #000000; color: #FFFFFF; font-size: 41px; height: 100px; line-height: 81px; margin: -87px auto 0; padding: 75px 0 0; text-shadow: 1px 1px 0 #000000; width: 222px;
}
.dl-horizontal dd, .dl-horizontal dt {
padding: 10px; color: #fff;
}
.span3.logo {
padding: 34px 0 0;
}
.clr{clear:both} .cntr{text-align:center} .navbar{margin-bottom:-1px; margin-top:28px; position:relative } .navbar .nav, .navbar .nav > li{float:none; text-align:right; margin-left:20px;} .nav li{display:inline-block; float:none;} .nav a {padding: 3px 18px;font-size: 23px; display: inline-block; color:#3a494c; font-family: "PT Sans", sans-serif;}
#projectDescription, #project, #applications{padding:70px 0 ; }
.txtR{text-align:right}
- projectDescription h1 {
margin-bottom: 40px; text-shadow: 1px 2px 3px #40a1b2;
}
- project {
background: #fff; text-align: center; border-top: 1px solid #ddd; padding: 20px; padding-top: 40px;
}
- project h4 {
margin:25px 0;
}
- project p {
color: #5E5E5E; font-size: 20px; line-height: 28px; padding: 10px; font-weight: 200 !important;
}
- projectDescription{background: #99d4a5;text-align: center;}
- projectDescription h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
- projectDescription p {
color: #fff; font-size: 19px; line-height: 27px; margin: 15px 0;
}
- projectDescription .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
- projectDescription .thumbnails > li{margin-left: 60px; margin-bottom:60px;}
- projectDescription .thumbnails > li.span4{ width:350px;}
- applications{background: #fff;}
- applications p{margin:20px 0;}
- applications .span12{ margin:0;margin-bottom: 36px;}
/* BG COLOR: #ddb3c2 */
- meetourteam{ padding:70px 0 ; background:#928FCE; text-align: center; }
- meetourteam h1{ text-transform:uppercase; color:#fff; padding:0; font-size:60px;}
- meetourteam .thumbnails p {
color: #909090; font-size: 22px; line-height: 27px; margin:20px 0;
margin-bottom: 0px;
}
- meetourteam p {
color: #fff; font-size: 19px; line-height: 27px; margin: 15px 0;
}
- meetourteam h4 {
font-size: 24px;line-height: 40px; margin:10px 0;
}
- meetourteam h5 {
font-size: 18px;
}
- meetourteam .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
- meetourteam .thumbnails {
margin-left: auto; margin-right: auto; text-align: center;
}
- meetourteam .thumbnails > li{ margin-bottom:60px; float: none !important; display: inline-block; }
- meetourteam .thumbnails > li.span4{ width:200px; height:250px;}
- meetourteam .thumbnails a.twitter{ height:56px; width:56px; background:url(../img/thum-t-icon.png) no-repeat center center;display:inline-block;}
- meetourteam .thumbnails a.facebook{ height:56px; width:56px; background:url(../img/thum-f-icon.png) no-repeat center center; display:inline-block;}
- meetourteam .thumbnails a.pin{ height:56px; width:56px; background:url(../img/thum-p-icon.png) no-repeat center center;display:inline-block;}
- recentpostSection{ padding:70px 0 ; background:#b5d5e1; text-align: center; }
- recentpostSection h1{ text-transform:uppercase; color:#fff; padding:0; font-size:60px;}
- recentpostSection .thumbnails p {
color: #909090; font-size: 22px; line-height: 27px; margin:20px 0 0; padding-bottom:10px;
}
- recentpostSection p {
color: #fff; font-size: 19px; line-height: 27px; margin: 15px 0;
}
- recentpostSection h4 {
font-size: 32px;line-height: 40px; margin:10px 0;
}
- recentpostSection h6 {
font-size: 20px; font-style:italic;
}
- recentpostSection .span6, #contactSection .span6{ float:none; margin:0 auto; text-align:center;}
- recentpostSection .thumbnails > li{margin-left: 60px; margin-bottom:60px;}
- recentpostSection .thumbnails > li.span4{ width:350px;}
- contactSection{ background:#3b3b3b; text-align:center; padding:70px 0 0;}
- contactSection .span8{ float:none; margin:0 auto;}
- contactSection h1{ text-transform:uppercase; color:#fff; padding:0;font-size:60px;}
- applications h1.cntr { text-transform:uppercase; color:#3A494C; padding:0;font-size:60px; text-align: center; margin-bottom: 20px; }
- contactSection p {
color: #fff; font-size: 19px; line-height: 27px; margin: 15px 0;
}
- headerSection { padding:14px 0 20px;}
- welcomeSection{padding:44px 0}
- headerSection {display: inline-block;width: 100%;}
.blockDtl {text-align:center} .blockDtl:hover{color:#FE5214}
- shadow{ min-height:44px; padding:18px 0; text-align:center}
- carouselSection{ margin:0 auto; padding: 38px 0 31px; color:#eee;}
- carouselSection #myCarousel{margin-bottom:0}
- myCarousel .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}
- myCarousel .carousel .active.left {left:0;opacity:0;z-index:2;}
- myCarousel .carousel .next {left:0;opacity:1;z-index:1;}
.inner{margin-bottom:38px;} .blogBlk{background:#fff; display: block;padding: 28px;line-height: 1.6em;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.footerSection{ border-top:1px solid #171717; padding:30px 0 ;margin-top: 60px;}
.footerSection .copyright a{padding:4px; color:#fed57e; font-size:22px;}
.footerSection .container{}
.socialicon{ margin-top:0px; width:300px; float:left; text-align:left;}
.socialicon a{ margin-right:20px;}
.socialicon a:hover{ opacity: 0.6;}
a.twitter{ height:56px; width:56px; background:url(../img/t-icon.png) no-repeat center center;display:inline-block;}
a.facebook{ height:56px; width:56px; background:url(../img/f-icon.png) no-repeat center center; display:inline-block;}
a.html5{ height:56px; width:56px; background:url(../img/icon-1.png) no-repeat center center;display:inline-block;}
a.icon2{ height:56px; width:56px; background:url(../img/icon-2.png) no-repeat center center;display:inline-block;}
.footerSection .copyright { text-align:right; color:#a2a3a3;}
- contactSection .footerSection .copyright p{ color:#a2a3a3;}
- contactSection .footerSection .span8{ float:left; margin:0 0 0 25px;}
.go-top {
display: inline-block;
position: fixed;
bottom: 8px;
right: 30px;
color: #A5D2DA !important;
text-decoration: none;
font-size: 30px;
background-color: #3A494C;
font-size: 15px;
padding: 5px;
border-radius: 5px
}
.go-top:hover {
display: inline-block;
position: fixed;
bottom: 8px;
right: 30px;
background-color: #A5D2DA !important;
text-decoration: none;
font-size: 30px;
color: #3A494C !important;
font-size: 15px;
padding: 5px;
border-radius: 5px
}
- headerSection .btn.btn-navbar {
width: 100%; text-align: center; border: 0; margin: 0; border-radius: 0; }
- headerSection .navbar .btn-navbar .icon-bar {
width: 100%; height: 2px; } .blockDtl{background:#fff}
.carousel-control {
background: none; border: none;
}
@media (max-width: 600px){
- headerSection .btn.btn-navbar {
display: block;}
.nav-collapse .nav>li { float: none; display: block; text-align: left; } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #FC3C00; border-bottom: 0; } }
.list-inline li {
display: inline-block; margin: 10px; color: #fff;
}
/*.list-inline img {
height: 100px !important;
}*/
- biopad {
position: absolute;
}
.align-right { text-align: right; }
.align-left { text-align: left; }
- results {
background: #fff; text-align: center; border-top: 1px solid #ddd; padding: 20px; padding-top: 40px;
}
- results h4 {
margin:25px 0;
}
- results p {
color: #5E5E5E; font-size: 16px; line-height: 24px; padding: 10px; font-weight: 200 !important; font-family: "Helvetica Neue" !important;
}
- notebook, .whitebg {
background-color: white; }
.notebook-item { padding: 20px; }
.notebook-item h1, .notebook-item h2, .notebook-item h3, .notebook-item h4, .notebook-item h5, .notebook-item h6, .whitebg h1, .whitebg h2, .whitebg h3, .whitebg h4, .whitebg h5, .whitebg h6 { text-shadow: none; color: inherit; }
- biobricks_list tr {
cursor: pointer;
}
.whitebg { padding: 20px; text-align: justify; }
.table tr th {
background-color: #A5D2DA !important;
color: white;
cursor: auto !important;
}
.embed-container iframe { position: absolute; height: 80%; width: 40%; left: 5%; top: 10%; }
.carousel-control { color: white !important; }
.navbar-header { float: left; }
.vignette { height: 300px; margin: 20px; }
.navbar .nav, .navbar .nav > li { float: left; }
.navbar .nav .dropdown-menu li { display: list-item; float: none; }
.dropdown-menu > li {
text-align:center;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a.active, .dropdown-menu>li.active > a { background-color: #A5D2DA !important; color: white; }
.navbar-default { padding-left: 30px; }
- carousel .carousel-inner > .item > img {
margin: 0 auto !important;
}
.timenav-tag-row-1 { background-color: beige !important; }
.timenav-tag-row-2 { background-color: slategrey !important; }
.timenav-tag h3 { color: white !important; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important; }
.timenav-tag-row-3 { background-color: mediumaquamarine !important; }
.timenav-tag-row-4 { background-color: lightblue !important; }
.timenav-tag-row-5 { background-color: thistle !important; }
/* entire container, keeps perspective */ .flip-container { perspective: 1000; -webkit-perspective: 1000;
margin: 20px;
} /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back { width: 100%; height: 300px; color: white; }
.flip-container p {
margin-top: 50px;
} .front h1, .back h1 { color: white !important; }
/* flip speed goes here */ .flipper { transition: 0.6s; transform-style: preserve-3d; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d;
position: relative; }
/* hide back of pane during swap */ .front, .back { backface-visibility: hidden;
-webkit-backface-visibility: hidden;
text-align:center;
position: absolute; top: 0; left: 0; }
/* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
background-color: #7F3E98;
}
/* back, initially hidden pane */ .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
background-color: #aaa;
}
.valign-middle tr td { vertical-align: middle !important; }
.tab-pane {
margin-top: 20px;
}
.thumbnails { background-color: auto; }
.team-member img { border: 5px solid white; height: 240px; }
.team-member { padding: 50px; }
p { font-size: 21px !important; margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }
body {
background-color: #F1F2F6;
}
.page-Team_EPF_Lausanne {
background-color: #A5D2DA;
}
.box { background-color: #fff; border: none; border-radius: 4px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-color: #e6e9ed; margin-bottom: 50px; }
.navbar_alt {
margin-top: -20px; padding-top: 28px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 3px solid #3A494C; border-radius: 0px;
}
.whitebg {
padding-top: 30px;
}
/**
* breadcrumb * -------------------------------------------------- */
.breadcrumb {
color: #434a54; background-color: #e6e9ed;
margin-left: 0px; } .breadcrumb > .active {
color: #434a54;
} .breadcrumb a {
color: #3bafda;
}
.breadcrumb-arrow {
height: 36px; padding: 0; line-height: 36px; list-style: none; background-color: white;
} .breadcrumb-arrow li:first-child a {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px;
} .breadcrumb-arrow > li, .breadcrumb-arrow > li > a, .breadcrumb-arrow > li > span {
display: inline-block; vertical-align: top;
} .breadcrumb-arrow > li:not(:first-child) {
margin-left: -5px;
} .breadcrumb-arrow > li + li:before {
padding: 0; content: "";
} .breadcrumb-arrow > li > span {
padding: 0 10px;
} .breadcrumb-arrow > li > a, .breadcrumb-arrow > li:not(:first-child) > span {
height: 36px; padding: 0 10px 0 25px; line-height: 36px;
} .breadcrumb-arrow > li:first-child > a {
padding: 0 10px;
} .breadcrumb-arrow > li > a {
position: relative; color: white; text-decoration: none; background-color: #A5D2DA; border: 1px solid #A5D2DA;
} .breadcrumb-arrow > li:first-child > a {
padding-left: 10px;
} .breadcrumb-arrow > li > a:before, .breadcrumb-arrow > li > a:after {
position: absolute; top: -1px; width: 0; height: 0; content: ; border-top: 18px solid transparent; border-bottom: 18px solid transparent;
} .breadcrumb-arrow > li > a:before {
right: -10px; z-index: 3; border-left-color: #A5D2DA; border-left-style: solid; border-left-width: 11px;
} .breadcrumb-arrow > li > a:after {
right: -11px; z-index: 2; border-left: 11px solid #eee;
} .breadcrumb-arrow > li > a:hover, .breadcrumb-arrow > li > a:focus {
background-color: #3A494C; border: 1px solid #3A494C;
} .breadcrumb-arrow > li > a:hover:before, .breadcrumb-arrow > li > a:focus:before {
border-left-color: #3A494C;
} .breadcrumb-arrow > li > a:active {
background-color: #3A494C; border: 1px solid #3A494C;
}
/*.breadcrumb-arrow li a:active:before, .breadcrumb-arrow li a:active:after {
border-left-color: #3A494C; background-color: #3A494C;
}*/ .breadcrumb-arrow > li > span {
color: #434a54;
}
ul.affix {
position: fixed; top: 20px; width: 25%; margin-right: 30px;
}
ul.affix-top {
position: static;
}
ul.affix-bottom {
width: inherit; position: absolute; top: auto;
}
/* First level of nav */ .sidenav {
margin-bottom: 30px; padding-top: 10px; padding-bottom: 10px; border-radius: 5px;
}
/* All levels of nav */ .sidebar .nav > li > a {
display: block; color: #3A494C; padding: 5px 20px;
}
.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus {
text-decoration: none; background-color: #e5e3e9; border-left: 3px solid #A5D2DA; font-weight: bold;
} .sidebar .nav > .active > a, .sidebar .nav > .active:hover > a, .sidebar .nav > .active:focus > a {
font-weight: bold; color: #3A494C; background-color: transparent; border-left: 3px solid #A5D2DA;
}
/* Nav: second level */ .sidebar .nav .nav {
margin-bottom: 8px;
}
.sidebar .nav li a {
font-size: 100%;
}
.sidebar .nav .nav > li > a {
padding-top: 3px; padding-bottom: 3px; padding-left: 30px; font-size: 90%;
}
- affix-nav li {
display: block;
}
.navbar {
-webkit-backface-visibility: hidden;
}
- boxbread {
margin-bottom: 15px;
}
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */ .dropdown:hover .dropdown-menu { display: block; }
}
.dropdown-menu { margin-top: -2px; }
.navbar .dropdown-menu:after { content: ; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; right: 10px; }
.img-border {
border: 4px solid #3A494C;
border-radius: 5px;
}
.img-left { margin-right: 20px; }
.img-right { margin-left: 20px; }
.gold {
color: gold;
}
.silver { color: silver; }
.bronze { color: #A67D3D; }
.table-center tr td, .table-center tr th {
text-align: center;
}
.carousel-inner > .item > a > img {
display: inline-block;
}
- photo_gallery {
text-align: center;
}
- photo_gallery img {
margin:5px;
}