/******************************************************************
GENERAL LAYOUT
******************************************************************/
html, body {
    height: auto !important; /* para los browsers buenos */
    height: 100%; /* para IE5+ */
	min-height: 100%; /* para los browsers buenos */
}

body  {
	margin: 0; 
	padding: 0;
	font: 12px Arial, Verdana, Helvetica, sans-serif;
	background: #F0F6F9 url('') repeat; /* azul claro */
	border-top:10px solid #30b0ca; /* azul illusion */
	overflow-x:hidden; /*No horizontal scroll */
	overflow-y:scroll;
}

/*	@font-face {
    	font-family: 'Font Name';
    	src: url('library/fonts/font-name.eot');
    	src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
    	font-weight: normal;
    	font-style: normal;
	}
*/

ol, ul, li {
     list-style: none
}


/******************************************************************
HEADLINES
******************************************************************/
h1, .h1 { font-size: 2.5em; line-height: 1.333em; }
h2, .h2 { font-size: 1.75em; line-height: 1.4em; }

/******************************************************************
LINK STYLES
******************************************************************/

a  { color: #888888; text-decoration:none; cursor:pointer;}
a:visited {}
a:hover, 
a:focus 	{ color: #0099cc; text-decoration:underline; }
a:active {} /* on click */
a:link 	{ -webkit-tap-highlight-color : rgba(0,0,0,0); } /* this highlights links on Iphones / iPads */

/******************************************************************
TEXT SELECTION STYLES
******************************************************************/
::selection { /* Highlighted Text */
	background: #6fc2f6; 
	color:#fff; 
	text-shadow : none; 
}

::-moz-selection {  /* Firefox */
	background: #6fc2f6; 
	color:#fff; 
	text-shadow : none; 
}


/******************************************************************
GRID STYLES      960 Grid System (http://960.gs/ )
******************************************************************/

#container { 
	width: auto !important; 
	width: 920px;
	max-width: 920px;
	margin: auto; 
	padding: 0 auto;
	background: #fff url('') repeat; /*blanco*/
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
} 

/* layout options ( all have margins right & left of 2.1276596%) */
.width60	{ width: 6.3829787% !important;  } /* width 60px  / grid_1  */
.width140 	{ width: 14.893617% !important; } /* width 140px / grid_2  */
.width220 	{ width: 23.404255% !important; } /* width 220px / grid_3  */
.width300 	{ width: 31.914894% !important; } /* width 300px / grid_4  */
.width380 	{ width: 40.425532% !important; } /* width 380px / grid_5  */
.width420 	{ width: 44.625532% !important; } /* width 380px / grid_5  */
.width480 	{ width: 48.936170% !important; } /* width 480px / grid_6  */
.width540 	{ width: 57.446809% !important; } /* width 540px / grid_7  */
.width620	{ width: 65.957447% !important; } /* width 620px / grid_8  */
.width700	{ width: 74.468085% !important; } /* width 700px / grid_9  */
.width780 	{ width: 82.978723% !important; } /* width 780px / grid_10 */
.width860	{ width: 91.489362% !important; } /* width 860px / grid_11 */
.width940 	{ width: 100.0% !important;     } /* width 940px / grid_12 */


/* layout & column defaults */
.width60, .width140, .width220, .width300, .width380, .width420, .width480, .width540, .width620, .width700, .width780, .width860, .width940 { 
	display: inline; 
	position: relative;
	margin-left: 2.0638298%;   /* 10px */ 
	margin-right: 2.0638298%;  /* 10px */
	margin-top: 1.0638298%;   /* 10px */ 
	margin-bottom: 1.0638298%;  /* 10px */
}
	

/******************************************************************
SOCIAL HEADER
******************************************************************/
#social-header { 
	width: 106px; 
	float: right; 
	height: 40px;
	margin-right: 5px;
	border-bottom: solid 1px #dedede;
}
#social-header a { 
	display: block; 
	float: right;
    margin-left: 28px; 
	margin-top: 7px; 
}
#social-header a.first { margin-left: 24px; }


/******************************************************************
JCAROUSEL LITE
******************************************************************/
#container-prev-button { 
	left: 110px;
	top: 145px; /* 30 + 100 + 15 */
}

#container-next-button {
	left: 780px;
	top: 115px; /* 30 + 100 - 15 */
}

#container-prev-button , 
#container-next-button {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;	
}

.carousel-prev-button { cursor:pointer; float:left; }
.carousel-next-button { cursor:pointer; float:right; }

#container-carousel{
	position: relative;
	z-index: 0;
	left: 110px;
	margin: 0 auto 0 0;
	line-height: 0px;
}

.content-slider {
	float:left;
	left: -5000px; 
	visibility:hidden;
}
.content-slider ul 		{ width:700px; height:200px; }
.content-slider ul li 		{ padding:0 px; }
.content-slider ul li img 	{ width:700px; height:200px; }


/******************************************************************
JMENU
******************************************************************/
#menu { 
	position: relative; 
	float: left; 
	display: block;
	margin: -10px auto -10px 110px; 
}

.menuholder {
	width:700px;
	height:50px;
	padding-left: 0px;
}

.menuholder span 	{display: none;}
.menuholder li 		{float:left;} 
.menuholder a {
	background: url('../images/menu-700x50.png') no-repeat;
	display:block; /*Para poder aplicar el ancho y el alto a cada link */
	height:50px; 
	text-indent:-9000%; /*text-indent moverá el texto dentro de los links bien lejos para que no se vean sobre el menú */
}

/* Estado Normal */
.menu_home a 	{width:185px;}
.menu_apps a 	{width:140px; background-position:-185px 0px;}
.menu_about a 	{width:150px; background-position:-325px 0px;}
.menu_contact a 	{width:225px; background-position:-475px 0px;}

/* Estado Rollover */
.menu_home a:hover 		{background-position: 0px -50px; }
.menu_apps a:hover		{background-position:-185px -50px;}
.menu_about a:hover		{background-position:-325px -50px;}
.menu_contact a:hover 	{background-position:-475px -50px;}

/* Estado Activo */
.menu_home a.active 		{background-position: 0px -100px;}
.menu_apps a.active 		{background-position:-185px -100px;}
.menu_about a.active 	{background-position:-325px -100px;}
.menu_contact a.active 	{background-position:-475px -100px;}

.menu_home a:active 		{background-position: 0px -100px;}
.menu_apps a:active 		{background-position:-185px -100px;}
.menu_about a:active 	{background-position:-325px -100px;}
.menu_contact a:active	{background-position:-475px -100px;}


/******************************************************************
BORDER STYLES
******************************************************************/
.border3 {
	border-style: solid;
	border-width: 3px;
	border-color: #f1f1f1; /* gris claro */
	border-radius: 10px; 
	-webkit-border-radius: 10px;  /* Safari  */
	-moz-border-radius: 10px;     /* Firefox */
}

/******************************************************************
AUX
******************************************************************/
.left 		{float:left;}
.right 		{float:right;}
.clear 		{clear:both;}
.first 		{margin-left:0;} /** Si usamos float:left/right, el primer elemento puede llevar esta clase **/
.last 		{margin-right:0;} /** Si usamos float:left/right, el último elemento puede llevar esta clase **/
.invisible 	{visibility:hidden;}
.hidden 		{display:none;}

/* text alignment */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }