Team:Lethbridge HS/maincss

body{

 background-color: white;  
   font-family: 'Open Sans', sans-serif;

} .jumbotron {

   background-color: white;
   position: relative;

} .slide{

   width:100%;
   
   margin: 0;
   

}

1. slide0{

   background-image: url("https://static.igem.org/mediawiki/2016/9/9c/T—lethbridgehs--IMG_4553_cover_and.png");
   background-size:cover;
   background-position: center center;
   background-repeat: no-repeat;
   height: 100%;
    overflow: hidden;
   margin: 0;
   padding-top: 5%;
   background-color: #333333;

}

1. firsttitle{

   vertical-align: center;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: white;
   vertical-align: middle;

font-size: 8em; }

1. secondtitle{

   vertical-align: center;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   color: white;
   vertical-align: middle;
 top: 25%;

font-size: 2em; } .slidesecondlist{

   list-style-type: none;
   margin-left: 15%;

} .slidesecondlist ul{

   margin: 0;
   padding: 20px;
   background-color: none;

}

1. slidesecond{

    overflow: hidden;
   margin: 0;
   padding-top: 0;
   padding: 0;
   background-color: #eee7dd;

}

1. slide_project_0{

   background-image: url("images/funnyteamcover.png");
   background-size:cover;
   background-position: center -10%;
   background-repeat: no-repeat;
   height: 90%;
   overflow: hidden;

}

1. slide_team_0{

   background-image: url("images/IMG_4553.jpg");
   background-size:cover;
   background-position: center -10%;
   background-repeat: no-repeat;
   height: 90%;
   overflow: hidden;

}

1. slide_hp_0{

   background-image: url("images/funnyteamcover.png");
   background-size:cover;
   background-position: center -10%;
   background-repeat: no-repeat;
   height: 90%;
   overflow: hidden;

}

1. slide0title{

   color: white;
   display: block;
   margin: auto;
   text-align: center;

}

1. blooddrop{

   position: absolute;
   bottom: 0;
   left: 0;
 right: 0;
 margin: 0 auto;
   z-index: 1;
   -webkit-animation: fadeInOut 2s infinite;
   -moz-animation: fadeInOut 2s infinite;
   -o-animation: fadeInOut 2s infinite;
   animation: fadeInOut 2s infinite;

}

1. slide1{

   /*background-color:#eee7dd;*/
   background-color:white;
  /* background-image: url("images/289680_1231091663_large.jpg");
   background
   background-size:cover;
   background-position: center center;
   background-repeat: no-repeat;*/
   color: black;
   

}

1. slide1Sub{

   margin-left: 10%;
   margin-right: 10%;
   

}

1. slide2{

  /* background-image: url("images/anotherteamcover.png");*/
   background-color: green;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

}

1. slide6{

}

1. slide3{

   background-color: #cf4848;
   height: 90%;
   padding-top:2%;

}ding-top:1%;

1. slide1title{

   color:red;
   text-align: center;
   font-size:60px;
   margin-top:0%;

}

1. slide12ndline{

   color:red;
   text-align: center;
   font-size:50px;

}

1. slide1para{

   font-size: 1.1em;
   color: black;

} .logo{

   float:left;
   margin-left:9%;
   margin-top: 3%;

} .navbar-header{

   margin-top:-20px;

} .navbar-default{

  /** box-shadow: 0px 8px 6px -6px #999;**/

} .navbar-default .navbar-nav>li>a {

   color: white;
   font-size: 15px;
   padding-top:2px;
   padding-top:2px;
   margin-top: 12px;

} .navbar-collapse.collapse {

   padding-bottom: 6px;
   padding-top: 3px;

} .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {

   color: white;
   background-color: transparent;

}

.removeNavBarColor{

   background-color: transparent;
   

} .makeNavBarColor{

  /** background-color: #CC141C ;*/
   background-color: #dc4640 ;
   
   

}

