<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 ---------->
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>
<header id='header'>
<div class='wrapper'>
<h1>
<a href='#'>
Converge
<abbr>UI</abbr>
</a>
</h1>
<a class='settings' href='#'>settings</a>
<div id='notifications'>
<div id='indicator'>
<span>notifications</span>
<a class='count important' href='#'>7</a>
</div>
<!-- comment out to remove notifiation dialog -->
<!--
<div class='flash-message fade-in-down'>
<div class='message'>
Things have been happening
<a href='#'>here's proof</a>
</div>
<div class='message'>
This is a warning — be warned!
</div>
<div class='form'>
<a class='btn' href='#'>view all notifications</a>
</div>
</div>
-->
<!-- -->
</div>
<a class='username' href='#'>long_username</a>
<!--
<input placeholder='Search' type='search'>
-->
<nav>
<ul id='menu'>
<!-- comment out the whole org li to see conductor style -->
<li>
<div id='org' title=' organization'>Organization Profile Name</div>
</li>
<li>
<a href='#'>dashboard</a>
</li>
<li>
<a href='#'>instances</a>
</li>
<li>
<a class='active' href='#'>environments</a>
</li>
<li>
<a href='#'>permissions</a>
</li>
<li>
<a href='#'>services</a>
</li>
<!--
<li class='search'>
<input placeholder='Search' type='search'>
</li>
-->
</ul>
</nav>
<a class='menu-link' href='#menu'>Menu</a>
</div>
</header>
<div class='wrapper'>
<nav class='tabs'>
<ul>
<li>
<a href='#'>overview</a>
</li>
<li>
<a class='active' href='#'>pools</a>
</li>
<li>
<a href='#'>catalogs</a>
</li>
<li>
<a href='#'>more?</a>
</li>
</ul>
</nav>
<div class='inset'> </div>
<div class='inset'> scroll down</div>
<div class='inset'> </div>
<div class='inset'> scroll down</div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> scroll down</div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> scroll down</div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
<div class='inset'> </div>
</div>
<footer class='footer'>
Version 3.4.5
</footer>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var h = $('body').height();
var y = $(window).scrollTop();
if( y > (h*.03) && y < (h) ){
$("#header").addClass("compact fade-in-down");
} else {
$('#header').removeClass(' compact fade-in-down');
}
});
})
// just for the demo
$(document).ready(function(){
$("nav.tabs li a").click(function(){
$(" nav.tabs li .active").removeClass("active");
$(this).addClass("active");
});
$("header nav li a").click(function(){
$("header nav li .active").removeClass("active");
$(this).addClass("active");
});
});
</script>
@import url("https://openshift.redhat.com/app/stylesheets/overpass.css");
body {
font-size: 11.5px;
}
@media only screen and (min-width: 1440px) {
body {
font-size: 12.305px;
}
}
@media only screen and (min-width: 2000px) {
body {
font-size: 13.225px;
}
}
@media only screen and (min-width: 2600px) {
body {
font-size: 17.25px;
}
}
/*temporary media query for retina*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
body {
font-size: 14px;
}
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu-link {
display: none;
}
.wrapper {
margin: 0 auto;
max-width: 95em;
position: relative;
padding: 0 1.5em;
}
#header .wrapper {
padding: 0;
}
.inset {
min-height: 8em 2em;
margin: 4em 0;
padding: 1.5em;
text-align: center;
color: #b5b9bf;
-moz-border-radius: 0.3333em;
-webkit-border-radius: 0.3333em;
border-radius: 0.3333em;
background-color: #f9fafa;
}
body {
margin: 0;
padding: 0;
line-height: 1.5em;
color: #363a3f;
font-family: sans-serif;
margin: 0 auto;
font-family: sans-serif;
position: relative;
background-color: white;
background-size: 5px;
}
#header a, nav a {
-webkit-tap-highlight-color: transparent;
}
header {
user-select: none;
margin: 0;
padding: 0;
line-height: 2.5em;
padding-top: 3em;
padding-left: 1em;
padding-right: 1em;
font-family: overpass, sans, sans-serif;
min-height: 6em;
background-color: #d0d3d7;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZDNkNyIvPjxzdG9wIG9mZnNldD0iOTAlIiBzdG9wLWNvbG9yPSIjOWE5ZmE3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjODk5MDk5Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d0d3d7), color-stop(90%, #9a9fa7), color-stop(100%, #899099));
background: -moz-linear-gradient(top, #d0d3d7 0%, #9a9fa7 90%, #899099 100%);
background: -webkit-linear-gradient(top, #d0d3d7 0%, #9a9fa7 90%, #899099 100%);
background: linear-gradient(to bottom, #d0d3d7 0%, #9a9fa7 90%, #899099 100%);
}
header a.username, header a.logout, header a.settings {
text-decoration: none;
color: #555a62;
text-shadow: 0 1px rgba(255, 255, 255, 0.23);
float: right;
display: inline-block;
margin: 0 .5em;
padding: 0em 1.5em;
line-height: 2.5em;
height: 2.5em;
-moz-border-radius: 0.1333em;
-webkit-border-radius: 0.1333em;
border-radius: 0.1333em;
}
header a.username:hover, header a.logout:hover, header a.settings:hover {
color: #333;
}
header .username {
margin-right: 0;
padding-right: 0;
}
header nav:before, header nav:after {
display: block;
content: "";
width: 100%;
clear: both;
position: relative;
}
header nav {
position: relative;
overflow: hidden;
display: table;
width: 100%;
clear: both;
margin: 0 auto;
padding-top: 1em;
padding-left: 1.5em;
padding-right: 1.5em;
border-radius: 1em 1em 0 0;
}
header nav ul {
display: table-row;
}
header nav ul li {
display: table-cell;
width: 10%;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
header nav ul li a {
-moz-transition: all 100ms ease;
-o-transition: all 100ms ease;
-webkit-transition: all 100ms ease;
transition: all 100ms ease;
width: 97%;
margin: 0 auto;
display: inline-block;
text-transform: capitalize;
text-decoration: none;
position: relative;
padding: 1em 1em 1em 1em;
height: 3.5em;
line-height: 2.5em;
/* transform: translate(0,.5em);
-webkit-transform:translate3d(0,.5em,0);
*/
color: #666c75;
text-shadow: 0 1px rgba(255, 255, 255, 0.2);
background-color: #d0d3d7;
-moz-border-radius: 0.6666em 0.6666em 0 0;
-webkit-border-radius: 0.6666em;
border-radius: 0.6666em 0.6666em 0 0;
padding-top: .75em;
text-align: center;
-moz-box-shadow: inset 0 1.75em rgba(255, 255, 255, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 1.75em rgba(255, 255, 255, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1.75em rgba(255, 255, 255, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.15);
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZDNkNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IyYjZiZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d0d3d7), color-stop(100%, #b2b6bd));
background: -moz-linear-gradient(top, #d0d3d7 0%, #b2b6bd 100%);
background: -webkit-linear-gradient(top, #d0d3d7 0%, #b2b6bd 100%);
background: linear-gradient(to bottom, #d0d3d7 0%, #b2b6bd 100%);
}
header nav ul li a.active {
transition: none;
}
header nav ul li a:focus, header nav ul li a:active {
transform: translate(0, 0em);
-webkit-transform: translate3d(0, 0em, 0);
background-color: rgba(255, 255, 255, 0.25);
color: #000;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
outline: 0;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZWRlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1YjliZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ecedee), color-stop(100%, #b5b9bf));
background: -moz-linear-gradient(top, #ecedee 0%, #b5b9bf 100%);
background: -webkit-linear-gradient(top, #ecedee 0%, #b5b9bf 100%);
background: linear-gradient(to bottom, #ecedee 0%, #b5b9bf 100%);
}
header nav ul li a:active {
color: #000;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
header nav ul li a:hover {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlZTBlMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1YjliZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dee0e2), color-stop(100%, #b5b9bf));
background: -moz-linear-gradient(top, #dee0e2 0%, #b5b9bf 100%);
background: -webkit-linear-gradient(top, #dee0e2 0%, #b5b9bf 100%);
background: linear-gradient(to bottom, #dee0e2 0%, #b5b9bf 100%);
background-color: rgba(255, 255, 255, 0.25);
color: #1f2123;
/*comment out these two ?*/
transform: translate(0, 0.15em);
-webkit-transform: translate3d(0, 0.15em, 0);
}
header nav ul li a.active {
background-color: white;
color: #363a3f;
background-image: none;
-moz-box-shadow: inset 0 1.75em transparent, inset 0 1px 0 transparent, 0 0.25em white, 0 0.25em 0.25em rgba(113, 120, 131, 0.25);
-webkit-box-shadow: inset 0 1.75em transparent, inset 0 1px 0 transparent, 0 0.25em white, 0 0.25em 0.25em rgba(113, 120, 131, 0.25);
box-shadow: inset 0 1.75em transparent, inset 0 1px 0 transparent, 0 0.25em white, 0 0.25em 0.25em rgba(113, 120, 131, 0.25);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
header nav ul li a.active:focus {
color: #222;
opacity: .7;
}
header nav ul li a.active:before {
font-size: .75em;
content: "";
position: absolute;
display: block;
bottom: -.0000001em;
left: -2em;
width: 2em;
height: 3em;
border-radius: 0 0 .6666em 0;
-moz-box-shadow: 0.5em 0.5em white;
-webkit-box-shadow: 0.5em 0.5em white;
box-shadow: 0.5em 0.5em white;
}
header nav ul li a.active:after {
font-size: .75em;
content: "";
position: absolute;
display: block;
bottom: -.0000001em;
right: -2em;
width: 2em;
height: 3em;
-moz-border-radius: 0 0 0 0.66666em;
-webkit-border-radius: 0;
border-radius: 0 0 0 0.66666em;
-moz-box-shadow: -0.5em 0.5em white;
-webkit-box-shadow: -0.5em 0.5em white;
box-shadow: -0.5em 0.5em white;
}
header input[type="search"] {
-moz-box-shadow: 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0.3em rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0.3em rgba(0, 0, 0, 0.1);
box-shadow: 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0.3em rgba(0, 0, 0, 0.1);
padding: 0;
line-height: 1em;
height: 2.5em;
outline: 0;
border: 0;
-webkit-appearance: none;
appearance: none;
border-radius: .222em;
float: right;
margin-right: .2em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1em;
width: 10em;
text-indent: .5em;
transition: all .2s ease;
background-color: rgba(255, 255, 255, 0);
}
header input[type="search"]:focus {
width: 20em;
background-color: white;
-moz-box-shadow: 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0.2em rgba(0, 0, 0, 0.732);
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0.2em rgba(0, 0, 0, 0.732);
box-shadow: 0 1px rgba(255, 255, 255, 0.25), inset 0 0 0.2em rgba(0, 0, 0, 0.732);
}
header ::-webkit-input-placeholder {
color: #6d737e;
text-shadow: 0 1px rgba(255, 255, 255, 0.2);
line-height: 1.5em;
}
header ::-moz-placeholder {
color: #6d737e;
text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}
header #org {
cursor: pointer;
position: relative;
text-align: left;
display: block;
width: 100%;
transition: all .1s ease;
background-color: rgba(227, 229, 231, 0.5);
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZWFlYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1YjliZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9eaec), color-stop(100%, #b5b9bf));
background: -moz-linear-gradient(top, #e9eaec 0%, #b5b9bf 100%);
background: -webkit-linear-gradient(top, #e9eaec 0%, #b5b9bf 100%);
background: linear-gradient(to bottom, #e9eaec 0%, #b5b9bf 100%);
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
border-radius: 0.25em;
color: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.25em 0 rgba(255, 255, 255, 0.15);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.25em 0 rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1.25em 0 rgba(255, 255, 255, 0.15);
text-indent: 1em;
width: 97%;
padding-right: 3em;
min-width: 11em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
header #org:after {
position: absolute;
top: 0;
right: 0;
content: "";
display: block;
height: 2.5em;
width: 2.5em;
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.015), inset 0 0 0 1px rgba(255, 255, 255, 0.1), -0.2em 0 0.2em -0.2em rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.015), inset 0 0 0 1px rgba(255, 255, 255, 0.1), -0.2em 0 0.2em -0.2em rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.015), inset 0 0 0 1px rgba(255, 255, 255, 0.1), -0.2em 0 0.2em -0.2em rgba(0, 0, 0, 0.2);
float: right;
border-radius: 0 .25em .25em 0;
}
header #org:before {
content: "";
border: .5em solid black;
border-width: .5em .5em 0;
border-color: #ccc transparent;
border-color: rgba(0, 0, 0, 0.2) transparent;
width: 0;
height: 0;
position: absolute;
right: 0;
margin-top: 1em;
margin-left: -4em;
margin-right: .75em;
transition: all .15s ease;
}
header #org:hover {
background-color: rgba(255, 255, 255, 0.5);
color: #333;
}
header #org:hover:before {
border-color: #666 transparent;
border-color: rgba(0, 0, 0, 0.5) transparent;
}
header h1 {
text-transform: capitalize;
margin: 0;
pading: 0;
float: left;
display: inline-block;
color: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px rgba(255, 255, 255, 0.21);
font-weight: 300;
font-size: 2em;
z-index: 3;
line-height: 1em;
text-indent: .75em;
font-family: Overpass, sans, sans-serif;
}
header h1 a {
text-decoration: none;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
}
header h1 abbr {
color: #747b86;
font-size: .75em;
}
#notifications {
padding-bottom: .5em;
user-select: none;
text-shadow: 0 1px rgba(255, 255, 255, 0.1);
float: right;
}
#notifications span {
display: none;
}
#notifications .count {
padding: 0;
min-width: 3em;
text-decoration: none;
font-weight: bold;
margin: 0;
color: #9a9fa7;
background-color: #c3c6cb;
text-align: center;
display: inline-block;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0.21em 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.25);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0.21em 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 0.21em 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.25);
padding: 0em 1em;
}
#notifications .important {
background-color: #cc0000;
-moz-box-shadow: inset 0 0 0 1px #c20000, 0 1px 0.21em 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 0 1px #c20000, 0 1px 0.21em 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px #c20000, 0 1px 0.21em 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
color: white;
border-radius: 0.3333em;
position: relative;
transition: all .31s ease 0;
}
#notifications .important:hover {
-webkit-animation: wiggle .35s ease 0;
-moz-animation: wiggle .35s ease 0;
}
#notifications .all {
border-radius: .5em;
margin-left: -.33333em;
transition: all .17s ease;
background-color: rgba(222, 224, 226, 0.5);
color: #333;
color: rgba(0, 0, 0, 0.5);
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#notifications .all:hover {
background-color: #ecedee;
}
#notifications em {
display: none;
}
#notifications .important ~ .all {
border-radius: 0 .33333em .33333em 0;
}
#notifications .flash-message {
font-family: sans, sans-serif;
z-index: 9;
-webkit-transform: translate3d(0, 0, 0);
position: absolute;
background-color: white;
padding: 0em;
min-width: 30em;
width: 15%;
display: block;
margin-right: 1.5em;
right: .5em;
color: #363a3f;
text-shadow: none;
padding-top: 1em;
border-radius: .5em;
box-shadow: 0 0 0 0.5em #616770, 0 0.1em 0.25em rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -0.5em 0.2em rgba(0, 0, 0, 0.01);
text-shadow: 0 1px rgba(0, 0, 0, 0.05);
top: 4em;
-webkit-user-select: text;
}
#notifications .flash-message:before, #notifications .flash-message:after {
content: "";
display: block;
height: 0;
width: 0;
border: 1em solid #111;
border-color: transparent transparent white;
position: absolute;
top: -1.8em;
right: 5.5em;
z-index: 4;
}
#notifications .flash-message:before {
border-bottom-color: #616770;
top: -1.5em;
border-width: 0em 1.5em 1.5em 1.5em;
right: 5em;
}
#notifications .flash-message .message {
border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);
margin-bottom: 1em;
padding: 1em;
padding-bottom: 1.5em;
padding-top: none;
line-height: 1.5em;
color: #666;
text-shadow: none;
}
#notifications .flash-message .message a {
color: #69d;
text-decoration: none;
}
#notifications .flash-message .form .btn {
color: #717883;
background-color: #fff;
padding: .75em 1em;
text-align: center;
display: block;
width: 100%;
text-decoration: underline;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZmFmYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M4Y2JkMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9fafa), color-stop(100%, #c8cbd0));
background: -moz-linear-gradient(top, #f9fafa 0%, #c8cbd0 100%);
background: -webkit-linear-gradient(top, #f9fafa 0%, #c8cbd0 100%);
background: linear-gradient(to bottom, #f9fafa 0%, #c8cbd0 100%);
margin-top: -1em;
/* W3C */
margin-top: -1em;
/* W3C */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
border-radius: 0 0 0.5em 0.5em;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
text-decoration: none;
}
#notifications .flash-message .form .btn:hover {
color: #363a3f;
}
a:focus {
outline: 0;
}
a.settings {
padding: 0 !important;
text-indent: 3em;
overflow: hidden;
width: 2.5em;
bheight: 2.5em;
display: inline-block;
position: relative;
margin: 0 2em !important;
opacity: 0.6;
transition: all .1s ease;
}
a.settings:before {
content: "";
display: block;
height: .5em;
width: 2.25em;
border-radius: .25em;
background-color: transparent;
font-size: .75em;
box-shadow: 0 3em #7e8590, 0 3.11em rgba(255, 255, 255, 0.15), 0 2em #7e8590, 0 2.11em rgba(255, 255, 255, 0.15), 0 1em #7e8590, 0 1.11em rgba(255, 255, 255, 0.15);
position: absolute;
top: -.51em;
left: .5em;
}
a.settings:hover {
opacity: 1;
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
.wiggle {
-webkit-animation: wiggle .2s ease-in infinite;
-moz-animation: wiggle .2s linear infinite;
-ms-animation: wiggle .2s linear infinite;
-o-animation: wiggle .2s linear infinite;
animation: wiggle .2s ease-in infinite;
}
/*
_
| | | o |
| | __, __| _ _ _ __| __ _ _
|/ / | / | |/-----| / |/ |-----/ | / \_| | |_/ |/ |
|__/\_/|_/\_/|_/|__/ |_/ | |_/ \_/|_/\__/ \/ \/ | |_/
|\
|/
*/
@-ms-keyframes fade-in-down {
0% {
opacity: 0;
-ms-transform: translate(0, -1em);
}
100% {
opacity: 1;
}
}
@-o-keyframes fade-in-down {
0% {
opacity: 0;
-o-transform: translate(0, -1em);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade-in-down {
0% {
opacity: 0;
-webkit-transform: translate(0, -1em);
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade-in-down {
0% {
opacity: 0;
-moz-transform: translate(0, -1em);
}
100% {
opacity: 1;
}
}
@keyframes fade-in-down {
0% {
opacity: 0;
transform: translate(0, -1em);
}
100% {
opacity: 1;
}
}
.fade-in-down, .fade-in-bottom {
-webkit-animation: fade-in-down .9s ease 0;
-moz-animation: fade-in-down .9s ease 0;
-ms-animation: fade-in-down .9s ease 0;
-o-animation: fade-in-down .9s ease 0;
animation: fade-in-down .9s ease 0;
}
.fade-out-up, .fade-out-up {
-webkit-animation: fade-out-up .2s ease 0;
-moz-animation: fade-out-up .2s ease 0;
-ms-animation: fade-out-up .2s ease 0;
-o-animation: fade-out-up .2s ease 0;
animation: fade-out-up .2s ease 0;
}
/*
@-webkit-keyframes fade-out-up{ 0% { opacity: 1;} 100% { opacity: 0; transform: translate(0,-1em);}}
@-moz-keyfr 100% { opacity: 0; transform: translate(0,-1em);}}
@keyframes fade-out-up{ 0% { opacity: 1;} 100% { opacity: 0; transform: translate(0,-1em);}}
*/
li.search {
width: .1%;
}
li.search input[type="search"] {
margin: 0;
margin-bottom: .25em;
vertical-align: top;
transform: translate(0em, 1em);
display: block;
width: 8em;
background-color: rgba(255, 255, 255, 0);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.13);
border-radius: .3333333em;
}
li.search input[type="search"]:focus {
width: 22em;
background-color: white;
}
li.search input[type="search"]::-webkit-input-placeholder {
line-height: 1.5em;
}
/*a terrible hack - will fix soon*/
@media (max-width: 40em) {
#header h1 {
width: 100%;
clear: both;
margin-bottom: 1em;
}
#header nav, #header nav ul, #header nav ul li, #header nav ul li a {
color: #4e535a !important;
display: block;
line-height: 2.5em;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: .3333em !important;
text-align: left;
text-indent: 1.5em;
background-image: none;
}
#header nav:after, #header nav:before, #header nav ul:after, #header nav ul:before, #header nav ul li:after, #header nav ul li:before, #header nav ul li a:after, #header nav ul li a:before {
display: none !important;
}
#header nav, #header nav ul {
display: block;
}
#header nav ul li {
display: inline !important;
}
#header nav ul li a {
height: 2.5em !important;
float: left;
display: inline-block !important;
}
#header nav ul li a.active {
display: none;
}
}
header {
z-index: 2;
position: relative;
}
.footer {
/*no fixed footer*/
/*position: fixed; */
width: 100%;
background-color: #e9eaec;
box-shadow: 0 -1px #d0d3d7, inset 0 1px white;
bottom: 0;
min-height: 2.5em;
line-height: 2.5em;
text-align: center;
margin: 0em;
border-radius: 0;
z-index: 1;
color: #b5b9bf;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
.compact {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U5ZWFlYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I1YjliZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9eaec), color-stop(100%, #b5b9bf));
background: -moz-linear-gradient(top, #e9eaec 0%, #b5b9bf 100%);
background: -webkit-linear-gradient(top, #e9eaec 0%, #b5b9bf 100%);
background: linear-gradient(to bottom, #e9eaec 0%, #b5b9bf 100%);
position: fixed;
height: 4em;
vertical-align: middle;
min-height: 0;
top: 0;
padding: 0;
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.2);
margin: 0;
width: 100%;
/**/
}
.compact #notifications .flash-message {
right: -6em;
}
.compact a.username {
display: none;
}
.compact h1 {
display: inline-block;
vertical-align: middle;
position: absolute;
top: .75em;
left: 0;
zoom: .7;
-webkit-transform: translate(0, 0.25em);
}
.compact a.settings, .compact #notifications {
z-index: 3;
position: absolute;
top: .75em;
}
.compact a.settings .important:hover, .compact #notifications .important:hover {
-webkit-animation: wiggle .2s ease infinite;
}
.compact #notifications {
right: 6em;
}
.compact a.settings {
right: 0em;
}
.compact nav {
position: absolute;
top: 0 !important;
margin: 0;
height: 5em;
overflow: hidden;
padding-top: 0;
padding-right: 12em !important;
padding-left: 13em !important;
}
.compact nav a.active {
box-shadow: none;
}
.compact nav a.active:before, .compact nav a.active:after {
display: none;
}
.compact nav ul {
height: 5em;
margin-left: 3em;
}
.compact nav li {
line-height: 3em;
}
.compact nav ul li a {
width: 100%;
display: block;
vertical-align: middle;
background-color: transparent;
background-image: none;
box-shadow: none;
border-radius: 0 0 !important;
margin: 0em;
height: 4em;
}
.compact nav ul li a:hover {
transform: 0;
background-image: none;
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.compact nav ul li a.active {
background-color: #fff;
background-image: none;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZmFmYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9fafa), color-stop(25%, #ffffff));
background: -moz-linear-gradient(top, #f9fafa, #ffffff 25%);
background: -webkit-linear-gradient(top, #f9fafa, #ffffff 25%);
background: linear-gradient(to bottom, #f9fafa, #ffffff 25%);
-moz-box-shadow: inset 1px 0 rgba(0, 0, 0, 0.14), inset -1px 0 rgba(0, 0, 0, 0.14), inset 0 0em 0.5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: inset 1px 0 rgba(0, 0, 0, 0.14), inset -1px 0 rgba(0, 0, 0, 0.14), inset 0 0em 0.5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.14), inset -1px 0 rgba(0, 0, 0, 0.14), inset 0 0em 0.5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.compact nav ul li a ul li {
line-height: 2.5em;
}
.compact #org {
background: linear-gradient white, #c0c3c8 95%;
min-width: 2em;
max-width: 15em;
text-overflow: ellipsis;
display: block;
text-indent: 1em;
line-height: 2.5em;
padding-right: 3em;
margin-left: 3em;
}
.compact #org:before {
right: 0;
position: absolute;
}
.compact .wrapper {
position: relative;
}
.compact:after {
height: .2em;
width: 100%;
content: "";
display: block;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(95%, rgba(0, 0, 0, 0)));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 95%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 95%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 95%);
position: fixed;
top: 4em;
}
@media (max-width: 50em) {
header.compact #org {
display: none;
}
header.compact nav {
padding-left: 3em !important;
margin-left: 0;
}
}
@media (max-width: 50em) {
#header.compact nav ul {
display: none !important;
}
#header.compact .menu-link {
display: block;
height: 3.5em;
vertical-align: center;
position: absolute;
z-index: 3;
top: 0;
width: 12em;
box-shadow: inset 0 0.1em 0.333em rgba(0, 0, 0, 0.2);
text-align: center;
margin: 0;
margin-left: -6em;
left: 50%;
text-indent: none;
text-decoration: none;
color: #4e535a;
line-height: 3em;
padding: 0 2em;
border-radius: 0 0 .6em .6em;
}
#header.compact .menu-link:hover {
background-color: rgba(0, 0, 0, 0.85);
color: white !important;
}
}
.tabs {
-moz-box-shadow: inset 0 0.1115em 0.5em rgba(126, 133, 144, 0.25);
-webkit-box-shadow: inset 0 0.1115em 0.5em rgba(126, 133, 144, 0.25);
box-shadow: inset 0 0.1115em 0.5em rgba(126, 133, 144, 0.25);
border: 1px solid #e3e5e7;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0ZjVmNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f4f5f5));
background: -moz-linear-gradient(top, #ffffff 0%, #f4f5f5 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #f4f5f5 100%);
background: linear-gradient(to bottom, #ffffff 0%, #f4f5f5 100%);
display: table;
min-height: 4em;
line-height: 4em;
width: 100%;
margin: 3em auto;
-moz-border-radius: 0.3333em 0.3333em 0 0;
-webkit-border-radius: 0.3333em;
border-radius: 0.3333em 0.3333em 0 0;
}
.tabs:after {
content: "";
display: block;
width: 100%;
clear: both;
}
.tabs ul {
list-style: none;
display: table-row;
}
.tabs ul li {
display: table-cell;
width: 1%;
}
.tabs ul li a {
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
display: block;
text-align: center;
text-transform: capitalize;
height: 4em;
font-family: overpass, sans-serif, sans;
text-decoration: none;
min-width: 7em;
max-width: 20em;
margin: 0 auto;
color: #b5b9bf;
}
.tabs ul li a:hover {
color: #363a3f;
border-bottom: 0.25em solid #d0d3d7;
}
.tabs ul li a.active {
position: relative;
color: #4e535a;
border-bottom: 0.25em solid #4e9fdd;
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDdlOWY3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(70%, rgba(255, 255, 255, 0)), color-stop(100%, #d7e9f7));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 70%, #d7e9f7 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 70%, #d7e9f7 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, #d7e9f7 100%);
}
.tabs ul li a.active:after {
content: "";
display: block;
border-color: #4e9fdd transparent;
border-width: .75em .75em 0 .75em;
border-style: solid;
width: 0;
height: 0;
position: absolute;
bottom: -.75em;
left: 50%;
margin-left: -.75em;
z-index: 1;
}
