@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

* {
    -webkit-text-size-adjust: 100%;
}

/* General elements
---------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    color: #666;
    font-size: 10px;
    font-weight: 400;
    font-family: 'Open Sans', Arial, sans-serif;    
    overflow-x: hidden;
    background: #f6f6f6;
}

body.inner {
    background: #fff;
    margin-left: 325px;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    height: auto;
    max-width: 100%;
}


/* Header
---------------------------------------------------------------------------- */
.header {
    background: #7F7F7F;
}

.header h1 {
    margin: 0;
}

.header h1 img {
    display: block;
    width: 100%;
    height: auto;
}


/* Button menu
---------------------------------------------------------------------------- */
.menu-button {
    position: fixed;
    top: 1em;
    right: 1em;
    cursor: pointer;
    background: #ddd;
    padding: 0.75em;
    border-radius: 0.5em;
    box-shadow: 1px 1px 1px #999;
    display: none;
}

/* Menu
---------------------------------------------------------------------------- */
.menu {
    position: absolute;
    left: 0;
}

.menu > ul {
    padding: 1em;
    font-size: 1.7em;
}

.menu > ul > li {
    margin-bottom: 1em;
}

.menu > ul > li > span {
    color: #fff;
    font-weight: bold;
    background-color: #fff;
    padding: 0.2em 0.5em;
    display: block;
    text-shadow: 1px 1px 3px #666;
}

