* {margin: 0; padding: 0; border: 0;}
html {overflow: hidden;}
body {width: 100%; height: 100%; background: #000; color: #fff}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}
a:active, a:focus {text-decoration: none; outline: 0;}

#fravia {display: block; margin-left: auto; margin-right: auto;}

#black {position: absolute; top: 0px; right:0px; left: 0px; height: 400px; background: #000; color: #fff;}

#contact {margin: 0 20px 0 20px; padding: 0;}
#contact #submit {width: auto;}
#contact fieldset {color: #ddd; border: 1px dotted #000; padding: 10px; margin: 0;}
#contact input, #contact textarea {background: #333; color: #fff; width:100%; overflow: auto;}
#contact label {width: 100%; padding: 0; }
#contact small {display: block; margin: 20px 0 5px 20px; padding: 1px 3px; font-size: 0.7em;}

#footer a:active, #footer a:hover, #footer a:link, #footer a:visited {color: #000; text-decoration: none;}
#footer {position: absolute; right: 0px; bottom: 0px; left: 0px; text-align: center; font-size: 0.6em; border: 1px solid; border-color: #ccc #777 #777 #ccc; background: #999; color: #000;}

#header {border: 1px solid; border-color: #ccc #777 #777 #ccc; height: 60px; background: #555; color: #ddd; text-align: right; font-size: 1.5em; padding: 2px; position: absolute; top: 20px; right:20px; left: 20px;}
h2:hover:after {content: '...is the journey!'; display: block; margin-top: -5px;}
#header h1 {background: #555; color: #ddd; float: left; margin-left: 10px; font-size: 1.83em; text-align: left;}

#main {position: absolute; top: 100px; right: 240px; bottom: 20px; left: 20px; overflow: auto; background: #888; color: #fff;}

#menu {position: absolute; z-index: 1000; top: 0px; right: 0px; left: -1px; text-align: center;}
#menu a span {display: none;}
#menu a:hover {position: relative;}
#menu a:hover span {display: block; position: absolute; width: 185px; height: 50px; z-index: 100; color: #999; background: transparent; font: 10px Verdana, sans-serif; text-align: center; padding: 3px; border: 1px dotted #999;}
/*top level*/
#menu a:hover #root {top: 138px; left: 3px;}
#menu a:hover #os {top: 113px; left: 204px;}
#menu a:hover #code {top: 91px; left: 204px;}
#menu a:hover #art {top: 69px; left: 204px;}
#menu a:hover #rant {top: 47px; left: 204px;}

#side {position: absolute; top: 100px; right: 20px; bottom: 20px; width: 200px; background: #444; color: #999;}

#logo {margin: 150px auto auto auto; width: 100px; height: 225px; background: transparent url(../logo/liquibyte.png) no-repeat;}

#valid {position: absolute; right: 0px; bottom: 20px; left: 0px; text-align: center;}

#words p {background: #888; color: #000; margin-bottom: 10px;}
#words {text-align: justify; padding: 0em 1em 0em 1em;  /* top, right, bottom, left */}
#words a:link, #words a:visited {color: #222; text-decoration: none; border-bottom: 1px dotted;}
#words a:active, #words a:hover {color: #fff; text-decoration: none; border-bottom: 1px dotted;}

.content h2 {height: 3em; margin: 0 20px 0 0; padding: 0; text-align: right;}
.content h2, .content h3 {background: #888; color: #ddd;}
.content {padding: 10px;}

.offsite {cursor: ne-resize;}

.sub0 a {border: 1px solid; border-color: #ccc #777 #777 #ccc; background: #999; color: #000; display: block; text-decoration: none;}
.sub0 a:hover {background: #333; color: #999; border-color: #777 #ccc #ccc #777; font-style: italic;}
.sub0, .sub1, .sub2, .sub3 {height: 20px; padding: 1px; text-align: center; width: 200px;}

.sub1, .sub2, .sub3 {margin-left: -1px;}
.sub1:hover, .sub2:hover {left: -201px; position: relative; width: 401px;}
.sub1 .sub2, .sub1:hover .sub2 .sub3 {display: none;}
.sub1:hover .sub2, .sub1:hover .sub2:hover .sub3 {display: block;}

.sub2 li {list-style: none;}