Difference between revisions of "Template:Edinburgh ImprChar"

(Created page with "<html> <!-- Start of CSS--> <style type="text/css"> #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear { display:...")
 
 
(3 intermediate revisions by 2 users not shown)
Line 28: Line 28:
 
height: 100%;
 
height: 100%;
 
border: 0px;
 
border: 0px;
−
background-color: #391919;
+
background-color: #000;
 
margin: 0px;
 
margin: 0px;
 
padding: 0px;
 
padding: 0px;
Line 40: Line 40:
 
margin-left: auto;
 
margin-left: auto;
 
margin-right: auto;
 
margin-right: auto;
−
background-color: #391919;
+
background-color: #000;
 
padding: 0px;
 
padding: 0px;
 
font-size: 100%;
 
font-size: 100%;
Line 53: Line 53:
 
         margin: 0px;
 
         margin: 0px;
 
         padding: 0px;
 
         padding: 0px;
−
         background-color: #391919;
+
         background-color: #000;
 
         -webkit-background-size: cover;
 
         -webkit-background-size: cover;
 
         -moz-background-size: cover;
 
         -moz-background-size: cover;
Line 66: Line 66:
 
     font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
     font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
 
     color: #fff;
 
     color: #fff;
−
     background-color: #391919;
+
     background-color: #000;
 
}
 
}
  
Line 111: Line 111:
 
     text-align: center;
 
     text-align: center;
 
     color: #fff;
 
     color: #fff;
−
     background-color: #391919;
+
     background-color: #000;
−
     background: url("https://static.igem.org/mediawiki/2015/6/62/Edigem15_practices_Story.png") no-repeat bottom center scroll;  
+
     background: url("https://static.igem.org/mediawiki/2015/3/38/Edigem15_improvedcharacterisation_bannerimage.jpeg") no-repeat bottom center scroll;  
 
     -webkit-background-size: cover;
 
     -webkit-background-size: cover;
 
     -moz-background-size: cover;
 
     -moz-background-size: cover;
Line 141: Line 141:
 
         height: 100%;
 
         height: 100%;
 
         padding: 0;
 
         padding: 0;
−
         box-shadow: 0 -100px 100px #391919 inset;
+
         box-shadow: 0 -100px 100px #000 inset;
 
     }
 
     }
  
Line 220: Line 220:
  
 
section h3.section-subheading {
 
section h3.section-subheading {
 +
color: #fff;
 
     margin-bottom: 75px;
 
     margin-bottom: 75px;
 
     text-transform: none;
 
     text-transform: none;
Line 238: Line 239:
 
}
 
}
  
−
 
+
.arrowtext
−
/*timeline */
+
{
−
 
+
     width: 100%;
−
.timeline {
+
     display: block;
−
     position: relative;
+
−
    padding:4px 0 0 0;
+
−
    margin-top:22px;
+
−
     list-style: none;
+
 
}
 
}
  
−
.timeline>li:nth-child(even) {
+
.arrow
−
     position: relative;
+
{
−
    margin-bottom: 50px;
+
     height: 50px;
−
     height: 180px;
+
     width: 100px;
−
     right:-100px;
+
     opacity: 0.7;
 
}
 
}
  
−
.timeline>li:nth-child(odd) {
+
/*menu*/
−
    position: relative;
+
−
    margin-bottom: 50px;
+
−
    height: 180px;
+
−
    left:-100px;
+
−
}
+
−
 
+
−
.timeline>li:before,
+
−
.timeline>li:after {
+
−
    content: " ";
+
−
    display: table;
+
−
}
+
−
 
+
−
.timeline>li:after {
+
−
    clear: both;
+
−
    min-height: 170px;
+
−
}
+
−
 
+
−
.timeline > li .timeline-panel {
+
−
  position: relative;
+
−
  float: left;
+
−
  width: 41%;
+
−
  padding: 0 20px 20px 30px;
+
−
  text-align: right;
+
−
}
+
−
 
+
−
.timeline>li .timeline-panel:before {
+
−
    right: auto;
+
−
    left: -15px;
+
−
    border-right-width: 15px;
+
−
    border-left-width: 0;
+
−
}
+
−
 
+
−
.timeline>li .timeline-panel:after {
+
−
    right: auto;
+
−
    left: -14px;
+
−
    border-right-width: 14px;
+
−
    border-left-width: 0;
+
−
}
+
−
 
+
−
.timeline>li .timeline-image {
+
−
    z-index: 100;
+
−
    position: absolute;
+
−
    left: 50%;
+
−
    border: 7px solid #fff;
+
−
    border-radius: 100%;
+
−
    background-color: #fff;
+
−
    box-shadow: 0 0 5px #fff;
+
−
    width: 200px;
+
−
    height: 200px;
+
−
    margin-left: -100px;
+
−
}
+
−
 
+
−
.timeline>li .timeline-image h4 {
+
−
    margin-top: 12px;
+
−
    font-size: 10px;
+
−
    line-height: 14px;
+
−
}
+
−
 
+
−
.timeline>li.timeline-inverted>.timeline-panel {
+
−
    float: right;
+
−
    padding: 0 30px 20px 20px;
+
−
    text-align: left;
+
−
}
+
−
 
+
−
.timeline>li.timeline-inverted>.timeline-panel:before {
+
−
    right: auto;
+
−
    left: -15px;
+
−
    border-right-width: 15px;
+
−
    border-left-width: 0;
+
−
}
+
−
 
