Difference between revisions of "Team:TEC-Costa Rica/Template:Stylesheet"

Line 1: Line 1:
 
<html>
 
<html>
<head>
+
<link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">  
    <meta charset="utf-8">
+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0,width=device-width"/>
+
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
<style type="text/css">
<link rel="stylesheet" href="https://2016.igem.org/Team:TEC-Costa_Rica/css/stylesheet.css">
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
</head>
+
<body>
+
<header>
+
  <div class="container">
+
<navbar class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
<div class="container-fluid">
+
<div class="navbar-header">
+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+
<span class="sr-only">Toggle navigation</span>
+
<span class="icon-bar" ></span>
+
<span class="icon-bar"></span>
+
<span class="icon-bar"></span>
+
</button>
+
<a class="navbar-brand" href="https://2016.igem.org/Team:TEC-Costa_Rica">
+
<img id="prostal-logo" alt="Prostal Brand" class="featurette-image img-responsive center-block" src="https://static.igem.org/mediawiki/2016/0/0e/T--TEC-Costa_Rica--prostal_logo.png"></a>
+
</div>
+
  
<div id="navbar" class="collapse navbar-collapse pull-right">
+
/* Setting the WIKI config to default. START */
<ul class="nav navbar-nav">
+
* {
<li class="dropdown active"><a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica">Home</a></li>
+
margin: 0;
<li class="dropdown">
+
padding: 0;
<a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Team">Team</a>
+
border: 0;
<ul class="dropdown-menu">
+
font-size: 100%;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Members">Members</a></li>
+
font: inherit;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Instructors">Instructors</a></li>
+
vertical-align: baseline;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Advisors">Advisors</a></li>
+
}
<li class="divider"></li>
+
#globalWrapper {
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Team/Sponsors">Sponsors</a></li>
+
margin: 0 auto;
</ul>
+
padding: 0;
</li>
+
top: 0;
<li class="dropdown">
+
left: 0;
<a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Project">Project</a>
+
bottom: 0;
<ul class="dropdown-menu">
+
width: 100%;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/System">System</a></li>
+
height: auto;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations">Modelling & Simulations</a></li>
+
position: relative;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Parts">Parts</a></li>
+
overflow: visible;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Collaborations">Collaborations</a></li>
+
background-color: transparent;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Safety">Safety</a></li>
+
}
</ul>
+
#content {
</li>
+
margin: 0;
<li class="dropdown">
+
padding: 0;
<a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging">Judging</a>
+
border: none;
<ul class="dropdown-menu">
+
top: 0;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Golden_Medals">Golden Medals</a></li>
+
left: 0;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Silver_Medals">Silver Medals</a></li>
+
bottom: 0;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Judging/Bronze_Medals">Bronze Medals</a></li>
+
width: 100%;
</ul>
+
height: auto;
</li>
+
position: relative;
<li class="dropdown">
+
z-index: 1;
<a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice">Human Practice</a>
+
background-color: transparent;
<ul class="dropdown-menu">
+
}
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon">Synbiothon</a></li>
+
#bodyContent, #HQ_page, #mw-content-text {
</ul>
+
margin: 0 auto;
</li>
+
padding: 0;
<li class="dropdown">
+
border: none;
<a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook">Notebook</a>
+
border-color: none;
<ul class="dropdown-menu">
+
top: 0;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook/Laboratory">Laboratory</a></li>
+
left: 0;
<li><a href="https://2016.igem.org/Team:TEC-Costa_Rica/Notebook/Protocols">Protocols</a></li>
+
bottom: 0;
</ul>
+
height: auto;
</li>
+
width: 100%;
<li class="dropdown"><a style="color: #e0e0d1;" href="https://2016.igem.org/Team:TEC-Costa_Rica/Interlab">Interlab</a></li>
+
position: relative;
</ul>
+
background-color: transparent;
</div>
+
}
</div>
+
#top_title, #sideMenu, #top_menu_under { display: none; }
</navbar>
+
#top_menu_14 { position: fixed; }
</div>
+
/* Setting the WIKI config to default. END */
</header>
+
 
