body  {
	font-family: Verdana;
	font-size: 9pt;
	color: #000000;
	text-width: 50%;
	margin: 0;
	padding: 0;
}

.body {
	margin: 8px;
        min-width: 900px
}

.label {
        font-style: italic;
}

em {
	font-weight: bold;
	font-variant: small-caps;
	font-style: normal;
}

p {
	text-indent: 2em;
	margin-top: 1em;
	margin-bottom: 0;
}

.indent {
	text-indent: 2em;
}

.contact {
           font-weight: normal;
           font-style: italic;
           text-align: right;
           position: relative;
           top: -2.5em;
           margin-bottom: -2em;
}

.remark,
.byline {
	font-weight: bold;
	font-style: italic;
	text-align: right;
	position: relative;
	top: 1em;
	margin-left: 50%; /* This prevents the byline from covering half the recipeTitle link in search results */
}
.remark em,
.byline em {
             font-variant: normal;
             font-style: italic;
             font-weight: normal;
             }
.recipeIngredients .term,
.remark .term,
.byline .term {
                font-style: normal;
                font-weight: normal;
                }

/* the '.title2' selector is to allow files to have two markup titles without affecting their database parsing */
.title, .title2 {
	font-family: Arial, Verdana;
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2em;
}
        
.chapterTitle, .sectionTitle, .reviewTitle, .recipeTitle, .ingredientTitle, .mealTitle {
	font-family: Arial, Verdana;
	font-size: 14pt;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-color: #818181;
	border-bottom-style: solid;
	margin-bottom: 2em;
}

.sectionTitle {
	width: 50%;
	font-size: 13pt;
}

.chapterTitle {
	width:75%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	text-align: center;
}

.chapterTitle .term, .sectionTitle .term, .reviewTitle .term, .recipeTitle .term, .ingredientTitle .term, .mealTitle .term {
       font-weight: normal;
       font-style: normal;
       font-size: 12pt;
}

span.recipeTitle {
	text-decoration: underline;
	font-size: 12pt;
	border-bottom: none;
}

/* Intended for search information, these will be hidden. For now. */
.hide {
	display: none;
}
.recipeDescription {
        display: none;
}
.recipeCategories { 
        display: none;
}


.recipeIngredients {  
        font-style: italic;
}
.quote .recipeIngredients,
.note .recipeIngredients {
	font-style: normal;
}
ul.recipeIngredients,
div.recipeIngredients {
	font-size: 10 pt;
	font-style: italic;
	margin-bottom: 2em;
	margin-left: 2em;
}

ul.recipeIngredients {
	list-style-type: circle;
	margin-top: 0;
	padding-left: 1em;
}

ul.recipeIngredients ul { 
        list-style-type: disc;
        padding-left: 1em;
}

.recipeIngredients em {
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
}

.imageRight {
	width: 95%;
}

.recipeMethod, .text, .ingredientDescription, .reviewText {
	margin-left: 2em;
	width: 75%;
}
	.recipeMethod table td, .mealMenu table td {
		padding: 1em;
	}

.mealMenu { 
	margin-left: 2em;
	width: 75%;
        font-style: italic;
 }

.recipeSubHeader, .recipeSubSubHeader, .recipeSubSubSubHeader {
	font-family: Verdana;
	font-weight: bold;
	font-variant: small-caps;
	text-align: left;
}

.recipeSubHeader, .recipeSubSubHeader {
	font-weight: 10pt;
}

.recipeSubHeader {
	background-color: #CCCCCC;
}

li.recipeSubSubHeader {
	list-style-type: none; 
	margin-left: -1em; 
	padding-left: -1em;
}

.recipeSubSubSubHeader {
	font-weight: 8pt;
}

.recipeSubSubSubHeader:before {
	white-space: pre;
	content: " - ";
}

.recipeSubBody {
	margin-left: 2em;
}

.message {
	font-family: "Courier New Bold", "Courier New", Courier;
	font-size: 10pt;

}

div.message {
	margin-left: 2em;
	width: 30%;
	margin-right: 2em;
}

.note {
	font-family: Verdana, "Comic Sans MS";
	font-size: 10pt;
	font-style: italic;
}
.note .term { 
              font-style: normal;
}

div.note {
	margin-left: 2em;
	width: 95%;
	margin-right: 2em;
}

.note em {
/* IE doesn't seem to use the 'inherit' property correctly */
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
}

div.margins {
	margin-left: 2em;
	width: 95%;
	margin-right: 2em;
}

.comment, .comment1 {
	font-family: "Lucida Handwriting", "Lucida Handwrit", "Comic Sans MS", cursive;
	color: red;
	font-size: 10pt; 
}

div.comment, div.comment2, div.comment3  {
	width: 95%;
	margin-left: 2em;
	margin-right: 2em;
}

.comment em {
	font-style: italic;
	font-weight: bold;
	font-variant: normal;
}

.comment A { 
        color: red;
        text-decoration: underline;
}
	
.subComment, .comment2 {
	color: green;
}

.subComment A, .comment2 A { 
       color: green;
       text-decoration: underline;
}

.subSubComment, .comment3 {
	color: blue;
}

.subSubComment A, .comment3 A {  
       color: blue;
       text-decoration: underline;
}

.nocomment {
	color: black;
}

.caps {
	font-weight: bold;
	font-variant: small-caps;
}

A {
	color:#770000;
	text-decoration: none;
}

