@import url("form-speak.css");
@import url("portfolio-styles.css");

/**********************************
CSS -- FaniaMartinez.com
© 2008
**********************************/

/**********************************
=COLORES
Black: #0e0e0e;
White: #fbfcf8;
Text: #464646;
Blue: #31acc2;
Green: #97be38;
Orange #e68d24;
Pink: #db389f;
********/

/* ---------------------- =RESET* ---------------------- */
* { 
  margin: 0; 
  padding: 0;
}

/* ---------------------- =CLEARS* ---------------------- */
.clearboth{
	clear:both; 
	height:0;
}

.clearboth-space{
	clear:both;
	height:35px;
}

/* ---------------------- =FAVICONS* ---------------------- */
ul.favilist{
	list-style:none;
	margin-top:10px;
}

img.faviconimg{
	border:0;
	width:11px;
	height:11px;
	padding:0 4px;
}

ul.favilist li{
	padding:3px 0;
	border-bottom:1px dashed #ccc;
}

/* ---------------------- =GENERAL STYLE* ---------------------- */
em, i{font-style:italic;}

strong, b{text-transform:uppercase;}

code{font-family:monospace;}

a{outline:none;}

a img{border:0;}

h3{color:#464646;}

/* ---------------------- =BASIC STRUCTURE* ---------------------- */
body{
	background:#fbfcf8 url(../imgs/bg-paper.jpg) top left repeat;
	margin:0;
	padding:0;
	color:#464646;
	font-family:'Trebuchet MS', Verdana, Helvetica, sans-serif;
	font-size:100%/*16px*/;
	line-height:106.25%/*17px*/;
}

#wrapper{
	background:/*#fbfcf8*/transparent url(../imgs/bg-wrap2.jpg) top left repeat-y;
	margin:0 auto;
	overflow:hidden;
	width:942px;
}

#header{
	background:/*#fbfcf8*/transparent;
	border-bottom:5px solid #464646;
	margin-bottom:5px;
	padding-bottom:5px;
	overflow:hidden;
}

#content{margin:0 30px;}

.col-izq, .col-centro, .col-der{
	float:left;
	padding:0 10px;
	width:274px;
	font-size:0.75em/*12px*/;
}

.col-der-doble{
	float:left;
	width:588px;
	font-size:0.75em/*12px*/;
}

#footer{}

/* ---------------------- =HEADER* ---------------------- */

/* ----------- =LOGO* ----------- */
#logo{
	background:url(../imgs/logo4.gif) bottom left no-repeat;
	float:left;
	margin:20px 0 10px 10px;
	width:302px;
	height:73px;
	text-align:center;
}

#logo h1{ 
	text-indent:-900%; 
	display:none; 
}


/* ----------- =NAVIGATION (all)* ----------- */
.nav-ppal{
	float:right;
	margin-right:10px;
	margin-top:56px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:0.75em/*12px*/;
}

.navinner{
	margin-right:10px;
	margin-top:30px;
}

.nav-ppal li{
	display:inline; 
	list-style:none; 
	margin-right:30px;
}

.nav-ppal li.last{
	display:inline; 
	list-style:none; 
	margin-right:0;
}
	
.nav-ppal li a, .nav-ppal li a:link, .nav-ppal li a:visited, .nav-ppal li.active{
	background:transparent;
	border:1px solid #afafaf;
	padding:2px 10px;
	color:#464646!important;
	font-weight:normal;
	text-decoration:none;
	text-transform:lowercase;
}
.nav-ppal li.acerca-nav a:hover, .nav-ppal li.acerca-nav-active{
	background:#31acc2!important;
	border:1px solid #31acc2;
	padding:2px 10px;
	color:#f4f4f4!important;
	font-weight:normal;
	text-decoration:none;
	text-transform:lowercase;
}

.nav-ppal li.portfolio-nav a:hover, .nav-ppal li.portfolio-nav-active{
	background:#97be38!important;
	border:1px solid #97be38;
	padding:2px 10px;
	color:#f4f4f4!important;
	font-weight:normal;
	text-decoration:none;
	text-transform:lowercase;
}

.nav-ppal li.contacto-nav a:hover, .nav-ppal li.contacto-nav-active{
	background:#e68d24!important;
	border:1px solid #e68d24;
	padding:2px 10px;
	color:#f4f4f4!important;
	font-weight:normal;
	text-decoration:none;
	text-transform:lowercase;
}

