/*----------------------------------------------------------------------------------------------
		Queensland Hovercraft Club
		Cruise Reports - 2017 - Archive		
		http://www.qhover.com
------------------------------------------------------------------------------------------------

	 1.	Document Setup (body, structure etc)
	 2.	Page Layout Data 		box shadow and border radius added	29/03/17
	 3.	Paragraphs and Fonts
	 4.	Menu Column Table Definitions
	 5.	Footer Button Style
	 6.	Cruise Table Definitions	added .cruise td.video { & #thumb	30/03/17
	 7.	Photo Gallery Table Definitions
	 8.	Filmstrip Table Definitions			Last Modified	-	25/03/17	
	 9.	Calendar Table Layout
	10.	Archive Table Definitions
	11.	Journal Index page Table Definitions
	12.	Google Maps div						added	-	30/03/17

------------------------------------------------------------------------------------------------
	1.	Document Setup (body, structure etc)
------------------------------------------------------------------------------------------------*/

body	{
	margin: 0px; 
	background-color: #bee7Fb; 
	background-image: url(backgnd-d.png); 
	background-repeat: repeat-y; 
	} 

.content {
	width: 100%;
	height: auto;
	margin: 0; 
	padding: 0; 
	border: 0;
	float: left;
	}


#maincontainer {
	width: 1020px;					/*	Width of main container		*/
	margin: 0 auto;					/*	center container on page	*/
	background-image: url(backgnd.png); 		/*	add gradient image to page	*/
	background-repeat: y; 
	}

#topsection {
	height: 100px;					/*	CHANGED from 120px		*/
	background-image: url(title.html);		/****** Set URL to title image name *****/
	background-position: center top; 
	background-repeat: no-repeat; 
	position: -webkit-sticky; 			/*	Keeps topsection stationary	*/
	position: sticky; 				/*	Keeps topsection stationary	*/
	top: 0px; 					/*					*/
	}

#topsection h1 {
	margin: 0;
	padding-top: 30px;
	font-family: Verdana, Arial;
	text-align: center;
	color: #0000EE;
	}

#contentwrapper {
	float: left;
	width: 100%;
	}

#contentcolumn {
	margin-left: 150px;			/*	Set left margin to LeftColumnWidth	*/
	}

#leftcolumn {					/*	Menu column				*/
	float: left;
	width: 150px;				/*	Width of left column			*/
	margin-left: -1020px;			/*	Set left margin to MainContainerWidth	*/
	position: -webkit-sticky; 		/*	Keeps leftcolummn menu stationary	*/
	position: sticky; 			/*	Keeps leftcolummn menu stationary	*/
	top: 120px; 				/****** Set to height of topsection	   ******/
	}

#footer {
	font-family: Verdana, Arial; 		/*		added to .css file		*/
	font-size: 14px; 			/*		added to .css file		*/
	clear: left;
	width: 100%;
	background: #0000EE;
	text-align: center;
        font-weight: bold;
	color: #FFF;
	padding: 4px 0;
	}

#footer a {
	color: #FFFF80;
	}

.innertube {
	margin: 10px;		/* Margins for inner DIV inside each column (to provide padding) */
	margin-top: 0;
	}

/*----------------------------------------------------------------------------------------------
	2.	Page Layout Data 
------------------------------------------------------------------------------------------------*/

#page	{					/*	standard cruise report page		*/
	width: 625px;
	height: auto;
	border: 1px solid black;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	padding: 20px 45px 0px 70px;
	margin: auto;
	margin-bottom: 0;
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 18px; 
	text-align: justify;
	color: #000000;
	background: #edeaff;
	float: center; 
	}

#page-comic { 						/*	14px comic sans ms			*/
	width: 625px;
	height: auto;
	border: 1px solid black;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	padding: 110px 45px 0px 70px; 			/*	CHANGED from 55px 45px 0px 70px;	*/
	margin: auto;
	margin-bottom: 0;
	font-family: comic sans ms; 
	font-size: 14px; 
	line-height: 20px; 
	text-align: justify;
	color: #000000;
	background: #edeaff;
	float: center; 
	}

