#menu {
.column(12);
padding-top: @gutter/2;
#logoJust {
display: block;
width: 69px;
height: 51px;
margin-bottom: 9px;
background: url(../images/logoJustWhite.png) no-repeat;
}
input[type = "text"]
{
float: right;
width: @column-width*3+@gutter*2;
}
.horizontal {
height: @gutter;
text-transform: capitalize;
position: relative;
a {
color: @colorMiddle;
}
h3, h4 {
text-transform: uppercase;
}
h3 {
font-size: 1.125em;
height: @gutter;
a {
display: block;
width: 100%;
padding: @gutter/10 @gutter 0 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: @colorOpt;
}
}
&>li {
margin: 0;
height: @gutter;
padding-bottom: @gutter/2;
transition: background 300ms ease;
&>ul {
position: absolute;
left: -@gutter*2;
padding: @gutter/4 @gutter*2 @gutter @gutter*2;
top: @gutter*2;
.column(12);
max-width: 100%;
margin: 0;
display: none;
/*background: mix(rgba(red(@colorMiddle),green(@colorMiddle),blue(@colorMiddle),0.5),rgba(red(@colorLight),green(@colorLight),blue(@colorLight),0.9), 10%);*/
background: @colorOptLight;
background: rgba(red(@colorOptLight),green(@colorOptLight),blue(@colorOptLight),0.95);
box-shadow: inset 0px 0px 3px -1px @colorMiddle;
z-index: 10;
&>li {
float: left;
padding: @gutter/5 @gutter 0 0;
width: @column-width*3px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
&.description {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
ul {
margin-top: 0;
}
h4 {
margin-bottom: @gutter;
}
li {
float: left;
width: @column-width*3px;
padding: 0 @gutter 0 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-transform: none;
a {
color: @colorDark;
transition: color 300ms ease;
&:hover {
color: @colorBrightDark;
}
}
}
}
&>h4>a{
color: @colorDark;
}
&:hover > h4 {
a {
border-bottom: 1px solid @colorMiddle;
margin-bottom: -1px;
&:hover {
border-bottom-color: @colorBrightDark;
}
}
}
&>ul {
margin-top: @fontSize/2;
li {
padding-bottom: @gutter/4;
}
}
}
}
&:hover {
padding-bottom: @gutter;
ul {
display: block;
}
& > h3 a {
color: @colorLight;
}
}
}
li:hover>a, a:hover {
color: @colorBrightDark;
}
}
}