body
{
    background: gray 10%;
    font-family: Georgia, Times New Roman;
    font-size: 10pt;
    padding-top: 10px;
    margin: 0;
    color: gray;
}

/*W3 tells me that there is an order to the anchor styles*/
/*link - hover - active (in that order) and it looks like I have set up the link and visited to be the same color*/
a:link, a:visited
{
    font-family: inherit;
    text-decoration: underline;
    color: #f60; /*This one apears to be orange #ff6600*/
}
a:hover, a:active {
    font-family: inherit;
	text-decoration: underline;
	color: #0606ff;  /*this apears to be the dark blue color, true hex apears to be #0066ff*/
	}

/*NOTE that the acronym has been dropped as of HTML5*/
abbr { /*, acronym */ /*I don't remember why I needed this*/
	border-bottom: 1px dotted #ddd;
	cursor: help;
    /*the abbr and acronym elements both do the same thing. they are used to show the Abriviaton or Acronym */
    /*they both work the same and contain a title attrabute that will display when the acronym is hovered over */
	}

#Logo {
	position: absolute;
	left: 10px;
	top: 25px;
	width: 125px;
	height: 48px;
	background: #99ff00; /* bright green */
	z-index: 2;
	}
#Logo img{
	position: relative;
	top: 2px;
	left: 2px;
	max-width: 100%;
	}
/* the AddBox is a div that contains both the ShareAsale and the SqueezeLink div's */
#AddBox
{
	position: relative; /* relative postioning will put this at the exact location in pixels from its relative postion*/
	top: 80px;          /* the relavie postion being where it would have landed naturaly within the page layout*/
	right: 240px;
	z-index: 2;
}
/* both the ShareAsale and SqueezeLink div's will be positioned within the AddBox and located absolute relative to the parent div */
#ShareAsale
{
	position: absolute;
	top: 0px;
	right: 27px;
    border: #99ff00 1px solid; /* green */
}

#SqueezeLink
{
	position: absolute;
	top: 165px;
	right: 0px;
    border: #99ff00 1px solid; /* green */
}

h1{
    text-align: center;
}


/* picked up off of http://psacake.com/web/jl.asp# */
/* the css method of making a tool tip that displays when user hovers over an anchor*/
/* the element used for this is the <span> element*/
/* set the :hover z-index to 25 (this was for some browser issue that may change in time*/
/* set the span value within the div section used to {display:none}*/
/* then on the hover event for this div, define a span format: see below*/

a.JensonText{
    position:relative; /*this is the key*/
    z-index:24; background-color:gray;
    color:white;
    text-decoration:none}

a.JensonText:hover{z-index:25;}

a.JensonText span{display: none}

a.JensonText:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:1em; width:12em;
    border:1px solid #99ff00;
		background-color:#b2b2b2; color:black;
    text-align: center;
		text-decoration:none}



/*------------------------------------------smaller than 600px--------------------------------------------------------------------------------------------*/
@media all and (max-width: 600px) { /*This will be applied to any viewport smaller then 600px*/

#headerLabel
{
    display: none;
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: relative; /* right: 10px; */
    left: 25%;
    width: 50%;
    top: 0;
    color: White;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    text-align: center;
    text-indent: 0;
    z-index: 1;
    font-size: 9pt;
}
#mainContainer
{
    position: absolute;
    top: 20vh;
    height: auto;
    border: blue;
    border-width: 1px;
    border-style:solid;
    background: transparent url(./Pics/AC002.jpg) no-repeat top; /* gray 50% */ /*border: #000 1px solid;*/
    z-index: -1;
}
#rideReport 
{
    font-family: inherit;
	background: gray;
	position: relative;
    left: 0;
    width: 75vw;
    /*top: 65px;*/
    padding: 1px;
    color: white;
    border:  #99ff00 1px solid;
    padding: 10px;
    z-index: 4;
}
#rideReport h3 
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}
#rideReport h4 
{
    font-family: inherit;
    font: bold 8pt;
    text-align: left;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}
#rideReport a:link
{
    text-decoration: none;
    color: white;
}
#rideReport a:visited
{
    text-decoration: none;
    color: white;
}
#rideReport a:hover 
{
    font-family: inherit;
  	text-decoration: none;
  	color: black;
}

