@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700");
#legenda{
top:20px;
right:20px;
position: absolute;
}
#legenda span.color{
display: block;
float:left;
margin-left:15px;
width: 30px;
height:20px;
}
#legenda .red span.color{
background: rgba(235,39,39,.77);
}
#legenda .yellow span.color{
background: rgba(255, 235, 0, 0.77);
}
#legenda .gray span.color{
background: #ededed;
}
#legenda span.text{
display: block;
float:left;
margin-left:5px;
line-height: 20px;
height:20px;
font-size:13px;
color:white;
font-weight: 300;
}
#calendar{
font-family: 'Lato', sans-serif;
display: block;
width:100%;
transition: all .3s;
background:#7caa74;
text-align: center;
font-size: 0;
position: relative;
clear:both;
}
#calendar.loading{
height:400px;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#calendar.loading table{
display: none !important;
}
.loading:before{
position: absolute;
display: block;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
font-size: 50px;
width:50px;
height:50px;
font-family: FontAwesome;
content:'\f021';
color:white;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-ms-animation-name: spin;
-ms-animation-duration: 1000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: ease-in-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#calendar #calendar_1,
#calendar #calendar_2,
#calendar #calendar_3{
display: inline-block;
vertical-align: top;
width:33%;
}
#calendar #calendar_3{
width:34%;
}
#calendar table{
border-spacing: 0;
width:100%;
border-collapse:collapse;
table-layout: fixed;
box-sizing: border-box;
}
#calendar table.controls{
position: absolute;
}
#calendar td{
vertical-align: middle;
text-align: center;
transition: .3s background;
cursor:pointer;
}
#calendar thead tr.top td{
line-height:20px;
font-size:20px;
color:white;
text-align: center;
padding:10px 0;
text-transform: uppercase;
font-weight: 300;
}
#calendar thead tr.top td.month{
}
#calendar thead tr.top td.left,
#calendar thead tr.top td.right{
display: block;
transition: .3s all;
cursor: pointer;
padding:10px 20px;
}
#calendar thead tr.top td.left{
float:left;
text-align: left;
}
#calendar thead tr.top td.right{
float:right;
text-align: right;
}
#calendar thead tr.top td.left:hover,
#calendar thead tr.top td.right:hover{
background:#507c49;
}
#calendar thead tr.top td.left:before,
#calendar thead tr.top td.right:before{
font-family: FontAwesome;
content:'\f100';
}
#calendar thead tr.top td.right:before{
content:'\f101';
}
#calendar thead tr.header,
#calendar tbody tr td.week{
background:white;
}
#calendar tbody tr td.day,
#calendar tbody tr.disabled td{
background:#ededed;
}
#calendar thead tr.header td,
#calendar tbody tr td{
height:50px !important; font-size:15px;
border:1px solid #dbdbdb;
box-sizing: border-box;
position: relative;
}
#calendar tbody tr td.booked,
#calendar tbody tr td.fbook,
#calendar tbody tr td.lbook,
#calendar tbody tr td.optional,
#calendar tbody tr td.foptional,
#calendar tbody tr td.loptional,
#calendar tbody tr td.selected{
position: relative;
}
#calendar tbody tr td.booked:before,
#calendar tbody tr td.lbook:after,
#calendar tbody tr td.fbook:before{
position:absolute;
bottom:20%;
content:'';
height:60%;
z-index:-1;
background-color:rgba(235,39,39,.77);
}
#calendar tbody tr td.booked + td.fbook:before{
width:100% !important;
left:0;
}
#calendar tbody tr td.optional:before,
#calendar tbody tr td.loptional:after,
#calendar tbody tr td.foptional:before{
position:absolute;
bottom:20%;
content:'';
height:60%;
z-index:-1;
background-color:#5f98b6;
}
#calendar tbody tr td.selected:before,
#calendar tbody tr td.selected.first:before,
#calendar tbody tr td.last:after{
position:absolute;
bottom:20%;
content:'';
height:60%;
z-index:-1;
background-color:rgba(255, 235, 0, 0.77);
}
#calendar tbody tr td.optional:before,
#calendar tbody tr td.booked:before{
width:100% !important;
left:0;
}
#calendar tbody tr td.selected:not(.last):not(.first):before{
width:100%;
left:0;
}
#calendar tbody tr td.fbook:before,
#calendar tbody tr td.foptional:before,
#calendar tbody tr td.selected.first:before{
width:25%;
right:0;
left:auto;
}
#calendar tbody tr td.lbook:after,
#calendar tbody tr td.loptional:after,
#calendar tbody tr td.last:after{
width:75%;
left:0;
}
#calendar tbody tr td{
z-index:2;
}
#booking_form{
display: block;
width:100%;
height:auto;
}
#booking_form label,
#booking_form input,
#booking_form textarea,
#booking_form select{
display: block;
float:left;
height:auto;
line-height:20px;
margin:10px 0;
}
#booking_form textarea{
height:130px;
}
#booking_form label{
clear:left;
font-size:16px;
line-height:22px;
letter-spacing: 0.2px;
color:#ffffff;
font-weight: 300 !important;
width:200px;
}
#booking_form input,
#booking_form textarea,
#booking_form select{
width:calc(100% - 270px);
border:0;
padding:7px 5px;
border-radius:2px;
-webkit-appearance: none;
background:white;
box-sizing: border-box;
}
#booking_form input[type="checkbox"]{
width:20px;
height:20px;
position: relative;
color:#e01f1f;
}
#booking_form input[type="checkbox"]:before {
content: '✔';
position: absolute;
top:0;
left:0;
font-size: 0px;
line-height: 20px;
text-align: center;
width:20px;
transition: all .1s;
color:#e01f1f;
}
#booking_form input[type="checkbox"]:checked:before {
font-size: 15px;
}
#booking_form input.warning,
#booking_form textarea.warning,
#booking_form select.warning{
background: rgba(235, 39, 39, 0.39);
border: 1px solid rgba(255, 0, 0, 0.71);
color: white;
}
#booking_form label.required:after{
display: inline;
vertical-align: top;
content: '*';
color:#db0000;
margin-left:5px;
}
#booking_form input[type="submit"]{
display: block;
width: calc(100% - 70px);
height:50px;
line-height:50px;
padding:0;
cursor:pointer;
margin-top:40px;
font-size: 15px;
font-weight: 300;
transition: all .3s;
background:#5f98b6;
color:white;
z-index:2;
position: relative;
}
#booking_form input[type="submit"]:hover{
background:#2c6c8e;
}
span.error{
display: inline;
width: 100%;
float: none;
clear: both;
height: 20px;
line-height: 20px;
font-size: 13px;
color: #e00000;
font-weight: 300;
}
#message{
display: none;
width:100%;
height:auto;
padding:30px 0;
box-sizing: border-box;
font-size:17px;
color:white;
font-weight: 300;
text-align: center;
}
@media only screen and (max-width: 1000px) {
#booking_form label,
#booking_form input,
#booking_form input[type="submit"],
#booking_form textarea,
#booking_form select{
width:100%;
clear:both;
float:none;
display: block;
}
}
@media only screen and (max-width: 950px) {
#calendar #calendar_1,
#calendar #calendar_2,
#calendar #calendar_3{
width:50%;
}
#calendar #calendar_3{
display: none;
}
}
@media only screen and (max-width: 700px) {
#legenda{
display: none;
}
#calendar #calendar_1,
#calendar #calendar_2,
#calendar #calendar_3{
width:100%;
}
#calendar #calendar_2,
#calendar #calendar_3{
display: none;
}
}