@charset "utf-8";
/* CSS Document */

html,body { height: 100%; margin: 0px; padding: 0px; }

div#left
{
	position:fixed;
    top:0;
    left:0;
    width:220px;
    height:100%;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
}

img.logo{
	width:100%;
	height:auto;
	padding-bottom:10px;
}
div#SiteName{
	width:100%;
	padding-left:10px;
}
div#SiteName1{
	width:100%;

}
div#SiteName2{
	width:100%;
	padding-bottom:20px;
}
div#SiteName a{
	text-decoration: none;
}
div#footer{
	position: fixed;
    bottom: 0;
    width: 100%;	
	height:3em;
	z-index:100;
}
div#footer span img{
	height:2.5em;
	padding-top:0.2em;
}
div#footer span p{
	padding-left:3em;
	padding-right:3em;
}

div#footer span#copyright{width:40%; float:left; text-align:left; margin-top: 1em;}
div#footer span#social{width:20%; float:left; text-align:center}
div#footer span#contact{width:40%; float:right; text-align:right; margin-top: 1em}

div#content
{
	position:relative;
    top:0;
    left:0;
    margin-left:240px;	/* This must be equal to div#left width and padding*/
	min-height:100%;
	height:auto;
	
}

div#juicebox-container
{
}

div#backtoindex{
	position: absolute;
	top: 0;
	left:0;
	width:3%;
	min-width: 1.5em;
	height:auto;
	z-index: 1000;
	padding-top: 0.4%;
	padding-bottom: 0.4%;
	text-align: center;
}
div#backtoindex a{
	width:3%;
	height:auto;
}

body.recent div#backtoindex{
	display: none;
}

/* About */
body.about div#content{
	height:115%;
}
div#about {
	padding-top:5em;	
	margin-left:5%;
	}
div#about span#abouttext {
	float:left;
	width:50%;
	margin-right:5%;
	}
div#about span#abouttext p{	
	padding-bottom:1em;
}
div#about span#abouttext p.last{	
	padding-bottom:3em;
}
div#about span#aboutimage {
	float:left;
	width:40%;
	max-width:700px;
	}
div#about span#aboutimage img{
	width:100%;	
	}	

/*Books*/
div.book {
	padding-top:3em;	
	padding:3em ;
	margin-left:5%;
	}

div.book span#abouttext {
	
	width:55%;
	margin-right:0%;
	}
div.book span.bookimage {
	
	width:40%;
	max-width:700px;
	}

div.book span.bookimage img{
	width:40%;	
	}
div.book span#abouttext p{	
	padding-bottom:1em;
}
div.book span#abouttext p.last{	
	padding-bottom:3em;
}

/*Book*/
div#book {
	padding-top:5em;	
	margin-left:5%;
	}

div#book span#abouttext {
	float:left;
	width:55%;
	margin-right:0%;
	}
div#book span.bookimage {
	float:left;
	width:40%;
	max-width:700px;
	}
div#book span.bookimagewide {
	float:left;
	width:85%;
	max-width:1200px;
	padding: 5em;
	}
div#book span.bookimage img{
	width:100%;	
	}
div#book span.bookimagewide img{
	width:100%;	
	}	
div#book span#abouttext p{	
	padding-bottom:1em;
}
div#book span#abouttext p.last{	
	padding-bottom:3em;
}



/* Index Pages */
div#indextitle
{

	height:20px;
	padding-top: 0.3em !important;
	padding-bottom: 0.5em !important;
	margin-left: 2em ;
	margin-right: 2em ;
	text-align: center;
}

div#indexdescription{

	height:auto;
	margin-left: 20% ;
	margin-top: 1em ;
	margin-right: 20% ;
	margin-bottom: 1em ;
	text-align: left;
}

div#thumbs-container{
	min-height:20px;
	height:auto;
	margin:auto ;
	padding-bottom: 2em;  /*Match height of footer */
	max-width: 1600px;
}

img.indexthumb{
	width:18% ;
	max-width: 300px;
	cursor: pointer; 
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	height:auto;
	
}

/* Panoramas Index */
body.Panoramas div.thumb{
	width:31% !important;
	max-width: 450px !important;
	vertical-align: top !important;
	float: none !important;
}

body.Panoramas div.thumb img{
	max-width: 450px !important;
}

/* Top Page */
div#thumbs-container div.thumb {
	width:18% ;
	max-width: 320px;
	padding: 1%;
	height:auto;
	display: inline-block;
}
/*

div#thumbs-container div.thumb {
	width:18% ;
	max-width: 320px;
	padding: 1%;
	height:auto;
	display: inline-block;
	float:left;
}
*/
div#thumbs-container div.last {
	margin-bottom: 3em;
}

div#thumbs-container div.Panoramas {
	width:36% ;
	max-width: 600px;
	vertical-align: top;
}


div#thumbs-container div.thumb img.indexthumb
{
	width:100% ;
	max-width: 300px;
}

div#thumbs-container div.Panoramas  img.indexthumb{
	max-width: 600px ;
	
}

div#thumbs-container div.thumb a {
  color: #777777;
  display: block;
  text-decoration: none;
  width: 100%;
  text-transform: centre;
}

/* Exceptions */
div#thumbs-container.Index4PerRow div.thumb{
	width:20% ;
	max-width: 410px;
	padding: 1% 2%;	/* V H */
	height:auto;
	display: inline-block;

}

div#thumbs-container.Index4PerRow  div.thumb img.indexthumb{
	max-width: 604px;
}


div#thumbs-container.Index4PerRow div.Panoramas {
	width:44.5% ;
	max-width: 800px;
	vertical-align: top;
}

div#thumbs-container.Index4PerRow  div.Panoramas img.indexthumb{
	max-width: 740px;
	text-align: left;
	padding:0;
	margin:0;
}



 div#thumbs-container.Index3PerRow div.thumb{
	width:26% ;
	max-width: 540px;
	padding: 1% 2%;	/* V H */
	height:auto;
	display: inline-block;

}

div#thumbs-container.Index3PerRow  div.thumb img.indexthumb{
	max-width: 520px;
}

div#thumbs-container.Index2PerRow div.thumb{
	width:40% ;
	max-width: 780px;
	padding: 1% 2%;	/* V H */
	height:auto;
	display: inline-block;

}

div#thumbs-container.Index2PerRow div.thumb img.indexthumb{
	max-width: 780px;
}
