/*********************************************************
INICIO DE LOS ESTILOS DE FONDO DE LAS FILAS DE LAS TABLAS HTML
*/
.TableRow
{
    background-color: #f7f6f3;
    color: #333333;
    text-align: center;
    font-size: 11px;
}
.TableAlternativeRow
{
    background-color: White;
    color: #284775;
    text-align: center;
    font-size: 11px;
}

/*CREA UN EFECTO DE SOMBRA SOBRE UN TITULO
Ejemplo:
<h2 class="sombraTitulo">ALTUS - SIMULADOR</h2>

#letterpress h1 {
        text-shadow: 0px 1px 1px #4d4d4d;
        color: #222;
        font: 30px 'LeagueGothicRegular';
}

#retro h1 {
        color: #d7ceb2;
        text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
        font: 30px 'BazarMedium';
        letter-spacing: 10px;
}

#embossed h1 {
        text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        color: #9c8468;
        opacity: 0.3;
        font: 30px 'Museo700';
}
*/

.sombraTitulo
{
    font-family: "Trebuchet MS";
    text-align: left;
    color: white;
    text-shadow: black 0.1em 0.1em 0.2em;
    font-size: xx-large;
}


/* CREA EFECTOS DE SOMBRA SOBRE UN DIV
Ejemplo: Se debe poner primero el div, luego una tabla con el mismo tamaño de ancho
<div class="box efecto3" style="width: 1005px; height: 100%; top: 0px; left: 0px;">
    <table width="1005px" height="100%" border="0" cellspacing="0" style="border-right: #cccccc 1px solid;
    border-top: #cccccc 1px solid; border-left: #cccccc 1px solid; border-bottom: #cccccc 1px solid"
    cellpadding="0">
    

    </table>
</div>
*/
.box
{
    width: 500px;
    height: 200px;
    background: #FFF;
    margin: 0px auto;
}
.boxImagen
{
    width: 500px;
    height: 200px;
    background: #FFF;
    margin: 0px auto;
    top: 0px;
}
.box h3
{
    text-align: center;
    position: relative;
    top: 80px;
    font-size: 1em;
}
/* efecto 1 */.efecto1
{
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}
/* efecto 2 */.efecto2
{
    position: relative;
}
.efecto2:before, .efecto2:after
{
    /* Posiciona la sobora por detras del color de la caja*/
    z-index: -1;
    position: absolute; /* no aplico ningun contenidos HTML */
    content: ""; /* posiciona la sombra con respecto al borde inferior, izquierdo y superior */
    bottom: 15px;
    left: 10px;
    top: 80%; /* configura el ancho */
    width: 50%; /* color de fondo */
    background: #777; /* definicion de la sombra estandar para box-shadow */
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777; /* rotacion de la sombra */
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.efecto2:after
{
    /* rotacion de la sombra */
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg); /* posiciona la sombra con respecto al borde izquierdo y derecho */
    right: 10px;
    left: auto;
}
/* efecto 3 */.efecto3
{
    position: relative;
    -webkit-box-shadow: 0 0px 4px #777, 0 0 20px #CCC inset;
    -moz-box-shadow: 0 0px 4px #777, 0 0 20px #CCC inset;
    box-shadow: 0 0px 4px #777, 0 0 20px #CCC inset;
}
.efecto3:before, .efecto3:after
{
    /* no aplica contenidos */
    content: "";
    position: absolute; /* posiciona la sombra por detras de la caja */
    z-index: -1; /* aplica una sombra centrada con un gris oscuro y 20px de difuminado */
    -webkit-box-shadow: 0 0 20px #777;
    -moz-box-shadow: 0 0 20px #777;
    box-shadow: 0 0 20px #777; /* centra verticalmente y separa la sombra de los bordes izquierdo y derecho */
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px; /* redondea las esquinas de la sombra */
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}


