/* Text */

body {
	display					: grid;
	max-width				: 1200px;
	grid-template-rows		: 150px 1fr 50px;
	grid-template-columns	: 200px 1fr;
	background-color  		: rgb(154,154,154);
	font-family 	  		: Arial;
	font-size 		  		: 14px;
	color 			  		: rgb(51,51,51);
	margin					: 0 auto;
}

header {
	display					: grid;
	grid-column				: 1 / 3;
	grid-row				: 1 / 2;
	grid-template-rows		: 150px;
	grid-template-columns	: 200px 1fr;
	align-items				: end;
	justify-items			: center;
	background-color 		: rgb(30,30,30);
	background-image		: url("../assets/images/extraElement.gif");
}

nav {
	display					: grid;
	grid-column				: 1 / 2;
	grid-row				: 1 / 2;
	grid-gap				: 20px;	
	align-content			: end;
	justify-content			: center;
	margin-bottom			: 20px;
}

aside {
	display					: grid;
	grid-column				: 1 / 2;
	grid-row				: 2 / 3;
	grid-gap				: 5px;	
	align-content			: start;
	justify-content			: center;
	background		  		: rgb(0,0,48);
	padding-top				: 10px;
	padding-bottom			: 10px;
}

article {
	display					: grid;
	grid-column				: 2 / 3;
	grid-row				: 2 / 3;
	align-content			: start;
/*	justify-content			: start;	*/
	background		  		: rgb(77,77,77);
}

privacy {
	display					: grid;
	grid-column				: 1 / 2;
	grid-row				: 3 / 4;
	align-items				: center;
	justify-content			: center;
	background		  		: rgb(250,250,250);
}

footer {
	display					: grid;
	grid-column				: 2 / 3;
	grid-row				: 3 / 4;
	align-items				: center;
	justify-content			: end;
	background		  		: rgb(250,250,250);
	padding-right			: 20px;
}


h1 {
	font-family			: Georgia,               Palatino,               "Times New Roman",               Times,               Serif;
	font-weight 		: lighter;
	font-size 			: 28px;
	color 				: rgb(255,255,255);
	margin-left			: 20px;
	margin-bottom		: 10px;
}

h2 {
	font-family			: Georgia,               Palatino,               "Times New Roman",               Times,               Serif;
	font-weight 		: lighter;
	font-size 			: 24px;
	color 				: rgb(255,255,255);
	margin-left			: 20px;
	margin-bottom		: 10px;
}

h3 {
	font-family			: Georgia,               Palatino,               "Times New Roman",               Times,               Serif;
	font-weight 		: lighter;
	font-size 			: 22px;
	color				: rgb(255,255,255);
	margin-left			: 20px;
	margin-bottom		: 0px;
}

h4 {
	font-family			: Georgia,               Palatino,               "Times New Roman",               Times,               Serif;
	font-weight 		: lighter;
	font-size 			: 18px;
	color				: rgb(255,255,255);
	margin-left			: 20px;
	margin-bottom		: 0px;
}


p {
	font-family			: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 			: 14px;
	color 				: rgb(51,51,51);
	line-height 		: 1.5em;
}



.myBanner {
	display				: table;
	background-image	: url("../assets/images/banner.jpg");
	background-repeat	: no-repeat;
	background-position	: bottom;
	width				: 1000px;
	height				: 100px;
}

.myBanner p {
	display				: table-cell;
	font-family			: Georgia	Arial;
	font-size			: 28pt;
	color				: rgb(51,51,51);
	vertical-align		: middle;
	text-align			: center;
}



