@charset "utf-8";

/*------------------------------
CONFIGURACION BASICA
------------------------------*/

/* Reset CSS */
body, h1, h2, h3, h4, h5, h6, a, p, ul, ol, li, em, strong, pre, code, form {
	padding: 0;
	margin: 0;
	font-family: "Times New Roman", Times, serif;
}

/* Decir al navegador que renderize los elementos HTML 5 como un bloque */
cabezera, pie, section, aside, nav, article {
	display: block;
}

html { height: 100%;  }

body {
	font: 13px Times New Roman, Times, serif;
	line-height: 1;
	background: white;
	height: 100%;
	padding: 0;
}

h1 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h2 {
	font-size: 20px;
	letter-spacing: -0.04em;
	padding-bottom: 18px;
	color: #0c3244;
}


h3 {
	font-size: 14px;
	padding: 0;
	color: #0c3244;
}

p { 
	padding-bottom: 14px;
	text-align: justify;
}

ul, ul li {
	list-style: none;
	font-family: "Times New Roman", Times, serif;
}

:focus { outline: none; }

.italic		 { font-style:italic; }
.strong		 { font-weight: italic; }
.hidden 	 { display: none; }
.align-right { text-align: right; }
.align-left  { text-align: left; }
.center		 { text-align: center; }

.red { color: #F00; }
.green { color: #060 }

a:link, a:visited { color: #666; }
a:hover, a:active { color: #333; }
a img { border: 0 none; }

/* Soporte para PNG en IE */
img, #logo a, .png, #navegation, #secciones, #envoltura, #slider, #gallery li, h1, h2, h3 {
	behavior: url(scripts/iepngfix.html);
	font-family: "Times New Roman", Times, serif;
}


/*------------------------------
FONDO Y TEXTO
------------------------------*/

body { text-align: center; color: #3A474E;  }

body.blanco {
	background: #FFFFFF;
	font-family: "Times New Roman", Times, serif;
}

/*------------------------------
PRINCIPAL, ENVOLTURA Y VCARD
------------------------------*/

#principal 	 {
	z-index: 101;
	font-family: "Times New Roman", Times, serif;
}
#envoltura { width: 870px; margin: 0 auto; text-align: left; padding: 10px 0; }
#vcard	 { padding: 0px 84px; position: relative; }

/*------------------------------
lOGO Y MENU
------------------------------*/

#cabezera a { 
	display: block; 
	width: 720px; 
	height: 45px; 
	text-indent: -999em;
	margin: 0 0 0 83px;
}

#menu { 
	position: absolute; 
	top: 8px; right: 760px; 
	width: 120px; 
	height: 340px;  
	text-indent: -999em; 
	z-index: 101;
}

/*------------------------------
MOSAICO
------------------------------*/

#mosaico {
	position: relative;
	top: 10px;
	left: 60px;
	width: 581px;
	height: 350px;
	font-family: "Times New Roman", Times, serif;
}
	
/*------------------------------
BARRACENTRAL
------------------------------*/

#barracentral {
	position: relative;
	height: 40px;
	margin: 0px 14px;
	background: transparent url(img/barracentral.png) scroll 50% 0 no-repeat;
}

/*------------------------------
=NAVEGACION
------------------------------*/

#navegation {
	position: relative;
	width: 120px;
	height: 340px;
	margin: 0px 0px;
	background: transparent url(img/menu.png) scroll 0% 0 no-repeat;
	font-family: times;
}

#navegation li a { 
	display: block;
	margin: 1px 1px 0 0;
	width: 120px;
	height: 70px; 
	line-height: 80px; 
	color: #fff; 
	font-size: 15px; 
	text-decoration: none; 
}

#navegation li a span { display: block; padding: 0 19px 0 20px; }

#navegation li a:link, a:visited { background-position: 0 -60px; }
#navegation li a:active, 
#navegation li.current a {
	background-position: 0 0;
}
#navegation li a:hover span, 
#navegation li.current a span {
	background-position: 100% 0;
}

/*------------------------------
=CONFIGURAR SECCIONES
------------------------------*/

#secciones { padding: 0 87px 100px; margin: 0px -60px; line-height: 1.5; }
#secciones .page {
	display: none;
	padding: 0 20px 20px;
	background: #fff;
}

/*------------------------------
PAGINAS
------------------------------*/

/** Inicio **/
#page1 .skills { float: left; padding: 8px 0; margin: 0 30px 0 0; }
#page1 .skills li { 
	color: #FFF; 
	font-style: italic; 
	padding: 3px 8px 3px 25px; 
	margin: 0 5px 4px 0;
	font-size: 82%;
}

/** conocenos **/
.conoce { position: relative; }
.conoce ul {
	float: left;
	text-align: center;
}
.conoce .items { z-index: 99; }