</body>
+
body {
</html>
+
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/4/4c/T--TEC-Costa_Rica--gplaypattern_background.png') top left repeat;
{{:Team:TEC-Costa_Rica/Template:Stylesheet}}
+
}
<html>
+
#HQ_page h1, #HQ_page h2, #HQ_page h3 { font-family: 'Poppins', sans-serif; }
<body>
+
#HQ_page h1 { font-size: 26px; }
<main class="home">
+
#HQ_page h2 { font-size: 22px; }
<!-- Carousel
+
#HQ_page h3 { font-size: 18px; }
================================================== -->
+
#HQ_page p {
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
font-family: 'Lato', sans-serif;
  <!-- Indicators -->
+
font-size: 16px;
  <ol class="carousel-indicators">
+
margin: 0;
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
padding: 0;
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
border: 0;
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
text-align: justify;
  </ol>
+
}
  <div class="carousel-inner" role="listbox">
+
 
    <div class="item active">
+
/* NAVBAR settings. START */
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
+
navbar {
      <div class="carousel-caption">
+
box-shadow: 5px 4px 5px #000;
        <h1>Phasellus rutrum vitae.</h1>
+
font-family: 'Open Sans', sans-serif;
        <p style="text-align: center;">Proin laoreet scelerisque tellus, vel aliquet eros porta maximus.</p>
+
margin-top: 16px;
      </div>
+
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/7/7e/T--TEC-Costa_Rica--lodyas_background.png') top left repeat;
    </div>
+
}
  </div>
+
.navbar-nav li a {
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+
line-height: 25px;
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
font-family: 'Oswald', sans-serif;
    <span class="sr-only">Previous</span>
+
font-weight: normal;
  </a>
+
font-size: 18px;
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+
}
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
.dropdown .dropdown-menu { margin: 0; }
    <span class="sr-only">Next</span>
+
.dropdown:hover {
  </a>
+
border-bottom: 2px solid white;
</div><!-- /.carousel -->
+
background-color: black;
</main>
+
}
</body>
+
.active {
 +
border-bottom: 2px solid white;
 +
}
 +
.navbar-toggle {
 +
margin-top: 15px;
 +
}
 +
.navbar-brand {
 +
padding-top: 7.5px;
 +
}
 +
.navbar-brand img {
 +
height: 50px;
 +
width: 125px;
 +
}
 +
.navbar .container-fluid {
 +
width: 85%;
 +
}
 +
/* NAVBAR settings. START */
 +
 
 +
/* MAIN settings. START */
 +
.well {
 +
background-color: rgba(245, 245, 245, 0.5);
 +
}
 +
 
 +
main {
 +
width: 85%;
 +
height: 100%;
 +
display: block;
 +
margin: auto;
 +
margin-top: 90px;
 +
position: relative;
 +
padding-bottom: 200px;
 +
padding-left: 25;
 +
padding-right: 25;
 +
}
 +
 
 +
main li {
 +
font-family: 'Lato', sans-serif;
 +
font-size: 16px;
 +
}
 +
 
 +
main h1, main h2, main h3 {
 +
margin: 0;
 +
}
 +
 
 +
.home {
 +
width: 100%
 +
}
 +
 
 +
.modelling_simulations img {
 +
height: 400px;
 +
width: 400px;
 +
}
 +
 
 +
 
 +
/* CUSTOMIZE THE CAROUSEL
 +
-------------------------------------------------- */
 +
 
 +
.carousel { height: 500px; }
 +
.carousel-caption { z-index: 10; }
 +
.carousel .item {
 +
height: 500px;
 +
background-color: #777;
 +
}
 +
.carousel-inner > .item > img {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
min-width: 100%;
 +
height: 500px;
 +
}
 +
