/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* -------------------------------- S T A R T --------------------------------- */

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
audio,canvas,video{display:inline;zoom:1;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-size:120%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html,button,input,select,textarea{font-family:sans-serif;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:.67em 0;}
h2{font-size:1.5em;margin:.83em 0;}
h3{font-size:1.17em;margin:1em 0;}
h4{font-size:1em;margin:1.33em 0;}
h5{font-size:.83em;margin:1.67em 0;}
h6{font-size:.75em;margin:2.33em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:700;}
blockquote{margin:1em 40px;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}
pre{white-space:pre-wrap;word-wrap:break-word;}
q{quotes:none;}
q:before,q:after{content:none;}
small{font-size:75%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}sub{bottom:-.25em;}dd{margin:0 0 0 40px;}menu,ol,ul{padding:0 0 0 40px;}
nav ul,nav ol{list-style:none;list-style-image:none;}
img{border:0;-ms-interpolation-mode:bicubic;}
svg:not(:root){overflow:hidden;}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}
legend{border:0;white-space:normal;margin-left:-7px;padding:0;}
button,input,select,textarea{font-size:100%;vertical-align:middle;margin:0;}
button,input{line-height:normal;}
button,html input[type=button],/* 1 */input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;overflow:visible;}
button[disabled],input[disabled]{cursor:default;}
input[type=checkbox],input[type=radio]{box-sizing:border-box;height:13px;width:13px;padding:0;}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body,figure,form{margin:0;}
p,pre,dl,menu,ol,ul{margin:1em 0;}

/* ---------------------------------- E N D ----------------------------------- */
/*
################################################################################################

	             =============================================
	             = Cascading style sheet for a "trip report" =
	             =============================================

	Layout
	++++++

	+----------------------------------------------------------------------+
	|                                BANNER                                |
	+-----+----------------------------------------------------------------+
	| Nav |                             TITLE                              |
	+-----+----------------------------------------------------------------+
	|                             FONT OPTIONS                             |
	+----------------------------------------------------------+-----------+
	|                                                          |           |
	|                          REPORT                          |   PHOTOS  |
	|                                                          |           |
	+----------------------------------------------------------+-----------+
	|                                FOOTER                                |
	+----------------------------------------------------------------------+

	Implementation
	++++++++++++++

	The REPORT and PHOTOS DIVs are held in a CONTAINER DIV and right borders, padding
	and negative margins are used with "float" to create an elastic 2-column layout.
		 
	The photo images are styled as an "unordered list".
	
	The "FONT OPTIONS" are produced using a clever bit of Javascript to embed generated HTML
	into the document as it is loaded, then to enable to user to choose the color and size
	of the font for the "REPORT" section. It is done this way to save having to put this
	sizeable chunk of HTML separately into each report file, thus making it easy to alter
	in the future (i.e. there is only 1 place to that would need to be edited - the
	javascript source file).

	The "FOOTER" is produced using the same "embedHtml" javascript function, since it is the
	same HTML code for each report.

################################################################################################
*/

/*
	***********
	* General *
	***********
*/
/*
	+-------------------------------------------------------------------------+
	| a - the "anchor" style.                                                 |
	|     Make the font bolder, append an icon for well-known document types, | 
	|     and on "hover" yellowish text on a dark blue background.            |
	+-------------------------------------------------------------------------+
*/
a{
	font-weight: bolder;
	text-decoration: none;
}
a:hover{
	background-color: #00A;
	color: #FC6;
}
a[href$='.doc']:hover, a[href$='.rtf']:hover, a[href$='.docx']:hover, a[href$='.txt']:hover, a[href$='.xls']:hover, a[href$='.pdf'   ]:hover,
a[href$='.zip']:hover, a[href$='.rar']:hover, a[href$='.gzip']:hover, a[href$='.tar']:hover, a[href$='.ace']:hover, a[href$='.css'   ]:hover, 
a[href$='.mov']:hover, a[href$='.wmv']:hover, a[href$='.mp4' ]:hover, a[href$='.avi']:hover, a[href$='.mpg']:hover, a[href$='.jpg'   ]:hover, 
a[href$='.gif']:hover, a[href$='.png']:hover, a[href$='.bmp' ]:hover, a[href$='.svg']:hover, a[href$='.eps']:hover, a[href$='.jpeg'  ]:hover,
a[href$='.mp3']:hover, a[href$='.wav']:hover, a[href$='.ogg' ]:hover, a[href$='.wma']:hover, a[href$='.m4a']:hover, a[href^='mailto:']:hover,
a[href^='http']:hover, a[href$='.js' ]:hover{
	background-color: #00A;
	color: #FC6;
}
a[href^='http'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_web.gif) no-repeat center right;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.docx'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_doc.gif) no-repeat center right;
}
a[href$='.txt'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_txt.gif) no-repeat center right;
}
a[href$='.xls'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_xls.gif) no-repeat center right;
}
a[href$='.pdf'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_pdf.gif) no-repeat center right;
}
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_archive.gif) no-repeat center right;
}
a[href$='.css'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_css.gif) no-repeat center right;
}
a[href$='.js'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_js.gif) no-repeat center right;
}
a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_pic.gif) no-repeat center right;
}
a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_film.gif) no-repeat center right;
}
a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_music.gif) no-repeat center right;
}
a[href^='mailto:'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_mailto.gif) no-repeat center right;
}
a[rel^='lightbox'] {
	padding: 5px 0px 5px 0;
}


