Team:UNITN-Trento/CSS/Home

#tn-central-container,
#tn-content-wrap,
#tn-content {
    padding-bottom: 0 !important;
}

.grid {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 2em;
}

.column {
    display: inline-block;
    vertical-align: top;
}

.wrap,
.cell {
    display: block;
}

.column.first .cell {
    height: 222px;
    width: 324px;

    background-color: #005e20;
    /*background-image: url(https://static.igem.org/mediawiki/2013/a/af/Tn-2013-boxbgs-Box-verde.png);
    background-position: bottom;
    background-repeat: no-repeat;*/
    border: 3px solid white;

    box-shadow: 2px 2px 4px #323232;
}

.column.first .cell.first {
    margin: 17px 7px 9px 17px;
    background-color: #355667;
}

.column.first .cell.second {
    margin: 9px 7px 9px 17px;
    background-color: #355667;
}

.column.first .cell.third {
    margin: 9px 7px 0px 17px;
    background-color: #13913f;
    background-image: url(https://static.igem.org/mediawiki/2013/8/8c/Tn-2013-home-Know-your-fruit.jpg);
    border-color: transparent;
}

.column.first .cell.third:hover {
    box-shadow: 2px 2px 8px #323232 inset;
}

.column.first .cell.third a {
    display: block;
    width: 100%;
    height: 100%;
}

.column.second .cell {
    width: 574px;

    background-color: #355667;
    /*background-image: url(https://static.igem.org/mediawiki/2013/d/dd/Tn-2013-boxbgs-Box-video.jpg);
    background-position: bottom;
    background-repeat: no-repeat;*/
    border: 3px solid white;

    box-shadow: 2px 2px 4px #323232;
}

.column.second .cell.first {
    position: relative;
    height: 423px;
    margin: 17px 17px -10px 0;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    background-image: url('https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-Tourbg-kiwiki.png');
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: 27px 10px;
}

.column.second .guide .bubble {
    display: block;
    position: absolute;
    top: 0;
    right: 65px;
    
    padding: 1em;
    
    width: 200px;
    
    background-color: rgba(250,250,250,1);
    border: 2px solid black;
    border-radius: 1em;
    
    font-family: "Cabin", sans-serif;
}

.column.second .guide .bubble .pointer {
    position: absolute;
    bottom: -26px;
    left: 12px;
}

.column.second .guide .tour {
    display: block;
    padding: 10px;
    width: 150px;
    
    background-color: white;
    border-bottom: 3px solid #dadada;
    border-radius: 0.4em;
    box-shadow: 1px 1px 2px black;
    
    color: black;
    font-family: "Boogaloo", cursive;
    font-size: 1.5em;
    text-align: center;
}

.column.second .guide .tour:hover {
    background-color: #dadada;
    border-bottom: 3px solid white;
    box-shadow: 1px 1px 1px black inset;
    text-decoration: none;
}

.column.second .guide #tour4 {
    position: absolute;
    bottom: 5px;
    right: 80px;
}

.column.second .guide #tour3 {
    position: absolute;
    bottom: 60px;
    right: 80px;
}

.column.second .guide #tour2 {
    position: absolute;
    bottom: 115px;
    right: 80px;
}

.column.second .guide #tour1 {
    position: absolute;
    bottom: 170px;
    right: 80px;
}

.column.second .cell.second {
    height: 268px;
    margin: 9px 17px 0px 0;
    background-color: #c02020;
}

.row.second {
    height: 215px;
    width: 915px;
    margin: 9px 17px 0 17px;

    background-color: #ca6819;
    border: 3px solid white;

    box-shadow: 2px 2px 4px #323232;
}

/*PRE-FOOTER*/

.pre-footer {
    width: 960px;
    margin: 0 auto;
}

.pre-footer .sheet {
    width: 915px;
    min-height: 100px;

    margin-left: 17px;

    background-color: #13913f;
    border: 3px solid white;

    box-shadow: 2px -2px 4px #323232;

    text-align: justify;
}

.pre-footer .sheet .container {
    margin: 20px;
    padding: 25px;
    
    background-color: rgba(250,250,250,.7);
    border-radius: 10px;
}

.pre-footer .silhouette {
    display: block;
    margin: 0 auto;
}