@charset "utf-8";
/* CSS Document */
body {
	font: 12px 'Open Sans', sans-serif;
	padding:0;
	background: #1c2325;
	}
html, body {
	margin: 0;
    padding: 0;
	}
#contenedor {
	margin: 0 auto;
    width: 800px;
	}
a:link, a:visited, a:active {
	COLOR:#3CF; text-decoration: none;
}
a:hover {
	COLOR:#3CF; 
}
#encabezado {
	width:800px;
	}
#logo {
	width:575px;
	height:203px;
	float:left;
	padding-left:5px;
	}
#otroproyectode {
	width:208px;
	padding-left:12px;
	height:203px;
	float:left;
	}
#contenido {
	width:800px;
	}
#menucontainer {
	float:left;
	height:24px;
	display:block;
	margin:auto;
	width:100%;
	padding-left:14px;
	}
#menu {
	position:relative;
	display:block;
	height:24px;
	font-size:12px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	float: left;
	}
#menu ul {
	margin:0px;
	padding-left:5px;
	list-style-type:none;
	width:auto;
	}
#menu ul li {
	display:block;
	float:left;
	margin-right:1px;
	}
#menu ul li a {
	display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:5px 32px 0 35px;
	height:19px;
	background:transparent url(../imagen/menunormal.gif) no-repeat top left;
	}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #menu ul li a {
	display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:5px 33px 0 33px;
	height:19px;
	background:transparent url(../imagen/menunormal.gif) no-repeat top left;
	}
}

#menu ul li a:hover {
	color:#fff;
	background:transparent url(../imagen/menuclick.gif) no-repeat top right;
	}
#menu ul li a.current,#menu ul li a.current:hover {
	color:#000;
	background: transparent url(../imagen/menuinicio.gif) no-repeat top right;
	}
#info {
	width:800px;
	height:327px;
	float:left;
	padding-bottom:0px;
	background: url(../imagen/fondoinicio.jpg) no-repeat top;
	}
h1, h2, h3, h4 {
	font-family: "Open sans", Arial, Helvetica, sans-serif;
}
h1 {
	color: #FFFFFF;
    font-size: 34px;
    letter-spacing: -1px;
    margin-bottom: 14px;
    padding: 8px 0 0 40px;
	}
h2 {
	color: #FFFFFF;
    font-size: 19px;
    font-weight: normal;
    letter-spacing: -1px;
    padding: 0 320px 0 40px;
    margin: 11px 0;
	}
h3 {
	padding:16px 270px 0 40px;
	font-size:18px;
	color:#222;
	letter-spacing:-1px;
	}
h4 {
	padding:0 250px 0 40px;
	font-size:14px;
	font-weight: normal;
	color:#222;
	line-height:22px;
	}
h4 a:link, h4 a:visited, h4 a:active {
    color: #222;
    font-weight:bold;
    text-decoration: none;
}
h4 a:hover {
    text-decoration: underline;
}
#botonvertrabajos, #botoncontactar {
	float: left;
    font-family: helvetica,sans-serif;
    font-size: 17px;
    font-weight: bold;
    height: 33px;
    letter-spacing: -1px;
    margin: 1px 0 0 15px;
    padding: 14px 0 0;
    text-align: center;
    text-shadow: 0 1px 1px black;
    text-transform: uppercase;
    width: 144px;
}
#botonvertrabajos a, #botoncontactar a {
	color: #FFF;
}
#botonvertrabajos {
	background: url(../imagen/btn_portfolio.png) no-repeat top;
	margin-left: 41px;	
	}
#botonvertrabajos:hover {
	background: url(../imagen/btn_hover.png) no-repeat top;
	text-decoration: none;
}
#botoncontactar:hover {
	background: url(../imagen/btn_portfolio.png) no-repeat top;
}
#botoncontactar {
	background: url(../imagen/btn_contacto.png) no-repeat top;
	
}	
#sobremi {
	width:800px;
	height:327px;
	float:left;
	padding-bottom:0px;
	background: url(../imagen/fondosobremi.jpg) no-repeat top;
	}
#trabajos {
	width:800px;
	height:297px;
	float:left;
	color:#fff;
	padding:25px 0 5px 0;
	background: url(../imagen/fondotrabajos.jpg) no-repeat top;
	}
/** 
 * Slideshow style rules.
 */
#slideshow {
	margin:0 auto;
	width:640px;
	height:263px;
	background:transparent;
	position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}
/** 
 * Reglas para los estilos de controles del Slideshow.
 */
.control {
  display:block;
  width:47px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:105px;
  left:-25px;
  background:transparent url(../imagen/slideshow/anterior.png) no-repeat 0 0;
}
#rightControl {
  top:105px;
  right:-27px;
  background:transparent url(../imagen/slideshow/siguiente.png) no-repeat 0 0;
}

/** 
 * Reglas de estilo para la página */

.slide h5, .slide p {
  margin:15px;
}
.slide h5 {
  font:24px  Arial, Helvetica, sans-serif;
  font-weight:bold;
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
  border:none;
}
.slide a:link, .slide a:visited, .slide a:active {
	COLOR:#333; text-decoration: none;
}
.slide a:hover {
	COLOR: #000;
	text-decoration: none;
}
#servicios {
	width:780px;
	height:297px;
	float:left;
	color:#222;
	padding:25px 0 5px 20px;
	background: url(../imagen/fondoservicios.jpg) no-repeat top;
	}

 /* Slideshow style rules PARA SERVICIOS.
 */
