@charset "iso-8859-1";
/* CSS Document */
/*Sitio Web: Mdsys*/

/*******************************************************************************/
/*GENERALES*/
/*******************************************************************************/

/*Ubicación de la página y color de fondo*/
BODY, HTML{
height:100%;
background-color:#000000;
color:#ebebeb;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
border:0px;
margin-top:0px;
}

/*Le quitamos los bordes por defecto a las imágenes*/
img{
	border:0px;
}

/*Estilos de los links*/
a{
	color:#ebebeb;
	text-decoration:none;
}
h1{/*titulo grande*/
	font-size:16px;
	line-height:15px;
	font-weight:500;
	letter-spacing:2px;
}
h2{/*titulo mediano*/
	font-size:14px;
	line-height:15px;
	font-weight:500;
	letter-spacing:2px;
}
h3, p{ /*descripción*/
	font-size:11px;
	line-height:15px;
	font-weight:100;
	letter-spacing:1px;
}

/*MAIN - DIV que contiene  a todas las otras capas*/
#main {
	position:relative;
	visibility:visible;
	width:531px;
	height:auto;
	margin:15px auto 0 auto;
}

#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:531px;
	height:600px;
}

#prototipo-mdsys-dibujo10-a-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:167px;
	height:183px;
	background:#000;
}

#cabecera {
	position:absolute;
	left:167px;
	top:0px;
	width:197px;
	height:183px;
}

#login {
	position:absolute;
	left:364px;
	top:0px;
	width:167px;
	height:183px;
	background:#000;
}

#menu {
	position:absolute;
	left:0px;
	top:183px;
	width:173px;
	height:91px;
	font-size:11px;
	line-height:15px;
}

#centro-der {
	position:absolute;
	left:173px;
	top:183px;
	width:358px;
	height:68px;
}

#prototipo-mdsys-dibujo10-a-06 {
	position:absolute;
	left:173px;
	top:251px;
	width:166px;
	height:71px;
}

#titulo-categoria {
	position:absolute;
	left:339px;
	top:251px;
	width:192px;
	height:71px;
	background:url(../imgs/titulo-categoria-background.jpg) no-repeat top right;
}
#titulo-categoria h1{
	font-size:13px;
	letter-spacing:1px;
}
.titulo-categoria-alinea{
	width:auto;
	height:18px;
	text-align:left;
	margin:16px 0 0 20px;
}

#centro-abajo-izq {
	position:absolute;
	left:0px;
	top:274px;
	width:173px;
	height:48px;
}

#content-top-izq {
	position:absolute;
	left:0px;
	top:322px;
	width:531px;
	height:278px;
	background:#000;
}
#content-top-izq {
	position:absolute;
	left:0px;
	top:322px;
	width:531px;
	height:278px;
	background:#000;
}

/*LOGIN*/

/*DIV donde está el link para acceder al login*/
#login {
	position:relative;
	visibility:visible;
	float:left;
	width:167px;
	height:183px;
	text-align:right;
	font-size:13px;
}

/*DIV que se hace visible al activarse el login - Acá va el formulario de login*/
#login_on {
	position:absolute;
	visibility:hidden;
	top:255px;
	left: 269px;
	width:380px;
	height:250px;
	margin-left: -190px;
	margin-top: -150px;
	background-color:#515151;
	-moz-border-radius: 10px; /* Firefox*/
	-ms-border-radius: 10px; /* IE 8.*/
	-webkit-border-radius: 10px; /* Safari,Chrome.*/
	border-radius: 10px; /* El estándar.*/
	border:1px  #333 thin;
	font-family:Arial, Helvetica, Arial;
	font-size:12px;
	font-weight:100;
	line-height:16px;
	letter-spacing:1px;
	text-align:center;
}

/*Formulario del DIV login_on*/
.login_on_form{
	width:80%;
	height:80%;
	background:#515151;
}

/*TD del DIV login_on*/
.login_on_form TD{
	height:30px;
}

/*P de la tabla del DIV login_on*/
#login_on p{
	padding-top:5px;
	font-size:14px;	
	font-weight:600;

}

