/* navigate bar with dropdown submenus */

div.navigate {
    background-image: linear-gradient(#44e, #cce);
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 90%;
    vertical-align: bottom;
    position: sticky;
    top: 2pt;
}

/* some defaults within div.navigate */

div.navigate :link, div.navigate :visited {
    color: #fff;
}

div.navigate :active {
    color: #f22;
}

div.navigate ul {
    list-style: none;
    text-indent: 0;
}

div.navigate li {
    text-indent: 0;
    background-color: #ccc;
}

div.navigate a {
    text-decoration: none;
    color: #22c;
    margin: 0;
    padding: 0;
}

/* top level ul and li */

div.navigate > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 0;
    padding: 3pt 3pt 0 3pt;
    overflow: hidden;
}

div.navigate > ul > li > p :link, div.navigate > ul > li > p :visited {
    color: #22c;
}

/* first row of menus */

div.navigate > ul > li.live {
    background-color: #cce;
}

div.navigate > ul > li.loginout {
    margin-left: auto;
    background-color: #cce;
}

@media only screen and (max-width: 599px) {

    div.navigate > ul > li {
	border-top: 2pt solid #33d;
	border-left: 2pt solid #33d;
	border-right: 2pt solid #33d;
	width: 60pt;
	padding: 0;
	margin: 0;
	height: 28pt;
	font-size: 80%;
    }

}

@media only screen and (min-width: 600px) {

    div.navigate > ul > li {
	border-top: 2pt solid #33d;
	border-left: 2pt solid #33d;
	border-right: 2pt solid #33d;
	width: 90pt;
	padding: 0;
	margin: 0;
	height: 34pt;
    }

}

div.navigate > ul > li > p {
    text-align: center;
    padding: 2pt 4pt 2pt 4pt;
}

div.navigate > ul > li.live:hover {
    background-color: #22c;
    cursor: pointer;
}

div.navigate > ul > li.loginout:hover {
    background-color: #22c;
    cursor: pointer;
}

div.navigate > ul > li.live:hover > p :link {
    color: #fff;
}

div.navigate > ul > li.live:hover > p :visited {
    color: #fff;
}

div.navigate > ul > li.loginout:hover > p :link {
    color: #f44;
}

div.navigate > ul > li.loginout:hover > p :visited {
    color: #f44;
}

/* first column of submenu */

div.navigate > ul > li > ul {
    display: inline-flex;
    flex-direction: column;
    visibility: hidden;
    transition: visibility 0.5s;
    position: absolute;
    margin: 0;
    padding: 6pt 0 0 0;
    min-width: 87pt;
    font-size: 70%;
    text-align: center;
    transform: translatey(-8pt);
}

div.navigate > ul > li > ul > li {
    background-color: #22c;
    /* border: 2pt solid #33d; */
    /* margin: 3pt; */
    padding: 2pt 4pt 2pt 4pt;
    opacity: 0.9;
}

div.navigate > ul > li > ul.tight li {
    line-height: 0.1;
}

div.navigate > ul > li > ul :link, div.navigate > ul > li > ul :visited {
    color: #fff;
}

/* hover over containing menu item or submenu */

div.navigate > ul > li:hover > ul, div.navigate > ul > li > ul:hover {
    display: inline-flex;
    flex-direction: column;
    visibility: visible;
}

div.navigate > ul > li > ul > li:hover {
    border: 1pt solid #33d;
    padding: 1pt 3pt 1pt 3pt;
    background-color: #cce;
    opacity: 1;
}

div.navigate > ul > li > ul > li:hover > p :link {
    color: #33d;
}

div.navigate > ul > li > ul > li:hover > p :visited {
    color: #33d;
}

/* second column of subsubmenu */

div.navigate > ul > li > ul > li > ul {
    display: none;
    position: absolute;
    margin: 4pt 0 0 30pt;
    padding: 10pt 0 0 6pt;
    min-width: 80pt;
    text-align: center;
    transform: translatey(-42pt);
}

div.navigate > ul > li > ul > li > ul.long {
    min-width: 100pt;
}

div.navigate > ul > li > ul > li > ul.longlong {
    min-width: 120pt;
}

div.navigate > ul > li > ul > li > ul > li {
    background-color: #22c;
    padding: 2pt 4pt 2pt 4pt;
    /* border: 2pt solid #33d; */
    /* margin: 3pt 3pt 3pt 9pt; */
    margin: 0 0 0 9pt;
    opacity: 0.9;
}

/* hover over containing submenu or subsubmenu */

div.navigate > ul > li > ul > li:hover > ul {
    display: inline-flex;
    flex-direction: column;
}

div.navigate > ul > li > ul > li > ul:hover {
    display: inline-flex;
    flex-direction: column;
}

div.navigate > ul > li > ul > li > ul > li:hover {
    border: 1pt solid #33d;
    padding: 1pt 3pt 1pt 3pt;
    background-color: #cce;
    opacity: 1;
}

div.navigate > ul > li > ul > li > ul > li:hover > p :link {
    color: #33d;
}

div.navigate > ul > li > ul > li > ul > li:hover > p :visited {
    color: #33d;
}