.navbar-default .navbar-nav>li>a{

   padding-top: 30px;
   margin-top: 0;
   margin-bottom: 0%;
   padding-bottom: 15px;
   color:white;

} .navbar-collapse.collapse{

   padding-top: 0;
   padding-bottom: 0;

} @-webkit-keyframes fadeInOut{

   0% { opacity: 0;}
   50% { opacity: 1; }
   100% { opacity:0;}

} @-moz-keyframes fadeInOut{

   0% { opacity: 0;}
   50% { opacity: 1; }
   100% { opacity:0;}

} @-o-keyframes fadeInOut{

   0% { opacity: 0;}
   50% { opacity: 1; }
   100% { opacity:0;}

} @keyframes fadeInOut{

   0% { opacity: 0;}
   50% { opacity: 1; }
   100% { opacity:0;}

}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
       font-family: Flaticon;
       font-size: 30px;
       font-style: normal;
       margin-left: 0px;
       color: white;
    
   }

.glyph {

       display: inline-block;
       width: 9em;
       margin: 1em;
       text-align: center;
       vertical-align: top;
       background: #FFF;
   float: left;
   }
   .glyph .glyph-icon {
       display:inline-block;
       float: left;
       
       font-family:"Flaticon";
       font-size: 64px;
   }

.glyph .glyph-icon:before {

       font-size: 64px;
       color: white;
       margin-left: 0;
   }

.menuIcon{

} .active{

   background-color: red;
   color: white !important;

}

[class^="active"]:before, [class*="active"]:before, [class^="active"]:after, [class*="active"]:after {
    color: white;
}

.menuIcon:before, .menuIcon:after {

       font-size: 20px;

} .menuIcon2:after {

       font-size: 40px;

}

.coverCircle{

   margin: 0;
   padding: 0;
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;

} .sidebar{

   list-style-type: none;
   list-style-position: inside;
   color: #cc141c;
   font-size: 2em;
   left: 0;
   right: 0;

} .sidebar li{

 list-style-position: inside;
   padding-top: 10px;

} .fixSideBar{

   position: fixed;
   top: 8%;
   left: 0;
   right: 0;

} .removeFixSideBar{

   position: absolute;
   left: 0;
   right: 0;

}

.outerBar{

   position: relative;
   word-wrap:break-word;

} .fixNoteBookSideBar{

   position: fixed;
   top: 8%;
   right: 0;

} .removeFixNoteBookSideBar{

} .profilePicBox{

   width: 100%;
  
  
   background-color: red;
   margin-top: 10px;
   padding: 0;
   

} .profilePicBox img{

   margin: 0;
   padding: 0;
   

} .profileInfoBox{

   display: none;
   background-color: white;
   position: absolute;
   z-index: 1000;
   width: 100%;
   height: 100%;
   padding-right: 2em;

} .showInfoBox{

   display: block;

} .makeGray{

   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);

} .noteBookMonthLabels{

   margin: left:3%;

}

1. datelist{

   display: none;    

}

1. dateList li{

   list-style-type: none;
   font-size: 1em;

} .notebookSidebar{

   box-shadow: 0px 0px 5px #888888;
   width: inherit;

} .notebookSideBar h1{

   padding-top:5px;
   padding-bottom: 5px;
   font-size: 2em;

} .notebookIcon { font-size: 0px; cursor: pointer; width: auto; height: auto; text-align: center; position: relative; z-index: 1; color: #fff; margin-left:auto; margin-right:auto;

}

.notebookIcon:before { font-family: 'Flaticon'; speak: none; font-size: 35px; line-height: 35xp; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;

   color: white;

display: block; -webkit-font-smoothing: antialiased; text-align:center; margin-left:auto; margin-right:auto;

   vertical-align: center;
   position: relative;
   top:5%;
   transform: translateY(-5%);

} /*****************************************Time line*********************************/ .timeline{

   list-style: none;
   position: relative;

}

