/*
	History:
		Feb. 2023 - ver. 2 - revised page layout and other design elements
		Mar. 2018 - orig. version
*/
/* page layout */
html { background-color: white; }
body { font-family: Verdana, sans-serif; font-size: 16px; background-color: white; width: 100%; margin: 0; color: black; }
.mobiletopmenu { background-color: white; padding: .6rem 2.5%; overflow: hidden; }
.navicon { margin: 0; text-align: right; }
.navicon a { text-decoration: none; color: black; font-weight: bold; transform: scale(1.25,1);  font-size: large; }
.navicon a:hover { color: #0066cc; }
.bannersecn { background: #fff; position: relative; padding: 0 2%;}
.bannersecn .skiplink { width: 0; height: 0; overflow: hidden; position: absolute; left: -1000px; color: #fff; }
.logo { max-width: 100px; line-height: 0; float: left; }
.bannertxt { padding: .5rem 0 .5rem 115px; }
.sitedesc { color: red; font-size: 1.3rem; font-weight: bold; }
.goog-te-combo { width:95%; }
#pgctr, footer { clear: both; border-image-source: url('images/iStock-483147081-bannerbg.jpg'); border-image-slice: 15% 0 0; border-image-width: auto; border-image-repeat: stretch; border-style: solid; border-width: 2px; border-color: black; position: relative; overflow: hidden; padding: 20px 2%; }
#moresoftware { padding: 0 2%; }
#moresoftware hr { margin-top: 0; } 
.menusecn { display: none; width: 90%; margin: auto; padding: .5rem; background-color: #f8f8f8; color: black; z-index: 10; }
.topmenu { margin: 1rem 2% .5rem; padding: 0; }
.topmenu li { list-style-type: none; margin-bottom: .2rem; }
.topmenu ul { margin: .3rem 0 1rem; padding: 0 0 0 .5rem; display: none; }
.topmenu a, .topmenu a:visited { display: block; text-decoration: none; color: navy; padding: .75rem 0; font-size: 14px; }
.topmenu a:hover { color: #ff0000; }
.topmenu ul a, .topmenu ul a:visited { color: black; }
h1 { color: #005897; font-size: 1.6rem; }
main { padding: 2.5rem 0 1rem; }
main input[type="text"], main textarea { width: 80%; }
main input[type="submit"] { cursor: pointer; border-radius: .3rem; border: .1rem navy solid; padding: .3rem 1rem; background-color: navy; color: white; text-align: center; font-size: 1rem; }
main input[type="submit"]:hover { background-color: white; color: #ff0000; text-decoration: underline; }
main h1:first-of-type { margin-top: 0; margin-bottom: 1.5rem;  }
main img { border: none; height: auto; width: 100%; }
main li { margin-bottom: .5rem; line-height: 1.3; }
main p { line-height: 1.4; }
main .stdtable input[type="text"], .stdtable textarea { width: 100%; }
footer { background: #fff; color: #000; margin: .5rem 0; clear: both; text-align: center; font-size: 14px; }
footer #credits a { color: #000; text-decoration: none; font-size: .7rem; }
footer #credits a:hover { color: #ff0000; text-decoration: underline; }
footer>div { margin: 1rem 2%; } 

/* decorations */
.back2top { font-size: .8rem; }
.back2top:before { background: url("images/uparrow.jpg") no-repeat; content: ""; width: 16px; height: 14px; float: left; margin-right: .3rem; margin-top: .2rem; }
.biggerspaceTB { margin: 4rem 0; }
.box2 { border: 1px solid gray; padding: 0 1rem .5rem; }
.box2 .fatprint { font-size: 1.1rem; }
.box2 .hilite4 { font-size: 1.2rem; }
.ctrfeature { width: 70%; margin: 2.5rem auto; border: 1px solid black; padding: 1.2rem 1rem .6rem; text-align: center; font-size: .95rem; }
.ctrfeature h2 { font-size: 1.4rem; }
.ctrfeature h2 a { text-decoration: none; }
.dontshowtousers { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
.eopcontact { text-align: center; line-height: 1.7; margin-bottom: 0; }
.errmsg { color: red; font-weight: bold; font-style: italic; }
.fatprint { font-size: 1.2rem; }
.fieldColor { color: #FF0000; font-weight: bold; }
.fineprint { font-size: .9rem; }
.finebold { font-size: .9rem; font-weight:bold; }
.formlabel, .formlabelr { width: 20%; color: #FF0000; font-weight: bold; padding-right: .3em; text-align: right; vertical-align: top; font-size: .95rem; }
.formlabel { color: black; }
.goLeft, .goRight { text-align: center; }
.hilite { color: #ff0000; font-weight: bold; font-size: 1.05rem; }
.hilite2 { color: black; font-weight: bold; }
.hilite3 { color: black; font-style: italic; }
.hilite4 { color: #ff0000; }
.hilite5 { color: navy; font-size: 1.2rem; }
.hilite6 { color: navy; font-weight: bold; }
.hilite7 { color: black; font-size: 1.2rem; }
.hilite8 { color: #ff0000; font-weight: bold; font-size: 1.3rem; font-style: italic; line-height: 1.3; text-align: center; }
a.hilite8:visited { color: #ff0000; }
.hilite9 { color: navy; font-size: 1.75rem; }
.hilite10 { text-align: center; font-weight: bold; color: #2f55a8; max-width: 750px; margin: auto; }
.hilite11 { text-align: center; color: navy; font-weight: bold; font-size: 1.2rem; width: 80%; margin: auto; }
.justbold { font-weight: bold; }
.lgprint { font-size: 1.5rem; }
.microprint { font-size: .8rem; }
.pgname { display: none; }
.putCenter { text-align: center; }
.putLeft { text-align: left; }
.putRight { text-align: right; }
.quotn { max-width: 650px; margin: 2rem auto 1rem; border: 1px solid gray; padding: 0 1rem .5rem; background-color: #eee; }
.rpttable { border: none; border-collapse: collapse; font-family: monospace; font-size: .9em; }
.rpttable td { border: 1px solid black; }
.rpttable td.general { text-align: left; padding-right: 4em; }
.rpttable td.numeric { text-align: right; padding-left: 4em; }
.scrollable { overflow-x: auto; white-space: nowrap; }
.scrollable img { margin-bottom: .2rem; }
.stdtable { border: none; border-collapse: separate; border-spacing: .8em; }
.unadorned { margin: 1rem 0; padding: 0; list-style-type: none; }
main .unadorned li { margin-bottom: .2rem; padding-left: 1rem; text-indent: -1rem; }
.xtrabanner { text-align: center; max-width: 80%; margin: 1rem auto; padding: 0 1.5rem; border: 2px gray dashed; position: relative; background-color: #efefef; }
blockquote {background-color: #eeeeee; padding: 1rem; font-size: 1rem; line-height: 1.4; font-family: 'Courier New', monospace; }
hr { width: 80%; margin: 2rem auto; background-color: #008001; color: #008001; height: .03rem; clear: both; }
iframe.ytvideo { max-width:560px; width: 90%; }
pre { margin-top: 0; font-size: .8rem; }

/* Phone Layout - landscape: >=640px */
@media (min-width: 640px) {
footer>div { text-align: left; margin: .5rem 2%; }
.bannertxt { padding: 2rem 0 0 115px; }
.goLeft { float: left; }
.goRight { float: right; }
iframe.ytvideo { width:560px; height:315px; }
main input[type="text"] { width: 50%; }
.sitedesc { font-size: 1.5rem; }
}

/* Tablet layout - portrait: >=768px */
@media (min-width: 768px) {
main input[type="text"] { width: 30%; }
main .stdtable input[type="text"], .stdtable textarea { width: 80%; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
hr { width: 75%; }
}

/* Tablet layout - landscape: >=1024px */
@media (min-width: 1024px) {
.mobiletopmenu { display: none; }
.menusecn { clear: both; display: block; margin: 0 1%; padding: 0; background: none; font-size: 14px; color: #000; width: 100%; }
#google_translate_element { float: left; width: 200px; margin-right: 0; }
.topmenu { list-style-type: none; margin: 0; padding: 0; display: flex; }
.topmenu li { margin-bottom: .5rem; position: relative; flex: 1 1 auto; }
.topmenu ul { margin: .3rem 0 .5rem; padding: 0 1rem; position: absolute; left: 0; top: 41px; z-index: 20; background-color: white; width: 200px; border: 1px solid navy; }
.topmenu li>ul ul { border-top:  1px solid navy; }
.topmenu li>ul { border-top: 3px solid navy; }
.topmenu li>ul::after { content: '\23F6'; position: absolute; top: -19px; left: .5rem; transform: scale(1.5,2); color: navy; }
.topmenu li>ul ul:after { content: ''; }
.topmenu ul ul { left: 216px; top: 0; }
.topmenu .collapsed, .topmenu .expanded { position: relative; bottom: .1rem; }
.topmenu ul .collapsed a::after, .topmenu ul .expanded a::after { transform: scale(1.3,1); display: inline-block; margin-left: 50px; }
.topmenu ul .collapsed a::after { content: "\23F5"; }
.topmenu ul .expanded a::after { content: "\23F4"; }
.topmenu ul li { margin-bottom: .25rem; }
.topmenu a { display: block; text-decoration: none; color: navy; }
.topmenu ul a { display: block; text-decoration: none; color: black; }
.topmenu a:hover { color: #ff0000; }
#pgctr, footer { padding: 2rem 3% 1rem; }
#moresoftware { padding: 0 2%; } 
hr { width: 80%; }
}

/* Desktop layout: >=1280px */															
@media (min-width: 1280px) {
#google_translate_element { margin-right: 3rem; }
.menusecn { margin: 0 2%; width: 90%; }
}





/* 4/11/2025 - RPL -  I started to add this  BOOK A DEMO  to all the satellite websites today and I noted that there is no styles4.css for the satellite sites there's only a styles2.css so I added the code there.   */ 
/* 3/28/2025 - RPL - today I asked Claude AI to add a banner header button on the right hand side of the banner and it is a blue oval button with "Book A Demo" in white letters inside of it and  */	
/* when clicked it goes to Tidycal to schedule a demo. I got the idea for this from the website breadboard.com at has the same blue oval button. */
/* so below is the code to create the  blue oval button  and the other code to call and display the button is in banner-menu-area.php */   	
/* so below is the start of this  blue oval button  section and it continues for about 30 lines.  */


/* Book a Demo Button Styles */
.demo-button {
  margin-left: auto;
  display: flex;
  align-items: center;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.book-demo-btn {
  background-color: #4e46e5 !important;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background-color 0.3s !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

.book-demo-btn:hover {
  background-color: #4338ca !important;
  text-decoration: none !important;
}

/* Make sure the banner has proper positioning */
.bannersecn {
  position: relative;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .demo-button {
    position: static;
    margin: 10px auto;
    transform: none;
  }
}


/* 3/28/2025 - RPL - this is the end of the  blue oval button  section  */