/* Creixems Web Studio - Modelo general de CSS - v1.1 - licensed CC 3.0*/


/*-------------------------Item: clearer general-----------------*/

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; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
abbr,acronym { border:0; }
a { outline:none; }

body {
	margin: 0;
	padding: 0;
	font-family: "MyriadProRegular", helvetica, arial, sans-serif; 
	font-size:70%;
	text-align: left;
	color: #545454;
}

/*------------------------Imagenes: correcion de autopadding en ifrefox------------------------*/

#divdelproblema img {
	display:block; /*firefox pone un autopadding si no defino esta propiedad. It is the "problem" that images as inline elements are
aligned in relation to the baseline of the text and the gap keeps some space for characters like "p".*/
}

/*------------------------Layout: divs de diagramación comunes------------------------*/



#header {				/*div del header*/
	width: 990px;
	margin: auto;
	clear: both;
	border:0;
	padding: 35px 0 0 0;
	overflow:auto;
	
	
}

#header h1 {float:left; width: 370px; margin: 0 0 0 10px; border:0; padding:0; height:50px;  }
#header h1 a {float:left; width: 270px; line-height:47px; background:url(../img/logo.png) center left no-repeat; outline:none; border:0;				
				font-family: 'CalibriRegular'; font-size:36px; font-weight:bold;  color: #065279; padding: 0 0 0 65px;text-align:left; 
				text-shadow: 1px 1px 3px rgba(0,0,0,0.15); }
#header h1 a  span { font-family: 'CalibriItalic'; font-size:0.8em; font-weight:normal;  color: #2692C5;  }

#header h1 a:hover { color: #fff; text-decoration:none; }



#menu {				/*div para el menu*/
	height: 35px; line-height:35px;
	width: 570px;
	margin: 10px 0 5px 5px;
	float:left;
	border:0;
	background: url(../img/menubg.png) repeat-x;
	padding: 0 0 0 14px;	
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-border-radius: 8px; -webkit-border-radius: 8px;
}

#image {				/*div de la imagen principal*/
	float:left;
	margin: 40px auto 0 auto;
	padding:0;
	height: 183px;
	width:990px;
	
}
	#image img{
		border:0;
		outline:none;
		}

	body.home #image { background:url(../img/section-home.png) no-repeat;}
	body.studio #image { background:url(../img/section-studio.png) no-repeat;}
	body.portfolio #image { background:url(../img/section-portfolio.png) no-repeat;}
	body.blog #image { background:url(../img/section-blog.png) no-repeat;}
	body.contact #image { background:url(../img/section-contact.png) no-repeat;}
	
	/* ENGLISH */
	body.english.home #image { background:url(../img/eng-section-home.png) no-repeat;}
	body.english.studio #image { background:url(../img/eng-section-studio.png) no-repeat;}
	body.english.portfolio #image { background:url(../img/eng-section-portfolio.png) no-repeat;}
	body.english.blog #image { background:url(../img/eng-section-blog.png) no-repeat;}
	body.english.contact #image { background:url(../img/eng-section-contact.png) no-repeat;}


#content {				
	width: 930px;/*960-50*/
	min-height: 300px;
	margin:auto;
	background: url(../img/contentbg.png) bottom repeat-y;
	padding: 10px 30px;
	overflow:auto;
	font-size: 1.25em;
	/*-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.12); -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.12);*/
}




/*-------------------------Footer------------------------*/

#contentfooter { width: 940px; height:40px; line-height:30px; padding: 0 25px 5px 25px; font-family: "MyriadProRegular", "Century Gothic", helvetica, arial, sans-serif; 
				 font-size: 1.1em;	background: url(../img/contentfooterbg.png) bottom no-repeat; margin:auto; }
#contentfooter div { float:left; width: 33%; padding: 5px 0 0 0; }


