@import '/event-common-style/new/custom-properties.css';


#show-sitenav {
	border: 0;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip; rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 	
}

nav#site22 {
    padding: 1vh 0 0 0;
    color: var(--site-light-text-color);
	font-family: var(--body-font);
	display: block;
	height: 4rem;
}

nav#site22 * {
    color: var(--site-light-text-color);

}

nav#site22 > ul {
    display: flex;
	position: relative; /* positioning context for submenus */
	background-color: var(--global-page-bg-color);
}

nav#site22 > ul li {
    display: block;
    width: auto;
    font-weight: 500;
	width: 20%;
	height: 100%
}

nav#site22 > ul > li > a {
	font-size: .9em;
	font-weight: 600;
}

nav#site22 > ul > li:first-of-type {
    font-weight: 900;
    background-image: var(--wd-logo);
    background-repeat: no-repeat;
    background-size: 1em;
    padding-left: 2.5em;
    background-position: .8em .4em;
    margin-left: 1em;
    width: 40%;
    padding-right: 5%
}

nav#site22 > ul > li:first-of-type > a {
	padding-top: 0;
}

nav#site22 > ul > li a {
	padding-top: 1em;
	display: inline-block;
}

nav#site22 > ul li a:link,
nav#site22 > ul li a:visited {
    color: inherit;
    text-decoration: none;
}

nav#site22 ul ul {
	display: flex;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	background-color: var(--global-page-bg-color);
	z-index: 11;
	transition: opacity .2s;
	position: fixed;
	left: 0;
	top: 4rem;
	width: 100%;
}

nav#site22 h1, nav#site22 h2 {
	font-family: var(--body-font);
}

nav#site22 h1 {
	font-weight: 600;
	font-size: 1.2em
}

nav#site22 h2 {
	font-weight: 300;
	font-size: .9em;
	line-height: 1.2;
}

nav#site22 span {
	display: block
}

/* show sub menus */

nav#site22 > ul li {
	height: 4em;
	display: block;
}

nav#site22 ul li:hover ul {
	opacity: 1;
	pointer-events: auto;

}

/* sub menus */


nav#site22 ul ul li {
	display: block;
	width: auto;
	height: auto;
}

nav#site22 ul ul li a {
	display: block;
	padding: .2em .4em;
	border-bottom: solid .2em

}

nav#site22 ul ul span {
	font-size: .9em
}

nav#site22 .name {
	font-weight: 600;
	font-size: 1em
}

nav#site22 .date {
	font-weight: 600;
}

/* hovering over events */


nav#site22 .events-hover {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--hover-highlight-color);
}

nav#site22 .events-hover:hover, #hover nav#site22 .events-hover {
    background-color: var(--hover-bg-color);
}

nav#site22 .events-lazyload {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--lazyload-highlight-color);
}

nav#site22 .events-lazyload:hover, #lazyload nav#site22 .events-lazyload {
    background-color: var(--lazyload-bg-color);
}

nav#site22 .events-globalscope {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--globalscope-highlight-color);
}

nav#site22 .events-globalscope:hover, #globalscope nav#site22 .events-globalscope{
    background-color: var(--globalscope-bg-color);
}

nav#site22 .events-code {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--code-highlight-color);
}

nav#site22 .events-code:hover, #codeconf nav#site22 .events-code {
    background-color: var(--code-bg-color);
}

nav#site22 .events-summit {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--summit-bg-color);
}

nav#site22 .events-summit:hover, #summit nav#site22 .events-summit {
    background-color: var(--summit-bg-hover-color);
}

nav#site22 .events-aaa {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--aaa-highlight-color);
}

nav#site22 .events-aaa:hover, #aaa nav#site22 .events-aaa {
    background-color: var(--aaa-bg-color);
}

nav#site22 .events-safe {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--safe-highlight-color);
}

nav#site22 .events-safe:hover, #safe nav#site22 .events-safe {
    background-color: var(--safe-bg-color);
}

nav#site22 .events-remixed {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--remixed-highlight-color);
}

nav#site22 .events-remixed:hover, #remixed nav#site22 .events-remixed {
    background-color: var(--remixed-bg-hover-color);
}

nav#site22 .events-leaders {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--leaders-bg-color);
}

nav#site22 .events-leaders:hover, #leaders nav#site22 .events-leaders {
    background-color: var(--leaders-bg-hover-color);
}