/*
	--------------------------
	Select List Options
	--------------------------
*/

div.options     { float: left; width: 100%; margin-bottom: 1em; }
div.options div { width: 45%; float: left; }
div.options div span    { padding: 0.5em; font-size: 1em; display: block; float: left; }
div.options div#archive { width: 55%; }

div.options ul  { padding: 0px; margin: 0px 0.25em 1em 0px; float: left; position: relative; }
div.options ul li  { list-style-type: none; float: left; margin: 0px; font-size: 1em; }
div.options ul li a { color: #fff; text-decoration: none; display: block; padding: 0.5em 0.725em; width: 7.5em; float: left; background: #1d1d1b url(/_resources/files/template/v.png) no-repeat 7.25em center; }

div.options ul li ul    { display: none; width: 21em; position: absolute; left: 8em; top: 0px; z-index: 99; }
div.options ul li:hover ul  { display: block; }
div.options ul li ul li span { display: block; color: #fff; width: 3em; background: none; float: left; padding: 0.5em; margin: 0px; }
div.options ul li ul li a { width: auto; background: none; }
div.options ul li ul li { background: #1d1d1b; width: 21em; }
div.options ul li ul li:hover { background: var(--aqua); }
div.options ul li ul li:hover a { background: var(--aqua); }

div.options div#archive ul li a { width: 4.75em; background-position: 4.75em center; }
div.options div#archive ul li ul    { width: 30.5em; left: 5.5em; }
div.options div#archive ul li ul li { width: 30.5em; color: #fff; }
div.options div#archive ul li ul li a { width: auto; padding: 0.5em 0.75em; background: none; margin: 0px; }
div.options div#archive ul li ul li:hover { background: #1d1d1b; }
div.options div#archive ul li ul li:hover span { color: var(--aqua); }
div.options div#archive ul li ul li a:hover { background: var(--aqua); }
div.options div#archive ul li ul li a.disabled  { visibility: hidden; }
div.options div#archive ul li ul li a.missing { color: #444; }
div.options div#archive ul li ul li a.missing:hover { background: transparent; cursor: default; }

/*  Responsive 
--------------------------  */

/*  1080px  */
@media screen and (max-width: 1080px) {

    div.options ul li ul    { left: 0px; top: 2.4em; }
    div.options div#archive ul li ul    { width: 29.75em; left: 0px; }

}

/*  950px  */
@media screen and (max-width: 950px) {

    div.options div { width: 50%; }
    div.options div#archive { width: 50%; }

    div.options div#archive ul li ul    { width: 25em; }
    div.options div#archive ul li ul li { width: 25em; }
    div.options div#archive ul li ul li a { padding: 0.25em 0.5em; }
    div.options ul li ul li span { padding: 0.25em 0.5em; }

}

/*  870px  */
@media screen and (max-width: 870px) {

    div.options div span { font-size: 0.9em; }
    div.options div#archive ul li ul    { margin-left: -5em; }

}

/*  790px  */
@media screen and (max-width: 790px) {

    div.options div { width: 60%; }
    div.options div#archive { width: 40%; }
    div.options div#archive ul li ul    { margin-left: -10em; }

}

/*  650px  */
@media screen and (max-width: 650px) {

    div.options ul li ul    { left: 8em; top: 0px; }
    div.options div#archive ul li ul    { left: 5.5em; }
    div.options div { width: 100%; }
    div.options div#archive { width: 100%; }
    div.options div#archive ul li ul    { margin-left: 0px; }

}

/*  500px  */
@media screen and (max-width: 500px) {

    div.options div#archive ul li ul    { left: 0px; top: 2.4em; }

}

/*  400px  */
@media screen and (max-width: 400px) {

    div.options { font-size: 0.9em; }
    div.options ul li ul li span { width: 2.5em; }
    div.options div#archive ul li ul li a { padding: 0.25em 0.4em; }

}