/*************************************************************/
/* This is the CSS3 style sheet for Occult Mysteries */
/* Filename: omstyle.css
/* Last updated 4 February 2021 */
/* line 131 added img flip 23 November 2019 */
/* line 108 added 100px indent for Roos poem 25 October 2019 */
/* line 243 added blockquote warn class 5 June 2019 */
/* line 470 updated logo image and re-set logo text 14 June 2018 */
/* line 192 added h6 center class 18 April 2017 */
/* line 425 reduced line space in ol plain list 1 March 2017 */
/* line 411 added note ol style 19 October 2016 */
/* line 243 added fancy blockquote for home page quote 24 June 2016 */
/* line 600 added form styles for course questions 26 April 2016 */
/* line 180 added div for socmedia icons 12 April 2016 */
/* line 770 added nobooks icon style */
/* line 346 sidebar plain list style added 1 February 2016 */
/* line 484 added sidebar style h4 */
/* line 42 added attrib note style */
/* line 597 added search box form style */
/* added div class spaceout 500px */
/* line 367 added new pic box class */
/* line 495 added new OL table class */
/* W3C VALIDATED */
/*************************************************************/

html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #F7F7F7 url(pattern.png) fixed;
  color: #000;}
  
p
{ padding: 0 0 14px 0;
  line-height: 1.4em;
  text-align: justify;
  font-size: 114%;}
  
