/*---------------------------------------------------------------------------------------------
[ NEW header ]
*/
/* The fellowship of the sprites */

.sprite {
    display: inline-block
}

.header .sprite {
    background: url(/marketing/images/clickmeeting/global/modules/header/sprite-header.png) no-repeat
}
.header {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 58px;
    background: #222324;
    background: -moz-linear-gradient(top,  rgba(42,43,45,1) 0%, rgba(37,38,40,1) 50%, rgba(33,34,36,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,43,45,1)), color-stop(50%,rgba(37,38,40,1)), color-stop(100%,rgba(33,34,36,1)));
    background: -webkit-linear-gradient(top,  rgba(42,43,45,1) 0%,rgba(37,38,40,1) 50%,rgba(33,34,36,1) 100%);
    background: -o-linear-gradient(top,  rgba(42,43,45,1) 0%,rgba(37,38,40,1) 50%,rgba(33,34,36,1) 100%);
    background: -ms-linear-gradient(top,  rgba(42,43,45,1) 0%,rgba(37,38,40,1) 50%,rgba(33,34,36,1) 100%);
    background: linear-gradient(to bottom,  rgba(42,43,45,1) 0%,rgba(37,38,40,1) 50%,rgba(33,34,36,1) 100%);
}

.header .inner {
    margin: 0 auto;
    width: 980px;
}

.page-nav {
    float: left
}

.page-nav li {
    float:left;
    display: inline-block;
    height: 60px;
    padding: 0 16px;
    margin-bottom: -2px;
    position:relative
}

.page-nav li.active,
.page-nav li.active:hover {
    background: rgb(114,192,68);
    background: -moz-linear-gradient(top,  rgba(114,192,68,1) 0%, rgba(99,168,55,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,192,68,1)), color-stop(100%,rgba(99,168,55,1)));
    background: -webkit-linear-gradient(top,  rgba(114,192,68,1) 0%,rgba(99,168,55,1) 100%);
    background: -o-linear-gradient(top,  rgba(114,192,68,1) 0%,rgba(99,168,55,1) 100%);
    background: -ms-linear-gradient(top,  rgba(114,192,68,1) 0%,rgba(99,168,55,1) 100%);
    background: linear-gradient(to bottom,  rgba(114,192,68,1) 0%,rgba(99,168,55,1) 100%);
    border-radius: 0px 0px 6px 6px; -webkit-border-radius: 0px 0px 6px 6px;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
}

.page-nav li:hover {
    background: rgb(63,64,67);
    background: -moz-linear-gradient(top,  rgba(63,64,67,1) 0%, rgba(51,52,55,1) 50%, rgba(41,42,44,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,64,67,1)), color-stop(50%,rgba(51,52,55,1)), color-stop(100%,rgba(41,42,44,1)));
    background: -webkit-linear-gradient(top,  rgba(63,64,67,1) 0%,rgba(51,52,55,1) 50%,rgba(41,42,44,1) 100%);
    background: -o-linear-gradient(top,  rgba(63,64,67,1) 0%,rgba(51,52,55,1) 50%,rgba(41,42,44,1) 100%);
    background: -ms-linear-gradient(top,  rgba(63,64,67,1) 0%,rgba(51,52,55,1) 50%,rgba(41,42,44,1) 100%);
    background: linear-gradient(to bottom,  rgba(63,64,67,1) 0%,rgba(51,52,55,1) 50%,rgba(41,42,44,1) 100%);
    border-radius: 0px 0px 6px 6px; -webkit-border-radius: 0px 0px 6px 6px;
    box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, 0.6); -webkit-box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, 0.6);
}

.page-nav li:hover:before {
    content:"";
    position: absolute; 
    top: 0; bottom: 6px; left:1px; width: 1px;
    background-image: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);
}

.header .home {
    background-position: -168px 11px;
    float: left;
    height: 60px;
    width: 30px;
    text-indent: -999em;
}

.site-logo {
    float: left;
    height: 60px;
    width: 120px;
    text-indent: -999em;
}

.site-logo.cm {
    background-position: 0 20px;
    width: 120px !important;
}

.site-logo.cw {
    background-position: 0 -60px
}

.top-nav {
    float: right;
    position: relative;
    top: 18px;
    font: 13px/22px 'Helvetica Neue', Helvetica;
}

.top-nav li {
    float: left;
    padding-left: 13px;
}

.top-nav li:first-child {
    padding-left: 0
}

.top-nav li.highlight {
    margin-left: 13px;
    padding: 0 13px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    background: #141414;
    -webkit-box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
    box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
}
.top-nav li.highlight:hover {
    background:#73c145;
}

.top-nav li.highlight:hover a {
    color:#fff;
}

.top-nav a {
    color: #fff;
    text-decoration: none;
}

.top-nav a:hover {
    color:#73c145;
    text-decoration: none;   
}

.top-nav a.join-now {
    color: #00aeef;
    font-family:Helvetica,Arial,sans-serif;
    font-size: 13px;
}

.top-nav a.join-now:hover {
    color:#ff7407
}

.sprite.separator {
    padding: 0;
    width: 2px;
    background-position: -193px -43px;
}

.sprite.learn-more {
    padding-left: 21px;
    background-position: 0 -149px;
    color: #fff;
    font-size: 14px;
}


/* language dependant */
.pl .top-nav {
    font-size: 13px;
}

.pl .top-nav li {
    padding-left: 9px
}

.pl .top-nav li.highlight {
    margin-left: 9px;
    padding: 0 13px;
}