Código HTML:
@charset "utf-8";
/* CSS Document */
body {
background-color: #666;
margin-top: 0px;
}
.container {
position: absolute;
/*nos posicionamos en el centro del navegador*/
left:50%;
/*determinamos una anchura*/
width:750px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-375px;
/*determinamos una altura*/
height:800px;
/*indicamos que el margen superior, es la mitad de la altura*/
}
.header {
height: 82px;
width: 750px;
margin-top: 0px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}
.logo {
background-image: url(images/logo.jpg);
height: 60px;
width: 124px;
right: -10px;
top:5px;
position: relative;
}
.version {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
visibility: visible;
position: absolute;
left: 690px;
top: 4px;
width: 60px;
color: #CCC;
}
.inicio {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #CCC;
position: absolute;
left: 650px;
top: 52px;
z-index: 4;
width: 36px;
}
.salir {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #CCC;
position: absolute;
left: 700px;
top: 52px;
width: 36px;
}
.welcome {
background-image: url(images/welcome.jpg);
height: 94px;
width: 176px;
margin-top:25px;
}
.menu1 {
background-image: url(images/menu.jpg);
height: 319px;
width: 176px;
}
.contenido {
float: right;
height: 600px;
width: 555px;
margin-top:30px;
}
.clear {
clear: both;
}
.leftcol{
width:176px;
float:left;
position:relative;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #036;
font-weight: bold;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/* login */
.mensaje {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #fff;
position:absolute;
left:50%;
top:20%;
width:327px;
margin-left:-163px;
height:35px;
}
.logueo {
background-image: url(images/login.jpg);
background-repeat: no-repeat;
position: absolute;
/*nos posicionamos en el centro del navegador*/
top:50%;
left:50%;
/*determinamos una anchura*/
width:327px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-163px;
/*determinamos una altura*/
height:204px;
/*indicamos que el margen superior, es la mitad de la altura*/
margin-top:-102px;
}
.llave {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #CCC;
background-image: url(images/logueo.jpg);
background-repeat: no-repeat;
height: 42px;
width: 200px;
position: relative;
right: -30px;
top:10px;
padding-left: 70px;
padding-top:10px;
}
.entrada {
width: 320px;
margin-top:30px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #CCC;
}
.bienvenido {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
position: relative;
top:6px;
}
.nombre {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #CCC;
position: relative;
}
.funcion {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #999;
position: relative;
}
.listmenu {
width: 176px;
position:relative;
top:10px;
}
.title_spry {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #C00;
text-align: left;
}
td {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #666;
}
.listmenu ul{
list-style-type: none;
}
.listmenu li{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
line-height: 18px;
}
.listmenu p{
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #999;
line-height: 18px;
text-decoration: underline;
}
.informe {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
color: #333;
background-color: #FFC;
padding: 10px;
border: 1px solid #CCC;
}.exito {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #F00;
background-color: #FF9;
border: 1px dashed #F00;
font-weight: bold;
}
#caracteristicas {
background-image: url(images/back_table.jpg);
background-repeat: no-repeat;
height: 274px;
width: 268px;
padding-left: 20px;
}
#caracteristicas3 {
background-image: url(images/back_table3.jpg);
background-repeat: no-repeat;
height: 338px;
width: 541px;
padding-left: 5px;
}
#caracteristicas2 {
background-image: url(images/back_table2.jpg);
background-repeat: no-repeat;
height: 129px;
width: 541px;
padding-left: 5px;
}
#caracteristicas4 {
background-image: url(images/back_table4.jpg);
background-repeat: no-repeat;
height: 433px;
width: 541px;
padding-left: 5px;
}
#caracteristicas5 {
background-image: url(images/back_table5.jpg);
background-repeat: no-repeat;
height: 212px;
width: 541px;
padding-left: 5px;
}
.show {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #333;
}
.show2 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #F00;
}
.titletb {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.2em;
color: #036;
font-weight: bold;
}