Team:Aalto-Helsinki/CSS


/*--------------------------------------------------------------------------------------------------*/ /* Fonts and texts */

@font-face { 

   font-family: Arimo;
   src: url(https://static.igem.org/mediawiki/2015/a/a4/Aalto-Helsinki_arimo_regular.ttf);
   src: url('https://static.igem.org/mediawiki/2015/1/17/Aalto-Helsinki_arimo.regular.eot') format('embedded-opentype'),
   src: url('https://static.igem.org/mediawiki/2015/5/52/Aalto-Helsinki_arimowoff.regular.woff') format('woff');

}

@font-face { 

   font-family: LeagueGothic;
   src: url(https://static.igem.org/mediawiki/2015/2/2f/Aalto-Helsinki_leaguegothic-regular-webfont.woff) format('woff');
   src: url('https://static.igem.org/mediawiki/2015/b/be/LeagueGothic-Regular.otf') format ('open-type'),
   src: url('https://static.igem.org/mediawiki/2015/7/77/Aalto-Helsinki_leaguegothic-regular.eot') format('embedded-opentype');

}

p{ 

 font-family: Arimo, sans-serif;
 font-size: 14px;

} h1{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 34px;
 border-style: none;

} h2{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 27px;
 border-style: none;

} h3{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 23px;
 border-style: none;

} h4{ 

 font-family: LeagueGothic, sans-serif;
 font-size: 17px;
 border-style: none;

}

figcaption{ 

 font-family: Arimo, sans-serif;
 font-size: 13px;

}

.inlinetext{ 

 display: inline;

}

/*--------------------------------------------------------------------------------------------------*/ /* Links */ a:focus, a:hover { 

 color: #333;

} a, a:link, a:visited{ 

 color: #7a7a7a;

}


/*--------------------------------------------------------------------------------------------------*/ /* 

* Base structure
*/

/*This was a ready heading on our page, we don't want it and this is the only way to not use it*/ .firstHeading{ 

 display: none;

} /*Tried to make the content width the whole page... Not the stupid box*/

  1. globalWrapper, #content{
 width: 100%;
 border: 0px;
 position: relative;
 padding-bottom:0;
 margin-bottom:0;

}

html, body { 

 height: 100%;
 /*background: url("../images/background.png") no-repeat;*//*We don't currently have our background image*/
 background-size: 100% 180%;

} body { 

 color: #333;
 text-align: center;

}

/* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { 

 display: table;
 width: 100%;
 height: 100%; /* For at least Firefox */
 min-height: 100%;
 margin-bottom:0;

} .site-wrapper-inner { 

 display: table-cell;
 vertical-align: top;
 margin-bottom:0;

} .cover-container { 

 margin-top: 140px;
 margin-right: auto;
 margin-left: auto;

} .cover2-container { 

 margin-top: 50px;
 margin-right: auto;
 margin-left: auto;

} .inner-container { 

 margin-top: 100px;
 margin-right: 20%;
 margin-left: 20%;
 text-align: left;

} /* Padding for spacing */ .inner { 

 padding: 30px;

}


/*--------------------------------------------------------------------------------------------------*/ /* 

* Cover
*/

.cover { 

 padding: 0 20px;

} .cover .btn-lg { 

 padding: 10px 20px;
 font-weight: bold;

}

/*-------------------------------------------------------------------------------------------------*/ /* LabBook settings, the table, td and tr settings are in LabBook page! */


.white{ 

 background: url(Aalto-Helsinki_arrow_white.png) no-repeat;

} .blue{ 

 background: url(Aalto-Helsinki_arrow_blue.png) no-repeat;
 color:white;

} .red{ 

 background: url(Aalto-Helsinki_arrow_red.png) no-repeat;
 color:white;

} .whiteup{ 

 background: url(Aalto-Helsinki_arrow_white_up.png) no-repeat;

} .blueup{ 

 background: url(Aalto-Helsinki_arrow_blue_up.png) no-repeat;
 color:white;

} .redup{ 

 background: url(Aalto-Helsinki_arrow_red_up.png) no-repeat;
 color:white;

} .whitedown{ 

 background: url(Aalto-Helsinki_arrow_white_down.png) no-repeat;

} .bluedown{ 

 background: url(Aalto-Helsinki_arrow_blue_down.png) no-repeat;
 color:white;

} .reddown{ 

 background: url(Aalto-Helsinki_arrow_red_down.png) no-repeat;
 color:white;

} .arrow{ 

 vertical-align: middle; 
 text-align: center;

} .bottomline{ 

 border-bottom: 1px solid black;

} .rightline{ 

 border-right: 1px solid black;

} .first{ 

 width=90px;

} .heightdiv{ 

 height: 90px; 
 overflow:hidden;

} .heightdivlow{ 

 height: 5px !important;

}

/*-------------------------------------------------------------------------------------------------*/ /* Journal settings */


