@charset "UTF-8";

/* 0. BASE */

	/* 0.1. equivalencia 10px=1em */
	
	html {font-size: 125%;}
	body {font-size: .5em; font-family: Verdana, Geneva, sans-serif;}
	
	
	/* 0.2. RESETEO DE ELEMENTOS */
	
	* { margin:0; padding:0; }
	fieldset, img, acronym, abbr {border:0;}
	img {display: block;}
	ol, ul {list-style:none;}
	li p, li li, li address, li dt, li dd, dd p, dd li, td p, td li, th p, th li, td dt, td dd, th dt, th dd, address p, address li, h1, h2, h3, h4, h5, h6 {font-size: 1em;}
	p, pre, address, li, dt, dd, th, td, caption, legend {font-size: 1em;}
	input, select {font-size:1em; font-family:sans-serif; vertical-align:middle;}
	
	
/* 1. GRID 960 adaptado a EM */

.container {
  margin-left: auto;
  margin-right: auto;
  width: 96em;
  float:none;
}


/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  display: inline;
  float: left;
  margin-left: 1em;
  margin-right: 1em;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15 {
  position: relative;
}

.container .grid_4 {
  width: 22em;
}

.container .grid_8 {
  width: 46em;
}

.container .grid_12 {
  width: 70em;
}

.container .grid_16 {
  width: 94em;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}



/* `Grid y anchos >> 
----------------------------------------------------------------------------------------------------*/

/* Diferencia entre grid y ancho

El grid se está usando para estructuras de divs
El ancho se está usando para componentes

	- Por ej.: Si hacemos un formulario, el div sería el grid y el input o el select el ancho. 
	
La diferencia entre uno y otro es que el grid tiene margin mientras el ancho no.

*/

.ancho_05{
  width: 2em;
}

.container .grid_1, .ancho_1{
  width: 4em;
}

.container .grid_2, .ancho_2{
  width: 10em;
}

.container .grid_3, .ancho_3{
  width: 16em;
}

.ancho_34{width:19em;}

.container .grid_4, .ancho_4{
  width: 22em;
}

.ancho_45{width:25em;}

.container .grid_5, .ancho_5{
  width: 28em;
}

.ancho_56{width:31em;}

.container .grid_6, .ancho_6{
  width: 34em;
}

.ancho_67{width:37em;}

.container .grid_7, .ancho_7{
  width: 40em;
}

.ancho_78{width:43em;}

.container .grid_8, .ancho_8{
  width: 46em;
}

.ancho_89{width:49em;}

.container .grid_9, .ancho_9{
  width: 52em;
}

.ancho_910{width:55em;}

.container .grid_10, .ancho_10{
  width: 58em;
}

.ancho1011{width:61em;}

.container .grid_11, .ancho_11{
  width: 64em;
}

.ancho_1112{width:67em;}

.container .grid_12, .ancho_12{
  width: 70em;
}

.ancho1213{width:73em;}

.container .grid_13, .ancho_13{
  width: 76em;
}

.ancho_1314{width:79em;}

.container .grid_14, .ancho_14{
  width: 82em;
}

.ancho_1415{width:85em}

.container .grid_15, .ancho_15{
  width: 88em;
}

.ancho_16{
  width: 92em;
}

.ancho_100{
	width:100%;	
}


/* `Prefix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container .prefix_4 {
  padding-left: 24em;
}

.container .prefix_8 {
  padding-left: 48em;
}

.container .prefix_12 {
  padding-left: 72em;
}


/* `Prefix Extra Space >> 
----------------------------------------------------------------------------------------------------*/

.container .prefix_1 {
  padding-left: 6em;
}

.container .prefix_2 {
  padding-left: 12em;
}

.container .prefix_3 {
  padding-left: 18em;
}

.container .prefix_5 {
  padding-left: 30em;
}

.container .prefix_6 {
  padding-left: 36em;
}

.container .prefix_7 {
  padding-left: 42em;
}

.container .prefix_9 {
  padding-left: 54em;
}

.container .prefix_10 {
  padding-left: 60em;
}

