﻿
#nav {clear: both; margin-right: 10px;}
#nav ul {float: right; list-style: none;}
#nav ul li {float: left; font-size: 130%; font-weight: bold; margin: 0 2px 0 0; position: relative; padding: 0 0 2px 0; height: 25px;}

#nav ul li a {padding: 5px 10px 0 8px; float: left;}


/* Colour nav tabs */

#home #nav ul li a:hover, #home #nav ul li a.selected {background: url(../img/ui/home-nav-tab-left.png) left top no-repeat; color: #663300; text-decoration: none; padding: 0 0 0 8px;} 
#home #nav ul li a:hover .tab, #home #nav ul li a.selected .tab {background: url(../img/ui/home-nav-tab-right.png) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#home #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#planatrip #nav ul li a:hover, #planatrip #nav ul li a.selected {background: url(../img/ui/planatrip-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#planatrip #nav ul li a:hover .tab, #planatrip #nav ul li a.selected .tab {background: url(../img/ui/planatrip-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#planatrip #nav ul li.mega a:hover .tab, #planatrip #nav ul li.mega a.selected .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#mywanderlust #nav ul li a:hover, #mywanderlust #nav ul li a.selected {background: url(../img/ui/mywanderlust-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#mywanderlust #nav ul li a:hover .tab, #mywanderlust #nav ul li a.selected .tab {background: url(../img/ui/mywanderlust-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#mywanderlust #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#magazine #nav ul li a:hover, #magazine #nav ul li a.selected {background: url(../img/ui/magazine-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#magazine #nav ul li a:hover .tab, #magazine #nav ul li a.selected .tab {background: url(../img/ui/magazine-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#magazine #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#advice #nav ul li a:hover, #advice #nav ul li a.selected {background: url(../img/ui/advice-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#advice #nav ul li a:hover .tab, #advice #nav ul li a.selected .tab {background: url(../img/ui/advice-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#advice #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#shop #nav ul li a:hover, #shop #nav ul li a.selected {background: url(../img/ui/shop-nav-tab-left.gif) left top no-repeat; color: #663300; text-decoration: none; padding: 0 0 0 8px;} 
#shop #nav ul li a:hover .tab, #shop #nav ul li a.selected .tab {background: url(../img/ui/shop-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#shop #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#traveljobs #nav ul li a:hover, #traveljobs #nav ul li a.selected {background: url(../img/ui/traveljobs-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#traveljobs #nav ul li a:hover .tab, #traveljobs #nav ul li a.selected .tab {background: url(../img/ui/traveljobs-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#traveljobs #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}

#aboutus #nav ul li a:hover, #aboutus #nav ul li a.selected {background: url(../img/ui/aboutus-nav-tab-left.gif) left top no-repeat; text-decoration: none; padding: 0 0 0 8px;} 
#aboutus #nav ul li a:hover .tab, #aboutus #nav ul li a.selected .tab {background: url(../img/ui/aboutus-nav-tab-right.gif) right top no-repeat; height: 27px; float: left; padding: 5px 10px 0 0;}
#aboutus #nav ul li.mega a:hover .tab {padding: 5px 23px 0 0!important; margin-right: -13px;}


#nav ul li.mega a img {
z-index: auto; 
width: 13px;
height: 11px;
top: 8px;
right: 6px;
position: absolute;
}

#nav ul li.mega a:hover img, #nav ul li.mega a img.selected {
background: transparent url(../img/ui/arrow_nav-s-active.png) right 0 no-repeat;
z-index: 100; 
width: 13px;
height: 11px;
top: 8px;
right: 6px;
position: absolute;
}

#nav ul li.mega a:hover {
text-decoration: underline;
}

#nav ul .maga-div {
display: none;
}

#nav ul li.mega .maga-div {
border: 1px solid #dda;
width: 926px;
height: 385px;
position: absolute;
top: 27px;
left: -288px;
padding: 1.3em;
background: #f0ece9;
color: #663300;
font-size: 80%;
font-weight:normal;
line-height: 130%;
z-index: 100000;
}

*html #nav ul li.mega .maga-div {
left: 0px;	
}