/*Sombra del DIV login_on - Meramente estética*/
#login_sombra {
	position:absolute;
	visibility:hidden;
	top:254px;
	left: 272px;
	width:380px;
	height:250px;
	margin-left: -190px;
	margin-top: -150px;
	margin-left: -190px;
	margin-top: -150px;
	background:#FFF;
	/*	bordes redondeados*/
	-moz-border-radius: 10px; /* Firefox*/
	-ms-border-radius: 10px; /* IE 8.*/
	-webkit-border-radius: 10px; /* Safari,Chrome.*/
	border-radius: 10px; /* El estándar.*/
	/*	opacidad*/
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
	border:1px #CCC dotted;
}

/*Div que hace opaco el sitio web para resaltar la aparición de login_on y login_sombra*/
#login_background {
	position:absolute;
	visibility:hidden;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	min-height:800px;
	background:#000;
	/*	opacidad*/
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}



/*CONTACTO*/

/*tamaño de la tabla de contacto*/
table.contacto{
	width:80%;
}

/*tamaño de los td de la tabla de contacto*/
.contacto td{
	width:auto;
}


/*estilo del mensaje de mensaje enviado de la tabla de contacto*/
.contacto h2{
	text-align:left
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:300;
	letter-spacing:1px;
}

/*estilo de las etiquetas referidas a los input de la tabla de contacto*/
.contacto h1{
	width:150px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	letter-spacing:2px;
	text-align:right;
	padding-right:0px;	
}
/*estilo de los input de la tabla contacto*/
.contacto_input_textarea{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	letter-spacing:2px;
	text-align:left;
	border:0px;
}
/*estilo de los input de la tabla contacto*/
input.contacto_input_textarea{
	width:170px;
	height:20px;
	padding:1px 5px 1px 5px;
}
/*estilo de los input de la tabla contacto*/
textarea.contacto_input_textarea{
	width:170px;
	height:100px;
	padding:5px 5px 5px 5px;
	margin-top:5px;
}

/*estilo de las etiquetas referidas a los input de la tabla de contacto*/
.contacto h3{
	width:150px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight:100;
	text-align:right;
	padding-right:0px;	
}

/*estilo de los botones de la tabla contacto*/
.boton { 
	width:63px;
	height:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight:100;
	letter-spacing:2px;
	text-align:center;
	cursor:pointer;
	border:0px;	
}

.contenedor_cuerpo_somos{
text-align:justify;
}

.contenedor{
	position:relative;
	visibility:visible;
	float:left;
	width:100%;
	height:auto;
	min-height:400px;
	color:#FFFFFF;
	-moz-border-radius: 10px; /* Firefox*/
	-ms-border-radius: 10px; /* IE 8.*/
	-webkit-border-radius: 10px; /* Safari,Chrome.*/
	border-radius: 10px; /* El estándar.*/
}
.contenedor_cuerpo{
	position:relative;
	visibility:visible;
	float:left;
	margin:0 auto 0 30px;
	width:84%;
	height:auto;
	color:#FFFFFF;
	background:#515151;
	-moz-border-radius: 10px; /* Firefox*/
	-ms-border-radius: 10px; /* IE 8.*/
	-webkit-border-radius: 10px; /* Safari,Chrome.*/
	border-radius: 10px; /* El estándar.*/
	margin:5% 8% 30px 8%;	
}

.contenedor_cuerpo_cabecera{	
	position:relative;
	visibility:visible;
	float:right;
	width:87%;
	height:50px;
}
.contenedor_cuerpo_cabecera_titulo{	
	position:relative;
	visibility:visible;
	float:left;
	width:70%;
	height:30px;
	text-align:left;
	padding-top:15px;
}
.contenedor_cuerpo_cabecera_cerrar{	
	position:relative;
	visibility:visible;
	float:left;
	width:30%;
	height:30px;
}
.contenedor_cuerpo_texto{
	position:relative;
	visibility:visible;
	float:right;
	width:80%;
	height:auto;
	text-align:justify;
	padding-right:7%;
}

.contenedor_icono_web{
	position:absolute;
	width:100px;
	height:100px;
	background:url(../imgs/contenido_icono_web.png) left top no-repeat;
	left: 0px;
	top: 0px;
}
.contenedor_icono_sys{
	position:absolute;
	width:100px;
	height:100px;
	background:url(../imgs/contenido_icono_sys.png) left top no-repeat;
	left: 0px;
	top: 0px;
}
.contenedor_icono_sop{
	position:absolute;
	width:100px;
	height:100px;
	background:url(../imgs/contenido_icono_sop.png) left top no-repeat;
	left: 0px;
	top: 0px;
}

.contenido-hacemos{
	margin:50px 0 0 0;
}