body { font-family: Arial, sans-serif; } .search-box { background-color: #ffcc66; padding: 15px; width: 550px; /* Adjusted width for rectangle size */ height: 300px; /* Adjusted width for rectangle size */ border-radius: 5px; /* Slightly rounded corners */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */ margin: 0 auto; /* Center the box */ display: flex; flex-direction: column; justify-content: space-between; /* Distribute space between items */ } .search-box h2 { font-size: 16px; /* Adjust the heading font size */ color: #333; /* Adjust the heading text color */ margin-top: 0; margin-bottom: 20px; /* Space between heading and form */ text-align: Left; /* left the heading text */ } .search-box label { font-size: 12px; /* Adjust the label font size */ color: #333; /* Adjust the label text color */ margin-right: 5px; display: block; margin-bottom: 5px; } .search-box input[type="text"] { padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 12px; /* Adjust the input text size */ color: #333; /* Adjust the input text color */ width: calc(100% - 15px); /* Adjust input width to fit container */ } .search-box input[type="submit"] { padding: 10px 0; background-color: #ff9933; border: none; border-radius: 5px; color: white; font-size: 12px; /* Adjust the button text size */ cursor: pointer; width: 100%; /* Make the button full-width */ } .search-box input[type="submit"]:hover { background-color: #e68a00; } .search-box .links { text-align: center; margin-top: 10px; } .search-box a { font-size: 10px; /* Smaller font size for links */ color: #336699; /* Adjust the link text color */ text-decoration: none; margin: 0 5px; }

Availability Search

Check In Check Out

Switch to Calendar Search Mode Show All

// Placeholder JavaScript to add date pickers document.addEventListener('DOMContentLoaded', function () { // This is where you could integrate a date picker library like jQuery UI or flatpickr });