.conoce li { float: left; padding-bottom: 5px; margin: 0 32px 15px 0; background: transparent url(img/minigal-sombra.png) 50% 50% no-repeat; position: relative; }
.conoce li.last { margin-right: 0; }
.conoce li img { display: block; width: 104px; height: 64px; padding: 2px; border: 1px solid #eee; background: #fff; }
.conoce li a span { position: absolute; top: 3px; left: 3px; display: none; width: 108px; height: 68px; background: transparent url(img/minigal-sobre.png) 0 0 no-repeat; }

.conoce .items { height: 170px; width: 550px; }

/** Localizacion  **/
.localiza .botones {
	float: left;
	width: 35%;
	margin: 0 2% 0 0;
	font-family: "Times New Roman", Times, serif;
}
.localiza .botones li  {
	color: #a0a4a7;
	line-height: 1.1;
	margin: 0 10px 10px 0;
	cursor: pointer;
	font-family: "Times New Roman", Times, serif;
}
.localiza .botones a { 
	display: block; 
	color: #a0a4a7; 
	text-decoration: none; 
	padding: 8px 8px 8px 50px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
}
.localiza .botones a:hover {
	background: #eee;
	color: #006692;
	font-family: "Times New Roman", Times, serif;
}
.localiza .botones .title  { display: block; font-weight: bold; font-size: 17px; color: #444; }
.localiza .botones img { 
	float:left; 
	width: 32px; 
	height: 32px; 
	margin: 0 0 0 -42px; 
	/*background: transparent url(img/enlaceslogos.png) scroll 0 0 no-repeat;*/
}
.localiza img.earth {
	background-position: 0 0;
	font-family: "Times New Roman", Times, serif;
}
.localiza img.garmin  { background-position: -32px -32px; }
.localiza img.maps   { background-position: -64px -64px; }
.localiza img.tomtom { background-position: -128px -128px; }
.localiza img.catalogo	  { background-position: -160px -160px; }

/** Contacto **/
.contact { color: #6a6a6a; }
.contact .left  { float: left; width: 215px; }
.contact .right { float: right; width: 300px; }

/*------------------------------
CONFIGURACION FORMULARIO
------------------------------*/

form li { clear: left; margin: 0 0 5px; }
form label { width: 27%; display: block; float: left; line-height: 1.4em; padding: 3px 0 0; font-size: 15px; }
form input, form textarea {
	width: 210px;
	background: transparent url(img/form/entrada.png) center top repeat-x; 
	border: 1px solid #d1d1d1; 
	padding: 5px 3px;
	margin: 0;
	float: left;
	
	resize: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
}

form .input-wrapper { width: 70%; float: left; padding-bottom: 10px; background: transparent url(img/form/entrada-sombra.png) scroll 50% 100% no-repeat; }

form colors/purple/, form .colors/purple/ { 
	border: 1px solid #ccc; 
	background: transparent url(img/form/bg-form-btn.png) 0 0 repeat-x; 
	padding: 4px 10px; 
	line-height: 1; 
	overflow: visible;
	cursor: pointer;
	height: 26px;
	margin-left: 10px;
}

form colors/purple/:hover, form .colors/purple/:hover { background-position: 0 -25px; }

/*------------------------------
PIE
------------------------------*/

#pie {
	position: relative;
	width: 674px;
	margin: -100px auto 0;
	text-align: center;
	color: #a2a2a2;
	z-index: 102
}

#pie .localiza { float: right; margin-top: -5px; }
#pie .localiza li { float: left; margin-left: 3px; }
#pie .localiza a, #pie .localiza img { display: block; width: 16px; height: 16px;}
#pie .localiza img {
	background: transparent url(img/minilogos.png) scroll 0 0 no-repeat;
}
#pie .localiza img.earth { background-position: 0 -16px; }
#pie .localiza img.garmin  { background-position: -16px -32px; }
#pie .localiza img.maps   { background-position: -32px -48px; }
#pie .localiza img.tomtom { background-position: -64px -80px; }
#pie .localiza img.catalogo	 { background-position: -80px -96px; }

#pie .localiza a:hover img.earth { background-position: 0 0; }
#pie .localiza a:hover img.garmin  { background-position: -16px -16px; }
#pie .localiza a:hover img.maps   { background-position: -32px -32px; }
#pie .localiza a:hover img.tomtom { background-position: -64px -64px; }
#pie .localiza a:hover img.catalogo	 { background-position: -80px -80px; }

/*------------------------------
TOOLTIP
------------------------------*/
.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(img/tipsy.gif); }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

/*------------------------------
CLEARFIX HACK
------------------------------*/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	font-size:0.1em;
	visibility:hidden}	
 
.clearfix {display:inline-block}  /* ... Clearfix para IE5/Mac y IE7 */

* html .clearfix {height:1%}   /* ... para IE5 + IE6/Win | activa IE-Clearfix */
.clearfix {display:block}      /* ... para IE5,IE6,IE7 | resetea configuración de Mac para IE/Win */