/* archivo: 		rac1/media/css/estilos.css
/* modificacion:	05/oct/2009 162:3
/* usuario:			mespinosa
/* :

/* Reset
-------------------------------------------------------------- */
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;
}

fieldset, img { border: 0; }


a:link, a:visited, a:active, a:hover, a:focus {
	font-weight: bold;
    text-decoration:none;
    outline:none;
    color:#0093dd;
}

a:hover {
    color:#1A66B2;
    text-decoration:underline;
}

 
option { 
	padding-left: 0.4em; 
}

 
ul, ol, dl { 
	margin: 1em 0; padding-left: 30px 
}

dl { 
	margin: 1em 0; 
}

dd { 
	padding-left: 40px; 
}

blockquote { 
	margin: 0 0 1em 1.5em; 
}

p {	
	margin: 1em 0; 
}

td, th { 
	padding: 1px; 
}
 
html {
	height: 100%;
	margin-bottom: 1px;
}
	
/* General
-------------------------------------------------------------- */
body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 150%;
	color: #646464;
	background-image: url(../images/bg_page.png);
	background-repeat: repeat-x;
}

strong{
	color: #1A66B2;
}

hr{
	height: 15px;
	border: none;
	color: white;
}

span.separador{
	display:block;
	height: 50px;
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/separador.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

h2{
	font-family: "Trebuchet MS";
	font-weight: normal;
	font-size: 14pt;
	text-transform: uppercase;
}

h2 strong{
	font-weight: normal;
	color: #0093dd;
}

h3{
	font-family: "Trebuchet MS";
	font-size: 11pt;
}
h3 a{
	color: #646464;
}

h3 strong{
	color: #0093dd;
}

#lateral h3{
	text-transform: uppercase;
}

blockquote {
	margin:10px 40px;
	color:#808080;
	line-height:14px;
	padding:0px 30px;
	padding-bottom: 10px;
	border-bottom:1px solid #f3f3f3;
	background-color: transparent;
	background-image: url(../images/23.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

a.boton{
	font-weight: bold;
	border: 0;
	text-decoration: none;
	line-height: 24px;
	padding: 8px 0;
	background-color: transparent;
	background-image: url(../images/boton.png);
	background-repeat: no-repeat;
	background-position: right center;
}

a.boton span{
	padding: 8px 0;
	padding-left: 10px;
	margin-right: 10px;
	background-color: transparent;
	background-image: url(../images/boton.png);
	background-repeat: no-repeat;
	background-position: left center;
}

.hide{
	display: none;
}

.centrado{
	text-align: center;
}

.der{
	text-align: right;
}


/* layout
-------------------------------------------------------------- */

#wrapper{
	width: 1024px;
	margin: 0 auto;
	background-color: #ffffff;
	background-image: url(../images/wrapper_t.png);
	background-repeat: repeat-x;
	background-position: 0 0;
}
#wrapper-tl{
	background-image: url(../images/wrapper_tl.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
#wrapper-tr {
	background-image: url(../images/wrapper_tr.png);
	background-repeat: no-repeat;
	background-position: 100% 0;
}

#wrapper-l{
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/wrapper_l.png);
	background-repeat: repeat-y;
	background-position: 0pt 0pt;
}
#wrapper-r{
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/wrapper_r.png);
	background-repeat: repeat-y;
	background-position: 100% 0pt;
}
#wrapper-br{
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/wrapper_br.png);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}
#wrapper-bl{
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/wrapper_bl.png);
	background-repeat: no-repeat;
	background-position: 0pt 100%;
}
#wrapper-b{
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../images/wrapper_b.png);
	background-repeat: repeat-x;
	background-position: 0pt 100%;
}

#contenedor{
	padding: 10px 35px 80px;
}

/* cabecera
-------------------------------------------------------------- */
#cabecera{
}
#titulo{
	height: 140px;
	background-image: url(../images/bg_header_img.png);
	background-repeat: no-repeat;
}

#menu{
	height: 75px;
	background-image: url(../images/bg_menu.png);
	background-repeat: repeat-x;
}


#menu ul {
	padding: 0;
	margin: 0;
	list-style:none;
}

/* never apply padding to the li, as offsetWidth will differ in IE!,
if you need padding add it to a child element */
#menu ul li{
	float: left;
}

#menu ul li a {
	text-indent: -500em;
	z-index: 10;
	display: block;
	float: left;
	height: 64px;
	position: relative;
	overflow: hidden; /* this is sort of a trick to prevent firefox from extending the dotted shape when you click a link */
}

#item_inicio a {
	width: 132px;
	background-image: url(../images/racom.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#item_racom a {
	width: 130px;
	background-image: url(../images/menu_racom.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#item_productos a {
	width: 160px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/menu_productos.gif);
}

#item_distribuidores a {
	width: 140px;
	background-image: url(../images/menu_distribuidores.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#item_servicios a {
	width: 140px;
	background-image: url(../images/menu_servicios.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#item_contacto a {
	width: 160px;
	background-image: url(../images/menu_contacto.gif);
	background-repeat: no-repeat;
	background-position: center;
}

#item_salir a {
	width: 50px;
	background-image: url(../images/menu_admini.png);
	background-repeat: no-repeat;
	background-position: center;
}

#menu li.background {
	background: url(../images/menu_bg.png) no-repeat top right;
	position: absolute;
	top: 1px;
	visibility: hidden;
	background-image: url(../images/menu_bg.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#menu .background .left {
	background: url(../images/menu_bg.png) no-repeat top left;
	height: 24px;
	margin-right: 7px; /* 7px is the width of the rounded shape */
	background-image: url(../images/menu_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
}


/* Layout
-------------------------------------------------------------- */
#pie{
	margin: 0px 50px;
	font-size: 8pt;
	clear:both;
}

