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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

a {
	text-decoration: none;
	color: #cc0033;
}

a:hover, a:active, a:focus { 
	outline: none; 
}

body {
	background-color: #333;
	padding: 0;
	margin: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1 {
	display: block;
	text-indent: -900%;
	height: 0;
}

h2 {
	padding: 10px;
	font-size: 2.2em;
	color: #cc0033;
	font-weight: bold;
}

h2.productos, h2.client_title, h2.cerraduras_title, h2.mantenimiento_title, h2.quienes_somos_title {
	border-bottom: 1px solid #cc0033;
	margin-bottom: 10px;
}

h2.cerraduras_title {
	
}

h2.mantenimiento_title {
	display: block;
	width: 920px;
}

h3 {
	font-size: 1.1em;
	color: #fdfdfd;
	padding-top: 7px;
	padding-left: 10px;
	margin-bottom: 10px;
}

h4 {
	color: #333;
}

p {
	line-height: 1.6em;
}

.black {
	font-weight:bold;
}

.red {
	color: #661f1f;
	font-weight: bold;
}
.green {
	color: #2b4d1f;
	font-weight: bold;
}
.blue {
	color: #292966;
	font-weight: bold;
}

/* Fin de Estilos Generales */

/****** Estilos del encabezado y menu ********/

#menu {
	width: 960px;
	margin: 0 auto;
	padding:0;
	list-style:none;
}

#menu li {
	float: left;
}

#menu li a {
	display:block; 
	height:40px; 
	line-height:30px; 
	padding:0 10px; 
	float:left; 
	text-decoration:none;
	color: #FFF;
	text-transform: uppercase;
	font-size: .75em;
	font-weight: normal;
}
#menu li a:hover, #menu li a:active {
	background-color: #fff;
	color: #cc0033;
	height: 30px;
}

#menu a.menu_current {
	background-color: #fff;
	color: #cc0033;
	height: 30px;
	font-weight: bold;
}

#outer_header { /* Header exterior */
	background: url(../images/bg_header.jpg) top left repeat-x;
	padding: 0;
	margin: 0;
	height: 75px;
}

/************** Estilos del sidebar izquierdo **************/

#left_sidebar {
	width: 180px;
	float: left;
	margin-right: 20px;
}

#left_sidebar.cerraduras{
	width: 240px;
	font-size: .9em;
}

#left_sidebar a.title{
	background: url(../images/bg_sidebar_titles.png) top left no-repeat;
	display: block;
	width: 186px;
	height: 28px;
	padding-top: 8px;
	padding-left: 0px;
	color: #fdfdfd;
	font-size: 1.1em;
	margin: 5px 0;
	font-weight: bold;
	text-indent: 20px;
}

#left_sidebar a.title:hover {
	background: url(../images/bg_sidebar_titles_h.png) top left no-repeat;
	color: #333;
}

#left_sidebar ul {
	margin-bottom: 20px;
}

#left_sidebar ul li {
	border-bottom: #333 dotted 1px;
	padding: 3px 0;
	padding-left: 10px;
}

#left_sidebar ul li a{
	color: #333;
	font-size: .8em;
	font-weight: bold;
}

#left_sidebar a.current {
	color: #cc0033;
}

#left_sidebar a.selected {
	color: #cc0033;
}

.colrecolectora {
	display: inline-block;
	width: 140px;
	vertical-align: middle;
}

/************** Estilos del Sidebar Derecho *****************/

#right_sidebar {
	float: right;
	width: 214px;
	height: 340px;
	padding-top: 70px;
	padding-left: 16px;
}

/************** Estilos del Footer ******************/

#footer {
	clear: both;
	width: 960px;
	margin: 0 auto;
	margin-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

#footer p {
	font-size: .8em;
	color: #999;
	line-height: 1.4em;
}

/************** Estilos del Wrapper externo ********************/

#main {   /* Div incrustado en header.php */
	clear: both;
	padding: 0;
	padding-top: 10px;
}

/************** Estilos del Wrapper interno (o main_content) *******************/

#main_content {
	width: 950px;
	height: 410px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}

#main_content p{
	padding: 10px 20px;
	font-size: .8em;
	line-height: 1.6em;
}

/* - bg particulares para cada seccion */

.main_bg { /* Utilizado en cerraduras y clientes */
	background: url(../images/bg_main.jpg) top left no-repeat;
}

.prod_main { /* Utilizado en productos.php */
	background: url(../images/bg_products.jpg) top left no-repeat;
}

.prod_lp { /* Utilizado en lp_producto.php */
	background: url(../images/bg_product.jpg) top left no-repeat;
}

.prod_desc_bg { /* Utilizado en producto.php */
	background: url(../images/bg_prod_detail.jpg) top left no-repeat;
}

.quienes_bg { /* Utilizado en quienes somos */
	background: url(../images/bg_quienes.jpg) top left no-repeat;
}

.comercializacion_bg { /* Utilizado en comercializacion */
	background: url(../images/bg_comercializacion.jpg) top left no-repeat;
}