#serviciosslideshow {
	margin:0 auto;
	width:700px;
	height:275px;
	background:transparent;
	position:relative;
}
#serviciosslideshow a {
	color: #666;
}
#serviciosslideshow #serviciosslidesContainer {
  margin:0 auto;
  width:560px;
  height:275px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#serviciosslideshow #serviciosslidesContainer .serviciosslide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:275px;
}
/** 
 * Reglas para los estilos de controles del Slideshow.
 */
.servicioscontrol {
  display:block;
  width:47px;
  height:275px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#serviciosleftControl {
  top:105px;
  left:0;
  background:transparent url(../imagen/slideshow/anterior.png) no-repeat 0 0;
}
#serviciosrightControl {
  top:105px;
  right:0;
  background:transparent url(../imagen/slideshow/siguiente.png) no-repeat 0 0;
}

/** 
 * Reglas de estilo para la página */

.serviciosslide p {
	font-size:12px;
}
.serviciosslide h5, .serviciosslide p {
  margin: 5px 0 10px;
}
.serviciosslide h5 {
  font:24px  Arial, Helvetica, sans-serif;
  font-weight:bold;
  letter-spacing:-1px;
}
.serviciosslide img {
  float:right;
  margin:0 15px;
  border:none;
}
.serviciosslide a:link, .serviciosslide a:visited, .serviciosslide a:active {
	COLOR:#FFF; text-decoration: none;
}
.serviciosslide a:hover {
	COLOR: #000; text-decoration: none;
}
.serviciosslide li {
	background: url(../imagen/arrow.png) no-repeat left 1px ;
	padding-left: 21px;
	padding-bottom: 4px;
}
#contacto {
	width:800px;
	color:#FFF;
	height:327px;
	float:left;
	font-size:12px;
	padding-bottom:0px;
	background: url(../imagen/fondocontacto.jpg) no-repeat top;
	}
#contactodatos {
	padding:15px 50px 0 30px;
	width:390px;
	color:#fff;
	float:left;
	}
#formulario {
	padding-top:27px;
	color:#fff;
	float:left;
	width:270px;
	font-weight:bold;
	}
.estilocontacto {
	display: block;
    font: 18px Arial,Helvetica,sans-serif bold;
    margin-bottom: 10px;
}
.estilodatos {
	font-size:20px;
	font-weight:bold;
	letter-spacing:-1px;
}
label {
	margin-bottom:2px;
	display: block;
}
input {
	display: block;
	margin-bottom:10px;
	width:260px;
}
.button {
	margin-top:10px;
	float:right;
	width:70px;
}
#disenio {
	width:800px;
	min-height:310px;
	float:left;
	background: url(../imagen/fondoabajo.jpg) no-repeat top;
	}
#disenioacordion {
	padding:20px;
	min-height:270px;
}
#web {
	width:405px;
	padding:0 15px 10px 25px;
	float:left;
	height:315px;
}
#grafica {
	width:325px;
	padding:0 15px 10px 15px;
	float:right;
	height:315px;
}
#infoabajo {
	width:800px;
	height:170px;
	float:left;
	margin-top:20px;
	color:#FFF;
	}
#blog {
	width:227px;
	height:170px;
	float:left;
	padding-left:3px;
}	
#feedControl {
	color:#FFF;
}
#cuadrocentro {
	width:290px;
	height:170px;
	padding-left:30px;
	float:left;
}
#perfiles {
	width:280px;
	height:120px;
	padding:0 20px;
	float:left;
}
#navegadores {
	width:280px;
	
	padding:0 20px;
	float:left;
}
#twitter {
	width:247px;
	height:170px;
	float:right;
	color: #FFF;
	background: url(../imagen/fondotwitter.jpg) no-repeat top;
	}
#twittercuadro {
	width:247px;
	height:150px;
	}
#twitterglobo {
	height:74px;
	padding:8px 15px;
	}
#twittexto{
	width:217px;
	height:60px;
	color:#000;
	font-size:11px;
	float: left;
	}
#twittiempo{
	text-align:right;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#000;
	}	
#twiseguime {
	margin-top:15px;
	height:65px;
	font-size:14px;
	color:#FFF;
	font-weight:bold;
	}
#pie {
	color: #FFFFFF;
    font: 11px/20px Arial,Helvetica,sans-serif;
    margin: 0 auto;
    padding-bottom: 10px;
    text-align: center;
    width: 800px;
	line-height: 20px; /* esto es lo que centra el texto verticalmente */
	}
#pie a	{
	font-family:Arial, Helvetica, sans-serif;
	}
#pie a:link, #pie a:visited, #pie a:active {
	color: #3CF;
	text-decoration:none;
	}
#pie a:hover {
	color:#CCC;
	text-decoration:none;
	}
	#pie .datos {
		height:30px;
	}

/* Estilos*/
.sinborde {
	border:none;
}
.bold {
	font-weight:bold;
}
.boldgris {
	font-weight:bold;
	color:#222;
}
.estilotwitter {
	color: #3CF;
}
.estilogrisesito {
	color:#eee;
	font-weight:bold;
}
.estilonegro {
	color:#000;
}
.estilo16 {
	color:#000;
	font-size:16px;
	font-weight:bold;
	}
.estilogris16 {
	color: #222;
	font-size:16px;
	font-weight:bold;
	}
.alinearmedio {
	vertical-align: middle;
	border:none;
}
.estilo22 {
	color: #222;
	font-size:22px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	}
.flotarderecha {
	float:right;
	padding:30px 10px;
}
.flotarizquierda {
	float: left;
	padding:30px 20px;
}
.estiloazul {
	color: #06C;
	font-weight:bold;
}
.redes {
	padding:6px 3px 8px 11px;
	border:none;
}