body {
	background: transparent;
	color: black;
	margin: 0 0pt 0 0pt;
	font-family: Courier New, Courier;
	font-size: 10pt;
	cursor: crosshair; 
	
}

p{
	margin:0;
}


	a{color:#4a4a4a;text-decoration:none;}
	a:link{color:#4a4a4a;background-color:transparent;}
	a:visited{color:#6e6e6e;background-color:transparent;}
	a:active{color:Black;background-color:transparent;}
	a:hover	{color:#999999;background-color:transparent;text-decoration:none;}


div#generator1{
	margin:0em;
}



p.first.line, p.x.line{
	margin:0px 0px 15px 0px;
}
p.title.line {
margin: 10px 0px;
	text-transform: uppercase;
	letter-spacing:+2px;
	font-size: 14pt;
	font-weight: bold;
}
div#title {
margin: 10px 0px;
	text-transform: uppercase;
	letter-spacing:+2px;
	font-size: 14pt;
	font-weight: bold;
}

p.author.line {
	letter-spacing:+2px;
	font-size: 11pt;
	font-weight: bold;
	margin: 20px 40px;
}

/*/////////////////////
 *  Generator styles   *
 //////////////////////*/

div#scale{
	position:absolute;
	left: 1%;
	top: 10px;
}

div#scale img{
	max-width:98%;
	height:auto;
}

div#centrebar{
	margin-left: 15%; 
	margin-right:2%;
	margin-top: 35px; 
	max-width: 550px; 
}

div#destination{
	display:inline-block;
	width:290px;
	height:175px;
}

div#controls{
	float:right;
	margin-top:50px;
	line-height:1.5em;
}



/*/////////////////////
 *  Responsive Styles  *
 //////////////////////*/
 
/* So, JR: the way these work is by applying styles to a document based on
   certain criteria using what are called 'media queries'. In the instance 
   directly below, the styles are applied when we are using a 'screen' (as
   opposed to print) and when the window's width is equal to or less than
   700px (this signified by 'max' width, i.e. 700px is the maximum width 
   for which these styles should be applied. 
   
   Note that these media queries also cascade, so for a window of 300px 
   width, both of the below segments will apply, since the width is below
   both 700px and 460px. 
   
   You can observe all of these at work by resizing a browser window and
   watching for the 'jolts' as the layout is adjusted.                   */
 
 
@media screen and (max-width: 800px) {
	div#centrebar{ /* 	containing all but the mile scale. This is moved to a central alignment. 
						we also add a bit of padding so the text doesn't get pushed right up 
						against the edges of the screen. */ 
		margin-left:auto;
		margin-right:auto;
		padding-left:5px;
		padding-right:5px;
	}
}

@media screen and (max-width: 460px) {
	div#controls{ /*	at this point we make everything linear. controls become centre aligned... */
		float:none;
		margin-top:30px;
		margin-bottom:10px;
		text-align:center;
	}
	div#destination{ /*	as does the changing destination image, but more importantly it now scales
						itself to the screen width. */
		text-align:center;
		width:100%;
	}
}