/* 
USE: 		Mazda website
AUTHOR:		Syzygy UK Limited
DATE:		03/2008


*/


/* **************************** */
/* S01. PRIMARY NAVIGATION */
/* **************************** */
#viTopNav		{ position: relative; z-index: 100; height: 29px; min-width: 950px; margin-bottom: 24px; background-color: #fff; font-size: 0.9em; }
* html #viTopNav{ width: 100%; }
* html #viTopNav ul { width: 990px; }

/*1st level: */
#nav, #nav ul 	{ float: left; position: relative; list-style: none; line-height: 1; background-color:#fff; font-weight: bold; margin: 0; padding: 0; }
#nav li 		{ float: left; padding: 0; margin:0;}
#nav a { display: block; color: #8f9498; text-decoration: none; padding: 9px 15px; background: transparent url("bg_topnav_separator.gif")no-repeat 0 0;}

/* 2nd level: */
#nav li ul 		{ width: 150px; font-weight: normal; margin: 1px 0 0 8px; padding: 7px 0; }
* html #nav li ul 		{ border: solid 1px #000; margin-top: 0px; }
#nav li div		{ position: absolute; left: -999em; height: auto; width: 166px; padding: 0 0 8px 0; background: transparent url("bg_nav_shadow.png") no-repeat 50% 100%; }
* html #nav li div 		{ background-image: none; }
#nav li li 		{ float: none; margin: 0; padding: 0; background: #fff; position: relative;}
#nav li ul a 	{ width: auto;  padding: 3px 6px 3px 10px; }

/* 3rd level: */
#nav li ul ul			{ position:relative; float: none; margin: 0 0 5px 8px; padding:0; font-size: 1em; border: none; width: auto}
#nav li ul ul li		{ float: none}
#nav li ul ul li a 		{ padding: 2px 4px 2px 8px; }
#nav li:hover ul ul, 
#nav li.sfhover ul ul	{ display:block	}

#nav li:hover div, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li.sfhover div, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul	{ left: auto;}

#nav li:hover a,  
#nav li.sfhover a  			{ color: #006cb8; }
#nav li:hover li a,  
#nav li.sfhover li a  		{ color: #8f9498; }

#nav li:hover li:hover a,  
#nav li.sfhover li:hover a 				{ color: #006cb8; background: transparent url("btn_next.gif") no-repeat 4px 0.5em; }
#nav li:hover li:hover li a,  
#nav li.sfhover li:hover li a 			{ color: #8f9498; background-image: none}
#nav li:hover li:hover li:hover a,  
#nav li.sfhover li:hover li:hover a		{ color: #006cb8 }

#nav li li a:hover, 
#nav li.on li a:hover  	{ background: transparent url("btn_next.gif") no-repeat 4px 0.5em!important; color: #006cb8; }
#nav li:hover, 
#nav li.sfhover 		{ background: #fff; }

#nav li.on a			{ background: transparent url("bg_topnav_separator_next.gif") no-repeat 0 0; color: #006cb8; }
#nav li.on li a			{ background-image: none!important; }	

/* show selected link */
#nav li.on li.on a			{ background: transparent url("btn_next.gif") no-repeat 4px 0.5em!important; color: #006cb8; font-weight:bold}
#nav li.on li.on li a		{ background:none!important; color: #999;  font-weight:normal}
#nav li.on li.on li a:hover	{ color: #666!important; }
#nav li.on li.on li.on a	{ font-weight: bold; color: #666 }

#nav li li a			{ background-image: none!important; } 
#nav li.cta	a			{ color: #006cb8!important; font-weight: bold; }	
#nav li.cta.first		{ margin: 5px 0 0 0; padding-top: 5px }	

/* Fix IE. Hide from IE Mac \*/
* html #nav ul li		{ float: left; height: 1%; }
* html #nav ul li a		{ height: 1%; }
/* End */

/* ********************* */
/* S02. SUB-NAVIGATION */
/* ********************* */

/* 1st level */
#leftSubNav ul.subNav				{ margin: 7px 0 1em 0; padding: 0 0 4em 0; list-style: none; line-height: normal; clear:both; font-size: 0.9em; background: transparent url("bg_tertiarynav.jpg") no-repeat 100% bottom; }
#leftSubNav ul.subNav li			{ margin: 0; padding: 3px 10px 3px 12px; text-align:right; }
#leftSubNav ul.subNav li a			{ text-decoration: none; margin:0; padding: 0; color: #8F9498;}
#leftSubNav ul.subNav li a:hover 	{ color: #006cb8;}
#leftSubNav ul.subNav li.on a		{ color: #006cb8; font-weight: bold; padding-left: 6px; background: transparent url("btn_next.gif") no-repeat 0 0.35em; } 

 /* 2nd level */