#page-slide {						/*	photo gallery pages			*/
	width: 740px;
	height: auto;
	border: 1px solid black;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	padding: 20px 45px 0px 70px;
	margin: auto;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 18px; 
	text-align: justify;
	color: #000000;
	background: #edeaff;
	float: center; 
	}

/*----------------------------------------------------------------------------------------------
	3.	Paragraphs and Fonts
------------------------------------------------------------------------------------------------*/

h1	{
	font-family: Garamond;
	font-size: 24px; 
	color: #B80C0C; 
	text-align: center;
	}

h2	{ 
	font-family: Verdana, sans-serif; 
	font-size: 22px; 
	text-align: center;
	color: #000000; 
	} 

h3	{ 
	font-family: Verdana, sans-serif; 
	font-size: 12px; 
	text-align: center;
	color: #0000ee; 
	} 

h4	{ 
	font-family: Verdana, sans-serif; 
	font-size: 20px; 
	text-align: center;
	color: #666666; 
	} 

b	{
	font-size: 100%;
	}

em	{
	color: red;
	}

.text	{					/*	Journal Page - Text - Verdana, Arial	*/
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 18px; 
	font-weight: normal; 
	text-align: justify; 
	color: #000000; 
	} 

.brightred {
	font-family: Verdana, Arial; 
	font-size: 14px; 
	line-height: 18px; 
	font-weight: bold; 
	color: #FF0000; 
	}

.caption { 
	font-family: Verdana, Arial; 
	font-size: 11px; 
	line-height: 18px; 
	font-weight: bold; 
	text-align: center; 			/*		LINE ADDED TO .css		*/
	vertical-align: bottom; 
	color: #0000ee; 
	} 

.comic	{					/*	Journal Page - Text - comic sans ms	*/
	font-family: comic sans ms; 
	font-size: 14px; 
	line-height: 20px; 
	font-weight: normal; 
	text-align: justify; 
	color: #000000; 
	} 

.date	{					/*	Journal Page - Date			*/
	font-family: comic sans ms; 
	font-size: 14px; 
	line-height: 14px; 
	text-align: left; 
	font-weight:bold; 
	color: #000000;
	} 

.maroon {
	font-family: Verdana, Arial; 
	font-size: 14px; 
	line-height: 20px; 
	font-weight: bold; 
	color: #800000; 
	}

.slide	{				/*	photo gallery pages - Text - Verdana, Arial	*/
	font-family: Verdana, Arial; 
	font-size: 14px; 
	line-height: 18px; 
	font-weight: normal; 
	text-align: justify; 
	color: #000000; 
	} 

.title	{					/*	Daily Journal Page - Title		*/
	font-family: Verdana, Arial; 
	font-size: 14px; 
	line-height: 18px; 
	font-weight: bold; 
	text-align: center; 
	color: #000000; 
	} 

.dummy tr:hover {			/*	allow hover highlight on tables with no class	*/
	background-color: #ddd;  
	} 

/*----------------------------------------------------------------------------------------------
	4.	Menu Column Table Definitions
------------------------------------------------------------------------------------------------*/

.menu	{ 
	width: 150px; 
	padding: 0px; 
	border: 0px; 
	} 

.menu td { 
	background-image: url(menu.gif); 
	background-repeat: no-repeat; 
	height: 25px; 
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 14px; 
	font-weight: bold; 
	text-align: center; 
	text-decoration: none; 
	vertical-align: middle; 
	color: #808080; 
	} 

.menu a	{ 
	font-family: Verdana, Arial; 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none; 
	color: #ffffff; 
	} 

.menu a:visited { 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none; 
	color: #ffffff; 
	} 

.menu a:hover { 
	font-size: 12px; 
	font-weight: bold; 
	text-decoration: none; 
	color: #ff0000; 
	} 

/*----------------------------------------------------------------------------------------------
	5.	Footer Button Style
------------------------------------------------------------------------------------------------*/

.buttons {
	border: 0;
	width: 200px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana, Arial;
	font-size: 9px; 
	text-align: center; 
	color: maroon;
	} 

button	{
	margin: auto; 
	display: block; 
	} 

input, select { 
	font-size: 10px; 
	font-family: Arial; 
	float: center; 
	margin-left: auto;
	margin-right: auto;
	} 

