/* =====================================================
   TECHINVESTMENT.COM Site CSS
   Version: 15
   Bootstrap: 3.x compatible, which is VERY old now!

   Merged 31 Jul 2026: this file now contains everything
   that used to live in the separate navbar.css (now
   deleted) plus the ticker/marquee styling used on the
   homepage. navbar.css should be removed from the server
   and from the <link> tags in top_openhead_inc.php.

===================================================== */

/* =====================================================
   TYPE SYSTEM
   Change the font stack here — nowhere else.
===================================================== */

:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

p {
  font-family: var(--font-body);
  font-size: 1.45rem;    
  line-height: 1.2;
  margin: 0 0 0.2em;
}

/* Headings share one font, sized down the scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Special-case p modifiers — stack freely, e.g. class="p-bold p-small" */

.p-bold { 
  font-weight: 700; 
}

.p-small {
  font-size: 0.875rem;
}  

.p-large { 
  font-size: 2.50rem; 
  font-weight: 400px;
}  

.p-center {
  text-align: center; 
}

.div-centered {
  text-align: center;
}

/* Main navbar container */
.topnav {
    /*width: 80%;*/
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #111;
    padding: 10px 20px;
    position: relative;
    z-index: 9999;
    overflow: visible;
}

/* Brand / website title */
.brand {
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover {
    /*color: #00bfff;*/
    color: SteelBlue;
}

/* Dropdown container */
.dropdown {
    position: relative;
    font-size: 22px;
    overflow: visible;
}

/* Dropdown button */
.dropbtn {
    background: transparent;
    color: white;
    font-size: 2.5rem;
    border: none;
    cursor: pointer;

    padding: 5px 10px;
}

/* Dropdown menu box */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    /*min-width: 220px;*/
    min-width: 260px;
    background-color: whitesmoke;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    overflow: hidden;
    color: gray;
    z-index: 99999;
}


/* Dropdown links */
.dropdown-content a {
    display: block;
    color: whitesmoke;
    padding: 10px 10px 10px 20px;
    text-decoration: none;
    font-size: 2rem;
}


/* Dropdown link hover */
.dropdown-content a:hover {
    /*background-color: MediumOrchid;*/
    background-color: lavender;
    /*color: #00bfff;*/
    color: black;
}

/* Show dropdown */
.dropdown:hover .dropdown-content {
    display: block;
}

/* =====================================================
   Homepage ticker / marquee
   Replaces the old malformed inline style on the
   <marquee> element in index.php. Provides the outline
   effect the old (undefined) "outlined" class was meant
   to give, using text-shadow rather than a missing class.
===================================================== */
.ticker-marquee {
    background-color: white;
    width: 900px;
    height: 50px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.7rem;
    font-weight: 300;
    color: #000;
    /* draws the stroke behind the fill, standards-track equivalent */
    /*-webkit-text-stroke: 1px #000;*/
    /* thin, subtle — just crisps up the edges */
    -webkit-text-stroke: 0.5px #000; 
    paint-order: stroke fill;  
    padding-top: 10px;
    padding-bottom: 0px;
}


/* Mobile adjustments
   NOTE: kept at the end of the file on purpose, so these
   rules correctly override the base rules above at narrow
   viewports (previously this block lived in bunting.css
   while an un-scoped .topnav rule in navbar.css loaded
   after it and silently cancelled the padding override —
   that's fixed now that there's only one file). */
@media screen and (max-width: 600px) {
    .topnav {
        padding: 10px;
    }

    .brand {
        font-size: 1.1rem;
    }

    .dropdown-content {
        min-width: 200px;
    }
}

/* =====================================================
   Moved from top_openhead_inc.php ("SITE SPECIFIC STYLE")
   31 Jul 2026. Not found in use in about.php, index.php,
   navbar_inc.php, or top_closehead_block_inc.php — keep
   an eye out on the other pages before assuming these are
   safe to delete outright.
===================================================== */
.center {
    margin: auto;
    width: 90%;
}
.centered {
  text-align: center;
  padding: 0px;
}
img.img_centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.blurable:hover {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}

div.ex1 {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

/*Not in use yet but can be applied if desired.*/
.centered-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

/* MOVED FROM ABOUT.PHP on 31 Jul 2026 */

/*-- PAGE-SPECIFIC STYLES FROM ABOUT.PHP */

div.ex0 {
  align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width:800px;
  margin: auto;
}

div.ex1 {
  align: center;
  display: block;
  width: 100%;
  max-width:800px;
  margin: auto;
  height: 60%;
}

div.ex700 {
  max-width:700px;
  margin: auto;
  position:relative;
}
div.ex800 {
  max-width:800px;
  margin: auto;
  position:relative;
}

div.pie {
  max-width:600px;
    min-height: 380px;

  margin: auto;
  position:relative;
}

div.ex2 {
  max-width:600px;
  max-height:400px;
  margin: auto;
  align: left;
}
div.ex2c {
  max-width:600px;
  max-height:400px;
  margin: auto;
  align: center;
}

div.ex3 {
  max-width:400px;
  max-height:400px;
  marginwidth:50px;
  align: center;
  valign: middle;
}

div.ex3b {
  position: relative;
  max-width:800px;
  margin: auto;
  top: -10em;
}

.column {
  float: left;
  width: 40%;
}

.h1 {align: left;}
.h2 {align: left;}
.h3 {align: left;}
.h4 {align: left;}
.h5 {align: left;}

/* unvisited link */
a:link {
  color: DodgerBlue;
}

/* visited link */
a:visited {
  color: DodgerBlue;
}

/* mouse over link */
a:hover {
  color: crimson;
}

/* selected link */
a:active {
  color: crimson;
}

/* Brand should stay white regardless of link state */
a.brand:link,
a.brand:visited {
  color: #ffffff;
}

.centered {
  text-align: center;
  padding: 0px;
 }

.centerimage {
  align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:800px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;

}

.containerb {
  font-family: Arial;
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.parallax {
  background-image: url('/images/investing.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
  
  min-height: 400px;
  min-width: 800px;
}

* {
  box-sizing: border-box;
}

/* Create two unequal columns that float next to each other */
.column {
  float: left;
  padding: 5px;
  height: 400px; /* Should be removed. Only for demonstration */
}

.left {
  width: 50%;
}

.right {
  width: 50%;
}

.indent50 {
  margin-left: 50px;
  margin-right: 50px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}