/* Style for general use in Optimum-Route.com   */

/* 

In general, if you use margin, use on the bottom and not the top.
It works either way, but you need to be consistent.
Otherewise things with margin on the top have too much space with those that use bottom margin.

 */

/* These were moved here from gray-theme.css  */

*{padding:0;margin:0;}

body	{
	background:#FFF;
	color:#444;
	font:105% Verdana,Arial,sans-serif;
	text-align:center;
	}

/* Default paragraph for everything */
p {
    margin: 0 0 0.8rem 0; /* Bottom margin only, using rem for scalability */
    line-height: 1.5; /* Consistent with margin for vertical rhythm */
}

a	{
	color:#549FC9;
	text-decoration:underline;
	}

a:visited{
	color:#000;
	text-decoration:underline;
	}
	
a:hover{
	color:#8DC919;
	text-decoration:underline;
	}

h1 {
	font: normal 1.95em "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #8B0000;
	margin-bottom: 0.5em;
}

	
h2	{
	font:bold 2.0em Arial,sans-serif;color:#8DC919;
	letter-spacing:-.04em;
	margin-bottom: 0.4em;

	}


h3	{
	font:bold 1.8em Arial,sans-serif;
	color:#549FC9;
	letter-spacing:-.04em;
	margin-bottom: 0.4em;
	}

h4	{
	font:normal 1.6em 'Lucida Grande',Arial,Helvetica,sans-serif;
	margin-bottom: 0.3em;
	}
	

/* Media query for screens smaller than 500px */
/* Reduce font size a little. */
@media screen and (max-width: 500px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.7em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.5em; }
}

/* ---------------- gray-theme.css ends ----------------------------- */