p.purple
{ color: #622C50; }

.red
{ color: #FF0000; }

.blue
{ color: #006699; }

.xmas
{ color: #006927; }

p.note
{ line-height: 1.3em;
  font-size: 100%;
  color: #622C50; }

.smallgrey  
{  margin-top:-10px;
  line-height: 1.3em;
  font-size: 90%;
  color: #888; }
  
.knote
{ line-height: 1.3em;
  font-size: 100%;
  font-style: italic;
  color: #622C50; }
  
.txtnote
{ font: normal 100% arial, sans-serif;
  color: #622C50;
  margin: 0px 0 15px 0;
  padding: 5px 10px 5px 10px;
  border: 1px dotted #622C50;
  border-left: 4px solid #622C50;}   
  
.txtnotered
{ font: normal 100% arial, sans-serif;
  color: #FF0000;
  margin: 0px 0 15px 0;
  padding: 5px 10px 5px 10px;
  border: 1px dotted #FF0000;
  border-left: 4px solid #FF0000;}  
  
.blocknote
{ line-height: 1.3em;
  font-style: normal;
  font-weight: bold;
  color: #622C50; }    
  
p.attribnote /* negative top margin for quote attributions */
{ margin-top: -15px;
  line-height: 1.3em;
  font-size: 100%;
  color: #622C50; }  
  
p.story /* indented text for fairy story */
{ text-indent: 30px; }
  
p.indent 
{ margin-left: 50px; }

p.indentsidebar 
{ margin-left: 10px; }

/* tabbed indent for Roos poem use with indent class 25 oct 2019 */

.tab  
 { margin-left: 100px; }

h5.indent 
{ margin-left: 50px; }

/* 2 line drop caps for Li Wang Ho added 16 oct 2014 */

.firstLetter
{ float: left;
  margin: 0.240em 0.161em 0 0;
  color: #a92a29;
  font-family: arial, sans-serif;
  font-size: 2.9em;
  font-weight: bold;
  line-height: 0.5; }

.firstLetter + span
{ margin-left: -0.1em; }
 
img
{ border: 0;}

img.flip 
{  transform: scaleX(-1); }

.hrule
{ position: relative;
  width: 570px;
  height: 42px;
  margin: 0 0 14px 0;
  background: url(decrule.png) no-repeat; }
  
/* new hr rule style added 9 October 2014 */
hr
{ width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  height: 2px;
  color:#D2C8CF;
  background-color: #D2C8CF;
  border: none; } 

h1, h2, h3, h4, h5
{ font: bold 250% arial, sans-serif;
  color: #666;
  margin: 0 0 15px 0;
  padding: 5px 0 5px 0;}
  
h1
{ letter-spacing: -1px; }

h1.nolead
{ margin-bottom: 0px; }

h2
{ font: bold 180% arial, sans-serif;
  color: #622C50;  
  margin: 0;
  padding: 0 0 8px 0;}
  
h2.revout
{ font: bold 180% arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  color: #622C50;  
  margin: 20px 0 15px 0;
  padding: 0 10px 5px 10px;
  background-color: #D2C8CF; }  

h2.quotetop
{ font: bold 180% arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  color: #622C50;  
  margin: -11px -11px 15px -13px;
  padding: 5px 10px 5px 10px;
  background-color: #D2C8CF; }  

h3
{ font-size: 160%;
  margin: 0 0 9px 0;
  color: #333;}
  
h3.serif
{ Georgia, serif
  font-size: 160%;
  margin: 0 0 9px 0;
  color: #333;}  
  
h3.tight
{ font-size: 160%;
  margin: 0px;}  

h4, h5
{ margin: 0;
  padding: 0 0 15px 0;
  font: bold 120% 'trebuchet ms', arial, sans-serif;
  color: #622C50;
  line-height: 1.2em;}
  
h5.tight
{ padding-bottom: 3px;} 
  
h6
{ margin: 0 0 9px 0;
  font-size: 120%;
  line-height: 1.2em;
  color: #333;}
  
h6.center
{ font-size: 100%;
  text-align:center;
  line-height: 1.4em;
  color: #622C50;}   

a, a:hover
{ outline: none;
  text-decoration: none;
  color: #0044DD;}

a:hover
{ text-decoration: underline;}

 .socmedia
 { display:inline-block;
   margin: -5px; }

blockquote.wistxt
{ margin: 0px 0 20px 0; 
  padding: 10px 20px 0px 20px;
  border: 1px solid #5a8f00;
  border-left: 4px solid #5a8f00;
  background: #FCFCEE;
  text-align: center;
  text-indent: 14px;
  font: italic 110% 'georgia', serif;
  color: #333;
  line-height: 1.2em; }
  
blockquote.news
{ margin: 0px 0 20px 0; 
  padding: 10px 10px 0px 10px;
  border: 1px solid #D2C8CF;
  border-left: 4px solid #D2C8CF;
  background: #FCFCEE;
  color: #333;
  line-height: 1.2em; }
  
blockquote.warn
{ margin: 0px 0 20px 0; 
  padding: 0px 10px 0px 10px;
  border: 2px dotted #FF0000;
  border-left: 2px solid #FF0000;
  border-right: 2px solid #FF0000;
  background: #FFFFEB;
  line-height: 1.2em; }  
      
blockquote.thanks
{ margin:14px 0 50px 0; 
  padding: 10px 10px 0px 10px;
  border: solid 1px #D2C8CF;
  border-top-width: 10px;
  background: #FFFFEB;
  text-align: left;}
  
.quote
{ margin-top: -10px;
  font: normal 90% arial, sans-serif;
  color: #5a8f00; }
   
blockquote.books
{ background: #FFFFEB;
  margin-top: 20px;
  margin-bottom: 30px;
  border: solid 1px #D2C8CF;
  border-top-width: 10px;
  padding: 10px;
  padding-right: 10px;
  padding-bottom: 0px; }
  
blockquote.books h4
{ line-height: 1.2em;
  font-weight: bold; }
  
/* begin fancy blockquote homepage quote */	
blockquote.home {
    font-family: Georgia, serif;
    font-size: 130%;
    font-style: italic;
    text-align:center;
    max-width: 400px;
    margin: 0 auto; 
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838; }

blockquote.home:before {
    display:inline-block;
    padding-left: 10px;
    content: "\201C";
    font-size: 100px;
    position: absolute;
    left: -8px;
    top: -35px;
    color: #D2C8CF;
}
blockquote.home cite {
    color: #622C50;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}
blockquote.home cite:before {
    content: "\2014 \2009";
}
blockquote.home cite:after {
    content: "\2014 \2009";
}
/* fancy blockquote homepage end */	  
  
img.books
{ float: right; 
  margin: 6px 0 10px 20px;}
 
.booksinfo
{ font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  padding-bottom: 5px; }
  
img.cap
{ float: left; 
  margin: 6px 0 0px 0px;
  padding-right: 10px; }

.left
{ float: left;
  width: auto;
  margin-right: 10px;
  padding: 10px 0px 20px 0px; }
  
.leftmap /* pic box for atlantis map */
{ float: left;
  width: auto;
  margin-bottom: 20px;
  padding: 0px;
  border: solid 1px #622C50;}  
  
.leftfaq /* pic box for faq icons */
{ float: left;
  width: auto;
  margin-right: 8px;
  padding: 5px 0px 0px 0px; }
  
  .jmbooks /* pic box for j michaud's books */
  { float: left;
    width: auto;
    margin-right: 20px;
    padding: 10px 0px 0px 0px; }  
  
.leftoon /* pic box for contents page cartoon */
{ float: left;
  width: auto;
  margin-right: 20px;
  padding: 5px 0px 0px 0px; }  
  
.leftwrap /* standard pic box for text wrap */
{ float: left;
  width: auto;
  margin-right: 20px;
  padding: 5px 0px 10px 0px; }    
  
.leftwords /* pic box for sidebar words page */
{ float: left;
  width: auto;
  margin-right: 10px;
  padding: 20px 0 15px 0; }
  
.leftbooks /* pic box for sidebar books page */
{ float: left;
  width: auto;
  margin-right: 10px;
  padding: 0px 0 15px 0; }  
  
.newitem /* pic box for new item icon */
{ float: left;
  width: auto;
  margin-right: 0px;
  padding: 3px 5px 0px 0px; }    
  
.right
{ float: right; 
  width: auto;
  margin-left: 10px;}
  
.rightpic /* pic box right aligned images */
{ float: right;
  width: auto;
  margin-left: 20px;
  padding: 5px 0px 0px 0px; }   

.center
{ display: block;
  text-align: center;
  margin: 10px auto;}
  
.middle
{ display: block;
  text-align: center;
  margin: -11px 0 10px -14px;}  

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 0 0; 
  padding: 0 0 4px 5px;
  font-size: 114%; }
  
ul li.current a
{ color:#622C50;
  background-color: #e5dde3;
  font-weight: bold; }
  
.lwh /* extra space between items in li wang ho list */ 
{ margin-bottom: 30px; }

ol
{ margin: 0px 0 0px 20px;}

ol li
{ margin: 0 0 10px 0;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.3em;
  color: #622C50;  }

ol li.current a
{ color:#622C50;
  background-color: #e5dde3;
  font-weight: bold; }
  
/* Sidebar List style */

ol.side
{ margin: 0px 0 10px 20px;}

ol.side li
{ margin: 0 0 10px 0px;
font-size: 100%;
font-weight: normal;
line-height: 1.3em;
color: #000; }  

/* note list style indented */

ol.note
{ margin: 0px 0 10px 20px;}

ol.note li
{ margin: 0 0 20px 20px;
font-size: 100%;
font-weight: normal;
line-height: 1.3em;
color: #622C50; }

/* Plain List style indented */

ol.plain
{ margin: 0px 0 20px 20px;}

ol.plain li
{ margin: 0 0 10px 20px;
font-size: 114%;
font-weight: normal;
line-height: 1.3em;
color: #000; }

/* Ordered list style for tables */

ol.table
{ margin: 0px 0 5px 0px;
padding-bottom: 8px; }

ol.table li
{ margin: 0 0 0 20px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 114%;
font-weight: normal;
line-height: 1.3em;
color: #000; }

#main, #header, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#main
{ width: 910px; }

#header
{ width: 890px; }

#logo
{ position: relative;
  width: 890px;
  height: 300px;
  background: url(omlogo.jpg) no-repeat;}
  
#logo_text
{ margin-top:0px;
  margin-left:10px;
  text-shadow: 4px 4px 13px #000;}
 
#logo h2
{ float: left;
  font: normal 650% arial, sans-serif;
  letter-spacing: 3px;
  margin: 5px 0 0 0;
  padding: 0px 0 0 17px;
  color: #fff;
  float: left;}

.slogan
{ float: left;
  margin: 0px 0 0 17px;
  padding: 80px 0px 0 5px;
  font: italic 240% 'georgia', serif;
  letter-spacing: 6px;
  color: #F5CCDC;}

/************/
/*MENU STUFF*/
/************/

#menubar
{ width: 890px;
  height: 30px;
  margin: -45px 0 0 0;
  position: relative;
  z-index: 1;
  float: left;} 

ul#menu
{ float: left;}

ul#menu li
{ float: left;
  padding:0px;
  list-style: none;
  margin: 6px 0 0 0; }

ul#menu li a
{ font: normal 120% sans-serif;
  text-decoration: none;
  display: block; 
  float: left; 
  height: 20px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  -moz-border-radius-topleft: 10px;	/*for moz 3.5*/
  -moz-border-radius-topright: 10px;	/*for moz 3.5*/
  padding: 3px 10px 15px 10px;
  text-align: center;
  color: #F5CCDC;
  border: 0;}
  
ul#menu li.current a
{ height: 20px;
  padding: 5px 10px 15px 10px;
  background: #FFF;
  color: #000;}

ul#menu li a:hover
{ color: #fff;}

ul#menu li.current a:hover /* current tab only hover color */
{ color: #000;}

/***************/
/*CONTENT STUFF*/
/***************/

#site_content
{ width: 890px;
  overflow: hidden;
  background: #FFF; }

  body#ruru h1
{ margin-bottom: 0px; } 

  body#ruru .sidebar h5
{ margin-bottom: -15px; }  
   
#sidebar_container
{ float: right;
  width: 250px;
  margin: 25px 0px;}

.sidebar
{ float: right;
  width: 200px;
  margin: 0 24px 27px 0;
  background-color: #f8f4f9;
  border: 1px solid #D2C8CF;
  padding: 0 15px 0px 15px;
  box-shadow: 8px 8px 5px #CBCBCB;}
  
.sidebar h3 /* altered padding 18 May 2017 */
{ padding: 10px 0px 10px 0px;
  margin: 0 1px;
  line-height: 1.1em; }
  
.sidebar h3 a /* added link style for sidebar heads 8 May 2012 */
{ font-size: 100%;
  font-weight: normal;}
  
.sidebar h3 a:hover /* added link style for sidebar heads 8 May 2012 */
{ font-weight: normal;}

.sidebar h4
{ margin-bottom: -10px;
  padding-top: 5px;
  font-size: 120%;
  font-weight: bold;
  color: #000;}

.sub /* added for h4 sidebar subheads 5 January 2015 */
{ margin-bottom: -10px;
  padding-top: 5px;
  border-top: 2px solid #D2C8CF;
  font-size: 120%;
  font-weight: bold;
  color: #000;}
  
.sidebar h5 
{ font-size: 120%;
  line-height: 1.2em;
  font-weight: bold;
  color: #622C50;}  
   
.sidebar p
{ line-height: 1.3em;
  Text-align: left;
  font-weight: normal;
  font-size: 100%;}
 
.sidebar a
{ outline: none;
  color: #0044DD;
  font-size: 100%;
  font-weight: normal;
  text-decoration: none; }

.sidebar a:hover
{ font-weight: normal;
  color: #000099;
  text-decoration: underline;} 
  
.sidebar ul
{ margin: 2px 0 22px 0px;}
  
.sidebar ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 3px 0 4px 20px;
  font-size: 100%;
  line-height: 1.3em;}
  
.spaceout
{ float: right;
  width: 200px;
  margin-top: 500px;}  

#content
{ text-align: left;
  width: 570px;
  float: left;
  padding: 12px 0 5px 25px;
  margin: 0;}
  
#content ul
{ margin: 2px 0 22px 0px;}
  
#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 15px;
  line-height: 1.5em;}
  
#questionnaire
{ text-align: left;
  width: 768px;
  float: left;
  padding: 12px 0 5px 25px;
  margin: 0;}  
  
/*INDEX PAGE MENU AMENDED 13 OCTOBER 2014 - added h4 style */  
  
h3.home
{ margin: -5px 0 -2px 0;
  padding-bottom: 5px;}
  
h3.home a
{ border-bottom: 2px dotted;}

h3.home a:hover
{ border: none;
  background-color: #dadad2;}
  
h4.home
{ font-size: 130%;
  margin: -5px 0 -2px 0;
  padding-bottom: 5px;}
  
h4.home a
{ border-bottom: 2px dotted;}

h4.home a:hover
{ border: none;
  background-color: #fff37c;}
     
/*****************************************************/
/*CONTACT FORM Amended for study course 26 April 2016*/
/*****************************************************/

.form_settings
{ margin: 20px 0 0 30px;}

.form_settings p
{ padding: 0 0 4px 0;
  color: #555;
  font-size: 1.0em;
  font-weight: bold;}
  
.form_settings p.plain
{ font-weight: normal;}  

.form_settings span
{ float: left; 
  width: 180px; 
  text-align: left;}
      
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 330px; 
  font: 100% arial; 
  border: 1px solid #D2C8CF; 
  background: #FFF; 
  color: #000;}
  
.form_settings textarea.course {
   overflow: hidden;
   width: 730px;
   height: 90px;
   background: #FBF6D9; }
  
input[type="text"].course {
   margin-bottom: 10px;
   width: 730px;
   padding: 5px;}
   
.form_settings .submit
{ font: 100% arial; 
  border: 2px solid; 
  width: 99px; 
  margin: 10px 0 20px 243px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #622C50; 
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 330px;}

.form_settings select
{ width: 330px;} 

/************/
/*SEARCH BOX*/
/************/

<style type="text/css">
	#tfheader{
		background-color:#c3dfef;
	}
	#tfnewsearch{
		float:left;
		padding:0px;
	}
	.tftextinput4{
		width:138px;
		margin: 0;
		padding: 6px 15px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		color:#666;
		border:1px solid #b14c76; border-right:0px;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;	
	}
	.tfbutton4 {
		margin-top: -2px;
		padding: 0;
		vertical-align: middle;
		width:30px;
		height:30px;
		font-family: Arial, Helvetica, sans-serif;
		font-size:14px;
		font-weight:bold;
		outline: none;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		color: #ffffff;
		border: solid 1px #b14c76; border-right:0px;
		border-top-right-radius: 5px 5px;
		border-bottom-right-radius: 5px 5px;
		background: #b14c76 url('searchbutton.png');
	}
	/* Fixes submit button height problem in Firefox */
	.tfbutton4::-moz-focus-inner {
	  border: 0;
	}
	.tfclear{
		clear:both;
	}
 
/*********************/
/*SIDEBAR BOOKS LINKS*/
/*********************/

.sidebooks
{ float: right;
  width: 200px;
  margin: 0px 24px 20px 0;
  background: #FFFFEB;
  border: 2px dashed #D2C8CF;
  padding: 10px 15px 0px 15px; }

.sidebooks h3
{ padding: 5px 0px 0px 0px; }

.sidebooks h4
{ font-size: 120%;
  line-height: 1.3em;
  font-weight: bold;
  color: #622C50;}

.sidebooks p
{ padding: 0 0 10px 0;
  line-height: 1.3em;
  Text-align: left;
  font-size: 100%;}
  
.booksnote
{ padding: 0 0 10px 0;
  line-height: 1.3em;
  Text-align: left;
  color: #622C50;
  font-size: 100%;}
      
.amazon
{ margin-bottom: 10px;
  padding: 5px 5px 5px 30px;
  border: 1px solid #FF5F08;
  border-left: 6px solid #FF5F08;
  background: url(amazon-icon.png) left center no-repeat;  
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  color: #FF5F08;}
  
.abebooks
{ margin-bottom: 10px;
  padding: 5px 5px 5px 35px;
  border: 1px solid #FF0000;
  border-left: 6px solid #FF0000;
  background: url(abebooks-icon.png) left center no-repeat;  
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  color: #FF0000;}
   
 .questbooks
{ margin-bottom: 10px;
  padding: 5px 5px 5px 35px;
  border: 1px solid #0066CC;
  border-left: 6px solid #0066CC;
  background: url(questbooks-icon.png) left center no-repeat;  
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  color: #0066CC;}
  
  /* added our books icon style to books page for gstar and sa-heti updated 2 March 2016 */   
 .ourbooks
{ margin-bottom: 10px;
  padding: 5px 5px 5px 33px;
  border: 1px solid #622C50;
  border-left: 6px solid #622C50;
  background: url(ourbooks-icon.png) left center no-repeat;
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  color: #622C50;}
  
  /* added no books icon style 1 March 2016 */   
 .nobooks
{ margin-bottom: 10px;
  padding: 5px 5px 5px 33px;
  border: 1px dashed #888;
  border-left: 6px solid #888;
  background: url(nobooks-icon.png) left center no-repeat; 
  font-size: 120%;
  font-weight: bold;
  text-decoration: none;
  color: #888;}  

.sidebooks a
{ outline: none;
  color: #0044DD;
  font-size: 130%;
  font-weight: bold;
  line-height: 1.2em;
  text-decoration: none; }

.sidebooks a:hover
{ font-weight: bold;
  color: #000099;
  text-decoration: underline;}
  
/* added smaller sidebar links style for body text links March 3 2013 */  
   
.sidesmall a
{ outline: none;
  color: #0044DD;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.3em;
  text-decoration: none; }

.sidesmall a:hover
{ font-weight: bold;
  color: #000099;
  text-decoration: underline;}  
  
/************/
/*FOOTER*/
/************/

#footer
{ font: normal 100% arial, sans-serif;
  color: #fff; }
  
#footer p
{ text-align: center;
  padding-bottom: 5px;
  font-size: 100%; }

.footlinks
{ height: 70px;
  margin: 0 10px 0 10px;
  background: url(omfoot.jpg) no-repeat;
  padding: 10px;
  padding-top: 20px;}
  
#footer a, #footer a:hover
{ color: #65BAFC;
  font-weight: bold;
  text-decoration: none;}

#footer a:hover
{ color: #F5CCDC;
  text-decoration: underline;}

.gallery img
{ position:absolute;}
 
table
{ margin: 10px 0 30px 0;}

table tr th, table tr td
{ background: #F5F5F5;
  color: #111;
  padding: 7px 4px;
  text-align: left;}
  
table tr td
{ background: #FBFBFB;
  color: #111;
  border-top: 1px solid #fff;}

  
/******************/
/* End css */
/******************/