Lo corto porque no me deja crear un post tan largo.
header.css
Código CSS:
Ver original@font-face {
font-family: "FreesiaUPC";
src: url("../css/upcfl.eot");
}
@font-face {
font-family: "FreesiaUPC";
src: url("../css/upcfl.ttf");
}
@media screen and (max-width: 420px)
{
body{
background-color:#eeeeee;
font-family: Arial;
margin:0;
width:360px;
}
header
{
background-color:#ffffff;
width:360px;
margin:0;
}
header .iso9001
{
display: none;
}
header .contlayus
{
width:360px;
height:280px;
overflow:visible;
}
header .ofertas
{
width:360px;
}
header .ofertas div
{
float:left;
}
header .ofertas img
{
width:120px;
}
header .solapas
{
float:none;
border:1px dotted #ffffff;
}
header .solapas table
{
width:360px;
/*margin:25px 0;*/
}
header .iconos img
{
width:90px;
height:58px;
}
header .iconos table
{
width:360px;
}
header #menu ul{
list-style: none;
font-size: 14px;
margin:0;
padding:0;
}
header #menu li{
display: block;
text-transform: uppercase;
text-align: left;
}
header #nav-mobile{
display: none;
background: url("../imagenes/nav.png") no-repeat left center;
width: 360px;
height: 50px;
/*position: relative;
top:0;*/
}
header #nav-mobile{ display: block; }
header #menu{
width: 100%;
float: none;
margin:0 0 5px 0;
padding:0;
}
header #menu ul{
max-height: 0;
overflow: hidden;
margin:0;
}
header #menu li{
background: #20337f;
height: 20px;
float: none;
margin:0;
padding: 5px 10px;
text-align:center;
font-size:18px;
border-bottom:1px solid #ffffff;
}
header #menu li:last-child{ border-bottom: 1;}
header #menu li a{
line-height: normal;
color:#ffffff;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
}
header #menu ul.open-menu{
max-height: 420px;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-ms-transition: max-height .4s;
-o-transition: max-height .4s;
transition: max-height .4s;
}
/********** agenda ********************/
header #agenda ul{
list-style: none;
font-size: 14px;
margin:0;
padding:0;
}
header #agenda li{
display: block;
text-transform: uppercase;
text-align: left;
}
header #tit-mobile{
display: none;
background: url("../imagenes/nav-agenda.png") no-repeat left center;
width: 360px;
height: 30px;
/*position: relative;
top:0;*/
}
header #agenda .tit-mobile
{
font-family: "FreesiaUPC", "Arial";
font-size:0px;
color:#ffffff;
height:60px;
padding:0 5px;
}
header #tit-mobile{ display: block; }
header #agenda{
width: 100%;
float: none;
margin:0 0 5px 0;
padding:0;
}
header #agenda ul{
max-height: 0;
overflow: hidden;
margin:0;
}
header #agenda li{
background: #20337f;
height: 20px;
float: none;
margin:0;
padding: 5px 10px;
text-align:center;
font-size:18px;
border-bottom:1px solid #ffffff;
}
header #agenda li:last-child{ border-bottom: 1;}
header #agenda li a{
line-height: normal;
color:#ffffff;
font-weight: bold;
text-transform:uppercase;
text-decoration:none;
}
header #agenda ul.open-menu{
max-height: 420px;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-ms-transition: max-height .4s;
-o-transition: max-height .4s;
transition: max-height .4s;
background: url("../imagenes/nav2.png") no-repeat left center;
}
}
@media screen and (min-width: 421px)
{
body{
background-color:#eeeeee;
font-family: Arial;
margin:0;
width:100%;
}
header
{
background-color:#ffffff;
width:100%;
min-height:575px;
margin:0;
}
header .navigation-toggle
{
}
header #menu
{
width:950px;
text-align:right;
float:right;
height:0;
position:relative;
z-index:1;
top:-70px;
left:130px;
padding:0 0px 0 0;
}
header #menu ul
{
overflow:hidden;
list-style:none;
margin-top:20px;
}
header #menu ul li {
float:left;
}
header #menu ul li a
{
padding: 0 2px;
color:#000000;
text-decoration:none;
font-family: "FreesiaUPC", "Arial";
font-size:21px;
text-transform:uppercase;
}
header #menu ul li a:hover
{
background-color:#DEE1E6;
}
header .logo
{
text-align:left;
overflow:visible;
width:1010px;
height:100px;
margin:0;
padding:0;
}
header .logo2
{
width:640px;
float:left;
padding: 0 0 0 0px;
overflow:hidden;
}
header .telefono
{
float:right;
}
header .contlayus
{
width:1010px;
height:250px;
overflow:hidden;
position:relative;
top:-15px;
}
header .ofertas
{
width:200px;
padding:20px 0 0 20px;
float:left;
overflow:auto;
margin:0;
}
header .ofertas td
{
vertical-align:top;
height:70px;
margin:0;
padding:0;
}
header .loopedSlider
{
float:right;
padding:0 20px 0 0;
position:relative;
top:-15px;
height:165;
}
header .solapas
{
width:280px;
height:0px;
text-align:right;
position:absolute;
z-index:10;
top:0px;
margin:0px;
padding:0 0 0 710px;
}
header .iso9001
{
width:280px;
height:0;
text-align:right;
position:relative;
z-index:15;
top:-130px;
margin:0px;
left:130px;
padding:0px 0 0 75px;
}
header #agenda
{
height:65px;
text-align:left;
margin:-15px 20px 10px 20px;
padding:0px;
overflow:hidden;
background-color:#DEE1E6;
}
header #agenda .tit-mobile
{
font-family: "FreesiaUPC", "Arial";
font-size:19px;
height:5px;
padding:0 5px;
color:#000000;
}
header #agenda ul
{
height:5px;
}
header #agenda ul li
{
margin:0;
padding:0 15px 0 0;
list-style-type: none;
display: inline;
}
header #agenda .alink
{
color:#20317B;
}
header #agenda .alink:hover
{
color:#000000;
}
header #agenda li a
{
font-family: "FreesiaUPC", "Arial";
color:#000000;
font-family: "FreesiaUPC", "Arial";
font-size:22px;
text-transform:uppercase;
}
header .iconos
{
text-align:left;
padding: 0 20px;
}
header .iconos table
{
width:982px;
}
}