@charset "UTF-8";


/*
====================================================================================================
=== DROPDOWN MENU ==================================================================================
=== 
=== li.hover and li:hover
=== 
=== We have to use javascript to change class of li when they are hovered because
=== IE6 don't read the li:hover .
=== I have duplicated use of li:hover and li.hover for the few case where user have javascript
=== desactived. That way , menu continue working in other browser than ie6.
==
====================================================================================================
*/

/*
====================================================================================================
=== Support for the "iehover-fix.jsé ===============================================================
====================================================================================================
*/
/** Support for the "iehover-fix.js" **/
ul.menu{position:relative;}
ul.menu ul{background:#fff;}
ul.menu iframe {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
   background: red;
}
/** end **/

/*
===============================================
=== MAIN MENU =================================
===============================================
*/
.menu {
   width: 860px;
   float:left;
   display:inline;
   margin: 0;
   z-index: 999;
   color:#fff !important;
}

.menu li {
   list-style: none;
   display: inline;
   position: relative;
   z-index: 100;
   margin: 0 30px 0 0;
   float: left;
   cursor: pointer;
}
.menu li span {
   height: 28px;
   float:left;
   display:inline;
}

.menu li a {
   height: 28px;
   display:block;
   padding: 0 0 0 0;
   color: #fff;
   font-size: 17px;
   font-weight: bold;
   text-decoration: none;
   outline: none;
   float: left;
}

.menu li .topitm a
{
   font-weight: normal;
}

.menu li .topitm a.hover
{
    font-weight: bold;
}

.menu li .topitm a:hover
{
    color: #febe10; 
}


/*
===============================================
=== SUBMENU ===================================
===============================================
*/
.menu li ul {
   
   background-color: #fff;
   top: 28px;
   padding: 6px 0px 10px 0px;
   margin-left:-5px;
   left: 0;
   display:none;
   float:left;
   width: auto;
   color:#fff;
   background-color:#000;
}
.menu li:hover ul,
.menu li.hover ul {
   display:inline;
   position: absolute;
   background: #0b0c0d url(/images/layout/public/menu/submenu_backgroundV2.png) top repeat-x;
   width:auto;
}

.menu li ul li {
   padding: 6px 0px 0px 0px;
   float:none;
   margin:0;
   clear:both;
   position: static;
   
}

/*width is controlled from here */
.menu li:hover ul li a,
.menu li.hover ul li a {
 white-space: nowrap;
   height: 19px;
   height: auto !important;
   line-height: 25px;
   padding: 0 20px;
   color: #fff;
   font-size: 11px;
   font-weight: normal;
   float:none;
   width: auto;
}

/* cufon submenu fix */

.cufon .cufon-canvas
{
    height:auto !important;
}

/*
===============================================
=== SECOND SUBMENU ============================
===============================================
*/

.menu li:hover ul li:hover a,
.menu li.hover ul li.hover a {
   color: #fff;
   background-color: #878b8e;
}

.menu li:hover ul li ul,
.menu li.hover ul li ul {
   top:0px;
   margin-left:2px;
   left: 100%;
   display:none;
   width:auto;
}

.menu li:hover ul li:hover ul,
.menu li.hover ul li.hover ul {
   position: absolute;
   display:block;
}

.menu li:hover ul li:hover ul li a,
.menu li.hover ul li.hover ul li a {
   color: #fff;
   background: none;
   padding-right:70px;
}

.menu li:hover ul li:hover ul li:hover a,
.menu li.hover ul li.hover ul li.hover a {
   color: #fff;
   background-color: #888;
}

/*
===============================================
=== THIRD SUBMENU =============================
===============================================
*/
.menu li:hover ul li:hover ul li ul,
.menu li.hover ul li.hover ul li ul {
   width: 282px;
   padding: 2px 2px 0px 2px;
   font-weight: bold;
   font-size: 12px;
   display:none;
   position: static;
   z-index: 9999;
   background:#0b0c0d url(/images/layout/public/menu/submenu_box_background.png) top repeat-x;
   height:auto;
   margin-bottom:0px;
}

.menu li:hover ul li:hover ul li ul img, 
.menu li.hover ul li.hover ul li ul img 
{
}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul{
	position: absolute;
}

.menu li:hover ul li:hover ul li ul li,
.menu li.hover ul li.hover ul li ul li {
   width: 282px;
   padding: 0;
   float:left;
   padding: 0;
   cursor: auto;
   top: 0px;
}
ul.card .info h3{
	font-size: 20px;
	color:#febe10;
   text-transform: uppercase;
}
ul.card .info p.teal
{
    color:#febe10;
}

ul.card .info{
   padding: 5px 10px 5px 10px;
   width: 262px;
   overflow: hidden;
   margin: 0;
   height:auto;
}
ul.card #links{
   border-top: 1px solid #545454;
   padding-bottom:5px;
}

.teal
{
    color:#fff;
}
.menu li:hover ul li:hover ul li ul.card li div#links a,
.menu li.hover ul li.hover ul li ul.card li div#links a {
   color: #fff;
   font-size: 11px;
   display: block;
   line-height: normal;
   background: none;
   margin:  5px 10px 5px 10px;
   padding: 7px 0 0 10px;
   background: url(/images/layout/public/menu/arrow_bullet.png) left bottom no-repeat;
   height:auto;
}

.menu li:hover ul li ul li ul.card li div#links a:hover{
	color: #ffa800;
}

ul.card .price-bar {
   padding:  8px 0;
   margin: 0 auto;
   font-size: 11px;
   width: 262px;
   overflow: hidden;
   font-weight: normal;
   border-top: 1px solid #545454;
}

ul.card .price-bar span {
   margin: 0;
   height: auto;
   display: inline;
   padding: 0 5px 0 10px;
}
ul.card .price-bar .info {}

ul.card .price-bar .price,
ul.card .price-bar .price { font-size: 11px;}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul { display:block; }