Template:Aalto-Helsinki--emilia.css

.teamphoto { background: url('/wiki/images/1/11/T--Aalto-Helsinki--people.jpg') no-repeat; background-size: 100%; background-position: 0% 30%; height: 110%; width: 100%; /*background: #cc6055;*/

   position: fixed;
   z-index: 0;

}

.lakephoto {

   /*background: url('/2016/img/jarvi.jpg.jpg') no-repeat;*/
   background: url('/wiki/images/e/ed/T--Aalto-Helsinki--wiki18.jpg') no-repeat;
   background-size: 100%;
   background-size: cover;
   background-position: 0% 30%;
   height: 110%;
   width: 100%;
   position: fixed;
   z-index: 0;

}

ul.topnav li a.current { color: #A5410B;

}

ul.topnav li a img { position:absolute; width:10%; }

ul.botnav li a.active { 
  color: #A5410B;
}

.section { /*background: url('file:///C:/Users/Saara/Documents/iGEM/Aalto-Helsinki-2016-Wiki/img/trees.png') no-repeat;*/ /*background-size: 100%;*/ position: relative;

   margin-left: 0;

margin-right: 0; margin-top: 0;

   padding: 0;

height: 130px;

   background-color:  #b1834f;
   overflow: hidden;

font-size: 20px; text-align: center; color: white; padding-top: 23px; -webkit-box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.24); -moz-box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.24); box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.24); }

.section p { margin: 0; }

.algaephoto { margin-bottom: 30px; margin-right: 15px; vertical-align: middle; float: left; width: 30%; border: 5px; }

.box-shadow { position: relative; float: right; }

.box-shadow::after {

   box-shadow: inset 0 0 10px 10px white;
   bottom: 0;
   content: "";
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;

height: 90%;

   width: 30%;

}

section h2 { display: block; margin-top: 250px; font-size: 70px; color: white; }

p.justify { text-align: justify; }

.modelingphoto { background: url('/wiki/images/8/87/T--Aalto-Helsinki--wiki05.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%;

   position: fixed;
   z-index: 0;

}

.hpphoto { background: url('/wiki/images/8/8c/T--Aalto-Helsinki--wiki10.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%;

   position: fixed;
   z-index: 0;

}

.collabphoto { background: url('/wiki/images/8/88/T--Aalto-Helsinki--wiki14.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%;

   position: fixed;
   z-index: 0;

}

.achievementsphoto { background: url('/wiki/images/e/eb/T--Aalto-Helsinki--wiki09.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%;

   position: fixed;
   z-index: 0;

}

progress {

 /* Positioning */
 position: fixed;
 left: 0;
 bottom: 0;
 margin-bottom: 47px;

 /* Dimensions */
 width: 100%;
 height: 3px;

 /* Reset the appearance */
 -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;

 /* Get rid of the default border in Firefox/Opera. */
 border: none;

 /* Progress bar container for Firefox/IE10+ */
 background-color: transparent;

 /* Progress bar value for IE10+ */
 color: #A5410B;

}

progress::-webkit-progress-bar {

 background-color: transparent;

}

progress::-webkit-progress-value {

 background-color: #A5410B;

}

progress::-moz-progress-bar {

 background-color: #A5410B;

}

.title { font-family: 'bebas_neuebold'; font-size: 120px; letter-spacing: 2px; text-shadow: 4px 4px 0px rgba(0,0,0,0.2);

}

.timeline {

   list-style: none;
   padding: 20px 0 20px;
   position: relative;

}

   .timeline:before {
       top: 0;
       bottom: 0;
       position: absolute;
       content: " ";
       width: 3px;
       background-color: #eeeeee;
       left: 50%;
       margin-left: -1.5px;
   }

   .timeline > li {
       margin-bottom: 20px;
       position: relative;
   }

       .timeline > li:before,
       .timeline > li:after {
           content: " ";
           display: table;
       }

       .timeline > li:after {
           clear: both;
       }

       .timeline > li:before,
       .timeline > li:after {
           content: " ";
           display: table;
       }

       .timeline > li:after {
           clear: both;
       }

       .timeline > li > .timeline-panel {
           width: 46%;
           float: left;
           border: 1px solid #d4d4d4;
           border-radius: 2px;
           padding: 20px;
           position: relative;
           -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
           box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
       }

           .timeline > li > .timeline-panel:before {
               position: absolute;
               top: 26px;
               right: -15px;
               display: inline-block;
               border-top: 15px solid transparent;
               border-left: 15px solid #ccc;
               border-right: 0 solid #ccc;
               border-bottom: 15px solid transparent;
               content: " ";
           }

           .timeline > li > .timeline-panel:after {
               position: absolute;
               top: 27px;
               right: -14px;
               display: inline-block;
               border-top: 14px solid transparent;
               border-left: 14px solid #fff;
               border-right: 0 solid #fff;
               border-bottom: 14px solid transparent;
               content: " ";
           }

       .timeline > li > .timeline-badge {
           color: #fff;
           width: 50px;
           height: 50px;
           line-height: 50px;
           font-size: 1.4em;
           text-align: center;
           position: absolute;
           top: 16px;
           left: 50%;
           margin-left: -25px;
           background-color: #999999;
           z-index: 100;
           border-top-right-radius: 50%;
           border-top-left-radius: 50%;
           border-bottom-right-radius: 50%;
           border-bottom-left-radius: 50%;
       }

       .timeline > li.timeline-inverted > .timeline-panel {
           float: right;
       }

           .timeline > li.timeline-inverted > .timeline-panel:before {
               border-left-width: 0;
               border-right-width: 15px;
               left: -15px;
               right: auto;
           }

           .timeline > li.timeline-inverted > .timeline-panel:after {
               border-left-width: 0;
               border-right-width: 14px;
               left: -14px;
               right: auto;
           }

.timeline-badge.primary {

   background-color: #2e6da4 !important;

}

.timeline-badge.success {

   background-color: #3f903f !important;

}

.timeline-badge.warning {

   background-color: #f0ad4e !important;

}

.timeline-badge.danger {

   background-color: #d9534f !important;

}

.timeline-badge.info {

   background-color: #5bc0de !important;

}

.timeline-title {

   margin-top: 0;
   color: inherit;

}

.timeline-body > p, .timeline-body > ul {

   margin-bottom: 0;

}

   .timeline-body > p + p {
       margin-top: 5px;
   }

@media (max-width: 767px) {

   ul.timeline:before {
       left: 40px;
   }

   ul.timeline > li > .timeline-panel {
       width: calc(100% - 90px);
       width: -moz-calc(100% - 90px);
       width: -webkit-calc(100% - 90px);
   }

   ul.timeline > li > .timeline-badge {
       left: 15px;
       margin-left: 0;
       top: 16px;
   }

   ul.timeline > li > .timeline-panel {
       float: right;
   }

       ul.timeline > li > .timeline-panel:before {
           border-left-width: 0;
           border-right-width: 15px;
           left: -15px;
           right: auto;
       }

       ul.timeline > li > .timeline-panel:after {
           border-left-width: 0;
           border-right-width: 14px;
           left: -14px;
           right: auto;
       }

}