.contacto_bg { /* Utilizado en contacto */
	background: url(../images/bg_contacto.jpg) top left no-repeat;
}


/****** Estilos de quienes somos, comercializacion y mantenimiento *********/

#bloque_quienes2 {
	line-height: 1.3em;
}

.quienes_top {
	font-weight: bold;
}

.quienes_middle {
	color:#444;
	border-top: 1px dotted #333;
	width: 780px;
}

.quienes_bottom {
	border-top: 1px dotted #333;
	font-weight: bold;
	width: 600px;
}

#lista_comercializacion {
	padding: 0 0px;
}

#lista_comercializacion li{
	float: left;
	display: block;
	width: 300px;
}

#lista_comercializacion li.alquiler{
	width: 460px;
}
#lista_comercializacion li.ventamant{
	width: 460px;
}
#lista_comercializacion li.venta{
	width: 220px;
}

#lista_comercializacion h3{
	font-size: .85em;
	color: #333;
	font-weight: bold;
	border-top: 1px solid #cc0033;
	border-bottom: 1px dotted #333;
}

#lista_comercializacion p{
	line-height: 1.5em;
	padding: 0 10px 10px;
	color: #333;
	font-size: .75em;
}

#tabs {
	width: 560px;
	float: left;
}

#tabs p{
	padding: 10px 0;
}

.scroll-pane2 {
	width: 550px;
	height: 240px;
	overflow: auto;
	float: left;
}

.scroll-pane3 {
	width: 560px;
	height: 240px;
	overflow: auto;
	float: left;
}

#mantenimiento_img {
	float: right;
	margin-top: 25px;
	padding: 0 10px 0;
	width: 360px;
}

#mantenimiento_img img {
	/*border: 1px solid #ddd;*/
}

/************* Estilos de Producto *****************/

/* - Primera pagina */

.frecuentes, .terminales, .otros {
	display: block;
	width: 380px;
	height: 340px;
	position: absolute;
	top: 80px;
}

#frecuentes {
	width: 280px;
	height: 300px;
	background: transparent url(../images/title_usos_frecuentes.jpg) no-repeat;
}

.frecuentes {
	left: 20px;
	float: left;
}

.terminales {
	left: 320px;
}

.otros {
	left: 620px;
}

.frecuentes a, .terminales a, .otros a{
	display: block;
	width: 168px;
	height: 31px;
	background: url(../images/bg_product_desc.jpg) top left no-repeat;
	font-size: 1.1em;
	color: #fdfdfd;
	padding-top: 7px;
	padding-left: 10px;
	margin-bottom: 10px;
}
.frecuentes a:hover, .terminales a:hover, .otros a:hover{
	background: url(../images/bg_product_desc_h.jpg) top left no-repeat;
	color: #333;
}


/* - Landing Page */

#paleta_colores {
	position: absolute;
	right: 0px;
	top: 0px;
}

#paleta_colores p{
	font-size: .8em;
	color: #333;
	padding: 8px 20px;
}

#paleta_colores img {
	vertical-align: text-bottom;
}

table.prod_list {
	width: 740px;
}

table.prod_detail td, table.prod_list td{
	padding: 5px;
	vertical-align: top;
}

table.prod_list td{
	border-top: #333 dotted 1px;
}

table.prod_list td.top{
	border-top: #cc0033 solid 2px;
	color: #cc0033;
	font-weight: bold;
}

table.prod_list td.top_left{
	border-top: #cc0033 solid 2px;
	font-weight: bold;
}

table.prod_list td.top_left_terminales{
	border-top: #cc0033 solid 2px;
	font-weight: bold;
	margin-top: 10px;
}

table.prod_list a, table.prod_detail a{
	color: #cc0033;
	font-weight: bold;
}

td.tb_title {
	border-top: #cc0033 solid 2px;
	border-bottom: #333 dotted 1px;
	padding: 5px 5px;
	font-weight:bold;
	/*text-align: center;*/
}

#img_terminales {
	padding: 5px 10px;
	margin: 10px 0px 15px;
	border-top: #cc0033 solid 2px;
}

#img_terminales img {
	margin: 10px;
	border: 1px solid #333;
}

#img_especiales {
	padding: 5px 5px;
	margin: 10px 0px 15px;
	border-top: #cc0033 solid 2px;
}

#img_especiales img {
	/*margin: 10px 0px;*/
	border: 1px solid #333;
}

#img_especiales table {
	margin-top: 10px;
	height: 300px;
}

#otros_usos_left {
	padding: 0;
	margin: 0;
	float: left;
	width: 170px;
	margin-top: 10px;
	margin-right: 10px;
}

#otros_usos_right {
	padding: 0;
	margin: 0;
	float: right;
	width: 170px;
	margin-top: 10px;
	margin-left: 10px;
}

#otros_usos_center {
	float: left;
	width: 350px;
	padding: 0;
	margin: 0 auto;
	margin-top: 10px;
}

