/* layout.css, v1.0 - Un semplice foglio di stile.
 * Copyright (C) 2015 Fabio Memoli. All rights reserved. Released under
 * the terms of the GNU General Public License, version 3 or later. */


@import "typography.css";

html, body {
    background-color: #797976; /* DarkBg */
    background-image: url("viewport.jpg");
    background-position: top left;
    background-repeat: repeat;
}

/* ------------------------------ #page ------------------------------- */

#page {
    position: relative;
    width: 98%; height: auto;
    min-width: 380px; max-width: 1024px;
    margin: 0px auto;
    background-color: white;
    border: 1px solid #797976; /* DarkBg */
    -webkit-box-shadow: 0px 2px 8px -2px rgba(0,0,0,1);
    -moz-box-shadow:    0px 2px 8px -2px rgba(0,0,0,1);
    box-shadow:         0px 2px 8px -2px rgba(0,0,0,1);
    background-color: #fcfcfc;
    background-image: url("page.png");
    background-position: top left;
    background-repeat: repeat;
}

/* ----------------------------- #header ------------------------------ */

#header {
    position: relative;
    height: auto; width: 70%;
    max-height: 200px;
    padding: 1% 2% 1% 28%;
    background-image: url("header.jpg");
    background-position: top left;
}

#header * {
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 4px 0px;
    line-height: 100%;
    font-weight: 400;
    text-shadow: -1px -1px 0px #797976; /* DarkBg */
    color: white;
}

#header h1 { font-size: 32px; }
#header h2 {
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
#header h3 { font-size: 14px; }

@media all and (max-width:450px) {
    #header { font-size: 75%; }
}

/* -------------------------- #menu-top-side -------------------------- */

#menu-top-side {
    position: relative;
    height: auto; width: 70%;
    margin: 0px; padding: 0px 2% 0px 28%;
    border-top: 1px solid #797976; /* DarkBg */
    border-bottom: 1px solid #797976; /* DarkBg */
    background-color: #c9c9c4; /* NormalBg */
    background-image: url("nav.jpg");
    background-position: bottom left;
    background-repeat: repeat-x;
}

#menu-top-side ul {
    position: relative; display: block;
    width: 100%; height: auto;
    padding: 0px; margin: 0px auto;
    text-align: center;
}

#menu-top-side li {
    width: 18%; min-width: 6em;
    margin: 0px; padding: 0px;
    display: inline-block;
    list-style-type: none;
}

#menu-top-side a, #navbar a:link, #navbar a:visited {
    display: block;
    padding: 0.5ex 4px;
    text-decoration: none;
    color: #212121; /* DarkTxt */
}

#menu-top-side a:hover {
    color: #212121; /* DarkTxt */
    outline: 1px solid #797976; /* DarkBg */
    background-color: #797976; /* DarkBg */
    background-image: url("nav-selected.jpg");
    background-repeat: repeat;
}

#menu-top-side a:active {
    color: #797976; /* DarkBg */
}

@media (max-width:450px) {
    #menu-top-side { font-size: 87.5%; }
}

/* ---------------------------- #logo-side ---------------------------- */

#logo-side {
    width: 80%; height: 50%;
    margin: 4% 4% 12% 4%;
    padding: 34% 0%;
    display: block;
    background-color: white;
    background-image: url('logo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    outline: 1px solid #797976; /* DarkBg */
    -webkit-box-shadow: 0px 2px 8px -2px rgba(0,0,0,1);
    -moz-box-shadow:    0px 2px 8px -2px rgba(0,0,0,1);
    box-shadow:         0px 2px 8px -2px rgba(0,0,0,1);
}

/* ---------------------------- #left-side ---------------------------- */

#left-side {
    position: relative; float: left;
    display: inline-block; z-index: 2000;
    /* 26% (width) + 2% (margin) + 2% (padding) = 70%*/
    width: 26%; height: auto;
    min-width: 96px; max-width: 250px;
    margin-left: 2%; padding: 1%;
    vertical-align: top;
    overflow: hidden;
}

#left-side-fixed {
    position: fixed; z-index: 2000;
    /* 26% (width) + 2% (margin) + 2% (padding) = 70%*/
    width: 26%; height: auto;
    min-width: 120px; max-width: 250px;
    margin-left: 2%; padding: 1%;
    vertical-align: top;
    overflow: hidden;
}

#left-side ul, #left-side-fixed ul {
    margin: 0px;
    padding: 0px 12%;
}

#left-side li, #left-side-fixed li {
    margin: 0px; padding: 0px;
    list-style-type: none;
}

#left-side ul li ul, #left-side-fixed ul li ul {
    padding: 0px 0px 0px 8%;
}

#left-side a, #left-side-fixed a,
#left-side a:link, #left-side-fixed a:link,
#left-side a:visited, #left-side-fixed a:visited {
    font-weight: normal;
    text-decoration: none;
    color: #0033aa; /* NormalTxt2 */
}

#left-side a:hover, #left-side-fixed a:hover {
    text-decoration: underline;
}

#left-side a:active, #left-side-fixed a:active {
    color: #212121; /* DarkTxt */
}

.summary {
    display: block;
    color: #0033aa; /* NormalTxt2 */
    cursor: pointer;
}
.summary > * {
    display: none;
}

@media (max-width:450px) {
    #left-side { font-size: 87.5%; }
    #left-side-fixed { font-size: 87.5%; }
}

/* ----------------------------- #content ----------------------------- */

#content {
    position: relative; float: right;
    display: inline-block; z-index: 500;
    /* 64% (width) + 4% (margin) + 4% (padding) = 70% */
    width: 62%; height: auto;
    margin: 2% 2%; padding: 2% 2%;
}

@media (max-width:380px) {
    #content * { font-size:  95%; }
    #content h1 { font-size: 180%; }
    #content h2 { font-size: 160%; }
    #content h3 { font-size: 140%; }
    #content h4 { font-size: 120%; }
    #content h5 { font-size: 100%; }
    #content h6 { font-size: 95%; }
}

/* ----------------------------- #footer ------------------------------ */

#footer {
    position: relative; clear: both;
    height: 60px; width: 70%;
    margin: 0px; padding: 0px 2% 0px 28%;
    border-top: 1px solid #797976; /* DarkBg */
    background-image: url("footer.jpg");
    background-repeat: no-repeat;
}

#footer * {
    font-size: 95%;
}

#footer a, #footer a:link, #footer a:visited {
    font-weight: normal;
    text-decoration: none;
    color: #212121; /* DarkTxt */
}

#footer a:hover {
    color: #aa0000; /* NormalTxt */
    text-decoration: underline;
}

#footer a:active {
    color: #ffffff; /* LightTxt */
}

@media all and (max-width:450px) {
    #footer * {
        font-size: 87.5%;
    }
}

/* End of file. */