Template:Heidelberg/css/style
@font-face { font-family: LazyDay; src: url(https://static.igem.org/mediawiki/2015/d/df/Heidelberg_lazyday.ttf); }
@font-face { font-family: Vollkorn; src: url(https://static.igem.org/mediawiki/2015/e/e4/Heidelberg_vollkorn.otf); }
a { text-decoration: none; }
.subheader { font-size: 30px; font-family: LazyDay; margin-left: 9px;}
/* Things to adjust that iGEM header */
#top_menu_14 {background: black; }
#top_menu_inside {border-left:0; border-right:0;}
#top_menu_inside #user_item { float: right; }
#globalWrapper, #content { width: 100%; }
#top_menu_inside > ul > li:nth-child(1) { margin-left: -10px; }
#top_menu_inside > ul > li:nth-child(5) { white-space: nowrap; }
#top_menu_inside { width: 100%; background:black; margin:0}
#top_menu_inside > ul > li > a { margin: 0; padding: 0; }
#top_menu_inside > ul > li { max-width: 120px; }
#top_menu_inside li { float : left; padding : 0 5px 0 5px; cursor : pointer; margin : 0; }
/* End of "Things to adjust the iGEM header" */
/* Navbar CSS */
#navcontainer-left-inner > ul > a { margin-left : 0; }
#navcontainer-right-inner > ul { margin-right : -2px !important; }
#menucontainer { margin-top : 16px; width : 100%; height : 90px; max-height : 90px; padding : 0; white-space : nowrap; background-color : black; }
#navcontainer-left-outer { width : 15%; height : 100%; float : left; }
#navcontainer-left-inner { width : 96%; height : 60px; margin : 2px 2% 2px 2%; float : left; }
#navcontainer-right-outer { width : 85%; float : right; height : 100%; }
#navcontainer-right-inner { width: 99%; float: right; margin: 2px 0.5% 2px 0.5%; height: 60px; }
#navcontainer-bottom { width: 100%; margin-top: 0px; background: black; height: 10px; } #navbar-left { float: left; width: 15%; }
#navbar-right { float : right; width : 85%; margin-right : -2px !important; }
.menubox { float : right; /*max-width : 70px;*/ width : auto; top : 1px; border : none; height : 80px; background-color : transparent; overflow : hidden; text-align : center; }
.menutext { font-size : 17px; color : white; /*line-height : 48px;*/ margin : 0; /*margin-left : 5px;*/ padding : 5px; padding-top: 0px; }
.dropdown-text { padding: 10px; }
/* End of Navbar CSS */
/* Panel CSS */
.panel-default > .panel-heading-custom { background: #e9e0d6; color: #cbedfd;
}
.img-responsive { width: 100%; }
.imagewrapper { width: 100%; margin: 0 auto; }
.imagewrapperheader { height: 30px; font-size: 20px; padding-top: 5px; padding-left: 5px; padding-bottom: 5px; margin: 0; line-height: 20px; }
.imagewrapperinlineheader { font-size: 60px; color: white; padding-top: 5px; padding-left: 10px; padding-bottom: 5px; margin: 0; line-height: 60px; margin-bottom: 0; position: relative; top: 162px; }
.imagewrapperimage { width: 100%; }
.imagewrappercaption { height: 100%; display: block; padding: 5px; text-align: justify; font-size: 12px; }
.hiddenpic { width:0px; height:0px; visibility:hidden; }
.videocase { width: 100%; height: 330px; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; }
.basictext { padding-left: 10px; padding-right: 10px; text-align: justify; font-family: Vollkorn; }
.basicheader { font-size: 30px; padding-left: 10px; padding-right: 10px; text-align: justify; margin-top: 5px; margin-bottom: 5px; font-weight: bold; margin-left:15px; font-family: LazyDay; }
.panel { margin-top: 10px; margin-bottom: 10px;
/*
border-left: 5px solid #4063D7; background: #eaf7fd !important; /*#f2f2eb url(http://www.matthamm.com/images/textured_background.jpg) !important; -webkit-box-shadow: 0px 3px 10px 1px rgba(112,111,112,1) !important; -moz-box-shadow: 0px 3px 10px 1px rgba(112,111,112,1) !important; box-shadow: 0px 3px 10px 1px rgba(112,111,112,1) !important;*/
}
.panel-full { margin-left: 10px; margin-right: 15px; }
.panel-left { margin-left: 10px; margin-right: 0; }
.panel-right { margin-left: 0; margin-right: 15px; }
/* End of Panel CSS */
.navbar-fixed-top { border-width: 0 !important; }
body { font-family: 'Roboto', sans-serif; background: white !important; /* background-image: url(); */ background-repeat: repeat-both; margin-top : 70px !important; padding-top: 25px; }
.row { margin-left: 5px !important; margin-right: 5px !important; }
.description {
display: none;
}
.title {
font-size: x-large; padding: 3px; padding-left: 8px;
}
.timeline {
list-style: none; margin-top: 0; margin-left: 0; padding-top: 15px; padding-right: 15px; padding-left: 15px; position: relative; width: 950px;
}
.timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; }
.timeline.active:before { left: 5%; margin-left: 10px; }
.timeline > li { margin-bottom: 20px; position: relative; }
.timeline > li:before, .timeline > li:after { content: " "; display: table; }
.timeline > li:after { clear: both; }
.timeline > li:before, .timeline > li:after { content: " "; display: table; }
.timeline > li:after { clear: both; }
.timeline > li > .timeline-panel { width: 415px; height: 100%; float: left; overflow: hidden; text-overflow: ellipsis; border: 1px solid #d4d4d4; background-color: #fff; border-radius: 2px; padding: 20px; position: relative; border-left: 5px solid #4063D7; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 2px 2px 15px 0px rgba(50, 50, 50, 0.75); }
.timeline > li > .timeline-panel.active:before { border-left: 0; border-right: 5px solid #4063D7; left: -15px; }
.timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; }
.timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; width: 14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; }
/* Individual points right on the timeline*/ .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; }
.timeline > li.timeline-inverted > .timeline-panel { float: right; border-left: 0; border-right: 5px solid #4063D7; }
.timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; float: auto; }
.timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; float: auto; }
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0; color: inherit;
}
.timeline-body > p, .timeline-body > ul {
margin-bottom: 0; height: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timeline-body > p + p { margin-top: 5px; } .navbar-toggle .icon-bar { background-color: black !important; }
@media (max-width: 767px) {
.navbar-toggle .icon-bar { background-color: black !important; }
.navbar-fixed-top {top: 16px !important; }
.navmenu-default .navmenu-nav>li>a, .navbar-default .navbar-offcanvas .navmenu-nav>li>a { font-variant: small-caps; color: white !important; background-color: black; }
.offcanvas.in { background-color: black; }
.navmenu-brand { color: white !important; font-weight: bold; }
ul.timeline:before { left: 40px; }
ul.timeline > li > .timeline-panel { width: calc(100% - 90px); /* calc(100% - 90px) */ width: -moz-calc(100% - 90px); /* -moz-calc(100% - 90px) */ width: -webkit-calc(100% - 90px); /* -webkit-calc(100% - 90px) */ }
ul.timeline > li > .timeline-badge { left: 15px; margin-left: 0; top: 16px; }
ul.timeline > li > .timeline-panel { float: right; }
ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; }
ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; }
}
.container-fluid {
width: 100%; padding: 0;
}
.container-fluid > .banner { background-color: initial; margin-top: 15px; }
.container-fluid > .menu { height: 42px; width: inherit; background-color: #E1E3E4; border-top: 4px solid #565656; border-bottom: 3px solid #565656; z-index: 300; }
.container-fluid > .title { background-color: #E1E3E4; margin-top: -3px; margin-bottom: 0; padding-top: 0; padding-bottom: 0; height: 40px; width: inherit; margin-bottom: 0; border-bottom: 3px solid #565656; z-index: 200; }
.container-fluid > .main { background-color: #E1E3E4; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 100%; margin-bottom: 15px; }
/* enable dropdown of mainmenu on hover*/ .dropdown:hover .dropdown-menu {
display: block;
}
.dropdown {
width: initial;
}
.dropdown-menu {
line-height : 48px; margin-top: 2px !important; right: -50px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 2; left: -30%; margin-top: 2px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu { left: -20%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
.panel-preview-notebook { -webkit-box-shadow: 0 0 10px 0 rgba(145,145,145,0.75); -moz-box-shadow: 0 0 10px 0 rgba(145,145,145,0.75); box-shadow: 0 0 10px 0 rgba(145,145,145,0.75); background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) ), url(); height: 220px; background-size: 100%; }
.container .content {
height: 100%; width: 100%;
}
.logo {
margin: 5px !important; height: 54px; width: 54px;
}
.dropdown-toggle {
line-height: 48px;
}
.dropdown-text {
color: black;
}
.dropdown-text:hover {
background-color: #CCC;
}
.menuicon {
padding: 0; margin: 0; height: 50px; width: 50px;
}
.dropdownbox {
font-size: 14px; display: block;
}
a {
padding: 0 !important;
}
#teampanelname { margin-left: 20px; margin-bottom: 0; font-size: 20px; }
.jcarousel { position: relative; overflow: hidden; width: 100%; height: 200px; }
.jcarousel ul { width: 2000px; position: relative;/* Optional, required in this case since it's a
- element */
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
/* Required only for block elements like
- 's */
float: left;
width: 200px !important;
}
#menubar-big {
background-color: black;
height: 10%;
max-height: 100px;
}
#menubar-small {
background-color: black;
height: 10%;
max-height: 100px;
}
.logo {
margin: 5px !important;
height: 54px;
width: 54px;
}
.carouselimage {
width: 200px !important;
cursor: pointer;
}
.jcarousel-wrapper {
width: 89.65%;
}
- table {