/* main CSS Document */
/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
} 
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
	color: black;
	background: white;
	font-family: Verdana,Arial, Helvetica, sans-serif;
}
ol, ul {list-style: none;}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
/* end reset styles */

/* clearing technique */
.clearfix:after {
    content:" "; 
    /* display:block;  */
    height:0; 
    clear:both; 
    visibility:hidden;
}

.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
 /* End hide */
/*........... do not change or amalgamate the above clearfix styles ......*/

p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}
a img,img{border:none;display:block;}

a{	text-decoration:none;
	color:#333;
	outline: none;/* quita los cuadros alrededor de los links */ }
	
a:hover{	color:#0099ff;
			outline: none;/* quita los cuadros alrededor de los links */ 	}
	
	
/* INICIO */

body {background:url(images/bg.png) repeat-x; font-family: arial, sans-serif; color:#545454; font-size:13px;}



/* TIPOGRAFÍA */

h1,h2,h3,h4,h5,h6{
	font-weight:bold;
}
h1{font-size:197%}/* 26px */
h2{font-size:182%}/* 24px */
h3{font-size:167%}/* 22px */
h4{font-size:152%}/* 20px */
h5{font-size:136%}/* 18px */
h6{font-size:122%}/* 16px */
p{font-style:italic; font-size:12px; color:#999; line-height:18px;}

#header h2{font-size:15px; font-weight:normal; padding-top:140px; width:580px; line-height:25px; color:#333;}
	#portfolio li h4{font-family: lucida sans, sans-serif; font-size:13px;letter-spacing:1px; }
	#portfolio li p{font-family: tahoma, sans-serif; font-size:11px; color:#999;letter-spacing:1px;margin: 10px 0 0 15px; font-style: normal; line-height:10px;}

h3 {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size: 20px; color:#99cc33; font-weight:400;}
h4 {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size: 15px; font-weight:400;}	

	.normal {font-style: normal; clear:right;}
	.small{font-size:10px;}
	span.first	{
		 float: left;
		 font-size: 500%;
		 line-height: 0.85em;
		 margin-right: 0.05em;
		 margin-bottom:-0.3em;
		 font-family: Georgia;
		}	

	 
/* ESTRUCTURA */

#pagewrap{margin: 0 auto; width:960px;}

#logo {width:217px; height:109px; background:url(images/logo.jpg) no-repeat 0 0; text-indent:-10000px; display:block;}	
	#logo h1 a {display:block; width:100%; height:100%;}
	#logo h1 {display:block; width:100%; height:100%;}
	
	span.logoHover {display:block;width:100%;height:100%;background:url(images/logo.jpg) no-repeat 0 -109px;}    
	span.logoHover a {display:block;width:100%;height:100%;}

#header{min-height:419px; background:url(images/header.jpg) no-repeat; position:relative; width:960px;}
	
	a#conversemosboton { background:url(images/conversemosboton.png) no-repeat 0 0; display:block; width:147px; height:35px; position:absolute; left:350px; bottom:15px; text-indent:-10000px;}
	a:hover#conversemosboton {background-position: 0 -35px;}
	
	#monitor {position:absolute; top:0; right:0;}
	
#portafolio{margin-top:70px; position:relative;}
	.portfolioclip {height:225px; width:960px; overflow:hidden;}
	.portfoliofull {height:100%; display:block;}
		#portfolio {padding-top:20px; width:960px;}
			#portfolio li{float:left; width:240px; margin:0 37px 50px 37px;}
			#portfolio li img{margin-bottom:7px;}
			
			a#portfolio-morelink{display:block; text-indent:-10000px; background:url(images/+.jpg) no-repeat 0 0; width:936px; height:33px; margin:5px 0;}
			a:hover#portfolio-morelink{background:url(images/+.jpg) no-repeat 0 -33px;}
			a.active {background:url(images/+.jpg) no-repeat 0 -66px !important;}
			a.active:hover {background:url(images/+.jpg) no-repeat 0 -99px !important;}
			
			
			
#bottomwrapper{clear:both; width:960px; padding:80px 0; overflow:auto; margin-top:15px;}
				
#conversemos{display:block; width:350px; height:570px; float:left;}
	#conversemosform {padding-top:25px;position:relative;}
		#conversemosform label {font-size:12px; color:#666; text-align:right; float:left; width:65px;}
		#name, #email{width:220px; min-height:19px; margin:0 0 30px 20px; padding: 6px 20px 3px 20px; border:0; background-color:transparent; border:none; background:url(images/singleinput.png) no-repeat; }
		#conversemosform select{font-size:12px; width:260px; min-height:19px; margin:0 0 30px 20px; padding: 7px 5px; border:0; background-color:transparent; border:none; background:url(images/singleinput.png) no-repeat; }
		#conversemosform textarea{width:220px; min-height:19px; margin:0 0 20px 20px; padding: 6px 20px 3px 20px; border:0; background-color:transparent; border:none;  background:url(images/textareabg.png) no-repeat; font-family:arial; font-size:12px;}
		#conversemosform option{ margin:5px 0;}
		.nobr {display:none; }
		#conversemosform .button {margin:20px 0 0 275px;}
		
.button{width:67px; height:22px; background:url(images/boton.png) 0 0; border: medium none; color:#fff; display:block; font-size:11px; letter-spacing:1px;} 
.button:hover{width:67px; height:22px; background:url(images/boton.png) 0 -22px;}
	

/* FORMULARIO */

.element .hightlight {
	border:2px solid #9F1319 !important;
	background:url(images/iconCaution.gif) no-repeat 2px !important;
}
.loading {	float:right; background:url(images/ajax-loader.gif) no-repeat 1px; height:28px; width:28px; position:absolute; top:0;
			left:50%; display:none;}

.done {	width:150px; height:128px; background:url(images/emailok.png) no-repeat left 0; font-family:arial; font-size:14px; margin:100px auto; display:none; padding: 25px 150px;}

/* TESTIMONIOS */
	
#testimonios{display:block; margin-left:220px; float:left; width:345px; margin-bottom:50px;}
	#testimonios blockquote{font-family: georgia, sans-serif; color:#666; font-style: italic; line-height: 22px; margin:15px 0; font-size:15px;}
	
#servicios{display:block; margin-left:220px; float:left; width:345px; }
	#servicios  ul {list-style-type:circle; padding-top:10px;}
	#servicios ul li {margin:10px; list-style:circle; line-height:20px;}

/* FOOTER */
	
#footer{clear:both; min-height:350px; background:#222; color:#999; padding:50px 0 20px;}
	#footerwrap{width:960px; margin:0 auto;}
				
		#twitter_div{width:350px;font-size:13px; font-style:italic; float:left;}
			#twitter_div a{color:#033D62;}
			#twitter_div a:hover{color:#0099ff;}
		
		#links { float:left; width:345px; margin-left:220px;}
			#footer h4{margin-bottom:25px;}
			#links ul{margin-left:5px; list-style:none;}
				#links ul li{ margin-bottom:15px;}
					#links ul li a{ color:#555;}
		


/*  COLOR  */

.azul{color:#0099ff;}
.azuloscuro{color:#04609C;}

/*	FILTER  */

ul#filter { font-size: 12px; font-weight:400; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; list-style: none; margin-left: 43px; padding:30px 0 10px 0; } 
ul#filter li {	border-right: 1px solid #dedede;
				display:inline;
				line-height: 16px;
				margin-right: 10px; 
				padding-right: 10px;}
	
ul#filter a { color: #666; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; color: #ffcc33;}
ul#filter li.current a { color: #0099ff;}

.hidden{
    visibility: hidden;
    display: none !important;
}

/* OVERLAY */

#divoverlay { display:none;	width:600px; border:10px solid #777; border:10px solid rgba(170, 170, 170, 0.698); -moz-border-radius:8px; 	-webkit-border-radius:8px;	border-radius:8px;}

	#divoverlay div {	background-color:#fff;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;	font-size : 1.2em;	padding:20px;}
	#divoverlay div p{line-height:1.6em;font-style:normal; color:#666;}
	#divoverlay h2 {color:red;font-size:20px;}
	#divoverlay img {border:3px solid #ccc; float:left; margin: 5px 10px 5px 0;}


/* LANGUAGE */

div#magntbadge { height:36px; position:fixed; right:15px; bottom:15px; width:98px; opacity:0.5;z-index:500;}
	div#magntbadge a { background:transparent url(images/helloboton.png) no-repeat scroll 0 0; display:block; height:36px; text-indent:-10000px; width:98px; }
	div#magntbadge a:hover {background-position:0 -36px; opacity:1.0;}
	
/* CONVERSEMOS */
div#conversemosbox{padding:15px 30px 30px 30px;}
	div#conversemosbox h3{font-size:40px; color:#545454;}
	div#conversemosbox p{color:#666;}
	div#conversemosbox #chatbubble {margin:20px; float:right;}
	div#conversemosbox .formulariolink {font-size:16px; letter-spacing:2px; padding-top:20px; float:left;}
	div#conversemosbox .agenda {float:left; margin-right:10px; }
	div#conversemosbox small {float:left; padding-top:3px; font-size:11px; letter-spacing:1px; }