body
{
    background: #FFFFFF;
    color: #000000;
    font-family: Century Gothic;
    font-size: 11px;
    line-height: 18px;
}

/****************************************************************
ENCABEZADOS E HIPERVINCULOS
*****************************************************************/

h1 
{
	text-transform : uppercase;
	font-size : 14px;
	color : #ff7000;
}



/*****************************************************************
ESQUELETO
******************************************************************/

#main 
{
	position : relative;
	margin : 25px auto;	
	width : 900px;
	padding : 0px;
}

#head 
{
	width : 900px;
	height : 75px;
	margin : 0px;
	padding : 0px;
	z-index : 150px;
}

#navigation 
{
	width : 900px;
	height : 35px;
	background : #ff7000;
	margin : 0px;
	padding : 0px;
	text-align : right;
	color : #FFF;
}


#contents
{
	margin : 10px 0px;
	width : 898px;
	border: solid 1px #cbcbcb;
	padding : 0px;
	z-index:0;
}

#footer 
{
	font-size : 10px;	
	color : #ff7000;
	font-weight : bold;
}
/************************************************************************
CABECERA
**********************************************************/

#logo 
{
    float : left;    
}
#redessocial 
{
    float : right;
    padding-top: 20px;
    vertical-align : bottom;
    
}
/**********************************************************************************************
MENU
***********************************************************************************************/
#menu 
{
	margin : 0px;
	padding : 5p 0px;
	margin-right : 15px;
	float : right;
}

#menu a 
{
	float : left;
	padding : 2px 5px 0px 10px;
	color : #FFFFFF;
	text-decoration : none;
	font-weight : bold;
}

#menu a:hover
{
	color : #000000;
}

/***********************************************************************************************
QUIENES SOMOS
***********************************************************************************************/
#quienes_h1 
{
	margin : 5px 0px;
	float : left;
	padding : 20px;
	color : #ff7000;
	font-size : 16px;
	text-align : right;
	width : 245px;
	font-weight : bold;
	line-height : 30px;
	
}

#quienes_text 
{
	margin : 15px 0px;
	float : right;
	padding : 20px;
	padding-right : 80px;
	width : 500px;
	text-align : justify;
}

/***********************************************************************************************
TEXTOS CONTENIDOS DINAMICOS
***********************************************************************************************/
#textos 
{
	padding : 20px;
	text-align : justify;
	overflow: hidden;
}
/*********************************************************************************************
CONTACTO
**********************************************************************************************/

#left 
{
	float : left;
	padding-right : 20px;
	width : 315px;
	margin-bottom : 20px;
}

#left .enlace 
{
	width : 315px;
	height : 90px;
	vertical-align : middle;
}

#left .enlace img 
{
	float : left;
	padding : 0px 10px 0px 0px;
}

#left .enlace a
{
	display : block;
	font-size : 14px;
	text-decoration : none;
	font-weight : bold;
	color : #000000;
	padding-top: 25px;
}

#left .enlace a:hover  
{
	color : #FF7000;
}

#formulario 
{
	float : left;
	padding-left : 20px;
	width : 500px;
	margin-bottom : 20px;
	border-left : solid 1px #ff7000;	
}

/*************************************
INICIO
**************************************/

.inicio 
{
	float : left;
	margin : 20px 0px 0px 20px;
	width : 271px;
	height : 190px;
}

.inicio_2 
{
	float : left;
	margin : 20px 0px 20px 20px;
}

/*********************************************************
TOOLTIPS
**********************************************************/
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url("/images/black_arrow.png");
	font-size:11px;
	height:93px;
	width:180px;
	padding:15px;
	color:#000;	
	text-align : center;
	font-size: 12px;
}

.tooltip h1 
{
	text-transform : uppercase;
	font-size : 14px;
	margin : 3px;
	color : #FFF;
}

/* style the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 0px;
}

/*****************************DROP DOWN MENU PRUEBA ***********************/
ul.topnav {
	list-style: none;
	padding: 5px 0px;
	margin: 0;
	float: left;
	
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}

ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 30px;
	float: left;
	background: url(../images/subnav.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 30px;
	background: #ff7000;
    border: 3px solid #ff7000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
	margin: 0px 0; padding: 0;
	display: none;
	float: left;
	width: 200px;
	text-align : left;
	z-index : 200;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 5px 0 5px;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	clear: both;
	width: 200px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 180px;
	background: #ff7000;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #ff7000;
	color : #000;
}

/************************** IMAGES jquery over ******************************/

.item {
	width:271px;
	height:190px;	
	margin:20px 0px 0px 20px;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item .caption {
	width:271px;
	height:190px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=60);    /* ie  */
	-moz-opacity:0.6;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.6;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#ff7000;
	font-size:18px;
	font-weight : bold;
	font-style : italic;
	
	/* add spacing and make the whole row clickable*/
	padding:20px;
	display:block;
}

.item .caption p {
	padding:5px 20px;	
	margin:0;
	font-size:13px;
	font-style : italic;
}

.item img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}

.item_down {
	width:271px;
	height:190px;	
	margin:20px 0px 20px 20px;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item_down .caption {
	width:271px;
	height:190px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=60);    /* ie  */
	-moz-opacity:0.6;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.6;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item_down .caption a {
	text-decoration:none;
	color:#ff7000;
	font-size:18px;
	font-weight : bold;
	font-style : italic;
	
	/* add spacing and make the whole row clickable*/
	padding:20px;
	display:block;
}

.item_down .caption p {
	padding:5px 20px;	
	margin:0;
	font-size:13px;
	font-style : italic;
}

.item_down img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}