@charset "UTF-8";
/* CSS Document */

/* Colores Utilizados
Body:						#F5F5F5;
Contenedor, gris al 5%:		#F2F2F2;
Algunos fondos, blanco:		#FFFFFF;
Slogan, gris al 30%:		#B3B3B3;
Fuente menu, gris al 40%:	#999999;
Hover menu, gris al 50%:	#808080;
Hover fuente, gris 10%		#E6E6E6;
Rojo:						#EC1C24;
List productos, gris 20%:	#CCCCCC;
Color gris al 60%: #666666;
Color gris al 80%: #333333;

*/

/***************************************
1A: ESTILOS BÁSICOS
****************************************/

/* neutralizo estilos de cualquier browser */
body, html {
	margin:0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding:0;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin: 1em 0;
	padding: 0;
	}
	
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #F2F2F2;
	color: #808080;
	text-align: center; /* se anula en el contenedor */
}

a, a:link, a:active {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #808080;
	text-decoration: underline;
}
/* Remover linea punteada de Mozilla Firefox al hacer click sobre link */
a:active {
    outline:none;
}
a:focus {
    -moz-outline-style:none;
}
img{
	border: 0px;
}

#body .br { 
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e5e5e5;
}

/***************************************
2A: LAYOUT
****************************************/

#contenedor {
	width: 960px;
	background: #F2F2F2;
	margin: 0 auto; /* centro la página */
	/*border: 1px solid #000;*/
	text-align: left;
	font-size: .9em;
}

#encabezado {
	margin: 0;
	padding: 0;
}

#navPanel {
	padding: 0 0; 
	margin: 0;
	border-bottom: 1px dotted #EC1C24;
	border-top: 1px dotted #EC1C24;
}


#pie {
	width: 900px;
	padding: 0;
	margin: 0 auto;
}

.clearfloat { /* esta clase debe colocarse en un elemento div o break y debe ser el último elemento antes del cierre de un contenedor que incluya completamente a un elemento flotante */
	clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
	padding: 0;
	margin:0;
}
.divisor {
	clear:both;
	border-bottom: 1px dotted #666;
	width: 700px;
}
/*******************************************
3A: TIPOGRAFÍA GENERAL Y ESTILOS DE COLOR
********************************************/

/* Comienzan estilos de Menu 
============================== */
.Menu {
	float: left;
}
	.menu ul {
		margin: 0 auto;
		padding: 0; 
		list-style: none;	
		/*display: table; se comporta como una tabla */
		/*white-space: nowrap; no baja de renglón ninguna palabra */
	}
		.menu ul li {
			display: inline; /* comporta como celda de tabla */ 
			/*margin: 0; 
			padding: 0;*/
		}
			.menu ul li a {
				display: block;
				float: left; 
				font-size: .75em;
				color: #666666; 
				padding: .4em .4em;
				text-decoration: none;
				text-transform: uppercase;
				text-align: center;
			}
				.menu ul li a:hover {
					color: #E6E6E6;
					background: #808080;
				}
				.menu ul li a.current, #menu ul li a.current:hover, #menu ul li a.current:active {
					color: #E6E6E6;
					background: #EC1C24;
					cursor: default;
				}
				
/* Finalizan estilos de menu */

/* Estilos generales de contenido 
================================= */

#contenido h1 {
	margin: 1em 0 0 0;
	font-size: 1em;
}
#contenido {
	margin: 10px 10px;
	margin-bottom: 0px;
}
#contenido p {
	margin-right: 20px;
	padding: .2em 1em;
	/*text-align: justify;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: .85em;	
}
#contenido h2{
	margin: 0;
	margin-bottom: 1em;
	font-size: 1.25em;
	text-transform: uppercase
}
#contenido .animacion {
	float: left;
	margin: 2em;
}
#contenido p.uso{
		font-size: 1.05em;
		padding: 0px;
		margin: 0;
}

/* Termina estilos de contenido general */

/*******************
Estilos del Home
********************/
#contenido .slogan{
	font-size: 34px;
	color: #666;
	text-align: center;
	text-transform: uppercase;
	padding-top: 30px;
}

#contenido img .inicio{	
}

#logo_inicial{
	width: 880px;
	margin: 120px auto 0;
}

