/*		# Site: elementocero.
		# Date: March 2010
		# Author: (serienmörder)
		# elementocero.com.mx 		     		*/		   

/***********************************************************************************************************************************************************
                         Reset
 ***********************************************************************************************************************************************************/
*	{ margin:0;padding:0; }
	a:link, a:visited, a:hover { text-decoration:none; }
	fieldset,img { border:0; }
	ul { list-style:none; }
	q:before,q:after { content:''; }
	abbr,acronym { border:0; }



/***********************************************************************************************************************************************************
                         Basic / Typography
 ***********************************************************************************************************************************************************/
body { background:#333; font:normal 13px Arial, Helvetica, sans-serif; margin:0; padding:0; top:0; }


h1 { color:#ff6500; font:bold 40px/42px Arial, Helvetica, sans-serif; margin:0 0 12px; letter-spacing:-1px; }
h1 em { font:normal bold 30px/30px Arial, Helvetica, sans-serif; }
h2 { color:#666666; font:normal 22px/29px Arial, Helvetica, sans-serif; margin:0 14px; }
h3 { color:#666666; font:normal 16px/23px Arial, Helvetica, sans-serif; margin:0 14px; }

p { font:normal 13px/19px Arial, Helvetica, sans-serif; padding:1px 1px 15px; }

a:link, a:visited, a:active { color:#ff6500;  }
a:hover { color:#ff6500; text-decoration:underline; }



.logo { font:normal 13px Arial, Helvetica, sans-serif; padding:2px; }
.mainbtn { color:#333333; font:normal 13px/14px Arial, Helvetica, sans-serif; float:right; outline:none; }


#headr h2.expand { background: url(images/expand_collapse.png) no-repeat right top; color:#5f5f5f; font:bold 16px/28px Arial, Helvetica, sans-serif; float:right; outline:none; height:38px; width:200px; margin-left:200px; cursor:pointer;  letter-spacing:-1px; margin-right:0; }
#headr h2.expand a:hover { color:#6f6f6f; }
#headr h2.active {background-position: left bottom;}

.up { float:right; border:0; background:none; }


/***********************************************************************************************************************************************************
                         Main Divisions
 ***********************************************************************************************************************************************************/
#wrappr   { background:#efefef url(images/bk.jpg) repeat-x; border:0; margin:0 auto;  padding:0 auto; width:100%; }

#headr    { background:none; color:#000; margin:0 auto; overflow:hidden; width:800px; height:180px;  }
#headr h1 { color:#f2f2f2; font:bold 80px/82px Arial, Helvetica, sans-serif; float:right; margin:30px 7px 0 0; letter-spacing:-5px; 
              text-shadow:0 0 10px #8f8f8f, 0 0 10px #FFF, 0 0 3px #ccc; filter: progid:DXImageTransform.Microsoft.Glow(Color=#8f8f8f,Strength=3)
	progid:DXImageTransform.Microsoft.blur(pixelradius=2, enabled='true')
; /* IE */}

#headr h1 { font-family:'Lobster', arial, serif; letter-spacing:0px; } /*google fonts*/
			  
.logo     { border:0; display:inline; margin:0; padding:6px 0 0 0px; }


#content  { margin-top:6px; min-height:600px; width:800px; padding:5px 10px; outline:none; }



#footrcont  { background:#333 url(images/bkfooter.jpg); width:100%; height:100%; }
#footr      { background:none; color:#dfdfdf; margin:0 auto; padding:28px 10px 10px; width:800px; }
#footr p  { color:#9f9f9f; font:normal 19px/23px Arial, Helvetica, sans-serif; margin:0; text-align:left; letter-spacing:-1px;  }
#footr em { font:normal 13px/19px Arial, Helvetica, sans-serif; letter-spacing:0px; text-align:right; padding-top:6px; }
#footr strong { font:bold 20px/21px Arial, Helvetica, sans-serif; }
#footr a:link, #footr a:visited, #footr a:active { color:#666; text-decoration:none; }
#footr a:hover { color:#7e7e7e; text-decoration:underline; filter:alpha(opacity=70);  -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }
#footr img { border:0; margin:4px 0 0; }
.mini { color:#666; font:normal 13px/19px Arial, Helvetica, sans-serif; } 


#clear		{ clear:both; }
.clear		{ clear:both; }
.dere { float:right;  }


/***********************************************************************************************************************************************************
                         Hidden Box
 ***********************************************************************************************************************************************************/
#hddnbx { background:#fff url(images/bk_top.jpg) no-repeat; width:100%; overflow: hidden; clear:both; border-bottom:5px solid #dcdcdc; }

#hb-wrapper { background:none; margin:20px auto; width:780px; padding:10px; padding-right:0; outline:none; }
#izq { float:left; width:340px; min-height:300px; }
#der { float:right; width:320px; min-height:300px; margin:0; }


#hb-wrapper em { border-bottom:1px dashed #E1681F; display:block; font:italic bold 16px/19px Georgia, "Times New Roman", Times, serif; margin:0 0 5px 0; padding-bottom:1px; text-align:right; width:900px;  }

#hb-wrapper a { outline:none; }

#hb-wrapper h1 { color:#ff6500; font:normal 32px/32px Arial, Helvetica, sans-serif; margin:0 0 12px; letter-spacing:-2px; text-shadow: 0 0 3px #FF781F, 0 0 7px #fff, 0 0 20px #fff; }
#hb-wrapper h2 { color:#ff6500; font:normal 18px/19px Arial, Helvetica, sans-serif; margin:0 0 12px; letter-spacing:-1px; text-shadow: 0 0 3px #ccc, 0 0 7px #fff, 0 0 20px #fff; }

#hb-wrapper ul li { font:normal 13px/19PX Arial, Helvetica, sans-serif; list-style-image:url(images/circles.jpg); margin-left:14px; }
#hb-wrapper ul li.nolist { list-style:none; }


/***********************************************************************************************************************************************************
                         Hidden Box - Formulario
 ***********************************************************************************************************************************************************/
#hb-wrapper form { float:right; margin-right:0px; }
#hb-wrapper label { float:none; color:#333; font:normal 13px Arial, Helvetica, sans-serif; padding-top:3px; margin-top:10px; width:300px; display:block; }

#hb-wrapper input { background:none; border:0; border-bottom:1px dashed #ccc; color:#BF4423/*FF8A00*/; font:normal 13px Arial, Helvetica, sans-serif; padding:3px; margin-bottom:5px;  }
#hb-wrapper input:focus { border:0; border-bottom:1px dashed #FF3300/*333*/; color:#FF3300; outline:none; }  

#hb-wrapper textarea { margin-top:4px; background:none; border:1px dashed #ccc; color:#BF4423; font:normal 13px Arial, Helvetica, sans-serif; padding:3px; width:312px; }
#hb-wrapper textarea:focus { border:0; border:1px dashed #FF3300; color:#FF3300; outline:0; } 

#hb-wrapper .submit { background:url("images/boton_enviar.png") no-repeat; background-position:0 0; border:0; cursor:pointer; display:block; width:120px; height:30px; text-indent:-10000px; margin-top:0; outline:none; border:0; }
#hb-wrapper .submit:hover, #hb-wrapper .submit:focus { background-position: 0 -30px; outline:none; border:0; }


#sbmtbttn { margin:18px 0; }
#leyenda { margin:0; padding:0; }


/***********************************************************************************************************************************************************
                         Portfolio
 ***********************************************************************************************************************************************************/
#portafolio { background:none; margin:30px auto 0; width:800px; }
#portafolio h1 { color:#FF6F0F; font:bold 60px/50px Arial, Helvetica, sans-serif; margin:0 0 30px; padding:16px 20px 26px; letter-spacing:-3px; border:0; border-bottom:2px dashed #d2d2d2; border-top:2px dashed #d2d2d2; text-shadow: 0 0 3px #EF680E, 0 0 10px #ccc, 0 0 30px #fff;  }
#portafolio h2 { color:#7e7e7e; font:bold 30px/32px Arial, Helvetica, sans-serif; margin:10px 0 0; letter-spacing:-3px; text-shadow:0 0 4px #9e9e9e, 0 0 10px #FFF, 0 0 3px #ccc; }
#portafolio h2 a { background:url("images/goto.png") no-repeat; background-position:0 0; display:inline-block; width:40px; height:25px; text-indent:-10000px; margin-top:10px; float:right; }
#portafolio h2 a:hover { background-position: 0 -25px; }
#portafolio h2 a span { text-indent:0; letter-spacing:0; font:normal 13px Arial, Helvetica, sans-serif; top:-20px; left:28px; width:60px; text-shadow:0 0 0; }

#fade { border-bottom:3px dashed #d2d2d2; border-top:3px dashed #d2d2d2; padding:6px 0; margin:10px 0; }
#fade p { color:#FF6F0F; font:bold 60px/50px Arial, Helvetica, sans-serif; margin:0 0 30px; padding:16px 20px 26px; letter-spacing:-3px; border:0; text-shadow: 0 0 3px #EF680E, 0 0 10px #ccc, 0 0 30px #fff; behavior: url(PIE.htc);  }
#fade p strong { font:bold 71px/85px Arial, Helvetica, sans-serif; }
#fade p em { font:bold normal 46px/48px Arial, Helvetica, sans-serif;  }

#portafolio h3, #portafolio h3 a { color:#acacac; font:bold 26px/29px Arial, Helvetica, sans-serif; margin:10px 2px 0; letter-spacing:-1px; text-shadow:0 0 4px #efefef, 0 0 10px #FFF, 0 0 3px #ccc; } /*temp*/

.proceso { background:#eaeaea; border:1px solid #dfdfdf; float:left; width:200px; margin:20px 10px 10px; padding:3px 20px 10px; height:70px;
-moz-border-radius:10px; -webkit-border-radius:10px; -webkit-box-shadow:0px 0px 14px #dfdfdf; -moz-box-shadow:0px 0px 14px #dfdfdf;  }
.proceso p strong { border:0; color:#FF6600; font:bold 60px Arial, Helvetica, sans-serif; text-shadow:0 0 4px #9e9e9e, 0 0 10px #FFF, 0 0 3px #ccc; float:left; padding-left:10px;  }
.proceso p { color:#4c4c4c;	 font:normal 13px/19px Arial, Helvetica, sans-serif; cursor:pointer; }
.proceso img { float:right;  }
.proceso p a span { width:160px; -moz-border-radius:10px; -webkit-border-radius:10px; margin-top:50px; left:0; border:1px dashed #efefef; }
.proceso p a { text-decoration:none; }



/***********************************************************************************************************************************************************
                         Left / Right Fade Images
 ***********************************************************************************************************************************************************/
#left, #right { background:black; }
#left, #right {	position:fixed;	top:0; bottom:0; width:88px; }
#left  { left: 0; background:url(images/left.png) left center repeat-y;}
#right { right:0; background:url(images/right.png) right center repeat-y;}



/***********************************************************************************************************************************************************
                         Jquery Ajax Loading
 ***********************************************************************************************************************************************************/				
#loading { background-image:url(images/preloader.gif); display:none; margin:auto; width:120px; height:15px; }
.mensaje { color:#ff6600; font:bold 18px/24px Arial, Helvetica, sans-serif; letter-spacing:-1px; padding-left:10px;}



/*******************************************************************************************************************************************************
                         Fade Img
 *******************************************************************************************************************************************************/				
ul.content1 { list-style:none; margin:2px 0 0 2px; padding:0; width:840px; }
ul.content1 li { display:inline; float:left; text-align:center; padding:2px; }
ul.content1 li a.fadeinfadeout { cursor:pointer; width:140px; height:99px; border:4px solid #dfdfdf; margin:8px 4px 0; }
ul.content1 li span { display:block; overflow:hidden; width:140px; height:99px; }
ul.content1 li a.fadeinfadeout:hover { background:#333; border:4px solid #BA5706; -webkit-box-shadow:0px 0px 15px #787878; -moz-box-shadow:0px 0px 15px #787878; }
ul.content1 li a { color:#fff; display: block;}




/*******************************************************************************************************************************************************
                         Tooltip  - added july 16th
 *******************************************************************************************************************************************************/				
a.tip {	position: relative; }
a.tip span { background:#ff6500; border:1px dashed #fff; color:#fff; display:none; font:normal 13px Arial, Helvetica, sans-serif;  position:absolute; top:10px; left:-10px; text-align:left; width:300px; padding:12px; z-index:100;	 
    -moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */   
	opacity: .95; text-decoration:none; 
/* For IE 5-7 */	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99);
/* For IE 8 */	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";	}
a:hover.tip { font-size:99%; /* this is just for IE */ }
a:hover.tip span { display:block; }
a.tip img { margin:0 0 0 6px; }

a.tip2 {	position: relative; }
a.tip2 span { background:#333; border:1px dashed #5c5c5c; color:#fff; display:none; font:normal 13px Arial, Helvetica, sans-serif;  position:absolute; top:-44px; left:-10px; text-align:left; width:120px; padding:8px; z-index:100;	 
    -moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */   
	opacity: .95; text-decoration:none; 
/* For IE 5-7 */	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99);
/* For IE 8 */	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";	}
a:hover.tip2 { font-size:99%; /* this is just for IE */ }
a:hover.tip2 span { display:block; }
a.tip2 img { margin:0 0 0 6px; }

a.tip-up span{ top:-20px; left:28px; width:26px; }
a.tip-dere span{ left:120px; background:#ff6500; border:1px dashed #fff; color:#fff; }
.nomargintop { margin-top:0; }

/*******************************************************************************************************************************************  END  **********/
