Team:UNITN-Trento/CSS/Subs/Header

From 2013.igem.org

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

Revision as of 07:35, 26 August 2013

/********/ /*HEADER*/ /********/

  1. 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(Tn-2013-headerbg-Sfondobb.png); background-position: center; background-size: 100%; }

  1. tn-header {

display: static; position: relative; top: 0;

max-width: 1300px; height: 180px;

margin: 0 auto; padding: 1em; }

/*-----------*/ /*HEADER MENU*/ /*-----------*/

  1. tn-header #tn-menu {

position: absolute; top: 170px; left: 0;

width: 100%;

margin: 0; padding: 0;

list-style: none; text-align: center; }

  1. tn-header #tn-menu > li {

display: inline-block;

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

  1. tn-header #tn-menu > li > a {

display: block; 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; }

  1. tn-header #tn-menu > li:hover {

transform: rotate(-15deg); -ms-transform: rotate(-15deg); /* IE 9 */ -webkit-transform: rotate(-15deg); /* Safari and Chrome */

background-size: 100%; }

  1. tn-header #tn-menu > li:hover > a {

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*/

  1. tn-header #tn-menu li ul {

display: none; position: relative; top: 2.5em;

width: 500px; height: 1em;

padding: 0; padding-top: 1em; margin: 0; margin-top: 1em;

line-height: 1em; list-style: none;

transform: rotate(15deg); -ms-transform: rotate(15deg); /* IE 9 */ -webkit-transform: rotate(15deg); /* Safari and Chrome */

text-align: left; }

  1. tn-header #tn-menu li:hover ul {

display: block; }

  1. tn-header #tn-menu li ul li {

display: inline-block; height: 1.4em;

margin: 0; padding: 0;

font-family: 'Mouse Memoirs', sans-serif; font-size: 1.5em; font-variant: small-caps;

line-height: 1em; }

  1. tn-header #tn-menu li ul li a {

display: block; padding-top: 0em; margin: 0 0.5em; color: #1F4457; text-decoration: none; text-shadow: none; }

  1. tn-header #tn-menu li ul li:hover a {

color: #C4221C; text-decoration: underline; }

/*------------*/ /*HEADER LOGHI*/ /*------------*/

  1. tn-header #tn-loghi {

width: 100%; height: 180px; }

  1. tn-header #tn-loghi .title {

margin: 0; margin-top: 0.3em;

color: #eee;

font-family: 'Marck Script', cursive; font-size: 7em;

line-height: 1em; text-align: center; text-shadow: 1px 1px 2px #000; }

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