/* 
    Document   : style
    Created on : 25-nov-2013, 9:00:34
    Author     : ROBERTO
    Description:
        Purpose of the stylesheet follows.
*/
@font-face {
    font-family: 'Vollkorn-Bold';
    src: url(../fonts/Vollkorn-Bold.ttf);
}
@font-face {
    font-family: 'Vollkorn';
    src: url(../fonts/Vollkorn-Regular.ttf);
}

html, body{
    margin: 0;
    font-family: Arial;
    background: rgb(230, 230, 230);
}

#bgslide{
    position: fixed;
    top: 0;
    left: 0;
    width: 1417px;
    background: #000;
    z-index: 8;
    box-shadow: 0 0 5px #333;
}

#contenido{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
}

aside{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 330px;
    height: 100%;
    background: rgba(223, 191, 141, 0.9);
    /*-webkit-filter: sepia(0.8);
    -moz-filter: sepia(0.8);*/
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
    box-shadow: 0 0 5px #333;
}

.logo{
    width: 270px;
    margin: 50px auto 50px auto;
}
.menu{
    font-family: 'Vollkorn';
    font-size: 24px;
    width: 280px;
    margin: 50px auto 50px auto;
}
.menu ul li {
    height: 35px;
    list-style: none;
    margin: 7px 0 7px -40px;
}

.menu a,
.menu a:visited{
    height: 35px;
    color: #fff;
    text-decoration: none;
    width: 100%;
    display: inline-block;
    text-shadow: 0 0 10px  #666666;

    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    -ms-transition: all 300ms;
    transition: all 300ms;

}
.menu a:hover{
    text-decoration: none;
    color: rgb(65, 56, 51);
}
.menu a.active{
    color: rgb(65, 56, 51);
}
section a{
    text-decoration: none;
    font-size: 11px;
    color: #666;
}
section a:hover {
    color: #999999;
}
.section1{
    min-height: 900px;
    position: absolute;
    left: 330px;
    width: 230px;
    padding: 50px 30px;
    background: #fff;
    z-index: 8;

    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
    box-shadow: 0 0 5px #333;
}
.section2{
    min-height: 900px;
    position: absolute;
    left: 610px;
    width: 230px;
    padding: 50px 30px;
    background: rgb(230, 230, 230);
    z-index: 7;

    -webkit-animation: fadeInLeft 2s;
    -moz-animation: fadeInLeft 2s;
    animation: fadeInLeft 2s;
    box-shadow: 0 0 5px #333;
}
h3{
    font-family: Arial, Trebuchet MS;
    font-weight: bold;
    font-size: 16px;
    color: #666666;
    text-align: left;
}
h4{
    text-decoration: underline;
    font-family: 'Vollkorn';
    color: rgb(65, 56, 51);
    font-size: 24px;
}
.p1{
    font-size: 11px;
    color: #999999;
    text-align: justify; 
}
.plano{
    background: url(../img/bt_plano1.png);
    height: 24px;
    width: 174px;
    display: inline-block;
}
.plano:hover{
    background: url(../img/bt_plano2.png);
}
.galeria{
    background: url(../img/bt_galeria1.png);
    height: 24px;
    width: 174px;
    display: inline-block;
}
.galeria:hover{
    background: url(../img/bt_galeria2.png);
}
section .ul1{
    margin-left: -40px;
    list-style: none;
    font-size: 11px;
    font-weight: bold;
    color: #999;
}
section .ul2{
    margin-left: -40px;
    list-style: none;
    font-size: 11px;
    color: #999;
}
label{
    font-weight: bold;
    font-size: 12px;
    color: rgb(65, 56, 51);
    cursor: pointer;
}
input,
select{
    margin: 5px 0;
    border-radius: 0.5em;
    border: 1px solid rgb(200, 200, 200);
    height: 20px;
    padding: 2px;
    color: #999;
}
select{
    height: 25px;
}
textarea{
    height: 80px;
    margin: 5px 0;
    border-radius: 0.5em;
    border: 1px solid rgb(200, 200, 200);
    padding: 2px;
    color: #999;
}
input[type="submit"]{
    color: #fff;
    background: rgb(65, 56, 51);
    border-radius: 0.5em;
    border: 0 solid #000;
    font-size: 11px;
    font-weight: bold;
    padding: 3px;
    width: 150px;
    cursor: pointer;
}
input[type="submit"]:hover{
    background: rgb(95, 86, 81);
}

