@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);


/* Attention, do not edit this file directly, please use the stylesheet editor in admin.
Any changes made here will be overwritten*/

* {
box-sizing:border-box;
}
html, body.body, #body_content {
width:100%;
height:100%;
}
html {
background-color:#00a0c4;
}
body.body {
font-size:16px;
padding-top:40px;
font-family:'Open Sans', sans-serif;;
background-color:#fff;
position:absolute;
left:0px;
top:0px;
transition:all 0.2s ease;
}
#interupter {
width:100%;
height:100%;
top:0px;
left:0px;
z-index:5000;
padding-top:5%;
position:fixed;
background-color:rgba(0,0,0,.8);
}
p {
font-size:1.1em;
line-height:1.5em;
margin:0 0 10px 0;
}
h1 {
font-size:2.4em;
margin:10px 0;
font-weight:normal;
}
h2 {
font-size:2.1em;
margin:10px 0;
font-weight:400;
}
h3 {
font-size:1.8em;
margin:10px 0;
font-weight:400;
}
h4 {
font-size:1.4em;
margin:10px 0;
font-weight:400;
}
h5 {
margin:10px 0px;
}
a {
text-decoration:none;
}
img {
max-width:100%;
height:auto;
}
#login_form {
width:100%;
max-width:390px;
padding:15px;
margin:5% auto;
text-align:center;
}
#login_form input {
height:30px;
padding:5px;
width:90%;
text-align:center;
margin-bottom:10px;
font-size:.9em;
}
#login_form input[type="button"] {
height:auto;
color:#fff;
font-size:20px;
background-color:#00a0c4;
border:none;
border-radius:5px;
cursor:pointer;
}
#login_form input[type="button"]:hover {
transition:ease all .5s;
background-color:#017394;
}
#logo {
width:auto;
height:auto;
max-height:100%;
padding:3px 0px;
position:absolute;
display:block;
top:0px;
right:100px;
}
#sign_out {
position:absolute;
right:0px;
top:0px;
display:block;
padding:10px 15px;
color:#fff;
font-size:16px;
line-height:20px;
}
#nav {
position:absolute;
top:0px;
left:0px;
width:100%;
height:40px;
background:linear-gradient(#00a0c4,#017394);
text-align:left;
z-index:10;
}
#mobile_menu_icon {
background-image:url(mobile-menu-icon.png);
background-repeat:no-repeat;
background-size:85%;
background-position:center;
width:45px;
height:40px;
position:absolute;
top:0px;
right:15px;
display:none;
}
#nav ul {
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
#nav ul li {
display:inline-block;
}
#nav ul li a {
display:block;
padding:10px 15px;
color:#fff;
font-size:16px;
line-height:20px;
}
#nav ul li a.active, #nav ul li a:hover, #sign_out:hover {
transition:ease all .5s;
background:#017394;
}
.fa-spinner {
color:#00a0c4;
display:inline-block;
margin:20px 0px;
}
.content {
display:none;
position:relative;
width:100%;
height:100%;
text-align:left;
}
.content.active {
display:block;
}
.left_content, .right_content {
position:absolute;
top:0px;
left:0px;
width:33.33333333%;
height:100%;
overflow:auto;
background-color:#f7f7f7;
padding:0px 15px 30px;
}
.right_content {
left:auto;
right:0px;
width:66.66666667%;
background-color:#fff;
}
.full_content {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
padding:0 15px 30px;
background-color:#fff;
}
table.list tbody tr:nth-child(even) {
background-color:#efefef;
}
#boat_filter_form ul {
list-style:none;
padding-left:20px;
margin-top:0px;
}
#calendar_display {
border:2px solid #ccc;
padding:5px;
text-align:center;
margin:10px 0px;
}
.calendar_nav {
font-weight:700;
color:#00a0c4;
}
.calendar_nav a {
display:inline-block;
padding:2px;
font-size:15px;
color:#00a0c4;
}
.calendar_nav a.prev_month {
float:left;
}
.calendar_nav a.next_month {
float:right;
}
table#reservation_calendar th, table#reservation_calendar td {
width:14%;
padding:0px 5px;
}
table#reservation_calendar th {
text-align:left;
color:#00a0c4;
}
table#reservation_calendar td {
box-shadow:inset 0px 0px 1px 1px #888;
color:#000;
text-align:right;
background-color:#fff;
height:30px;
}
table#reservation_calendar th.weekend, table#reservation_calendar td.weekend {
width:15%;
}
table#reservation_calendar td.outmonth {
color:#bbb;
background-color:#f7f7f7;
}
table#reservation_calendar td.clickable {
background:url('images/stripe_clickable.png');
cursor:pointer;
}
table#reservation_calendar td.clickable.available {
background:rgba(0,160,196,.3);
}
table#reservation_calendar td.selected {
box-shadow:inset 0px 0px 0px 4px #ff9600;
}
#create_content .available_boat {
padding:15px;
border-radius:15px;
margin-bottom:10px;
background-color:#efefef;
}
#create_content .available_boat .boat_images {
display:inline-block;
vertical-align:top;
max-width:265px;
padding-right:15px;
width:30%;
text-align:center;
}
#create_content .available_boat .boat_images img.boat_img {
border-radius:10px;
box-shadow:0px 0px 5px #888;
margin:0px auto;
display:block;
}
#create_content .available_boat .boat_images img.more_info {
padding-top:10px;
}
#create_content .available_boat .boat_info {
display:inline-block;
vertical-align:top;
text-align:left;
max-width:70%;
}
#create_content .available_boat .boat_info h4 {
color:#ff9600;
margin:0;
line-height:1em;
}
#create_content .available_boat .boat_info table {
margin-top:10px;
}
#create_content .available_boat .boat_info td.feature {
font-weight:700;
padding-right:10px;
}
#create_content .available_boat .boat_info .boat_description {
margin-top:15px;
}
#create_content .available_boat .boat_info .boat_description p {
margin:0px;
}
#create_content .available_boat .more_info {
display:none;
}
#create_content .available_boat a {
color:#017394;
text-decoration:none;
font-style:italic;
}
.boat_availability button {
font-size:18px;
padding:5px 10px;
border-radius:8px;
display:inline-block;
margin:10px 10px 0px 0px;
}
.boat_availability button:focus {
outline:none;
}
.boat_availability button.is_available {
cursor:pointer;
background:linear-gradient(#00a0c4,#017394);
color:#fff;
border:1px solid #017394;
outline:none;
transition:all 0.5s ease;
}
.boat_availability button.is_available:hover {
background:linear-gradient(#017394,#017394);
}
.boat_availability button.is_available.selected {
background:#00de00;
border-color:#00de00;
}
.boat_availability button.not_available {
background:#6c6c6c;
border:1px solid #6c6c6c;
color:#c0c0c0;
cursor:not-allowed;
}
#create_content .available_boat .reservation {
text-align:center;
}
#create_content .available_boat .reservation form {
display:inline-block;
text-align:center;
margin:30px 0px 0px;
background-color:#fff;
box-shadow:0px 0px 1px 1px #888;
padding:10px;
}
#create_content .available_boat .reservation form table {
text-align:left;
}
#create_content .available_boat .reservation td.feature {
padding-right:10px;
font-weight:700;
vertical-align:top;
}
#create_content .available_boat .reservation td input, #create_content .available_boat .reservation td select {
width:200px;
height:30px;
padding:5px;
font-size:1.1em;
}
#create_content .available_boat .reservation td input[disabled="disabled"], #create_content .available_boat .reservation td select[disabled="disabled"] {
border:none;
background:transparent;
box-shadow:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
}
#create_content .available_boat .reservation td input {
border:1px solid #999;
}
#create_content .available_boat .reservation #confirm_reservation {
font-size:20px;
padding:10px 25px;
color:#fff;
background:linear-gradient(#ff9600,#e48700);
border:1px solid #ff9600;
border-radius:8px;
width:230px;
text-align:center;
margin:15px auto;
display:block;
cursor:pointer;
}
#create_content .available_boat .reservation #confirm_reservation:hover {
background:linear-gradient(#ff9600,#ff9600);
}
#reservation_form a {
color:#ff9600;
font-style:italic;
display:inline-block;
}
#reservation_form a:hover {
color:#c57400;
}
#create_content .available_boat .reservation form h4 {
color:#00de00;
}
#reservations_list, #waitlisted_boats {
border:2px solid #017394;
margin-top:15px;
margin-bottom:30px;
}
#reservations_list thead, #waitlisted_boats thead {
color:#fff;
background-color:#017394;
}
#reservations_list td, #waitlisted_boats td {
padding:5px 3px;
vertical-align:middle;
}
#reservations_list td label, #waitlisted_boats td label {
display:none;
font-weight:700;
}
#reservations_list td span.status_Canceled {
color:#ff0000;
}
#reservations_list td span.status_Active {
color:#00de00;
}
#my_reservations_filter label {
margin-left:15px;
vertical-align:top;
display:inline-block;
padding:5px;
border:1px solid #ccc;
background-color:#efefef;
}
#my_reservations_filter label * {
vertical-align:middle;
}
#my_reservations_filter label input[type='checkbox'] {
margin:-2px 1px 0 0;
}
input[type="button"].mobile_view_toggle {
color:#fff;
background:linear-gradient(#00a0c4,#017394);
border:1px solid #00a0c4;
padding:10px;
font-size:18px;
border-radius:8px;
cursor:pointer;
margin-top:10px;
display:none;
}
input[type="button"].mobile_view_toggle:hover {
background:linear-gradient(#00a0c4,#00a0c4);
}
input[type="button"].mobile_view_toggle:focus {
outline:none;
}
#boat_filter_form span.warning {
color:red;
display:block;
}
select,  textarea,  input {
font-size:16px !important;
}
button.cancel_active_reservation, button.cancel_waitlist {
color:#fff;
background:linear-gradient(#ff0000,#9e0000);
border-radius:5px;
font-size:13px;
border:none;
cursor:pointer;
}
button.cancel_active_reservation:hover, button.cancel_waitlist:hover {
background:linear-gradient(#ff0000,#ff0000);
transition:all 0.5s ease;
}
.cal_key {
font-size:14px;
margin-bottom:0;
padding:0 7px;
line-height:1em;
font-style:italic;
display:inline-block;
width:50%;
}
.cal_key #boats_available {
display:inline-block;
width:28%;
height:30px;
vertical-align:middle;
background-color:#aedee8;
box-shadow:inset 0px 0px 1px 1px #888;
}
.member_comment {
padding:10px;
background:#efefef;
border:1px solid #ccc;
}
.member_comment h5 {
font-size:1.3em;
color:#ff0000;
text-align:center;
}
#member_content table td.feature {
font-weight:700;
padding-right:15px;
}
a#update_user_info {
padding:10px 15px;
color:#fff;
background:linear-gradient(#00a0c4,#017394);
display:inline-block;
border-radius:8px;
font-size:1.1em;
}
a#update_user_info:hover {
background:linear-gradient(#00a0c4,#00a0c4);
text-decoration:none;
}
.waitlist_form {
background-color:#fff;
box-shadow:0px 0px 1px 1px #888;
padding:10px 35px;
margin:10px 0 0;
max-width:300px;
display:block;
text-align:left;
}
.waitlist_form input[type="button"] {
display:block;
background:linear-gradient(#ff9600,#e48700);
color:#fff;
padding:10px 5px;
text-align:center;
border-radius:8px;
font-size:20px;
border:1px solid #ff9600;
max-width:230px;
width:100%;
margin:10px auto 0;
cursor:pointer;
}
.waitlist_form input[type="button"]:hover {
background:linear-gradient(#ff9600,#ff9600);
transition:all 0.5s ease;
}
#waiting_list_reservation div.inner {
border:1px solid #9dffa5;
background:#e0fdde;
border-radius:15px;
padding:15px;
margin:10px 0;
}
#wl_action input[type="button"] {
color:#fff;
padding:5px 10px;
background:linear-gradient(#00a0c4,#017394);
border:1px solid #00a0c4;
border-radius:6px;
cursor:pointer;
}
#wl_action input[type="button"]:hover {
background:linear-gradient(#00a0c4,#00a0c4);
}
.cal_key #waitlist_available {
display:inline-block;
width:28%;
height:30px;
vertical-align:middle;
background-image:url('images/stripe_clickable.png');
box-shadow:inset 0px 0px 1px 1px #888;
}
.reservation_limit p {
font-size:1em;
font-style:italic;
}
.reservation_limit h5 {
font-size:1em;
margin-bottom:0;
line-height:1em;
}
.reservation_limit ul {
margin-top:0;
list-style:none;
padding-left:20px;
}
.reservation_limit ul li span.block {
text-transform:uppercase;
}
.reservation_limit ul li span.status {
color:red;
}
.reservation_limit ul li span.status .fa {
color:#00de00;
}
.boat_availability a {
display:inline-block;
vertical-align:top;
margin:10px 10px 0px 0px;
}
#menu_hault {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,.8);
display:none;
}
.mobile-active #menu_hault {
display:block;
}