#leftSubNav ul.subNav li ul			{ margin:0; padding-bottom:0.5em; padding-top: 0.4em; list-style: none; background: transparent url("bg_tertiarynav_h.jpg") no-repeat 100% 100%}
#leftSubNav ul.subNav li li			{ padding: 2px 0 2px 0; }
#leftSubNav ul.subNav li.on.sub		{padding-top:0.7em; margin-top: 0.3em; background: transparent url("bg_tertiarynav_h.jpg") no-repeat 85% 0}
#leftSubNav ul.subNav li li a		{ font-weight:normal!important; color:#999999!important; background-image: none!important }
#leftSubNav ul.subNav li li a:hover { color: #666!important;}
#leftSubNav ul.subNav li li.on		{ margin: 0; padding: 2px 0 2px 0; background-image: none}
#leftSubNav ul.subNav li li.on a	{ color: #666!important; font-weight: bold!important; padding-left: 0; background-image:none; } 

/* ***************************************** */
/* S03. BOTTOM ZOOM-ZOOM FLOATING NAVIGATION */
/* ***************************************** */

/* Zoom-zoom bar */
body > div#footer 		{ position: fixed; }
#footer 				{ left: 0; bottom: 0; position: absolute; width: 100%; background-color: #006cb8}
#nextstep				{ width: 950px; }
#nextstep ul			{ padding: 8px 10px 5px 0; margin: 0 0 0 10px; font-size: 0.9em; position: relative; z-index: 9999; }
#nextstep li			{ display: inline; list-style-type:none; padding: 5px 12px 0 9px; height: 1.3em; background: url("bg_bottomnav_separator.gif") no-repeat 100% 0; }
#nextstep li a			{ color: #fff; text-decoration: none; font-weight: bold; }
#nextstep li a:hover	{ color: #7fb5db; }
#nextstep li a.on		{ font-weight: bold; }


#support ul				{ margin: 2em 0 3.5em 280px; padding: 5px 0; font-size: 0.9em;  width: 490px; border-top: 1px solid #ccc; }
#support li, 
#support_zz li			{ display: inline; list-style-type: none; margin: 0; padding: 3px 0; height:1.3em; 	}
#support li a, 
#support_zz li a		{ color: #8f9498; text-decoration: none; border-left: 1px solid #ccc; padding: 0 1em; }
#support li a.first, 
#support_zz li a.first { padding-left: 0; border-left: none; }

/* Footer - Site details links for the flash zoom-zoom page */
#support_zz ul			{ margin: 5px 0; padding: 0; font-size: 0.9em; text-align:right; width:968px}


/* ***************************** */
/* S04. ACCESSIBILITY NAVIGATION */
/* ***************************** */
.hide				{ position: absolute; left: -999em; width: 30em; overflow: hidden; } 
.skip 				{ display: none; text-align: left; margin: 0 0 0 5px; padding: 0; position: absolute; font-size:1em; } /*All incl Opera*/
/* * html */ .skip 	{ display: block} /*Seen by IE*/
.skip a 			{ padding: 0 0.5em; display: inline; z-index: 2; text-decoration:none; position: absolute; width: 20em; left: -200em}
.skip a:focus, 
.skip a:active 		{ position: absolute; left: 0.5em; color: #fff; background: #006699}
.skip a:hover 		{ cursor: default}
.menu3 {
cursor : default;
list-style-type : none;
list-style-image : none;
list-style-position : outside;
margin-left : 0;
}

/* ***************************** */
/* S05 MENU GRAFICZNE */
/* ***************************** */

#menu_graficzne {
width : 753px;
height : 80px;
background-image : url(img/menu_graficzne-tlo.jpg);
background-repeat : no-repeat;
margin : 5px 0 15px 0;
}
#menu_graficzne.cta {
height : 80px;
}

.menu3 a {
cursor : default;
}
.menu3 a .preview {
display : none;
}
.menu3 a:hover .preview {
display : block;
position : absolute;
z-index : 1;
top : 0;
left : 0;
}
.menu3 img {
padding : 0;
background : rgb(255, 255, 255) none repeat scroll 0% 50%;
color : inherit;
vertical-align : top;
width : 125px;
height : 80px;
}
.menu3 li {
margin : 0;
padding : 0;
background : rgb(238, 238, 238) none repeat scroll 0% 50%;
color : inherit;
display : inline;
float : left;
position : relative;
}
.menu3 .preview {
width : 125px;
height : 80px;
margin-top : 0;
margin-left : 0;
}