Template:Team:Braunschweig/CSS TU-BS style
From 2014.igem.org
/* templatemo.com 395 urbanic
- /
/* Urbanic Template http://www.templatemo.com/preview/templatemo_395_urbanic
- /
body, html { overflow-x:hidden; }
body {
background-color: #ffffff; font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; font-size: 12px;
font-weight: 300; font-style: normal; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6, span, p { font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; }
- {
-webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important;
}
.templatemo_clear { clear: both; }
.height30 { height: 30px; }
.templatemo-top-bar {
min-height: 40px; background-color:#eeeeee;
}
.templatemo-top-menu {
min-height:110px; background-color:#ffffff; z-index: 5000; width:100%;
}
.templatemo-top-menu .navbar-toggle {
margin-top: 38px;
}
.templatemo-top-menu .navbar-brand {
padding: 0; margin: 30px 0 0 0;
}
/* ------ Carousel ----- */
- templatemo-carousel {
background: url('../images/templatemo_carousel_bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow-x: hidden; margin-bottom:0; height: 500px;
}
- templatemo-carousel .carousel-caption {
z-index: 10;
}
- templatemo-carousel .item {
height: 500px;
}
- templatemo-carousel .carousel-inner > .item > img {
position: absolute; min-width: 100%; height: 500px; left: 0; top: 0;
}
@media (min-width: 768px) {
#templatemo-carousel .carousel-caption p { margin-bottom: 20px; line-height: 1.4; font-size: 21px; }
#templatemo-carousel .carousel-caption { padding-bottom: 140px; right: 20%; left: 20%; }
}
@media (max-width: 768px) {
#templatemo-carousel .carousel-caption { padding-bottom: 120px; }
}
@media (max-width: 1024px) {
#templatemo-carousel { background: url('../images/templatemo_carousel_bg_s.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow-x: hidden; margin-bottom:0; height: 500px; }
}
/* ------ End of Carousel ----- */
/* ------ Welcome & Slogna ------ */ .templatemo-welcome {
border-bottom: 1px solid #cccccc; min-height: 230px;
}
.templatemo-slogan {
font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 42px; margin: 60px 0; color: #333333;
}
.templatemo-service {
margin-bottom: 100px; margin-top: 100px;
}
.templatemo-service-item {
font-family: 'Open Sans', sans-serif; margin-bottom: 10px; font-size: 20px;
}
.templatemo-service-item p {
font-weight: lighter; text-align: justify; margin-top: 25px; font-size: 14px; color: #929292;
}
.subheader {
font-family: 'Open Sans', sans-serif; font-weight: normal; margin-top: 12px; font-size: 12px; color: #e67e22;
}
.btn-orange {
background-color: #ff7600; border-bottom:2px solid #d35400; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color:#ffffff;
}
.btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange {
background-color: #d35400; color:#ffffff;
}
.btn-green {
background-color:#2ecc71; border-bottom:2px solid #27ae60; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color:#ffffff;
}
.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green {
background-color: #27ae60; color:#ffffff;
}
.nav > li > a {
padding: 10px 20px;
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: #ff7600; color:#fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #ff7600; color:#fff;
}
.nav > li > a {
color: #929292;
}
.navbar-default {
background-color:#fff; border:none;
}
.nav li ul { display:none; }
.nav li:hover ul { display:inline; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #ff7600; color:#fff;
}
.navbar {
margin-bottom: 0px;
}
.templatemo-service-item-header {
margin-left: -10px; padding: 16px 20px 20px; font-weight: bold; display: inline-block;
}
.templatemo-header-orange {
background-color:#ff7600; min-width: 298px; height: 67px; color: #fff;
}
.tweet_txt { border-left:2px solid #ffffff; min-height:160px; }
.twitter_user { color: #FFFF33; font-size: 14px; float: right; }
.templatemo-partners { border-top: 2px solid #cccccc; }
.templatemo-partners .templatemo-partner-item {
margin-bottom: 5px;
}
.templatemo-footer { border-top: 2px solid #cccccc; margin-top: 100px; }
.footer_container { margin-top:60px; margin-bottom:20px; }
.footer_bottom_content { margin: auto; margin-bottom: 30px; font-size: 14px; color:#333333; }
.social-icon-fb {
background: url('../images/social-icon-fb.png') no-repeat; width: 42px; height: 42px; display: block;
}
a:hover .social-icon-fb {
background: url('../images/social-icon-fb-over.png') no-repeat;
}
.social-icon-rss {
background: url('../images/social-icon-rss.png') no-repeat; width: 42px; height: 42px; display: block;
}
a:hover .social-icon-rss {
background: url('../images/social-icon-rss-over.png') no-repeat;
}
.social-icon-twitter {
background: url('../images/social-icon-twitter.png') no-repeat; width: 42px; height: 42px; display: block;
}
a:hover .social-icon-twitter {
background: url('../images/social-icon-twitter-over.png') no-repeat;
}
.social-icon-linkedin {
background: url('../images/social-icon-linkedin.png') no-repeat; width: 42px; height: 42px; display: block;
}
a:hover .social-icon-linkedin {
background: url('../images/social-icon-linkedin-over.png') no-repeat;
}
.social-icon-dribbble {
background: url('../images/social-icon-dribbble.png') no-repeat; width: 42px; height: 42px; display: block;
}
a:hover .social-icon-dribbble {
background: url('../images/social-icon-dribbble-over.png') no-repeat;
}
.link_orange:hover {
text-decoration:none;
.form-control {
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-style: italic;
}
@media (min-width:991px) and (max-width:1200px) {
.templatemo-project-box, .project-overlay { height:170px; width:170px; }
.templatemo-project-gallery { margin-left: -70px; }
.templatemo-service-item-header { padding: 16px 10px 20px; }
.templatemo-header-orange { min-width: 230px; }
.team_box, .team_box_over { height:220px; width:220px; }
}
@media (max-width:991px) {
.team-inner { margin-top: 20px; margin-bottom: 20px; }
.templatemo-btn-read-more { float:right; margin-bottom :40px; }
}
@media (min-width:768px) and (max-width:990px) {
.member-thumb .thumb-overlay { padding-left: 30%; } .templatemo-project-box , .project-overlay { height:130px; width:130px; padding-top: 0px; }
.templatemo-project-gallery { margin-left: 10px; }
.blog_box{ margin-right: -140px; }
}
@media (min-width: 768px) {
.navbar-nav > li > a { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 768px) {
.member-thumb .thumb-overlay { padding-left: 40%; } .templatemo-btn-read-more { float:right; margin-bottom :40px; }
}
@media (max-width: 380px) {
.member-thumb .thumb-overlay { padding-left: 30%;
}
.templatemo-service-item-header { font-size: 16px;
padding: 23px 10px 22px; } .templatemo-header-orange { min-width: 0px; }
}
@media (min-width:991px) and (max-width: 1200px) { .team_hr { width: 37%; } }
@media (min-width:683px) and ( max-width: 991px) { .team_hr { width: 33%; } }
@media (min-width:585px) and ( max-width: 683px) {
.member-thumb .thumb-overlay { padding-left: 25%;
}
.team_hr { width: 30%; } }
@media (min-width:536px) and ( max-width: 585px) { .team_hr { width: 28%; } }
@media (min-width:410px) and ( max-width: 536px) { .team_hr { width: 21%; } }
@media ( max-width: 410px) { .team_hr { width: 11%; } }