/*
	+----------------------------------+
	| img - the "image" style.         |                                                            .
	|     Centre the image vertically. |
	+----------------------------------+
*/
img{
	vertical-align: middle;
	margin: 0 auto;
	border: 2px inset #CCF;
}

/*
	+-------------------------------------------------+
	| tables                                          |
	|        Reverse-colour the table header.         |
	|        Alternate background colour of the rows. |
	+-------------------------------------------------+
*/
th{
	background-color:#000;
	color: #FF0;
}
table .e td{
	background-color:#CCC;
}
table .o td{
	background-color:#DDD;
}

ul.pros {
	list-style-type:square;
}
ul.cons {
	list-style-type:circle;
}
/*
  +--------------------------------------------------------------------+
  | reports (& rep)                                                    |
  |                 Divs on the "home" page for navigating the reports |
  +--------------------------------------------------------------------+
*/

#reports{
	text-align: center;
}

.elbody{
		width:			    100%;
		height:             auto;
		margin:             0 auto;
		padding:		    75px 0 0 0;
		background:         #333333 url(../images/elusien_720x75.png) no-repeat center top;
		text-align:         center;
		font-size:			0.8em;
}

.elbody>div{
		text-align:			left;
		color:				#111111;
		background:			#eee;
		border:				outset #ffffff 3px;
		border-radius:		8px;
		padding:			16px 16px;
		margin:				8px;
}

.clear 
{ 
		  zoom: 1; 			/* For old IE browsers */
}

.clear:after 
{ 
		  content:          '.'; 
		  display:          block; 
		  clear:            both; 
		  visibility:       hidden; 
		  line-height:      0; 
		  height:           0; 
} 
 
li.holder{
		  display:          inline-block;
		  width:            200px;
		  height:           200px;
		  border:           outset #ffffff 3px;
		  border-radius:	8px;
		  padding:          16px 16px;
		  margin:           1px 0;
		  background-color: #707070;
}
li .topic{
		  width:            196px;
		  height:           196px;
		  border:           inset #ffffff 3px;
		  line-height:      175px;
		  line-height:      350px;
}
li .topic>a{
		  color:            #0000ff;
		  background-color:  rgb(200,200,200);      /* For IE8 and lower */
		  background-color: rgba(200,200,200,0.8);
		  font-family:      'Audiowide', 'trebuchet ms', arial, helvetica, verdana, sans-serif;
		  font-weight:      200;
		  font-size:        16px;
		  line-height:      16px;
		  padding:          2px 6px;
		  border:           outset #ffffff 1px;
		  border-radius:    8px 0;
}
li .topic>a:hover{
		  border-radius:    0 8px;
		  background-color: #00A;
		  color: #FC6;
}
li .topic i{
		  vertical-align:   inherit;	/* Fix - for Google Chrome */
}
li #trips{
		  background-image: url(../images/trips.png);
}
li #programming{
		  background-image: url(../images/programming.png);
}
li #tv{
		  background-image: url(../images/tv.png);
}
li #ipad{
		  background-image: url(../images/ipad.png);
}
li #kindle{
		  background-image: url(../images/kindle.png);
}
li #family{
		  background-image: url(../images/family.png);
}
li #macmillan{
		  background-image: url(../images/macmillan.png);
}

