/*#############################################################
Name: The Hobbit
Date: 2006-10-11
Description: Submission for OWD template contest "Favourite Book".
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* standard elements */
*
{
  margin: 0;
  padding: 0;
}

a
{
  color: #36C;
}

a:hover
{
  color: #06F;
}

body
{
  background: #4E5D3C url(img/bg.jpg);
  color: #444;
  font: normal 62.5% "Lucida Sans Unicode" ,sans-serif;
  margin: 0;
}

p, blockquote, ul
{
  margin-bottom: 1.2em;
}

h1
{
  font: normal 1.6em serif;
}
h5
{
  font: normal 1.6em serif;
}

h2
{
  font: bold 1em Verdana,serif;
  margin: 3px 0 1px;
}

ul
{
  margin-left: 1.8em;
}

blockquote
{
  background: url(img/quote.gif) no-repeat;
  color: #555;
  font: normal 1.4em serif;
  padding-left: 22px;
}

blockquote p
{
  padding: 6px;
}

/* misc */
.clearer
{
  clear: both;
}

.left
{
  float: left;
}

.right
{
  float: right;
}

img.left
{
  margin: 0 18px 6px 0;
}

.divider
{
  background: url(img/divider.gif) no-repeat;
  height: 20px;
  margin: 24px 0;
}

/* structure */
.container
{
  background: url(img/bgcontainer.jpg) repeat-y center top;
  margin: 0 auto;
  width: 736px;
}

.gfx
{
  background: url(img/ggfx.jpg) no-repeat;
  float: left;
  margin-top: 12px;
  width: 52px;
  height: 140px;
}

.top
{
  background: url(img/bgcontent.gif) no-repeat 0 -4%;
  float: left;
  text-align: center;
  width: 632px;
}

.header
{
  background: #56644A url(img/3civetteheader.jpg) no-repeat;
  color: #FFC;
  font-size: 1.4em;
  height: 232px;
  padding-right: 270px;
}

.header h1
{
  font: normal 3.2em serif,sans-serif;
  padding: 62px 0 34px 0;
}

.pattern
{
  background: #334127 url(img/pattern.gif) repeat-x;
  clear: both;
  height: 12px;
}


/* content */
.content
{
  background: url(img/bgcontent.gif) no-repeat;
  clear: both;
  font-size: 1.2em;
  margin: 0 52px;
  padding: 0 38px 12px;
}
.content .spacer
{
  height: 42px;
}

/* content item */
.item
{
  clear: both;
}

.item img, .PlacesPhoto
{
  border: 1px solid #4c593f;
  height: 100px;
}



.item .title
{
  color: #445044;
  font: normal 2em serif;
}

/*.item .title:first-letter {
	display: block;
	float: left;
	font-size: 2.4em;
}*/

.item .metadata
{
  color: #666;
  font-size: 0.9em;
  float: left;
  padding: 0 0 6px 4px;
}

.item .body
{
  /*clear: both;*/
}
.bottom
{
  color: #666;
  font-size: 1.1em;
  line-height: 41px;
  margin: 0 auto;
  text-align: center;
  width: 632px;
}

/* footer */
.footer
{
  /*background: url(img/bgfooter.gif) no-repeat;*/
  color: #666;
  font-size: 1.1em;
  line-height: 41px;
  margin: 0 auto;
  text-align: center;
  width: 632px;
}

.footer a
{
  color: #666;
  text-decoration: none;
}

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

/* navigation */
.navigation
{
  margin: 0 5px;
  font-size: 16px;
  font-family: Verdana;
}

.navigation a
{
  color: #6C7151;
  font-size: 16px;
  font-family: Verdana;
  line-height: 50px;
  margin: 0 5px;
  text-decoration: none;
}
.navigation a:hover, .navigation #selected
{
  font-weight:bold;
  /*background-color:#4c593f;*/
}


/* Accordion */
.accordionHeader
{
  border: 1px solid #2F4F4F;
  color: white;
  background-color: #4c593f;
  font-family: Arial, Sans-Serif;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  margin-top: 5px;
  cursor: pointer;
}

#master_content .accordionHeader a
{
  color: #FFFFFF;
  background: none;
  text-decoration: none;
}

#master_content .accordionHeader a:hover
{
  background: none;
  text-decoration: underline;
}

.accordionHeaderSelected
{
  border: 1px solid #2F4F4F;
  color: white;
  background-color: #56624a;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
  margin-top: 5px;
  cursor: pointer;
}

#master_content .accordionHeaderSelected a
{
  color: #FFFFFF;
  background: none;
  text-decoration: none;
}

#master_content .accordionHeaderSelected a:hover
{
  background: none;
  text-decoration: underline;
}

.accordionContent
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #a6b687;
  border: 1px dashed #2F4F4F;
  border-top: none;
  padding: 5px;
  padding-top: 10px;
}



/* lightbox */

#lightbox
{
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}
#lightbox img
{
  width: auto;
  height: auto;
}
#lightbox a img
{
  border: none;
}

#outerImageContainer
{
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
#imageContainer
{
  padding: 10px;
}

#loading
{
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
#hoverNav
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer > #hoverNav
{
  left: 0;
}
#hoverNav a
{
  outline: none;
}

#prevLink, #nextLink
{
  width: 49%;
  height: 100%;
  background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
  display: block;
}
#prevLink
{
  left: 0;
  float: left;
}
#nextLink
{
  right: 0;
  float: right;
}
#prevLink:hover, #prevLink:visited:hover
{
  background: url(img/prev.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover
{
  background: url(img/next.gif) right 15% no-repeat;
}

#imageDataContainer
{
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  overflow: auto;
  width: 100%;
}

#imageData
{
  padding: 0 10px;
  color: #666;
}
#imageData #imageDetails
{
  width: 70%;
  float: left;
  text-align: left;
}
#imageData #caption
{
  font-weight: bold;
}
#imageData #numberDisplay
{
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}
#imageData #bottomNavClose
{
  width: 66px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}

#overlay
{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
}