+
−
.timeline>li.timeline-inverted>.timeline-panel:after {
+
−
    right: auto;
+
−
    left: -14px;
+
−
    border-right-width: 14px;
+
−
    border-left-width: 0;
+
−
}
+
−
 
+
−
.timeline>li:last-child {
+
−
    margin-bottom: 0;
+
−
}
+
−
 
+
−
.timeline .timeline-heading h4 {
+
−
  margin-top:22px;
+
−
    margin-bottom: 4px;
+
−
    padding:0;
+
−
    color: #b3b3b3;
+
−
}
+
−
 
+
−
.timeline .timeline-heading h4.subheading {
+
−
  margin:0;
+
−
  padding:0;
+
−
    text-transform: none;
+
−
    font-size:18px;
+
−
    color:#333333;
+
−
}
+
−
 
+
−
.timeline .timeline-body>p,
+
−
.timeline .timeline-body>ul {
+
−
    margin-bottom: 0;
+
−
    color:#808080;
+
−
}
+
−
/*Style for even div.line*/
+
−
.timeline>li:nth-child(odd) .line:before {
+
−
    content: "";
+
−
    position: absolute;
+
−
    top: 60px;
+
−
    bottom: 0;
+
−
    left: 690px;
+
−
    width: 4px;
+
−
    height:340px;
+
−
    background-color: #fff;
+
−
    -ms-transform: rotate(-44deg); /* IE 9 */
+
−
    -webkit-transform: rotate(-44deg); /* Safari */
+
−
    transform: rotate(-44deg);
+
−
    box-shadow: 0 0 5px #fff;
+
−
}
+
−
/*Style for odd div.line*/
+
−
.timeline>li:nth-child(even) .line:before  {
+
−
    content: "";
+
−
    position: absolute;
+
−
    top: 60px;
+
−
    bottom: 0;
+
−
    left: 450px;
+
−
    width: 4px;
+
−
    height:340px;
+
−
    background-color: #fff;
+
−
    -ms-transform: rotate(44deg); /* IE 9 */
+
−
    -webkit-transform: rotate(44deg); /* Safari */
+
−
    transform: rotate(44deg);
+
−
    box-shadow: 0 0 5px #fff;
+
−
}
+
−
/* Medium Devices, .visible-md-* */
+
−
@media (min-width: 992px) and (max-width: 1199px) {
+
−
  .timeline > li:nth-child(even) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    right: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(even) .timeline-image {
+
−
    left: 0;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(odd) .timeline-image {
+
−
    left: 690px;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 76%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: left;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: right;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
−
  }
+
−
}
+
−
/* Small Devices, Tablets */
+
−
@media (min-width: 768px) and (max-width: 991px) {
+
−
  .timeline > li:nth-child(even) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    right: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(even) .timeline-image {
+
−
    left: 0;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline>li:nth-child(odd) .timeline-image {
+
−
    left: 520px;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: left;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 70%;
+
−
    padding: 0 0 20px 0px;
+
−
    text-align: right;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
−
  }
+
−
}
+
−
/* Custom, iPhone Retina */
+
−
@media only screen and (max-width: 767px) {
+
−
  .timeline > li:nth-child(even) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    right: 0px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) {
+
−
    margin-bottom: 0px;
+
−
    min-height: 0px;
+
−
    left: 0px;
+
−
  }
+
−
  .timeline>li .timeline-image {
+
−
    position: static;
+
−
    width: 150px;
+
−
    height: 150px;
+
−
    margin-bottom:0px;
+
−
  }
+
−
  .timeline>li:nth-child(even) .timeline-image {
+
−
    left: 0;
+
−
    margin-left: 0;
+
−
  }
+
−
  .timeline>li:nth-child(odd) .timeline-image {
+
−
    float:right;
+
−
    left: 0px;
+
−
    margin-left:0;
+
−
  }
+
−
  .timeline > li:nth-child(even) .timeline-panel {
+
−
    width: 100%;
+
−
    padding: 0 0 20px 14px;
+
−
  }
+
−
  .timeline > li:nth-child(odd) .timeline-panel {
+
−
    width: 100%;
+
−
    padding: 0 14px 20px 0px;
+
−
  }
+
−
  .timeline > li .line {
+
−
    display: none;
+
−
  }
+
−
}
+
  
 
#custom-bootstrap-menu.navbar-default .navbar-brand {
 
#custom-bootstrap-menu.navbar-default .navbar-brand {
Line 500: Line 258:
 
}
 
}
 
#custom-bootstrap-menu.navbar-default {
 
#custom-bootstrap-menu.navbar-default {
−
     font-size: 20px;
+
     font-size: 18px;
 
     background-color: rgba(34, 34, 34, 1);
 
     background-color: rgba(34, 34, 34, 1);
 
     border-bottom-width: 0px;
 
     border-bottom-width: 0px;
Line 507: Line 265:
 
     color: rgba(255, 255, 255, 1);
 
     color: rgba(255, 255, 255, 1);
 
     background-color: rgba(34, 34, 34, 1);
 
     background-color: rgba(34, 34, 34, 1);
 +
    padding-left:5px;
 +
    padding-right:5px;
 +
    padding-top: 10px;
 
}
 
}
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
Line 533: Line 294:
 
     background-color: #222222;
 
     background-color: #222222;
 
}
 
}
 +
 +
/*end menu*/
  
 
</style>
 
</style>

Latest revision as of 19:15, 20 November 2015