@charset "iso-8859-1";
/**************** BASICS **************************/
a img {
	border: none;
}
.clear
{ clear: both;
	padding-bottom: 1px;	/* for Gecko-based browsers */
	margin-bottom: -1px;	/* for Gecko-based browsers */
}
.hide
{
	display: none !important;
}
.inside
{	padding: 0 1em; }
ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
	margin-top: 14px;
	margin-bottom: 14px;
	padding-top: 0;
	padding-bottom: 0;
}
h1 { 	font-size: 220%; }
h2 {	 font-size: 190%; }
h3 {	font-size: 100%; }
h4 {	font-size: 130%; }
h5 {	font-size: 100%; }
h6 {	font-size: 70%; }


a, a:link, a:visited, a:active
{
	text-decoration: none;
}
a:hover
{
	text-decoration: none;
}
code
{
	font-family: "Courier New", Courier, monospace;
}
label
{
	cursor: pointer;
}
table
{
	font-size: 100%;
}
td, th
{
	vertical-align: top;
}

/**************  overall body style *****************/
body
{
	margin: 15px 2%;
	font-size: 100.1%;	
}
html.is1024 body, html.is1024 {
	margin: 0;
}
html.is1024 body {
	font-size: 91%;
}
html.is800 body {
	font-size : 75%;
}
#pageWrapper
{
	border: solid 1px #ddd;
	border-width: 0 1px;
	min-width: 40em;	
	width: auto;
}
* html #pageWrapper
{
	/* \*/
		word-wrap: break-word;
	/* invalid CSS but keeps IE from breaking horribly under narrow viewports */
}
p.fontsize-set
{
	text-align: center;
}
p.fontsize-set img
{
	border-width: 0;
}
/************* HEADER ***********************/
#masthead
{
	height: 60px;
	border: solid 1px #fff;
	border-width: 1px 0;
	padding: 0.5em;
	background-image : url(../images/logo.jpg);
	background-position : 20px 15px;
	background-repeat : no-repeat;
}
#masthead img
{
	padding: 5px 0 0 10px;
	margin: 0;
}
html.is1024 #masthead img {
	padding: 0 0 0 10px;
}
html.is800 #masthead {
	height: 30px;
	background-image : url(../images/logo_800.jpg);
		background-position : 10px 10px;
}
/************ HOLDERS FOR COLUMNS ****************/
#outerColumnContainer
{
	/* reserves space for the left and right columns. you can use either
	 * padding, margins, or borders, depending on your needs. however you
	 * can use the border method to create a background color for both left
	 * and right columns
	 */
	border-left: solid 14em #fff;
	border-right: solid 15em #fff;


}
html.is1024 #outerColumnContainer{
	border-left: solid 8em #333;
	border-right: solid 8em #333;
}
* html.is1024 #outerColumnContainer{
	border-left: solid 5em #333;
	border-right: solid 5em #333;
}
html.is800 #outerColumnContainer {
	border: none;
}
html.is800 body {
	margin: 0;
}
html.is800 #rightColumn, html.is800 #leftColumn {
	display: none;
}
#innerColumnContainer 
{
	border: none 1px #fff;
	border-width: 0 0px;
	margin: 0 0px;		/* compensate for the borders because of
				   100% width declaration */
	width: 100%;
	z-index: 1;

}
html.is1024 #index #innerColumnContainer {
	width: 90%;
}

#leftColumn, #middleColumn, #rightColumn, * html #SOWrap
{
	overflow: visible;	/* fix for IE italics bug */
	position: relative;	/* fix some rendering issues */
}
#SOWrap
{
	float: left;
	margin: 0 -1px 0 0;
	width: 100%;
	z-index: 3;
	max-height : 44em;

}

/************ ALL COLUMN HEIGHTS ************/
#middleColumn {
	height: 44em;
}
* html #middleColumn {
height: 46em;
}
html.is1024 #middleColumn {
	max-height: 35em;
	height: auto;
	overflow: hidden;
}
* html.is1024 #middleColumn {
height: 35em;
}
html.is800 #middleColumn {
	height: 200px;
}