.carousel-indicators, .mw-content-ltr ol {
 +
position: absolute;
 +
bottom: 10px;
 +
left: 50%;
 +
z-index: 15;
 +
width: 60%;
 +
padding-left: 0;
 +
margin-left: -30%;
 +
text-align: center;
 +
list-style: none;
 +
}
 +
 
 +
.carousel-caption {
 +
background-color: rgba(0, 0, 0, 0.5);
 +
padding: 20px;
 +
width: 100%;
 +
right: 0;
 +
left: 0;
 +
}
 +
 
 +
.carousel-caption p {
 +
text-align: center;
 +
}
 +
 
 +
main .team-header img {
 +
height: 75%;
 +
width: 80%;
 +
display: block;
 +
margin: 0 auto 0 auto;
 +
}
 +
main .team-header h1 {
 +
text-align: center;
 +
margin: 10px 0 10px 0;
 +
}
 +
 
 +
/* FOOTER settings. START */
 +
footer {
 +
background-color: #3c3d41;
 +
padding: 20px;
 +
color: rgba(255, 255, 255, 1.00);
 +
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/7/7e/T--TEC-Costa_Rica--lodyas_background.png') top left repeat;
 +
width: 100%;
 +
height: auto;
 +
bottom: 0;
 +
}
 +
footer .row {
 +
width: 85%;
 +
height: auto;
 +
display: block;
 +
margin: 0 auto 0 auto;
 +
}
 +
footer .col-md-4 {
 +
padding: 0 25px;
 +
height: auto;
 +
border-color: transparent;
 +
}
 +
.footer-brand img { display: inline; }
 +
.footer-brand #igem-logo {
 +
height: 50px;
 +
width: 50px;
 +
}
 +
.footer-brand #tec-costarica-logo {
 +
height: 40px;
 +
width: 125px;
 +
}
 +
.footer-brand p {
 +
font-size: 12px;
 +
color: rgba(255, 255, 255, 0.70);
 +
text-align: left;
 +
font-family: 'Lato', sans-serif;
 +
}
 +
.footer-sponsors .sponsors {
 +
list-style: none;
 +
margin-left: 0;
 +
}
 +
.footer-sponsors .sponsors li { margin-bottom: 5px; }
 +
.footer-sponsors #logo-lisanatura {
 +
height: 40px;
 +
width: 125px;
 +
}
 +
.footer-sponsors #logo-ipci {
 +
height: 90px;
 +
width: 140px;
 +
}
 +
.footer-sponsors #logo-enhmed {
 +
height: 80px;
 +
width: 100px;
 +
}
 +
.footer-sponsors #logo-snapgene {
 +
height: 40px;
 +
width: 125px;
 +
}
 +
footer .footer-social .social-media {
 +
list-style: none;
 +
margin: 0;
 +
}
 +
footer .footer-social .social-media li {
 +
display: inline;
 +
padding: 0;
 +
margin: 0;
 +
margin-left: 5px;
 +
}
 +
footer .footer-social .social-media li img {
 +
height: 40px;
 +
width: 40px;
 +
}
 +
footer h4 {
 +
font-family: 'Oswald', sans-serif;
 +
font-size: 12px;
 +
font-style: bold;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
margin-bottom: 20px;
 +
}
 +
 
 +
/* RESPONSIVE CSS
 +
-------------------------------------------------- */
 +
@media (min-width: 768px) {
 +
footer .footer-sponsors, footer .footer-social {
 +
border-left: solid 1px rgba(255, 255, 255, 0.10);
 +
}
 +
}
 +
@media (min-width: 768px) {
 +
  /* Bump up size of carousel content */
 +
  .carousel-caption p {
 +
    margin-bottom: 20px;
 +
    font-size: 21px;
 +
    line-height: 1.4;
 +
  }
 +
}
 +
/* FOOTER settings. END */
 +
</style>
 
</html>
 
</html>
{{:Team:TEC-Costa_Rica/Template:Scripts}}
 
{{:Team:TEC-Costa_Rica/Template:Footer}}
 

Revision as of 23:05, 19 September 2016