/*	<input style="color: maroon;" type=button value="Back to Photo Gallery" onClick="history.back()">
			used for "Back to Photo Gallery" button in Photo Gallery pages		*/

/*----------------------------------------------------------------------------------------------
	6.	Cruise Table Definitions
------------------------------------------------------------------------------------------------*/

.agenda,
.general,
.cruise	{
	width: 100%; 
	border: 0px; 
	margin: 0px; 
	cellpadding: 0px; 
	cellspacing: 0px; 
	border-collapse: collapse; 
	}

.cruise tr:hover { 
	background-color: #ddd;  
	} 

.agenda td,
.cruise td { 
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 18px;
	text-align: left; 
	vertical-align: top; 
	color: #000000; 
	}

.agenda td { 
	line-height: 30px;
	}

.agenda td.name { 
	width: 90px; 
	font-weight: bold; 
	} 

.cruise td.name { 
	width: 150px; 
	font-weight: bold; 
	} 

.cruise td.video { 
	width: 33%; 
	text-align: center; 
	font-weight: bold; 
	color: #0000ee; 
	} 

/*----------------------------------------------------------------------------------------------
	7.	Photo Gallery Table Definitions	- 3 thumbnails wide - (150 x 100)
------------------------------------------------------------------------------------------------*/

.gallery { 
	width: 650px; 
	border: 0px; 
	margin: 0px; 
	border-collapse: collapse; 
	} 

.gallery td { 
	font-family: Verdana, Arial; 
	font-size: 12px; 
	font-weight: bold; 
	text-align: center; 
	color: #0000EE; 
	vertical-align: top; 
	} 

.gallery td.left, .gallery td.right { 
	width: 30%; 
	} 

.gallery td.center { 
	width: 40%; 
	} 

.photo	{				/*	thumbnail surround for photo gallery index	*/
	background-color: #d2d2f2;
	}

.gallery img { 				/*	add a white border around gallery thumbnail	*/
	border: 1px solid #FFFFFF; 
	}

#thumb	{					/*	standard 16 x 9 thumbnail - 190px x 100px	*/
	width: 178px; 				/*	standard  5 x 4 thumbnail - 136px x 100px	*/
	height: 100px; 
	padding: 0px; 
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border: 1px solid white;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	margin: 0 auto;
	margin-bottom: 10px;
	float: left; 
	}

/*----------------------------------------------------------------------------------------------
	8.	Filmstrip Photos Table Definitions - 4 thumbnails wide - (120 x 75)
------------------------------------------------------------------------------------------------*/

.photos { 
	width: 625px; 
	border: 0px; 
	margin: 0 auto; 
	border-collapse: collapse; 
	} 

.photos tr.filmstrip { 
	background-image: url(film-75.png); 
	background-repeat: repeat-x; 
	height: 145px; 
	height: 135px; 
	} 

.photos td { 
	width: 156px; 				/*	156px for 4 images - 125px for 5 images		*/
	padding-top: 19px;			/*	center image vertically in filmstrip		*/
	font-family: Verdana, Arial; 
	font-size: 11px; 
	font-weight: bold; 
	text-align: center; 
	vertical-align: top; 
	color: #0000EE; 
	} 

.photos img { 					/*	add a white border around filmstrip thumbnail	*/
	border: 1px solid #FFFFFF; 
	margin-bottom: 15px; 			/*	add margin-bottom: 15px; for caption allowance	*/
	} 

/*----------------------------------------------------------------------------------------------
	9.	Calendar Table Layout
------------------------------------------------------------------------------------------------*/

.year	{ 
	color: white; 
	font-family: Arial; 
	font-size: 15pt; 
	font-weight: bold; 
	text-align: center; 
	}

.calendar { 
	width: 140px; 
	padding: 0px; 
	border: 1px solid #000;		/* change to 	border: 1px solid #000; 	if border is required */
	margin: auto;
	background-color: #edeaff; 
	border-collapse: collapse; 
	} 

.calendar td { 
	height: 17px;
	font-family: Verdana, Arial; 
	font-weight: normal;
	text-decoration: none;
	font-size: 10px;
	line-height: 12px; 
	text-align: center;
	vertical-align: middle;
	}

.calendar td.day { 
	color: #800000;
	font-weight:bold; 
	}

