/****************
 * Navigation box
 ***************/
#navigation { height: 70px; padding-top: 30px; padding-right: 0.8em; position: relative;}

/***************
 * Global things
 **************/
#navigation * { position: relative; }
#navigation ul { list-style-type: none; }
#navigation li { display: block; float: left; }
#navigation a { display: block; text-decoration: none; float: left; font-weight: bold; color: #444444; }
#navigation .sf-breadcrumb a,
#navigation .active a,
#navigation .hover a { color: #ffffff; }

/*************
 * First level
 ************/
#navigation .navigation { right: 1em; float: right; line-height: 40px; background: url(/img/design/navigation/spacer.png) repeat-x; height: 40px;}
#navigation .navigation li { position: static; background: url(/img/design/navigation/grey.png) repeat-x; margin-right: 1px; }
#navigation .navigation li a { padding: 0px 6px; height: 40px; font-size: 13px; }
#navigation .navigation li.active a,
#navigation .navigation li a:hover { color: #eaeaea; }

/** Hacks for rounded first and last items in nav */
#navigation .navigation li a.first { background: url(/img/design/navigation/first_grey.png) no-repeat; padding-left: 19px; } /** 12px width + padding */
#navigation .navigation li.sf-breadcrumb a.first,
#navigation .navigation li.active a.first { background-image: url(/img/design/navigation/first_green.png); }
#navigation .navigation li.promo { background: url(/img/design/bg_yellow.png) repeat-x; }

#navigation .navigation li a.last { background: url(/img/design/navigation/last_grey.png) no-repeat right; padding-right: 21px; margin-right: -1px; } /** 14px width + padding; margin for disabling separation line */
#navigation .navigation li.sf-breadcrumb a.last,
#navigation .navigation li.active a.last { background-image: url(/img/design/navigation/last_violet.png); }

/** Colors */
.green #navigation .navigation .sf-breadcrumb,
.green #navigation .navigation .active { background: url(/img/design/bg_green.png); }
.blue #navigation .navigation .sf-breadcrumb,
.blue #navigation .navigation .active { background: url(/img/design/bg_blue.png); }
.red #navigation .navigation .sf-breadcrumb,
.red #navigation .navigation .active { background: url(/img/design/bg_red.png); }
.orange #navigation .navigation .sf-breadcrumb,
.orange #navigation .navigation .active { background: url(/img/design/bg_orange.png); }
.turkus #navigation .navigation .sf-breadcrumb,
.turkus #navigation .navigation .active { background: url(/img/design/bg_turkus.png); }
.yellow #navigation .navigation .sf-breadcrumb,
.yellow #navigation .navigation .active { background: url(/img/design/bg_yellow.png); }
.violet #navigation .navigation .sf-breadcrumb,
.violet #navigation .navigation .active { background: url(/img/design/bg_violet.png); }

/**************
 * Second level
 *************/
#navigation .navigation ul { display: none; } /** don't show if not active or hover */
#navigation .navigation ul { z-index: 99; background: transparent; position: absolute; top: 40px; right: 0; height: 30px; text-align: right; margin: 0; padding: 0; width: 100%; }
/** turn on active/hover submenu */
#navigation .navigation li.sf-breadcrumb ul,
#navigation .navigation li.hover ul,
#navigation .navigation li.active ul { display: block; }
#navigation .navigation li.contact ul { right: 0; left: auto; } /** align contact submenu to the right */
/** disable active backgrounds inherited from first-level */
#navigation .navigation li ul li,
#navigation .navigation li ul li.sf-breadcrumb,
#navigation .navigation li ul li.hover,
#navigation .navigation li ul li.active { background: transparent !important; }
/** settings for single items */
#navigation .navigation li ul li { height: 30px; width: auto; margin-left: 1px; line-height: 30px; }
#navigation .navigation li ul li a { color: #ffffff; font-size: 9pt; height: 30px; }
#navigation .navigation li ul li:first-child a { padding-left: 0; }
#navigation .navigation li ul li:last-child a { padding-right: 0; }
#navigation .navigation li ul li a:hover { color: #444444; }

/********************
 * @TODO: Third level
 *******************/
ul.sub_nav li ul {top: -999em;left:-1px;position: absolute;width:207px;z-index: 999;margin:0px;padding:0px;}
ul.sub_nav li:hover, ul.sub_nav li.sfHover,ul.sub_nav a:focus, ul.sub_nav a:hover, ul.sub_nav a:active {z-index: 999;background:#B5B5B5;}
ul.sub_nav li:hover ul, ul.sub_nav li.sfHover ul {top: 30px;list-style-type:none;}
ul.sub_nav li:hover li ul,ul.sub_nav li.sfHover li ul {top: -999em;}
ul.sub_nav li li:hover ul, ul.sub_nav li li.sfHover ul{top:-1px;}
ul.sub_nav li li li:hover ul,  ul.sub_nav li li li.sfHover ul{left: 160px;}
.superfish li:hover ul,.superfish li li:hover ul,.superfish li li li:hover ul{top: -999em;}
ul.sub_nav li li {text-align:left;background:#EDEDED;padding:0;}

ul.sub_nav li.active3 ul{}
ul.sub_nav li.active3 ul li {padding:0px 0px 0px 0px;}
ul.sub_nav li.active3 ul li a{color:#444444;font-weight:normal;width:170px;display:block;padding:0px 0px 0px 10px;}
ul.sub_nav li.active3 ul li a:hover {color:#666666;font-weight:normal;width:170px;display:block;padding:0px 0px 0px 10px;}

ul.sub_nav li a#cpMenuLink,
ul.sub_nav li a:hover #cpMenuLink { letter-spacing: 0.15em; font-size: 30px; color: #ffffff; }