/*********************************************************/
/*INICIO DE LOS ESTILOS DE LOS BOTONES
Ejemplo: 
class="cssButton"
*/
.cssButton {        
    -moz-box-shadow:inset 0px 1px 0px 0px #5795ba;
    -webkit-box-shadow:inset 0px 1px 0px 0px #5795ba;

    box-shadow: 1px 1px 5px #CCC;
    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5795ba), color-stop(1, #5795ba));
    background:-moz-linear-gradient(top, #5795ba 5%, #5795ba 100%);
    background:-webkit-linear-gradient(top, #5795ba 5%, #5795ba 100%);
    background:-o-linear-gradient(top, #5795ba 5%, #5795ba 100%);
    background:-ms-linear-gradient(top, #5795ba 5%, #5795ba 100%);
    background:linear-gradient(to bottom, #5795ba 5%, #5795ba 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5795ba', endColorstr='#5795ba',GradientType=0);
    
    background-color:#5795ba;
    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    
    border:1px solid #5795ba;
    
    display:inline-block;
    color:#ffffff;
    
    font-family: Tahoma;
    font-size:13px;
    
    font-weight:normal;
    
    text-decoration:none;
    
    text-shadow:0px 1px 2px #5795ba;        
    
    cursor:hand;
	cursor:pointer;
	
    height:24px; 
}
        
.cssButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5a99bf), color-stop(1, #5a99bf));
    background:-moz-linear-gradient(top, #5a99bf 5%, #5a99bf 100%);
    background:-webkit-linear-gradient(top, #5a99bf 5%, #5a99bf 100%);
    background:-o-linear-gradient(top, #5a99bf 5%, #5a99bf 100%);
    background:-ms-linear-gradient(top, #5a99bf 5%, #5a99bf 100%);
    background:linear-gradient(to bottom, #5a99bf 5%, #5a99bf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a99bf', endColorstr='#5a99bf',GradientType=0);
    
    background-color:#5a99bf;
}
.cssButton:active {
    position:relative;
    top:1px;
    background-color: #5795ba;
}

.cssButton:disabled    
{
    -moz-box-shadow:inset 0px 1px 0px 0px #a9a9a9;
    -webkit-box-shadow:inset 0px 1px 0px 0px #a9a9a9;

    box-shadow: 1px 1px 5px #CCC;
    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a9a9a9), color-stop(1, #a9a9a9));
    background:-moz-linear-gradient(top, #a9a9a9 5%, #a9a9a9 100%);
    background:-webkit-linear-gradient(top, #a9a9a9 5%, #a9a9a9 100%);
    background:-o-linear-gradient(top, #a9a9a9 5%, #a9a9a9 100%);
    background:-ms-linear-gradient(top, #a9a9a9 5%, #a9a9a9 100%);
    background:linear-gradient(to bottom, #a9a9a9 5%, #a9a9a9 100%);     
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#a9a9a9',GradientType=0);
    
    background-color: #eaeaea;
    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    
    border:1px solid #a9a9a9;
    
    display:inline-block;
    color:#ffffff;
    
    font-family: Tahoma;
    font-size:13px;
    
    font-weight:normal;
    
    text-decoration:none;
    
    text-shadow:0px 1px 2px #a9a9a9;        
    
    cursor: hand;
    cursor:pointer;
	pointer-events: none;
	
    height:24px; 
}


/*
Ejemplo: 
class="button blue square"
class="button green square"
class="button red square"
class="button orange square"
class="button purple square"
class="button yellow square"
class="button gray square"
*/

/* General 
font-family: "Myriad Pro", Arial, Tahoma, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
text-shadow: -1px -1px rgba(0,0,0,0.1), 0 0 15px rgba(255,255,255,0.75);
*/
.button {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	
	-moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.2);
	
	border: 1px solid;
	padding: 6px 16px;
	
	color: #fff;
	
	
	white-space: nowrap;
	
	background: #777;
	border-color: #777;
	
	text-decoration: none;
	font-style: normal;
	text-transform: none;
	
	position: relative;
	
}

.button:hover,
.button:focus {
	bottom: 1px;

	-moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 3px 2px rgba(0,0,0,0.2);
	
	background: #999;
	border-color: #999; /* Default color */
	cursor:hand;
	cursor:pointer;
}

.button:active {
	top: 1px;

	-moz-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: inset 0 -1px 3px rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.2);
}

/* Shape */

.default {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.square {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.bubble {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}


/* Colors */

.blue {
	background: #166ba9;
	border-color: #166ba9;
    top: -8px;
    left: -7px;
}
.blue:hover,
.blue:focus {
	background: #3390CF;
	border-color: #3390CF;
}

.red {
	background: #D81204;
	border-color: #D81204;
}
.red:hover,
.red:focus {
	background: #FF2F1F;
	border-color: #FF2F1F;
}

.green {
	background: #95A006;
	border-color: #95A006;
}
.green:hover,
.green:focus {
	background: #B2BF17;
	border-color: #B2BF17; 
}

.yellow {
	background: #FFAF09;
	border-color: #FFAF09;
}
.yellow:hover,
.yellow:focus {
	background: #FFCF09;
	border-color: #FFCF09;
}

.purple {
	background: #9F1D78;
	border-color: #9F1D78;
}
.purple:hover,
.purple:focus {
	background: #CF33A0;
	border-color: #CF33A0;
}

.orange {
	background: #FF5F09;
	border-color: #FF5F09;
}
.orange:hover,
.orange:focus {
	background: #FF7F09;
	border-color: #FF7F09;
}

.gray {
	background: #777;
	border-color: #777;
}
.gray:hover,
.gray:focus {
	background: #999;
	border-color: #999;
}: #999;
	border-color: #999;

/*FIN DE LOS ESTILOS DE LOS BOTONES*/