/* 
This CSS file is run in association with geoapp.htm and geoapp.js as part of
WebGis assignment 2019
Student number:13157037

*/
/* -----------------------body section----------------------------- */
body {
	
	margin-top: 3em;
	margin-left: auto;
	margin-right: auto;
	font-family: Helvetica, Arial, sans-serif;
	color: darkslategray;
	width:900px;
	max-width:100%;
	} /* same width as the map */
	
/* -----------------------headings section----------------------------- */	
h1  {
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-weight: bold;
	color:#006400;
	padding:0;
	margin-bottom: 5px;
	margin-top: 7px;
	font-size: 40px;
	} /* heading 1 */
h2  {
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-weight: bold;
	color:#006400;
	font-size: 25px;
	} /* heading 2 */

h3  {
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-weight: bold;
	color:#006400;
	font-size: 20px;
	} /* heading 3 */	

p 	{
	font-size: 16px;
	} /* paragraph */

img {
    width: auto ;
    max-width: 100% ;
    height: auto ;
}

/* -----------------------div id's section----------------------------- */


#legend {
    float: left;
	}/*  svg legend */
#legend svg text{
    color: #006400 !important;
	} /* attempt at changing the svg text */



#xsimg {
	float: left;
	/* } png file that contains cross-section */
	}
#map {
	width: 900px;
	max-width:100%;
	height: 674px;
	padding: 0px;
	border: gray 2px solid;
	margin-bottom: 20px;
	} /* div that contains map */
	
#mybutton1 {
	width: 15em;
	max-width:100%;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right:auto;
	}/*  button below map that returns to original zoom */

/* -----------------------div class section----------------------------- */

.description {
    margin:0 auto;
}
.container {
    max-width: 100%;
    margin: 1px;
	} /* containing the svg legend and cross-section png file */
.btn {
	border-radius: 3px;
	color: white;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	/*width: 20%;
	max-width:100%;
	display: inline-block;*/
	padding: 7px;
	margin: 7px 0 0 0;
	cursor: pointer;
	background: #006400;
	} /* buttom green with white bold text */

.btn:hover {
	background: #8FBC8B;
	}

.link { 
	color: #006400;
	font-weight: bold;
	} /* CSS link green */
	
.link:hover { 
	color: #8FBC8B; 
	} /* CSS link hover (light green) */

/* end of css file */