#contentfooter #credits { text-align:right; }
#contentfooter h3 { text-align:center; border:0; font-size: 1.7em; padding:0; margin:0; color: #016092; font-family: "MyriadProItalic", helvetica, arial, sans-serif;  }	
#contentfooter #language a#langen { font-weight:normal; font-size: 1em; background:url(../img/us.png) center left no-repeat; padding: 0 0 0 20px; line-height:16px; }

a#langes { background:url(http://creixems.com/images/flag/es.png) center left no-repeat; font-weight:normal; font-size: 1em;  padding: 0 0 0 20px; line-height:16px; }
a#langve { background:url(http://creixems.com/images/flag/ve.png) center left no-repeat; font-weight:normal; font-size: 1em;  padding: 0 0 0 20px; line-height:16px; }

#footer {				
	margin:auto;
	height: 110px;
	width: 970px;
	border:0;
	font-size:1.1em;
	color:#003300;
	text-align:left;
	padding: 0 10px;
	line-height: 150%;
}

#footer #centernote {
	float:left;
	width:389px;
	height: 94px;
	margin:  -14px 0 0 265px;
	padding: 20px 20px 0 20px;
	background:url(../img/hanger.png) no-repeat center;
}

	#centernote div { float:left; width: 185px; height: 72px;  }
	#centernote div a { text-indent:-9999px; outline:none; }
	#centernote div h5 { font-size: 1.1em; font-style:italic; margin: 0 0 10px 0; text-align:center; font-weight:normal; }
	
	#centernote div a#footcontactanos {
		float:left; height: 37px; width: 55px;	margin: 3px 10px 0 40px;
		text-align:center;
		background:url(../img/hanger-mail.png) no-repeat top center; 
		font-size: 1.3em; font-style:italic;
	}
	
	#centernote div a#footlinkchat {
		float:left; height: 40px; width: 43px;	margin: -3px 0 0 0;
		text-align:center;
		background:url(../img/hanger-chatbubble.png) no-repeat top center; 
		font-size: 1.1em; font-style:italic;
	}
	
	#centernote div a#footskype, #centernote div  a#foottwitter, #centernote div  a#footfacebook {
		float:left;
		width: 32px;
		height:32px;
		margin: 0 3px;
	}
	
		#centernote div a#footskype { background:url(../img/hanger-skype.png) no-repeat top left; margin: 0 3px 0 40px; }
		#centernote div  a#foottwitter { background:url(../img/hanger-twitter.png) no-repeat top left; }
		#centernote div  a#footfacebook { background:url(../img/hanger-facebook.png) no-repeat top left; }
		
	#centernote #phone { clear:both; background:url(../img/hanger-phone.png) no-repeat; padding: 0 0 0 20px; color: #fff; width: 125px; line-height: 16px; margin: auto;
							font-size:1.1em; }
		
		

#editable {				/*div para el contenido de la region editable (dentro de #content)*/
	width: 100%;
	overflow: auto; 	/* evita el uso del geniuswork haciendo que el div contenedor se estire*/
}

/*.geniuswork {			"aplicar en caso de que overflow no funcione y retirar este comentario"
	width: 90%;
	background-color: #F2F2F2;
	margin: 0 auto 0 auto;
	clear:both;
	color: #888888;
}*/

/*-------------------------Layout: columnas de diagramación interna------------------------*/

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

#menu ul li {
	list-style-type:none;
	list-style-image:none;
	padding: 0;
	float:left;
}

#menu ul li a {
	text-align:left;
	padding: 0 7px 0 26px;
	height:35px;
	margin: 0 16px 0 0;
	float:left;
	font-size:1.2em;
	
	letter-spacing:-10%;
	color:#435A6D;
	text-decoration:none;
}
	#menu ul li a:hover { color: #fff;  }
	
	/*body.home #menu ul li#home a,*/
	body.studio #menu ul li#studio a,
	body.services #menu ul li#services a,
	body.portfolio #menu ul li#portfolio a,
	body.blog #menu ul li#blog a,
	body.contact #menu ul li#contact a { background-color: rgb(13, 81, 110); background-color: rgba(13, 81, 110, 0.5);  color: #fff; }
	
	#menu ul li#home a:hover,
	#menu ul li#studio a:hover,
	#menu ul li#services a:hover,
	#menu ul li#portfolio a:hover,
	#menu ul li#blog a:hover,
	#menu ul li#contacto a:hover { background-color: rgb(13, 81, 110); background-color: rgba(13, 81, 110, 0.8); }