.rep{
	float: left;
	text-align: center;
	height: 183px;          /*183*/
	width:  380px;          /*380*/
	margin: 0;
	padding: 0;
	border: outset 2px #FFF;
	background-color: #003;
}
.rep a , .rep a:link , .rep a:visited{
	display: inline;
	float: left;
	height: 123px;          /*123*/
	width: 320px;          /*320*/
	line-height: 123px;      /*123*/
	margin: 30px 30px;      /* 30 30 */
	padding: 0;
	border: inset 2px #FFF;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.rep a img{
	float: left;
	position: absolute;
	top: -30px;         /*-30*/
	left: 0;
	margin: 0;
	padding: 0;
}
.rep a .trip{
	float: left;
	position: absolute;
	top: 38px;          /*38*/
	left: 35px;         /*35*/
	border: 0;
	z-index: 10;
	HTMLOpacity: 0.50;
	 MozOpacity: 0.50;
	  opacity: 0.50;
	   filter: alpha(opacity=50);
}
.rep a:focus, .rep a:hover{
	overflow: visible;
	z-index:100;
}
.rep a:hover img{
	left: -30px;        /*-30*/
}
.rep a:hover .trip{
	top: 72px;
	left: 175px;        /*175*/
}
/*------------------------------------------------------------------------------------
  IE 6 treats the next 2 stanzas as if the HOVER and VISITED were separate, not joined.
   
  ------------------------------------------------------------------------------------*/
.rep a:hover:visited img{
	left: -30px;        /*-30*/
	HTMLOpacity: 0.60;
	 MozOpacity: 0.60;
	    opacity: 0.60;
	     filter: alpha(opacity=60);
}
.rep a:hover:visited .trip{
	left: 175px;        /*175*/
	HTMLOpacity: 0.60;
	 MozOpacity: 0.60;
	    opacity: 0.60;
	     filter: alpha(opacity=60);
}
.rep a .visitation{
	float: left;
	position: absolute;
	top: 2px;
	right: 2px;
	height: 6px;
	width: 6px;
	margin: 0;
	padding: 0;
	border: outset 2px #fff;
	line-height: 6px;
	font-size: 6px;
	color:#fff;
	background-color: #00f;
	z-index: 100;
}
.rep a:visited .visitation {
	border: inset 2px #fff;
	background-color: #906;
}
.rep a:hover .visitation{
	z-index: -10;        /* display: none;   does not seem to work for IE 6 */
}

.float_l{
	float: left;
	margin: 2px;
}
.float_r{
	float: right;
	margin: 2px;
}
.clear{
	clear: both;
}

/*
	**************************************************************************
	* body - set up the font and color. The reader of the page has an option *
	*        to change the font-size and color, to aid legibility.
	**************************************************************************
*/
body{
	font-family: 'trebuchet ms', arial, helvetica, verdana, sans-serif;
	font-size: 12px;
	line-height: 1.5; 
	color: #602;
	font-weight: normal;
	background-color: #333333;
	margin:  0;
	border:  0;
	padding: 0;
}

/*
	*******************************************
	* banner - picture collage at top of page *
	*******************************************
*/
#banner{
	margin: 0 0 8px 0;
	border: 0;
	border: 2px inset #CCF;
	text-align: center;
}

/*
	*********************************************************************
	* header - used to hold the "nav" and "title" DIVs.                 *
	*          "padding-right" is set to the width of the "photos" div. *
	*********************************************************************
*/
#header{
	background-color: #444;
	overflow:visible;
	padding: 0;
	margin: 0;
	border: 0; 
	width: 864px;              
	min-width: 864px;
}

