Difference between revisions of "Team:EPF Lausanne/Test/css"

 
(36 intermediate revisions by the same user not shown)
Line 56: Line 56:
 
p { border-bottom: none;}
 
p { border-bottom: none;}
  
−
figure {
+
.prot-section figure {
 
   border: 1px solid black;
 
   border: 1px solid black;
 
   padding: 5px;
 
   padding: 5px;
Line 79: Line 79:
 
   border: none !important;
 
   border: none !important;
 
}
 
}
 +
/* ==========================================================================
 +
    Human practices
 +
  ========================================================================== */
 +
.human-part p {
 +
  text-align: justify;
 +
} 
 
/* ==========================================================================
 
/* ==========================================================================
 
     Header
 
     Header
Line 85: Line 91:
 
   display: block;
 
   display: block;
 
   min-width: 100%;
 
   min-width: 100%;
 +
  left: -22px;
 
}
 
}
 
.navbar {
 
.navbar {
Line 143: Line 150:
 
}
 
}
 
/* ==========================================================================
 
/* ==========================================================================
−
     Home-page
+
     Parts
 
   ========================================================================== */
 
   ========================================================================== */
−
.hero .carousel-indicators {
+
.parts a > h3 {
−
    bottom: -10px;
+
  color: #109798;
−
    left: 0;
+
}
−
    margin-left: 0;
+
.parts a > h3:hover {
−
    width: 100%;
+
  color: #981110;
 
}
 
}
−
    .hero .carousel-indicators li {
 
−
        border: none;
 
−
        border-radius: inherit;
 
−
        cursor: pointer;
 
−
        display: inline-block;
 
−
        height: 80px;
 
−
        margin: 0px;
 
−
        padding: 25px 0;
 
−
        opacity: .9;
 
−
        text-indent: 0;
 
−
    }
 
−
        .hero .carousel-indicators li .caption {
 
−
            font-size: 20px;
 
−
            font-weight: bold;
 
−
            height: 100%;
 
−
            text-transform: uppercase;
 
−
            width: 100%;
 
−
        }
 
−
.hero .carousel-indicators .col-sm-4 {
 
−
        width: 33.33333333333333%;
 
−
    }
 
−
 
  
 +
/* ==========================================================================
 +
    Home-page
 +
  ========================================================================== */
 
#carousel-home {
 
#carousel-home {
 
   padding-top: 30px;
 
   padding-top: 30px;
 +
  box-shadow: 0px 10px 5px #888888;
 
}
 
}
 
