Template:Team:Braunschweig/CSS TU-BS style

From 2014.igem.org

(Difference between revisions)
Line 210: Line 210:
}
}
-
.nav li ul {
+
.nav > li > ul {
display:none;
display:none;
}
}
-
.nav li:hover ul {
+
.nav > li:hover ul {
display:inline;
display:inline;
         list-style:none;
         list-style:none;

Revision as of 20:15, 22 September 2014

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 ----- */

  1. templatemo-carousel { 
   background: url('https://orionhub.org/file/yenni-OrionContent/iGEM-BS/web/images/TU-BS_Slider.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;

}

  1. templatemo-carousel .carousel-caption { 
   z-index: 10;

}

  1. templatemo-carousel .item { 
   height: 500px;

}

  1. 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; 

       list-style:none;

}

.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%; } }

Retrieved from "http://2014.igem.org/Template:Team:Braunschweig/CSS_TU-BS_style"