/* style sheet for SyMAP documentation */

/* side navigation */
.sidenav {
  width: 180px;			/* same as main margin-left  */
  height: 100%;
  position: fixed;	/* does not scroll */
  z-index: 1; top: 0; left: 0; overflow-x: hidden;
  background-color:#f1f1f1;
}
.sidenav a {
  padding: 8px 6px 12px 12px; /* top, right, bottom, left */
  display: block;
  font-size:16px; color:#6666CC;text-decoration: none; background-color: transparent;
}
.sidenav a:hover {
 color: #00008B; 
}
.sidetit {font-family: Helvetica, sans-serif; font-size: 18px; color:darkblue;font-weight: 900; }

.rightSide {
  overflow: auto;
  margin-left: 172px; /* Almost same as sidenav width - border leaves gaps if same */
  width: 800px;
  padding-left: 10px; padding-right; 5px;
  border-style: solid; border-width: 4px; border-color: #f1f1f1;
  top: 0;
}
@media screen and (max-width: 920px;) { /* on smallest screens, hide when need scroll bar to see left side */
  .rightSide {margin-left: 0px;}
  .sidenav {width: 0px;}
  .sidenav a {font-size: 0px;}
}

/* right side top navigation */
.topnav {
  height: 65px;		/* same as sidenav padding-top */
  background-color: #666666;
  top: 0; /* position: fixed; will always see top, but side links are wrong */
}
.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 5px 5px 0px 0px; /* top, right, bottom, left */
  font-size: 14px; font-family:verdana; color:white; text-decoration: none;
}
.topnav a:hover {
  background: #ddd; color: black;
}

/* right side bulk of the text */
.main {
 font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;
}
.main a {
  color:#6666CC;text-decoration: none; background-color: transparent;
}
.main a:hover {
 color: #00008B; 
}
.trailer {
	background-color:#DDDDDD;
	text-align: center; padding: 0; font-family: Verdana, Arial; font-size: 14px; 
}
a.ext {font-weight: bold;} /* class for external html */

/* <span class="ttp">xxxxx</span> */
.ttp  {font-family: Arial,    monospace; font-size: 14px; font-weight: 600; color: #556B2F; }
.ttb  {font-family: SanSerif, monospace; font-size: 14px; font-weight: 600; color: #454545;}
.ttl  {font-family: Serif,    monospace; font-size: 14px; font-weight: 600; color: DarkSlateGrey;}
.ttlb {font-family: Serif,    monospace; font-size: 16px; font-weight: 600; color: DarkSlateGrey;}
.ttx  {font-family: courier,  monospace; font-size: 14px; font-weight: 500; color: DarkSlateGrey;}
.ttt  {font-family: courier, monospace; font-size: 13px;}
.small {font-size: 10px;} /* <ol class="small"> */
.green {color : Green;}   /* <span style="color: Green"> </span> */
.blue {color : Blue;}
.red {color : Red;}

pre  {font-size: 13px; margin-top: 0;padding: 0px 12px 0px 12px;}  /* top, right, bottom, left */
p    {margin-bottom: 0;}

ul   {margin-top: 0; } 				/* can use <ul style="margin-bottom: 0.25rem"> works better */
.tight li {margin-bottom: 0.25rem;} /* <ul class="tight"> */
.left  li {padding-left: 30px;} 	/* browsers use 40px by default */

.tz {width: 90%; background-color:#f1f1f1; margin-left: auto; margin-right: auto;} /* vertical contents table; <table class="tz"> */
    
table {border-collapse: collapse}   /* all tables have collapse border */  
.tx td {border: none; padding: 5px; }				    /* table without border */
.ty td {border: 1px solid black; padding: 4px; border-spacing: 1px; } /* table with border */
.tq td {padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px;} /* reduce spacing */

.center {margin-left: auto; margin-right: auto;} /* or <td style="text-align: center">, also <p>,<div>; <table class="center">*/
.colrt  {text-align: right;}
.coltop {vertical-align: text-top;}
.colnp  {white-space: nowrap;}

.hanging-indent {
  text-indent: -2em; /* Indent all lines by 2em first */
  margin-left: 2em;  /* Then pull the first line back by the same amount */
  padding-left: 1em; /* Add margin to the container so the text is not flush with the edge */
}