.timeline li{

   position: relative;

} .tl_month{

   width: 100%;
   height: 50px;
   background-color: #ee4d4d;
   margin-bottom: 15px;
      vertical-align: center;
   padding-top: 0.75%;
   padding-left: auto;
   padding-right: auto;
   color:white;

} .tl_month h2{

   float:inherit;
   margin-top: auto;
   margin-bottom: auto;
   color: white;

} .tl_time {

   display: block;
   width: 25%;
   margin-top:2%;
   padding-right: 100px;
   position: absolute;
   font-size:20;
   color:#ee4d4d;

} /**************************How to make font size on notebook responsive*******/ .tl_label{

   margin-bottom: 15px;
   margin-left: 25%;
   color: black;
   border: 3px solid #ee4d4d;
   position: relative;
   border-radius: 5px;
   background: white;
   padding-left: 2%;
   padding-right: 2%;
   cursor: pointer;

} .tl_label h2{

   margin-bottom: 15px;
   font-size: 1.3em;

} .tl_label:before{

   right: 100%;
   border: solid transparent;
   content: ;
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-right-color: #ee4d4d;
   border-width: 1vw;
   /*top: 1vw;*/

} .dateContent{

   display: none;
   padding: 10px;

} .tl_icon{

   width: 40px;
   height: 40px;
   position: absolute;
   background: #ee4d4d;
   margin-top:1%;
   border-radius: 50%;
   box-shadow:  0 0 0 8px #ee4d4d;
   top:0;
   
   position: relative;
   float: left;
   left: auto;
   left: 20%;
   margin-left: -25px;

} .tl_icon img{

   margin-top:4px;
   margin-left: 2px;

} .caption{

   text-align:center;

} .topOfTimeLineEntry{

} .dropdown:hover .dropdown-menu { display: block; } /*******************************************************************/ .an-slide-title{

   text-align: center;

} .an-slide-img{

   margin-left: auto;
   margin-right: auto;

} .animatedSlide{

   background-color: transparent;
   overflow: hidden;

} .carousel-indicators{

   bottom: -8%;
   padding-bottom: 0;
   margin-bottom: 
       

} .sidebar{

   box-shadow: 0px 0px 5px #888888;
   padding: 10px;

}

1. homepageslide5{

   background-color: #343838 ;
   height: 30%;

} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {

   color: white;

} .containerForExploreTeam{

   height: 100%;

} .exploreteam{

   display: inline-block;
   float: left;
   text-align: center;
   color: white;
   vertical-align: middle;
   position: relative;
 top: 25%;   
   margin-left: auto;
   margin-right: auto;

}

1. homepageslide6{

   background-color: black;

}

1. credits{

   color: white;

} .button{

   float: left;
   display: inline-block;
   border-radius: 30px;
   background-color: #ee4d4d;
   padding: 1.5% 2%;
   color: white;
   position: relative;
   text-align: center;
   margin-left: auto;
   margin-right: auto;

} .constantSidebar{

   background-color: red;
   position: fixed;
   

} .jumbotron {

   padding: 0;

} .menuitem{

   width: 100%;
   padding-right: 20px;
   padding-top: 8px;

} .menuitem p{ float: right; margin: 0;

   padding: 0;

} .subHeaderContainer{

   width: 100%;
   background-color: red;

} .doublepic1 h1{

   display: block;
   text-align: center;
   color: white;
   vertical-align: middle;
   font-size: 3em;
 top: 25%;

} .doublepic2 h1{

   display: block;
   text-align: center;
   color: white;
   font-size: 3em;
   vertical-align: middle;
 top: 25%;

} .doublepic1{

   float: left;
   height: 50%;
   margin: 0;
   padding: 0;
   width: 50%;
   background-image: url("images/Learning-More-About-The-Latest-Science-Research-1.jpg");
   background-size:cover;
   background-repeat: no-repeat;

} .doublepic2{

   float: left;

height: 50%;

   margin: 0;
   padding: 0;
   width: 50%;
   background-image: url("images/LethHS_Group_Photo1.jpg");
   background-size:cover;
   background-repeat: no-repeat;

}