@media (min-width: 1200px) {
.calendar_nav a:hover {
background:#00a0c4;
color:#fff;
}
table#reservation_calendar td.clickable:hover {
background:#ff9600;
color:#fff;
}

}

@media (min-width: 980px) and (max-width: 1199px) {
body.body {
font-size:15px;
}
.left_content, .right_content {
width:39.8%;
padding:0 10px 30px;
}
.right_content {
width:60.2%;
}
#calendar_display {
padding:2px;
}
.calendar_nav a:hover {
background:#00a0c4;
color:#fff;
}
table#reservation_calendar td.clickable:hover {
background:#ff9600;
color:#fff;
}
#create_content .available_boat {
padding:10px;
border-radius:10px;
}
#create_content .available_boat .boat_images {
padding-right:10px;
width:35%;
}
#create_content .available_boat .boat_info {
max-width:65%;
}
#create_content .available_boat .boat_info table {
width:100%;
}
#create_content .available_boat .boat_info td.feature {
width:35%;
}
.boat_availability button {
font-size:17px;
padding:5px;
margin:10px 5px 0 0;
}
#create_content .available_boat .reservation form {
margin:10px 0 0;
}
.cal_key {
padding:4px;
}

}

@media (min-width: 768px) and (max-width: 979px) {
body.body {
font-size:16px;
}
#logo {
right:85px;
}
#sign_out {
padding:10px;
}
#nav ul li a {
padding:10px;
}
.left_content, .right_content {
width:100%;
padding:0 15px 30px;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
.right_content {
width:100%;
display:none;
}
.full_content {
padding:0 10px 30px;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
#calendar_display {
padding:2px;
}
.calendar_nav a:hover {
background:#00a0c4;
color:#fff;
}
table#reservation_calendar td.clickable:hover {
background:#ff9600;
color:#fff;
}
#create_content .available_boat {
padding:10px;
border-radius:10px;
}
#create_content .available_boat .boat_images {
padding-right:10px;
}
#create_content .available_boat .reservation form {
margin:10px 0 0;
}
#reservations_list thead, #waitlisted_boats thead {
display:none;
}
#reservations_list tr, #waitlisted_boats tr {
display:block;
padding:10px;
}
#reservations_list td, #waitlisted_boats td {
padding:0 1% 0 0;
display:inline-block;
margin:0 0 5px;
width:48%;
}
#reservations_list td label, #waitlisted_boats td label {
display:inline;
}
input[type="button"].mobile_view_toggle {
display:inline-block;
}
.cal_key {
padding:4px;
}

}

