<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container-fluid"><nav class="navbar navbar-custom">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"><span
class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span></button>
<a class="navbar-brand" href="#">
<h4 class="textui">BookMySn<span class="glyphicon glyphicon-camera" style="color:#6777DB"></span>pper</h4>
</a></div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Location <span
class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Promoted Snappers</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><a href="#"><img
src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 <i class="fa fa-rupee"></i></button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item --></div>
<!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#menCollection" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button"
data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Event <span
class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Wedding</li>
<li><a href="#"> Bengali Wedding </a></li>
<li><a href="#"> Bhojpuri Wedding </a></li>
<li><a href="#"> Brahmin Wedding </a></li>
<li><a href="#"> Bridal Portraits </a></li>
<li><a href="#"> Buddhist Wedding </a></li>
<li><a href="#"> Candid Wedding </a></li>
<li><a href="#"> Catholic Wedding </a></li>
<li><a href="#"> Chhattisgarhi Wedding </a></li>
<li><a href="#"> Christian Wedding </a></li>
<li><a href="#"> Concept Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li><a href="#"> Contemporary Wedding </a></li>
<li><a href="#"> Couple Portraits </a></li>
<li><a href="#"> Destination Wedding </a></li>
<li><a href="#"> Engagement </a></li>
<li><a href="#"> Gujarati Wedding </a></li>
<li><a href="#"> Haryanvi Wedding </a></li>
<li><a href="#"> Hindu Wedding </a></li>
<li><a href="#"> Indian Wedding </a></li>
<li><a href="#"> Jain Wedding </a></li>
<li><a href="#"> Kashmiri Wedding </a></li>
<li><a href="#"> Maharashtrian Wedding </a></li>
<li><a href="#"> Marwadi Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li><a href="#"> Muslim Wedding </a></li>
<li><a href="#"> North Indian Wedding </a></li>
<li><a href="#"> Parsi Wedding </a></li>
<li><a href="#"> Pre-wedding Shoots </a></li>
<li><a href="#"> Punjabi Wedding </a></li>
<li><a href="#"> Rajasthani Wedding </a></li>
<li><a href="#"> Reception </a></li>
<li><a href="#"> Sikh Wedding </a></li>
<li><a href="#"> South Indian Wedding </a></li>
<li><a href="#"> Tamil Wedding </a></li>
<li><a href="#"> Theme Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Wedding Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><a href="#"><img
src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item --></div>
<!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#womenCollection" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button"
data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Snapper locator</a></li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group"><input type="text" class="form-control" placeholder="Enter location to find a Snapper">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"></a></a></li>
<li class="dropdown"><a href="#nav-collapse4" class="dropdown-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="nav-collapse4" >Login<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><i>
<p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">User Login</a></p>
</i></li>
<li class="divider"></li>
<li><i>
<p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">Snapper Login</a></p>
</i></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About us<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Who we are ?</a></li>
<li><a href="#">Who we do ?</a></li>
<li><a href="#">Contact us</a></li>
<li class="divider"></li>
<li><a href="#">Join us</a></li>
</ul>
</li>
<!-- Start of Profile -->
<li>
<a data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a>
</li>
<ul class="collapse nav navbar-nav navbar-left nav-collapse slide-down" role="search" id="nav-collapse4">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My profile</a></li>
<li><a href="#">Favorited</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</ul>
</ul>
</div>
<!-- /.nav-collapse --> </nav></div>
<!-- BEGIN # BOOTSNIP INFO -->
<div class="container-fluid">
</div>
<!-- END # BOOTSNIP INFO -->
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="display: none; border-radius:0px 22px 22px 22px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center"><img class="img-circle" id="img_logo"
src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12193500_1203433986350527_6632076734594190542_n.jpg?oh=729c934414c622bcdce1cd2e7c49addd&oe=56BC327E">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms"><!-- Begin # Login Form -->
<form id="login-form">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type your username and password.</span></div>
<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)"
required> <input id="login_password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox"><label> <input type="checkbox"> Remember me </label></div>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End # Login Form --> <!-- Begin | Lost Password Form -->
<form id="lost-form" style="display: none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-lost-msg">Type your e-mail.</span></div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form --> <!-- Begin | Register Form -->
<form id="register-form" style="display: none;">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register an account.</span></div>
<input id="register_Firstname" class="form-control" type="text" placeholder="FirstName " required>
<input id="register_Lastname" class="form-control" type="text" placeholder="LastName " required>
<input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
</div>
</div>
</form>
<!-- End | Register Form --></div>
<!-- End # DIV Form --></div>
</div>
</div>
<!-- END # MODAL LOGIN -->
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
@import url(http://fonts.googleapis.com/css?family=Roboto);
* {
font-family: 'Roboto', sans-serif;
}
#login-modal .modal-dialog {
width: 350px;
}
#login-modal input[type=text],input[type=password] {
margin-top: 10px;
}
#div-login-msg,#div-lost-msg,#div-register-msg {
border: 1px solid #dadfe1;
height: 30px;
line-height: 28px;
transition: all ease-in-out 500ms;
}
#div-login-msg.success,#div-lost-msg.success,#div-register-msg.success {
border: 1px solid #68c3a3;
background-color: #c8f7c5;
}
#div-login-msg.error,#div-lost-msg.error,#div-register-msg.error {
border: 1px solid #eb575b;
background-color: #ffcad1;
}
#icon-login-msg,#icon-lost-msg,#icon-register-msg {
width: 30px;
float: left;
line-height: 28px;
text-align: center;
background-color: #dadfe1;
margin-right: 5px;
transition: all ease-in-out 500ms;
}
#icon-login-msg.success,#icon-lost-msg.success,#icon-register-msg.success
{
background-color: #68c3a3 !important;
}
#icon-login-msg.error,#icon-lost-msg.error,#icon-register-msg.error {
background-color: #eb575b !important;
}
#img_logo {
max-height: 100px;
max-width: 100px;
}
/* #########################################
# override the bootstrap configs #
######################################### */
.modal-backdrop.in {
filter: alpha(opacity = 50);
opacity: .8;
}
.modal-content {
background-color: #ececec;
border: 1px solid #bdc3c7;
border-radius: 0px;
outline: 0;
}
.modal-header {
min-height: 16.43px;
padding: 15px 15px 15px 15px;
border-bottom: 0px;
}
.modal-body {
position: relative;
padding: 5px 15px 5px 15px;
}
.modal-footer {
padding: 15px 15px 15px 15px;
text-align: left;
border-top: 0px;
}
.checkbox {
margin-bottom: 0px;
}
.btn {
border-radius: 0px;
}
.btn:focus,.btn:active :focus,.btn.active:focus,.btn.focus,.btn:active
.focus,.btn.active.focus {
outline: none;
}
.btn-lg,.btn-group-lg>.btn {
border-radius: 0px;
}
.btn-link {
padding: 5px 10px 0px 0px;
color: #95a5a6;
}
.btn-link:hover,.btn-link:focus {
color: #2c3e50;
text-decoration: none;
}
.glyphicon {
top: 0px;
}
.form-control {
border-radius: 0px;
}
/*
Credits:
Code snippet by @maridlcrmn (Follow me on Twitter)
Images by Nike.com (http://www.nike.com/us/en_us/)
Logo by Sneaker-mission.com (http://www.sneaker-mission.com/)
*/
.textui {
font-family: "Comic Sans MS", cursive, sans-serif;
color: #dfeded;
border-bottom: none;
padding-bottom: 15px;
}
.textui-li1 {
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #c1c1d1;
border-bottom: none;
}
.textui-li2 {
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #c1c1d9;
border-bottom: none;
}
.navbar-brand {
width: 200px;
height: 30px;
background: url('') no-repeat center center;
background-size: 50px;
}
.nav-tabs {
display: inline-block;
border-bottom: none;
padding-top: 15px;
font-weight: bold;
}
.nav-tabs>li>a,.nav-tabs>li>a:hover,.nav-tabs>li>a:focus,.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus
{
border: none;
border-radius: 0;
}
.nav-list {
border-bottom: 1px solid #eee;
}
.nav-list>li {
padding: 20px 15px 15px;
border-left: 1px solid #eee;
}
.nav-list>li:last-child {
border-right: 1px solid #eee;
}
.nav-list>li>a:hover {
text-decoration: none;
}
.nav-list>li>a>span {
display: block;
font-weight: bold;
text-transform: uppercase;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
.navbar-custom {
background-color: #36a1d6;
border-color: #2890c3;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#60b5df),
to(#36a1d6) );
background-image: -webkit-linear-gradient(top, #60b5df, 0%, #36a1d6, 100%)
;
background-image: -moz-linear-gradient(top, #60b5df 0%, #36a1d6 100%);
background-image: linear-gradient(to bottom, #60b5df 0%, #36a1d6 100%);
background-repeat: repeat-x;
filter: progid : DXImageTransform . Microsoft .
gradient(startColorstr = '#ff60b5df', endColorstr = '#ff36a1d6',
GradientType = 0);
}
.navbar-custom .navbar-brand {
color: #ffffff;
}
.navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-custom .navbar-text {
color: #ffffff;
}
.navbar-custom .navbar-nav>li:last-child>a {
border-right: 1px solid #2890c3;
}
.navbar-custom .navbar-nav>li>a {
color: #ffffff;
border-left: 1px solid #2890c3;
}
.navbar-custom .navbar-nav>li>a:hover,.navbar-custom .navbar-nav>li>a:focus
{
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav>.active>a,.navbar-custom .navbar-nav>.active>a:hover,.navbar-custom .navbar-nav>.active>a:focus
{
color: #c0c0c0;
background-color: #2890c3;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#2890c3),
to(#45a8d9) );
background-image: -webkit-linear-gradient(top, #2890c3, 0%, #45a8d9, 100%)
;
background-image: -moz-linear-gradient(top, #2890c3 0%, #45a8d9 100%);
background-image: linear-gradient(to bottom, #2890c3 0%, #45a8d9 100%);
background-repeat: repeat-x;
filter: progid : DXImageTransform . Microsoft .
gradient(startColorstr = '#ff2890c3', endColorstr = '#ff45a8d9',
GradientType = 0);
}
.navbar-custom .navbar-nav>.disabled>a,.navbar-custom .navbar-nav>.disabled>a:hover,.navbar-custom .navbar-nav>.disabled>a:focus
{
color: #cccccc;
background-color: transparent;
}
.navbar-custom .navbar-toggle {
border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,.navbar-custom .navbar-toggle:focus
{
background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-custom .navbar-collapse,.navbar-custom .navbar-form {
border-color: #278ec1;
}
.navbar-custom .navbar-nav>.dropdown>a:hover .caret,.navbar-custom .navbar-nav>.dropdown>a:focus .caret
{
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav>.open>a,.navbar-custom .navbar-nav>.open>a:hover,.navbar-custom .navbar-nav>.open>a:focus
{
background-color: #2890c3;
color: #c0c0c0;
}
.navbar-custom .navbar-nav>.open>a .caret,.navbar-custom .navbar-nav>.open>a:hover .caret,.navbar-custom .navbar-nav>.open>a:focus .caret
{
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media ( max-width : 767) {
.navbar-custom .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
.navbar-custom .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>li>a:focus
{
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav .open .dropdown-menu>.active>a,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:focus
{
color: #c0c0c0;
background-color: #2890c3;
}
.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:focus
{
color: #cccccc;
background-color: transparent;
}
}
.navbar-custom .navbar-link {
color: #ffffff;
}
.navbar-custom .navbar-link:hover {
color: #c0c0c0;
}
/* */
body {
padding-top: 2px;
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align:center;
}
.panel-login>.panel-heading a{
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
color: #029f5b;
font-size: 18px;
}
.panel-login>.panel-heading hr{
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
.btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910869.jpg */
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #060;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
/* #####################################################################
#
# Project : Modal login version
#
##################################################################### */
$(function() {
var $formLogin = $('#login-form');
var $formLost = $('#lost-form');
var $formRegister = $('#register-form');
var $divForms = $('#div-forms');
var $modalAnimateTime = 300;
var $msgAnimateTime = 150;
var $msgShowTime = 2000;
$("form").submit(function () {
switch(this.id) {
case "login-form":
var $lg_username=$('#login_username').val();
var $lg_password=$('#login_password').val();
if ($lg_username == "ERROR") {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
} else {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
}
return false;
break;
case "lost-form":
var $ls_email=$('#lost_email').val();
if ($ls_email == "ERROR") {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
} else {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
}
return false;
break;
case "register-form":
var $rg_username=$('#register_username').val();
var $rg_email=$('#register_email').val();
var $rg_password=$('#register_password').val();
if ($rg_username == "ERROR") {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
} else {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
}
return false;
break;
default:
return false;
}
return false;
});
$('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
$('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
$('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
$('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
$('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
$('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
function modalAnimate ($oldForm, $newForm) {
var $oldH = $oldForm.height();
var $newH = $newForm.height();
$divForms.css("height",$oldH);
$oldForm.fadeToggle($modalAnimateTime, function(){
$divForms.animate({height: $newH}, $modalAnimateTime, function(){
$newForm.fadeToggle($modalAnimateTime);
});
});
}
function msgFade ($msgId, $msgText) {
$msgId.fadeOut($msgAnimateTime, function() {
$(this).text($msgText).fadeIn($msgAnimateTime);
});
}
function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
var $msgOld = $divTag.text();
msgFade($textTag, $msgText);
$divTag.addClass($divClass);
$iconTag.removeClass("glyphicon-chevron-right");
$iconTag.addClass($iconClass + " " + $divClass);
setTimeout(function() {
msgFade($textTag, $msgOld);
$divTag.removeClass($divClass);
$iconTag.addClass("glyphicon-chevron-right");
$iconTag.removeClass($iconClass + " " + $divClass);
}, $msgShowTime);
}
});
