/* 1. Mega Menu Bar */
.mgmenu ul li {/*margin-bottom:10px;*/}
.mgmenu_container,
.mgmenu_fixed,
.mgmenu_footer {
height: 48px;
z-index:10;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
/* background: url("images/wbg.gif") repeat-x scroll center top rgba(0, 0, 0, 0);*/
/* background: url("images/tab_menu.png") repeat-x scroll 0 0 #272727;
box-shadow: 0 3px 8px rgba(255, 255, 255, 0.125) inset;
color: #555555*/
}
.mgmenu_container {
position:relative;
margin:0 auto;
margin-left: 10px;
margin-right: 10px;
}
.mgmenu_fixed,
.mgmenu_footer {
width: inherit;
max-width: inherit;
position:fixed;
top:50;
/* IE7 Fix */
*width:expression(this.parentNode.currentStyle['width']);
}
.mgmenu_footer {
top: auto;
bottom:0;
}
.mgmenu {
list-style:none;
padding:0;
margin:0;
position:relative; /* For IE7 */
line-height:1;
}
.mgmenu > li {
/* background-color:#0d5499;*/
height:25px;
float: left;
margin: 0;
margin-left:-1px;
margin-top:5px;
padding-right: 8px;
padding-left:8px;
-webkit-transition:background .3s;
-moz-transition:background .3s;
-o-transition:background .3s;
-ms-transition:background .3s;
transition:background .3s;
border-left:1px solid #dbbb7c;
border-right:1px solid #dbbb7c;
}
.mgmenu > li:hover,
.mgmenu > li.active {
/*background-color:rgba(122, 181, 51, 0.625) !important;
box-shadow: 0 3px 8px rgba(255, 255, 255, 0.125) inset;*/
color:#dbbb7c;
}
.mgmenu li.noactive {
background:none;
}
.mgmenu > li > a,
.mgmenu > li > span {
display: block;
color:#FFF ;
/*text-transform:uppercase;
text-shadow:1px 1px 1px #000;*/
outline:0;
font-size:0.9em;
margin-top:-2px;
text-decoration:none;
padding:1px 5px 6px 5px; /*(top,right,bottom,left)*/
height:37px;
/* background:url("images/cursor_menu.png"); background-repeat:no-repeat; background-position:center bottom; */
}
.cursor_menu {/* background:url("images/cursor_menu.png"); background-repeat:no-repeat; background-position:center bottom; */}
.mgmenu .menu_1.active{color:#dbbb7c !important; }
.mgmenu .menu_2.active{color:#FFFFFF !important; }
.mgmenu > li > a > span:hover,
.mgmenu > li > a > span:focus,
.mgmenu > li > span:hover,
.mgmenu > li > a:hover,
.mgmenu > li > a:focus {
cursor:pointer;
color:#FFF !important;
outline:none;
}
.mgmenu > li .mgmenu_drop {
background-image:url("images/mgmenu/downArrow.png");
background-repeat: no-repeat;
background-position:right 19px;
padding-right:20px;
}
.mgmenu_footer .mgmenu > li .mgmenu_drop {
background-image:url("images/mgmenu/upArrow.png");
}
.mgmenu > li.right_item {
float:right;
margin-right:0;
}
.mgmenu_container > .mgmenu > li.mgmenu_button,
.mgmenu_fixed > .mgmenu > li.mgmenu_button,
.mgmenu_footer > .mgmenu > li.mgmenu_button {
display: none;
cursor: pointer;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
font-weight: bold;
background-color:transparent;
background-image:url("images/mgmenu/toggle.png");
background-repeat: no-repeat;
background-position:96% 10px;
line-height:12px;
padding:14px 4% 14px 4%;
color:#ffffff;
text-shadow:1px 1px 1px #000000;
}
.mgmenu_container > .mgmenu > li.mgmenu_button_active,
.mgmenu_fixed > .mgmenu > li.mgmenu_button_active,
.mgmenu_footer > .mgmenu > li.mgmenu_button_active {
background-color:#000000;
}
/* 2. Mega Menu Trigger Button */
.mgmenu_trigger {
position: fixed;
z-index:2;
margin:0 auto;
right:0;
margin-right: 20px;
width:35px;
height:41px;
display: block;
}
.mgmenu_trigger {
top: 0;
background-image:url("images/mgmenu/button_up.png");
background-position:center center;
background-repeat:no-repeat;
background-color: #121212;
}
.mgmenu_trigger.active {
background-image:url("images/mgmenu/button_down.png");
}
.mgmenu_footer ~ .mgmenu_trigger {
top:auto;
bottom: 0;
background-image:url("images/mgmenu/button_down.png");
}
.mgmenu_footer ~ .mgmenu_trigger.active {
background-image:url("images/mgmenu/button_up.png");
}
/* _______________________________________
02 DROP DOWNS
_______________________________________ */
/* 1. Common Styling */
.mgmenu li .dropdown_container,
.mgmenu li .dropdown_fullwidth,
.mgmenu li .mgmenu_multilevel {
position:absolute;
top:auto;
display: none;
float:left;
zoom:1;
z-index: 10;
/*margin:0px 0 40px -1px;
padding:20px 0 6px 0;*/
margin-left:-9px;
margin-top:-9px;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
-o-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
box-shadow: 0 2px 2px rgba(0,0,0,0.05);
/*border:1px solid #959192;
border-top:none;*/
background:rgba(231,213,151,0.90);
color: #000;
padding-bottom:10px;
}
.mgmenu li .dropdown_container {
left:auto;
overflow:hidden;
}
.mgmenu li .dropdown_fullwidth {
left:0;
}
.mgmenu li.right_item .dropdown_container {
left:auto;
right:-1px;
}
/* 2. Footer */
.mgmenu_footer .mgmenu > li .dropdown_container,
.mgmenu_footer .mgmenu > li .dropdown_fullwidth,
.mgmenu_footer .mgmenu > li .mgmenu_multilevel {
margin:0 0 0 -1px;
top:auto;
bottom:0;
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
-webkit-box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
-o-box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
box-shadow: 0 -2px 2px rgba(0,0,0,0.05);
border:1px solid #CCCCCC;
border-bottom:none;
}
.mgmenu > li:hover .dropdown_container,
.mgmenu > li:hover .dropdown_fullwidth,
.mgmenu > li.right_item:hover .dropdown_container {
display: block;
}
/* 3. Drop Down Containers */
.mgmenu li .dropdown_1column {
width: 8.3334%;
}
.mgmenu li .dropdown_2columns {
width: 16.6667%;
}
.mgmenu li .dropdown_3columns {
width: 25%;
}
.mgmenu li .dropdown_4columns {
width: 33.3334%;
}
.mgmenu li .dropdown_5columns {
width: 41.6667%;
}
.mgmenu li .dropdown_6columns {
width: 50%;
}
.mgmenu li .dropdown_7columns {
width: 58.3334%;
}
.mgmenu li .dropdown_8columns {
width: 66.6667%;
}
.mgmenu li .dropdown_9columns {
width: 75%;
}
.mgmenu li .dropdown_10columns {
width: 83.3334%;
}
.mgmenu li .dropdown_11columns {
width: 91.6667%;
}
.mgmenu li .dropdown_fullwidth {
width: 100%;
}
/* _______________________________________
03 COLUMNS GRID
_______________________________________ */
.mgmenu .col_1,
.mgmenu .col_2,
.mgmenu .col_3,
.mgmenu .col_4,
.mgmenu .col_5,
.mgmenu .col_6,
.mgmenu .col_7,
.mgmenu .col_8,
.mgmenu .col_9,
.mgmenu .col_10,
.mgmenu .col_11,
.mgmenu .col_12 {
float: left;
display:inline;
position: relative;
padding-left: 2%;
padding-right: 2%;
/*
Rounding error with IE7.
Lower margin values will absorb the difference.
*/
*padding-left: 1.9%;
*padding-right: 1.9%;
}
.mgmenu .col_1 {width:4.33%;}
.mgmenu .col_2 {width:12.66%;}
.mgmenu .col_3 {width:21%;}
.mgmenu .col_4 {width:29.33%;}
.mgmenu .col_5 {width:37.66%;}
.mgmenu .col_6 {width:46%;}
.mgmenu .col_7 {width:54.33%;}
.mgmenu .col_8 {width:62.66%;}
.mgmenu .col_9 {width:71%;}
.mgmenu .col_10 {width:79.33%;}
.mgmenu .col_11 {width:87.66%;}
.mgmenu .col_12 {width:96%;}
.mgmenu .clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 18px;
}
.mgmenu .col_border {
-webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.15);
-moz-box-shadow: -1px 0 0 rgba(0,0,0,0.15);
-o-box-shadow: -1px 0 0 rgba(0,0,0,0.15);
box-shadow: -1px 0 0 rgba(0,0,0,0.15);
}
/* _______________________________________________
04 MULTILEVEL DROP DOWN
_______________________________________________ */
.mgmenu .dropdown_flyout,
.mgmenu .dropdown_flyout .dropdown_flyout_level {
padding: 0;
margin: 0;
margin-top:10px;
list-style: none;
z-index: 9;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
text-align:left;
}
.mgmenu .dropdown_flyout .dropdown_flyout_level {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
-o-box-shadow: 0 2px 2px rgba(0,0,0,0.05);
box-shadow: 0 2px 2px rgba(0,0,0,0.05);
border:1px solid #666;
background: #f8f8f8;
}
.mgmenu .dropdown_flyout li {
float: left;
width: 100%;
/*margin-left:-22px;
margin-right:-22px;*/
/*padding: 3px 0 3px 0;*/
}
.mgmenu .dropdown_flyout ul li {
width: 160px;
/*padding: 3px 10px 3px 10px;*/
}
.mgmenu .dropdown_flyout li.last {
/*margin-bottom: 12px;*/
}
.mgmenu .dropdown_flyout a {
display: block;
width: 100%;
padding-top:6px;
padding-left:10px;
}
.mgmenu .dropdown_flyout .dropdown_flyout_level {
position: absolute;
margin:15px 0 0 4px;
padding:6px;
left:98%;
top:-21px;
display: none;
zoom:1;
float: left;
}
.mgmenu .dropdown_flyout .dropdown_flyout_level_left {
left:-102%;
right:100%;
}
.mgmenu .dropdown_flyout .dropdown_parent {
background:url("images/mgmenu/rightArrow.png") no-repeat 90% 9px;
cursor:pointer;
}
.mgmenu .dropdown_flyout .dropdown_parent:hover {
color:#666;
}
.mgmenu .dropdown_flyout .dropdown_parent_left {
background:url("images/mgmenu/leftArrow.png") no-repeat 90% 9px;
}
.mgmenu .dropdown_flyout li:hover > .dropdown_flyout_level,
.mgmenu .dropdown_flyout li:hover > .dropdown_flyout_level_left {
display: block;
}
.mgmenu .dropdown_flyout .flyout_heading {
/*font-family: Georgia, Times, "Times New Roman", serif;*/
padding-bottom: 9px;
margin-bottom: 9px;
/*font-size: 16px;*/
border-bottom: 1px solid #cccccc;
-webkit-box-shadow:0 1px 1px #f4f4f4;
-moz-box-shadow:0 1px 1px #f4f4f4;
-o-box-shadow:0 1px 1px #f4f4f4;
box-shadow:0 1px 1px #f4f4f4;
}
/* _______________________________________
05 CONTENT & TYPOGRAPHY
_______________________________________ */
/* 1. Basic Typography */
.mgmenu p,
.mgmenu h1,
.mgmenu h2,
.mgmenu h3,
.mgmenu h4,
.mgmenu h5,
.mgmenu h6 {
padding:0;
margin:0;
font-weight: normal;
color:#222222;
text-shadow:1px 1px 1px #ffffff;
margin-bottom:18px;
}
.mgmenu h1,
.mgmenu h2,
.mgmenu h3,
.mgmenu h4,
.mgmenu h5,
.mgmenu h6 {
/*font-family: Georgia, Times, "Times New Roman", serif;*/
}
.mgmenu p {
font-size:12px;
}
.mgmenu h1 {
font-size:32px;
}
.mgmenu h2 {
font-size:28px;
}
.mgmenu h3 {
font-size:24px;
}
.mgmenu h4 {
font-size:18px;
}
.mgmenu h5 {
font-size:16px;
}
.mgmenu h6 {
font-size:14px;
text-transform:uppercase;
}
.mgmenu a {
text-decoration:none;
/*color:#FFF;*/
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
white-space:nowrap;
}
.dropdown_container a:hover {
color:#0d5499;
}
.dropdown_container a:focus {
background: none;
}
.dropdown_container a {
text-decoration: none;
color:#000;
padding-bottom:7px;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
white-space:nowrap;
font-size:0.8em;
/*margin-left:8px;*/
/*height:1.8em;
border-bottom:1px solid #dbbb7c;*/
width: 100%;
/*background-color:#fFF;*/
}
.uppercase{ text-transform:uppercase; }
.dropdown_container > a > span {
padding-top:20px;
}
.dropdown_container a:hover {
color:#FFF;
background-color:#bb8c37;
width: 100%;
}
.dropdown_container a.active { background-color:#cdad70; cursor:default;}
.dropdown_container a:focus {
background-color:#dbbb7c;
}
/* 2. Lists */
.mgmenu > li ul,
.mgmenu > li ol {
padding:0 0 0 18px;
margin:0 0 18px 0;
}
.mgmenu > li ul {
list-style:square;
}
.mgmenu > li ol {
list-style:decimal;
}
.mgmenu > li ul.no_bullets {
list-style:none;
padding:0;
}
.mgmenu > li ul.no_bullets li {
line-height: 24px;
}
.mgmenu > li ul li,
.mgmenu > li ol li {
/*font-size:12px;*/
/* line-height:22px;
*/ position:relative;
color:#222222;
/*text-shadow:1px 1px 1px #eee;*/
}
/* _______________________________________
07 RETINA DISPLAYS
_______________________________________ */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.mgmenu > li .mgmenu_drop {
background-size: 9px 5px;
background-image:url("images/mgmenu/downArrow@2x.png");
}
.mgmenu_footer .mgmenu > li .mgmenu_drop {
background-size: 9px 5px;
background-image:url("images/mgmenu/upArrow@2x.png");
}
.mgmenu_container > .mgmenu > li.mgmenu_button,
.mgmenu_fixed > .mgmenu > li.mgmenu_button,
.mgmenu_footer > .mgmenu > li.mgmenu_button {
background-size: 24px 24px;
background-image:url("images/mgmenu/toggle@2x.png");
}
.mgmenu_trigger {
background-size: 35px 35px;
background-image:url("images/mgmenu/button_up@2x.png");
}
.mgmenu_trigger.active {
background-size: 35px 35px;
background-image:url("images/mgmenu/button_down@2x.png");
}
.mgmenu_footer ~ .mgmenu_trigger {
background-size: 35px 35px;
background-image:url("images/mgmenu/button_down@2x.png");
}
.mgmenu_footer ~ .mgmenu_trigger.active {
background-size: 35px 35px;
background-image:url("images/mgmenu/button_up@2x.png");
}
.mgmenu .dropdown_flyout .dropdown_parent {
background-size: 5px 9px;
background-image:url("images/mgmenu/rightArrow@2x.png");
}
.mgmenu .dropdown_flyout .dropdown_parent_left {
background-size: 5px 9px;
background-image:url("images/mgmenu/leftArrow@2x.png");
}
.mgmenu .mini_icon {
background-image: url("images/mgmenu/icons/mini-icons-white@2x.png");
background-repeat: no-repeat;
background-size: 304px 144px;
}
.mgmenu .menubar_icon ul > li > a {
background-size: 24px 24px;
}
.mgmenu .icon_vimeo {
background-image: url("images/mgmenu/icons/icon_vimeo@2x.png");
}
.mgmenu .icon_dribbble {
background-image: url("images/mgmenu/icons/icon_dribbble@2x.png");
}
.mgmenu .icon_twitter {
background-image: url("images/mgmenu/icons/icon_twitter@2x.png");
}
.mgmenu .icon_facebook {
background-image: url("images/mgmenu/icons/icon_facebook@2x.png");
}
.mgmenu .icon_flickr {
background-image: url("images/mgmenu/icons/icon_flickr@2x.png");
}
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.mgmenu li .dropdown_flyout .dropdown_parent {
background-size: 9px 5px;
background-image:url("images/mgmenu/downArrow-b@2x.png");
}
}