Team:Aalto-Helsinki/CSS
/*--------------------------------------------------------------------------------------------------*/
/* Fonts and texts */
p{
font-family: Arial, Helvetica, sans-serif; font-size: 10px;
} h1{
font-size: 30px; border-style: none;
} h2{
font-size: 26px; border-style: none;
} h3{
font-size: 24px; border-style: none;
}
/*--------------------------------------------------------------------------------------------------*/ /* 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;
} /* bit bigger text all over */ p{
font-size: 110%;
}
/* 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 */
/* The two columns on the page; text entries on the left and pictures on the right. */ .leftentries{
float:left; width:69%;
}
.rightpics{
float:right; width:29%;
}
/*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 */
/*Teampic settings*/
.teampicdiv{
height: 400px; margin: 20px;
} .teampic{
max-height:100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;
} /*Whole member style*/ .teammember{
clear: both; margin-bottom: 30px; margin-top: 30px;
}
/*Team member pic settings*/ .left{
float:left; margin-right:30px;
} .right{
float:right; margin-left:30px;
} .memberpicdiv{
width: 300px; margin-bottom: 30px;
} .memberpic{
max-height:100%; max-width: 100%;
}
/*Styling of member text.*/ .membertext{
margin-bottom: 30px; margin-top: 30px;
} .membername{
border-style: none; margin-top: 20px;
} /*Styling the description of each member.*/ .memberdescription{
margin-top: 10px; color: #4d4b4b;
}
/*--------------------------------------------------------------------------------------------------*/ /* 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:Verdana, Geneva, sans-serif; /* Menu font */ font-size:90%; /* Menu text size */ 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 */
}
}