/* 
     @ Crear ventanas modales usando solo css y su selector target
     @ author Agustín Baraza (contacto@nosolocss.com)
     @ Copyright 2014 nosolocss.com. All rights reserved
     @ http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
     @ link http://www.nosolocss.com 
	 
*/
/*
<div class="modalbox movedown">   **DESLIZAR**
<div class="modalbox rotate">     **ROTAR**
<div class="modalbox resize">     **REDIMENSIONAR**
*/

.modalmask {
	position: fixed;
	font-family: Arial, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalmask:target {
	opacity:1;
	pointer-events: auto;
}
.modalbox{
	width: 600px;
	position: relative;
	padding: 5px 20px 13px 20px;
	background: #fff;
	border-radius:3px;
	-webkit-transition: all 500ms ease-in;
	-moz-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
}

.movedown {
	margin: 0 auto;
}
.rotate {
	margin: 10% auto;
	-webkit-transform: scale(-5,-5); 
	transform: scale(-5,-5);
}
.resize {
	margin: 10% auto;
	width:0;
	height:0;

}
.modalmask:target .movedown{		
	margin:10% auto;
	font-family: Arial, sans-serif;
	font-size:12px;
	padding:20px;
	font-weight:bold;
	border-radius:3px;
	width:700px;
	height:400px;
}

.modalmask:target .movedown h2 {
	font-family: Arial, sans-serif;
	font-size:14px;
	background: white;
	display: block;
	font-weight: bolder;
	padding: 0.3em 0.7em;
	color:#27285D;
}

.modalmask:target .movedown h1 {
	font-family: Arial, sans-serif;
	font-size:10,5px;
	font-weight: bold;
	display: block;
	margin: 1em 0;
}

.modalmask:target .rotate{		
	transform: rotate(360deg) scale(1,1);
    -webkit-transform: rotate(360deg) scale(1,1);
}

.modalmask:target .resize{
	width:400px;
	height:200px;
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 1px;
	text-align: center;
	top: 1px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	border-radius:3px;
	font-size:16px;
}

.close:hover { 
	background: #FAAC58; 
	color:#222;
}

.marcoAmarillo  {
	padding: 20px 20px; 
    border: 3px solid; 
	border-color:#D5C03D;
    border-radius: 20px; 
}

#tablaSO{
	margin: 0 auto;
	width: 610px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/*Definimos la cabecera o título de la tabla*/
#tablaSO .header-tabla{
	background: #84E657;
	color: black;
	font-size: 16px;
	padding: 10px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/*Definimos la fila*/
#tablaSO .fila{
	background: #eee;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
	/*Todas las filas son blancas, pero con
		este selector podemos intercalar colores
		con gris*/
#tablaSO .fila:nth-child(odd){
	background: #eee;
}
/*Definimos la cabecera de cada columna*/
#tablaSO .cabecera{
	background: #68C73C;
}
/*Definimos las columnas*/
#tablaSO .columna{
	color: black;
	display: inline-block;
	text-align: center;
	width: 197px;
}
/*Definimos las columnas*/
#tablaSO .columnaSmall{
	color: black;
	display: inline-block;
	text-align: center;
	width: 100px;
}

/*Definimos las columnas*/
#contenedorLogin .RegCol{
	color: black;
	display: inline-block;
}

/* FORMA DE LLAMAR LA TABLA
<div id="tablaSO">
	<div class="header-tabla">SO más utilizados en Vida MRR</div>
	<div class="fila cabecera">
		<div class="columna">Sistema Operativo</div>
		<div class="columna">Visitas</div>
		<div class="columna">Porcentaje</div>
	</div>
	<div class="fila">
		<div class="columna">Windows</div>
		<div class="columna">20,000</div>
		<div class="columna">79,58%</div>
	</div>
	<div class="fila">
		<div class="columna">Mac OS X</div>
		<div class="columna">3,000</div>
		<div class="columna">12,50%</div>
	</div>
	<div class="fila">
		<div class="columna">Linux</div>
		<div class="columna">700</div>
		<div class="columna">2,96%</div>
	</div>
	<div class="fila">
		<div class="columna">iOS</div>
		<div class="columna">630</div>
		<div class="columna">2,82%</div>
	</div>
	<div class="fila">
		<div class="columna">Android</div>
		<div class="columna">345</div>
		<div class="columna">1,54%</div>
	</div>
	<div class="fila">
		<div class="columna">Blackberry</div>
		<div class="columna">46</div>
		<div class="columna">0,21%</div>
	</div>
	<div class="fila">
		<div class="columna">Windows Phone</div>
		<div class="columna">26</div>
		<div class="columna">0,12%</div>
	</div>
	<div class="fila">
		<div class="columna">PlayStation 3</div>
		<div class="columna">4</div>
		<div class="columna">0,01%</div>
	</div>
</div>
*/