#contenido{
	padding: 1px 0;
	background-color: #FFF;
	background-image: url(../images/bg_contenido.png);
	background-repeat: repeat-x;
}

#lateral{
	width: 290px;
	min-height: 200px;
	float: left;
	background-color: transparent;
	background-image: url(../images/bg_lateral_top.png);
	background-repeat: no-repeat;
}
#lateral-cont{
	margin: 30px 25px 10px 35px;
	font-size: 13px;
}
#lateral-cont .centrado{
	margin-left: -30px;
}


#lateral #clientes{
	height: 270px;
	background-image: url(../images/clientes.png);
	background-repeat: no-repeat;
	background-position: 0 40px;
}

#lateral h3{
	font-weight: normal;
}

#menu_lateral .active, #menu_lateral li:hover{background:#0080FF;color:#fff}

#central{
	padding: 7px 10px 0px 295px;
}
#central h3{
	margin-top: 20px;
}

.completo{
	padding: 20px 50px;
}

/* noticias
-------------------------------------------------------------- */
.sub{
	font-size: x-small;
	color: #BABABA;
	font-weight: bold;
}

.fecha a{
	color: #BABABA;
}

.fecha a:hover{
	color: #0093dd;
}

.mas{
	padding-left: 15px;
	background-color: transparent;
	background-image: url(../images/ico_read.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

#noticias .fecha{
	margin: 0;
}


.sangria{
	padding-left: 85px;
	background-image: url(../images_noticias/ghost.png);
	background-repeat: no-repeat;
	background-position: 0 8px;
}
.Controles{
	background-image: url(../images_noticias/ico_controles.png);
}
.Tableros{
	background-image: url(../images_noticias/ico_tableros.png);
}

/* contacto
-------------------------------------------------------------- */
#opciones .acord{
	border-top: medium none;
	border-bottom: medium none; 
	overflow: hidden; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	visibility: hidden; 
	opacity: 0; 
	height: 0px;
}

#opciones h3{
	text-transform:uppercase;
	cursor:pointer;
}

#opciones .tel{

	background-image: url(../images/ico_tel.png);
}
#opciones .mail{
	background-image: url(../images/ico_mail.png);
}

#opciones .skype{
	background-image: url(../images/ico_skype.png);
}

#opciones .mapa{
	background-image: url(../images/ico_mapa.png);
}

/* Formularios
-------------------------------------------------------------- */
label{
	color: #24568a;
	font-weight: bold;
}

label span{
	color: #000;
	font-weight: normal;
}

.datos label{
	width: 13em;
	float: left;
	text-align: right;
	margin: 0 1em 10px 0;
	clear: both;
}
.datos label.no-float{
	clear: none;
	float: left;
	text-align: left;
}
.datos input, .datos select, .datos textarea{
	float: left;
	margin-bottom: 10px;
}

.datos .info{
	margin: 0 0 10px 0.5em;
	float: left;
}


/* content
-------------------------------------------------------------- */
#submenu{
	padding:0;
}

#submenu li{
	list-style: none;
	line-height: 30px;
	padding: 5px 0;
}

#submenu a{
	display: block;
	width: 160px;
	font-weight: bold;
	font-size: 12px;
	border: 0;
	text-decoration: none;
	padding-left: 20px;
	background-color: transparent;
	background-image: url(../images/back_submenu.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#submenu a:hover{
	background-color: transparent;
	background-image: url(../images/back_submenu.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}



/* Productos
-------------------------------------------------------------- */
#detalles {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #FFF;
	width: 570px;
}

#detalles li {
	height: 133px;
	padding: 12px 0 0 14px;
	display: block;
	background-image: url(../images/bg_detalles_prod.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#detalles img {
	width: 200px;
	float: left;
	margin-right: 18px;
	border: solid 1px #000;
}

#detalles a:hover img {
	border: solid 1px #3b6271;
}
#detalles h3 {
	font: normal 140%/100% Arial, Helvetica, sans-serif;
	margin: 0;
	color: #444;
	padding: 5px 0 5px;
}

#detalles h3 a {
	color: #89b5c6;
	text-decoration: none;
}

#detalles h3 a:hover {
	color: #fff;
}

#detalles p {
	font: 95%/120% Arial, Helvetica, sans-serif;
	border-bottom: solid 1px #CCC;
	padding: 7px 0;
	width: 300px;
	float: left;
	color: #444;
	overflow: hidden;
	margin: 0;
}


/* Login
------------------------------ */
#logindiv{
	background-color: #F2F7E9;
    color:#8FB82D;
	border-bottom:1px solid #8FB82D;
	width: 350px;
	margin: 25px auto;
	margin-bottom: 75px;
}
#loginform{
	padding: 10px;
}
#loginErrorMsg{
	background-color:#E2E7D9;
	padding: 5px 10px;
	border-top: 1px solid #8FB82D;
	font-weight: bold;
	text-align: center;
	color: #CE2269;
}
#loginform input[type=text], #loginform input[type=password] {
	width:157px;
	height:15px;
	border:none;
	padding:4px 8px;
	background-image: url(../images/input.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#loginform table {
	margin: 0px auto;
	border: 0px;
}
#loginform td { padding: 4px; }
.barra{
	background-color: #F2F7E9;
	background-image: url(../images/bar.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
.barra h3 {
    display:none;
}
.barra a{
    font-size:10px;
    color:#FFF;
    padding:8px; 
    padding-left:22px;
    text-decoration:none;
    background: transparent url(../images/left.gif) no-repeat center left;
}
.barra p {
	margin:6px;
	margin-right:0;
	padding:5px 0px;
	width:70px;
	background-color: transparent;
	background-image: url(../images/right.gif);
	background-repeat: no-repeat;
	background-position: right center;
}