Team:UNITN-Trento/CSS/Home

From 2013.igem.org

(Difference between revisions)
Line 5: Line 5:
}
}
-
.grid {
+
/*PRE-GRID*/
 +
 
 +
.pre-footer {
     width: 960px;
     width: 960px;
     margin: 0 auto;
     margin: 0 auto;
-
    padding-bottom: 2em;
 
}
}
-
.column {
+
.pre-footer .sheet {
-
     display: inline-block;
+
     width: 915px;
-
     vertical-align: top;
+
     min-height: 100px;
-
}
+
-
.wrap,
+
     margin-left: 17px;
-
.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-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;
     border: 3px solid white;
-
     box-shadow: 2px 2px 4px #323232;
+
     box-shadow: 2px -2px 4px #323232;
-
}
+
-
.column.second .cell.first {
+
     text-align: justify;
-
     position: relative;
+
-
    height: 423px;
+
-
    margin: 17px 17px -10px 0;
+
-
    background-color: transparent;
+
-
    border-color: transparent;
+
-
    border-top-left-radius: 1em;
+
-
    border-top-right-radius: 1em;
+
-
    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 {
+
.pre-footer .sheet .container {
-
     display: block;
+
     margin: 20px;
-
    position: absolute;
+
     padding: 25px;
-
    top: 0;
+
-
     right: 65px;
+
      
      
-
    padding: 1em;
+
     background-color: rgba(250,250,250,.7);
-
   
+
     border-radius: 10px;
-
    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 {
+
.pre-footer .silhouette {
-
    position: absolute;
+
-
    bottom: -26px;
+
-
    left: 12px;
+
-
}
+
-
 
+
-
.column.second .guide .tour {
+
     display: block;
     display: block;
-
     padding: 10px;
+
     margin: 0 auto;
-
    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 {
+
/*GRID*/
-
    background-color: #dadada;
+
-
    border-bottom: 3px solid white;
+
-
    box-shadow: 1px 1px 1px black inset;
+
-
    text-decoration: none;
+
-
}
+
-
.column.second .guide #tour4 {
+
.grid {
-
     position: absolute;
+
     width: 960px;
-
     bottom: 5px;
+
     margin: 0 auto;
-
     right: 40px;
+
     padding-bottom: 2em;
-
   
+
-
    background-color: rgb(81,85,158);
+
-
    border-color: rgb(51,53,101);
+
-
    color: white;
+
-
    text-shadow: 0 0 2px black;
+
}
}
-
.column.second .guide #tour4:hover {
+
.row {
-
     background-color: rgb(51,53,101);
+
     display: block;
-
    border-color: rgb(81,85,158);
+
-
    text-shadow: none;
+
-
}
+
-
 
+
-
.column.second .guide #tour3 {
+
-
    position: absolute;
+
-
    bottom: 60px;
+
-
    right: 80px;
+
-
   
+
-
    background-color: rgb(231,61,59);
+
-
    border-color: rgb(171,47,46);
+
-
    color: white;
+
-
    text-shadow: 0 0 2px black;
+
-
}
+
-
 
+
-
.column.second .guide #tour3:hover {
+
-
    background-color: rgb(171,47,46);
+
-
    border-color: rgb(231,61,59);
+
-
    text-shadow: none;
+
-
}
+
-
 
+
-
.column.second .guide #tour2 {
+
-
    position: absolute;
+
-
    bottom: 115px;
+
-
    right: 40px;
+
-
   
+
-
    background-color: rgb(59,175,77);
+
-
    border-color: rgb(41,122,53);
+
-
    color: white;
+
-
    text-shadow: 0 0 2px black;
+
-
}
+
-
 
+
-
.column.second .guide #tour2:hover {
+
-
    background-color: rgb(41,122,53);
+
-
    border-color: rgb(59,175,77);
+
-
    text-shadow: none;
+
-
}
+
-
 
+
-
.column.second .guide #tour1 {
+
-
    position: absolute;
+
-
    bottom: 170px;
+
-
    right: 80px;
+
-
   
+
-
    background-color: rgb(102,163,229);
+
-
    border-color: rgb(71,114,161);
+
-
    color: white;
+
-
    text-shadow: 0 0 2px black;
+
-
}
+
-
 
+
-
.column.second .guide #tour1:hover {
+
-
    background-color: rgb(71,114,161);
+
-
    border-color: rgb(102,163,229);
+
-
    text-shadow: none;
+
-
}
+
-
 
