Team:UNITN-Trento/CSS/Default

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
@import url(http://fonts.googleapis.com/css?family=Marck+Script);
+
#tn-header {
-
@import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs);
+
    min-height: 210px;
-
html, body {
+
    background-color: #038c7e;
-
width: 100%;
+
    border-bottom: 10px solid #bf1b39;
-
height: 100%;
+
-
margin: 0;
+
    text-align: center;
-
padding: 0;
+
-
 
+
-
background-color: #DCD8D0;
+
-
 
+
-
font-size: 16px;
+
}
}
-
/********/
+
.tn-logo {
-
/*HEADER*/
+
    display: inline-block;
-
/********/
+
-
 
+
-
#tn-header-wrap {
+
-
display: inline-block
+
-
 
+
-
width: 100%;
+
-
height: 250px;
+
-
 
+
-
margin: 0;
+
-
padding: 0;
+
-
 
+
-
background-color: #2880C5;
+
-
border-bottom: 7px solid white;
+
-
 
+
-
background-image: url(https://static.igem.org/mediawiki/2013/5/53/Tn-2013-headerbg-Sfondobb.png);
+
-
background-position: center;
+
-
background-size: 100%;
+
}
}
-
#tn-header {
+
.tn-logo.tn-side {
-
display: static;
+
    position: relative;
-
position: relative;
+
    top: -1em;
-
top: 0;
+
-
max-width: 1300px;
+
    width: 125px;
-
height: 180px;
+
   
-
 
+
    margin: 0 2em;
-
margin: 0 auto;
+
-
padding: 1em;
+
}
}
-
/*-----------*/
+
#tn-bfruity-logo {
-
/*HEADER MENU*/
+
    margin-top: 2.2em;
-
/*-----------*/
+
-
 
+
-
#tn-header #tn-menu {
+
-
position: absolute;
+
-
top: 170px;
+
-
left: 0;
+
-
 
+
-
width: 100%;
+
-
 
+
-
margin: 0;
+
-
padding: 0;
+
-
 
+
-
list-style: none;
+
-
text-align: center;
+
}
}
-
#tn-header #tn-menu > li {
+
#tn-igem-unitn-logo {
-
display: inline-block;
+
    margin-top: 2.1em;
-
 
+
-
height: 100px;
+
-
width: 100px;
+
-
 
+
-
margin: 0.5em;
+
-
 
+
-
background-position: center center;
+
-
background-repeat: no-repeat;
+
-
background-size: 75%;
+
-
 
+
-
line-height: 100px;
+
-
/*font-weight: bold;*/
+
-
text-shadow: 0 0 2px black;
+
-
text-align: center;
+
-
vertical-align: middle;
+
}
}
-
#tn-header #tn-menu > li > a {
+
#tn-igem-main {
-
display: block;
+
    margin-top: 2.3em;
-
padding: 0.3em 0.5em;
+
-
margin-top: 2.2em;
+
-
border-radius: 0.5em;
+
-
border: 3px solid white;
+
-
background: rgba(31,68,87,.9);
+
-
color: #ffffff;
+
-
font-family: 'Mouse Memoirs', sans-serif;
+
-
font-size: 1.5em;
+
-
line-height: 1em;
+
-
text-decoration: none;
+
}
}
-
#tn-header #tn-menu > li:hover {
+
/*MENU*/
-
transform: rotate(-15deg);
+
-
-ms-transform: rotate(-15deg); /* IE 9 */
+
-
-webkit-transform: rotate(-15deg); /* Safari and Chrome */
+
-
background-size: 100%;
+
#tn-menu {
-
}
+
    position: relative;
 +
    top: -2.7em;
 +
    height: 32px;
 +
    margin: 0 auto;
-
#tn-header #tn-menu > li:hover > a {
+
    list-style: none;
-
padding: 0.3em 0.5em;
+
-
margin-top: 2.2em;
+
-
border-radius: 0.5em;
+
-
border: 3px solid white;
+
-
background: #C4221C;
+
-
font-family: 'Mouse Memoirs', sans-serif;
+
-
font-size: 1.5em;
+
-
line-height: 1em;
+
-
text-decoration: underline;
+
}
}
-
/*SUB MENU*/
+
#tn-menu li {
 +
    width: 150px;
 +
    height: 30px;
 +
    padding: 0;
 +
    margin: 0;
-
#tn-header #tn-menu li ul {
+
    font-family: "Trebuchet MS", Helvetica, sans-serif;
-
display: none;
+
    font-variant: small-caps;
-
position: relative;
+
    font-weight: bold;
-
top: 2.5em;
+
    font-size: 1em;
-
width: 500px;
+
    color: #f0f2df;
-
height: 1em;
+
    border: none;
 +
}
-
padding: 0;
+
/*First menu*/
-
padding-top: 1em;
+
-
margin: 0;
+
-
margin-top: 1em;
+
-
line-height: 1em;
+
#tn-menu > li {
-
list-style: none;
+
    display: inline-table;
 +
    padding-top: 0.2em;
 +
    padding-bottom: 13px;
-
transform: rotate(15deg);
+
    opacity: 0.9;
-
-ms-transform: rotate(15deg); /* IE 9 */
+
-
-webkit-transform: rotate(15deg); /* Safari and Chrome */
+
-
+
-
text-align: left;
+
}
}
-
#tn-header #tn-menu li:hover ul {
+
#tn-menu > li:hover {
-
display: block;
+
    opacity: 1.0;
}
}
-
#tn-header #tn-menu li ul li {
+
/*SUB_MENU*/
-
display: inline-block;
+
-
height: 1.4em;
+
-
margin: 0;
+
#tn-menu > li > ul {
-
padding: 0;
+
    position: absolute;
 +
    top: 100%;
 +
    z-index: 5;
