html,body {
    height: 98%;
}

.left  { float: left; }
.right { float: right; }
.clear { clear: both; }

.wrapper { height: 100%; }

.azul    { color: #02b8e0; }
.verde   { color: #00ff01; }
.rojo    { color: #f44029; }
.lila    { color: #ba20b6; }
.naranja { color: #ff9900; }
.rosa    { color: #ff009a; }


.content {
    width: 1126px;
    padding-left: 2px;
    position: relative;
    height: 100%;
}

.height { height: 490px; }

#logo {
    background-image: url('imatges/logo.png');
    width: 285px;
    height: 86px;

    float: left;

}

.logo-azul    { background-position: 0px 0px;   }
.logo-rosa   { background-position: 0px 86px;  }
.logo-naranja    { background-position: 0px 172px; }
.logo-lila    { background-position: 0px 258px; }
.logo-rojo { background-position: 0px 344px; }
.logo-verde    { background-position: 0px 430px; }



#menu {
    float: left;
    margin-left: 6px;
    background-image: url('imatges/menu.png');
    height: 22px;
    width: 765px;
    margin-top:8px;
}


#menu a {
    display: block;
    position: relative;
    float: left;
    padding-left: 4px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    padding-top: 3px;
    height:18px;
    background-color: transparent;
    margin-left: -5px;
}

#menu a:hover { background-color: #ffffff !important; }
#menu a:hover * { background-color: #ffffff !important; }


.menu-azul       { background-position: 0px 0px;  }
.menu-azul a:hover .text { color: #02b8e0; }
.menu-rosa       { background-position: 0px 22px; }
.menu-rosa a:hover .text { color: #ff009a; }
.menu-naranja    { background-position: 0px 44px; }
.menu-naranja a:hover .text { color: #ff9900; }
.menu-lila       { background-position: 0px 66px; }
.menu-lila a:hover .text { color: #ba20b6; }
.menu-rojo       { background-position: 0px 88px; }
.menu-rojo a:hover .text { color: #f44029; }
.menu-verde      { background-position: 0px 110px; }
.menu-verde a:hover .text { color: #00ff01; }



#idiomes {
    position: absolute;
    top: 170px;
    left: 10px;
    z-index: 101;
}

.idiomes-azul, .idiomes-azul  a { color: #02b8e0; }
.idiomes-verde, .idiomes-verde a { color: #00ff01; }
.idiomes-rojo, .idiomes-rojo a { color: #f44029; }
.idiomes-lila, .idiomes-lila a { color: #ba20b6; }
.idiomes-naranja, .idiomes-naranja a { color: #ff9900; }
.idiomes-rosa, .idiomes-rosa a { color: #ff009a; }

.idiomes-separador {
    float: left;
    font-size: 13px;
    padding-top: 1px;
}


#gran {
    position: absolute;
    left: 12px;
    font-size: 340px;
    letter-spacing: -10px;
    top:150px;
    z-index:67;
}

.gran-azul    { color: #02b8e0; }
.gran-verde   { color: #00ff01; }
.gran-rojo    { color: #f44029; }
.gran-lila    { color: #ba20b6; }
.gran-naranja { color: #ff9900; }
.gran-rosa    { color: #ff009a; }


#holas {
    position: absolute;
    left: 0px;
    top: 212px;
    
    width: 1182px;
    height: 252px;

    background-image: url('imatges/holas.png');
    z-index: 67;
}

.holas-azul    { background-position: 0px 0px;   }
.holas-rosa   { background-position: 0px 252px;  }
.holas-naranja    { background-position: 0px 504px; }
.holas-lila    { background-position: 0px 756px; }
.holas-rojo { background-position: 0px 1008px; }
.holas-verde    { background-position: 0px 1260px; }


#petit {
    font-size:62px;
    left:10px;
    letter-spacing:0;
    margin-top:-80px;
    position:absolute;
    top:562px;
}

.petit-azul    { color: #02b8e0; }
.petit-verde   { color: #00ff01; }
.petit-rojo    { color: #f44029; }
.petit-lila    { color: #ba20b6; }
.petit-naranja { color: #ff9900; }
.petit-rosa    { color: #ff009a; }


#credits, #credits * { font-family: 'ChaletRegular'; }

#credits {
    
    position: absolute;
    /* top: 653px; */
	bottom: 00px;
    left: 17px;
    
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
	z-index: 80;
	width: 1128px;
	background-color: white;
}

.credits-azul, .credits-azul a    { color: #02b8e0; }
.credits-verde, .credits-verde a   { color: #00ff01; }
.credits-rojo, .credits-rojo a    { color: #f44029; }
.credits-lila, .credits-lila a    { color: #ba20b6; }
.credits-naranja, .credits-naranja a { color: #ff9900; }
.credits-rosa, .credits-rosa a    { color: #ff009a; }

#facebook {
    position: relative;
    display: block;
    float: left;
    margin-left: 8px;
    margin-top: 6px;
    width: 26px;
    height: 24px;
    background-image: url('imatges/facebook.png');
    text-decoration: none;
    z-index: 101;
}

.facebook-azul    { background-position: 0px 0px;   }
.facebook-rosa   { background-position: 0px 24px;  }
.facebook-naranja    { background-position: 0px 48px; }
.facebook-lila    { background-position: 0px 72px; }
.facebook-rojo { background-position: 0px 96px; }
.facebook-verde    { background-position: 0px 120px; }


#twitter {
    position: relative;
    display: block;
    float: left;
    margin-left: 8px;
    margin-top: 7px;
    width: 24px;
    height: 24px;
    background-image: url('imatges/twitter.png');
    text-decoration: none;
    z-index: 101;
}

.twitter-azul    { background-position: 0px 0px;   }
.twitter-rosa   { background-position: 0px 24px;  }
.twitter-naranja    { background-position: 0px 48px; }
.twitter-lila    { background-position: 0px 72px; }
.twitter-rojo { background-position: 0px 96px; }
.twitter-verde    { background-position: 0px 120px; }





/*
* SUBMENUS
*/

.submenu {
    position: absolute;
    top: 20px; padding-top: 10px;
    left: 0px; padding-left: 10px;
    font-size: 13px;
    width: 300px;
    background-color: transparent;
    cursor: pointer;
}

/*
#manifiesto {   left: 312px; }
#blogfolio { left: 394px; }
#news { left: 461px; }
#reactive { left: 503px; }
#labexperienceroom { left: 574px; }
#cloudspace { left: 716px; }
#ideventos { left: 805px; }
#cambiadeformato { left: 882px; }
#contact { left: 1010px; }
*/


.submenu-azul    { color: #02b8e0; }
.submenu-verde   { color: #00ff01; }
.submenu-rojo    { color: #f44029; }
.submenu-lila    { color: #ba20b6; }
.submenu-naranja { color: #ff9900; }
.submenu-rosa    { color: #ff009a; }


/* pastilles */
a.pastilla {
    display: block;
    float: left;
    height: 17px;
    margin: 0 2px;
    text-decoration: none;
    /* background-position: -100px -100px; background-repeat: repeat-x; */
    font-size: 13px;
    z-index: 110;
    width: auto;
}
a.pastilla:hover { color: white; }



a.pastilla * { cursor: pointer; }

span.pr {
    display: block;
    float: left;
    height: 17px;
    background-repeat: no-repeat;
    z-index: 120;
}
.pr-azul    { background-image: url('imatges/pr-azul.png'); width: 6px; }
.pr-verde   { background-image: url('imatges/pr-verde.png'); width: 6px; }
.pr-rojo    { background-image: url('imatges/pr-rojo.png'); width: 6px; }
.pr-lila    { background-image: url('imatges/pr-lila.png'); width: 6px; }
.pr-naranja { background-image: url('imatges/pr-naranja.png'); width: 6px; }
.pr-rosa    { background-image: url('imatges/pr-rosa.png'); width: 7px; }

span.pm {
    display: block;
    float: left;
    background-position: -100px -100px;
    background-repeat: repeat-x;
    height: 17px;
}
.pm-azul    { background-image: url('imatges/pm-azul.png'); }
.pm-verde   { background-image: url('imatges/pm-verde.png');  }
.pm-rojo    { background-image: url('imatges/pm-rojo.png');  }
.pm-lila    { background-image: url('imatges/pm-lila.png');  }
.pm-naranja { background-image: url('imatges/pm-naranja.png');  }
.pm-rosa    { background-image: url('imatges/pm-rosa.png');  }

span.pd {
    display: block;
    float: left;
    width: 6px;
    height: 17px;
    background-repeat: no-repeat;
    z-index: 120;
}   
.pd-azul    { background-image: url('imatges/pd-azul.png'); width: 6px; }
.pd-verde   { background-image: url('imatges/pd-verde.png'); width: 6px; }
.pd-rojo    { background-image: url('imatges/pd-rojo.png'); width: 6px; }
.pd-lila    { background-image: url('imatges/pd-lila.png'); width: 6px; }
.pd-naranja { background-image: url('imatges/pd-naranja.png'); width: 6px; }
.pd-rosa    { background-image: url('imatges/pd-rosa.png'); width: 6px; }

a.pastilla * { background-position: -100px -100px; }
a.pastilla:hover * { background-position:  0px 0px; }
a.pastilla-active * { background-position: 0px 0px; color: white; }