/*
99Lime.com HTML KickStart by Joshua Gatcke
kickstart-menus.css
*/
.menu {
margin: 0;
padding: 0;
line-height: 100%;
font-size: 0;
position: relative;
z-index: 1000;
}
.menu:after {
clear: both;
content: " ";
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.menu li {
margin: 0;
padding: 0;
list-style-type: none;
display: inline-block;
position: relative;
zoom: 1;
line-height: inherit;
top: 0;
left: 0;
font-size: 16px;
}
.menu li a {
margin: 0;
padding: 0;
display: block;
display: inline;
display: inline-block;
position: relative;
zoom: 1;
line-height: 100%;
top: 0;
left: 0;
}
/*--------------Sub Menus-------------------*/
/*.menu li:hover > ul{display:block;}*/
.menu ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
left: 0;
display: none;
min-width: 150px;
}
.menu ul li {
display: block;
width: 100%;
}
.menu ul li a {
display: block;
}
.menu ul ul {
top: 0;
left: 100%;
}
/*--------------Right---------------------*/
.menu li.right {
float: right;
}
/*--------------Arrows-------------------*/
.menu li.has-menu a {
padding-right: 25px;
}
.menu li.has-menu span.arrow {
border-style: solid;
border-width: 5px;
display: block;
position: absolute;
top: 50%;
right: 5px;
font-size: 0;
line-height: 0;
height: 0;
width: 0;
}
.menu li li.has-menu span.arrow {
margin-top: -4px;
}
/*--------------Vertical Menu Layout-------------------*/
.menu.vertical li {
display: block;
}
.menu.vertical li a {
display: block;
}
.menu.vertical ul {
top: 0;
left: 100%;
}
.menu.vertical li.has-menu span.arrow {
margin-top: -4px;
}
/*--------------Vertical Right Menu Layout-------------------*/
.menu.vertical.right {
text-align: left;
}
.menu.vertical.right ul {
top: 0;
right: 100%;
left: auto;
}
.menu.vertical.right li a {
padding-left: 25px;
padding-right: 20px;
}
.menu.vertical.right li.has-menu span.arrow {
right: auto;
left: 5px;
margin-top: -4px;
}
/*---------------------------------
MENU STYLES
EDIT BELOW THIS LINE TO CUSTOMIZE
-----------------------------------*/
.menu {
z-index: 600;
}
.menu li a {
text-shadow: 0px 1px 1px #fff;
padding: 15px 20px;
text-decoration: none;
font-size: 0.9em;
color: #777;
}
.menu li.current > a,
.menu li.current > a:hover,
.menu li.current.hover > a {
background: rgb(122, 188, 255); /* Old browsers */
background: linear-gradient(
to top,
rgba(122, 188, 255, 1) 0%,
rgba(96, 171, 248, 1) 44%,
rgba(64, 150, 238, 1) 100%
); /* W3C */
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
cursor: default;
}
/* arrows */
/* arrow down */
.menu li.has-menu span.arrow {
border-color: #ccc transparent transparent transparent;
}
/* arrow left */
.menu li li.has-menu span.arrow,
.menu.vertical li.has-menu span.arrow {
border-color: transparent transparent transparent #ccc;
}
/* arrow right */
.menu.vertical.right li.has-menu span.arrow {
border-color: transparent #ccc transparent transparent;
}
.menu li.menu-toggle {
display: none;
}
@media all and (max-width: 768px) {
.grid .menu li,
.grid .menu.vertical li,
.grid .menu.vertical.right li {
display: block;
display: none;
}
.grid .menu li.menu-toggle,
.grid .menu.vertical li.menu-toggle,
.grid .menu.vertical.right li.menu-toggle {
display: block;
}
.grid .menu:hover li,
.grid .menu.vertical:hover li,
.grid .menu.vertical.right:hover li {
display: block;
}
/* arrows */
.grid .menu li.has-menu span.arrow,
.grid .menu.vertical li.has-menu span.arrow,
.grid .menu.vertical.right li.has-menu span.arrow,
.grid .menu li li.has-menu span.arrow,
.menu.vertical li.has-menu span.arrow {
border-color: #ccc transparent transparent transparent;
}
.grid .menu.vertical.right li.has-menu span.arrow {
right: 5px;
left: auto;
}
.grid .menu li a {
display: block;
}
.grid .menu ul,
.grid .menu ul ul,
.grid .menu.vertical ul,
.grid .menu.vertical.right ul {
position: relative;
top: 0;
left: 0;
margin: 10px;
}
}