.calendar td.month { 
	font-size: 12px; 
	line-height: 18px; 
	color: #0000EE; 
	font-weight:bold; 
	} 

.calendar td.nolink {
	color: #000000;
	letter-spacing: 0.02em;
	}

.calendar td a { 
	font-weight: bold;
	text-decoration: none;
	color: #FF40FF;
	} 

.calendar td a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #FF40FF;
	}

.calendar td a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #4040FF; 
	}

/*----------------------------------------------------------------------------------------------
	10.	Archive Table Definitions
------------------------------------------------------------------------------------------------*/

.archive {
	width: 100%;
	border: 0px;
	border-color: #c9cbb5;
	border-style: solid;
	border-collapse: collapse;
	}

.archive caption {
	padding: 10px 3px 10px 3px; 			/*	padding: 6px 3px 6px 3px;	*/
	font-family: Times New Roman, Times; 
	font-size: 30px; 				/*	font-size: 20px;		*/
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
	color: #ffffff;
	caption-side: top;
	text-align: center;
	background-color: #1884c6;
	}

.archive heading {
	padding: 6px 3px 6px 3px;
	font-family: Verdana, Arial;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	text-decoration: none;
	color: #ffffff;
	caption-side: top;
	text-align: left;
	background-color: #1884c6;
	}

.archive th {
	padding: 2px 5px 2px 5px;
	font-family: Verdana, Arial; 
	font-size: 18px;
	line-height: 35px; 
	font-weight: bold;
	text-align: center; 
	text-decoration: none;
	color: #ffffff;
	background-color: #0068c3;
	}

.archive tr.head {
	text-align: center;
	vertical-align: middle;
	}

.archive td {
	padding: 2px 5px 2px 5px;
	font-family: Verdana, Arial; 
	text-align: left;
	font-size: 14px; 
	font-weight: bold;
	text-decoration: none;
	color: #0068c3; 
	}

.archive tr {
	text-align: center;
	vertical-align: middle;
	height: 45px;
	}

.archive tr:nth-child(odd) { 
	background-color: #ebe7e8; 
	} 

.archive tr:nth-child(even) { 
	background-color: #f5f5f5; 
	} 

.archive td.left {
	text-align: left;
	}

.archive a {
	font-family: Verdana, Arial; 
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #0068c3;
	}

.archive a:hover {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #ff0000;
	}

.archive a:visited {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #00B4E6;
	}

/*----------------------------------------------------------------------------------------------
	11.	Journal Index page Table Definitions
------------------------------------------------------------------------------------------------*/

.intro {					/*	Table for introduction page		*/
	width: 625px; 				/*		CHANGED from 650px		*/
	border: 0px; 
	margin: 0px; 
	border-collapse: collapse; 
	float: center; 
	} 

.intro td { 
	width: 100%; 
	font-family: comic sans ms; 
	font-size: 14px; 
	line-height: 20px; 
	color: #000000; 
	text-align: justify; 
	} 

.intro td.center { 
	text-align: center; 
	} 

.intro td.left { 
	width: 160px; 
	text-align: left; 
	vertical-align: top; 
	} 

.intro td.justify { 
	width: 330px; 
	text-align: justify; 
	} 

.intro td.right { 
	width: 160px; 
	text-align: right; 
	vertical-align: top; 
	} 

.journal {					/*	table for daily log			*/
	width: 600px; 				/*		CHANGED from 500px		*/
	border: 0px; 
	margin: 0px; 
	border-collapse: collapse; 
	float: center; 
	} 

.journal td { 
	font-family: comic sans ms; 
	font-size: 13px; 
	line-height: 22px; 
	color: #0000EE; 
	text-align: left; 
	} 

.journal a {
	font-family: comic sans ms; 
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	color: #0000EE; 
	}

.journal a:hover {
	font-family: comic sans ms; 
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	color: #808080; 
	}

/*----------------------------------------------------------------------------------------------
	12.	Google Maps div
------------------------------------------------------------------------------------------------*/

#map	{
	width: 100%;
	height: 300px;
	border-radius: 10px; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
	border: 1px solid black;
	-webkit-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 8px 8px 5px 0px rgba(50, 50, 50, 0.75);
	}