/* 
Generic Styling, for Desktops/Laptops 
*/
table.gallery { 				/* the layout and colours for a photo   with photo decsiptions */
	max-width: 1200px;		/* the photo gallery is limited to 1500 px wide to stop the text paragraphs being too wide */
	margin-left: auto;
	margin-right: auto;		/* setting both side margins to auto will centre the gallery when the display is greater than the max-width */
	padding: 2%;			/* a smaller bit of thin air around the gallery box */
	border-width: 50px;
	border-color: #fada00;
	text-align: justify;
	font-family: sans-serif;
	font-size: 14px; 
	color: #fada00;
	background-color: #733e09;
	width: 100%; 
	border-collapse: collapse; 
	table-layout: fixed;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

table.data { 				/* the layout and colours for a data table*/
	max-width: 1200px;		/* the data gallery is limited to 1500 px wide*/
	margin-left: auto;
	margin-right: auto;		/* setting both side margins to auto will centre the gallery when the display is greater than the max-width */
	padding: 2%;			/* a smaller bit of thin air around the gallery box */
	border-width: 50px;
	border-color: #fada00;
	text-align: left;
	font-family: sans-serif;
	font-size: 14px; 
	color: #fada00;
	background-color: #733e09;
	width: 100%; 
	border-collapse: collapse;
}
/* Zebra striping 
tr:nth-of-type(odd) { 
  background: #512C06; 
}  */
/*Grey boader around rows to keep cells together when collapsed to a single column, except in coachgall */
tr { border: 1px solid #ccc; }
.coachgall tr {border: none !important;}

th { 
 /* background: #333; 
  color: white; 
  font-weight: bold; */
  border: 0;
}
td, th { 
  padding: 6px;  
 /* text-align: left; */
}

/*
Max width of img on wide screens - wider than 760 px
*/
@media
only screen and (min-width: 761px)
{
	img {
		max-width: 100% ;
	}
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.gallery, .gallery thead, .gallery tbody, .gallery th, .gallery td, .gallery tr, 
	table.data .data thead, .data tbody, .data th, .data td, .data tr,
	table.coachgall, .coachgall thead, .coachgall tbody, .coachgall th, .coachgall td, .coachgall tr
	
	{ 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.gallery thead,
	.data thead,
	.coachgall thead
	
	{ 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
/*	tr { border: 1px solid #ccc; }   */
	
	.gallery td, .data td, .coachgall td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.gallery td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;file:///C:/Data/Web%20Pages/Photos/RRMin6March1921.jpg
	}
	/*  First row in bold  */
	.gallery td:nth-of-type(1) {
		font-weight: bold
	}
	/*
	Label the data
	*/
	.gallery td:nth-of-type(1):before { content: "RR"; }
	.gallery td:nth-of-type(2):before { content: "GWR"; }
	.gallery td:nth-of-type(3):before { content: "l x w x h"; }
	.gallery td:nth-of-type(4):before { content: "build date"; }

		/*
	Label the data
	*/
	.data td:nth-of-type(1):before { content: "Design"; }
	.data td:nth-of-type(2):before { content: "Body"; }
	.data td:nth-of-type(3):before { content: "Dimensions"; }
	.data td:nth-of-type(4):before { content: "Underframe"; }
	.data td:nth-of-type(5):before { content: "Springs"; }
	.data td:nth-of-type(6):before { content: "Wheels"; }
	.data td:nth-of-type(7):before { content: "Wheelbase"; }
	.data td:nth-of-type(8):before { content: "Axlebox"; }
	.data td:nth-of-type(9):before { content: "Buffers"; }
	.data td:nth-of-type(10):before { content: "Drawgear"; }
	.data td:nth-of-type(11):before { content: "Brake"; }
	.data td:nth-of-type(12):before { content: "Tare"; }
	.data td:nth-of-type(13):before { content: "Load"; }

}

@media 
only screen and (min-width: 100px) and (max-width: 3000px)
{
table.widescreen { 				/* the layout and colours for Lewis classifcation */
	max-width: 1000px;		/* the photo gallery is limited to 1000 px wide to stop the text paragraphs being too wide */
	margin-left: auto;
	margin-right: auto;		/* setting both side margins to auto will centre the gallery when the display is greater than the max-width */
	padding: 2%;			/* a smaller bit of thin air around the gallery box */
	font-family: arial;
	font-size: 16px; 
/*	color: #fada00;   */
	width: 100%; 		
	border-radius: 20px 20px 20px 20px;
    border: 4px solid darkgoldenrod;
	text-shadow: 		1px 1px #000000;

	color:				#FFFFCC;
	  line-height: 1.2;
}

.widescreen tr {
	background-color: 	#733e09;
	border:	none;
}
td {
	text-align: justify;
/*	 vertical-align: top;  */
}

table.widescreenblack { 				/* the layout and colours for Lewis classifcation */
	max-width: 1000px;		/* the photo gallery is limited to 1000 px wide to stop the text paragraphs being too wide */
	margin-left: auto;
	margin-right: auto;		/* setting both side margins to auto will centre the gallery when the display is greater than the max-width */
	padding: 2%;			/* a smaller bit of thin air around the gallery box */
	font-family: arial;
	font-size: 16px; 
	color: #fada00;
	width: 100%; 		
	border-radius: 20px 20px 20px 20px;
    border: 4px solid black;
	text-shadow: 		1px 1px #000000;
	font-weight:		bold;
}
.widescreenblack tr {
	background-color: 	black;
	border:	none;
}
}