@media (max-width: 767px) {
body.body {
font-size:14px;
}
body.body.mobile-active {
left:-80%;
}
#logo {
right:auto;
left:10px;
}
#mobile_menu_icon {
display:block;
}
#nav ul {
padding:40px 0 0;
display:block !important;
width:80%;
position:fixed;
top:0px;
left:100%;
background-color:#00a0c4;
transition:all 0.2s ease;
height:100%;
z-index:-1;
}
.mobile-active #nav ul {
left:20%;
}
#nav ul li {
display:block;
border-bottom:1px solid #0090b3;
position:static;
}
#nav ul li a {
display:block;
padding:10px 15px;
position:static;
}
#nav ul li a.active, #nav ul li a:hover, #sign_out:hover {
background:#0090b3;
}
.left_content, .right_content {
width:100%;
padding:0 10px 30px;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
.right_content {
width:100%;
display:none;
}
.full_content {
padding:0 10px 30px;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
#calendar_display {
padding:2px;
}
#create_content .available_boat {
padding:10px 5px;
border-radius:10px;
}
#create_content .available_boat .boat_images {
padding-right:5px;
width:40%;
}
#create_content .available_boat .boat_info {
max-width:60%;
}
#create_content .available_boat .boat_info table {
width:100%;
}
#create_content .available_boat .boat_info td.feature {
width:35%;
}
.boat_availability button {
font-size:14px;
padding:4px;
border-radius:5px;
margin:10px 0 0;
border:none;
}
.boat_availability button.is_available {
border:none;
}
.boat_availability button.is_available.selected {
border:none;
}
.boat_availability button.not_available {
border:none;
}
#create_content .available_boat .reservation form {
margin:10px 0 0;
}
#reservations_list thead, #waitlisted_boats thead {
display:none;
}
#reservations_list tr, #waitlisted_boats tr {
display:block;
padding:10px;
}
#reservations_list td, #waitlisted_boats td {
padding:0;
display:block;
margin:0 0 5px;
}
#reservations_list td label, #waitlisted_boats td label {
display:inline;
}
#my_reservations_filter {
background-color:#efefef;
border:1px solid #ccc;
}
#my_reservations_filter label {
display:block;
border:none;
background-color:transparent;
}
input[type="button"].mobile_view_toggle {
display:inline-block;
}
.cal_key {
padding:4px;
}

}

@media (max-width: 480px) {
table#reservation_calendar th {
font-size:13px;
}
#create_content .available_boat .boat_images {
display:block;
padding-right:0;
width:100%;
margin:0 auto;
}
#create_content .available_boat .boat_info {
display:block;
max-width:100%;
}
#create_content .available_boat .boat_info h4 {
margin:10px 0 0;
}
#create_content .available_boat .boat_info td.feature {
padding-right:5px;
width:auto;
}
.boat_availability {
text-align:center;
}
.boat_availability button {
padding:6px;
}
#create_content .available_boat .reservation form {
padding:10px 5px;
}
#create_content .available_boat .reservation form table {
width:100%;
}
#create_content .available_boat .reservation form table tr {
display:block;
margin-bottom:5px;
}
#create_content .available_boat .reservation form table td {
display:block;
width:100%;
padding:1px 0px;
}
#create_content .available_boat .reservation td.feature {
padding-right:0;
}
#create_content .available_boat .reservation td input, #create_content .available_boat .reservation td select {
width:100%;
}

}