#trailList
{
    font-family: inherit;
    position: relative;
     /*left: 65%;
    right: 25%;
    top: 34%;*/
    width: 90%;
    background: url(./thumb/RockPaper.jpg); /* transparent;   #fff*/
    border: #99ff00 1px solid; /* green */
    padding: 10px;
    font-size: 9pt;
}
#trailList h3
{
    font-family: inherit;
    text-transform: uppercase;
    text-align: center;
    color: #99ff00;
    margin: 0; /* border-bottom = the underscore
       border-bottom variables
		none solid double grove ridge inset outset
		thin medium thick font-size: 10pt; */
    border-bottom: 1px inset #99ff00;
		font: bold 10pt;
}
#trailList a:link, a:visited {
	text-decoration: none; /*underline*/
	color: yellow;
	}
#trailList a:hover {/*, a:active*/
	text-decoration: underline;
	color: #06f;
	}

#OtherLink{
    font-family: inherit;
	  position: relative;
    left: 15px;
    width: 160px;
    /*top: 500px;*/
    color: #99ff00;
    /*background: transparent; */
    background: url(./thumb/RockPaper.jpg);/* transparent;   #fff*/
    border:  #99ff00 1px solid; /* green */
    padding: 10px;
}
#OtherLink h3
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: #99ff00;
    margin: 0;
    border-bottom: 1px inset #99ff00; /*green ; */
}
#OtherLink a:link, a:visited {
    font-family: inherit;
  	text-decoration: none;
  	color: yellow;
	}
#OtherLink a:hover {/*, a:active*/
    font-family: inherit;
  	text-decoration: underline;
  	color: #06f;
	}

#mail
{
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: relative; /* right: 10px; */
    left: 135px;
    /*top: 760px;*/
    color: yellow;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    width: 160px;
    text-align: center;
    text-indent: 0;
    z-index: 2;
    font-size: 9pt;
}
#mail a:link {
	color: yellow;
	}	
#mail a:hover {
	text-decoration: underline;
	color: Black;
	}

#Resource{
    font-family: inherit;
		background: gray;
		position: relative;
    /*top: 600px;*/
    left: 15px;
    padding: 1px;
    width: 270px;
    color: white;
    border:  #99ff00 1px solid; /* green */
    padding: 10px;
}
#Resource a:link{
	color: yellow;
}
#Resource a:hover {
	text-decoration: underline;
	color: black;				/*#06f;*/
	}
#Resource h3
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}

#Youtube
{
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: relative; /* right: 10px; */
	background: gray;
    left: 15px;
    /*top: 800px;*/
    color: yellow;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    width: 270px;
    /*text-align: center;*/
    text-indent: 0;
    z-index: 2;
    font-size: 9pt;
}
#Youtube a:link {
	color: yellow;
	}	
#Youtube a:hover {
	text-decoration: underline;
	color: Black;
	}
#Youtube h3
{
    font-family: inherit;
    font: bold 10pt;
    /*text-transform: uppercase;*/
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}

a.LinkInfo span{
    color:white;
    text-decoration:none}
a.LinkInfo span a{
    text-decoration: none;
}
}
/*------------------------------------------larger than 600px--------------------------------------------------------------------------------------------*/
@media all and (min-width: 600px) { /*this will be applied to any viewport that is greater then 600px*/

#headerLabel
{
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: relative; /* right: 10px; */
    left: 25%;
    width: 50%;
    top: 0;
    color: White;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    text-align: center;
    text-indent: 0;
    z-index: 1;
    font-size: 9pt;
}
#mainContainer
{
    position: absolute;
    top: 10vh;
    left: 15%;
    width: 70%;
    height: auto;
    background: transparent url(./Pics/AC002.jpg) no-repeat top; /* gray 50% */ /*border: #000 1px solid;*/
    z-index: -1;
}
#rideReport 
{
    font-family: inherit;
	background: gray;
	position: relative;
    left: 15px;
    top: 65px;
    padding: 1px;
    width: 200px;
    color: white;
    border:  #99ff00 1px solid;
    padding: 10px;
    z-index: 4;
}
#rideReport h3 
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}
#rideReport h4 
{
    font-family: inherit;
    font: bold 8pt;
    text-align: left;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}
#rideReport a:link
{
    text-decoration: none;
    color: white;
}
#rideReport a:visited
{
    text-decoration: none;
    color: white;
}
#rideReport a:hover 
{
    font-family: inherit;
  	text-decoration: none;
  	color: black;
}

