/* CSS ONLINE NAVARRA */

/* Estilos especificos del web */

* { margin:0px; padding:0px;}

body {
	color:#000;
	font:90% Arial, Verdana;
	background:#fff url(../img/fondo.jpg) center top repeat-x;	
	
}

h1 { margin:30px 0 0 45px; float:left; }
h2 { font:bold 100% Arial, Helvetica, sans-serif; color:#fff; text-align:center; margin-top:5px;}

h3 { 
	font:normal 150% Arial, Helvetica, sans-serif; 
	color:#a40083; 
	margin-bottom:20px;
}


h5 { font:bold 100% Arial, Helvetica, sans-serif; margin:15px 0 10px 12px; color:#333;}

p {
	margin:0px 0 10px;
	line-height:130%;
	font:90% Arial, Verdana;
}

a{ color: #0877ca; text-decoration:none;}
a:link{	color:#0877ca;}
/*a:visited{ text-decoration:underline;}*/
a:active{ color:#333;}
a:focus{ color:#333;}
a:hover { text-decoration:underline;}

img { border-style:none;}
.clear {clear: both; font:0.01em tahoma, Verdana, Arial, Helvetica;}
noscript p{ clear:both; margin: 20px auto; width:950px; display:block; color:#fff; clear:both;}


/*-- Estilos para la Home --*/

.menu-sup { 
	width:920px;
	margin:4px auto 0px;
	color:#e5e5e5;
	font:75% Tahoma, Arial, Verdana;
	text-align:right;
	border-top:1px solid #000;
}
.menu-sup ul {  margin-right:40px; float:right; width:50%;}
.menu-sup li{ 
	list-style-type:none;
	float:left;
	border-left:1px dotted #666;
	padding:0 10px;
	display:block;
}
.menu-sup li a { color:#6AC2DF;}

#container { 
	width:933px; 
	margin:10px auto;
	min-height:600px; 
	background: url(../img/fondo-hoja.gif) 0px top repeat-y;
	/**width:935px;*/ }

#izq {
	width:7px;
	height:650px;
	background:url(../img/izq.jpg) right top no-repeat;
	float:left;
}
#dcha {
	width:7px;
	height:611px;
	background: url(../img/dcha2.jpg) left top no-repeat;
	float:left;
}
#contenedor {
	width:919px;
	color:#333;
	min-height:650px;
	float:left;
	background:#fff url(../img/fondo-head4.jpg) left top no-repeat;
	
}

#cont {	background:#fff url(../img/fondo-cont.jpg) left top repeat-x; margin:0 11px 5px 12px;}
#cont2 { background:#fff url(../img/fondo-cont.jpg) left top repeat-x; margin:20px 11px 5px 12px; min-height:550px;}

#head {
	width:919px;
	height:90px;
	margin-bottom:10px;
}

#head ul{ margin:10px 0 0 120px; float:left; }
* html #head ul{ margin:10px 0 0 100px; float:left; }

#head li {
	margin:0px 8px 17px;
	font:bold 100% Arial, Helvetica, sans-serif;
	color:#000;
	list-style:none;
	text-align:center;
	float:left;
	background:url(../img/fondo-boton.jpg) left top no-repeat;
	width:129px;
	height:35px;
	padding-top:12px;
}
#head  li a {color:#fff; }
#head li a:hover { color:#000; text-decoration:none;}
#head .current {color:#fff; background:url(../img/fondo-boton.gif) left -48px no-repeat; }

#head .contactar { float: right; width:135px; margin:15px 0px 0 0; color:#2ca5dc;}
.contactar .contacto { width:48px; height:37px; background:url(../img/contacto-online-navarra.gif) left top no-repeat; overflow:hidden; margin-left:75px; }

.tel { font:normal 75% "Trebuchet MS", Verdana, Tahoma, Arial;}
.tel strong{ display:block; font:bold 150% Arial, Helvetica, sans-serif; padding-left:25px; }

.contactar p a { color:#2ca5dc;}
.contactar p a:hover{ text-decoration:underline;}

#rotador{
	height:270px;
	width:896px;
	overflow:hidden;
	margin-left:12px;
	/*padding:10px 25px 10px 25px;*/
	/*background:url(../img/fondo-banner.gif) left bottom repeat-x;*/
}

#contenido {
	margin:0px 13px 0 13px;
	padding:0px;
	color:#333;
	min-height:200px;
	background:#fff url(../img/separador.gif) left top repeat-x;
}

.col-a {
	float:left;
	width:420px;
	margin:10px 0 30px 20px;
	background:url(../img/paquetes-diseno.gif) left 70px no-repeat;
	padding:0px 20px 0;
	font-size:80%;
}

.col-a h2 {
	color:#000;
	font:bold 170% Arial, Helvetica, sans-serif;
}
.col-a h2 span{
	color:#666;
	display:block;
	font:normal 80% Arial, Helvetica, sans-serif;
	margin:3px 0 20px;
}

.col-a .c1 {
	float:left;
	width:240px;
	padding-left:8px;
	margin-top:200px;
}
.col-a .c1 li{
	list-style:none;
	background:url(../img/ico-flecha-ok.gif) left center no-repeat;
	padding-left:15px;
	color:#434343;
	line-height:170%;
}
.col-a .c2 {
	float:right;
	width:170px;
	margin-right:0px;
	margin-top:200px;
	
}

.col-a .c2 li{
	list-style:none;
	background: url(../img/ico-flecha-circular.gif)left center no-repeat;
	padding-left:15px;
	color:#000;
	line-height:190%;
}

.col-b {
	width:320px;
	float:right;
	margin:20px 40px 0 0;
	font-size:90%;
}
.col-b h3{
	background:url(../img/ico-flechas.gif) left 2px no-repeat;
	color:#000;
	font:bold 85% Arial, Verdana;
	padding:0 0 0 14px;
	margin:0px 0px 10px 0;
}

.col-b a{ color:#333;}

.trabajos {
	background-color:#000000;
	border:3px solid #999;
	height:220px;
	margin:0px 0 20px 0;
}
.redes {
	background:#e5e5e5 url(../img/redes-sociales.gif) center no-repeat ;
	width:170px; 
	height:100px;
	float:left;
	margin:10px 15px 0 0;
}
.col-b p { line-height:150%; font-size:85%; margin:18px 0 0 10px;}

.bot { 
	background: url(../img/boton-presup.jpg) left top no-repeat;
 	width: 419px; 
	height:37px;
	margin:0 auto 20px;
	text-align:center;
	padding-top:15px;
	
}

.bot a { 
	color:#fff;
	font:bold 120% Arial, Helvetica, sans-serif;
	margin:0px 40px 0 0;
}
 
/*---- Paginas interior ---------- */

#contenido-int {
	padding:0px 20px 0 40px;
	color:#333;
	min-height:200px;
	text-align:left;
}

.trab {
	background-color:#000000;
	border:3px solid #999;
	width:815px;
	height:310px;
	margin:25px 0px 10px 35px;
	text-align:center;
}
.tit { 
	color:#ccc; 
	text-transform:uppercase; 
	font:80% Arial, Helvetica, sans-serif; 
	margin:10px 0px 5px 0;
	padding-left:15px;
	float:left;
	clear:right;
}
.migas { font:75% tahoma, Arial, Helvetica, sans-serif; color:#000;}
.migas a{ color:#666;}


#contenido-int h2 {
	color:#000;
	font:normal 160% Arial, Helvetica, sans-serif;
	text-align:left;
}
#contenido-int h2 span{ color:#a9108a; font:90% Georgia, "Times New Roman", Times, serif;}
#contenido-int h3 {  }

#diseno-web, #online { 
	background: url(../img/fondo-destac.gif) left top no-repeat; 
	width:775px;
	height:320px;
	margin:15px 0;
	padding:18px 20px 15px 30px;;
}
#online { 
	background: url(../img/fondo-destac2.gif) left top no-repeat; 
	height:400px;
}

