:root {
		box-sizing: border-box;
	}
	/*html { 
		background: url(/images/dogjail.jpg) no-repeat center top fixed; was center center fixed
		-webkit-background-size: contain; these four were cover and I changed it to contain
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
	}*/
	.wrapleft {
		float: left;
		margin-top: 4px;
		margin-right: 10px;
		margin-bottom: 4px;
	}
	.wrapright {
		float: right;
		margin-top: 4px;
		margin-left: 10px;
		margin-bottom: 4px;
	}
	.Heading {
		grid-area: header;
		background: white; /* Fallback color */
		background: rgba(255,255,255,0.7); /* Red, Green, Blue, Opacity */
		padding-top: 15px;
		padding-left: 5px;		
		padding-right: 5px;
		border-top-left-radius: 1.5em;
		border-top-right-radius: 1.5em;
		}
	.Content {
		grid-area: main;
		/*padding-top: -25px;*/
		}
	.RightSide {
		grid-area: right; /* the name 'right' could be anything, I used this name to indicate where on the page it was going */
		background: gray;
        background: rgba(10,10,10,0.8);
		/*margin-top: 10px;*/
		padding-left: 15px;		
		padding-right: 15px;
		}
	.Footer {
		grid-area: footer;
		background: white;
		background: rgba(255,255,255,0.7);
		padding: 15px;
		border-bottom-right-radius: 2em;
		border-bottom-left-radius:  2em;
		}
	.wrapper { /* This is the mobile first approach which defaults to column stacking */
		display: grid;
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
			'main main main main main main'
			'right right right right right right'
			'footer footer footer footer footer footer';
	}
	@media (min-width: 31em) and (max-width: 48em)  { /* This query further controls the margin and stacking on tablets */
    .wrapper {
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
    		'main main main main main main'
			'right right right right right right'
			'footer footer footer footer footer footer';
        width: 60%; 
    	margin-left: auto ; /* Without this and the following line, the responsiveness stopped working */
		margin-right: auto ;
		}
	}
    @media (min-width: 48em) { /* em = 768px (or whatever px) / 16 (typical browser font size) This query puts a margin around the page on large screens such as a desktop */
    .wrapper {
		grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
			'header header header header header header'
			'main main main main right right'
			'footer footer footer footer footer footer';
        width: 70%; 
		margin-left: auto ; /* Without this and the following line, the responsiveness stopped working */
		margin-right: auto ;
		}
	}
	h1 {
        color: black;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 36px;
        text-shadow: 2px 2px red;
        margin-top: -5px;
        font-style: italic;
    }
	h2 {
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
        color: #D67900;
        text-shadow: 2px 2px #025203;
        margin-top: -5px;
        /*margin-bottom: -0px;*/
    }
	h3 {
        color: #025203;
        text-align: center;
        font-family: trebuchet MS, sans-serif;
        font-size: 20px;
        text-shadow: 2px 2px #D67900;
        margin-top: -5px;
        font-style: italic;
    }
	h4 {
        text-align: center;
        text-shadow: 1px 1px red;
        margin-top: 0px;
        margin-bottom: -5px;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: black;
    }
	h4.h4rs {
        text-align: center;
        text-shadow: 1px 1px red;
        margin-top: 0px;
        margin-bottom: -5px;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: white;
    }
	h5 {
        text-align: center;
        margin-top: -5px;
        margin-bottom: -5px;
        font-family: trebuchet MS, sans-serif;
        font-size: 24px;
        color: black;
    }
	h6 {
        text-align: center;
        margin-top: -5px;
        margin-bottom: -5px;
        font-family: trebuchet MS, sans-serif;
        font-size: 16px;
        color: red;
    }
	a[href^=tel]{
		text-decoration: inherit;
		color: inherit;
	}
	.rslink{ /* This puts a white background around links so they show good on the dark side of the page */
		background: white;
	}
    p {
		color: black; /* paragraph font color */
    }
    p.rs {
		color: white; /* paragraph font color */
        /*text-shadow: .5px .5px yellow;*/
    }
    .fullwidth {
		background: white;
		background:rgba(255,255,255,0.7);
        padding: 15px;
    }
    .fullwidth2 {
		background: white;
		background:rgba(255,255,255,0.7);
        padding-left: 15px;
        padding-right: 15px;
		border-bottom-left-radius: 1.5em;
		border-bottom-right-radius: 1.5em;
    }
    .center {
        text-align: center;
    }
    .spacing {
		margin-left: 2px;
		}
    .fine {
        font-family: trebuchet MS, sans-serif;
        font-size: 8pt;
    }