/*This surrounds the whole entry, has a purple line on the left side*/ .entry{ 

 border-left-style: solid;
 border-color: #639FAB;
 border-width: 2px;
 margin: 0px;
 padding: 10px 0 0 25px; 
 position: relative;
 z-index: 0;
 /*padding-left: 5px;
 border-left-style: solid;*/

}

/*The small picture in front of every entry*/ .entrylogo{ 

 width: 16px;
 left: -8px;
 z-index: 1;
 position: absolute;

} .entrylogobig{ 

 width: 24px;
 left: -12px;
 z-index: 1;
 position: absolute;

} /*Styling for the text in the entry*/ .entrytext{ 

 display: inline;

} /*How the day is displayed*/ .day{ 

 border-style: none;
 display: inline;

} /*Styling for month*/ .month{ 

 height:35px;
 padding: 0 0 0 5px; 
 position: relative;
 z-index: 0;
 border-left-style: solid;
 border-color: #639FAB;
 border-width: 2px;

} .monthlogo{ 

 display:inline;
 width: 60px;
 left: -30px;
 z-index: 2;
 position: absolute;

} /*Styling the pictures in the journal so that there is also the left line so that it aligns with others.*/ .journalpic{ 

 width:95%;
 /*height:30%;*/
 float:right; /*trying out photo positions */
 margin:10px 0 0 5px;
 /*padding: 0 0 0 5px;*/

} /*Journal pics when mouse is over them*/ /*.journalpic:hover{ 

 width:50%;
 height:50%;
 padding: 0 25% 0 25%;
 border-left-style: solid;
 border-color: #639FAB;

}*/

/*--------------------------------------------------------------------------------------------------*/ /* Team settings */


/*Styling of member texts.*/ .member{ 

 padding-bottom: 20px;

} .membername{ 

 border-style: none;
 padding-top:0;

} .memberstudy{ 

 margin-top:0;
 padding-top:0;

} .memberparagraph{ 

 margin-top: 10px;

} .memberpic{ 

 vertical-align:middle;

} .vertical-align { 

   display: flex;
   align-items: center;

}

/*--------------------------------------------------------------------------------------------------*/ /* Main menu settings */

  1. primary_nav_wrap{
  margin-top:15px
  clear:both;
  float:left;
  margin-bottom: 3%;
  /*margin-left: auto;
  margin-right:auto;*/
  margin-left: -10% !important;
  padding:0;
  border-top:2px solid #000; /* black line above menu */
  border-bottom:2px solid #000; /* black line below menu */
  width:120% !important;
  font-family: LeagueGothic; /* Menu font */
  font-weight:normal;
  z-index:5; /* This makes the dropdown menus appear above the page content below */
  position:relative;

}

  1. primary_nav_wrap ul{
  margin:0;
  padding:0;
  list-style:none;
  float:right;
  position:relative;
  right:50%;

}

  1. primary_nav_wrap ul a{
  display:block;
  margin:0;
  padding:.6em .5em .4em;
  font-size:1.3em;
  line-height:1em;
  background:white;
  text-decoration:none;
  color:black;
  /*font-weight:bold;*/
  border-bottom:1px solid black;

}

  1. primary_nav_wrap ul a:hover{
  background:white; /* Top menu items background colour */
  color:gray;
  border-bottom:1px solid black;

}

  1. primary_nav_wrap ul li{
  margin:0 0 0 1px;
  padding:0;
  float:left;
  position:relative;
  left:50%;
  top:1px;

}

  1. primary_nav_wrap ul li:hover{

background:#f6f6f6 }

  1. primary_nav_wrap ul ul{
  display:none; /* Sub menus are hiden by default */
  position:absolute;
  top:100%;
  left:auto;
 /*right:auto; *//*resets the right:50% on the parent ul */
  width:10em;

}

  1. primary_nav_wrap ul ul li{

float:none; width:200px }

  1. primary_nav_wrap ul ul a{

line-height:120%; padding:10px 15px; 

       font-size: 1em;

}

  1. primary_nav_wrap ul ul ul{

top:0; left:55%; }

  1. primary_nav_wrap ul li:hover > ul{

display:block }

/*--------------------------------------------------------------------------------------------------*/ /* Side navigation on the top always! */

  1. sidenav {
   z-index: 10 !important;

}

/*---------------------------------------------------------------------------------------------------*/

/* 

* Affix and center
*/

@media (min-width: 768px) { 

   /* Pull out the header and footer */
 
 .mastfoot {
   position: relative;
   bottom: 0;
 }
 /* Start the vertical centering */
 .site-wrapper-inner {
   vertical-align: middle;
 }
 /* Handle the widths */
 .masthead,
 .cover-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 },
 .mastfoot,
 .cover2-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 }

}

@media (min-width: 992px) { 

 .masthead,
 .cover-container {
   width: 700px;
 }
 .mastfoot,
 .cover2-container {
   width: 100%; /* Must be percentage or pixels for horizontal alignment */
 }

}