@font-face {
    font-family: 'Uncial';
    src: url('uncialr.eot');
    src: url('uncialr.eot?#iefix') format('embedded-opentype'),
         url('uncialr.woff') format('woff'),
         url('uncialr.ttf') format('truetype'),
         url('uncialr.svg#uncialroundhandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Some stylesheet reset */
#menu > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The container */
#menu > ul{
	display: block;
	position: relative;
	width: 140px;
}

/* The list elements which contain the links */
#menu > ul li {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 140px;
}

/* General link styling */
#menu > ul li a {
	/* Layout */
	display: block;
	position: relative;
	margin: 0;
	padding: 4px 4px;
	width: 140px;

	/* Typography */
	font-family:  Uncial, Helvetica, Arial, sans-serif;
	color: #990000;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	font-size: 18px;

	/* Background & effects */
	background-color: #fff;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

#menu > ul li > ul li a 
{
    width: 200px;
    font-size: 15px;
}
#menu > ul li ul li > ul 
{
    left: 204px;
}


/* The hover state of the menu/submenu links */
#menu > ul li a:hover, #menu > ul li:hover>a {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
	color: #d90000;
	border-top: 1px dotted #d9d9d9;
	border-bottom: 1px dotted #d9d9d9;
}

/* The arrow indicating a submenu */
li.has_sublist > a:hover:after {
	content: url('//platonicrealms.com/images/layout/menu_arrow.png');

}

	
/* THE SUBMENUS */
#menu > ul ul {
	position: absolute;
	left: 144px;
	top: 0px;
	padding-left: 0px;
	opacity: 0;
    visibility: hidden;
	/* The fade effect, created using an opacity transition */
	-webkit-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	-moz-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	-o-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	-ms-transition: opacity .3s ease-in, visibility .3s ease-in-out;
}

/* Showing the submenu when the user is hovering the parent link */
#menu > ul li:hover>ul {
	top: 0px;
	opacity: 1;
    visibility: visible;
}
@media screen and (max-width:739px)
{
    /* The container */
    #menu > ul{
	    display: block;
	    position: relative;
	    width: 110px;
    }

    /* The list elements which contain the links */
    #menu > ul li {
	    display: block;
	    position: relative;
	    margin: 0;
	    padding: 0;
	    width: 110px;
    }

    /* General link styling */
    #menu > ul li a {
	    /* Layout */
	    display: block;
	    position: relative;
	    margin: 0;
	    padding: 3px 3px;
	    width: 110px;

	    /* Typography */
	    font-family:  Uncial, Helvetica, Arial, sans-serif;
	    color: #990000;
	    text-decoration: none;
	    text-shadow: 0 1px 0 #fff;
	    font-size: 14px;

	    /* Background & effects */
	    background-color: #fff;
	    border-top: 1px solid white;
	    border-bottom: 1px solid white;
    }

    #menu > ul li > ul li a 
    {
        width: 140px;
        font-size: 12px;
    }
    #menu > ul li ul li > ul 
    {
        left: 144px;
    }


    /* The hover state of the menu/submenu links */
    #menu > ul li a:hover, #menu > ul li:hover>a {
	    text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
	    color: #d90000;
	    border-top: 1px dotted #d9d9d9;
	    border-bottom: 1px dotted #d9d9d9;
    }

    /* The arrow indicating a submenu */
    li.has_sublist > a::after {
	    content: url('//platonicrealms.com/images/layout/menu_arrow.png');

    }

	
    /* THE SUBMENUS */
    #menu > ul ul {
	    position: absolute;
	    left: 113px;
	    top: 0px;
	    padding-left: 0px;
	    opacity: 0;
        visibility: hidden;
	    /* The fade effect, created using an opacity transition */
	    -webkit-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	    -moz-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	    -o-transition: opacity .3s ease-in, visibility .3s ease-in-out;
	    -ms-transition: opacity .3s ease-in, visibility .3s ease-in-out;
    }

    /* Showing the submenu when the user is hovering the parent link */
    #menu > ul li:hover>ul {
	    top: 0px;
	    opacity: 1;
        visibility: visible;
    }

}