/* 
    Document   : style
    Created on : Feb 18, 2013, 8:25:28 PM
    Author     : Micke
    Description:
        Purpose of the stylesheet follows.
*/

body{
    max-width: 100%;
    width: 100%;
    margin: 0 auto 0 auto;
    background-image: url("../Resources/backgroundPtrn.png");
    background-attachment: fixed;
}
h1{
    color: #5f5c5c;
    text-align: center;
}
h2{
    color: #827d7d;
    text-align: center;
}
#main{
    margin:20px 20px 20px 20px;
    background-color: #FDFDFD;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0px 0px 15px 5px #fff;
    font-family: "Century Gothic","Helvetica","Arial", "sans serif";
    font-size: 14px;
    color:#616161;
}
#header{
    height: 200px;
    position: relative;
}
#content{
    position: relative;
    margin: 5% auto 1% auto;
    padding:10px;
}
#footer{
    font-size: 10px;
    text-align:center;
    clear: both;
}
a{
    text-decoration: none;
    color:black;
    font-weight: bold;
}
a:hover{
    color: limegreen;
}
.centrado{
    margin: 0 auto 0 auto;
    text-align: center;
}
#controlPanelMenu{
    margin: 0 auto 0 auto;
    text-align: center;
}
#controlPanelMenu img{
    width: 70px;
    height: 70px;
    /*box-shadow: 0px 5px 15px 2px #000;*/
    cursor: pointer;
    margin-left: 20px;
    border:0;
}
#controlPanelMenu img:hover{
    box-shadow: 0px 3px 7px 1px #555;
}

.absoluteCenter{
    width: 90%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

#insetBgd {
    height: 200px;
    background: -moz-linear-gradient(-90deg,#363030,#ffffff);
    background: -webkit-gradient(linear, left top, left bottom, from(#363030), to(#ffffff));
}

h1.insetType {
    font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
    font-size: 70px;
    color: #021e5e;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
.mainText h1{
 font:normal 50pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}

.mainText p{
 font:normal 30pt Arial;
 color:#FFFFFF;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}
/*/////////////////////////////////////////////////////////////////////////////////////*/


.formularioRegistro input, .formularioRegistro select, .formularioRegistro textarea{
    display: block;
    margin-bottom: 10px;
    padding: 9px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 350px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

.formularioRegistro input:hover, .formularioRegistro textarea:hover,
.formularioRegistro input:focus, .formularioRegistro textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.formularioRegistro label { 
    margin-left: 10px; 
    color: #999999; 
}

.botonEstileado{
    width: auto;
    padding: 9px 10px;
    background: #415e14;
    border: 0;
    font-size: 25px;
    color: #FFFFFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////aqui hay codigo recopilado para diferentes partes del sitio ya hechas (Reutilizacion)///////*/
/*/////////////////////////////////////tabla de informacion de los vehiculos//////////////////////////*/
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;  
}

.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    

.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;    
}

.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;        
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}

.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}

.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
#listadoCatalizadores td{
    cursor:pointer;
}
/*/////////////////////////////////////////////CATALOGO DE CATALIZADORES/////////////////////////////////*/

#consultaCatalizador{
    font-size: large;
}
#consultaCatalizador th{
    text-align:right;
    padding:20px;
    width:20%;
    color:gray;
    /*border-style: solid;
    border-width: 2px;*/
}
#consultaCatalizador td{
    padding:10px;
    color:black !important;
    font-size: x-large;
    /*border-style: solid;*/
}
.catContainer div{
    height:500px;
    overflow:auto;
}
@media screen and (min-width: 300px) {
    .catContainer{
        width:80%;
        margin: 0 auto 0 auto;
        padding:10px;
    }  
}
@media screen and (min-width: 700px) {
    .catContainer{
        width:45%;
        overflow:auto;
        padding:10px;
    }
    .left{float:left;}
    .right{float:right;}
}

/*/////////////////////////////////////////////////////////////MENU PRINCIPAL////////////////////*/
#navigation{
    width: 100%;
    background-color: #002374;
}
#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#navigation li {
    float: left;
}

#navigation a:link,#navigation a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #002374;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

#navigation a:hover, #navigation a:active {
    background-color: #5b71a2;
}
/*//////////////////////////////////////////////////login form//////////////////////////////////////////////////
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);*/

/*******************
BODY STYLING
*******************/

#contenedorFormularioLogin {
    /* Center wrapper perfectly */
    width: 300px;
    height: 400px;
    margin: 20px auto;
}

/*******************
LOGIN FORM
*******************/

.login-form {
    width: 300px;
    margin: 0 auto;
    position: relative;
    background: #f3f3f3;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/*******************
HEADER
*******************/

.login-form .header {
    padding: 20px 15px 20px 20px;
    text-align: center;
}

.login-form .header h1 {
    font-family: 'Bree Serif', serif;
    font-weight: 300;
    font-size: 28px;
    line-height:34px;
    color: #414848;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
    margin-bottom: 10px;
}

.login-form .header span {
    font-size: 11px;
    line-height: 16px;
    color: #678889;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}

/*******************
CONTENT
*******************/

.login-form .content {
    padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .content .input {
    width: 188px;
    padding: 15px 25px;
    position:relative;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #9d9e9e;
    text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

    background: #fff;
    border: 1px solid #fff;
    border-radius: 5px;

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
    margin-top: 25px;
}

.login-form .content .input:hover {
    background: #dfe9ec;
    color: #414848;
}

.login-form .content .input:focus {
    background: #dfe9ec;
    color: #414848;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.content input:focus + div{
    left: -46px;
}

/* Animation */
.input, .button{
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}

/*******************
FOOTER
*******************/

.login-form .footer {
    padding: 25px 30px 40px 30px;
    overflow: auto;
    text-align: center;
    background: #d4dedf;
    border-top: 1px solid #fff;

    box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

/* Login button */
.login-form .footer .button {
    padding: 11px 25px;

    font-family: 'Bree Serif', serif;
    font-weight: 300;
    font-size: 18px;
    color: #fff;
    text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

    background: #56c2e1;
    border: 1px solid #46b3d3;
    border-radius: 5px;
    cursor: pointer;

    box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
    -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form .footer .button:hover {
    background: #3f9db8;
    border: 1px solid rgba(256,256,256,0.75);

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

.login-form .footer .button:focus {
    position: relative;
    bottom: -1px;

    background: #56c2e1;

    box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
    -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
    -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/*///////////////////Estilos del slideshow////////////////////////////////*/
.callbacks_container h3 {
    font: 20px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    color: #fff;
}

.slideShow {
    margin:0 auto 0 auto;
    position: relative;
    width: 80%;
    box-shadow: 0px 5px 15px 2px #000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.callbacks {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.callbacks li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.callbacks img {
    display: block;
    position: relative;
    z-index: 1;
    height: auto;
    width: 100%;
    height: 350px;
    border: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.callbacks .caption {
    display: block;
    position: absolute;
    z-index: 2;
    font-size: 15px;
    font-weight: bold;
    text-shadow: none;
    color: #fff;
    background: #000;
    background: rgba(0,0,0, .8);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 20px;
    margin: 0;
    max-width: none;
}

.callbacks_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 52%;
    left: 0;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("../images/site/themes.gif") no-repeat left top;
    margin-top: -45px;
}

.callbacks_nav:active {
    opacity: 1.0;
}

.callbacks_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
}

@media screen and (max-width: 600px) {
    h1 {
        font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .callbacks_nav {
        top: 47%;
    }
}