/* =======================ADULT HYPNOTICWISHES ==================================== */
/* #9933FF purple for titles,  #EE88EE purple for texts */
/* Defines everything inside the BODY tags */
body	{ background: url(http://www.hypnoticwishes.com/imgs/BGstars.jpg) black;  /* star background, black if file not found */
	  color: #EE88EE;            /* purple */
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: medium;
	  background-repeat: repeat 
	  margin: 8px;     			/* HTML4 Default */
	  }
	  
div.body  { background: url(http://www.hypnoticwishes.com/imgs/BGstars.jpg) black;  /* star background, black if file not found */
	  color: #EE88EE;						/* purple */
	  font-family: Arial, Helvetica, sans-serif;
	  background-repeat: repeat;
	  padding-left: 12em;					/* left margin of 12em for body text, was 9em, for the menu */
	  width:80%;							/* SAME as body tag, except with margin and 80% width */
	  }
div.main  			{url(/imgs/BGstars.jpg) black;  font-size: medium; padding-left: 3px; padding-right: 3px; padding-top: 0px; padding-bottom: 0px;  }  
blockquote      	{ margin-left: 40px; margin-right: 40px } /* HTML4 DEFAULT */
blockquote.quote	{ border-left-width: 3px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px;
			  		padding-left: 4px; border-style: solid; border-color: #EE88EE }

/* Defines behavior within the p tag */
p { margin: 1.12em 0}	  /* Is the default formatting in HTML4  -- margin: 0 0 5px;     padding-bottom: 15px;*/
p.indent  { text-indent: 1.5em }
p.note    { font-style: italic;
	        text-align: center; }
	                             /* Defines hyper Links properties */

/* This is for regular links, not the navbar*/
a:link  { color: #3399FF}      /* Fresh links are blue */
a:visited  { color: #CC66FF }   /* Visited links are purple */
a:hover  { color: maroon; font-weight: bold } /* Hovering over a link makes them dark red and bold */
a:hover {	color: #FF0000;}     /* red  when you click */
a {	        font-weight: bold;}  /* all links are bold */

/*HTML4 DEFAULTS */
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

        
/* =================== TABLES and ALIGNEMENT ===========================*/
center          { text-align: center; }                  /* HTML4 Default behavior, define the standard tag */

/* table { border-width: 4px; border-style: outset; border-color: #000000; }  /* NEW CODE MAKES BORDER APPEAR WHITE*/
/* td { border-width: 1px; border-style: solid; border-color: #000000; }       */
/* td, th { border: 1px #ccc solid; }											*/

.topmid	{ vertical-align:top; text-align: center;}   
.topleft{ vertical-align:top; text-align: left;}  
.top	{ vertical-align:top; }    
.left   { text-align: left; }    

.center { text-align: center; }                                              /* to center text */
.center table { margin-left: auto; margin-right: auto; text-align: left; }   /* class to center a table */
.centerall { text-align: center; }                                              /* to center text */
.centerall table { margin-left: auto; margin-right: auto; text-align:center; }   /* class to center a table AND its content */
/* so old browsers will center the table and leave inside text left aligned, put entire table inside <div class="center"> *Table* </div>
/*   <div class="center">  </div>   */

/* Put entire table inside:  <div class="center"> *Table* </div>  This centers a table in old browsers */
/* .center table will only work on newer browsers. When a table inherits the the center class, which has been done by encasing it in the div tag, */
/* it should be centered with auto margins, then override the alignement back the default left. */

/* .utgard { border-width: 5px; border-style: outset; border-color: #000000; } /* thick outer border class */

table.midgard {
	border-width: 5px;
	border-spacing: 2px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
}
table.midgard th {
	border-width: 2px;
	padding: 1px;
	border-style: inset;
	border-color: gray;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.midgard td {
	border-width: 2px;
	padding: 1px;
	border-style: inset;
	border-color: gray;
	-moz-border-radius: 0px 0px 0px 0px;
}

table.utgard {
	border-width: 5px;
	border-spacing: 2px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
}
table.utgard th {
	border-width: 2px;
	padding: 1px;
	border-style: inset;
	border-color: gray;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.utgard td {
	border-width: 0px;
	padding: 1px;
	border-style: inset;
	border-color: gray;
	-moz-border-radius: 0px 0px 0px 0px;
}

/* =================== TEXT STYLES  ===========================*/
.Normal { font-weight:normal; }
.Topic { font-weight: bold; color: #9900FF; }  			/* Bold purple */
.BoldSpeak {font-weight: bold; color: #9900FF; } 		/* Bold purple */
.ISpeak { font-size: 1em; color: #9900FF; }								/* just purple */
.BoldYellow { font-weight: bold; color: #FFFF00;}	/* Bold yellow */ 
.TopTitle {font-size: xx-large}							/* Just super large, for green text */
.box { border: solid; border-width: thin; width: 100%; border-color: purple; padding: 0.5em; background: black}
/*dotted, dashed, solid, double, groove, ridge, inset and outset */


hr  { border: 1px inset }  is HTML4 Default */
/* hr { margin: 0 0 20px; height:1px; color: #9933FF;} */
/* hr {    background:none repeat scroll 0 0 #9933FF; max-width:80%; clear: both; 	margin: 20px 0 20px 0; }  /* top right bottom left */
    
/* =================== HEADERS  ===========================*/

/*h1, h2, h3	        { text-align: center } /* first three levels of titles are centered */
/*h1, h2, h3, h4, h5, h6	{   	font-family: Arial, Helvetica, sans-serif;  		line-height: 3em;	color:#9933FF;}           /* purple */
/* h3 { 	color: #33FF33; 	font-weight: bold; 	font-size: x-large; } /*H3 is green */

/* HTML4 DEFAULT Sizes */
h1              { font-size: 2em; margin: .67em 0 }       
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu  { margin: 1.12em 0 }

/* My titles are purple, except H3 which is pale green, H4 is left aligned */
h1, h2, h3 h4, h5, h6	{  color:#9933FF;}  /* h3 {	color: #33FF33; } not green on ahw */
h1, h2, h3	        { text-align: center } /* first three levels of titles are centered */

/* ======================LIST PROPERTIES ============================*/

/* 	font-style: normal; font-weight: normal; font-variant: normal; 	line-height: 1.5em; text-decoration: none;
	text-indent: 5px; padding: 10px; margin: 10px; 	list-style-position: inside;*/
ul.list1 {	list-style-image: url(/imgs/bulletgreen.gif); 	}

/* ul	{ list-style-type: disc; list-style-position: outside; text-indent: 0px; padding: 0 0 10 20px; margin: 0 0 0 0;  text-align:left;}  */
/* bullet is round,          don't indent first line,      don't indent text, pad right 10 front 20 inside box, margin 0 outside box */
	 
/* HTML4 DEFAULTs */
ol, ul, dir 	{ margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }

/*=========================================================== NAVBAR ============================= */
div.navbar ul  { list-style-type: none;  /*  This removes the bullets */
    padding: 0;    /* no padding between text and the box that surrounds it, all sides  */
    margin: 0;     /* no margins between edges and navbar box, all sides */
    position: absolute; /* Once you set position absoluter, you have to set top and left positions, or it ends up with the body  */
	/* Absolute is used to humor IE5,6, which doesn't understand fixed. Fixed keeps it there when you scroll down. It's below */
 /*   top: 2em;  /* 2em down from top  */
 /*   left: 1em;/*  1 em away from left edge */

	     background: #B5B ;  /* specified in RGB, this is light purple background of sidebar */
	     width: 8em;  /*  Total Width of the navbar */
	     height: 25em; /*  Total height of the navbar */
		 margin-left: 0px;  /* no left margin */
		 text-align: center; /* text is centered */
	     font-family: Arial, Helvetica, sans-serif; /* Arial Font */
		 margin-right: auto } /* automatically adjust right margin to max word length */

/* workaround IE5 & 6 to support positon: fixed where in browsers where
** it is known to work.  This is kinda kludgy. if browsers get it, the menu stays when you scroll down  */
body>div.navbar>ul  { position: fixed }
div.navbar a  { text-decoration: none;
		font-weight: bold } 
div.navbar a:link, div.navbar a:visited  { color: black } /* navbar text color is black, when fresh or already visited */
div.navbar a:hover {background: black ;color: maroon; font-weight: bold} /*inverts background to black when hovering over navbar element */
div.navbar ul li  { font-size: normal;
		    border-style: solid;
		    border-color: black;
		    border-top-width: 1px;
		    border-left-width: 0px;
		    border-right-width: 0px;
		    border-bottom-width: 1px; }
div.navbar ul li.image	{ border-top-width: 0px;
			  border-bottom-width: 0px; }
			  
/* ================================================================== end NAVBAR */



/*
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }

th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
menu, dd        { margin-left: 40px }

i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }

u, ins          { text-decoration: underline }  
br:before       { content: "\A"; white-space: pre-line }
*/

/* Begin bidirectionality settings (do not change)
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

*/

			  
/* this is the title colors, below <div class=body>, before <div class=main>  */

/* NOTES EXPLAINING CSS
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
is equivalent to 
  margin: 1em 0em 1em 0em;   First element is top, then it's clockwise

padding: also takes 4 values, top, then clockwise. Listing it once means all sides get the same value
Padding adds space between the text and the rectangle that surrounds it

 <style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }  
  h1 { margin-left: -8%;}                       the change is additive, so H1 is at 2%
  h2,h3,h4,h5,h6 { margin-left: -4%; }          and the rest at 6%
</style>

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
available colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
*/