.menu > ul > li.section-arreu > span { background-color: #809e24; }
.menu > ul > li.section-modernisme > span { background-color: #ba0621; }
.menu > ul > li.section-moda > span { background-color: #266fb5; }
.menu > ul > li.section-tecnologia > span { background-color: #dcde15; }

.menu > ul > li > ul {
    padding: 0.5em 1em;
}

.menu > ul > li > ul > li + li {
    margin-top: 0.5em;
}

.menu > ul > li > ul > li > a {
    color: #666;
    display: block;
    text-decoration: none;
    padding-left: 0.75em;
    background: url("../images/menu-li.png") no-repeat left 0.45em;
}

.menu > ul > li > ul > li > span {
    color: #B18F01;
    font-weight: bold;
    display: block;
    text-decoration: none;
    padding-left: 0.75em;
    margin-top: 0.75em;
    font-size: 1em;
}

.menu > ul > li > ul > li > ul > li {
    font-size: 0.9em;
    margin: 0.5em 0 0 0;
}

.menu > ul > li > ul > li > ul > li > a {
    color: #666;
    display: block;
    text-decoration: none;
    padding-left: 0.75em;
    background: url("../images/menu-li.png") no-repeat left 0.4em;
}

.menu > ul > li > ul > li > ul > li.pdf > a {
    padding-left: 1.4em;
    margin-left: 0.75em;
    background: url("../images/document-icon.png") no-repeat left 0;
}

.menu > ul > li > ul > li > ul > li.pdf em {
    color: #aaa;
}

.homepage .menu > ul > li > ul > li > a,
.homepage .menu > ul > li > ul > li > ul > li > a {
    color: #666;
}

.homepage .menu > ul > li > ul > li > a {
    background-image: url("../images/menu-li.png");
}

.homepage .menu > ul > li > ul > li > ul > li.pdf em {
    color: #999;
}

.menu > ul > li.section-arreu > ul { 
    background: -webkit-linear-gradient(#F2F5E9, #f6f6f6);
    background: -o-linear-gradient(#F2F5E9, #f6f6f6);
    background: -moz-linear-gradient(#F2F5E9, #f6f6f6);
    background: linear-gradient(#F2F5E9, #f6f6f6);
}
.menu > ul > li.section-modernisme > ul {
    background: -webkit-linear-gradient(#F8E6E9, #f6f6f6);
    background: -o-linear-gradient(#F8E6E9, #f6f6f6);
    background: -moz-linear-gradient(#F8E6E9, #f6f6f6);
    background: linear-gradient(#F8E6E9, #f6f6f6);
}
.menu > ul > li.section-moda > ul {
    background: -webkit-linear-gradient(#E9F0F7, #f6f6f6);
    background: -o-linear-gradient(#E9F0F7, #f6f6f6);
    background: -moz-linear-gradient(#E9F0F7, #f6f6f6);
    background: linear-gradient(#E9F0F7, #f6f6f6);
}
.menu > ul > li.section-tecnologia > ul {
    background: -webkit-linear-gradient(#FBFCE7, #f6f6f6);
    background: -o-linear-gradient(#FBFCE7, #f6f6f6);
    background: -moz-linear-gradient(#FBFCE7, #f6f6f6);
    background: linear-gradient(#FBFCE7, #f6f6f6);
}

.inner .menu {
    background: #f6f6f6;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 999999;
    width: 325px;
    box-shadow: 0 0 10px #ccc inset;
}

.menu > ul > li.section-tecnologia > ul > li.subsection {
    display: inline-block;
    vertical-align: top;
    margin-right: 2em;
}


/* Content area
---------------------------------------------------------------------------- */
.content {
    padding: 2.5em 1.5em 1.5em 1.5em;
}

.content .image {
    padding: 20px 0;
    max-width: 100%;
}

.content .image-right {
    float: right;
    margin: 0 0 0.5em 1.5em;
    max-width: 50%;
}

.content .image-left {
    float: left;
    margin: 0 1.5em 0.5em 0;
    max-width: 50%;
}

.content h2 {
    font-size: 2.4em;
    line-height: 1.2em;
    margin: 0 0 0.5em 0;
    padding-bottom: 0.5em;
    border-bottom: 1px dotted #ccc;
}

.content h2 span.author {
    display: block;
    font-weight: normal;
    font-size: 0.75em;
    font-style: italic;
}

.content h3 {
    font-size: 2em;
    margin: 1.5em 0 0.5em 0;
}

.content h2 + h3 {
    margin-top: 0.5em;
}

.content h4 {
    font-size: 1.6em;
    margin: 0 0 0.5em 0;
}

.content table {
    width: 100%;   
    border-collapse: collapse;  
    margin: 0 0 2em 0;
}

.content .table-data {
    margin-bottom: 2em;
}

.content .table-data table {
    margin: 0 0 0.5em 0;
}

.content .table-data table + table {
    margin-top: 2em;
}

.content table th,
.content table td {
    font-size: 1.2em;
    padding: 0.4em 0.6em;
}

.content table th {
    color: #fff;
    background-color: #666;
}

.content table td {
    border-bottom: 1px solid #ccc;
}

.content table tr.separator td {
    border-bottom: 3px solid #666;
}

.content table tr:nth-child(2n+1) td {
    background-color: #eee;
}

.content table .value {
    text-align: right;
}


.content .image-left img,
.content .image-right img {
    dislpay: block;
}

.content .image-left p,
.content .image-right p,
.content .table-data p {
    color: #666;
    font-size: 1.1em;
    text-align: center;
}

.body-arreu .content h2,
.body-arreu .content h4,
.body-arreu .content h3 { color: #809e24; }

.body-modernisme .content h2,
.body-modernisme .content h4,
.body-modernisme .content h3 { color: #ba0621; }

.body-moda .content h2,
.body-moda .content h4,
.body-moda .content h3 { color: #266fb5; }

.body-tecnologia .content h2,
.body-tecnologia .content h4,
.body-tecnologia .content h3 { color: #B18F01; }

.content ul {
    overflow: hidden;
}

.content p {
    font-size: 1.5em;
    line-height: 1.4em;
    margin: 0 0 1em 0;
}

.content ul {
    margin-bottom: 1.5em;
}

.content ul li {
    font-size: 1.5em;
    line-height: 1.4em;
    margin-left: 0.5em;
    padding-left: 0.8em;
    background: url("../images/text-li.png") no-repeat left 0.5em;
    overflow: hidden;
}

.content ul li + li {
    margin-top: 1em;
}

.content .image-wrapper {
    width: 100%;
    overflow: hidden;
}

.content .footer-image-right {
    float: right;
    margin: 0 0 0.5em 2em;
}

.content .footer-image-wrapper {
    width: 100%;
    overflow: hidden;
}

.content .footer-image {
    float: left;
    text-align: center;
    margin-bottom: 2.5em;
}

.content .footer-image img,
.content .footer-image-right img {
    display: block;
    margin-bottom: 0.5em;
}

.content .footer-image p,
.content .footer-image-right p {
    font-size: 1.1em;
    margin: 0;
    color: #999;
}

.content hr {
    border: 0;
    margin: 0;
    clear: both;
}


/* Image alignments
---------------------------------------------------------------------------- */

    /* Centered images */
    
        .content .center-image {
            margin-top: 1em;
            margin-bottom: 3em;
            text-align: center;
            clear: both;
        }

        .content .center-image img {
            display: block;
            margin: 0 auto 0.75em auto;
        }

        .content .center-image p {
            font-size: 1.1em;
            margin: 0;
            color: #999;
        }
        
        
    /* Left / Right images */
    
        .content .left-image,
        .content .right-image {
            text-align: center;
        }
        
        .content .left-image {
            float: left;
            margin: 0 1em 1em 0;
        }
        
        .content .right-image {
            float: right;
            margin: 0 0 1em 1em;
        }

        .content .left-image img,
        .content .right-image img {
            display: block;
            margin: 0 auto;
        }

        .content .left-image p,
        .content .right-image p {
            font-size: 1.1em;
            margin: 0.5em 0 0 0;
            color: #999;
        }



/* Bibliography area
---------------------------------------------------------------------------- */
.bibliography {
    padding: 1.5em;
    background-color: #eee;
}

.bibliography h3 {
    font-size: 1.5em;
    margin: 0 0 0.75em 0;
}

.bibliography ul li {
    padding: 0.75em 0;
    font-size: 1.2em;
    line-height: 1.4em;
    border-top: 1px dotted #aaa;
}


/* Homepage
---------------------------------------------------------------------------- */
@media only screen and (min-width: 641px) {
    
    .homepage,
    .menu {
        position: relative;
        left: 0;
    }    
    
}


/* Responsive styles
---------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

    body {
        width: 100%;
        position: absolute;
        left: 0;
    }
    
    body.inner {
        left: 0;
        margin-left: 0;
    }
    
    .homepage,
    .homepage .menu {
        position: relative;
        left: 0;
    }    
    
    .menu {
        position: absolute;
        left: -250px;
    }
    
    .inner .menu {
        width: 250px;
    }
    
    .menu-button {
        display: block;
    }
    
    .menu > ul > li.section-tecnologia > ul > li.subsection {
        display: block;
        vertical-align: top;
        margin-right: 0;
    }
    
    .content .left-image,
    .content .right-image {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

}