.carousel-inner {
 
.carousel-inner {
 
   text-align: center;
 
   text-align: center;
−
@media (max-width: 767px) {
 
−
    .hero .carousel-indicators .col-sm-3 {
 
−
        width: 10px;
 
−
    }
 
−
    .hero .carousel-indicators {
 
−
        bottom: 250px;
 
−
    }
 
−
        /* no change from bootstrap code */
 
−
        .hero .carousel-indicators li {
 
−
            background-color: #000 \9;
 
−
            background-color: rgba(0, 0, 0, 0);
 
−
            border: 1px solid #fff;
 
−
            border-radius: 10px;
 
−
            cursor: pointer;
 
−
            display: inline-block;
 
−
            height: 10px;
 
−
            margin: 1px;
 
−
            padding: 0;
 
−
            text-indent: -999px;
 
−
            width: 10px;
 
−
        }
 
−
        .hero .carousel-indicators .active {
 
−
            background-color: #fff;
 
−
            height: 12px;
 
−
            margin: 0;
 
−
            width: 12px;
 
−
        }
 
−
        .hero .carousel-indicators li .caption {
 
−
            display: none;
 
−
        }
 
 
}
 
}
−
.hero .carousel-inner .item .carousel-card {
+
.carousel-control.left,
−
     height: 500px;
+
.carousel-control.right {
−
    width: 100%;
+
     background-image: none;
 
}
 
}
−
.hero.container-fluid {
+
.carousel-control .icon-next,
−
    padding: 0;
+
.carousel-control .icon-prev {
 +
  color: black;
 
}
 
}
−
.hero .message-1 {
 
−
    background: #356DBF;
 
−
    color: #333;
 
−
}
 
−
.hero .message-2 {
 
−
    background: #3BBF6A;
 
−
    color: #333;
 
−
}
 
−
.hero .message-3 {
 
−
    background: #BF4042;
 
−
    color: #333;
 
−
}
 
−
.hero .message-4 {
 
−
    background: #BF2012;
 
−
    color: #333;
 
−
}
 
−
    .hero .message-1:hover,
 
−
    .hero .message-2:hover,
 
−
    .hero .message-3:hover,
 
−
    .hero .message-4:hover {
 
−
        color: #fff;
 
−
    }
 
−
    .hero .message-1:active,
 
−
    .hero .message-2:active,
 
−
    .hero .message-3:active,
 
−
    .hero .message-4:active {
 
−
        color: #fff;
 
−
        opacity: 1;
 
−
    }
 
−
.hero .btn.message-1,
 
−
.hero .btn.message-2,
 
−
.hero .btn.message-3,
 
−
.hero .btn.message-4 {
 
−
    color: #fff;
 
−
    font-size: 16px;
 
−
    font-weight: bold;
 
−
}
 
−
    .hero .btn.message-1:hover {
 
−
        background: #23497F;
 
−
    }
 
−
    .hero .btn.message-2:hover {
 
−
        background: #277F46;
 
−
    }
 
−
    .hero .btn.message-3:hover {
 
−
        background: #7F2B2C;
 
−
    }
 
−
    .hero .btn.message-4:hover {
 
−
        background: #BF2012;
 
−
    }
 
−
.hero h1.message-1,
 
−
.hero h1.message-1:hover,
 
−
.hero h1.message-2,
 
−
.hero h1.message-2:hover,
 
−
.hero h1.message-3,
 
−
.hero h1.message-3:hover
 
−
.hero h1.message-4,
 
−
.hero h1.message-4:hover {
 
−
    background: none;
 
−
    color: #fff;
 
−
}
 
−
.hero .carousel-indicators {
 
−
    bottom: -10px;
 
−
    left: 0;
 
−
    margin-left: 0;
 
−
    width: 100%;
 
−
}
 
−
    .hero .carousel-indicators li {
 
−
        border: none;
 
−
        border-radius: inherit;
 
−
        cursor: pointer;
 
−
        display: inline-block;
 
−
        height: 80px;
 
−
        margin: 0px;
 
−
        padding: 25px 0;
 
−
        opacity: .9;
 
−
        text-indent: 0;
 
−
    }
 
−
    .hero .carousel-indicators .col-sm-4 {
 
−
        width: 33.33333333333333%;
 
−
    }
 
−
    .hero .carousel-indicators .col-sm-3 {
 
−
        width: 25%;
 
−
    }
 
−
    .hero .carousel-indicators .active {
 
−
        height: 80px;
 
−
        opacity: 1;
 
−
    }
 
−
    .hero .carousel-indicators li .caption {
 
−
        font-size: 20px;
 
−
        font-weight: bold;
 
−
        height: 100%;
 
−
        text-transform: uppercase;
 
−
        width: 100%;
 
−
    }
 
−
    .hero .carousel-indicators li.active .caption {
 
−
        background: inherit;
 
−
        box-shadow: 0.157px 2.996px 4px 0px #5a5a5a;
 
−
        color: #fff;
 
−
        height: 110px;
 
−
        padding: 40px 20px;
 
−
        position: absolute;
 
−
        opacity: 1;
 
−
        top: -15px;
 
−
        z-index: 100;
 
−
    }
 
−
.hero .carousel-inner .item {
 
−
    height: 500px;
 
−
}
 
−
    .hero .carousel-inner .item .carousel-card {
 
−
        height: 500px;
 
−
        width: 100%;
 
−
    }
 
−
.hero .carousel-caption {
 
−
    bottom: 100px;
 
−
}
 
−
    .hero .carousel-caption h1 {
 
−
        font-size: 45px;
 
−
        margin-bottom: 30px;
 
−
    }
 
−
@media (max-width: 991px) {
 
−
    .hero .carousel-indicators li .caption {
 
−
        font-size: 17px;
 
−
    }
 
−
}
 
−
@media (max-width: 767px) {
 
−
    .hero .carousel-indicators .col-sm-4 {
 
−
        width: 10px;
 
−
    }
 
−
    .hero .carousel-indicators .col-sm-3 {
 
−
        width: 10px;
 
−
    }
 
−
    .hero .carousel-indicators {
 
−
        bottom: 250px;
 
−
    }
 
−
        /* no change from bootstrap code */
 
−
        .hero .carousel-indicators li {
 
−
            background-color: #000 \9;
 
−
            background-color: rgba(0, 0, 0, 0);
 
−
            border: 1px solid #fff;
 
−
            border-radius: 10px;
 
−
            cursor: pointer;
 
−
            display: inline-block;
 
−
            height: 10px;
 
−
            margin: 1px;
 
−
            padding: 0;
 
−
            text-indent: -999px;
 
−
            width: 10px;
 
−
        }
 
−
        .hero .carousel-indicators .active {
 
−
            background-color: #fff;
 
−
            height: 12px;
 
−
            margin: 0;
 
−
            width: 12px;
 
−
        }
 
−
        .hero .carousel-indicators li .caption {
 
−
            display: none;
 
−
        }
 
−
    .hero .carousel-inner .item {
 
−
        height: 600px;
 
−
    }
 
−
        .hero .carousel-inner .item .carousel-card {
 
−
            background-position: 50% 0;
 
−
            height: 400px;
 
−
            width: 100%;
 
−
        }
 
−
    .hero .carousel-caption {
 
−
        bottom: 0px;
 
−
    }
 
−
    .hero h1.message-1,
 
−
    .hero h1.message-1:hover {
 
−
        background: none;
 
−
        color: #23497F;
 
−
    }
 
−
    .hero h1.message-2,
 
−
    .hero h1.message-2:hover {
 
−
        background: none;
 
−
        color: #277F46;
 
−
    }
 
−
    .hero h1.message-3,
 
−
    .hero h1.message-3:hover {
 
−
        background: none;
 
−
        color: #7F2B2C;
 
−
    }
 
−
}
 
−
@media (max-width: 500px) {
 
−
    .hero .carousel-caption h1 {
 
−
        font-size: 35px;
 
−
    }
 
−
}
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
 
#Tour-section {
 
#Tour-section {
Line 503: Line 259:
 
   background: url('https://static.igem.org/mediawiki/2015/9/94/EPF_Lausanne_Banner_DNA.png.png') no-repeat top center;
 
   background: url('https://static.igem.org/mediawiki/2015/9/94/EPF_Lausanne_Banner_DNA.png.png') no-repeat top center;
 
   background-size: cover;
 
   background-size: cover;
 +
}
 +
