/* =================== Colors, Backgrounds and Font Sizes =================== */

/* Colors, backgrounds and font sizes of all the fine details */

body {
	background : #000 url(/images/bg.gif) repeat top left;
	color : #FFF;
	font-family : tahoma, arial, sans-serif;
	font-size : 14px;
}

/* header styles */

h1, h2 { color : #FF0; }
h1 { text-align : center; font-size : 2em; }
h2 { font-size : 1.33em; }
h3 { font-size : 1.2em; }
h4 { font-size : 1.1em; }
h5 { font-size : 1em; font-weight : bold; font-style : normal; }
h6 { font-size : 1em; font-weight : normal; font-style : italic; }

/* Definition lists */

dt { font-weight : bold; margin-top : 0.5em; }
dd { font-style : italic; margin : 0px; padding : 0px; }

/* Link styles, for the ToC and otherwise */

a { color : white; }
a:hover { text-decoration : none; }

#toc a { text-decoration : none; }
#toc a:hover { text-decoration : underline; }

/* remove the borders from images and linked images */

img, a img { border : none; }

/* break font tags, background tags and other legacy stuff */

font { color : #FFF; font-size : 1em; font-family : tahoma, arial, sans-serif; }
table, th, td { background : none; border : none; }

/* For hidden things */

.hidden { display : none; }

/* Table styles */

table.info { margin : 20px auto; width : 100%; }
table.info caption { font-style : italic; text-align : right; }
table.info td { background-image : url(/images/bgd.gif);
                border : 1px solid #999; }
table.info th { background-image : url(/images/slbg.gif);
                border : 1px solid #CCC; }

/* Table column style classes */

.text { text-align : left; }
.img  { text-align : center; }
.numbers { text-align : right; }
.blackbackground { text-align : center; background-color: black; } /* For those non transparent images. */

/* ============================ Special Sections ============================ */

/* These are the special-purpose styles for special sections of something that
   doesn't appear on every page. */

/* Walkthrough styles */

#walkthrough p { clear : both; text-align : justify; }
#walkthrough img { margin : 0px 10px 10px; }
#walkthrough p.odd img { float : left; }
#walkthrough p.even img { float : right; }
#walknav { clear : both; text-align : center; }
#walknav .prev { float : left; }
#walknav .next { float : right; }

/* ============================ Special Classes ============================= */

/* These are where you put the more useful semantical classes. Remember, an
   element can have more than one class, separated by a space. Note that all
   these classes are supposed to be a help mainly when you write your
   walkthroughs. You implement them by putting a <span> tag around the thing in
   question, e.g. <span class="fire weapon">Fire Sword</span> or
   <span class="special">magic mirror</span> */

/* Elemental Classes */

.fire  { color : #F33; } /* Red, same as #FF3333 */
.water { color : #39F; } /* Blue, same as #3399FF */
.earth { color : #0C0; } /* Green, same as #00CC00 */
.air   { color : #CCC; } /* Light gray, same as #CCCCCC */
.dark  { color : #999; } /* Dark gray, same as #666666 */
.holy  { color : #FF0; } /* Yellow, same as #FFFF00 */

/* Item Type Classes */

/* Note: These styles are not very elaborate right now; but they might be, one
   day in the distant future. One day they might have a neat little icon in
   front of them, the reason it's not there now is because browser support for
   that kind of thing is very limited. */

.weapon    { font-style : italic; } /* For swords, daggers, staffs etc */
.armor     { font-style : italic; } /* For armors, helmets, shields etc */
.accessory { font-style : italic; } /* For accessories; ribbons, rings etc */
.item      { font-style : italic; } /* For regular items; potions, ethers etc */
.special   { font-weight : bold; }  /* For quest items; keys, jewels etc */

/* ============================= Layout Styles ============================== */

/* These styles position everything on the page, and they fix things like major
   backgrounds and similar. Don't touch unless you know what you're doing. */

body, html { padding : 0; margin : 0; } /* reset borders for layout purposes */

#content { margin-left : 200px; padding : 1em; }

#sidebar { position : absolute; top : 1%; left : 1%; }

#toc {
	width : 165px;
	padding : 0px;
	background : transparent url(/images/tocbg.gif) repeat-y top left;
	font-size : 0.92em;
}

#toc h1 {
	background : transparent url(/images/sltop.gif) no-repeat top left;
	font-size : 1.5em;
	padding : 10px 5px;
	margin : 0px;
}

#toc h2 {
	font-size : 1.1em;
	margin : 0.2em 10px;
}

#toc ul {
	padding : 0px 0px 0px 25px;
	margin : 0px;
}

#toc li {
	list-style : outside disc;
}

ul#lasttoc {
	padding-bottom : 10px;
	background : transparent url(/images/slbottom.gif) no-repeat bottom left;
}
 
/* Placing the ads */
#advert { text-align: center; }

/* for legal stuff */

#legal { font-size : 0.8em; background-image : url(/images/bgd.gif);
         border : 1px solid #999; height : 32px; padding-left : 0.25em; }
#legal img { float : right; margin-left : 10px; }