Team:Northeastern/CSS

@font-face { 

   font-family:open sans;
   src: url('https://static.igem.org/mediawiki/2016/0/03/Northeastern_OpenSans.ttf ');

}

@font-face { 

   font-family:roboto;
   src: url('https://static.igem.org/mediawiki/2016/8/80/Northeastern_Roboto.ttf ');

}

@font-face { 

   font-family:fontawesome;
   src: url('https://static.igem.org/mediawiki/2016/8/84/Northeastern_FontAwesome.otf ');

}

.row * { 

   box-sizing: border-box;

}

body { 

   font-family: open sans;

}

body img { 

   max-width: 100%;

}

body a, body a:hover, body a:visited { 

   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease-in-out;
   color: #888;
   text-decoration: none;

}

html, body { 

   height: 100%;

}


/*navigation bar*/

.navbar-default { 

   background-color: #fff;
   border: none;
   box-shadow: 0 0 10px #555;

}

.navbar-default .navbar-toggle { 

   border: none;

}

.navbar-default #navbrand { 

   height: 40px;
   float: left;
   margin-top: 5px;
   margin-right: 10px;
   margin-left: -10px;
   opacity: .7;

}

/*banner*/

  1. banner {
   position: relative;
   z-index: 0;
   background: url("https://unsplash.it/1920/900");
   background-color: #aaa;
   background-size: cover;
   background-attachment: fixed;
   /* main title */
   /*main subtitle*/

}

  1. banner h1 {
   font-size: 60px;
   font-weight: bold;
   text-align: center;
   color: #fff;
   text-shadow: 1px 1px .2px #000;
   letter-spacing: 3px;
   border-bottom: none;

}

  1. banner h2 {
   font-size: 20px;
   text-align: center;
   color: #ccc;
   letter-spacing: 2px;

}

  1. banner #continue {
   position: absolute;
   color: #fff;
   text-align: center;
   font-size: 50px;
   width: 100%;
   height: 50px;
   top: calc(100vh - 120px);
   text-shadow: 1px 1px .2px #000;

}

  1. banner #continue a {
   color: #fff;
   text-decoration: none;

}

  1. banner #continue a:hover {
   color: #fff;
   text-decoration: none;

}

  1. banner #bannercontent {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   margin: auto;

}

  1. banner #icon {
   width: 100%;

}

  1. banner #icon img {
   width: 300px;
   margin: auto;
   display: block;

}

/*main content*/

.container, .container-fluid { 

   color: #555;
   /* content sections */
   /*section header*/
   /*section subheaders*/

}

.container .content, .container-fluid .content { 

   margin: auto;
   line-height: 170%;
   font-family: roboto;
   margin: 20px auto;
   padding: 0 20px;

}

.container #words, .container #modelfigures, .container-fluid #words, .container-fluid #modelfigures { 

   margin: 0 -15px;

}

.container #words img, .container #modelfigures img, .container-fluid #words img, { 

   box-shadow: 0 0 30px #aaa;

}

.container #words .row, .container #modelfigures .row, .container-fluid #words .row, .container-fluid #modelfigures .row { 

   max-width: 1200px;
   margin: auto;

}

  1. words img {
   box-shadow: 0 0 30px #aaa;

}

.container h3, .container-fluid h3 { 

   text-align: center;
   font-size: 30px;
   letter-spacing: 2px;
   padding-top: 50px;
   padding-bottom: 20px;

}

.container h4, .container-fluid h4 { 

   text-align: center;
   font-size: 20px;
   margin-bottom: 20px;

}


/*buttons to project page*/

  1. aboutbuttons {
   text-align: center;

}

  1. aboutbuttons span {
   margin-right: 5px;

}

  1. aboutbuttons a {
   display: inline-block;
   padding: 10px;
   border: 3px solid #ccc;
   width: 150px;
   margin: 0 20px;

}


/*team section*/

  1. team #teamphoto {
   margin: auto;
   padding-bottom: 100px;

}

  1. team #readmore {
   font-size: 18px;
   margin-top: 10px;
   text-align: center;

}

  1. team #readmore a {
   color: #3875A2;

}


/*links to rest of wiki*/

  1. sitemap {
   background-image: url("T--Northeastern--banner_software.jpg");
   background-size: cover;
   background-attachment: fixed;

}

  1. sitemap #sitelinks {
   padding: 100px 0;
   min-height: 300px;
   color: #fff;
   text-align: center;
   background: rgba(0, 0, 0, 0.3);

}

  1. sitemap #sitelinks a {
   display: inline-block;
   border: 3px solid #fff;
   color: #fff;
   padding: 10px 20px;
   margin: 10px;

}

  1. sitemap #sitelinks a:hover {
   background: #fff;
   color: #888;

}

  1. sitemap h3 {
   color: #fff;
   margin-top: 0px;
   padding-top: 0px;
   text-shadow: 1px 1px .2px #000;

}


/*sponsor images*/

  1. sponsors {
   padding: 50px 0;
   width: 1050px;

}

  1. sponsors img {
   box-shadow: none;
   height: 70px;
   margin: 10px;

}

  1. modelfigures img {
   box-sizing: border-box;
   max-width: 500px;
   margin: 20px 0;
   padding:20px;
   border:1px solid #ccc;

}


/*footer*/

  1. footer {
   background: #222;
   text-align: center;
   color: #fff;
   line-height: 50px;

}

  1. footer a {
   color: #fff;

}


  1. grouppartstable td,
  2. grouppartstable th {
   border: 1px solid #aaa;
   padding: 15px;
   font-family:open sans;
   font-size:15px;

}

  1. grouppartstable th {
   background: #000;
   color: #fff;
   font-weight:bold;

}


/* hide components when screen is smaller*/

@media screen and (max-width: 970px) { 

   #bannercontent {
       padding-top: 100px;
   }
   h1 {
       font-size: 40px;
   }
   h2 {
       letter-spacing: 0px;
   }
   #teamphoto {
       margin: 50px auto;
   }
   #sponsors img {
       max-height: 80px;
       margin: 5px;
   }
   #continue {
       top: calc(100vh - 80px);
   }

}