Thomas Wade 6560664615 Rework basic layout
Title and nav are now little 'tabs' haging down from the top edge of the screen
2018-10-17 22:05:19 +10:30

136 lines
1.7 KiB
CSS

@media (max-width: 1000px)
{
/* Do some mobile processing here */
}
html,
body,
.rootContainer
{
font-family: Arial, Helvetica, sans-serif;
position: relative;
margin: 0; /* Override the default page border */
padding: 0;
color: #000;
background-color: #fff;
}
a
{
font-weight: 600;
text-decoration: none;
color: #000;
}
.centreColumn
{
position: relative;
width: 800px;
min-height: calc(100vh - 120px);
margin-left: calc(50vw - 400px);
padding-top: 120px;
}
.headerContainer
{
line-height: 70px;
position: fixed;
z-index: 10;
top: 0;
width: 100vw;
height: 70px;
vertical-align: middle;
color: #fff;
}
.centreHeaderContainer
{
position: relative;
width: 800px;
height: 70px;
margin-right: auto;
margin-left: auto;
}
.titleAndTagline
{
font-weight: normal;
display: inline-block;
height: 70px;
padding-right: 20px;
padding-left: 20px;
vertical-align: baseline;
color: #fff;
background-color: #000;
}
.title
{
font-size: 22pt;
}
.tagline
{
font-size: 10pt;
}
.navButtons
{
float: right;
}
.navButtons a
{
display: block;
float: left;
width: 60px;
height: 100%;
margin: 0;
padding-right: 10px;
padding-left: 10px;
text-align: center;
color: #fff;
background-color: #000;
}
.navButtons a.current
{
color: #000;
background-color: #fff;
box-shadow: inset 0 -10px 0 0 #000; /* Box shadow hack to get an inset border */
}
.footerContainer
{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar
{
position: absolute;
top: 120px;
right: -200px;
width: 200px;
}