/*body default values*/
body * {
font-weight: inherit;
line-height: normal; /* 1.2 times the font size */
list-style: none;
vertical-align: baseline;
padding:0px;
border: 0px;
margin:0px;
}
nav {
display: block;
}
/* development environment */
/*
* {
outline: 2px solid red;
}
*/
@media screen and (min-width:769px) { /* computer desktop */
section.topbar-mobile{
display: none;
}
}
/*
header, section.topbar, section.intro, section.content, aside, footer{
display: none;
}
*/
/*
use only pixels as lenght unit to avoid confusion on measurements (only one unit)
1px = 0.2645833333mm "css pixel" is a relative unit
12px = 3.175mm
1em = 16px,
1in = 2.54mm
*/
/*
*/
:root {
/*----------- COLOR VARIABLES -------------------*/
--white:hsl(0,0%,100%); /* #FFFFFF */
--boston-university-red: hsl(0,100%,40%); /* www.colorhexa.com, #CC0000 */
--very-dark-gray:hsl(0,0%,20%); /* #333333 */
--dark-gray:hsl(0,0%,40%); /* #666666 */
--light-gray:hsl(0,0%,46.7%); /* #777777 */
--light-gray-ws:hsl(0,0%,80%); /* #CCCCCC ws:web safe color */
--very-light-gray:hsl(0,0%,94.1%); /* #F0F0F0 */
--almost-white-gray:hsl(0,0%,96.5%); /* #F6F6F6 */
/*----------- FONT VARIABLES -------------------*/
--body-font-family: Verdana, Geneva, sans-serif;
--body-text-color:var(--light-gray);
--body-anchor-color:var(--boston-university-red);
--heading-font-family:Georgia, "Times New Roman", Times, serif;
/*----------- FONT VARIABLES -------------------*/
--body-font-size:14px;
/*--body-line-height: 21px; *//* 1.5 of font-size */
--body-line-height:calc(var(--body-font-size) * 1.5);
--heading-font-size:24px;
/*--heading-line-height:36px;*/
--heading-line-height:calc(var(--heading-font-size) * 1.5);
--subheading-font-size:18px;
/*--subheading-line-height:27px;*/
--subheading-line-height:calc(var(--subheading-font-size) * 1.5);
/*----------- STRUCTURE VARIABLES -----------------*/
--element-padding:5px;
--element-hpadding:5px;
--element-vpadding:5px;
--element-margin:5px;
--element-hmargin:5px;
--element-vmargin:5px;
--text-tab: var(--body-font-size); /*--body-font-size*/
--text-vtab:var(--body-line-height);
--text-2tab: calc(var(--body-font-size) * 2);
/*------------hNAV VARIABLES ----------------------*/
/*------------SEARCH FORM --------------------------*/
/*------------ OTHER VARIABLES ------------------------*/
--border-bottom-line: 1px dotted var(--light-gray-ws);
}
/*------------------------------------ FONTS ---------------------------*/
body *{
/* (*) represents any element that contains text like p, a, etc */
font-size: var(--body-font-size);
line-height: var(--body-line-height);
font-family: var(--body-font-family);
color: var(--body-text-color);
}
h1{
font-size:var(--heading-font-size);
line-height: var(--heading-line-height);
font-family:var(--heading-font-family);
color: var(--body-text-color);
}
h2, h3, h4, h5, h6{
font-size:var(--subheading-font-size);
line-height: var(--subheading-line-height);
font-family:var(--heading-font-family);
color: var(--body-text-color);
}
:root{
/*----------- STRUCTURE VARIABLES -----------------*/
--header-height:60px; /* 15.8mm */
--header-margin-top:10px;
--header-logo-width:270px;
--header-logo-height:45px;
--topbar-height:52px;
--topbar-margin-top:10px;
--body-width:960px; /* total page width: 254mm = 10in */
--body-height:1240px; /* 328mm = 12.94in, keep proportion of a bond paper: 8.5x11 */
/*------------SEARCH FORM --------------------------*/
--search-form-width:25%;
/*------------ OTHER VARIABLES ------------------------*/
--goButton-width:26px;
}
/*------------------------------------BODY STYLE ---------------------------*/
html{
padding-left: calc(var(--body-font-size) / 2 );
}
body
{
width:var(--body-width);
height: var(--body-height);
position: relative; /* to defined the contained elements position relative to the body */
margin:0px auto; /* margin: vertical horizontal; sets the left and right margin to auto (centered)*/
/*margin-left:auto;*/ /* html padding-left avoid to go to the border */
background-color:white;
/*outline: 2px solid red;*/
}
/*-------------------------------------HEADER-LOGO -------------------------*/
section.header-logo{
width:var(--body-width);
height:var(--header-height);
margin-top:var(--header-margin-top);
border-bottom:var(--border-bottom-line);
/*outline: 2px solid yellow;*/
}
section.header-logo img{
width:var(--header-logo-width);
height:var(---header-logo-height);
}
/*---------------------------------------TOPBAR -------------------------*/
section.topbar{
width: auto; /* body size*/
height: var(--topbar-height);
position: relative;
margin-top:var(--topbar-margin-top);
/*outline: 2px solid yellow;*/
/*outline: 4px solid green;*/
/* absolute need left top coordinates and also affect the placement of other objects. Relative */
/* The browser assumes a default value of 0 for relative missing coordinates */
/* Relative positioning is used to move an element relative to where the browser would have placed it if no positioning had been applied */
/* In any position type different of static (default) two objects are placed as a single unit and the nested object’s coordinates are based on the position of the containing object. */
/* any positioning of a nested element descendant of a not static parent is relative to the container */
}
/* ---- search form -------*/
form.search-form{
display: block;
width: var(--search-form-width);
height: 100%;
float: right;
position: relative; /*container, nested elements are treated as a unit*/
margin-top: calc(-1 * calc(var(--topbar-height) / 2)); /*-(52/2)px; */; /* needs to find out why this line is needed */
/*outline: 2px solid pink;*/
}
fieldset.search-field{ /* descendant of search-form */
width: auto;
height: auto;
position: relative;
display: block;
border:none;
/*outline: 2px solid orange; */
}
input.search-string{ /* descendant of search-field */
display: block;
width:85%;
float:left;
/*outline: 2px solid green;*/
}
input.go-button{ /* descendant of field-search */
width: var(--goButton-width);
height: auto;
float: right;
font-weight: bold;
text-transform: uppercase;
color: var(--white);
background-color: var(--boston-university-red);
border-color: var(--boston-university-red);
cursor: pointer;
}
/*---------------------------------------horizontalNAV -------------------------*/
/*nav.css*/
/* ---- horizontalNAV -------*/
/*
these initial properties are defined in base.css
nav.horizontalNAV{
width: var(--hNAV-width);
height: 100%;
position: relative;
background-color:var(--very-dark-gray);
}
*/
/* outlines for developing/debuging
section.topbar {
outline: 8px solid red;
}
section.topbar nav {
outline: 6px solid blue;
}
nav.horizontalNAV ul {
outline: 3px solid aqua;
}
ul li {
outline: 1px solid green;
}
ul li a {
outline: 1px solid yellow;
}
*/
:root{
/*------------hNAV VARIABLES ----------------------*/
--hNAV-width: 73%; /*73% was reach by trial and error other wise there is an extra margin on the right*/ /* padding-right in li.last to adjust the final hover block */
/*close to 21cm close to an A4 paper width*/
--hNAV-margin:calc(100% - var(--hNAV-width)); /* hNAV width complement */
--hNAV-text-color:var(--white);
--hNAV-hover-color:var(--boston-university-red);
--hNAV-background-color:var(--very-dark-gray);
--nav-padding-horizontal:var(--body-font-size);
}
/* ---- horizontalNAV -------*/
nav.horizontalNAV{
width: var(--hNAV-width);
height: 100%; /* relative to its container (top_bar)*/
position: relative;
background-color:var(--very-dark-gray); /* dark gray*/
/*outline: 4px solid green;*/
/*margin-right: var(--hNAV-lmargin);*/
/*additional definitions are in nav.css */
}
nav.horizontalNAV ul{
height:100%;
width: auto;
position: relative;
/*outline: 4px solid green;*/
}
nav.horizontalNAV ul li {
display: block;
position: relative;
float: left;
height:100%; /* */
width: 20%; /*15% x 5 = 75% */
padding-right:var(--nav-padding-horizontal); /*top/bottom right/left, Warning: don't change this value (found by trial/error)*/
padding-left:var(--nav-padding-horizontal);
text-align: center;
font-size: var(--body-font-size);
font-weight:bold;
/*outline: 4px solid green; */
}
nav.horizontalNAV ul li:last-of-type {
/* in case need to format the last item of the list*/
/*margin-right: 0px;
padding-right:0px;
border-right: 0px;
width: 20%;*/
/*outline: 20px solid green; */
}
nav.horizontalNAV ul li:hover{
background-color:var(--hNAV-hover-color);
}
nav.horizontalNAV ul li a {
text-decoration:none;
display: block; /* to have the effect of hovering mouse over the whole block, padding and negative margin is a twist */
height:50%;
width: auto;
margin-top:15px; /* Warning: don't change this value (found by trial/error)*/
color: var(--hNAV-text-color); /* font-color: white, anchor font color by default is blue*/
/*outline: 4px solid yellow;*/
}
nav.horizontalNAV ul li.last{
padding-right:calc(var(--nav-padding-horizontal) + 7px); /* extra pixles to complete the red hover over the black background, initial padding is 20px (nav.horizontalNAV ul li)*/
/*outline: 4px solid pink;*/
}
nav.horizontalNAV a:hover
{
/*color:#FFFFFF; white */
/*background-color:green; /*#C80000; /* red */
}
/*
li.horizontalNAV-active {
background-color: var(--hNAV-hover-color);
}
*/
/*----------------------------------------------- TOPNAV - MOBILE -------------------------*/
/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
/*
if ($(window).width() <= 740) {
$(function(){$("section.topnav").load("base.html .topnav");});
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block"){x.style.display = "none";}
else {x.style.display = "block";}
}
}
*/
/*
*/
/* Style the navigation menu */
.topnav {
width:120%;
height:auto;
overflow: hidden; /* need height:auto; */
background-color: var(--very-dark-gray) ;
position:fixed;
/*margin-right:5px;*/
margin:0px;
top:0px;
/*outline: 2px solid pink;*/
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}
/* Style navigation menu links */
.topnav a {
color: white;
padding-top:calc(var(--body-line-height) / 2);
padding-bottom:calc(var(--body-line-height) / 2);
/* padding-top:5px;
padding-bottom:5px;*/
/* padding: 14px 16px;*/ /* vertical - horizontal*/
/*padding-left:calc(var(--body-font-size) * 4); /* vertical - horizontal*/
/*margin-left:calc(var(--body-font-size) * 7);*/
text-decoration: none;
font-size: var(--body-font-size);
font-weight:bold;
display: block;
border-bottom:var(--border-bottom-line);
padding-left:calc(var(--body-font-size) * 2);
/*outline: 2px solid orange;*/
}
#myLinks a{
/*padding-left:0px;*/
}
.topnav a.active img{
/*height:35px;*/
width:auto;
height:calc(var(--body-line-height) * 1); /* includes a padding */
position:absolute;
/*left: calc(var(--body-font-size) * 6);*/
top: 0px;
right:calc(var(--body-line-height) * 2.5);
background:var(--very-dark-gray);
padding-top:10px;
padding-bottom:11px;
/*outline: 2px solid green;*/
}
/* Style the hamburger menu */
.topnav a.icon {
background:var(--very-dark-gray); /* green;*/
display: block;
position: absolute;
right: calc(var(--body-line-height) * 0);
top: 0;
width: calc(var(--body-line-height) * 1.5);
height:calc(var(--body-line-height) * 1); /* includes a padding */
/* padding-right:5px;
padding-left:5px;*/
/*outline: 2px solid purple;**/
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color:var(--very-light-gray);
color: var(--very-dark-gray);
}
.topnav a.icon:hover{
background-color:var(--very-dark-gray);
}
.topnav a:active{
background:var(--boston-university-red);
}
.topnav a.icon:active{
background:var(--boston-university-red);
}
/* Style the active link (or home/logo) */
.active {
height:var(--body-line-height);
background-color:var(--very-dark-gray);
}
.fa{
/*outline: 2px solid black;*/
color:white;
}
/*
.fa:hover{
color:var(--boston-university-red);
}
.fa:active{
color:var(--boston-university-red);
}
*/
/********************************************************/
/*
*/
:root{
--topbar-logo-width:40px;
--topbar-burger-width:30px;
--topbar-logo-burger: calc(var(--topbar-logo-width) + var(--topbar-burger-width));
--topbar-logo-burger-margin: calc(var(--topbar-logo-burger) + calc(var(--element-hmargin) * 3));
--topvar-link-width:calc(100% - var(--topbar-logo-burger-margin));
--topbar-link-height:calc(var(--body-line-height) + calc(var(--element-vpadding) * 3));
}
.topbar-mobile{
width:100%;
height:auto;
overflow: hidden; /* need height:auto; */
position:fixed;
background-color: var(--light-gray);
background-color: white;
background-color:var(--dark-gray);
margin:0px;
top:0px;
/*outline: 2px solid yellow;*/
}
.topbar-mobile .topbar-home{
text-decoration: none;
display:block;
width: var(--topvar-link-width);
height: var(--topbar-link-height);
padding:var(--element-vpadding) 0px;
padding-left:var(--text-vtab);
color:white;
font-weight: bold;
/*outline: 2px solid yellow;*/
}
.topbar-mobile .topbar-logo{
display:block;
margin-left:calc(var(--topvar-link-width) + var(--element-hmargin));
position:absolute;
top:0px;
/*outline: 2px solid blue;*/
}
.topbar-mobile .topbar-logo img{
width:var(--topbar-logo-width);
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topbar-mobile #topbar-links {
display: none; /* to change with burger menu*/
width:var(--topvar-link-width);
height:calc(var(--topbar-link-height) * 4);
width:100%;
position:absolute; position:fixed;
/*outline: 2px solid green;*/
}
.topbar-mobile #topbar-links a{
display:block;
width:100%;
background-color: var(--dark-gray);
padding:var(--element-vpadding) 0px;
padding-left:var(--text-vtab);
color:white;
font-weight: bold;
text-decoration: none;
border-top:var(--border-bottom-line);
/*outline: 2px solid red;*/
}
.topbar-mobile #topbar-links a:hover {
background-color:var(--very-light-gray);
color: var(--very-dark-gray);
}
.topbar-mobile .topbar-burger{
/*display: inline-block;*/
display:block;
cursor: pointer;
width:var(--topbar-burger-width);
margin-left:calc(calc(var(--topvar-link-width) + var(--topbar-logo-width)) + calc(var(--element-hmargin)* 2));
margin-top:-3px;
position:absolute;
top:0px;
/*outline: 2px solid blue;*/
}
.bar1, .bar2, .bar3 {
width: var(--topbar-burger-width);
height: 5px;
background-color: #333;
background-color:var(--very-light-gray);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*---------------------------------FOOTER STYLE --------------------------*/
footer{
background-color: var(--almost-white-gray);
/*height:calc(var(--text-tab) * 2);*/
width:auto;
/*margin-top:15px;*/
color: var(--body-text-color);
/* outline: 2px solid blue;*/
}
footer p{
height:100%;
padding-top:calc(var(--text-tab) / 2);
padding-left:var(--text-tab);
width:auto;
font-family:var(--body-font-family);
text-align:left;
/*outline: 2px solid blue;*/
}
section.topbar {
display: block;
}
div.topnav {
display: none;
}