/* - Descripcion de producto */

.prod_main img {
	margin: 0 15px;
	/*border: 1px solid #333;*/
}

#navigator { /* Navegador para avanzar productos */
	position: absolute;
	right: 12px;
	top: 4px;
	width: 225px;
	height: 38px;
	background: transparent url(../images/bg_navigator.jpg) top left no-repeat;
	padding-top: 18px;
}

#navigator li {
	float: left;
	width: 10px;
	margin: 0 14px;
	font-size: 1em;
	color: #fff;
}

#navigator li.modelo{
	width: 185px;
	margin: 0px;
	text-align: center;
}

#navigator li.leftli, #navigator li.rightli {
	margin: 0 5px;
}

#navigator a{
	color: #fff;
	display:block;
}

#product_slider {
	margin: 0 10px;
}

#product_detail {
	padding: 30px 0 0px;
	float: left;
	position: relative;
}

table.prod_detail, table.prod_list {
	font-size: .8em;
	margin: 10px 0 20px;
	padding: 5px;
}

table.prod_detail {
	width: 520px;
}

table.prod_detail ul{
	float: left;
}

table.prod_detail ul li{
	padding: 0 5px;
	line-height: 1.5em;
}

/************* Estilos Cerraduras ********************/

#cerraduras_desc {
	width: 410px;
	float: left;
}

#cerraduras_desc h3 {
	background: none;
	display: block;
	width: 360px;
	color: #333;
}

#cerraduras_desc p {
	font-size: .75em;
	color: #333;
	line-height: 1.2em;
	padding: 5px 10px;
	text-align: justify;
}

#cerraduras_img {
	float: right;
	/*width: 180px;*/
	/*height: 400px;*/
	padding: 20px 10px;
}

.uso {

}

/********* Estilos Clientes y Slideshow Correspondiente **************/

.container {
	overflow: hidden;
	width: 964px;
	margin: 0 auto;
}
#slideshow {
	padding: 0px;
	/*border: 1px solid #666;*/	
}

#client_list {
	float: left;
	margin: 0px 0px;
}

#client_list li{
	font-size: .8em;
	list-style: none;
	line-height: 1.2em;
	color: #333;
	padding: 5px 0;
	padding-left: 5px;
}

.scroll-pane {
	width: 300px;
	height: 260px;
	overflow: auto;
	float: left;
}

#client_slideshow {
	float: right;
	width: 400px;
	padding: 0px 20px;
}

#slideshowHolder {
	border: 1px solid #aaa;
}

#client_slideshow a {
	font-size: .8em;
	color: #333;
}

#client_slideshow a:hover, #client_slideshow a:active {
	color: #cc0033;
}

.ft-title { padding: 10px 10px; width: 380px; text-align: left; }


.nicho {
	background: none;
	display: block;
	height: 20px;
	width: 300px;
	border-bottom: #333 dotted 1px;
	color: #333;
	padding: 0 0 10px;
	font-weight: bold;
}

.locker_img {
	float: left;
	margin: 20px;
	margin-top: 70px;
}

/********************* Estilos del Contacto *********************/

.contacto_bg p{
	font-size: .9em;
	font-weight: bold;
	display: block;
	width: 150px;
}

.obligatorio {
	color: #c00;
	font-size: .8em;
	font-weight: bold;
	position: absolute;
	right: 60px;
	top: 60px;
}

/********************* Estilos de Pagina Principal ****************/
.main_image {
	width: 684px; height: 408px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.main_image h2 {
	font-size: 1.4em;
	font-weight: normal;
	margin: 0 0 5px;	padding: 5px;
}
.main_image p {
	font-size: 1.3em;
	padding: 10px;	margin: 0;
	line-height: 1.3em;
	color: transparent;
	position: absolute;
	right: 85px;
	bottom: 0px;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(icon_calendar.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	position: relative;
	/*background: #111;*/
	/*border-top: 1px solid #000;*/
}
.main_image a {
	text-decoration: none;
	color: #cc0033;
	font-size: .75em;
	font-weight: bold;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 279px;
	background: #f0f0f0;
	/*border-right: 1px solid #fff;
	border-top: 1px solid #ccc;*/
}
.image_thumb img {
	/*border: 1px solid #ccc; */
	padding: 0px; 
	background: #fff; 
	float: left;
}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0; padding: 0;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	/*border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;*/
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.2em; 
	margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{display: none;}

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

#contact-form {
	width: 640px;
	color: #333;
}

form {
	margin : 0;
	padding : 0;
	font-size: .85em;
	position: absolute;
	left: 240px;
	top: 40px;
}
fieldset {
	float : left;
	width: 240px;
	margin : 0 .5em 0 .5em;
	padding : 1em;
	border : 1px solid #fff;
	/*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 #ccc;
	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 #ccc;
}
input#counter {
	margin:0px;
	border:3px double #ccc;
	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 #ccc;
	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;
}

#tabs p a {
	color: #CC0033;
}