<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1>The Powerpuff girl Bootstrap</h1>
<p>A style Bootstrap 3 Color Powerpuff</p>
<h3>Buttons</h3>
<button type="button" class="btn btn-blossom">Blossom</button>
<button type="button" class="btn btn-bubbles">Bubbles</button>
<button type="button" class="btn btn-buttercup">Buttercup</button>
<button type="button" class="btn btn-blossom-light">Blossom</button>
<button type="button" class="btn btn-bubbles-light">Bubbles</button>
<button type="button" class="btn btn-buttercup-light">Buttercup</button>
<h3>Inputs focus</h3>
<form>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control blossom" value="Blossom">
</div>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control bubbles" value="Bubbles">
</div>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control buttercup" value="Buttercup">
</div>
</form>
<h3>Navbar</h3>
<nav class="navbar navbar-blossom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Blossom</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-blossom-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Blossom</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-bubbles">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Bubbles</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-bubbles-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Bubbles</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-buttercup">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Buttercup</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-buttercup-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Buttercup</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
/*!
*Bootstrap 3 The Powerpuff Girls Style 2016
Update 31-12-20
*/
/*Fixed Button White*/
.btn-blossom,.btn-blossom-light,.btn-bubbles,.btn-bubbles-light,.btn-buttercup,.btn-buttercup-light{color:#fff!important;}
/*
Blossom
/\ _/\
| \ / |
| | __ / |
| | | |
|..------..|
.-~ /\ \\ ~-.
/ ~~~ ~~~~~ ~~~ \
| * | | * | ||
|--'/ \ -'.' |
\~ |_| ~~~~~/
.--_~-.._ __.-~
`-._~~~ ~~~~~~ |\
~~~~|______| | |
/ |______| | \
\-~ /| | |\ ~-/
~-._|______`-'_.--~
| | |~~
|__|___|
|_|| _|| Amw
`--'`--'
*/
/*Button*/
.btn-blossom{color:#fff;background-color:#ea6964;border-color:#e7534e}
.btn-blossom.focus,.btn-blossom:focus{color:#fff;background-color:#e43e37;border-color:#9f1b16}
.btn-blossom:hover{color:#fff;background-color:#e43e37;border-color:#da251e}
.btn-blossom.active,.btn-blossom:active,.open>.dropdown-toggle.btn-blossom{color:#fff;background-color:#e43e37;background-image:none;border-color:#da251e}
.btn-blossom.active.focus,.btn-blossom.active:focus,.btn-blossom.active:hover,.btn-blossom:active.focus,.btn-blossom:active:focus,.btn-blossom:active:hover,.open>.dropdown-toggle.btn-blossom.focus,.open>.dropdown-toggle.btn-blossom:focus,.open>.dropdown-toggle.btn-blossom:hover{color:#fff;background-color:#da251e;border-color:#9f1b16}
.btn-blossom.disabled.focus,.btn-blossom.disabled:focus,.btn-blossom.disabled:hover,.btn-blossom[disabled].focus,.btn-blossom[disabled]:focus,.btn-blossom[disabled]:hover,fieldset[disabled] .btn-blossom.focus,fieldset[disabled] .btn-blossom:focus,fieldset[disabled] .btn-blossom:hover{background-color:#ea6964;border-color:#e7534e}
.btn-blossom .badge{color:#ea6964;background-color:#fff}
.btn-blossom-light{color:#fff;background-color:#e78c89;border-color:#e37774}
.btn-blossom-light.focus,.btn-blossom-light:focus{color:#fff;background-color:#de635f;border-color:#b32924}
.btn-blossom-light:hover{color:#fff;background-color:#de635f;border-color:#d84641}
.btn-blossom-light.active,.btn-blossom-light:active,.open>.dropdown-toggle.btn-blossom-light{color:#fff;background-color:#de635f;background-image:none;border-color:#d84641}
.btn-blossom-light.active.focus,.btn-blossom-light.active:focus,.btn-blossom-light.active:hover,.btn-blossom-light:active.focus,.btn-blossom-light:active:focus,.btn-blossom-light:active:hover,.open>.dropdown-toggle.btn-blossom-light.focus,.open>.dropdown-toggle.btn-blossom-light:focus,.open>.dropdown-toggle.btn-blossom-light:hover{color:#fff;background-color:#d84641;border-color:#b32924}
.btn-blossom-light.disabled.focus,.btn-blossom-light.disabled:focus,.btn-blossom-light.disabled:hover,.btn-blossom-light[disabled].focus,.btn-blossom-light[disabled]:focus,.btn-blossom-light[disabled]:hover,fieldset[disabled] .btn-blossom-light.focus,fieldset[disabled] .btn-blossom-light:focus,fieldset[disabled] .btn-blossom-light:hover{background-color:#e78c89;border-color:#e37774}
.btn-blossom-light .badge{color:#e78c89;background-color:#fff}
/* Input */
.form-control:focus.blossom:focus {
border-color: #e78c89;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(231, 140, 137, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(231, 140, 137, 0.6);
}
/*navbar*/
.navbar-blossom {
background-color: #ea6964;
border-color: #e64d47;
}
.navbar-blossom .navbar-brand {
color: #ffffff;
}
.navbar-blossom .navbar-brand:hover,
.navbar-blossom .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-blossom .navbar-text {
color: #ffffff;
}
.navbar-blossom .navbar-nav > li > a {
color: #ffffff;
}
.navbar-blossom .navbar-nav > li > a:hover,
.navbar-blossom .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-blossom .navbar-nav > .active > a,
.navbar-blossom .navbar-nav > .active > a:hover,
.navbar-blossom .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #e64d47;
}
.navbar-blossom .navbar-nav > .disabled > a,
.navbar-blossom .navbar-nav > .disabled > a:hover,
.navbar-blossom .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-blossom .navbar-toggle {
border-color: #dddddd;
}
.navbar-blossom .navbar-toggle:hover,
.navbar-blossom .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-blossom .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-blossom .navbar-collapse,
.navbar-blossom .navbar-form {
border-color: #e64b45;
}
.navbar-blossom .navbar-nav > .dropdown > a:hover .caret,
.navbar-blossom .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-blossom .navbar-nav > .open > a,
.navbar-blossom .navbar-nav > .open > a:hover,
.navbar-blossom .navbar-nav > .open > a:focus {
background-color: #e64d47;
color: #c0c0c0;
}
.navbar-blossom .navbar-nav > .open > a .caret,
.navbar-blossom .navbar-nav > .open > a:hover .caret,
.navbar-blossom .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-blossom .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-blossom .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-blossom .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-blossom .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-blossom .navbar-nav .open .dropdown-menu > .active > a,
.navbar-blossom .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-blossom .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #e64d47;
}
.navbar-blossom .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-blossom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-blossom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-blossom .navbar-link {
color: #ffffff;
}
.navbar-blossom .navbar-link:hover {
color: #c0c0c0;
}
/*========================================*/
.navbar-blossom-light {
background-color: #e78c89;
border-color: #e1716d;
}
.navbar-blossom-light .navbar-brand {
color: #ffffff;
}
.navbar-blossom-light .navbar-brand:hover,
.navbar-blossom-light .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-blossom-light .navbar-text {
color: #ffffff;
}
.navbar-blossom-light .navbar-nav > li > a {
color: #ffffff;
}
.navbar-blossom-light .navbar-nav > li > a:hover,
.navbar-blossom-light .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-blossom-light .navbar-nav > .active > a,
.navbar-blossom-light .navbar-nav > .active > a:hover,
.navbar-blossom-light .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #e1716d;
}
.navbar-blossom-light .navbar-nav > .disabled > a,
.navbar-blossom-light .navbar-nav > .disabled > a:hover,
.navbar-blossom-light .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-blossom-light .navbar-toggle {
border-color: #dddddd;
}
.navbar-blossom-light .navbar-toggle:hover,
.navbar-blossom-light .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-blossom-light .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-blossom-light .navbar-collapse,
.navbar-blossom-light .navbar-form {
border-color: #e16f6b;
}
.navbar-blossom-light .navbar-nav > .dropdown > a:hover .caret,
.navbar-blossom-light .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-blossom-light .navbar-nav > .open > a,
.navbar-blossom-light .navbar-nav > .open > a:hover,
.navbar-blossom-light .navbar-nav > .open > a:focus {
background-color: #e1716d;
color: #c0c0c0;
}
.navbar-blossom-light .navbar-nav > .open > a .caret,
.navbar-blossom-light .navbar-nav > .open > a:hover .caret,
.navbar-blossom-light .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-blossom-light .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-blossom-light .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-blossom-light .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-blossom-light .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .active > a,
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #e1716d;
}
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-blossom-light .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-blossom-light .navbar-link {
color: #ffffff;
}
.navbar-blossom-light .navbar-link:hover {
color: #c0c0c0;
}
/*
Bubbles
..------..
/~~-.-~__-'`-__ ~-. .-~-.
| /~~~\ / ~~---\| |
| ||| * | | | | * | |
/_-|\ \ / \ \ \__.|\. |
~ \~~ |_| ~~~~ / ~-.\
~-.._ _.-~~
.--~~~~~~--.
| |______| |
~-|______|-~
| |
|______|
| | |
|__|___|
|_|| _|| Amw
`--'`--'
*/
/*Button*/
.btn-bubbles{color:#fff;background-color:#33ace3;border-color:#1ea2de}
.btn-bubbles.focus,.btn-bubbles:focus{color:#fff;background-color:#1b92c8;border-color:#0f506e}
.btn-bubbles:hover{color:#fff;background-color:#1b92c8;border-color:#177ba8}
.btn-bubbles.active,.btn-bubbles:active,.open>.dropdown-toggle.btn-bubbles{color:#fff;background-color:#1b92c8;background-image:none;border-color:#177ba8}
.btn-bubbles.active.focus,.btn-bubbles.active:focus,.btn-bubbles.active:hover,.btn-bubbles:active.focus,.btn-bubbles:active:focus,.btn-bubbles:active:hover,.open>.dropdown-toggle.btn-bubbles.focus,.open>.dropdown-toggle.btn-bubbles:focus,.open>.dropdown-toggle.btn-bubbles:hover{color:#fff;background-color:#177ba8;border-color:#0f506e}
.btn-bubbles.disabled.focus,.btn-bubbles.disabled:focus,.btn-bubbles.disabled:hover,.btn-bubbles[disabled].focus,.btn-bubbles[disabled]:focus,.btn-bubbles[disabled]:hover,fieldset[disabled] .btn-bubbles.focus,fieldset[disabled] .btn-bubbles:focus,fieldset[disabled] .btn-bubbles:hover{background-color:#33ace3;border-color:#1ea2de}
.btn-bubbles .badge{color:#33ace3;background-color:#fff}
.btn-bubbles-light{color:#fff;background-color:#98daf1;border-color:#82d2ee}
.btn-bubbles-light.focus,.btn-bubbles-light:focus{color:#fff;background-color:#6bcaeb;border-color:#1da4d3}
.btn-bubbles-light:hover{color:#fff;background-color:#6bcaeb;border-color:#4cbfe7}
.btn-bubbles-light.active,.btn-bubbles-light:active,.open>.dropdown-toggle.btn-bubbles-light{color:#fff;background-color:#6bcaeb;background-image:none;border-color:#4cbfe7}
.btn-bubbles-light.active.focus,.btn-bubbles-light.active:focus,.btn-bubbles-light.active:hover,.btn-bubbles-light:active.focus,.btn-bubbles-light:active:focus,.btn-bubbles-light:active:hover,.open>.dropdown-toggle.btn-bubbles-light.focus,.open>.dropdown-toggle.btn-bubbles-light:focus,.open>.dropdown-toggle.btn-bubbles-light:hover{color:#fff;background-color:#4cbfe7;border-color:#1da4d3}
.btn-bubbles-light.disabled.focus,.btn-bubbles-light.disabled:focus,.btn-bubbles-light.disabled:hover,.btn-bubbles-light[disabled].focus,.btn-bubbles-light[disabled]:focus,.btn-bubbles-light[disabled]:hover,fieldset[disabled] .btn-bubbles-light.focus,fieldset[disabled] .btn-bubbles-light:focus,fieldset[disabled] .btn-bubbles-light:hover{background-color:#98daf1;border-color:#82d2ee}
.btn-bubbles-light .badge{color:#98daf1;background-color:#fff}
/* Input */
.form-control:focus.bubbles:focus {
border-color: #98daf1;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(152, 218, 241, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(152, 218, 241, 0.6);
}
/*navbar*/
.navbar-bubbles {
background-color: #33ace3;
border-color: #1e9dd7;
}
.navbar-bubbles .navbar-brand {
color: #ffffff;
}
.navbar-bubbles .navbar-brand:hover,
.navbar-bubbles .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-bubbles .navbar-text {
color: #ffffff;
}
.navbar-bubbles .navbar-nav > li > a {
color: #ffffff;
}
.navbar-bubbles .navbar-nav > li > a:hover,
.navbar-bubbles .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-bubbles .navbar-nav > .active > a,
.navbar-bubbles .navbar-nav > .active > a:hover,
.navbar-bubbles .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #1e9dd7;
}
.navbar-bubbles .navbar-nav > .disabled > a,
.navbar-bubbles .navbar-nav > .disabled > a:hover,
.navbar-bubbles .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-bubbles .navbar-toggle {
border-color: #dddddd;
}
.navbar-bubbles .navbar-toggle:hover,
.navbar-bubbles .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-bubbles .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-bubbles .navbar-collapse,
.navbar-bubbles .navbar-form {
border-color: #1d9cd5;
}
.navbar-bubbles .navbar-nav > .dropdown > a:hover .caret,
.navbar-bubbles .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-bubbles .navbar-nav > .open > a,
.navbar-bubbles .navbar-nav > .open > a:hover,
.navbar-bubbles .navbar-nav > .open > a:focus {
background-color: #1e9dd7;
color: #c0c0c0;
}
.navbar-bubbles .navbar-nav > .open > a .caret,
.navbar-bubbles .navbar-nav > .open > a:hover .caret,
.navbar-bubbles .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-bubbles .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-bubbles .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-bubbles .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-bubbles .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-bubbles .navbar-nav .open .dropdown-menu > .active > a,
.navbar-bubbles .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-bubbles .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #1e9dd7;
}
.navbar-bubbles .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-bubbles .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-bubbles .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-bubbles .navbar-link {
color: #ffffff;
}
.navbar-bubbles .navbar-link:hover {
color: #c0c0c0;
}
/*========================================*/
.navbar-bubbles-light {
background-color: #98daf1;
border-color: #7bd0ed;
}
.navbar-bubbles-light .navbar-brand {
color: #ffffff;
}
.navbar-bubbles-light .navbar-brand:hover,
.navbar-bubbles-light .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-bubbles-light .navbar-text {
color: #ffffff;
}
.navbar-bubbles-light .navbar-nav > li > a {
color: #ffffff;
}
.navbar-bubbles-light .navbar-nav > li > a:hover,
.navbar-bubbles-light .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-bubbles-light .navbar-nav > .active > a,
.navbar-bubbles-light .navbar-nav > .active > a:hover,
.navbar-bubbles-light .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #7bd0ed;
}
.navbar-bubbles-light .navbar-nav > .disabled > a,
.navbar-bubbles-light .navbar-nav > .disabled > a:hover,
.navbar-bubbles-light .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-bubbles-light .navbar-toggle {
border-color: #dddddd;
}
.navbar-bubbles-light .navbar-toggle:hover,
.navbar-bubbles-light .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-bubbles-light .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-bubbles-light .navbar-collapse,
.navbar-bubbles-light .navbar-form {
border-color: #79cfed;
}
.navbar-bubbles-light .navbar-nav > .dropdown > a:hover .caret,
.navbar-bubbles-light .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-bubbles-light .navbar-nav > .open > a,
.navbar-bubbles-light .navbar-nav > .open > a:hover,
.navbar-bubbles-light .navbar-nav > .open > a:focus {
background-color: #7bd0ed;
color: #c0c0c0;
}
.navbar-bubbles-light .navbar-nav > .open > a .caret,
.navbar-bubbles-light .navbar-nav > .open > a:hover .caret,
.navbar-bubbles-light .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-bubbles-light .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .active > a,
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #7bd0ed;
}
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-bubbles-light .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-bubbles-light .navbar-link {
color: #ffffff;
}
.navbar-bubbles-light .navbar-link:hover {
color: #c0c0c0;
}
/*
Buttercup
..------..
.-~ ~-.
._ /_______/\_______\ _.
\ | | |* | | *| | | /
\|\_\ / _ \ /_/|/
\ ~~~ | | ~~~ /
~-.._ _..-~
.- ~~~~~~ -.
/ .|______|. \
| (.|______|.) |
\._) (_./
|______|
| | |
|__|___|
|_|| _|| Amw
`--'`--'
*/
/*Button*/
.btn-buttercup{color:#fff;background-color:#4ab62c;border-color:#42a127}
.btn-buttercup.focus,.btn-buttercup:focus{color:#fff;background-color:#398d22;border-color:#183b0e}
.btn-buttercup:hover{color:#fff;background-color:#398d22;border-color:#2e701b}
.btn-buttercup.active,.btn-buttercup:active,.open>.dropdown-toggle.btn-buttercup{color:#fff;background-color:#398d22;background-image:none;border-color:#2e701b}
.btn-buttercup.active.focus,.btn-buttercup.active:focus,.btn-buttercup.active:hover,.btn-buttercup:active.focus,.btn-buttercup:active:focus,.btn-buttercup:active:hover,.open>.dropdown-toggle.btn-buttercup.focus,.open>.dropdown-toggle.btn-buttercup:focus,.open>.dropdown-toggle.btn-buttercup:hover{color:#fff;background-color:#2e701b;border-color:#183b0e}
.btn-buttercup.disabled.focus,.btn-buttercup.disabled:focus,.btn-buttercup.disabled:hover,.btn-buttercup[disabled].focus,.btn-buttercup[disabled]:focus,.btn-buttercup[disabled]:hover,fieldset[disabled] .btn-buttercup.focus,fieldset[disabled] .btn-buttercup:focus,fieldset[disabled] .btn-buttercup:hover{background-color:#4ab62c;border-color:#42a127}
.btn-buttercup .badge{color:#4ab62c;background-color:#fff}
.btn-buttercup-light{color:#fff;background-color:#81cb71;border-color:#70c45e}
.btn-buttercup-light.focus,.btn-buttercup-light:focus{color:#fff;background-color:#60bd4c;border-color:#39772c}
.btn-buttercup-light:hover{color:#fff;background-color:#60bd4c;border-color:#50a83d}
.btn-buttercup-light.active,.btn-buttercup-light:active,.open>.dropdown-toggle.btn-buttercup-light{color:#fff;background-color:#60bd4c;background-image:none;border-color:#50a83d}
.btn-buttercup-light.active.focus,.btn-buttercup-light.active:focus,.btn-buttercup-light.active:hover,.btn-buttercup-light:active.focus,.btn-buttercup-light:active:focus,.btn-buttercup-light:active:hover,.open>.dropdown-toggle.btn-buttercup-light.focus,.open>.dropdown-toggle.btn-buttercup-light:focus,.open>.dropdown-toggle.btn-buttercup-light:hover{color:#fff;background-color:#50a83d;border-color:#39772c}
.btn-buttercup-light.disabled.focus,.btn-buttercup-light.disabled:focus,.btn-buttercup-light.disabled:hover,.btn-buttercup-light[disabled].focus,.btn-buttercup-light[disabled]:focus,.btn-buttercup-light[disabled]:hover,fieldset[disabled] .btn-buttercup-light.focus,fieldset[disabled] .btn-buttercup-light:focus,fieldset[disabled] .btn-buttercup-light:hover{background-color:#81cb71;border-color:#70c45e}
.btn-buttercup-light .badge{color:#81cb71;background-color:#fff}
/* Input */
.form-control:focus.buttercup:focus {
border-color: #81cb71;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(129, 203, 113, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(129, 203, 113, 0.6);
}
/*navbar*/
.navbar-buttercup {
background-color: #4ab62c;
border-color: #3f9b26;
}
.navbar-buttercup .navbar-brand {
color: #ffffff;
}
.navbar-buttercup .navbar-brand:hover,
.navbar-buttercup .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-buttercup .navbar-text {
color: #ffffff;
}
.navbar-buttercup .navbar-nav > li > a {
color: #ffffff;
}
.navbar-buttercup .navbar-nav > li > a:hover,
.navbar-buttercup .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-buttercup .navbar-nav > .active > a,
.navbar-buttercup .navbar-nav > .active > a:hover,
.navbar-buttercup .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #3f9b26;
}
.navbar-buttercup .navbar-nav > .disabled > a,
.navbar-buttercup .navbar-nav > .disabled > a:hover,
.navbar-buttercup .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-buttercup .navbar-toggle {
border-color: #dddddd;
}
.navbar-buttercup .navbar-toggle:hover,
.navbar-buttercup .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-buttercup .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-buttercup .navbar-collapse,
.navbar-buttercup .navbar-form {
border-color: #3e9925;
}
.navbar-buttercup .navbar-nav > .dropdown > a:hover .caret,
.navbar-buttercup .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-buttercup .navbar-nav > .open > a,
.navbar-buttercup .navbar-nav > .open > a:hover,
.navbar-buttercup .navbar-nav > .open > a:focus {
background-color: #3f9b26;
color: #c0c0c0;
}
.navbar-buttercup .navbar-nav > .open > a .caret,
.navbar-buttercup .navbar-nav > .open > a:hover .caret,
.navbar-buttercup .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-buttercup .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-buttercup .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-buttercup .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-buttercup .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-buttercup .navbar-nav .open .dropdown-menu > .active > a,
.navbar-buttercup .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-buttercup .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #3f9b26;
}
.navbar-buttercup .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-buttercup .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-buttercup .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-buttercup .navbar-link {
color: #ffffff;
}
.navbar-buttercup .navbar-link:hover {
color: #c0c0c0;
}
/*============================================*/
.navbar-buttercup-light {
background-color: #81cb71;
border-color: #6bc259;
}
.navbar-buttercup-light .navbar-brand {
color: #ffffff;
}
.navbar-buttercup-light .navbar-brand:hover,
.navbar-buttercup-light .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent;
}
.navbar-buttercup-light .navbar-text {
color: #ffffff;
}
.navbar-buttercup-light .navbar-nav > li > a {
color: #ffffff;
}
.navbar-buttercup-light .navbar-nav > li > a:hover,
.navbar-buttercup-light .navbar-nav > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-buttercup-light .navbar-nav > .active > a,
.navbar-buttercup-light .navbar-nav > .active > a:hover,
.navbar-buttercup-light .navbar-nav > .active > a:focus {
color: #c0c0c0;
background-color: #6bc259;
}
.navbar-buttercup-light .navbar-nav > .disabled > a,
.navbar-buttercup-light .navbar-nav > .disabled > a:hover,
.navbar-buttercup-light .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-buttercup-light .navbar-toggle {
border-color: #dddddd;
}
.navbar-buttercup-light .navbar-toggle:hover,
.navbar-buttercup-light .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-buttercup-light .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-buttercup-light .navbar-collapse,
.navbar-buttercup-light .navbar-form {
border-color: #6ac157;
}
.navbar-buttercup-light .navbar-nav > .dropdown > a:hover .caret,
.navbar-buttercup-light .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-buttercup-light .navbar-nav > .open > a,
.navbar-buttercup-light .navbar-nav > .open > a:hover,
.navbar-buttercup-light .navbar-nav > .open > a:focus {
background-color: #6bc259;
color: #c0c0c0;
}
.navbar-buttercup-light .navbar-nav > .open > a .caret,
.navbar-buttercup-light .navbar-nav > .open > a:hover .caret,
.navbar-buttercup-light .navbar-nav > .open > a:focus .caret {
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-buttercup-light .navbar-nav > .dropdown > a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media (max-width: 767) {
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c0c0c0;
background-color: transparent;
}
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .active > a,
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c0c0c0;
background-color: #6bc259;
}
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-buttercup-light .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-buttercup-light .navbar-link {
color: #ffffff;
}
.navbar-buttercup-light .navbar-link:hover {
color: #c0c0c0;
}
/*Fixed navbar Transparent*/
.navbar-transparent{
background:transparent;
background-image:none;
border-color:transparent;
box-shadow:none;
}
/*Fixed Focus button*/
.btn:focus {
outline: none !important;
}