A:Hover {
	color: #770000;
	text-decoration: underline;
} 

A.lightbox:Hover { 
	text-decoration: none;
 }
	
A:Visited {
	color: #777777
}

.nolink {
	text-decoration: underline;
}

img {
	display: block; 
	margin-left: auto;
	margin-right: auto;
/*	margin-bottom: 2em; */
	border : 0;
}

	img.thumbnail {
		display: inline;
		width: 10em;
		height: 10em;
		border: 0;
	}
	img.center {
		display: inline;
	}

.expander {
}
.expander img {
	display: inline;
	vertical-align: bottom;
}

.floatRight, .captionRight {
	display: inline;
	float: right;
	margin-left: 2em;
	margin-bottom: 2em;
	margin-right: 0em;
}

.captionRight {
	clear: right;
	position: relative;
	top: -1em;
}

.floatLeft {
	display: inline;
	float: left;
	margin-left: 2em;
	margin-bottom: 2em;
	margin-right: 2em;
}
.clear {
	clear: both;
}

.italic {
	font-style: italic;
}
.note .italic, 
.note i,
.remark .italic,
.remark i,
.byline .italic,
.byline i
{
	font-style: normal;
}

.quote {
	font-style: italic;
}
.quote .quote,
.note .quote,
.remark .quote,
.byline .quote {
	font-style: normal;
}
.quote:before {
	content: open-quote;
}
.quote:after {
	content: close-quote;
}
.quote .quote:before { 
	content: \2018;
}
.quote .quote:after {
	content: \2019;
}

div.quote {
	width: 95%;
	margin-left: 2em;
	margin-right: 2em;
}

.rant {
	font-family: Monotype;
	font-size: larger;
	margin-left: 2em;
}
.rant:before {
	content: "<rant>";
}
.rant:after {
	content: "</rant>";
}

.term { 
        font-style: italic;
 }
.strike { 
          text-decoration: line-through;
 }

#search_form label, #login_form label {
	color: #770000;
}
#searchtip_trigger {
	color: #770000;
	font-style: italic;
	text-decoration: underline;
}

.tooltip {
  top: 20px;
  position: absolute;
  background: #FF8888;
  opacity: 0.9;
  padding: 1em;
  font-weight: bold;
  color:#770000;
  border:solid 1px;
  z-index: 10;
}
.tooltip .tooltip_category:Hover {
	text-decoration: underline;
	cursor: pointer;
}

.diary, .result, .section { 
         /* pink: border: 2px solid #DDCCCC; */
         border: 2px solid #d9cea9;
         /* pink: background-color: #FFEEEE; */
         background-color: #f9eec9;
         margin: 1em;
         margin-top:3em;
         padding: 1em;
         border-radius: 6px;
         -moz-border-radius: 6px;
         -webkit-border-radius: 6px;
         }

.date { 
        display: block;
        font-weight: bold;
        padding-left: 1em;
        padding-bottom: 1em;
        padding-top: 1em;
        }
/* Disable links in a date tag (the pointer-events property is in the draft CSS3 spec and is only implemented in Chrome and Firefox */
.date A { 
          cursor: default;
          pointer-events: none;
          color: #777777;
          }
.date A:Hover { 
          color: #777777;
          text-decoration: none;
 }
.date A:Visited { 
                  color: #777777;
 }
.diary .date { 
               display: block;
               padding-top: 0;
               }
/* Re-enable links in a date tag in a diary tag */
.diary .date A {
        cursor: pointer;
        pointer-events: auto;
	color:#770000;
	text-decoration: none;
}

.diary .date A:Hover {
	color: #770000;
	text-decoration: underline;
} 
.diary .date A:Visited {
	color: #777777
}

.diary_next {
/*	text-align: right; */
	float: right;
	padding-bottom: 6px;
}
.diary .comment_count {
	font-weight: bold;
	padding: 1em;
}

div.right, .right {
	text-align: right;
        margin-right: 0;
}
.floatRight.right { 
        margin-right: -2em;
 }
.floatRight.margins { 
        margin-right: 1em
        margin-top: 1em;
        margin-left: 1em;
 }
div.center, .center {
	text-align: center;
}
div.left, .left {
	text-align: left;
	margin-left: 0;
}

ul.tight { 
       list-style-type: disc;
       margin-bottom: 0.1em;
}
div.tight {
	margin-bottom: 0.5em;
}
div.index ul {
	list-style-type:circle;
}
div.bigmargins { 
                 margin-left: 10em;
                 width: 80%;
                 margin-right: 10em;
                 }
div.nomargins { 
                 margin-left: 0;
                 margin-right: 0;
                 }

.error {
	color: red;
}

/* wikitable */
table.wikitable{
  margin:1em 1em 1em 0;
  background:#f9f9f9;
  border:1px #aaa solid;
  border-collapse:collapse;
  color:black
}
.wikitable th,.wikitable td{
  border:1px #aaa solid;
  padding:0.2em
}
.wikitable th{
  background:#f2f2f2;
  text-align:center
}
.wikitable caption{
  font-weight:bold
}

/* Lazyload */
/* I've 'noscript' friendly lazyload images. You need to show() the lazyload images in js.inc */
.lazyload {
  display: none;
}

.bullet { 
        font-size:13pt; 
        font-style:bold; 
        text-align:center; 
        font-style:normal;
 }

hr.double { 
            border-style: double none none;
            border-width: 3px;
 }