#resultado{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}
#resultado div{
    position: absolute;
    height: 20px;
    width: 450px;
    left: 50%;
    top: 50%;
    margin-top: -10px;
    margin-left: -225px;
    background: #fff;
    border-radius: 0.5em;
    padding: 5px;
    font-weight: bold;
    text-align: center;
}
.precios{
    font-size: 11px;
    color: rgb(95, 86, 81);
    border: 1px solid rgb(95, 86, 81);
    background: #ccc;
    border-radius: 0.3em;
}
.precios th{
    text-align: center;
    color: #333333;
}
.precios td{
    text-align: center;
    border: 1px solid rgb(95, 86, 81);
    background: #fff;
    padding: 2px;
}
.precios tr td:first-child{
    text-align: left;
}
.precios tr td.td1{
    text-align: center;
    font-size: 10px;
}
.precios a,
.precios a:visited{
    color: #333333;
}
.precios a:hover{
    color: #999999;
}
.condiciones ul li{
    margin-top: 20px;
}

.calendar table{
    width: 200px;
    margin: 0 auto 0 auto;
}
.calendar{
    text-align: center;
    width: 250px;
    height: 300px;
    float: left;
}
.calendar h2{
    font-family: 'Vollkorn';
    color: rgb(65, 56, 51);
    font-size: 20px;
}
.reservado a{
    border: 1px solid #333;
    border-radius: 0.3em;
    background: rgb(230, 230, 230);
}
.hoy a{
    color: #fff;
    font-weight: bold;
    background: rgb(115, 106, 101);
    border-radius: 0.3em;
    width: 20px;
    height: 15px;
    display: inline-block;
}
.hoy a:hover{
    color: #fff;
    font-weight: bold;
    background: rgb(145, 136, 131);
    border-radius: 0.3em;
    width: 20px;
    height: 15px;
    display: inline-block;
}
.calendar a{
    padding-top: 3px;
}
.diario a{
    width: 20px;
    height: 15px;
    display: inline-block;
}
.domingo a{
    font-weight: bold;
    background: rgb(190, 190, 190);
    border-radius: 0.3em;
    width: 20px;
    height: 15px;
    display: inline-block;    
}
.sabado a{
    font-weight: bold;
    background: rgb(220, 220, 220);
    border-radius: 0.3em;
    width: 20px;
    height: 15px;
    display: inline-block;    
}
.cuadro{
     float: none; 
     width: 100%; 
     height: auto;
     font-size: 12px;
     text-align: left;
     padding: 0;
}
.cuadro td:first-child{
    text-align: right;
}

.cuadro{
    border: 1px solid #ccc;
    border-radius: 0.3em;
    box-shadow: 0 0 3px #000;
}
.cuadro a{
    text-align: center;
}
/* ---------------------------------- */
/* ------------ RESERVAS --------------------- */
.resultreserva{
    font-weight: bold;
    font-size: 12px;
    display: none;
    color: rgb(65, 56, 51);
    width: 500px;
    text-align: center;
    border-radius: 0.3em;
    box-shadow: 0 0 3px #000;
    padding: 5px;
}

#errorr{
    border: 2px solid #990000;
}

#errorreservados{
    border: 2px solid #ff9933;
}
#errorvacios{
    border: 2px solid #ff9933;
}

#okreservados{
    border: 2px solid #339900;
}

/* ------------------------------------*/
@keyframes fadeInLeft {
    0% {
    opacity: 0;
    transform: translateX(-200px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}
@-webkit-keyframes fadeInLeft {
    0% {
    opacity: 0;
    -webkit-transform: translateX(-200px);
}

100% {
    opacity: 1;
    -webkit-transform: translateX(0);
}
}