-
font-family: 'Mouse Memoirs', sans-serif;
+
    display: none;
-
font-size: 1.5em;
+
    padding: 0; margin: 0;
-
font-variant: small-caps;
+
-
line-height: 1em;
+
    background: none;
}
}
-
#tn-header #tn-menu li ul li a {
+
#tn-menu > li > ul > li {
-
display: block;
+
    background-color: #038c7e;
-
padding-top: 0em;
+
    border: 1px solid transparent;
-
margin: 0 0.5em;
+
-
color: #1F4457;
+
-
text-decoration: none;
+
-
text-shadow: none;
+
}
}
-
#tn-header #tn-menu li ul li:hover a {
+
#tn-menu > li > ul > li:hover {
-
color: #C4221C;
+
    background-color: #007064;
-
text-decoration: underline;
+
    border: 1px solid white;
}
}
-
/*------------*/
+
#tn-menu > li:hover > ul,
-
/*HEADER LOGHI*/
+
#tn-menu > li:hover > ul li {
-
/*------------*/
+
    display: block;
-
 
+
-
#tn-header #tn-loghi {
+
-
width: 100%;
+
-
height: 180px;
+
}
}
-
#tn-header #tn-loghi .title {
+
/*MENU Links*/
-
margin: 0;
+
-
margin-top: 0.3em;
+
-
color: #eee;
+
#tn-menu a {
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
-
font-family: 'Marck Script', cursive;
+
    color: #f0f2df;
-
font-size: 7em;
+
    text-decoration: none;
-
 
+
-
line-height: 1em;
+
-
text-align: center;
+
-
text-shadow: 1px 1px 2px #000;
+
}
}
-
/*******************/
+
#tn-menu > li > a {
-
/*CENTRAL CONTAINER*/
+
    font-size: 1.2em;
-
/*******************/
+
-
 
+
-
#tn-central-container {
+
-
display: block;
+
-
 
+
-
max-width: 1300px;
+
-
min-height: 600px;
+
-
 
+
-
margin: 0 auto;
+
-
padding: 1em 0;
+
-
 
+
-
background-color: #dadada;
+
}
}
-
#tn-content-wrap {
+
#tn-menu li:hover > a,
-
display: static;
+
#tn-menu > li > ul > li:hover {
-
 
+
    text-shadow: 1px 1px #323232;
-
max-width: 1200px;
+
-
min-height: 600px;
+
-
 
+
-
margin: 0 auto;
+
-
margin-top: 6em;
+
-
padding: 1px;
+
-
+
-
background-color: #767676;
+
-
}
+
-
 
+
-
 
+
-
#tn-content {
+
-
display: static;
+
-
 
+
-
max-width: 1200px;
+
-
height: 100%;
+
-
+
-
padding: 1em;
+
-
 
+
-
background-color: #ffffff;
+
-
}
+
-
 
+
-
/********/
+
-
/*FOOTER*/
+
-
/********/
+
-
 
+
-
#tn-footer-wrap {
+
-
display: inline-block;
+
-
 
+
-
width: 100%;
+
-
height: 250px;
+
-
 
+
-
margin: 0;
+
-
padding: 0;
+
-
 
+
-
background-color: #323232;
+
-
}
+
-
 
+
-
#tn-footer {
+
-
display: static;
+
-
 
+
-
max-width: 1300px;
+
-
max-height: 180px;
+
-
 
+
-
margin: 1em auto;
+
-
padding: 1em;
+
-
 
+
-
background-color: #ffffff;
+
-
overflow: hidden;
+
}
}

Revision as of 07:36, 26 August 2013

  1. tn-header { 
   min-height: 210px;

   background-color: #038c7e;
   border-bottom: 10px solid #bf1b39;

   text-align: center;

}

.tn-logo { 

   display: inline-block;

}

.tn-logo.tn-side { 

   position: relative;
   top: -1em;

   width: 125px;
   
   margin: 0 2em;

}

  1. tn-bfruity-logo { 
   margin-top: 2.2em;

}

  1. tn-igem-unitn-logo { 
   margin-top: 2.1em;

}

  1. tn-igem-main { 
   margin-top: 2.3em;

}

/*MENU*/

  1. tn-menu { 
   position: relative;
   top: -2.7em;
   height: 32px;
   margin: 0 auto;

   list-style: none;

}

  1. tn-menu li { 
   width: 150px;
   height: 30px;
   padding: 0;
   margin: 0;

   font-family: "Trebuchet MS", Helvetica, sans-serif;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 1em;

   color: #f0f2df;
   border: none;

}

/*First menu*/

  1. tn-menu > li { 
   display: inline-table;
   padding-top: 0.2em;
   padding-bottom: 13px;

   opacity: 0.9;

}

  1. tn-menu > li:hover { 
   opacity: 1.0;

}

/*SUB_MENU*/

  1. tn-menu > li > ul { 
   position: absolute;
   top: 100%;
   z-index: 5;

   display: none;
   padding: 0; margin: 0;

   background: none;

}

  1. tn-menu > li > ul > li { 
   background-color: #038c7e;
   border: 1px solid transparent;

}

  1. tn-menu > li > ul > li:hover { 
   background-color: #007064;
   border: 1px solid white;

}

  1. tn-menu > li:hover > ul,
  2. tn-menu > li:hover > ul li { 
   display: block;

}

/*MENU Links*/

  1. tn-menu a { 
   display: block;
   width: 100%;
   height: 100%;

   color: #f0f2df;
   text-decoration: none;

}

  1. tn-menu > li > a { 
   font-size: 1.2em;

}

  1. tn-menu li:hover > a,
  2. tn-menu > li > ul > li:hover { 
   text-shadow: 1px 1px #323232;

}

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