#banderas{
	width: 420px;
	margin: auto;
	height: 100px;
}
#banderas .bandera{
	width: 110px;
	float: left;
	padding: 0 0 0 30px;
}
#banderas .bandera p{
	padding: 0px;
	text-align: left;
	color: #333;
	text-transform:uppercase;
}

#banner_inicio{
	width: 700px;
	margin: 0 auto;
}

/* Termina Home */

/*************************************************** 
Estilos del contenido de toda la seccion productos 
****************************************************/

#contenido_productos{
	float: right;
	width: 700px;
	margin: 0;
	margin-left: 10px;
	margin-top: 10px;
	padding: 0 10px;
}
#contenido_productos h2{
	margin: 0px;
	margin-bottom: 1em;
	font-size: 1.25em;
	text-transform: uppercase;
}
#contenido_productos h3{
	margin: 1em 0;
	font-size: 1.1em;
}
#contenido_productos p{
	font-size: .85em;
}

#menu_productos{
	float: left;
	margin: 2em .2em;
	width: 10em;
	background-color:#CCC;
}

.categoria_prod1, .categoria_prod2, .categoria_prod3{
	margin-left: 330px;
	margin-bottom: 20px;
	padding-left: 20px;
	padding-top: 75px;
	width: 560px;
	_width: 560px;
	height: 75px;
	list-style: none;
	position: relative;
}
.categoria_prod1{
	background: url(../images/productos/1.jpg) no-repeat;
}
.categoria_prod2{
	background: url(../images/productos/2.jpg) no-repeat;
}
.categoria_prod3{
	background: url(../images/productos/3.jpg) no-repeat;
}

#contenido_productos h3.producto {
	margin-top: 50px;
}

/* Menu de categorías */
#menu_categorias{
	width: 200px;
}
#menu_categorias li{
	border-bottom: 1px #F00 dotted;
	padding-left: 10px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	list-style: none;
	text-transform: uppercase;
	font-size: .85em;
}
#menu_categorias a{
	text-decoration: none;
	color: #666;
}
#menu_categorias a:hover{
	color: #333;
}
#menu_categorias a.current, #menu_categorias a.current:hover, #menu_categorias a.current:active {
	color: #EC1C24;
}

/* Termina Menu de Categorias */

/* Control de Acceso */
#imagen_producto{
	float: left;
	margin: 0 10px 5px 0px;
}
#desc_producto{
	float: right;
	width: 470px;
	padding-left: 10px;
	margin: 0;
	margin-bottom: 10px;
	/*background-color:#ccc;*/
	font-size: .85em;
}
.uso{
	text-transform: uppercase;
	color: #676767;  /* Original: #ed1c24 */
	font-weight: bold;
}
.atencion {
	background-color: #e2cfcf;
	padding: 12px 10px;
	color: #ed3c2e;
	font-weight: bold;
	font-size: .8em;
}

#desc_producto li{
	padding: 5px 0;
	list-style: inside;
	list-style-type: circle;
	margin-left: 4px;
}
#contenido_productos .lista_producto{
	background-color: #CCC;
	width: 600px;
	height: 100px;
	margin: 10px 0;
	position: relative;
	_height: 80px;
}
#contenido_productos .lista_producto h3{
	font-size: 1.2em;
	margin: 0px;
	margin-left: 100px;
	padding: 10px 10px 5px 0;
	border-bottom: 1px #FFF dotted;
	text-transform: uppercase;
}
#contenido_productos .lista_producto p{
	font-size: .85em;
	padding: 0 10px;
}
#contenido_productos .lista_producto img{
	float: left;
	padding: 10px;
	_padding: 10px;
}

.detalle{
	float: right;
	margin: 10px;
	margin-right: 0px;
	width: 100px;
	height: 100px;
	color:#FFF;
	position: absolute;
	left: 590px;
	top: -20px;
	vertical-align: middle;
	border: 0px;
}

#contenido_productos .cerraduras_control_acceso {
	float:left;
}
* html #contenido_productos .cerraduras_control_acceso {
	width: 680px; /* Fix para IE6 */
}