#leftColumn {
	min-height : 46em;
	height: auto;
}
* html #leftColumn {
height: 46em;
}
html.is1024 #leftColumn {
	max-height: 35em;
	height: auto;
	overflow: hidden;
}
* html.is1024 #leftColumn {
height: 35em;
}

html.is1024 #index #leftColumn {
	max-height :35em;
	width: 5em;
	margin: 0 1px 0 -5em;
}



#rightColumn {
	min-height: 46em;
	max-height : 46em;
	height: auto; 

}
* html #rightColumn{
height: 46em;
}
html.is1024 #rightColumn {
	max-height: 35em;
	height: auto;
	overflow: hidden;

}
* html.is1024 #rightColumn {
height: 35em;
}
html.is1024 #index #rightColumn {
	min-height : 35em;
	width: 15em;
	margin: 0 -15em 0 1px;
}


/**** PAGE SPECIFIC OVERRIDES ****************/

#gall_index #SOWrap, #gall_index #middleColumn, #gall_index #leftColumn, #gall_index #rightColumn {
	min-height : 48em;
}
#galleries #SOWrap, #galleries #middleColumn, #galleries #leftColumn, #galleries #rightColumn {
	min-height : 48em;
}
html.is1024 #galleries #SOWrap, html.is1024 #galleries #middleColumn, html.is1024 #galleries #leftColumn, html.is1024 #galleries #rightColumn {
	min-height : 39em;
	height: 39em;
}
html.is1024 #gall_index #SOWrap, html.is1024 #gall_index #middleColumn, html.is1024 #gall_index #leftColumn, html.is1024 #gall_index #rightColumn {
	min-height : 39em;
	height: 39em;
}
html.is1024 #links #SOWrap, html.is1024 #links #middleColumn, html.is1024 #links #leftColumn, html.is1024 #links #rightColumn{
	height : 40em;
	min-height: 40em;
}
html.is800 #SOWrap, html.is800 #middleColumn, html.is800 #leftColumn, html.is800 #rightColumn{
	height : 26em;
	min-height: 0;
}

html.is800 #galleries #SOWrap, html.is800 #galleries #middleColumn, html.is800 #galleries #leftColumn, html.is800 #galleries #rightColumn{
	height : 36em;
	min-height: 0;
}
html.is800 #gall_index #SOWrap, html.is800 #gall_index #middleColumn, html.is800 #gall_index #leftColumn, html.is800 #gall_index #rightColumn{
	height : 36em;
	min-height: 0;
}
html.is800 #index #SOWrap, html.is800 #index #middleColumn, html.is800 #index #leftColumn, html.is800 #index #rightColumn{
	height : 38em;
	min-height: 0;
}
html.is800 #links #SOWrap, html.is800 #links #middleColumn, html.is800 #links #leftColumn, html.is800 #links #rightColumn{
	height : 38em;
	min-height: 0;
}
/********** MIDDLE COLUMNS *******************/
#middleColumn
{
	float: right;
	margin: 0 0 0 -1px;
	width: 100%;
	z-index: 5;
	color: #eee;
	overflow : hidden;
	text-align : center;
}

/************* LEFT COLUMNS *********************/
#leftColumn
{
	float: left;
	margin: 0 1px 0 -14em;
	width: 14em;
	z-index: 4;
	background-image : url(../images/left_edge.gif);
	background-position : right;
	background-repeat : repeat-y;

}


/*********** RIGHT COLUMNS ************************/
#rightColumn
{
	float: right;
	width: 15em;
	margin: 0 -15em 0 1px;
	z-index: 2;
	background-image : url(../images/right_edge.gif);
	background-position : left;
	background-repeat : repeat-y;
	overflow: hidden;
}
html.is1024 #rightColumn {
	width: 8em;
	margin: 0 -8em 0 1px;
}
#rightColumn p {
	color: #fff;
	padding: 0 0 0px 5px;
}
#rightColumn h4 {
	color: #FDF5E6;
	padding: 0 0 0px 5px;
}

/************* FOOTERS **********************/
#footer
{
	border: solid 1px #fff;
	border-width: 1px 0;
	padding: 1.5em 0 0 0;
	height: 130px;
}
html.is1024 #footer {
	height: 100px;
}
html.is1024 #links #footer{
	height: 80px;
}
html.is1024 #galleries #footer, html.is1024 #gall_index #footer{
	height : 50px;
}
#galleries #footer, #gall_index #footer {
	height: 100px;
}
html.is800  #footer {
	height: 100px;
}
html.is800 #galleries #footer, html.is800 #gall_index #footer {
	height: 20px;
}