/*
	==================================================================
	| nav - a table cell holding an image and a link for navigation. |
	|          "height" is set to 116px to hold an image plus text.  |
	==================================================================
*/
#nav {
	margin: 0 0 10px 10px;
	width: 82px;
	padding: 5px 0 0 0;    /*padding: 90px 0 0 0;*/
	float: left;
}
#nav li{
	background-color: #030;
	text-align: center;
	height: 100px;
	font-size: 11px;
	padding: 0;
	border: outset #FFF 2px;
	list-style: none;
}
#nav img{
	padding: 2px;
	border: 2px outset #CCF;   
	display: block;
}
#nav a, #nav a:focus, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active{
	color: #FFF;
	border: 0;
	padding: 0;
	background-image: none;
	text-decoration: none;
}
#nav #accessibility{
	color: #FFF;
	font-size: 18px;
	font-weight: bolder;
	height: 120px;
	cursor: pointer;
}
.instruction{
	color: #000;
	background-color: #FFFFE9;
	background-image: url(../images/bkgrnd_yellow.jpg);
	background-repeat: repeat;
	font-size: 140%;
	border: 2px outset #FFF;
	padding: 2px;
}
.instruction img{
	border: 2px outset #99F;
}
.instruction a, .instruction a:focus, .instruction a:link, .instruction a:visited, .instruction a:hover, .instruction a:active{
	text-decoration: none;
}

/*
	===========================================
	| title - the title column (large photo). |
	===========================================
*/
#title{
	margin: 0 10px 10px 0;
	padding: 0;
	float: left;
}

#title li{
	position: relative;
	background-color: #444;
	margin: 0;
	border: solid #444 2px;
	text-align: center;
	list-style: none;
}
#title li .trip{
	position: absolute;
	top: 10px;
	left: 10px;
	border: 0;
	z-index: 10;
	HTMLOpacity: 0.60;
	 MozOpacity: 0.60;
	    opacity: 0.60;
	     filter: alpha(opacity=60);
}

/*
	*******************************************************************************
	* container - used to hold the "report" and "photos" DIVs.                    *
	*             "padding-right" is set to the margin-right of the "photos" div. *
	*******************************************************************************
*/
#container{
	background-color: #FFF;
	overflow:visible;
	margin: 0 10px;                
	padding-right:  280px;
	clear: both;
}

/*
	=================================================================================
	| report - used to hold the text of the report.                                 |
	|          "margin-right" is set to MINUS the margin-right of the "photos" div; |
	|                "border-right" is set to the positive of this                  |
	=================================================================================
*/
#report{
	float: left;
	width: 100%;
	/*padding: 4px; Unfortunately this scews-up the floating*/
	margin-right: -280px;
	border-right:  280px solid #444;
	background-image: url(../images/bkgrnd_brown.jpg);
	background-repeat: repeat;
	background-color: #EEE;
}

#reports{
	background-image: url(../images/bkgrnd_blue.jpg);
	background-repeat: repeat;
	background-color: #EEE;
}
/*
	+----------------------------------------------------------------------------+
	| p - the "paragraph" style.                                                 |
	|     Color the first letter red and increase its size to straddle the line; |
	|     make hyperlinks bolder.                                                |
	+----------------------------------------------------------------------------+
*/
#report p, #report .p_class{ 
	background-color:#FFFFEE;
	margin-top: 0px; 
	border-bottom: 2px solid #666;
	border-right:  2px solid #666;
	border-left:   2px solid #CCC;
	text-align: justify;
	padding: 5px 10px 5px 5px;
	margin: 0 4px 4px 4px;
}
#report .p_class p{ 
	background-color:#FFFFEE;
	border: none;
	text-align: justify;
	padding: 4px 0 0 0;
	margin:  0;
}
/* *****IE BUG***** Do NOT remove the extra spaces below: " , " and r {" ***** */ 
#report p:first-letter , #report .p_class:first-letter {
	float: left;
	padding: 0;
	color: #060;
	font-family: verdana, helvetica, arial, 'trebuchet ms', sans-serif;
	font-size: 200%;
	font-weight: bold;
	font-style: italic;
	line-height: 50%;
}
/*
	+--------------------------------------+
	| h1 - Main header in the report.      |
	| Color it blue and increase its size. |
	+--------------------------------------+
*/
#report h1{
	text-align: left;
	font-size: 150%;
	font-style: italic;
	font-variant: small-caps;
	background-color: #DDF;
	color: #008;
	margin:  8px 4px 0 4px;
	padding: 5px;
	border-top:    2px solid  #CCC;
	border-right:  5px double #666;
	border-bottom: 1px solid  #666;
	border-left:   5px double #CCC;
	border-right:  2px solid #666;
	border-bottom: 0;
	border-left:   2px solid #CCC;
}

