/* =============================================
   Ovec Systems Ltd - Modern Responsive CSS
   ============================================= */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --primary:     #000099;
  --nav-bg:      #BDC4E0;
  --nav-hover:   #A7AECA;
  --nav-width:   210px;
  --max-width:   960px;
  --font-main:   'Trebuchet MS', Arial, sans-serif;
  --font-nav:    Verdana, Arial, sans-serif;
  --banner-w:    880px;
  --banner-h:    299px;
}

body {
  margin: 0;
  padding: 0 10px;
  font-family: var(--font-main);
  font-size: 14px;
  color: #000;
  background: #fff;
}

#thePage {
  max-width: var(--max-width);
  margin: 0 auto;
}

a              { color: var(--primary); text-decoration: underline; }
a:visited      { color: var(--primary); }
a:hover        { color: #f00; }
li             { text-align: left; }
form           { margin: 0; padding: 0; }
img            { max-width: 100%; height: auto; border: 0; }

/* --- Banner / Slideshow --- */
#fp-banner {
  overflow: hidden;
  width: 100%;
}

#fp-banner-background {
  width: var(--banner-w);
  height: var(--banner-h);
  background: url(/images/banner-bg.jpg) 0 0 no-repeat;
  background-size: var(--banner-w) var(--banner-h);
  position: relative;
  transform-origin: top left;
}

.fp-banner-slide {
  width:  838px;
  height: 122px;
  position: absolute;
  top:  176px;
  left: 22px;
  display: none;
  background-size: 838px 122px;
  background-repeat: no-repeat;
}

.fp-banner-slide.active { display: block; }

#fp-banner-slides-1 { background-image: url(/images/slide1.jpg); }
#fp-banner-slides-2 { background-image: url(/images/slide2.jpg); }
#fp-banner-slides-3 { background-image: url(/images/slide3.jpg); }
#fp-banner-slides-4 { background-image: url(/images/slide4.jpg); }
#fp-banner-slides-5 { background-image: url(/images/slide5.jpg); }
#fp-banner-slides-6 { background-image: url(/images/slide6.jpg); }
#fp-banner-slides-7 { background-image: url(/images/slide7.jpg); }

#fp-links {
  position: absolute;
  left: 30px;
  top:  180px;
  z-index: 100;
}
#fp-links ul         { margin: 0; list-style: none; padding: 0; }
#fp-links li         { float: left; margin-right: 8px; }
#fp-links a          { display: block; height: 110px; width: 110px; }
#fp-links a span     { display: none; }

/* --- Mobile nav toggle --- */
#nav-toggle {
  display: none;
  width: 100%;
  padding: 10px 15px;
  background: var(--nav-bg);
  border: none;
  border-bottom: 1px solid #DADEE0;
  color: var(--primary);
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

#nav-toggle:hover { background: var(--nav-hover); color: #fff; }

/* --- Page layout --- */
#site-layout {
  display: flex;
  align-items: flex-start;
}

/* --- Left Nav --- */
#leftnavpanel {
  width: var(--nav-width);
  min-width: var(--nav-width);
  flex-shrink: 0;
  background: #fff;
  padding: 10px 0 0 0;
}

.leftNavCatBlock { padding: 0 0 5px 0; }

.leftNavCatContent {
  color: #000066;
  font-family: var(--font-nav);
  font-size: 11px;
  text-align: center;
  padding: 0 0 0 30px;
}

.leftNavCatContent a.nav {
  display: block;
  color: var(--primary);
  background: var(--nav-bg);
  font-family: var(--font-main);
  font-size: 12px;
  text-decoration: none;
  text-align: left;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #DADEE0;
  padding: 6px 1em;
  margin: 0;
}