/* Dropdown menu done in CSS */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar */
.navbar {
	width:850px;
	overflow: hidden;
	background-color: #333;
	margin:0 auto;
	text-align:left;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  /* background-color: inherit; */
  background-color: #333;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* Media query for screens up to 850px */
@media (max-width: 850px) {
  .navbar {
    width: 100% ;
    background-color: #333 ;
  }
  .navbar a, .dropdown .dropbtn {
    font-size: 14px ;
    padding: 10px 12px ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
    overflow: hidden ;
  }
  .dropdown-content {
    min-width: 100px ;
    position: absolute ;
    left: auto ; /* Align dynamically */
    transform: translateX(0) ; /* Align with dropdown parent */
    background-color: #f9f9f9 ;
  }
  .dropdown-content a {
    padding: 8px 10px ;
    white-space: nowrap ;
    text-overflow: ellipsis ;
    overflow: hidden ;
  }
}

/* Media query for very small screens */
@media (max-width: 600px) {
  .navbar {
    background-color: #333 ;
    overflow: hidden ;
  }
  .navbar a, .dropdown {
    float: left ;
    display: inline-block ;
    text-align: center ;
  }
  .navbar a, .dropdown .dropbtn {
    font-size: 12px ;
    padding: 8px 10px ;
    box-sizing: border-box ;
  }
  .dropdown-content {
    min-width: 80px ;
    position: absolute ;
    left: auto ; /* Align dynamically */
    transform: translateX(0) ; /* Align with dropdown parent */
    background-color: #f9f9f9 ;
  }
  .dropdown-content a {
    float: none ;
    display: block ;
    width: 100% ;
    padding: 6px 8px ;
    text-align: left ;
  }
}


/* ======== Major page layout boxes ============== */


/* This is the main division for the <BODY>        */
/*  container is part of the body content on many pages */
/* <main> is a reserved name for just this kind of content and supports SEO. */
main {
    width: 850px;
    margin: 0 auto;
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 50px;
    font-size: 1.0rem;
    box-sizing: border-box;
    border: 0px solid #000;
}
/* Scales down to fit device screen as needed */
@media (max-width: 850px) {
    main {
        width: calc(100% - 15px); /* Fluid width for tablets and smaller */
    }
}

@media (max-width: 500px) {
    main {
        font-size: 0.9rem; /* Smaller font for phones */
    }
}




/* For FAQ, Tutorial, and where grouping of topics with the graphic is desired. */
/* Use <article> for SEO and for self contained blocks of information */
article {
    padding: 0 0 20px 20px;
    margin-top: 0em;
    margin-bottom: 1.5em;
    background: url(/images/post_bottom.gif) 0 100% no-repeat;
    float: left;
}
article h2 {
    margin-bottom: 10px;
}

@media screen and (max-width: 500px) {
    article img {
        width: 80%;
        max-width: 100%;
        height: auto;
    }
}


/* This is depreciated.  Use <article> instead. */
.topic	{
    padding: 0 0 20px 20px;
    margin-top: 0em;
    margin-bottom: 1.5em;
    background: url(/images/post_bottom.gif) 0 100% no-repeat;
    float: left;
	}
.topic h2{margin-bottom:10px;}

@media screen and (max-width: 500px) {
    .topic img {
	   width: 80%;
	   max-width: 100%;
	   height: auto;
    }
}


/* A general purpose division for centering anything you put in it. */
.body_centered {
  display: flex;
  flex-direction: column; /* Stack all children vertically */
  justify-content: center; /* Center children vertically */
  align-items: center; /* Center children horizontally */
  width: 100%; /* Full width of parent container */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* Apply centering and width constraints to all direct children */
/* ie. whatever else (p,h1,h2,h3,etc.) is inside gets centered. */
.body_centered > * {
  text-align: center; /* Center text content for all children */
}


	
/* ======== Footer Container ============== */

.footer {
	clear:left;
	width:850px;
	margin:20px auto;
	text-align:left;
	font-size: 0.75em;
}

@media (max-width: 850px) {
	.footer {
		clear:left;
		width:100%;
		margin:10px auto;
		text-align:left;
		font-size: 0.7rem;
	}
}

/* General Purpose Green Button */
/* i.e. Good for a submit button. */
.buttonGreen {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}



/* ===== Picture in a box with a caption ====== */
/* Use like this or use from html->clippings */
/* 568 is max width for img or it will overflow "entry" container */
/* 
<div class="pixbox">
	<img src="xxx.png" alt="" width="568">
	This is a caption.
</div>
<p style="clear:left">Clears the float.</p>
 */

.pixbox{
	float: left;
	margin: 5px 0px;
	border: 1px solid gray;
	padding: .5em;
	color: #000;
	background-color: #ddd;
	text-align: center;
	font-size: 75%;
	font-style: italic;
	}
	
.pixbox img {
	display: block;
	margin: 0 auto;
	border: 1px solid black;
	padding: 0;
	}

/* ===== Picture in upper left with text flowing to the right. ======*/
/* Sample usage:
<div class="pixleft">
	<img src="../images/Flying008.jpg" width="250"  alt="">
	<p>Text flowing to the right of image and then below it if there is enough text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<p style="clear:left">After clear:left, this text always begins below the image.</p>
 */
.pixleft {
	width:100%;
}

.pixleft img {
	float: left;
	margin: 0 20px 10px 0;
}

/* ====== Picture in upper right with text flowing to the left. ====== */
/* Sample usage:
<div class="pixright">
	<img src="../images/Flying008.jpg" width="250"  alt="">
	<p>Text flowing to the left of image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<p style="clear:right">After clear:right, this text always begins below the image.</p>
 */
.pixright {
	width:100%;
}

.pixright img {
	float: right;
	margin: 0 0px 10px 10px;
}







/* ======== Partially used on Earhart page. ============== */

img.left{margin:0 15px 5px 0;float:left;}
img.right{margin:0 0 5px 15px;float:right;}
img.center{margin:0 auto 5px auto;display:block;}

/* Removes border around click-on link type image */
a img{border:none !important;}







/* 


ALL BELOW HERE IS DEPRECIATED CODE.
THESE ARE THE DIVISIONS FOR PAGES WITH THE SIDEBAR LAYOUT WHICH IS NO LONGER USED.
THEY REMAIN HERE SO AS NOT TO BREAK SOME THINGS THAT HAVE NOT BEEN UPDATED.

Page hierarchy is: container->content->post->entry


 */

#content{width:600px;padding-right:40px;float:left;}

/*                                      */
/* class="post"                         */
/*                                      */
/* post is the container for entry      */
/* class="xxx" Ok to use multiple times on a page as needed */
.post	{
	width:580px;
	padding:0 0 20px 20px;
	margin-top:1.5em;
	margin-bottom:1.5em;
	background: url(/images/post_bottom.gif) 0 100% no-repeat;
	float:left;
	}
.post h2{margin-bottom:10px;}

@media (max-width: 850px) {
    #post {
        width: calc(100% - 15px); /* Fluid width for tablets and smaller */
        margin: 0 auto;
    }
}

/* "entry" is the lowest level block on the main body where most content takes place. */
.entry{
	font-size:0.9em;
	line-height:1.5em;
	}
.entry p{margin-bottom:15px; }
.entry ul{list-style-image: url(/images/bullet.gif);margin:0 0 12px 50px;}
.entry ol{margin:0 0 12px 50px;}
.entry li{0.5em 0.5em;padding-left:20px;margin-bottom:3px;}
.entry h3{margin-top:15px;margin-bottom:5px;}
.entry h4{margin-top:20px;margin-bottom:10px;}


/* Used for the first block of paragraphs at the top of some pages. */
/* Text is a little larger and easier to read.  */
.firstParagraph{
	background:#FFF;
	margin-top: 0px;
	margin-bottom: 30px;

}

.firstParagraph p{
	color:#555;
	font:1.0em Verdana,Arial,sans-serif;
	margin-bottom: 10px;
	line-height:1.4em;


}
.firstParagraph li{
	color:#555;
	font:1.0em Verdana,Arial,sans-serif;
	margin-bottom: 10px;

}





/* ======== Sidebar Container ============== */
#sidebar{
	width:210px;
	height:100%;
	float:left; 
	font-size:.8em}

/* Make sidebar go away for mobile screen sizes */
@media (max-width: 850px) {
    #sidebar {
        display: none;
    }
}

/* For flags in the sidebar */
.flag {
	float:left;
	filter:alpha(opacity=50);
	margin: 0px 0px 10px 10px;
	padding: 0px;
	width: 80px;
	height: 50px;
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}