.nav-ppal li.links-nav a:hover, .nav-ppal li.links-nav-active{
	background:#db389f!important;
	border:1px solid #db389f;
	padding:2px 10px;
	color:#f4f4f4!important;
	font-weight:normal;
	text-decoration:none;
	text-transform:lowercase;
}


/* ---------------------- =CONTENT* ---------------------- */

/* ----------- =ACERCA* ----------- */
#acerca{
	margin-bottom:30px;
	margin-top:50px;
	overflow:hidden;
}

#acerca a{
	color:#31acc2; 
	text-decoration:none;
}

#acerca a:hover{
	background:#31acc2; 
	color:#f4f4f4;
}

#acerca h2{
	background:url(../imgs/hola.gif) top left no-repeat;
	width:274px;
	height:259px; 
	text-indent:-900%; 
}

p.acerca-importante{
	border-left:3px solid #f4f4f4;
	margin:10px 0;
	padding-left:5px;
	font-size:1.0833em/*13px*/;
	font-style:italic;
}

#servicios{
	background:#31acc2;
	margin-bottom:15px;
	padding:8px;
	color:#f4f4f4;
}

#servicios h4{
	background:url(../imgs/acerca-servicios2.png) top left no-repeat;
	width:84px;
	height:17px; 
	text-indent:-900%; 
}

#servicios li{
	list-style:inside disc;
	margin:10px 0;
}

#servicios a{
	color:#f4f4f4; 
	text-decoration:underline;
}

#servicios a:hover{
	background:#fff; 
	color:#31acc2; 
	padding:1px; 
	text-decoration:none;
}

#mas-datos{
	margin-bottom:15px;
	padding:8px;
}

#mas-datos h4{
	background:url(../imgs/acerca-mas.gif) top left no-repeat;
	width:92px;
	height:17px; 
	text-indent:-900%; 
}

#mas-datos li{
	list-style:none;
	margin:10px 0;
	border-bottom:1px dashed #ccc;
}

#sigueme{
	height:187px;
	margin-bottom:15px;
	padding:8px;
}

#sigueme h4{
	background:url(../imgs/acerca-enlared.gif) top left no-repeat;
	width:80px;
	height:17px; 
	text-indent:-900%; 
}

#sigueme li{
	list-style:none;
	padding:3px 0;
	border-bottom:1px dashed #ccc;
}

#twitter{
	margin-bottom:15px;
	padding:8px;
}

#twitter h4{
	background:url(../imgs/acerca-twitter.gif) top left no-repeat;
	width:125px;
	height:17px; 
	text-indent:-900%; 
}

#twitter ul li{
	border-bottom:1px dashed #ccc;
	margin:10px 0;
	padding-left:5px;
	list-style:none;
}

#twitter ul li a {  
	font-size:0.8333em/*10px*/;       
	text-transform:uppercase;  
}

#sigue-twitter a{ /*el botón de sígueme en twitter*/
	background:transparent url(../imgs/sigue-twit.gif) top left no-repeat;
	display:block;
	width:112px;
	height:48px; 
	text-indent:-900%;
}

#sigue-twitter a:hover{
	background:transparent url(../imgs/sigue-twit-hov.gif) top left no-repeat!important;
	width:112px;
	height:48px; 
	text-indent:-900%;
}

/* ----------- =PORTFOLIO* ----------- */
#portfolio{
	border-top:5px solid #97be38;
	margin-bottom:30px;
	margin-top:50px;
	overflow:hidden;
}

#portfolio h3{
	background:url(../imgs/port-title.gif) top left no-repeat;
	margin-left:143px; 
	width:131px;
	height:20px;
	text-indent:-900%; 
}

#portfolio a{
	color:#88a63e/*verde más oscuro*/; 
	text-decoration:none;
}

#portfolio a:hover{
	background:#97be38; 
	color:#f4f4f4;
}

#portfolio img{
	border:2px solid #ccc;
	margin-bottom:10px;
}

#portfolio img:hover{
	border: 2px solid #97be38;
}

.proyecto-info{
	margin-bottom:30px;
	height:130px;
}

.proyecto-info p{
	border-bottom:1px dashed #ccc;
	padding:3px 0; 
}

#portfolio a.mas-info{/*link a más información*/
	color:#88a63e/*verde más oscuro*/; 
	font-size:1.0833em/*13px*/;
	text-decoration:none;
	text-transform:uppercase;
}

#portfolio a:hover.mas-info{
	background:#97be38; 
	color:#f4f4f4;
}