/*
	+--------------------------------------+
	| h2 - Used to style Sue's "signature. |
	| Color it blue and increase its size. |
	+--------------------------------------+
*/
#report h2{
	text-align: right;
	font-family: 'Lucida Handwriting', 'URW Chancery L', 'Comic Sans MS', cursive, fantasy;
	font-size: 200%;
	color: #008;
	margin:  0;
	padding: 5px;
}

/*
	==================================================================================
	| #photos - used to hold a column of images.                                     |
	|          "width" is set to 220px to hold images of width 200px plus a border;  |
	|          "margin-right" is set to MINUS its width.                             |
	==================================================================================
*/
#photos{
	float: left;
	width: 270px;
	margin-right: -280px;
	background-color: #999;
	text-align: center;
/*	padding: 5px 4px 5px 4px; Unfortunately this screws-up the floating*/
}

/*
	+---------------------------------------------+
	| ul - style the photos as an unordered list. |
	+---------------------------------------------+
*/
#photos ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

/*
	+--------------------------------------------------------------------+
	| li - each image is held in a list element.                         |
	| The "height" and "width" are set to the width of the "photos" DIV. |
	+--------------------------------------------------------------------+
*/
#photos li{
	position: relative;
	height: 266px;
	width:  266px;
	border: 2px outset #FFF;
	background-color: #999;
	}

/*
	+-------------------------------------------------------+
	| .port - DIV to hold a photo that is in portrait mode. |
	+-------------------------------------------------------+
*/
.port{
	position: absolute;
	left:     39px;
	top:       6px;
	width:   188px;
	height:  251px;
}
.port img{
	width:   188px;
	height:  251px;
}

/*
	+--------------------------------------------------------+ 
	| .land - DIV to hold a photo that is in landscape mode. |
	+--------------------------------------------------------+ 
*/
.land{
	position: absolute;
	left:      6px;
	top:      39px;
	width:   251px;
	height:  188px;
}
.land img{
	width:   251px;
	height:  188px;
}

/*
	+===================================================+
	| Below are the definitions for the slide galleries |
	+===================================================+
*/
#trip_galleries{
	font-family: 'trebuchet ms', arial, helvetica, verdana, sans-serif;
	font-size: 14px;
	line-height: 1.5; 
	font-weight: normal;
	color: #FFF;
	background-color: #555;
	margin:  2px;
	border: 0;
	padding: 0;
	color: #FFFF;
}

#ss_explain{
	float: left;
	width: 150px;
	border: 2px outset #FFF;
	margin:  0 2px;
	padding: 10px 4px;
	background-color: #333;
}

.ss_instruction{
	width: 736px;
	border: 2px outset #FFF;
	margin: 2px;
	padding: 4px;
	text-align: center;
	background-color: #333;
}
	
/*
	+--------------------------------------------------+
	| ul - style the trip titles as an unordered list. |
	+--------------------------------------------------+
*/

#ss_trips{
	float: left;
	list-style: none;
	padding: 0;
	margin: 0 2px;
	width: 582px;
	background-color: #555;
}

/*
	+--------------------------------------------------------------------+
	| li - each trip title is held in a list element.                    |
	+--------------------------------------------------------------------+
*/

#ss_trips li {
	float: left;
	position: relative;
	width:  190px;
	height:  92px;
	border: 2px outset #FFF;
	}

#ss_trips li img{
	width:   190px;
	height:   92px;
	cursor: pointer;
	border: 0;
}

#ss_trips li b{
	display block;
	text-align: center;
	position: absolute;
	top: 0px;
	width:   190px;
	padding: 4px 0px 0px 0px;
}

/*
	==================================================================================
	| #photos - used to hold a column of images.                                     |
	|          "width" is set to 220px to hold images of width 200px plus a border;  |
	|          "margin-right" is set to MINUS its width.                             |
	==================================================================================
*/
#ss_galleries{
	position: absolute;
	left: 754px;
	width: 596px;
	text-align: center;
}

/*
	+--------------------------------------------------------------------------+
	| ul - each unordered list holds a single gallery of photos for that trip. |
	+--------------------------------------------------------------------------+
*/
#ss_galleries ul{
	position: absolute;
	top: 0px;
	list-style: none;
	padding: 0;
	margin: 0 2px;
	width: 592px;
	display:none;
}