#contenido_productos .llaves_control_acceso {
	width: 359px;
	margin: 0;
	padding-right: 10px;
	float: left;
	border-right: 1px dotted #666;
}
#contenido_productos .cilindros_control_acceso {
	width: 320px;
	padding-left: 10px;
	margin: 0;
	float: right;
}
/* Termina Control de Acceso */

/* Lockers */
#contenido_productos .cerraduras_lockers {
	float:left;
}
* html #contenido_productos .cerraduras_lockers {
	width: 660px; /* Fix para IE6 */
}
#contenido_productos #inferior {
	display: table;
	_display:block;
	border-top: 1px dotted #666;
}
#contenido_productos .cilindros_lockers {
	width: 329px;
	padding: 5px;
	margin: 0 5px;
	float: left;
}
#contenido_productos .llaves_lockers {
	width: 330px;
	padding: 0 5px 0 10px;
	margin: 0 5px 0 0;
	float: right;
	border-left: 1px #666 dotted;
}
/* Termina Lockers */

/* Puertas Acorazadas */
#contenido_productos .puerta {
	float: left;
	margin-right:10px;
}
#contenido_productos .detalles {
	
}
#contenido_productos .estructura p{
	padding-left: 250px;
}
#contenido_productos .pasadores{
	float: right;
}
#contenido_productos .inferior {
	clear: both;
	border-top: 1px #666 dotted;
}
#contenido_productos .llaves_acorazadas {
	width:400px;
	float: left;
	padding-right: 10px;
	border-bottom: 1px dotted #666;
}
#contenido_productos .cerraduras_acorazadas {
	width:400px;
	float: left;
	padding-right: 10px;
}
#contenido_productos .cilindros_acorazadas {
	width:279px;
	float: right;
	padding-left: 10px;
	border-left: 1px dotted #666;
}

/* Termina puertas Acorazadas */

/* Termina estilos de contenido para productos */

/********************************************************************** 
Estilos del contenido de quienes somos, profesionales y particulares 
***********************************************************************/

#contenido_clientes{
	margin: 10px;
	margin-left: 340px;
	padding: 0 10px;
}
#contenido_clientes h2{
	margin: 0px;
	margin-bottom: 1em;
	font-size: 1.25em;
	text-transform: uppercase;
	/*color: #444;*/
}
#contenido_clientes h3{
	margin: 1em 0;
	font-size: 1.1em;
}
#contenido_clientes p{
	font-size: .85em;
}

#banner_clientes{
	float: left;
	margin: 10px;
	width: 320px;
}

/* Termina contenido Quienes Somos, Profesionales y Particulares */

/* Estilo para Duplicaciones
============================== */
#info_duplicaciones{
	font-size: 1.1em;
	float: right;
	width: 300px;
	border-left: #808080 dotted 1px;
}
#info_duplicaciones p{
	margin: 1em;
	padding: .5em;
}

/* Termina Duplicaciones */

/* Pie de Pagina 
================== */
#pie p {
	border-top: 1px dotted #B3B3B3;
	font-size: .8em;
	color: #666666;
	padding: 1em .5em;
	text-align: center;
}

/* Termina Pie */

.imagen_izquierda {
	float: left;
	margin: 0px 10px;
}

#imagenes_inicio {
	margin: 0 0px;
	padding: 0;
}

#banner_horizontal {
	padding: 20px 0;
	margin: 0;
}
#banner_izq{
	float: left;
	margin: 10px;
	width: 320px;
}
#banner_categorias{
	float: left;
	margin-right: 20px;
}

#imagenes_inicio img{
	border: 0px;
}