+
-
.column.second .cell.second {
+
-
    position: relative;
+
-
    height: 268px;
+
-
   
+
-
    margin: 9px 17px 0px 0;
+
-
    padding: 0;
+
-
   
+
-
    background-color: #c02020;
+
-
}
+
-
 
+
-
.column.second #jms-slideshow .jms-wrapper {
+
-
    height: 268px;
+
-
    min-width: 500px;
+
-
    width: 574px;
+
-
   
+
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
-
      
+
     width: 100%;
-
    background-color: transparent;
+
-
    border: none;
+
-
   
+
-
    overflow: hidden;
+
}
}
-
.column.second #jms-slideshow .jms-wrapper .step {
+
.cell {
-
     width: 1000px;
+
     display: inline-block;
-
    height: 470px;
+
-
    background-repeat: no-repeat;
+
-
    background-size: auto 100%;
+
-
}
+
-
.column.second #jms-slideshow .jms-arrows-next {
+
     padding: 0;
-
     right: 5px;
+
-
}
+
-
.column.second #jms-slideshow .jms-arrows-prev {
+
    background-color: white;
-
     left: 5px;
+
     border: 3px solid white;
 +
    box-shadow: 2px 2px 4px black;
}
}
-
.column.second #jms-slideshow .jms-dots {
+
.row.first .cell.first {
-
     bottom: 5px;
+
     margin: 17px 7px 7px 17px;
 +
    height: 300px;
 +
    width: 293px;
}
}
-
.row.second {
+
.row.first .cell.second {
-
    height: auto;
+
     margin: 17px 17px 7px 17px;
-
    width: 915px;
+
     height: 300px;
-
     margin: 9px 17px 0 17px;
+
     width: 605px;
-
 
+
-
     background-color: rgb(231,61,59);
+
-
     border: 3px solid white;
+
-
 
+
-
    box-shadow: 2px 2px 4px #323232;
+
}
}
-
h1 {
+
.row.second .cell {
-
border-bottom: none;
+
    height: 222px;
-
padding-top: 0;
+
    width: 293px;
}
}
-
.row.second.sheet .container {
+
.row.second .cell.first {
-
margin: 20px;
+
    margin: 17px 7px 7px 7px;
-
padding: 25px;
+
-
background-color: rgba(250,250,250,.7);
+
-
border-radius: 10px;
+
-
font-family: boogaloo;
+
}
}
-
 
+
.row.second .cell.second {
-
 
+
     margin: 7px;
-
/*PRE-FOOTER*/
+
-
 
+
-
.pre-footer {
+
-
    width: 960px;
+
-
     margin: 0 auto;
+
}
}
-
.pre-footer .sheet {
+
.row.second .cell.third {
-
    width: 915px;
+
     margin: 7px 17px 7px 6px;
-
    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 {
+
.row.third .cell.first {
-
     margin: 20px;
+
     margin: 7px 17px 17px 17px;
-
     padding: 25px;
+
     height: 300px;
-
      
+
     width: 918px;
-
    background-color: rgba(250,250,250,.7);
+
-
    border-radius: 10px;
+
-
}
+
-
 
+
-
.pre-footer .silhouette {
+
-
    display: block;
+
-
    margin: 0 auto;
+
}
}

Revision as of 06:54, 26 September 2013

  1. tn-central-container,
  2. tn-content-wrap,
  3. tn-content { 
   padding-bottom: 0 !important;

}

/*PRE-GRID*/

.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;

}

/*GRID*/

.grid { 

   width: 960px;
   margin: 0 auto;
   padding-bottom: 2em;

}

.row { 

   display: block;
   margin: 0;
   padding: 0;
   width: 100%;

}

.cell { 

   display: inline-block;

   padding: 0;

   background-color: white;
   border: 3px solid white;
   box-shadow: 2px 2px 4px black;

}

.row.first .cell.first { 

   margin: 17px 7px 7px 17px;
   height: 300px;
   width: 293px;

}

.row.first .cell.second { 

   margin: 17px 17px 7px 17px;
   height: 300px;
   width: 605px;

}

.row.second .cell { 

   height: 222px;
   width: 293px;

}

.row.second .cell.first { 

   margin: 17px 7px 7px 7px;

}

.row.second .cell.second { 

   margin: 7px;

}

.row.second .cell.third { 

   margin: 7px 17px 7px 6px;

}

.row.third .cell.first { 

   margin: 7px 17px 17px 17px;
   height: 300px;
   width: 918px;

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Home"