/**
* @singleton #page
...
#header
#title ?
#main-frame
hr.separator ?
#menu
hr.separator ?
#footer
*/
html, body, div, form {
margin: 0;
padding: 0;
}
hr.separator {
display: none;
}
/* Needed to attach footer at the bottom of the window or document,
whichever is lower. */
html, body {
height: 100%;
}
#page {
position: relative;
min-height: 100%;
}
/**
* @singleton #header
*/
/**
* @shared (#header, #menu)
*
* Page header background color.
*/
#header,
#menu {
background-color: #fff;
}
/**
* @shared (#header, #menu, #home-link)
*
* Height of the header row - set also as the line-height for all textual
* elements in the header.
*/
#header-content,
#menu-content,
#menu a,
#home-link {
height: 118px;
line-height: 118px;
}
/**
* @shared (#header, #menu, #content, #title, #footer, .banner, .part)
*
* Visual rows of the page have inner element(s) whose width is set
* to a common value and aligned horizontally at the center of the window.
*/
#header-content,
#menu-content,
#content,
#title-content,
#footer-content,
.banner-content,
.part-content {
display: block;
width: 1190px;
max-width: 95%;
margin: 0 auto;
position: relative;
}
/**
* @singleton #home-link
...
*/
#home-link {
display: block;
width: 292px;
position: relative;
}
#home-link:before,
#home-link:after {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#home-link:before {
background: #fff;
z-index: 1;
}
#home-link:after {
background: transparent url('/public/54/fb/88/98_562_logo.png') no-repeat 0 0;
z-index: 2;
}
/**
* @singleton #menu
* @markup-constraint Avoid line breaks!
*/
/**
* @shared (#menu, #footer)
*
* These are list containers, the lists are rendered horizontally, so we have
* to cancel the default list properties.
*/
#menu ul,
#menu li,
#footer ul,
#footer li {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
left: 0;
right: 50px;
top: 0;
}
#menu-content {
text-align: right;
border-right: 1px solid #f5f5f5;
}
#menu a {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0 38px 0 36px;
border-left: 1px solid #f5f5f5;
text-transform: uppercase;
text-decoration: none;
font-weight: 400;
color: #000;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
transition: background-color 0.5s;
}
#menu a:hover {
background-color: #f5f5f5;
}
#menu .menu-selected a {
color: #fff;
background-color: #de3f53;
border-color: #de3f53;
font-weight: 600;
}
@media screen and (max-width: 1023px) {
#menu ul {
display: block;
margin-left: 292px;
}
#menu-content,
#menu a {
line-height: 59px;
}
#menu a {
height: 58px;
border-bottom: 1px solid #f5f5f5;
padding: 0 18px;
}
}
/**
* @singleton #main-frame
(
#content
.banner +
|
.part +
)
*/
/**
* #main-frame has to be rendered before #footer. It creates space to be
* covered by the #footer when the document is taller than the window.
*/
#main-frame {
padding-bottom: 80px;
}
/**
* @singleton #footer
* @markup-constraint Avoid line breaks!
*/
#footer {
background-color: #3c3c3c;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#footer-content {
height: 80px;
line-height: 80px;
text-align: left;
}
#footer,
#footer a:link,
#footer a:visited {
color: #e0e0e0;
}
#footer a {
font-weight: 400;
text-decoration: none;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
#footer a:hover {
color: #fff;
}
#footer li:before {
content: " | ";
}
#footer li:first-child:before {
content: "";
}
/**
* @shared (#title, #footer)
*/
.title-subpage #title-content,
#footer-content {
text-indent: 50px;
}
/**
* @singleton #title
*/
#title {
background: #c47786 url('/public/f1/15/3f/100_564_title.jpg') no-repeat 50% 0;
}
.title-homepage #title-content {
height: 570px;
}
.title-homepage .title-box {
position: absolute;
left: 0;
bottom: 80px;
max-width: 820px;
}
.title-subpage #title-content {
height: 192px;
line-height: 192px;
font-weight: 300;
font-size: 3.6667em;
color: #fff;
text-transform: uppercase;
}
/**
* @layout .part
*/
/**
* @widget .banner
TODO
*/
/**
* @shared (.banner, .part)
*
* These constitute visual rows of the page. Rows start with the darker
* color.
*/
.part,
.banner {
padding: 25px 0 35px;
background-color: #f7f7f7;
}
.part:nth-of-type(even),
.banner:nth-of-type(even) {
background-color: #fff;
}
/**
* @layout #content
.article
*/
/**
* @layout .article
@content
*/
.article {
padding: 30px 50px 20px;
}
.article:after {
clear: both;
content: " ";
display: block;
height: 0.1px;
overflow: hidden;
width: 100%;
}
.g {
width: 100%;
display: table;
border-spacing: 0;
table-layout: fixed;
}
.g-i {
display: table-cell;
vertical-align: top;
}
.g-i-half {
width: 50%;
}
@media screen and (max-width: 799px) {
.g-i-half {
display: block;
width: auto;
}
}
/* eof */