$header-height: 30px;
#header{
height: $header-height;
padding: 30px 0;
border-bottom: 1px solid $color-gray04;
line-height: $header-height;
@media screen and (max-width: 1040px){
height: auto;
position: relative;
padding-bottom: 10px;
}
a{
color: $color-gray01;
@include transition(color 0.3s);
&:hover{
color: $color-main;
}
}
h1{
float: left;
font-weight: 300;
font-size: 30px;
@media screen and (max-width: 1040px){
float: none;
}
}
}
#main-nav{
float: left;
margin-left: 30px;
@media screen and (max-width: 1040px){
float: none;
margin-left: 0;
margin-top: 15px;
}
>ul{
@media screen and (max-width: 600px){
display: none;
}
>li{
margin-left: 50px;
@include inline-block;
@media screen and (max-width: 1040px){
margin-left: 0;
margin-right: 50px;
&:last-of-type{
margin-right: 0;
}
}
&:hover{
>a{
color: $color-main;
}
}
>a{
padding: 38px 0;
margin-top: -38px;
&:after{
content: "\f078";
color: $color-gray03;
font: 12px $font-icon;
padding-left: 10px;
}
&:only-child{
&:after{
content: "";
}
}
@media screen and (max-width: 1040px){
padding: 18px 0;
}
}
}
ul{
position: absolute;
top: 60px;
left: -15px;
z-index: 10;
white-space: nowrap;
background: $color-gray04;
border: 1px solid $color-gray03;
list-style: none;
display: none;
@media screen and (max-width: 1040px){
top: 40px;
}
@include box-shadow(0 4px 8px rgba(0,0,0,0.1));
@include border-radius(0 0 5px 5px);
ul{
@include border-radius(0 5px 5px 5px);
}
li{
@include border-shadow($color-background, $color-gray03);
&:hover{
background: #d5d5d5;
}
&:first-of-type{
border-top: none;
ul{
@include border-radius(0 0 5px 5px);
}
}