#nav ul li.hovering .maga-div {
display: block;
}

#nav ul li.mega .maga-div a {
color: #663300;
padding: 0;
background-image: none;
text-decoration: none;
display: block;
width: 100%;
}

#nav ul li.mega .maga-div a:hover {
background: #993300 none!important;
color: #fff!important;
padding: 0!important;
}


#nav ul li .maga-div a.more {
color: #663300;
font-weight: bold;
}


#nav ul .maga-div h3 {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 10px;
}
#nav ul .maga-div p {
margin: 0 0 0.8em 0;
padding: 0;
}

#nav ul li.hovering .maga-div .mega-col1 {width: 140px; float: left;}
#nav ul li.hovering .maga-div .mega-col2 {width: 140px; float: left; margin-left: 50px;}
#nav ul li.hovering .maga-div .mega-col3 {width: 140px; float: left; margin-left: 50px;}
#nav ul li.hovering .maga-div .mega-col4 {width: 140px; float: left; margin-left: 50px;}
#nav ul li.hovering .maga-div .mega-col5 {width: 140px; float: left; margin-left: 50px;}

#nav ul li.hovering .maga-div .mega-col3 img{margin-bottom:6px;}
#nav ul li.hovering .maga-div .mega-col3 .col3-link{margin-bottom:15px;}


/*#side-menu ul {margin-top: 4px;}*/
#side-menu .panel-none b {margin-bottom:1em;display:block;}
#side-menu ul li a:hover, #side-menu ul li a.selected {font-weight: bold; background: transparent url(../img/ui/asterix-s.png) top right no-repeat; padding-right: 10px;}


/* ----------- sections -page navigation ---------- */

#sec-nav {padding: 7px 0; overflow: visible; float: left; width:960px; display:block; position: relative; z-index: 1;}
#sec-nav ul {margin: 0; float: left; list-style: none;} 
#sec-nav ul li {float: left; margin: 0 0 0 7px; font-size: 15px;}
#sec-nav ul li a {color: #fff; padding-right: 10px;}
#sec-nav ul li a:hover, #sec-nav ul li a.selected {color: #663300; background: transparent url(../img/ui/asterix.png) top right no-repeat; padding-right: 10px;}

#sec-nav .pagetitle {padding-top: 20px; padding-bottom: 0px; display: block; clear: both; }

.cufon-canvas {  z-index:1; }

#home #sec-nav {padding-top: 10px; padding-bottom: 0; z-index: 100;}

a.stbar.chicklet img {border:0;height:16px;width:16px;margin-right:3px;vertical-align:middle;}
a.stbar.chicklet {height:16px;line-height:16px;}


/* ----------- sections -mega navigation ---------- */

#sec-nav ul li.mega a {
z-index:auto;
padding-right: 10px;
margin-right: 10px;
}

#sec-nav ul li.mega a:hover {
text-decoration: underline;
}

#sec-nav ul li.mega {
 position: relative;
 z-index: 100;
}

#sec-nav ul .maga-div {
display: none;
}

#sec-nav ul li.mega .maga-div {
border: 1px solid #dda;
width: 180px;
position: absolute;
top: 35px;
left:0;
padding: 1.3em;
background: #f0ece9;
color: #663300;
font-size: 80%;
font-weight:normal;
line-height: 130%;
z-index: 10000;
}

#sec-nav ul li.hovering .maga-div {
display: block;
}

#sec-nav ul li.mega .maga-div a {
color: #663300;
padding: 2px 0;
background-image: none;
text-decoration: none;
display: block;
}

#sec-nav ul li.mega .maga-div a:hover {
background-color: #993300;
color: #fff;
}

#sec-nav ul li .maga-div a.more {
color: #663300;
font-weight: bold;
}

#sec-nav ul .maga-div h3 {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 10px;
}

#sec-nav ul .maga-div p {
margin: 0 0 0.8em 0;
padding: 0;
}


#side-menu ul {list-style: none;}
#side-menu ul li {margin: 0;}
#side-menu ul li a:hover, #side-menu ul li a.selected {font-weight: bold; background: transparent url(../img/ui/asterix-s.png) top right no-repeat; padding-right: 10px;}