.myButton {
	display				: table;
	height				: 26px;
	width				: 136px;
	background			: linear-gradient(to bottom, #ededed 5%, #999999 100%);
	background-color	: #ededed;
	border				: 1px solid #ffffff;
	border-radius		: 5px;
	box-shadow			: 2px 3px 0px 0px #000000;
	cursor				: pointer;
}

.myButton a {
	display				: table-cell;
	font-family			: Helvetica;
	font-weight			: bold;
	font-size			: 10pt;
	color				: rgb(0,0,0);
	text-decoration		: none;
	vertical-align		: middle;
	text-align			: center;
}

.myButton:hover {
	background			: linear-gradient(to bottom, #999999 5%, #ededed 100%);
	background-color	: #999999;
}

.myButton:hover a {
	display				: table-cell;
	font-family			: Helvetica;
	font-weight			: bold;
	font-size			: 10pt;
	color				: rgb(255,255,255);
	text-decoration		: none;
	vertical-align		: middle;
	text-align			: center;
}

.myButton:active {
	position			: relative;
	top					: 1px;
	background			: linear-gradient(to bottom, #999999 5%, #ededed 100%);
	background-color	: #999999;
}

.myButton:active a {
	display				: table-cell;
	font-family			: Helvetica;
	font-weight			: bold;
	font-size			: 10pt;
	color				: rgb(255,255,255);
	text-decoration		: none;
	vertical-align		: middle;
	text-align			: center;
}


.myButtonActive {
	display				: table;
	height				: 26px;
	width				: 136px;
	background			: linear-gradient(to bottom, #999999 5%, #666666 100%);
	background-color	: #999999;
	border				: 1px solid #ffffff;
	border-radius		: 5px;
	box-shadow			: 2px 3px 0px 0px #000000;
	cursor				: pointer;
}

.myButtonActive a {
	display				: table-cell;
	font-family			: Helvetica;
	font-weight			: bold;
	font-size			: 10pt;
	color				: rgb(255,255,255);
	text-decoration		: none;
	vertical-align		: middle;
	text-align			: center;
}



.myToolTip {
	display				: inline-block;
	position			: relative;
	border-bottom		: 1px dotted black;
	font-family			: Arial;
	font-size			: 10pt;
}

.myToolTip .myToolTipText {
	visibility			: hidden;
	min-width			: 100px;
	max-width			: 300px;
	white-space			: nowrap;
	background-color	: #f2f2f2;
	color				: #000000;
	top					: -5px;
	left				: 105%;
	text-align			: center;
	border-radius		: 3px;
	padding				: 9px;

	/* Position the tooltip */
	position			: absolute;
	z-index				: 1;
}

.myToolTip .myToolTipText::after {
  position				: absolute;
  top					: 50%;
  right					: 100%; /* To the left of the tooltip */
  border-width			: 10px;
  border-style			: solid;
  border-color			: transparent #f2f2f2 transparent transparent;
  margin-top			: -5px;
  content				: " ";
}

.myToolTip:hover .myToolTipText {
	visibility			: visible;
}



/* YEAR */
.imgYear {
	background-color	: #7F7F7F;
	border				: 5px solid; 
	border-color		: #aaaaaa #666666 #666666 #aaaaaa; 
	vertical-align		: middle; 
	text-align			: center;
	margin				: 0 auto;
	margin-top 			: 10px;
	margin-bottom		: 10px;
}

.imgYearThumb {
	border				: 1px solid; 
	border-color		: #FFFFFF;
	vertical-align		: middle; 
	text-align			: center;
}

.myYearRouteText {
	font-family			: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 			: 18px;
	color				: rgb(255,255,255);
	line-height 		: 1.5em;
	margin-left			: 20px;
	margin-right		: 20px;
	margin-top			: 30px;
	margin-bottom		: 20px;
}



/* DAY - Route and Info */
.myDayRoute {
	display					: grid;
	max-width				: 960px;
	grid-template-rows		: 50px 50px 50px;
	grid-template-columns	: 220px 1fr;
	border-bottom			: 2px solid;
	border-color			: rgb(255,255,255);
	margin-left				: 20px;
	margin-right			: 20px;
	padding-bottom			: 10px;
}

.imgDayRoute {
	grid-column				: 1 / 2;
	grid-row				: 2 / 3;
	align-self 				: center;
	justify-self 			: center;
	background-color		: #7F7F7F;
	border					: 5px solid; 
	border-color			: #aaaaaa #666666 #666666 #aaaaaa; 
}

.imgDayRouteThumb {
	border					: 1px solid; 
	border-color			: #FFFFFF;
	vertical-align			: middle; 
	text-align				: center;
}


.myDayInfo {
	display					: grid;
	grid-column				: 2 / 3;
	grid-row				: 1 / 3;
	align-content			: start;
	justify-content			: start;
}

.myDayInfo p {
	font-family				: Georgia,               Palatino,               "Times New Roman",               Times,               Serif;
	font-weight 			: lighter;
	font-size 				: 18px;
	color					: rgb(255,255,255);
	margin-bottom			: 0px;
	padding-left			: 30px;
}



/* DAY - Top 5 */
.myDayTop5 {
	display					: grid;
	max-width				: 960px;
	grid-template-rows		: 150px;
	grid-template-columns	: 20% 20% 20% 20% 20%;
	border-bottom			: 2px solid;
	border-color			: rgb(255,255,255);
	margin-left				: 20px;
	margin-right			: 20px;
	padding-bottom			: 10px;
}

.imgDayTop5 {
	align-self 				: center;
	justify-self 			: center;
	background-color		: #7F7F7F;
	border					: 5px solid; 
	border-color			: #aaaaaa #666666 #666666 #aaaaaa; 
}

.imgDayTop5Thumb {
	border					: 1px solid; 
	border-color			: #FFFFFF;
	vertical-align			: middle; 
	text-align				: center;
}



/* DAY - Text */
.myDayTextBox {
	margin-left				: 20px;
	margin-right			: 20px;
	margin-top				: 20px;
	margin-bottom			: 20px;
}

.myDayText {
	font-family				: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 				: 18px;
	color					: rgb(255,255,255);
	line-height 			: 1.5em;
}



/* Privacy - Text */
.myPrivacyText p {
	font-family				: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 				: 12px;
	color					: rgb(255,255,255);
	line-height 			: 1.5em;
	padding-left			: 20px;
	padding-right			: 20px;
}

.myPrivacyText a {
	font-family				: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 				: 12px;
	color					: rgb(255,255,255);
	line-height 			: 1.5em;
	padding-left			: 20px;
	padding-right			: 20px;
}

.myPrivacyText ul {
	font-family			: Arial,              Helvetica,              Geneva,              Sans-serif;
	font-size 			: 12px;
	type				: circle;
	color 				: rgb(255,255,255);
	line-height 		: 1.5em;
}