#todo-port{
	margin-bottom:15px;
	margin-top:15px;
	font-size:1.0833em/*13px*/;
	text-align:center;
}

#todo-port a{/*link a portfolio completo*/
	background:transparent; 
	border:1px solid #afafaf;
	display:block;
	margin-left:145px; 
	padding:8px;
	color:#464646;
	text-decoration:none; 
	text-transform:uppercase;
}

#todo-port a:hover{
	background:#97be38;
	border:1px solid #97be38;
	color:#f4f4f4;  
}

/* ----------- =CONTACTO* ----------- */
#contacto{
	border-top:5px solid #e68d24;
	margin-bottom:30px;
	margin-top:50px;
	overflow:hidden;
}

#contacto h3{
	background:url(../imgs/contacto-title.gif) top left no-repeat;
	margin-left:152px; 
	width:122px;
	height:20px; 
	text-indent:-900%; 
}

#contacto strong{color:#e68d24;}

#contacto a{
	color:#e68d24;
	text-decoration:none;
}

#contacto a:hover{
	background:#e68d24; 
	color:#f4f4f4;
}

#contacto p{
	border-bottom:1px dashed #ccc;
	padding:3px 0; 
}

/* ----------- =FORMULARIO* ----------- */
	#comm-form{
		font-size:0.75em/*12px*/;
		background:transparent;
		overflow:hidden;
	}
	
	#formulario p, #formulario form, #formulario button{
		border:0; 
		margin:0; 
		padding:0;
	}
	
	.spacer{
		clear:both; 
		height:1px;
	}
	
	.myform{
		width:274px;
	}
		
	#formulario p{
		border-bottom:1px dashed #ccc;
		padding:3px 0; 
	}
	
	#formulario label{
		display:block;
		padding:10px 0 0;
		font-weight:normal;
		text-align:left;
		float:left;
	}
	
	#formulario input, #formulario textarea{
		background:transparent;
		border:1px solid #afafaf;
		float:left;
		width:270px;
		font-family:'Trebuchet MS', Verdana, Helvetica, sans-serif; 
		font-size:1.083em/*13px*/;
	}
	
	#formulario textarea{
		height:200px;
	}
	
	#formulario .form-nota{/*los campos marcados...*/
		border:0;
		padding:3px 0; 
		font-size:0.9166em/*11px*/;
	}
		
	#formulario button{ 
		background:transparent;
		border:1px solid #afafaf;
		clear:both;
		cursor:pointer;
		margin-top:5px;
		padding:8px;
		width:274px;
		font-weight:normal;
		text-transform:uppercase;
	}
	
	#formulario button:hover{ 
		background:#e68d24;
		border:1px solid #e68d24;
		clear:both;
		cursor:pointer;
		float:right;
		margin-top:5px;
		padding:8px;
		width:274px;
		color:#f4f4f4;
		font-weight:normal;
		text-transform:uppercase;
	}

	#formulario span{
		color:#e68d24;
		font-weight:bold;
	}
	
/* ----------- =LINKS* ----------- */
#links{
	border-top:5px solid #db389f;
	margin-bottom:30px;
	margin-top:50px;
	overflow:hidden;
}

#links h3{
	background:url(../imgs/links-title.gif) top left no-repeat;
	margin-left:218px; 
	margin-bottom:15px;
	width:56px;
	height:20px; 
	text-indent:-900%; 
}

#links strong{color:#db389f;}

#links a{
	color:#db389f;
	text-decoration:none;
}

#links a:hover{
	background:#db389f; 
	color:#f4f4f4;
}

#links p{
	border-bottom:0;
	padding:3px 0; 
}	

#links ul.favilist{
	list-style:none;
	margin-top:0;
}

#links ul.favilist li{
	padding:3px 0;
	border-bottom:1px dashed #ccc;
}

/* ----------- =FOOTER* ----------- */
#footer{
	border-top:5px solid #0e0e0e;
	margin-bottom:10px;
	margin-top:50px;
	overflow:hidden;
}

.navfooter{
	margin-right:10px;
	margin-top:10px;
}

#footer a{
	color:#31acc2; 
	text-decoration:none;
}

#footer a:hover{
	background:#31acc2; 
	color:#f4f4f4;
}

#footer ul.favilist li{
	padding:3px 0;
	border-bottom:1px dashed #ccc;
}

p.ok{
	background:url(../imgs/ok.gif) left no-repeat;
	margin-top:1px;
	padding-top:0;
	padding-left:12px;
}