.ver_productos {
	float: right;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.ver_productos a{
	text-decoration: none;
	color: #F00;
}
.ver_productos a:hover{
	color: #FFF;
}

/*****************************************
Estilos Acordeón Control de Duplicaciones
*******************************************/

#options {width:657px; margin:20px 0; text-align:right; color:#9ac1c9}
#options a {text-decoration:none; color:#9ac1c9}
#options a:hover {color:#033}

#acc {width:657px; list-style:none; margin:0 0 40px; font-size: .85em; margin-left: 250px;}
#acc h3 {width:643px; /*border:1px solid #9ac1c9;*/ padding:6px 6px 4px; font-weight:bold; margin-top:5px; margin-bottom: 0; cursor:pointer; /*background:url(../images/header.gif)*/ }
#acc h3:hover {color:#333 /*background:url(../images/header_over.gif)*/}
#acc .acc-section {overflow:hidden; /*background:#fff*/}
#acc .acc-content {width:625px; padding:15px; /*border:1px solid #9ac1c9;*/ border-top:none; /*background:#fff*/}

#nested {width:625px; list-style:none; color:#033; margin-bottom:15px}
#nested h3 {width:611px; /*border:1px solid #9ac1c9;*/ padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(../images/header.gif)}
#nested h3:hover {background:url(../images/header_over.gif)}
#nested .acc-section {overflow:hidden; background:#fff}
#nested .acc-content {width:593px; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}
#nested .acc-selected {background:url(../images/header_over.gif)}

/* Termina estilos de acordeon */

#contenido .slogan_duplicaciones {
	font-size: 1.2em;
	font-weight: bold;
	color: #EC1C24;
}

#contenido #patentes {
	float: left;
	text-align: center;
	width: 240px;
	/*border-right: 1px dotted #999;*/
	margin: 30px 10px 10px 0;
}

#contenido #patentes img{
	margin: 5px;
}

/* Termina control de duplicación */

#sidebar_izq {
	float: left;
	width: 200px;
	padding: 0 10px;
}

/*#lista_inicio {margin-left: 720px;padding: .2em;}*/

.navegador {
	float: right;
	font-size: .85em;
	width: 190px;
	display: block;
	text-align: right;
	margin-bottom: 5px;
}

/***************************************
       FORMULARIO DE CONTACTO
***************************************/

#contactform {
	width: 640 px;
	font-size: .85em;
}
form {
	font-family: Arial, Helvetica, sans-serif;
	margin : 0;
	padding : 0;
}
fieldset {
	float : left;
	width: 240px;
	margin : 0 .5em 0 .5em;
	padding : 1em;
	border : 1px solid #B5CCBA;
	background : #F1F8F6;
}
fieldset div {
	width:240px; /* Width for modern browsers */
	border:0px solid #B5CCBA;
	margin:0 auto 0 auto;
	padding:1px;
}
* html fieldset div {
	width: 260px; /* Width for IE5 */
	w\idth: 240px; /* Width for IE6 */
}
fieldset div input {
	width: 236px; /* Width for modern browsers */
	border : 3px double #B5CCBA;
	padding : 1px;
}
* html fieldset div input {
	width: 240px; /* Width for IE5 */
	w\idth: 236px; /* Width for IE6 */
}
fieldset div br {
	display : none;
}
legend {
	font-weight : bold;
	/*color : #333;*/
	margin : 0;
	padding : 0.5em;
}
label {
	display : block;
}
label em {
	font-style : normal;
	text-decoration : underline;
	/*color : #900;*/
}
input {
	width: 240px;
	background: #fafbfc;
	border : 3px double #B5CCBA;
}
input#counter {
	margin:0px;
	border:3px double #B5CCBA;
	font-size: 100%;
}
input#submit {
	border: 3px double #B5CCBA;
	border-top-color: #CCC;
	border-left-color: #CCC;
	padding: .25em;
	background: #F1F8F6 url('fade.png') repeat-x;
	margin:5px 4px 5px 4px;
	/*color: #333;*/
	/*font-size:150%;*/
	font-weight: bold;
	/*font-family: Verdana, Helvetica, Arial, sans-serif;*/
}
input#counter:active, input#submit:active {
	border: 3px double #B5CCBA;
	border-top-color: #999;
	border-left-color: #999;
}
textarea {
	padding: 0;
	margin:5px auto 10px auto;
	background: #fafbfc;
	border : 3px double #B5CCBA;
	width: 240px;
	height:160px;
}
input:hover, textarea:hover {
	background:#fff;
}
input:focus, textarea:focus {
	border : 3px double #666;
	background:#fff;
}
#back {
        display:block;
        background:#333;
        /*color:#FAFBFC;*/
        width:250px;
        font-size:150%;
        font-weight:bold;
        text-align:center;
        text-decoration:none;
        padding:10px;
        margin:30px auto 30px auto;
}
#back:hover {
        background:#DDD;
        color:#555;
}