#ss_galleries ul:first-child{
	display: block;
}

/*
	+----------------------------------------+
	| li - Each photo is held as a list item |
	+----------------------------------------+
*/
#ss_galleries li{
	float: left;
	position: relative;
	height: 144px;
	width:  144px;
	border: 2px outset #FFF;
	background-color: #777;
	text-align: center;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
	
/*
	+-------------------------------------------------------+
	| .port - DIV to hold a photo that is in portrait mode. |
	+-------------------------------------------------------+
*/
#ss_galleries .port{
	position: absolute;
	left:    23px;
	top:      7px;  
	width:   94px;
	height: 126px;
	border: 2px inset #FFF;
}
#ss_galleries .port img{
	width:   94px;
	height:  126px;
	border: 0;
}

/*
	+--------------------------------------------------------+ 
	| .land - DIV to hold a photo that is in landscape mode. |
	+--------------------------------------------------------+ 
*/
#ss_galleries .land{
	position: absolute;
	left:     7px;
	top:     23px;
	width:  126px;
	height:  94px;
	border: 2px inset #FFF;
}
#ss_galleries .land img{
	width:   126px;
	height:  94px;
	border: 0;
}
/*
	+-------------------------+
	| img - the photo itself. | Taken out Neil
	+-------------------------+

#photos img{
	height: auto;
	width: auto;
}
*/

#slideshow{
	width: 273px;
	height: 210px;
	padding: 0;
	margin: 4px auto;
}

#slideshow img{
	padding: 10px;
	border: 2px inset #fff;
	background-color: #666;
}

#slideshow p{
	font-size: 14px;
	font-weight: bold;
}

#elusien_logo{
	width: 212px;
	height: 34px;
	padding: 10px;
	margin: auto auto;
}
/*
	+-------------------------------------------------------+
	| #dive_table - the list of dives and their particulars |
	+-------------------------------------------------------+
*/
caption{
	width: 100%;
	text-align: center;
	font-size: 150%;
}
#dive_table{
	border: 3px inset #88F;
	text-align: center;
	margin: 0 auto;
	page-break-inside: avoid;
}
#dive_table .date{
	position: relative;
	text-align: right;
	width:100px;
	background-image: url(../images/yellow_100x20.gif);
	background-repeat: repeat-y;
	background-color: #FA0;
}
#dive_table .depth{
	position: relative;
	text-align: right;
	width:100px;
	background-image: url(../images/blue_100x20.gif);
	background-repeat: repeat-y;
	background-color: #009;
}
#dive_table .time{
	position: relative;
	text-align: right;
	width:100px;
	background-image: url(../images/green_100x20.gif);
	background-repeat: repeat-y;
	background-color: #090;
}
#dive_table .dive{
	text-align: left;
}

/*
	+----------------------------------------------------------+
	| .centre - a container that has the text & photos centred |
	+----------------------------------------------------------+
*/
.centre, .google_map{
	text-align: center;
	margin: 0 auto;
} 

.google_map object{
	width:  425px;
	height: 350px;
	overflow: hidden;
}

.hide{
	display: none;
}

.odd{
	background-color: #ccd3cc;
}

.even{
	background-color: #dde3dd;
}
/*
	+------------------------------------------------+
	| #font_options - options for the sight-impaired |
	+------------------------------------------------+
*/
#font_options{
	position: absolute;
	margin: 100px 10px 10px 10px;
	border: inset #FFF 2px;
	text-align: center;
	font-size:17px;
	top: 0;
	left: 86px;
	background-color: #030;
	color: #FFF;
	z-index: 10;
}
/*
	****************************
	* footer - the footer DIV. *
	****************************
*/
#footer{
	background-color: #666;
	color: #FFF;
	margin: 0 16px 0 10px;
	text-align: center;
	clear: both;
}
#footer a{font-weight: bolder;}
#footer a:focus, #footer a:hover{background-color: #00A; color: #FC6;}


/** html .boxhead h3 {height: 1%;} /* For IE 5 PC */
.sidebox {
	margin: 0 auto; /* center for now */
	background: url(../images/sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(../images/sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h3 {
	background: url(../images/sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: #fff; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
}
.boxbody {
	background: url(../images/sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}