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

	 1.	Document Setup (body, structure etc)
	 2.	Page Layout Data 
	 3.	Paragraphs and Fonts
	 4.	General Fonts Definition
	 5.	Input Select Button Definition
	 6.	Cruise Table Layout
	 7.	Photo Gallery Table Layout
	 8.	Filmstrip Table Layout
	 9.	Video Table Layout
	10.	Monthly Report Table Layout
	11.	Lightbox Definitions
								Last Modified	-	10/01/17

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

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

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

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

.page	{ 
	width: 625px; 
	height: auto; 
	margin: auto;  
	background: #EDEAFF; 
	padding: 20px 45px 0px 70px; 
	border-top: 1px solid black; 
	border-right: 4px solid black; 
	border-left: 1px solid black; 
	border-bottom: 1px solid black; 
	margin-bottom: 0; 
	font: 12px Verdana, Arial;
	line-height: 18px;
	color: #000000;
	text-align: justify;
	float: center; 
	} 

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

p	{ 
	font: 12px Verdana, Arial;
	line-height: 18px;
	text-align: justify;
	color: #000000; 
	} 

p.date	{ 
	font-family: Verdana, Arial; 
	font-size: 12px; 
	line-height: 12px; 
	text-align: left; 
	font-weight:bold; 
	color: #000000;
	} 

p.title	{ 
	font-family: Verdana, Arial; 
	font-size: 14px; 
	line-height: 18px; 
	text-align: center; 
	font-weight:bold; 
	color: #000000; 
	} 

/*----------------------------------------------------------------------------------------------
	4.	General Fonts Definition
------------------------------------------------------------------------------------------------*/

.comicblue { 
	font-family: comic sans ms; 
	font-size: 16px; 
	line-height: 20px; 
	color: #0000EE; 
	} 

.bluetextsm { 
	font-family: Verdana, Arial; 
	font-size: 11px; 
	line-height: 14px; 
	color: #0000EE; 
	} 

.caption {
	font-family: Verdana, Arial; 
	font-size: 11px; 
	line-height: 15px; 
	color: #0000EE; 
	font-weight: bold;
	text-align: center; 
	}

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

/*----------------------------------------------------------------------------------------------
	5.	Input Select Button Definition
------------------------------------------------------------------------------------------------*/

.buttons {
	border: 0;
	width: 200px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
	} 

input,select { 
	font-size: 10px; 
	font-family: Arial; 
	float: center; 

	margin-left: auto;
	margin-right: auto;
	} 

/*----------------------------------------------------------------------------------------------
	6.	Cruise Table Layout
------------------------------------------------------------------------------------------------*/

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

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

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

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

/*----------------------------------------------------------------------------------------------
	7.	Photo Gallery Table Layout
------------------------------------------------------------------------------------------------*/

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

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

.gallery td.left, .gallery td.right { 
	width: 175px; 
	} 

.gallery td.center { 
	width: 250px; 
	} 

/*----------------------------------------------------------------------------------------------
	8.	Filmstrip Table Layout
------------------------------------------------------------------------------------------------*/

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

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

.filmstrip td { 
	width: 156px; 
	text-align: center; 
	vertical-align: center; 
	} 

.filmstrip tr.caption { 
	height: 20px; 
	font-family: Verdana, Arial; 
	font-size: 11px; 
	font-weight: bold; 
	text-align: center; 
	color: #0000EE; 
	vertical-align: middle; 
	} 

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

/*----------------------------------------------------------------------------------------------
	9.	Video Table Layout
------------------------------------------------------------------------------------------------*/

.video { 
	width: 600px; 
	border: 0px; 
	margin: 0px; 
	cellpadding: 5px; 
	cellspacing: 0px; 
	border-collapse: collapse; 
	} 

.video td { 
	width: 50%; 
	font: 11px Verdana, Arial; 
	font-weight: bold; 
	text-align: center; 
	color: #666; 
	} 

/*----------------------------------------------------------------------------------------------
	10.	Monthly Report Table Layout
------------------------------------------------------------------------------------------------*/

.monthlyreport {
	width: 100%; 
	border: 0px;
	border-color: #c9cbb5;
	border-style: solid;
	border-collapse: collapse;
	cellspacing: 0; 
	cellpadding: 2;
	}

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

.monthlyreport tr.row1, .monthlyreport tr.row2 {
	width: 620px; 
	text-align: left;
	vertical-align: top;
	}

.monthlyreport tr.row1 td {
	background-color: #EBE7E8;
	}

.monthlyreport tr.row2 td {
	background-color: #F5F5F5;
	}

.monthlyreport td {
	height: 45px; 
	padding: 2px 5px 2px 5px;
	font-family: Verdana, Arial; 
	text-align: left;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	color: #000000;
	}

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

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

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

/*----------------------------------------------------------------------------------------------
	11.	Lightbox Definitions
------------------------------------------------------------------------------------------------*/

.opacityit img { 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
	-moz-opacity: 1; 
	border: 1px solid #FFFFFF; 
	}

.opacityit:hover img { 
	border: 1px solid #FFFFFF; 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); 
	-moz-opacity: 0.3; 
	} 

.opacityit:active img { 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
	-moz-opacity: 1; 
	border: 1px solid #FFFFFF; 
	} 

.opacityit:hover { 
	color: green;         /* irrelevant definition to overcome IE bug */
	} 

/*----------------------------------------------------------------------------------------------*/