/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

	Kubrick v1.5
	 http://binarybonsai.com/kubrick/

	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/
/* -------------------------------------------------------------- 
   
   grilla.css
   * Es muy fácil de usar, dividimos la página en 24 columnas

   * Por defecto el tamaño de inicio es 950 px, con 24 columnas 
 	 con spans de 30px y 10 px de margen

   * Para utilizarlo debes hacer la siguiente ecuación: tengo
	 de tamaño 950 px, que es lo mismo que decir (columnas * 40) -10
	 así que si tengo 950 serían 24 columnas.

   
-------------------------------------------------------------- */
body{
	margin:0px auto;
	background-image: url('images/fondo.jpg');
}


/* Contenedor de todas las columnas. */
.general {
  width: 960px;
  margin: 0 auto;
  background: url('images/luz.png') no-repeat top center;	
} 

#cabecera{
	height:130px;
}
	#cabecera img{
	border: none;
	margin-top: -22px;
}

	#logo{
		margin:50px 0px 0px 20px;
	}

	#menu{
		margin:50px 0px 0px 20px;
		padding-left:20px;
	}
	
		
		ul.menu{
				height:25px;
				clear: both;
				float: left;
				width: 100%;
				list-style: none;
				margin: 0;
				padding:0px;
			}

			ul.menu li{
				display:inline;
				height:45px;
				width:82px;
				float: left;
				text-align:center;
				padding:0px 4px;
			}

			ul.menu li a{
				color:#fff;
				text-decoration:none;
				display: block;
			}

			ul.menu li a:link, ul.menu li a:visited {
				padding: 0px;
				display: block;
				text-decoration: none;

			}
			
			ul.menu li a span{
				text-indent: -3000px;
				display: block;
			}
			
			
			
			ul.menu li a.nosotros {
				background-image:url('images/btn_nosotros.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.nosotros:hover{
				background-image:url('images/btn_nosotros.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}

			ul.menu li a.trabajos {
				background-image:url('images/btn_trabajos.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.trabajos:hover{
				background-image:url('images/btn_trabajos.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}
			
			ul.menu li a.servicios {
				background-image:url('images/btn_servicios.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.servicios:hover{
				background-image:url('images/btn_servicios.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}
			
			ul.menu li a.wiki {
				background-image:url('images/btn_wiki.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.wiki:hover{
				background-image:url('images/btn_wiki.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}
			
			ul.menu li a.blog {
				background-image:url('images/btn_blog.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.blog:hover{
				background-image:url('images/btn_blog.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}
			
			ul.menu li a.contacto {
				background-image:url('images/btn_contacto.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
			}
			
			ul.menu li a.contacto:hover{
				background-image:url('images/btn_contacto.png');
				background-repeat: no-repeat;
				height:45px;
				width:82px;
				background-position:0 -45px;
			}
		

#contenido{
	background-color:#F6F3EA;
	overflow:hidden;
	width: 960px;
}

	#banner{
		padding:15px 0px 15px 15px;
	}
	
	#trabajos{
		padding-left:15px;
		margin-right:20px;
		text-align: justify;
		font-size: 13px;
		border-right: 1px dotted #999;
		padding-right: 10px;
	}
	
		.trabajos p{
			font-size: 14px;
			text-align: justify;
		}
		
		.trabajos h2 img{
			margin-left: 15px;
		}
		
		.trabajos ul li{
			margin:10px 0px 50px 0px;
		}
		
		.trabajos ul li{
			height:157px;

		}
		
		.trabajos ul li p{
			margin: -1px 0px ;
		}
		
		.nosotros{
			margin-bottom: 50px;
		}
		
		.nosotros p{
			font-size: 14px;
			text-align: justify;
		}
		
		.servicios{
			padding:15px 0 15px 15px;
		}
		
		/*Hcard*/
		
		.hidden {
			display:none !important;
			}
			
			.to-right a {
			background:transparent url(images/hcard.jpg) no-repeat scroll left center;
			font-size:1em;
			padding:5px 0 5px 32px;
			color:#333;
			font-weight: bold;
			}
			
			.to-right{
				margin-top: 10px;
			}
			
			#hcard{
				padding: 10px;
			}
	
		.descrip{color:#666;}
	
	#blog{}
	#twitter{margin-top:15px;}
	
	.arriba{background:url('images/blog_arriba.png') no-repeat;height:11px;}
	.medio{background:url('images/blog_medio.png') repeat-y;padding:10px 5px 0px 15px;}
	.abajo{background:url('images/blog_abajo.png') no-repeat;height:13px;}
		.medio h3{color:#99CC00;font-size:14px;}
	#mas{
		font-size:16px;
		text-align:center;
		height:50px;
		padding-top:15px;
		background:url('images/sombra2.jpg')no-repeat;
		color:#5E3519;
	}
	
	#clientes{
		padding:10px 0px 0px 10px;
	}
		#clientes p{
			text-align: justify;
			margin-top:5px;
			padding-right:5px;
			font-size:13px;
			color:#666;
		}
		
		#clientes span{
			display:block;
			text-align: center;
			margin-top:55px;
		}
		
	#google{
		margin:10px 10px 0px 0px;
	}
		
		#google p{
			text-align: justify;
			font-size:14px;
			color:#999;
			margin-top:60px;
		}
		
		#google a{color: #99CC00;
text-decoration: none;}
		
	#nosotros{
		padding:10px 0px 0px 20px;
		
	}
	
		#nosotros p{
			margin:5px 28px 0px 0px;
			text-align: justify;
			font-size:13px;
			color:#333;
		}
	
	#direccion{
		padding:10px 0px 0px 10px;
	}
	
		#direccion h3{margin-bottom:5px;}
		#direccion ul{margin-left:-20px;}
		#direccion ul li{margin:10px 0px;}
		#direccion ul li img{vertical-align: middle;margin-right:5px;}
		#direccion ul li span strong{margin-right:5px;}
		#direccion .email{margin-right:25px;}
		#direccion .skype{margin-right:23px;}

#pie{
	background-image:url('images/pie.gif');
	background-color: #fff;
	background-repeat: no-repeat;
	height:210px;
	width: 960px;
  margin: 0 auto;
}

	#pie img{
		border: none;
	}
	
	#pie span img{
		margin-top: -22px;
	}
	
#comment{
	width: 650px;
}	
	
