<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar-default top-ribbon">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Why Lefa Tours ?</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#"><img src="assets/icons/fb.png" width="24" height="24"></a></li>
<li><a href="#"><img src="assets/icons/twitter.png" width="24" height="24"></a></li>
</ul>
</div>
</div>
<!-- /top-ribbon -->
<div class="navbar navbar-default navbar-static-top" style="border-bottom:0;">
<div class="container">
<a class="navbar-brand" href="#" style="margin:0; padding:0;"><img src="assets/logo.png" width="143" height="45"></a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li><a href="#">MALDIVES</a></li>
<li><a href="hotels.html">HOTELS</a></li>
<li><a href="#">FLIGHTS</a></li>
<li><a href="#">PACKAGES</a></li>
<li><a href="#">DEALS</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-3 sidebar-offcanvas side-book">
<div class="rowsl all-booker"><h3 style="margin:0; padding:0;">Search Hotels</h3></div>
<div class="rowsl all-booker-bg"></div>
<div class="rowsl booker-form">
<form>
<div class="form-group">
<label>Where do you want to stay ?</label>
<input type="text" class="form-control simplebox" placeholder="Your Destination">
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6"><label>Arrival</label><input type="text" class="form-control calendar simplebox"></div>
<div class="col-lg-6"><label>Departure</label><input type="text" class="form-control calendar simplebox" ></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default simplebox search-btn">Search</button>
</div>
</form>
</div>
<div class="rowsl"><h3>Filter by</h3></div>
<div class="Hotel-filters">
<p>Star Rating</p>
<ul>
<li><a href=""><img src="assets/icons/rate-5.png" width="90" height="15"><span>5 Stars</span></a></li>
<li><a href=""><img src="assets/icons/rate-4.png" width="90" height="15"><span>4 Stars</span></a></li>
<li><a href=""><img src="assets/icons/rate-3.png" width="90" height="15"><span>3 Stars</span></a></li>
<li><a href=""><img src="assets/icons/rate-2.png" width="90" height="15"><span>2 Stars</span></a></li>
</ul>
</div>
<div class="Hotel-filters">
<p>Accomadation Type</p>
<ul>
<li><a href="">All</a></li>
<li><a href="">Resort Islands</a></li>
<li><a href="">City Hotels</a></li>
<li><a href="">Liveaboards</a></li>
<li><a href="">Honeymoon</a></li>
<li><a href="">Family</a></li>
<li><a href="">Relax</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 iiner">
<div class="rowsl"><h3>All Hotels</h3><p>Explore our unbeatable offers.</p></div>
<div class="rows clearfix" >
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s2"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s2"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s2"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s2"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
</div><!-- /row -->
<div class="rowsl"><h3>Budget Holidays</h3><p>If you have a budget this is for you.</p></div>
<div class="rows clearfix">
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
<div class="col-6 col-sm-6 col-lg-4 s2"></div>
<div class="col-6 col-sm-6 col-lg-4 s1"></div>
</div><!-- /row -->
</div><!-- /iiner -->
</div><!-- /off -->
</div><!-- /container -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3"><img src="" width="291" height="88"></div>
<div class="col-md-3">
<h4>Contact Info</h4>
Tripper Travels Pvt Ltd <br>
20934, Nikagas Magu, Male', Maldives <br>
E info@xxxxxxxxx.com
T 00 960 000 00 00
F 00 960 000 00 00
</div>
<div class="col-md-2">
<h4>Customer Support</h4>
<ul>
<li><a href="">FAQ</a></li>
<li><a href="">Payment Options</a></li>
<li><a href="">Booking tips</a></li>
<li><a href="">Information</a></li>
</ul>
</div>
<div class="col-md-3 newsletter">
<h4>Get Our Newsletter</h4>
<form>
<p>Signup for our newsletter</p>
<div class="input-group">
<input type="text" class="form-control " placeholder="Your email">
<span class="input-group-btn">
<button type="submit" class="btn btn-search btn-stylr">SIGNUP</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
body {
font-family: Lato;
font-weight: 300;
font-size: 16px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch
}
@font-face{font-family:'brandon_grotesquebold';
src:url("../fonts/brandon/brandon_bld-webfont.eot");
src:url("../fonts/brandon/brandon_bld-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/brandon/brandon_bld-webfont.woff") format("woff"),url("../fonts/brandon/brandon_bld-webfont.ttf") format("truetype"),url("../fonts/brandon/brandon_bld-webfont.svg#brandon_grotesquebold") format("svg");font-weight:normal;font-style:normal}
h1, h2, h3, h4, h5, h6 {
font-family: Raleway;
font-weight: 300;
color: #333
}
.container { padding:0; }
.main-in { width:990px;}
.top-headings { }
.top-headings h4 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;text-transform:uppercase; font-weight:normal; font-size:1.3em; color:#384653; margin:20px 0 0 0; }
.top-headings p { font-style:italic; color:#666; margin:0 0 25px 0; }
.carousel { margin:0 0 0px 0; }
.carousel .sliderr { height:400px;}
.carousel .carousel-caption { top:15px;}
.carousel .carousel-caption h1 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase; border-bottom:3px solid #FFF; padding:8px; font-size:2.8em;}
.carousel .carousel-caption p {color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:12px; font-style:italic;}
.special-offers { margin-bottom:20px;}
.special-offers .offer-box { height:200px; position:relative;}
.special-offers .offer-box .offer-details { position:absolute; bottom:30px; height:50px; left:0; font-size:17px; padding:8px;text-align:center; width:100%;}
.special-offers .offer-box .offer-details a { border-bottom:3px solid #FFF; color:#FFF; text-decoration:none;
font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1em;text-transform:uppercase;margin:0 0 0.5em;font-weight:normal; }
.special-offers .offer-box .offer-details a:hover {background:#00B285; padding:8px 8px 0 8px;}
.special-offers .offer-box .offer-details p { color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:8px; font-style:italic;}
.booking-ribbon { background:#FFF url(../assets/img/booker-bg.png); width:100%; }
.booking-ribbon {padding:15px 8px 25px 8px; z-index:1000; font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;}
.booking-ribbon h3 { font-size:1.1em; margin:0 0 5px 0; padding:0;color:#FFF; font-weight:normal; text-transform:uppercase;}
.booking-ribbon .form-inline label { font-size:0.7em; font-weight:normal; color:#333; font-weight:normal;text-transform:uppercase; padding:0; margin:0;}
.booking-ribbon .sm { border-right:1px solid #999;}
.calendar { background:url(../assets/ui_cal_icon.gif) #FFF no-repeat right; }
.simplebox{outline: none;box-shadow:none !important; border-radius:0;}
.featured {}
.featured .boxsers { height:200px; background:#666; margin:0; position:relative;}
.featured .boxsers .details { position:absolute; bottom:0; width:100%; left:0; padding:10px; text-align:center;}
.featured .boxsers .details a {border-bottom:2px solid #FFF; color:#FFF; text-decoration:none;
font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:0.9em;text-transform:uppercase;margin:0 0 0.5em;font-weight:normal; background:#333; padding:8px 8px 0 8px;}
.featured .boxsers .details p { color:#FFF; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; padding:8px; font-style:italic;}
.news {}
.news ul { margin:0; padding:0;}
.news ul li { list-style:none; margin:10px 0 15px 0; border-bottom:1px solid #eee; padding:12px 0 12px 10px;}
.news ul li a { color:#00B285; text-decoration:none;}
.sub-main-box {}
.sub-main-box .sm-5 {}
.sub-main-box .sm-5 .sl { height:100px; background:#666;}
.navver { padding:35px 0 20px 0;}
.navver ul { margin:0; padding:0;}
.navver ul li { list-style:none; display:inline; margin:0 10px 0 10px; text-align:right;}
.navver ul li a { text-decoration:none; color:#00B285;}
.footer { background:#333; margin:60px 0 0 0; color:#FFF; font-size:12px; }
.footer .container { padding:20px 0 40px 10px;}
.footer h4 { color:#FF9900;}
.footer ul { margin:0; padding:0;}
.footer ul li { list-style:none; }
.footer ul li a { text-decoration:none; color:#FFF;}
.navbar { margin:0; padding:0; height:10px; background:#FFF;}
.navbar ul li a { font-size:0.9em; font-weight:normal; }
.top-ribbon { margin-bottom:20px;font-size:0.8em; border-bottom:1px solid #EEE; }
.top-ribbon li { border-right:1px solid #EEE;}
.top-ribbon li a { padding:8px; }
.middle-section { margin-top:30px;}
.two-divider .thumbnail .placer { width:100%; height:120px; position:relative;}
.two-divider .thumbnail .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:1.5em;}
.two-divider .thumbnail { border: 0 none;}
.two-divider .caption { background:#F4F5F9; position:relative;}
.two-divider .caption h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:1em; text-transform:uppercase; color:#384653;}
.two-divider .caption p { font-size:0.8em; margin:5px 0; color:#666;}
.two-divider .caption .price { font-size:1.2em; color:#D63343;margin:5px 0;}
.two-divider .caption .price span { font-size:0.7em;}
.two-divider .caption .more-but { border-top:1px solid #EEE; padding:10px;}
.two-divider .caption .more-but a { background:#D63343; padding:8px; color:#FFF; font-size:0.6em; right:0; bottom:0; position:absolute;}
.featured-main .thumbnail .placer { width:100%; height:170px; position:relative;}
.featured-main .thumbnail .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:2em;}
.featured-main .caption { background:#F4F5F9; position:relative;}
.featured-main .caption h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:1.1em; text-transform:uppercase; color:#384653;}
.featured-main .caption p { font-size:0.9em; margin:5px 0; color:#666;}
.featured-main .caption .price { font-size:1.5em; color:#D63343;margin:5px 0;}
.featured-main .caption .price span { font-size:0.7em;}
.featured-main .caption .more-but { border-top:1px solid #EEE; padding:10px;}
.featured-main .caption .more-but a { background:#D63343; padding:8px; color:#FFF; font-size:0.7em; right:0; bottom:0; position:absolute;}
.featured-main .thumbnail { border: 0 none;}
.featured-main .col-lg-4 { margin:0; background:#099;}
.right-lists {}
.right-lists .placer { width:100%; height:60px; position:relative;}
.right-lists .plus { position:absolute; right:0; bottom:0; background:#54667A; color:#FFF; padding:1px 8px 1px 8px; font-size:1.5em;}
.right-lists .row { margin-bottom:10px; border-bottom:1px solid #EEE;}
.right-lists h3 {font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal; font-size:0.9em; text-transform:uppercase; color:#384653;}
.right-lists p { font-size:0.8em; margin:5px 0; color:#666;}
.more { margin-top:20px; margin-bottom:50px;}
.more h1 { font-size:1em; text-align:center; border-top:1px dashed #EEE; border-bottom:1px dashed #EEE; padding:8px 0px;}
.more h1 a { color:#999; text-decoration:none; font-weight:normal;}
.more h1 a span { color:#333;}
.ds {
background-image:url(../assets/img/f3.jpg);
background-size: 100%
}
.ds h1 {
font-size: 3.25em; color:#FFF;font-family:"brandon_grotesquebold","Helvetica Neue",Helvetica,Arial,sans-serif; text-transform:uppercase; text-align:center;
border-bottom:2px solid #FFF; padding:20px 0;
}
#homeThumbs .thumbnails > li
{
float: left;
margin-bottom: 5px;
margin-left: 0;
margin-right: 5px;
}
#homeThumbs .col-md-1
{
width: 50px;
height:50px;
background:#000;
}
#homeThumbs .thumbnails
{
list-style: none outside none;
margin-left: 0px;
}
.rowsl { margin-top:30px;}
.rowsl h3 {}
.hotel-search { background:#C33; height:50px;}
.hotel-detail-name { border-bottom:1px solid #EEE;text-align:center;}
.details .panel { border:0;}
.details .panel-heading { background:#FFF; }
.details .panel-heading h4 { font-size:21px;}
.details .panel-heading .panel-title a { color:#C36;}
.details .panel-heading .panel-title a:hover { text-decoration:none;}
.Hotel-filters { margin-bottom:1px; border-bottom:1px solid #EEE; padding:15px 0;}
.Hotel-filters p { border-bottom:1px solid #EEE; padding:0 0 5px 0;}
.Hotel-filters ul { margin:0; padding:0;}
.Hotel-filters li { list-style:none; padding:2px 0;}
.Hotel-filters li a { text-decoration:none; color:#666; font-size:13px;}
.Hotel-filters li img { margin-right:20%;}
.side-book {}
.side-book .booker-form {}
.side-book label { font-weight:normal; font-size:14px; color:#999;}
.side-book .search-btn { background:#F90; color:#FFF; border:0; margin:10px 0 0 0;}
.all-booker { background:#F90; text-align:center; color:#FFF; padding:10px 0; }
.all-booker h3 { color:#FFF;}
.all-booker p { padding:0; margin:0;}
.all-booker-bg { background:url(../assets/icons/allbooker-bottom-arrow.png) no-repeat center top; height:8px; margin:0 0 20px 0; }
.sm-3 { background:#033; width:100%; height:100px;}
.s1{ background:#333; height:200px; border:2px solid #FFF;}
.s2{ background:#444; height:200px; border:2px solid #FFF;}
.sm1{ background:#333; height:100px; border:2px solid #FFF;}
.sm2{ background:#444; height:100px; border:2px solid #FFF;}
.s3r1 {background:#CCF; height:200px; padding-left:0;}
.s3r2 {background:#CCC; height:200px; padding-left:0;}
.s3r3 {background:#CC9; height:200px; padding-left:0;}