.container .prefix_11 {
  padding-left: 66em;
}

.container .prefix_13 {
  padding-left: 78em;
}

.container .prefix_14 {
  padding-left: 84em;
}

.container .prefix_15 {
  padding-left: 90em;
}

/* `Suffix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container .suffix_4 {
  padding-right: 24em;
}

.container .suffix_8 {
  padding-right: 48em;
}



/* `Suffix Extra Space >> 
----------------------------------------------------------------------------------------------------*/

.container .suffix_1 {
  padding-right: 6em;
}

.container .suffix_2 {
  padding-right: 12em;
}

.container .suffix_3 {
  padding-right: 18em;
}

.container .suffix_5 {
  padding-right: 30em;
}

.container .suffix_6 {
  padding-right: 36em;
}

.container .suffix_7 {
  padding-right: 42em;
}

.container .suffix_9 {
  padding-right: 54em;
}

.container .suffix_10 {
  padding-right: 60em;
}

.container .suffix_11 {
  padding-right: 66em;
}

.container .suffix_13 {
  padding-right: 78em;
}

.container .suffix_14 {
  padding-right: 84em;
}

.container .suffix_15 {
  padding-right: 90em;
}

/* `Push Space >> Global
----------------------------------------------------------------------------------------------------*/

.container .push_4 {
  left: 24em;
}

.container .push_8 {
  left: 48em;
}


/* `Push Space >> 
----------------------------------------------------------------------------------------------------*/

.container .push_1 {
  left: 6em;
}

.container .push_2 {
  left: 12em;
}

.container .push_3 {
  left: 18em;
}

.container .push_5 {
  left: 30em;
}

.container .push_6 {
  left: 36em;
}

.container .push_7 {
  left: 42em;
}

.container .push_9 {
  left: 54em;
}

.container .push_10 {
  left: 60em;
}

.container .push_11 {
  left: 66em;
}

.container .push_13 {
  left: 78em;
}

.container .push_14 {
  left: 84em;
}

.container .push_15 {
  left: 90em;
}

/* `Pull Space >> Global
----------------------------------------------------------------------------------------------------*/

.container .pull_4 {
  left: -24em;
}

.container .pull_8 {
  left: -48em;
}



/* `Pull Space >> 
----------------------------------------------------------------------------------------------------*/

.container .pull_1 {
  left: -6em;
}

.container .pull_2 {
  left: -12em;
}

.container .pull_3 {
  left: -18em;
}

.container .pull_5 {
  left: -30em;
}

.container .pull_6 {
  left: -36em;
}

.container .pull_7 {
  left: -42em;
}

.container .pull_9 {
  left: -54em;
}

.container .pull_10 {
  left: -60em;
}

.container .pull_11 {
  left: -66em;
}

.container .pull_13 {
  left: -78em;
}

.container .pull_14 {
  left: -84em;
}

.container .pull_15 {
  left: -90em;
}



/* Sistema de columna invertido
----------------------------------------------------------------------------------------------------*/

.columnas_2 .item{
	width: 12em;
}

.columnas_3 .item{
	width: 18em;
}

.columnas_4 .item{
	width: 24em;	
}

.columnas_5 .item{
	width: 30em;
}

.columnas_6 .item{
	width: 36em;	
}

.columnas_1 .item, .columnas_2 .item, .columnas_3 .item, .columnas_4 .item, .columnas_5 .item, .columnas_6 .item{
	clear:none;
	float:left;
	height:auto;
	border:none !important;
	border-bottom:2em solid #fff;
	border-top:2em solid #fff;
}

.columnas_1 .item_clear, .columnas_2 .item_clear, .columnas_3 .item_clear, .columnas_4 .item_clear, .columnas_5 .item_clear, .columnas_6 .item_clear{
	width:100%;
	clear: both;
	float:left;
	height:auto;
	border:none !important;
	border-bottom:2em solid #fff;
	border-top:2em solid #fff;
}



.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}



.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after {
  clear: both;
}

/*.clearfix,
.container {
  zoom: 1;
}*/