#menu ul li#home a { background:url(../img/menuicon-home.png) 6px center no-repeat;}
#menu ul li#studio a {	background:url(../img/menuicon-studio.png) 6px center  no-repeat;}
#menu ul li#services a { background:url(../img/menuicon-services.png) 6px center  no-repeat;}
#menu ul li#portfolio a {	background:url(../img/menuicon-portfolio.png) 6px center  no-repeat;}
#menu ul li#blog a { background:url(../img/menuicon-blog.png) 6px center  no-repeat;}
#menu ul li#contacto a  { background:url(../img/menuicon-contact.png) 6px center no-repeat; }


/*-------------------------Layout: columnas de diagramación interna------------------------*/

.columnleft {		/*en modelos de diagramacion 2 columnas, esta ira a la izquierda*/
	padding: 4px;
	width: 30%;
	margin: 0 10px 0 10px;
	clear:none;
	float:left; 
}

.columnright {		/*en modelos de diagramacion 2 columnas, esta ira a la derecha*/
	padding: 4px;
	width: 31%;
	margin: 0 10px 0 10px;
	clear:none;
	float:left; 
}

.columnmiddle {			/*en modelos de diagramacion 3 columnas, esta ira en el medio, CORREGIR WIDTHS a 30%*/
	width: 29%;
	margin: 0 7px;
	clear:none;
	float:left;
	display: inline;
}

body.home div.columnmiddle {
	padding: 10px 9px;
	border: solid 1px #cfcfcf;
	background-color:#f1f1f1;
	height: 260px;
	margin: 0 7px 10px 7px;
	
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
	-moz-border-radius: 8px; -webkit-border-radius: 8px; }


.columnleft50 {		/*en modelos de diagramacion 2 columnas, esta ira a la izquierda*/
	width: 47%;
	margin: 0 3% 0 0;
	clear:none;
	float:left; 
}

.columnright50 {		/*en modelos de diagramacion 2 columnas, esta ira a la derecha*/
	width: 47%;
	margin: 0 0 0 3%;
	clear:none;
	float:left; 
}

.columnaleftdostercios {		/*en modelos de diagramacion 2 columnas, esta ira a la izquierda*/
	padding: 4px 0;
	width: 62%;
	margin: 0 3% 0 0;
	clear:none;
	float:left; 		/*colocar de ser necesario*/
}

.columnarightdostercios {		/*en modelos de diagramacion 2 columnas, esta ira a la derecha*/
	padding: 4px 0;
	width: 32%;
	margin: 0 0 0 3%;
	clear:none;
	float:left; 		/*colocar de ser necesario*/
}


/*--------------------------------------SUBMENU SERVICIOS--------------------------*/

#submenuservicios {
	width:730px;
	height:153px;
	padding: 30px 100px 0 160px;
	background:url(../img/section-services.png);
	}

#submenuservicios div  {
	float:left;
	width: 330px;
	height: 130px;
	margin: 0 15px ;
}

#submenuservicios div ul {
	list-style: disc outside;
	margin:0 0 0 20px;
	padding:0;
	color:#fff;
	
}

#submenuservicios ul li { padding: 7px 0; }

#submenuservicios ul li a {
	text-align:center;
	font-size:1.4em;
	color:#ffffff;
	text-decoration:none;
	letter-spacing: 0em;
	font-weight:normal;
}

#submenuservicios ul li a span { font-size: 0.8em; color:#8E9EAD; }

#submenuservicios ul li a:hover { color: #A5F202; }