html, body { color:#222;}
html{background:#fbfbfb; }
body{ background:#fff; }

html,body,h2,h3,h4,h5{font-family: 'Roboto', Arial, sans-serif; line-height:1.6em; font-weight:  normal; }
h1{font-size:60px; font-family: Cinzel, Georgia, serif; padding:0; font-weight:100; letter-spacing:-0.06em; line-height:0.9em; }
h6 {font-family: 'Crimson Text', Georgia, serif;  line-height:1.6em; font-weight:  normal; }
h2 {font-size:2.5em; }
h3 {font-size:1.8em; line-height:1.2em; margin:0; }
h4 {font-size:1.4em; line-height:1.2em; margin:0; }

a:link { color:blue; text-decoration:none; }
a:visited { color:blue; text-decoration:none; }
a:hover { color:#f00; text-decoration:none; }
a:active { color:#226; text-decoration:none; }
a img {outline: none;}
img {border: 0; max-width:100%; }
span {display:inline-block;}

.shadow {box-shadow: 4px 4px 4px #888888;}
.fixedtop {position:fixed; top:0; left:0; width:100%; background:#fff; z-index:1000; }
.centredcontainer { margin:auto; max-width:900px; }
.clearfix {overflow:hidden; display:inline-block; display:block;}
.red{ color:red; }
.grey{ color:grey; }
.threed {box-shadow: 4px 4px 9px #222; border-top:1px solid #444; border-left:1px solid #444; border-right:1px solid #222;border-bottom:1px solid #222; }
.griditem {display:block; overflow: hidden; float:left; margin-bottom:30px; margin-right:30px; background:#eee; padding:2%; }
.fillcell {display:inline-block; height:100%; width:100%; }
.selected {background:#dfd;}
.medium {width:200px; height:170px; background-size: 100%;}
.italic {font-style: italic;}
.bold {font-weight: bold;}
.headeritem {display:block; height:90px; overflow: hidden; }
.button { cursor:pointer; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #fff; border-left:1px solid #fff; padding:0 5px;}
.paper { background:#eee; color:black; padding:4%; border-radius: 15px; font-family: 'Crimson Text', serif;  line-height:1.3em; font-weight: normal; font-size:1.2em; }
.paper a:link, .paper a:visited {color:#33f; }
.paper a:hover {color:#83f; }

#nav {width:900px; width: 100%; max-width:900px; margin:auto; font-weight: bold; top: 0; }
#nav > a{display: none;}
#nav li	{position: relative;}
#nav li a{color: #fff;	display: block;	}
#nav li a:active{background-color: #cca !important;} //while clicked
#nav span:after	{border-top-color: #ddd; width: 0;height: 0;border: 0.313em solid transparent; border-bottom: none;content: '';vertical-align: middle;display: inline-block;	position: relative; right: -0.313em;}
/* first level */
#nav > ul{height: 2.5em; background-color: #999; list-style-type: none; padding: 0px; margin: 0px;}
/* % width per num menus */
#nav > ul > li	{width: 25%; height: 100%; float: left;} 
#nav > ul > li > a{height: 100%; font-size: 1.2em; line-height: 2em; text-align: center;}
#nav > ul > li:not( :last-child) > a {border-right: 1px solid #eee;}
#nav > ul > li:hover > a,#nav > ul:not( :hover) > li.active > a {background-color: #aaa;}
/* second level */
#nav li ul{background-color: #999; display: none; position: absolute;	top: 100%;  list-style-type: none; padding: 0px; margin: 0px; }
#nav li:hover ul{display: block;left: 0;right: 0;}
#nav li:not( :first-child):hover ul{left: -1px;}
#nav li ul a{font-size: 1em; line-height: 2em; border-top: 1px solid #eee; padding: 0.5em; }
#nav li ul li a:hover,	#nav li ul:not( :hover) li.active a	{background-color: #aaa;}

@media only screen and ( max-width: 62.5em ) /* 1000 */	{
    #nav{width: 100%; position: static; margin: 0;}
}
@media only screen and ( max-width: 40em ) /* 640 */{
    html{font-size: 75%; /* 12 */}
    h1{font-size: 42px; /* 12 */}
    #nav{position: relative;top: auto;left: auto;}
    #nav > a{width: 3.125em; /* 50 */height: 3.125em; /* 50 */text-align: left;	text-indent: -9999px;	background-color: #bbb; position: relative;	}
    #nav > a:before,	#nav > a:after	{position: absolute; border: 2px solid #fff;top: 35%;left: 25%;right: 25%; content: '';}
    #nav > a:after{top: 60%;}
    #nav:not( :target) > a:first-of-type, #nav:target > a:last-of-type	{display: block;}
/* first level */
    #nav > ul	{height: auto;display: none;position: absolute;	left: 0;right: 0;}
    #nav:target > ul {display: block;}
    #nav > ul > li {width: 100%;float: none;}
    #nav > ul > li > a	{height: auto;text-align: left;padding: 0 0.833em; /* 20 (24) */}
    #nav > ul > li:not( :last-child) > a {border-right: none;	border-bottom: 1px solid #ccc;}
/* second level */
    #nav li ul	{position: static;padding: 1.25em; /* 20 */padding-top: 0;}
}