.leftNavCatContent a.nav:visited { color: var(--primary); }
.leftNavCatContent a.nav:hover   { color: #fff; background: var(--nav-hover); text-decoration: none; }

.leftNavCatFoot { height: 8px; }

.leftNavCatContent img { max-width: 160px; }

form.leftNav {
  color: #555;
  font-family: var(--font-nav);
  font-size: 11px;
  text-align: center;
  padding: 5px 2px 0;
}
form.leftNav input { font-family: Verdana; font-size: 11px; margin: 2px 0; width: 90%; }
form.leftNav input[type="submit"] { width: auto; cursor: pointer; }
form.leftNav .btn {
  color: #000066;
  background: #f7f7f7;
  font-family: var(--font-nav);
  font-size: 11px;
  padding: 2px 6px;
}

/* --- Main Content --- */
.maincontent {
  flex: 1;
  min-width: 0;
  color: var(--primary);
  background: #fff;
  font-family: var(--font-main);
  font-size: 14px;
  text-align: left;
  padding: 10px 15px;
}

.maincontent a         { color: var(--primary); text-decoration: underline; }
.maincontent a:visited { color: var(--primary); }
.maincontent a:hover   { color: #f00; }

#pageMainBody { padding-top: 1em; }

div#headline {
  color: var(--primary);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  margin: 10px 0 0;
}

div#subheadline {
  color: var(--primary);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

/* Content tables (preserve existing structure, make fluid) */
table.ovectable,
table.backgroundData,
#pageMainBody > table {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

#pageMainBody td {
  color: #000;
  background: #fff;
  font-family: var(--font-main);
  font-size: 14px;
  vertical-align: top;
  padding: 5px;
}

/* Image columns within content tables */
#pageMainBody td[width] { width: auto !important; }

/* Embedded video / maps */
iframe {
  max-width: 100%;
}

/* Alert containers */
div.alertContainer { text-align: center; }

div.erroralertmsge {
  width: 80%;
  color: red;
  border: 1px solid red;
  padding: 5px;
  margin: 1em auto;
  text-align: left;
}
div.erroralertheadline {
  color: #fff;
  background: red;
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
  margin-bottom: .5em;
}
div.successalertmsge {
  width: 80%;
  border: 1px solid #33CC33;
  padding: 5px;
  margin: 1em auto;
  text-align: left;
}
div.successalertheadline {
  color: #fff;
  background: #33CC33;
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
  margin-bottom: .5em;
}

/* Forms in main content */
form.mainForm {
  color: #666699;
  background: #fff;
  font-family: var(--font-nav);
  font-size: 11px;
  border: 1px solid #ccc;
  margin: 1em 0;
}
form.mainForm div.formTitle {
  color: #fff;
  background: #005ec4;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #bbb;
  padding: .25em 1em;
  margin: 2px;
}
form.mainForm div.formBody { padding: 1em; text-align: left; }
form.mainForm input.formBtn {
  color: #000066;
  background: #f7f7f7;
  border: 1px solid #ccc;
  font-size: 1em;
}

/* --- Footer --- */
footer#footerpanel {
  color: var(--primary);
  font-family: var(--font-main);
  font-size: 11px;
  text-align: center;
  padding: 20px 0.5em 10px;
  border-top: 2px solid var(--nav-bg);
  margin-top: 20px;
  clear: both;
}
footer#footerpanel a         { color: #33cc00; text-decoration: underline; }
footer#footerpanel a:visited { color: #33cc00; }
footer#footerpanel a:hover   { color: #f00; }

/* =======================================
   RESPONSIVE BREAKPOINTS
   ======================================= */

/* Tablet / small desktop */
@media (max-width: 880px) {
  /* Scale banner proportionally */
  #fp-banner-background {
    transform-origin: top left;
    /* JS handles scale() dynamically */
  }
}

/* Mobile */
@media (max-width: 700px) {
  body { padding: 0 4px; }

  #nav-toggle { display: block; }

  #site-layout { flex-direction: column; }

  #leftnavpanel {
    width: 100%;
    min-width: 0;
    display: none;
    padding: 0;
  }
  #leftnavpanel.open { display: block; }

  .leftNavCatContent { padding-left: 0; }

  .leftNavCatContent a.nav { padding: 10px 1em; font-size: 14px; }

  .maincontent { padding: 10px 6px; }

  /* Stack two-column image layouts */
  #pageMainBody td { display: block; width: 100% !important; }
  #pageMainBody tr { display: block; }
  #pageMainBody table { display: block; overflow-x: auto; }

  iframe { height: 220px; }
}