#trailList
{
    font-family: inherit;
    position: relative;
    left: 65%; /*
    right: 25%;*/
    top: 34%;
    width: 375px;
    background: url(./thumb/RockPaper.jpg); /* transparent;   #fff*/
    border: #99ff00 1px solid; /* green */
    padding: 10px;
    font-size: 9pt;
    z-index: 3;
}
#trailList h3
{
    font-family: inherit;
    text-transform: uppercase;
    text-align: center;
    color: #99ff00;
    margin: 0; /* border-bottom = the underscore
       border-bottom variables
		none solid double grove ridge inset outset
		thin medium thick font-size: 10pt; */
    border-bottom: 1px inset #99ff00;
		font: bold 10pt;
}
#trailList a:link, a:visited {
	text-decoration: none; /*underline*/
	color: yellow;
	}
#trailList a:hover {/*, a:active*/
	text-decoration: underline;
	color: #06f;
	}

#OtherLink{
    font-family: inherit;
	  position: absolute;
    left: 15px;
    width: 160px;
    top: 500px;
    color: #99ff00;
    /*background: transparent; */
    background: url(./thumb/RockPaper.jpg);/* transparent;   #fff*/
    border:  #99ff00 1px solid; /* green */
    padding: 10px;
}
#OtherLink h3
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: #99ff00;
    margin: 0;
    border-bottom: 1px inset #99ff00; /*green ; */
}
#OtherLink a:link, a:visited {
    font-family: inherit;
  	text-decoration: none;
  	color: yellow;
	}
#OtherLink a:hover {/*, a:active*/
    font-family: inherit;
  	text-decoration: underline;
  	color: #06f;
	}

#mail
{
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: absolute; /* right: 10px; */
    left: 135px;
    top: 760px;
    color: yellow;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    width: 160px;
    text-align: center;
    text-indent: 0;
    z-index: 2;
    font-size: 9pt;
}
#mail a:link {
	color: yellow;
	}	
#mail a:hover {
	text-decoration: underline;
	color: Black;
	}

#Resource{
    font-family: inherit;
		background: gray;
		position: absolute;
    top: 600px;
    left: 15px;
    padding: 1px;
    width: 270px;
    color: white;
    border:  #99ff00 1px solid; /* green */
    padding: 10px;
}
#Resource a:link{
	color: yellow;
}
#Resource a:hover {
	text-decoration: underline;
	color: black;				/*#06f;*/
	}
#Resource h3
{
    font-family: inherit;
    font: bold 10pt;
    text-transform: uppercase;
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}

a.infoText{
    position:relative; /*this is the key*/
    z-index:24; background-color:gray;
    color:white;
    text-decoration:none}
a.infoText:hover{z-index:25;}
a.infoText span{display: none}
a.infoText:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em; left:1em; width:24em;
    border:1px solid #99ff00;
		background-color:#b2b2b2; color:black;
    text-align: center;
		text-decoration:none}

#Youtube
{
    font-family: inherit; /*position: relative; top: 0px; left: 3px;*/
    position: absolute; /* right: 10px; */
		background: gray;
    left: 15px;
    top: 800px;
    color: yellow;
    background: transparent; /* white #fff*/
    border: #99ff00 1px solid;
    padding: 5px;
    width: 270px;
    /*text-align: center;*/
    text-indent: 0;
    z-index: 2;
    font-size: 9pt;
}
#Youtube a:link {
	color: yellow;
	}	
#Youtube a:hover {
	text-decoration: underline;
	color: Black;
	}
#Youtube h3
{
    font-family: inherit;
    font: bold 10pt;
    /*text-transform: uppercase;*/
    text-align: center;
    color: white;
    margin: 0;
    border-bottom: 1px inset #99ff00;
}

a.NotesInfo{
    position:relative; /*this is the key*/
    z-index:24; background-color:gray;
    color:white;
    text-decoration:none}
a.NotesInfo:hover{z-index:25;}
a.NotesInfo span{display: none}
a.NotesInfo:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em; left:12em; width:24em;
    border:1px solid #99ff00;
		background-color:#b2b2b2; color:black;
    text-align: center;
		text-decoration:none}

a.LinkInfo{
    position:relative; /*this is the key*/
    z-index:24; background-color:gray;
    color:white;
    text-decoration:none}
a.LinkInfo:hover{z-index:25;}
a.LinkInfo span{display: none}
a.LinkInfo:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-2em; left:15em; width:24em;
    border:1px solid #99ff00;
		background-color:#b2b2b2; color:black;
    text-align: center;
		text-decoration:none}
}