.d1, .d0 {
	float:left;
	width:280px;
	margin:0 25px 0 0;
}
.d0 h3 { 
	margin:0px 0 20px;
	color:#000;
	background:url(../img/ico-online.gif) left top no-repeat;
	padding:10px 0px 25px 70px;
	font-size:140%;
}
.d0 p { font:80% Arial, Helvetica, sans-serif; margin:0px 40px 10px 10px; padding:0px; line-height:165%;}

.d1 h3 { 
	margin:0px 0 10px;
	color:#000;
	background:url(../img/icono-carpeta.gif) left top no-repeat;
	padding:10px 0px 15px 50px;
	font-size:160%;
}
.d1 p { font:80% Arial, Helvetica, sans-serif; margin:0px 40px 0 10px; padding:0px; line-height:165%;}
.d1 ul{ margin:20px 10px 0;}
.d1 li { list-style-type:none; background: url(../img/ico-cruz.gif) left 8px no-repeat; padding-left:18px; font-size:90%; line-height:165%;}

.d2 {
	float:left;
	width:430px;
	margin-left:30px;
}

.d2 h3 { 
	margin:0px 0 10px;
	color:#000;
	background: url(../img/ico-servicios-seb.gif)left top no-repeat;
	padding:10px 0px 15px 50px;
	font-size:160%;
}
.d2 p { font:80% Arial, Helvetica, sans-serif; padding:0px; line-height:160%;}
.d2 ul { float:left; margin:15px 20px 0 0;}
.d2 li { list-style-type:none; font-size:90%; line-height:152%; font-weight: bold;}
.d2 p a {
	display:block;
	width:203px;
	height:30px;
	font:bold 110% Arial, Helvetica, sans-serif; 
	margin:25px 0px 0 100px; 
	padding:10px 0 0 15px;
	color:#fff;
	background:url(../img/bot-azul.gif) left top no-repeat;}