/* ==========================================================================
 +
    Button
 +
  ========================================================================== */
 +
.btn {
 +
    padding: 14px 24px;
 +
    border: 0 none;
 +
    font-weight: 700;
 +
    letter-spacing: 1px;
 +
    text-transform: uppercase;
 +
}
 +
 +
.btn:focus, .btn:active:focus, .btn.active:focus {
 +
    outline: 0 none;
 +
}
 +
 +
.btn-primary {
 +
    background: #0099cc;
 +
    color: #ffffff;
 +
}
 +
 +
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
 +
    background: #33a6cc;
 +
}
 +
 +
.btn-primary:active, .btn-primary.active {
 +
    background: transparent;
 +
    box-shadow: none;
 +
}
 +
.btn.outline {
 +
    background: none;
 +
    padding: 12px 22px;
 +
}
 +
.btn-primary.outline {
 +
    border: 2px solid #0099cc;
 +
    color: #0099cc;
 +
}
 +
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
 +
    color: #33a6cc;
 +
    border-color: #33a6cc;
 +
}
 +
.btn-primary.outline:active, .btn-primary.outline.active {
 +
    border-color: #007299;
 +
    color: #007299;
 +
    box-shadow: none;
 
}
 
}
 
/* ==========================================================================
 
/* ==========================================================================
Line 640: Line 441:
 
   width: 100%;
 
   width: 100%;
 
padding: 60px 0px;
 
padding: 60px 0px;
−
 
 
}
 
}
 
.classy-bar h3 {
 
.classy-bar h3 {
 
   position: relative;
 
   position: relative;
−
color: black;
+
color: #032222;
 
font-size: 34px;
 
font-size: 34px;
 
font-weight: 800;
 
font-weight: 800;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
   top: -20px;
 
   top: -20px;
 +
  margin-top: 50px;
 +
  letter-spacing: 6px;
 
}
 
}
 
.classy-bar h2 {
 
.classy-bar h2 {
 
   position: relative;
 
   position: relative;
−
color: black;
+
color: #032222;
 
font-size: 34px;
 
font-size: 34px;
 
font-weight: 800;
 
font-weight: 800;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
   top: -20px;
 
   top: -20px;
 +
  margin-top: 50px;
 +
  letter-spacing: 6px;
 
}
 
}
 
/* ==========================================================================
 
/* ==========================================================================
Line 1,031: Line 835:
 
}
 
}
 
#footer-right p {
 
#footer-right p {
−
margin-left: 23%;
 
−
}
 
−
#icons {
 
 
margin-left: 23%;
 
margin-left: 23%;
 
}
 
}
Line 1,041: Line 842:
 
}
 
}
  
−
 
+
/*<!-- TABLE -->*/
−
<!-- TABLE -->
+
 
table a:link {
 
table a:link {
 
color: #707070 ;
 
color: #707070 ;

Latest revision as of 20:14, 16 September 2015

EPFL 2015 iGEM bioLogic Logic Orthogonal gRNA Implemented Circuits