/************* NAVIGATION BAR ***************/
.hnav
{
	border-bottom: solid 1px #fff;
	text-align: left;
	padding-left: 5em;
	letter-spacing : 0.5em;
}
.hnav, .hnav ul li a
{
	padding-top: 3px;
	padding-bottom: 4px;
}
.hnav ul, .hnav ul li
{
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.hnav ul li a
{
	margin: 0 -1px 0 0;
	padding-left: 10px;
	padding-right: 10px;	
	border-left: solid 1px #000;
	border-right: solid 1px #000;
	white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
	text-decoration: none;
}
.hnav ul li span.divider
{
	display: none;
}
* html .hnav ul li, * html .hnav ul li a
{
	width: 1%; /* IE/Mac needs this */
	display: inline-block;	/* IE/Mac needs this */
	/* \*/
		width: auto;
		display: inline;
	/* reset above hack */
}
* html .hnav, * html .hnav ul a
{
	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
}
* html .HNAV
{
	padding: 0;	
}

/******* COLOURS, BACKGROUNDS, FONTS ETC. **************/

#pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a
{
	border-color: #ddd;
}
html, body
{
	background-color: #ddd;
	color: #000;
	font-family: arial, helvetica, sans-serif;
	background-image : url(../images/bg_2.gif);

}
#pageWrapper
{
	font-size: 80%;	/* set your default font size here. */
}
#masthead
{
	background-color: #393D46;
	color: #fff;
}
.hnav
{
	background-color: #000;
	color: #fff;
}
#outerColumnContainer
{
	border-left-color: #333;	/* left column background color */
	border-right-color: #333;	/* right column background color */
	background-color: #333;		/* set the background color for the
					   middle column here */
}
.hnav ul li a:link, .hnav ul li a:visited
{
	background-color: #000;
	color: #fff;
}
.hnav ul li a:hover
{
	background-color: #ccc;
	color: #000;
}
#rightColumn .inside
{
	/* if you apply a font size to just #rightColumn, then its width,
	 * which is specified in EMs, will also be affected. you don't want
	 * that. so apply font size changes to the .inside element which exists
	 * inside underneath all three columns
	 */
	font-size: 90%;
}
#rightColumn .inside .vnav
{
	font-size: 110%;
}
#footer
{
	background-color: #333;
	color: #fff;
	text-align: center;
}
#footstrip {
	width: 600px;
	background-color : Aqua;
	margin: auto;
}
/************  ANCHOR FOR SETTING HEIGHTS ***************/

#screenbottom { position:absolute; display:block; visibility:hidden; height:1px; width:1px; bottom:0px; right:0px; overflow:hidden; }

/************************** galleries ***************************************************/

#gallery1, #gallery2, #gallery3, #gallery4, #gallery8, #gallery5, #gallery6, #gallery7 {
	float: left;
	text-align: center;
	width: 50%;
	}
#gallery3, #gallery4, #gallery8, #gallery5, #gallery5, #gallery6, #gallery7 {
	margin-top: 20px;
	width: 50%;
	position: relative;
}

* html #gallery1, * html #gallery2, * html #gallery3, * html #gallery4, * html #gallery8, * html #gallery5, * html #gallery6, * html #gallery7   {
	width: 49%;
}
html.is800 #gallery1 {
	width: 49%;
}
/* #gallery5 {
	position: relative;
	margin-top: 20px;
	clear : left;
	float: left;
	width: 33%;
	text-align: center;
} -->
#gallery6 {
	position: relative;
	margin-top: 20px;
	clear: none;
	float: left;
	text-align: center;
	width: 33%;
}
#gallery7 {
	position : relative;
	margin-top: 20px;
	float: left;
 	clear: none;
	text-align: center;
	width: 33%;
}*/
#gallery1 img, #gallery2 img, #gallery3 img, #gallery4 img, #gallery5 img, #gallery6 img, #gallery7 img, #gallery8 img {
	padding: 3px;

	}