li{
	list-style: none;
}	

.sombra{
	background:url('images/sombra.png')no-repeat;
	height:33px;
	width: 960px;
  margin: 0 auto;
}

#aviso{
	text-align:center;
	color:#fff;
	padding-bottom: 15px;
	width: 960px;
  margin: 0 auto;
}

#aviso a{color: #99CC00;
text-decoration: none;}

.servicios blockquote{
	font-size: 16px;
	font-family: georgia;
}

ul.menu_interno{
				height:52px;
				clear: both;
				float: left;
				width: 100%;
				list-style: none;
				margin: 0;
				padding:0px;
				margin-left: 20px;
				margin-top: 10px;
			}

			ul.menu_interno li{
				height:52px;
				width:194px;
				float: left;
				text-align:center;
				padding:4px 4px;
			}

			ul.menu_interno li a{
				color:#fff;
				text-decoration:none;
				display: block;
			}

			ul.menu_interno li a:link, ul.menu_interno li a:visited {
				padding: 0px;
				display: block;
				text-decoration: none;

			}
			
			ul.menu_interno li a p{
				text-indent: -3000px;
			}
			
			ul.menu_interno li a.desarrollo {
				background:url('images/diseno.gif')no-repeat;
				height:52px;
				width:194px;
			}
			
			ul.menu_interno li a.desarrollo:hover{
				background:url('images/diseno.gif')no-repeat;
				height:52px;
				width:194px;
				background-position:0 -52px;
			}
			
			ul.menu_interno li a.usabilidad {
				background:url('images/img/usabilidad.gif')no-repeat;
				height:52px;
				width:194px;
			}
			
			ul.menu_interno li a.usabilidad:hover{
				background:url('images/usabilidad.gif')no-repeat;
				height:52px;
				width:194px;
				background-position:0 -52px;
			}
			
			ul.menu_interno li a.marketing {
				background:url('images/marketing.gif')no-repeat;
				height:52px;
				width:194px;
			}
			
			ul.menu_interno li a.marketing:hover{
				background:url('images/marketing.gif')no-repeat;
				height:52px;
				width:194px;
				background-position:0 -52px;
			}

/* Columnas
-------------------------------------------------------------- */

/* Use esta clase junto con la clase .span-? para poder armar el esquema, el margin
define el espacio que hay despues de cada columna */
   
.columna {
  float: left;
  margin-right: 10px;
}


/* La última columan necesita que se coloque esta clase, más que todo para que no nos
deforme el diseño*/

.ultimo { margin-right: 0; }

