|
|
| Line 4: |
Line 4: |
| | | | |
| | <style> | | <style> |
| − |
| |
| − | <!-- Superfish.css -->
| |
| − | /*menu with jquery.horizontalNav.js*/
| |
| − |
| |
| − | nav {
| |
| − | position:relative;
| |
| − | z-index: 11;
| |
| − | margin-top: 35px;
| |
| − | margin-bottom: 32px;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .sf-menu { display: inline-block;}
| |
| − | .sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
| |
| − | .sf-menu li { padding-left:0px; position:relative; background: none;}
| |
| − | .sf-menu a {
| |
| − | display: block;
| |
| − | text-decoration: none;
| |
| − | text-transform: uppercase;
| |
| − | font-family: 'Stint Ultra Condensed', cursive;
| |
| − | }
| |
| − | .sf-menu a:hover {text-decoration: none;}
| |
| − |
| |
| − | /*================================>> 1 Level <<========================================*/
| |
| − |
| |
| − | li.sfHover {position: relative;}
| |
| − |
| |
| − | .sf-menu > li > a {
| |
| − | position: relative;
| |
| − | display:block;
| |
| − | padding: 0px 0px 0px;
| |
| − | text-align: center;
| |
| − | -moz-transition: background 0.3s ease-out;
| |
| − | -o-transition: background 0.3s ease-out;
| |
| − | -webkit-transition: background 0.3s ease-out;
| |
| − | font-size: 24px;
| |
| − | color: #513f25;
| |
| − | line-height: 24px;
| |
| − | }
| |
| − | .sf-menu > li {
| |
| − | display: block;
| |
| − | margin: 0 26px;
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | }
| |
| − | .sf-menu > li.current > a,
| |
| − | .sf-menu > li:hover > a,
| |
| − | .sf-menu > li.sfHover > a { color: #ecd78b;}
| |
| − |
| |
| − | .sf-menu > li:hover > a,
| |
| − | .sf-menu > li.current > a,
| |
| − | .sf-menu > li.sfHover > a,
| |
| − | .sf-menu > li:hover > span,
| |
| − | .sf-menu > li.current > span,
| |
| − | .sf-menu > li.sfHover > span {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .sf-menu li span {
| |
| − | position: absolute;
| |
| − | right: 50%;
| |
| − | top: 26px;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | margin-right: -4px;
| |
| − | border: 5px solid;
| |
| − | border-color: #513f25 transparent transparent transparent;
| |
| − | }
| |
| − | .sf-menu > li a:hover > span,
| |
| − | .sf-menu > li.current > a span,
| |
| − | .sf-menu > li.sfHover > a span {border-color: #ecd78b transparent transparent transparent;}
| |
| − |
| |
| − | /*================================>> 2 Level <<========================================*/
| |
| − |
| |
| − | .sf-menu > li > ul,
| |
| − | .sf-menu > li.sfHover > ul {
| |
| − | top: 41px;
| |
| − | left: 50%;
| |
| − | margin-left: -47px;
| |
| − | width:97px;
| |
| − | z-index:99;
| |
| − | background: #5e321f url(../images/bg-2.gif) 0 0 repeat;
| |
| − | text-align: center;
| |
| − | padding: 23px 0px 19px;
| |
| − | }
| |
| − | .sf-menu > li > ul > li { width:100%; height: auto; margin: 0; line-height: 30px;}
| |
| − |
| |
| − | .sf-menu > li > ul > li > a {
| |
| − | display: inline-block;
| |
| − | border: none;
| |
| − | color: #fff;
| |
| − | font-size: 18px;
| |
| − | line-height: 30px;
| |
| − | -moz-transition: color 0.3s ease-out;
| |
| − | -o-transition: color 0.3s ease-out;
| |
| − | -webkit-transition: color 0.3s ease-out;
| |
| − | }
| |
| − | .sf-menu li li a:hover,
| |
| − | .sf-menu li.sfHover li.sfHover>a,
| |
| − | .sf-menu li li:hover span,
| |
| − | .sf-menu li.sfHover li.sfHover span {
| |
| − | text-decoration: none;
| |
| − | color: #ecd78b;
| |
| − | }
| |
| − | .sf-menu li li:hover,
| |
| − | .sf-menu li.sfHover li.sfHover { }
| |
| − |
| |
| − | .sf-menu > li.sfHover > span {
| |
| − | color: #ffffff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .sf-menu > li > ul:after {
| |
| − | position: absolute;
| |
| − | content: "";
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border: 4px solid;
| |
| − | border-color: transparent transparent #62321d transparent;
| |
| − | top: -8px;
| |
| − | left: 50%;
| |
| − | margin-left: -6px;
| |
| − | }
| |
| − |
| |
| − | .sf-menu > li li > a > span {
| |
| − | position: absolute;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border: 4px solid;
| |
| − | border-color: #fff transparent transparent transparent;
| |
| − | top: 25px;
| |
| − | left: 50%;
| |
| − | margin-left: -6px;
| |
| − | }
| |
| − | .sf-menu > li li:hover > a > span,
| |
| − | .sf-menu > li li.sfHover > a > span { border-color: #ecd78b transparent transparent transparent;}
| |
| − |
| |
| − | /*================================>> 3 Level <<========================================*/
| |
| − |
| |
| − | .sf-menu li li ul {
| |
| − | left: 97px;
| |
| − | top: -16px;
| |
| − | width: 88px;
| |
| − | z-index:99;
| |
| − | background: #970a00 url(../images/bg-3.gif) 0 0 repeat;
| |
| − | position: absolute;
| |
| − | padding-top: 16px;
| |
| − | padding-bottom: 15px;
| |
| − | margin-top: 0;
| |
| − | text-align: left;
| |
| − | text-align: left;
| |
| − | }
| |
| − | .sf-menu li li ul:after {
| |
| − | position: absolute;
| |
| − | content: "";
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | border: 4px solid;
| |
| − | border-color: transparent #990c00 transparent transparent;
| |
| − | top: 26px;
| |
| − | left: -8px;
| |
| − | }
| |
| − | .sf-menu li li li {width: 100%; padding-left: 20px;}
| |
| − | .sf-menu li li li a {
| |
| − | display: inline-block;
| |
| − | text-decoration: none;
| |
| − | color: #fff;
| |
| − | font-size: 18px;
| |
| − | line-height: 30px;
| |
| − | -moz-transition: color 0.3s ease-out;
| |
| − | -o-transition: color 0.3s ease-out;
| |
| − | -webkit-transition: color 0.3s ease-out;
| |
| − | }
| |
| − | .sf-menu li li li:hover {}
| |
| − | .sf-menu li li li:hover a { color: #fff0c7;}
| |
| − | .sf-menu > li > ul .sf-sub-indicator {color: #ffffff; line-height: 15px;}
| |
| − | .sf-menu > li > li.sfHover > span { color: #ffffff;}
| |
| − |
| |
| − | /*==================================RESPONSIVE LAYOUTS===============================================*/
| |
| − |
| |
| − | @media only screen and (max-width: 995px) {
| |
| − | /*.sf-menu > li { margin: 0 15px;}*/
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 767px) {
| |
| − | .sf-menu { display:none !important;}
| |
| − | nav { float: none; margin-left: 0; margin-bottom: 0; margin-top: 15px;}
| |
| − |
| |
| − | nav select {
| |
| − | height: 35px;
| |
| − | border: 1px solid #f0ab36;
| |
| − | font-family: Trebuchet MS, sans-serif;
| |
| − | font-size: 14px;
| |
| − | line-height: 20px;
| |
| − | color: #ffffff;
| |
| − | background-color: #f0ab36;
| |
| − | width:420px;
| |
| − | width: 300px;
| |
| − | outline: none;
| |
| − | padding: 5px;
| |
| − | font-weight: normal;
| |
| − | margin-top: 0px;
| |
| − | margin-bottom: 25px;
| |
| − | }
| |
| − |
| |
| − | nav select option:first-child {
| |
| − | color:#ffffff;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 479px) {
| |
| − |
| |
| − | }
| |
| | | | |
| | <!-- Reset.css --> | | <!-- Reset.css --> |