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);
}
@font-face {
font-family: LeagueGothic; src: url(https://static.igem.org/mediawiki/2015/b/be/LeagueGothic-Regular.otf);
}
p{
font-family: Arimo; font-size: 14px;
} h1{
font-family: LeagueGothic; font-size: 34px; border-style: none;
} h2{
font-family: LeagueGothic; font-size: 27px; border-style: none;
} h3{
font-family: LeagueGothic; font-size: 23px; border-style: none;
} h4{
font-family: LeagueGothic; font-size: 17px; border-style: none;
} .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*/
- globalWrapper, #content{
width: 100%; border: 0px; position: relative;
}
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%;
} .site-wrapper-inner {
display: table-cell; vertical-align: top;
} .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;
}
/*-------------------------------------------------------------------------------------------------*/ /* 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{
vertical-align: middle; padding: 10px 0 10px 0; margin: 10px 0 10px 0;
} .membername{
border-style: none; margin: 0; padding: 0;
} .memberstudy{
margin-top:0; padding-top:0;
} .memberparagraph{
margin-top:10px;
}
/*--------------------------------------------------------------------------------------------------*/ /* Main menu settings */
- centeredmenu {
clear:both; float:left; margin-top:100; margin-bottom: 100; margin-left: 10%; padding:0; border-top:2px solid #000; /* black line above menu */ border-bottom:2px solid #000; /* black line below menu */ width:80%; font-family: LeagueGothic; /* Menu font */ font-weight:normal; z-index:1000; /* This makes the dropdown menus appear above the page content below */ position:relative;
}
/* Top menu items */
- centeredmenu ul {
margin:0; padding:0; list-style:none; float:right; position:relative; right:50%;
}
- centeredmenu ul li {
margin:0 0 0 1px; padding:0; float:left; position:relative; left:50%; top:1px;
}
- centeredmenu ul li 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;
}
- centeredmenu ul li a:hover {
background:white; /* Top menu items background colour */ color:black; border-bottom:1px solid black;
}
- centeredmenu ul li:hover a,
- centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:white; /* Top menu items background colour when hovered*/ color:gray; border-bottom:1px solid black;
}
/* Submenu items */
- centeredmenu ul ul {
display:none; /* Sub menus are hiden by default */ position:absolute; top:2em; left:0; right:auto; /*resets the right:50% on the parent ul */ width:10em; /* width of the drop-down menus */
}
- centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */ margin:0; /* Reset the 1px margin from the top menu */ clear:left; width:100%;
} /*Submenu items when they can be seen, not when hovered over them*/
- centeredmenu ul ul li a,
- centeredmenu ul li.active li a,
- centeredmenu ul li:hover ul li a,
- centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:1em; font-weight:normal; /* resets the bold set for the top level menu items */ background:white; color:gray; line-height:1.4em; /* overwrite line-height value from top menu */ border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
} /*Submenu items when hovered over them*/
- centeredmenu ul ul li a:hover,
- centeredmenu ul li.active ul li a:hover,
- centeredmenu ul li:hover ul li a:hover,
- centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:white; /* Sub menu items background colour */ color:black;
}
/* Flip the last submenu so it stays within the page */
- centeredmenu ul ul.last {
left:auto; /* reset left:0; value */ right:0; /* Set right value instead */
}
/* Make the sub menus appear on hover */
- centeredmenu ul li:hover ul,
- centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
} /*---------------------------------------------------------------------------------------------------*/
/*
* 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 */ }
}