/* Con estas clases definimos el ancho de las columnas */
.ancho-1   { width: 30px; }
.ancho-2   { width: 70px; }
.ancho-3   { width: 105px; }
.ancho-4   { width: 150px; }
.ancho-5   { width: 170px; }
.ancho-6   { width: 220px; }
.ancho-7   { width: 270px; }
.ancho-8   { width: 284px; }
.ancho-9   { width: 350px; }
.ancho-10  { width: 390px; }
.ancho-11  { width: 445px; }
.ancho-12  { width: 470px; }
.ancho-13  { width: 510px; }
.ancho-14  { width: 550px; }
.ancho-15  { width: 590px; }
.ancho-16  { width: 630px; }
.ancho-17  { width: 668px; }
.ancho-18  { width: 710px; }
.ancho-19  { width: 750px; }
.ancho-20  { width: 790px; }
.ancho-21  { width: 830px; }
.ancho-22  { width: 870px; }
.ancho-23  { width: 900px; }
.ancho-24  { width: 950px; }

.ancho-a{width:182px;}
.ancho-b{width:225px;}
.ancho-c{width:245px;}
.ancho-d{width:238px;}


/* Lateral derecho de las columnas. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Borde para agregar más espacio en blanco a los span o columnas */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Utilice estas clases para sacar de la misma linea a una columna. */

.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Más elementos
-------------------------------------------------------------- */

/* Con esta clase podemos crear cajas  */ 
.box { 
   
  margin-bottom: 1em; 
  background: #DDDACB; 
}

/* Con esta clase podemos crear reglas horizontales. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Limpiar los floats 
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }


/* Derecha o Izquierda*/
.izq{
	float:left;
}

.der{
	float:right;
}

/* -------------------------------------------------------------- 
   
   fuentes.css
   * Tipografías y valores por defecto.
  
   Basado en el trabajo de:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Richard Rutter    [clagnut.com]
  
-------------------------------------------------------------- */

/* Aquí es donde dice el tamaño deseado para las fuentes, lo alto 
   de la linea y los magenes. Todo se calcula automáticamente.
   El porcentaje es 16px (0.75 * 16px = 12px)*/
   
body { font-size: 70%; }


/* Fuentes y colores por defecto
   Si quiere que la tipo sea serif tiene que aplicar esto en el body:
   font: 1em Georgia, "lucida bright", "times new roman", serif; */
   
body { 
  color: #222; 
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
h1,h2,h3,h4,h5,h6 { 
  color: #111; 
  font-family: Arial, Helvetica, sans-serif;
}


/* Encabezados
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; }

h1 { font-size: 3em; line-height: 1;}
h2 { font-size: 2em; }
h3 { font-size: 1.5em; line-height: 1;}
h4 { font-size: 1.2em; line-height: 1.25;  }
h5 { font-size: 1em; font-weight: bold; }
h6 { font-size: 1em; font-weight: bold; }


/* Elementos de texto
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
p.last      { margin-bottom: 0; }
/*p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }*/
/*p img.top   { margin-top: 0; }  Utilice esto si la imagen esta en la parte superior <p>. */
/*img         { margin: 0 0; }

ul, ol      { margin:0 ; }
ul          { list-style-type: none; }
ol          { list-style-type: decimal; }



/*a { color: #009; text-decoration: underline; }*/

#trabajos a{color: #99CC00;
text-decoration: none;}

#menu a:link {
	color: #fff;
	text-decoration: none;
}
#menu a:active {
	color: #fff;
	text-decoration: none;
}
#menu a:visited {
	color: #fff;
	text-decoration: none;
}
#menu a:hover , a:focus{
	color: #99CC00;
	text-decoration: none;
}

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em,dfn      { font-style: italic; background: #ffc; }
dfn         { font-weight: bold; }
pre,code    { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; } 
tt          { display: block; margin: 1.5em 0; line-height: 1.5; }


/* Tablas
-------------------------------------------------------------- */

table   { margin-bottom: 1.4em; }
th      { font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
td      { font-family: Arial, Helvetica, sans-serif;}
th,td   { padding: 4px 10px 4px 0; font-family: Arial, Helvetica, sans-serif;}
tfoot   { font-style: italic; }
caption { background: #ffc; }

/* Use esto si usa span-xxx en los th/td. */
table .last { padding-right: 0; } 


/* Algunas clases adicionales
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet      { color: #666; }

.hide       { display: none; }
.highlight  { background:#ff0; }
.added      { color:#060; }
.removed    { color:#900; }

.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }