* {
  font-family: arial,sans-serif;
}

html
{ margin: 0;
  padding: 0;
  border: none;
}

body
{ margin: 0;
  padding: 0;
   background: url("../img/AlhambraArch-vertical.png");
   background-repeat: repeat-y;
   background-color: #fff9f8;
}

#Decor
{ position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
   background-image: url("../img/AlhambraArch-horizontal.png");
   background-repeat: repeat-x;
   z-index: -1;
   margin: 0;
   padding: 0; width: 100%;
   overflow: hidden;
}

#Decor img
{ left: 0;
  top: 0;
  margin: 0;
  margin-top: 92px;
  padding: 0;
  border: none;
}

#Decor1
 { width: 142px; /* clear of the left decoration */
   height: 12px;
   float: left;
   clear: left;
   border: none;
   padding: 0;
   margin: 0;
 }

#Navigation {
  margin: 0;
  padding: 1em;
  text-align: right;
  min-height: 140px;
}

#Navigation h1 {
  text-align: left;
  float: left;
  padding: 0;
  margin: 0;
}

#Navigation ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

li.hassubmenu
{ position: relative;
  color: #7c2001;
}

li.hassubmenu a
{ cursor: pointer;
  display: block; 
}

li.hassubmenu>ul
{ display: none;
  position: absolute; top: 1em; right: 0;
  padding: 0;
}

li.hassubmenu:hover>ul
{ display: inline-block;
  background-color: #fff9f8;
  border: thin solid #7c2001;
  text-align: left;
}

#Navigation ul>li:hover>ul>li {
  list-style: none;
  display: list-item;
  border-top: thin solid #7c2001;
  padding: 0.1em 0.5em;
}

#Navigation li.Current {
  color: #bc6041;
  font-family: Times New Roman, serif;
}

#Navigation li {
  display: inline;
/* don't want to split the items */
  white-space: nowrap;
/*  width: 15em;*/
}

#Navigation li img
{ border: none;
  height: 1em;
  padding-right: 0.1em;
  vertical-align: text-top;
}

a, a:visited {
  color: #7c2001;
}

#Navigation a
{ text-decoration: none;
}

#Producer
{ font-size: xx-small;
  color: #cccccc;
  margin-left: 142px;
  background-color: #fff9f8;
}

a:hover, a:hover * {
  background-color: #7c2001;
  color: white;
}

a:hover span.Author, a:hover .BookTitle {
  color: #fff9f8;
  background-color: #7c2001;

}

a *
{
  text-decoration: underline;
}

a.External
{ /* may want to put some sort of indication of externality of link */
/* border-bottom: 1px solid #7c2001;*/
}

a.External:after
{content: url("../img/external.png");
 padding-left: 0.1em;
}

.FrontPagePics img {
  width: 200px;
}

div.Picture
{ padding-bottom: 2em;
}

.Picture img#Featured, .Picture img.Featured
{
  display: block;
  margin: auto;
/* the following won't work in IE6, but I think it's nice for the others
*/
  max-width: 100%;
  max-height: 100%;
  /* width: 100%; for firefox's benefit? */
}

div.inset
{ padding-bottom: 0;
  margin-right: 0.5em;
  margin-bottom: 0.2em;
  float: left;
}

div.PictureNav
{ position: relative; /* make containing block for floating previous link */
  text-align: right;
}
.PictureNav a.previous, .PictureNav span.previous
{ float: left
}

.PictureNav span.previous, .PictureNav span.next
{ color: #eabaaf;
  /* not a link -- colour from darker parts of background image
     darkened and saturated a little
  */
}

.PictureNav span.divider
{ display: none; /* it'll be there if css is off */
}

h1, h2, h3, h4, h5, h6, h1 *, h2 * {
  font-family: Times New Roman, serif;
  color: #7c2001;
}

.Wrapped h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 300%;
  padding-top: 0;
  margin-top:0;
}

.Wrapped {
  display: table;
  clear: right;
  text-align: justify;
  margin: auto;
  margin-top: 0;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 1em;
  z-index: 2; position: relative;
}

.Wrapped > p
{ max-width: 36em;
}

span.inactive
 { color: #d49c88;
 }

span.Name {
  font-style: italic;
  font-size: 1.2em;
}

span.MinorName {
  font-size: 100%;
}


.BookTitle {
  font-style: italic;
  color: #7c2001;
  background-color: #fff9f8;
}

span.Author {
  color: #7c2001;
  background-color: #fff9f8;
}

.callout, .ContactDetails {
  border: solid #7c2001 1px;
  padding: 1em;
  padding-left: 2em;
  padding-right: 2em;
  max-width: 32em;
  color: #7c2001;
  background-color: #f9f4f2;
  overflow-x: hidden;
  margin: 0;
  margin-bottom: 0.5em;
}

.callout
{ color: black;
}

/* make paragraphs within image captions more compact */
div.caption p, div.attribution p
{ margin-top: 0;
  margin-bottom: 0.2em;
}

/* allow a little space between the bottom of the image and the caption */
div.caption, div.attribution
{ padding-top: 0.3em;
}

div.attribution
{ font-size: xx-small;
  text-align: right;
}

div.inset .attribution
{ text-align: left;
  padding-left: 1em;
}

/* for lists of events */
ul.EventList
{ padding-left: 0;
  list-style-type: none;
}

ul.EventList h3
{ color: #7c2001;
}

iframe.amazon
{ float: right;
  clear: right;
  margin-left: 8px;
  border: none;
  padding-bottom: 1em;
}

/* sort out line-height for superscripts
   <http://www.cs.tut.fi/~jkorpela/www/linespacing.html>
*/
sup, sub
{ vertical-align: 0;
  position: relative;
  font-size: 0.6em;
}
sup { bottom: 1ex; }
sub { top: 0.8ex; }