/* written by boyzonder, copyright 2004 */

/* the body tags, which apply all throughout the document */
body {
	font-family: "Aharoni", "Tahoma", "Bitstream Vera Sans", "Luxi Sans", sans-serif;
	color: white;
	background-color: black;
	padding-top: 3%;
	padding-bottom: 3%;
}

/* color of pre-formatted text */
pre {
	color: #6495ED; /* cornflowerblue */
}

/* the title ID, which is the title :-) */
#title {
    padding: .5%;
    padding-right: 3%;

	color: black;
	background-color: white;

	font-size: xx-large;
	font-weight: bold;
   text-transform: lowercase;
   text-align: right;
}

/* the page ID, which is the main text */
#page {
	position: relative;
	top: 10%;
	left: 25%;
	width: 70%;
	margin: 3%
}
#page a {
	color: red;
}
#page a:visited {
	color: red;
}
#page a:hover {
	color: #E6E6FA; /* lavender */
}
#page h1 {
	margin-left: -8%;

    text-transform: lowercase;    
}
#page h2 {
	margin-left: -6%;

    text-transform: lowercase;    
}
#page h3 {
	margin-left: -5%;

    text-transform: lowercase;    
}

/* the menu ID, which is the navigation menu on the left */
#menu {
	position: absolute;
	top: 4%;
	left: 2%;
	width: 18%;
	float: left;

	background-color: black;
	border: 1px solid white;

	font-size: large;
    text-transform: lowercase;
}
[id="menu"] {
	position: fixed !important;
}
#menu a {
	padding-left: 20px;
	padding-right: 20px;

	color: white;
}
#menu a:hover {
	color: silver;
	background-image: url("images/yinyang.png");
	background-repeat: no-repeat;
	background-position: center left;	
}
#menu a.extras {
	color: 	#8B0000; /* darkred */
}
#menu-extras {
	display: none;
}

/* remove image borders */
img {
	border: 0px;
}

/* some custom image classes */
.leftimage {
    float: left;
    padding: 1%;
}
.rightimage {
    float: right;
    padding: 1%;
}
.centerimage {
	display: block;
	text-align: center;
}
.leftphoto {
}
.rightphoto {
}

/* a custom note class*/
.note {
  position: relative;
	margin-left: 5%;
	margin-right: 5%;
	padding: 1%;

	color: red;
	border: 1px dashed red;

	font-size: small;
}

/* defines the way links should be displayed in note classes */
#page a.notelink {
	border: none;
	display: inline;

	color: white;
}

/* a warning class */
.warning {
	float: right;
	margin: 1%;
	padding: 1%;
	width: 20%;
	position: relative;
	z-index: 32;

	color: white;
	background-color: red;

	font-size: x-small;
	font-weight: bold;
	text-align: center;
}

/* ID's for some info pop-ups */
#firefoxpopup {
	display: none;
	float: left;
	position: absolute;
	width: 60%;
	z-index: 16;
	margin-left: 3%;
	padding: 1%;
	
	background-color: silver;
	color: black;
	
	font-size: x-small;
}
#firefoxpopup pre {
	color: #00008B; /* darkblue */
}
#stylepopup {
	display: none;
	float: left;
	position: absolute;
	width: 60%;
	z-index: 16;
	margin-left: 3%;
	padding: 1%;
	
	background-color: silver;
	color: black;
	
	font-size: x-small;
}

/* button class, for nice buttons */
#page a.X {
	padding: 0px 3px 0px 5px; 

	color: white;
	background-color: 	#8B0000; /* darkred */

	text-decoration: none; 
	font-weight: bold; 
}
#firefoxpopup a{
	color: #8B0000; /*darkred */
}
#firefoxpopup a.X {
	color: white;
	background: transparent;
}
#stylepopup a{
	color: #8B0000; /*darkred */
}
#stylepopup a.X {
	color: white; 
	background: transparent;
}


/* classes for the valid W3-something buttons */
.W3button {
	position: relative;
	float: right;
   padding: 1%;
   font-weight: bold;
}
.W3button a {
	display: inline;
}
.W3button a.w3c {
	border: none;
   font-size: xx-small;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}
.W3button a.spec {
	border: 1px solid #fc6;
   font-size: xx-small;
	padding-left: 5px;
	padding-right: 5px;
}
.W3button a.w3c:link,
.W3button a.w3c:visited,
.W3button a.w3c:hover {
	background-color: #fff;
	color: #0c479d;
	text-decoration: none;
}
.W3button a.spec:link,
.W3button a.spec:visited,
.W3button a.spec:hover {
	background-color: #fc6;
	color: #000;
	text-decoration: none;
}