html.is800 #gallery1 img, html.is800 #gallery2 img, html.is800 #gallery3 img, html.is800 #gallery4 img, html.is800 #gallery5 img, html.is800 #gallery6 img, html.is800 #gallery7 img,  html.is800 #gallery8 img  {
	padding: 1px;
}
#galleries a, #gall_index a, #gallery a{
	color: white;
	text-decoration: none;
}
#galleries a:hover, #gall_index a:hover, #gallery a:hover {
	color: #000;
}
#galleries h2 a:hover, #gall_index h2 a:hover, #gallery h2 a:hover {
	color: #9F9F9F;
}

#gall_index #gallery1,#gall_index #gallery2,#gall_index #gallery3, #gall_index #gallery4 {
	width: 49%;
}

#gall_index #scroll {
	visibility : visible;
}
#galleries img, #gall_index img {
	}
/************ individual galleries ***************/

#breadcrumb, #breadcrumb a{
	font-size: 110%;
	color: #B0B0B0;
	text-align : left;
	padding-top: 5px;
	width: 300px;
	float: none;
}
#breadcrumb {
	margin-bottom : -5px;
	height : 15px;
}
#breadcrumb a:hover {
	color: #fff;
}

#options {
	text-align : right;
}
#galltitle {
	font-size: 190%;
	clear: left;
	padding: 0 0 10px 0;

}
#gallery p {
	padding: 0 30px 0 30px;
}
#gallery #middleColumn img {
	width: 60%;
	height: 60%;
	border: none;
}
html.is1024 #gallery #middleColumn img {
	width: 45%;
	height:45%;
}
* html.is1024 #gallery #middleColumn img {
	width: 40%;
	height: 65%;
}
html.is1024 #SOWrap, html.is1024 #leftColumn, html.is1024 #rightColumn {
	min-height : 35em;
}
html.is1024 #galltitle {
	padding: 0 0 0 0;
}
html.is1024 #gallery p {
	margin: 5px 0 15px 0;
}
#gall_pic {
	width: 100px;
	height: 100px;
}
/***************************************************/

#index #footer img {
	-moz-opacity: 0.6;
	filter:alpha(opacity=60);
	padding: 0 2px 0 2px;
} 
#index h5 {
	color: yellow;
	font-size: 100%;
	padding: 0 0 0 5px;
}
#index h1 {
	color: #DCDCDC;
	font-size: 180%;
	font-family: Century Schoolbook;
	text-align : center;
}
#index #innerColumnContainer, #index #middleColumn  {
	background-color : #262626;
}
#howTo {
	background-color : #333;
	font-weight: normal;
	font-size: 60%;
	position: relative;
	top: -4.5em;
	margin: -2px auto -3.5em auto;

	width: 300px;
	border: 1px solid #ddd;
	border-bottom: none;
	height: 2em;
	overflow: hidden;
	z-index: 15;
	-moz-opacity: 0.8;

}
#howTo:hover {
		top: -30em;
		margin: -6px auto -29em auto;
		height : 28em;
		border-bottom: 0px solid #ddd;
		-moz-opacity: 0.9;
}
#howTo h4 {	
padding: 1px 0 1px 0;
	margin: 0;
	letter-spacing: 1px;
	color: #ddd;
}
#howTo p {
	font-size: 140%;
	margin: 10px 0 0px 0;
	padding: 0 3px 0 3px;
}
html.is1024 #titlepic {
	width: 293px;
	height: 229px;
}
html.is800 #titlepic {
	width: 241px;
	height: 191px;

}
html.is800 #index #footer, html.is800 #links #footer {
	display: none;
}
html.is800 #gallery #middleColumn img {
	display: none;
}
html.is800 #gallery #middleColumn p {
	padding: 0 100px 0 100px;
	font-size: 130%;
	line-height : 130%;
	}
html.is800 #howTo {
	font-size: 90%;
	}
html.is800 #index #middleColumn {
	font-size: 140%;
}

iframe, object {
	width: 100%;
	height: 100%;
	border:none;
	margin : 0;
	padding : 0;
	overflow : hidden;
}
#comments #middleColumn div {
	position : relative; width: 100%; height :98%; top: 5px; left: 0px; overflow : auto;
}