.d3 {
	float:left;
	width:430px;
	margin-left:30px;
}

.d3 h3 { 
	margin:0px 0 10px;
	color:#000;
	background: url(../img/ico-servicios-seb.gif)left top no-repeat;
	padding:10px 0px 15px 50px;
	font-size:160%;
}
.d3 p { line-height:150%;}

.d3 .man { background:url(../img/ico-mantenim.gif) left top no-repeat;}
.d1 .ico {background: url(../img/ico.estrella.gif) left top no-repeat; padding-left:55px; padding-top:0px; font-size:140%; margin-bottom:0px;}
.d3 .a a{ background:url(../img/bot-azul-gr.gif) center top no-repeat; display:block; margin:25px 0 0 10px; color:#fff; height:40px; text-align:center; padding-top:7px;}
.d3 table { width:95%; font-size:80%;}
.d3 th { background-color:#4181ad; padding:5px 5px; color:#fff;}
.d3 td { padding:5px; background-color:#eee; font-size:95%;}

.d4 {
	float:left;
	width:450px;
	margin-left:10px;
}

.d4 h3 { 
	margin:0px 0 10px;
	color:#000;
	padding:10px 0px 25px 80px;
	font-size:160%;
	background: url(../img/ico-kword.gif) left top no-repeat;

}
.d4 p { line-height:130%;}
.d4 ul{ margin:0px 10px 0;}
.d4 li { list-style-type:none; background: url(../img/ico-cruz.gif) left 8px no-repeat; padding:0 0 5px 18px; font-size:90%; line-height:140%;}


.paquete-web { margin:20px 0; font-size:90%;}
.sub { text-decoration:underline;}

.paq-01 {
	float:left;
	width:200px;
	background-color:#4181ad;
	padding:10px 15px;
	color:#fff;
	margin-top:25px;
	height:128px;
} 
.paq-02 {
	float:left;
	width:560px;
	height:204px;
	background: url(../img/producto-web.gif) left top no-repeat;
	padding:10px 15px;
	color:#fff;
}
.paq-f1, .paq-f2, .paq-f3 { float: right; width:146px; height:150px; background:url(../img/diseno-web-corporativo.gif) left top no-repeat; margin-right:60px; }
.paq-f2 { background:url(../img/catalogo-virtual.gif) left top no-repeat; }
.paq-f3 { background:url(../img/paq-tienda-virtual.gif) left top no-repeat; }

.paq-02 h4 { margin-left:30px; color:#fff; }
.paq-02 ul { margin:30px 0 0 30px; }
.paq-02 li { 
	list-style-type:none; 
	background: url(../img/ico-square.gif) left 7px no-repeat; 
	color:#333;
	line-height:120%;
	padding-left:15px;
}
.paq-02 p a { 
	background: url(../img/ico-presup.gif) left top no-repeat;
	padding-left:18px;
	color:#3d77b9; 
	display:block;
	margin:20px 0 0 30px;
	font:bold 110% Tahoma, Arial, Helvetica, sans-serif;
}

.fot {
	width:815px;
	height:235px;
	margin:25px 0px 5px 50px;
	text-align:center;
}

#servicios-web { 
	background-color:#fff;
	border:1px solid #e5e5e5; 
	width:670px;
	margin:15px 0;
	padding:18px 40px 8px 90px;
}
#servicios-web h3, .mantenimiento h3{ color:#000000; font:bold 120% Arial, Helvetica, sans-serif; margin:0px; background:url(../img/ico-flecha-gris.gif) left top no-repeat; padding:10px 0 20px 50px;} 
#servicios-web p, .mantenimiento p{ line-height:150%; margin:0 0 5px 50px;}

#mantenimiento { 
	background-color:#fff;
	border:1px solid #e5e5e5; 
	width:785px;
	margin:15px 0;
	padding:18px 0px 8px 15px;
}
#mantenimiento h3{ background:none; padding:0px; font-size:120%; font-weight:bold;} 
#txt { 
	background-color:#fff;
	border:1px solid #e5e5e5; 
	width:720px;
	margin:15px 0;
	padding:20px 40px 8px;
}
#txt ul { margin:0 10px 10px;}
#txt li { list-style-type:none; background:url(../img/ico-square.gif) left 5px no-repeat; padding:0 0 6px 12px; font:90% Arial, Helvetica, sans-serif;}

/* -- Formulario -- */

/*estilos de formulario */

#formulario { margin:10px 0px 20px 10px; font-size:90%; background:url(../img/fondo-formulario.gif) center 100px no-repeat; padding-bottom:25px;}
#formulario h4{ display:block; text-align:center; border-bottom:1px dashed #666; margin:0 20px 10px 20px; padding-bottom:10px;}

#formulario p { line-height:150%;}
.mb { margin-bottom:50px;}
.t2 { font:bold 120% Arial, Helvetica, sans-serif; color:#666; margin-bottom:8px;}
.f1 { float:left; width:320px;}
label { display:block; line-height:150%; margin-left:50px;}

input, textarea{
	border:1px solid #ccc;
	padding:2px;
	color:#000;
	font:100% Tahoma, "Trebuchet MS", Arial, Verdana;
	width:80%;
	background-color:#fff;
	margin:0 0px 3px 50px;	
	list-style-type:none;
}
textarea{
	height:144px;
	margin-bottom:20px;
	width:90%;
}

.boton{
	border-style:none;
	width:203px;
	text-align:center;
	height:40px;
	color:#fff;
	background:url(../img/bot-azul.gif) left top no-repeat;
	display:block;
	margin:25px 0px 15px 250px;
	cursor:pointer;
	padding:2px 0;
	font:bold 130% Arial, Helvetica, sans-serif;
}

.boton:hover{ text-decoration:underline;}
.check {
	margin-right:5px;
	clear:both;
	width:15px;
	border-style:none;
	float:left;
	color:#ccc;
}

#formulario a {
	color:#666;
	border-bottom:1px dotted #666;
}
#formulario a:hover {
	border-bottom:1px solid #666;
}

.gracias{ margin:10px 0px 20px 10px; font-size:90%; background:url(../img/fondo-gracias.gif) center 10px no-repeat; padding:170px 40px 0 200px; color:#666; height:220px;}
.gracias p { line-height:150%;}
.gracias a { text-decoration:underline;}
.gracias a:hover { color:#cc0000;}



/* -- Pie -- */

#pie {
	background:#e5e5e5 url(../img/ico-cara.gif) right center no-repeat;
	height:25px;
	font:85% Tahoma, Verdana, Arial, Helvetica;
	color:#000;
	padding:8px 0 20px 8px;
	clear:both;
	margin:0 7px 0 7px;
}
#pie ul { margin:4px 170px 0 10px; float:left; }
#pie li { display:inline; list-style:none; padding-bottom:3px; font:normal 90% Tahoma, Arial, Verdana;}

#pie p{ float:left; text-align:right; margin-top:5px;}
.dd { margin-left:80px;}

#pie strong a { color:#000;}