/*
 * M1 FIBER COMMUNICATIONS — Master Stylesheet
 * Last Updated: 11.15.2001
 * Best viewed in Internet Explorer 5.5+ at 800x600
 */

/* ============================================================
   RESET & BASE
   ============================================================ */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    background-color: #ECECEC;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23ECECEC'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23DDDDDD'/%3E%3C/svg%3E");
    line-height: 1.5;
}

a {
    color: #0000EE;
    text-decoration: underline;
}

a:visited {
    color: #551A8B;
}

a:hover {
    color: #CC0000;
}

a img {
    border: none;
}

hr {
    border: none;
    border-top: 1px solid #CCCCCC;
    margin: 15px 0;
    clear: both;
}

hr.dotted {
    border-top: 1px dotted #999999;
}

/* ============================================================
   LAYOUT
   ============================================================ */

#page {
    width: 780px;
    margin: 0 auto;
    background: #FFFFFF;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}

/* ============================================================
   TOP BAR — System Status
   ============================================================ */

#topbar {
    background: #003366;
    color: #FFFFFF;
    padding: 3px 10px;
    font-size: 10px;
    border-bottom: 1px solid #002244;
}

#topbar table {
    width: 100%;
}

#topbar td {
    color: #FFFFFF;
    font-size: 10px;
    vertical-align: middle;
}

#topbar a {
    color: #66CCFF;
    text-decoration: none;
}

#topbar a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00CC00;
    border: 1px solid #009900;
    margin-right: 4px;
    vertical-align: middle;
}

.status-dot.amber {
    background: #FFCC00;
    border-color: #CC9900;
}

.status-dot.red {
    background: #FF0000;
    border-color: #CC0000;
}

/* ============================================================
   HEADER
   ============================================================ */

#header {
    background: linear-gradient(180deg, #004488 0%, #003366 100%);
    padding: 15px 20px;
    border-bottom: 2px solid #002244;
}

#header table {
    width: 100%;
}

#header .logo-cell {
    vertical-align: middle;
}

.logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: -1px;
    text-shadow: 2px 2px 0 #001122;
    line-height: 1;
}

.logo .fiber {
    display: block;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 5px;
    color: #66CCFF;
    text-shadow: none;
    margin-top: 2px;
}

.logo .tag {
    display: block;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #99CCCC;
    text-shadow: none;
    margin-top: 1px;
    font-style: italic;
}

#header .phone-cell {
    text-align: right;
    vertical-align: middle;
}

.header-phone {
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

.header-phone .label {
    display: block;
    font-size: 9px;
    font-weight: normal;
    color: #99CCCC;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* ============================================================
   NAVIGATION — Tab Bar
   ============================================================ */

#navbar {
    background: #002244;
    padding: 0 10px;
    border-bottom: 1px solid #001122;
}

#navbar table {
    width: 100%;
}

#navbar td {
    text-align: center;
    vertical-align: middle;
}

#navbar a {
    display: block;
    color: #CCDDEE;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 10px;
    background: #003366;
    border-top: 1px solid #005599;
    border-left: 1px solid #005599;
    border-right: 1px solid #001133;
    margin: 2px 1px 0 1px;
}

#navbar a:hover {
    background: #004488;
    color: #FFFFFF;
    border-top-color: #0077BB;
}

#navbar a.active {
    background: #FFFFFF;
    color: #003366;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: -1px;
    padding-bottom: 7px;
}

/* ============================================================
   CONTENT AREA
   ============================================================ */

#content {
    padding: 20px;
    min-height: 400px;
}

#content h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: #003366;
    margin-bottom: 5px;
    letter-spacing: -1px;
    border-bottom: 2px solid #003366;
    padding-bottom: 5px;
}

#content h1 .subtitle {
    display: block;
    font-size: 11px;
    color: #666666;
    font-weight: normal;
    letter-spacing: 0;
    margin-top: 2px;
}

#content h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #003366;
    margin: 20px 0 10px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #CCCCCC;
}

#content h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #003366;
    margin: 15px 0 8px 0;
}

#content p {
    margin-bottom: 12px;
    line-height: 1.6;
}

#content blockquote {
    margin: 15px 20px;
    padding: 10px 15px;
    background: #F5F8FC;
    border-left: 3px solid #003366;
    font-style: italic;
    color: #444444;
}

/* Two-column layout */
.cols-2 {
    display: table;
    width: 100%;
    border-spacing: 20px;
}

.cols-2 .col {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

/* Sidebar layout */
.with-sidebar {
    display: table;
    width: 100%;
}

.with-sidebar .sidebar {
    display: table-cell;
    width: 170px;
    vertical-align: top;
    padding-right: 20px;
}

.with-sidebar .main {
    display: table-cell;
    vertical-align: top;
    border-left: 1px solid #CCCCCC;
    padding-left: 20px;
}

/* ============================================================
   SIDEBAR NAVIGATION
   ============================================================ */

.sidebar-box {
    background: #F5F8FC;
    border: 1px solid #CCCCCC;
    margin-bottom: 12px;
}

.sidebar-box .title {
    background: #003366;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    letter-spacing: 1px;
}

.sidebar-box ul {
    list-style: none;
    padding: 4px 0;
}

.sidebar-box ul li {
    padding: 0;
}

.sidebar-box ul li a {
    display: block;
    padding: 3px 8px 3px 16px;
    font-size: 11px;
    color: #003366;
    text-decoration: none;
    background: url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 8,4 0,8' fill='%23003366'/%3E%3C/svg%3E") 6px 7px no-repeat;
}

.sidebar-box ul li a:hover {
    background-color: #E0E8F0;
    color: #000000;
}

/* ============================================================
   HERO SECTION (Homepage)
   ============================================================ */

.hero {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF4F8 100%);
    border: 2px solid #003366;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 28px;
    color: #003366;
    border-bottom: none;
    margin-bottom: 8px;
}

.hero .tagline {
    font-size: 16px;
    color: #008080;
    font-style: italic;
    margin-bottom: 15px;
}

.hero .hero-phone {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: #003366;
    margin: 15px 0;
}

.hero p {
    font-size: 12px;
    max-width: 550px;
    margin: 0 auto 15px auto;
}

/* ============================================================
   BUTTONS — Period Beveled Style
   ============================================================ */

.btn {
    display: inline-block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #003366;
    background: #D4D0C8;
    border: 2px solid;
    border-top-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 4px 16px;
    text-decoration: none;
    cursor: pointer;
}

.btn:active {
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.btn:hover {
    color: #003366;
    text-decoration: none;
}

.btn-primary {
    color: #FFFFFF;
    background: #004488;
    border-top-color: #0066BB;
    border-left-color: #0066BB;
    border-right-color: #002244;
    border-bottom-color: #002244;
}

.btn-primary:active {
    border-top-color: #002244;
    border-left-color: #002244;
    border-right-color: #0066BB;
    border-bottom-color: #0066BB;
}

.btn-primary:hover {
    color: #FFFFFF;
}

/* ============================================================
   CARDS — Boxy Bordered Feature Cards
   ============================================================ */

.card-row {
    display: table;
    width: 100%;
    border-spacing: 15px;
    margin: 0 -15px 20px -15px;
}

.card {
    display: table-cell;
    width: 33.33%;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    padding: 18px;
    text-align: center;
    vertical-align: top;
    border-top: 3px solid #003366;
}

.card h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #003366;
    margin: 8px 0;
}

.card p {
    font-size: 11px;
    color: #555555;
    line-height: 1.5;
}

.card-icon {
    font-size: 32px;
    margin-bottom: 5px;
}

/* ============================================================
   NEWS TEASER LIST
   ============================================================ */

.news-teaser {
    border: 1px solid #CCCCCC;
    padding: 12px 15px;
    margin-bottom: 8px;
    background: #FAFAFA;
}

.news-teaser .date {
    font-family: Courier New, Courier, monospace;
    font-size: 10px;
    color: #666666;
    display: block;
    margin-bottom: 2px;
}

.news-teaser h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #003366;
    margin-bottom: 4px;
}

.news-teaser h4 a {
    color: #003366;
    text-decoration: none;
}

.news-teaser h4 a:hover {
    color: #008080;
    text-decoration: underline;
}

.news-teaser p {
    font-size: 11px;
    color: #555555;
    margin-bottom: 0;
}

.badge-new {
    display: inline-block;
    color: #FF0000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    border: 1px solid #FF0000;
    padding: 1px 4px;
    margin-left: 5px;
    vertical-align: middle;
    letter-spacing: 1px;
}

/* ============================================================
   SYSTEM STATUS BAR
   ============================================================ */

.sys-status {
    background: #EEF4F8;
    border: 1px solid #CCCCCC;
    padding: 8px 12px;
    margin-bottom: 15px;
    font-size: 11px;
}

.sys-status td {
    font-size: 11px;
    vertical-align: middle;
}

/* ============================================================
   NEWS MARQUEE TICKER
   ============================================================ */

#news-ticker {
    background: #FFFFCC;
    border: 1px solid #CCCC99;
    padding: 4px 10px;
    margin-bottom: 15px;
    font-size: 11px;
    overflow: hidden;
}

#news-ticker .label {
    font-weight: bold;
    color: #CC0000;
    margin-right: 10px;
}

/* ============================================================
   TABLES — Bordered Data Tables
   ============================================================ */

table.data {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

table.data th {
    background: #003366;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 10px;
    text-align: left;
    border: 1px solid #002244;
    letter-spacing: 1px;
}

table.data td {
    padding: 6px 10px;
    border: 1px solid #CCCCCC;
    font-size: 11px;
}

table.data tr.alt {
    background: #F5F8FC;
}

table.data tr:hover {
    background: #EEF4F8;
}

/* Pricing table variant */
table.pricing {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

table.pricing th {
    background: #003366;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 15px;
    text-align: center;
    border: 1px solid #002244;
    vertical-align: middle;
}

table.pricing th.best {
    background: #008080;
    border-color: #006666;
}

table.pricing td {
    padding: 8px 15px;
    border: 1px solid #CCCCCC;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

table.pricing td.label {
    text-align: left;
    font-weight: bold;
    background: #F5F8FC;
}

table.pricing tr.alt td {
    background: #FAFAFA;
}

table.pricing tr.alt td.label {
    background: #EEF4F8;
}

table.pricing .price {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #003366;
}

table.pricing .price small {
    font-size: 11px;
    font-weight: normal;
    color: #666666;
}

/* ============================================================
   FORMS — Period Input Fields
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 2px solid;
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #DDDDDD;
    border-bottom-color: #DDDDDD;
    padding: 3px 6px;
    background: #FFFFFF;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: 1px solid #003366;
}

input[type="submit"],
input[type="reset"] {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #003366;
    background: #D4D0C8;
    border: 2px solid;
    border-top-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-right-color: #808080;
    border-bottom-color: #808080;
    padding: 4px 16px;
    cursor: pointer;
}

input[type="submit"]:active,
input[type="reset"]:active {
    border-top-color: #808080;
    border-left-color: #808080;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.form-row {
    margin-bottom: 10px;
}

.form-row label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 2px;
}

.form-row .hint {
    font-size: 10px;
    color: #999999;
    font-style: italic;
}

fieldset {
    border: 1px solid #CCCCCC;
    padding: 15px;
    margin-bottom: 15px;
}

fieldset legend {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #003366;
    padding: 0 8px;
}

/* ============================================================
   ALERT BOXES
   ============================================================ */

.alert {
    border: 1px solid #CCCC00;
    background: #FFFFCC;
    padding: 10px 15px;
    margin-bottom: 15px;
    font-size: 11px;
}

.alert strong {
    color: #CC0000;
}

.alert.info {
    border-color: #99CCCC;
    background: #EEF8F8;
}

/* ============================================================
   TEAM / STAFF CARDS
   ============================================================ */

.staff-card {
    border: 1px solid #CCCCCC;
    padding: 15px;
    margin-bottom: 15px;
    background: #FAFAFA;
    overflow: hidden;
}

.staff-card .photo {
    float: left;
    width: 80px;
    height: 100px;
    background: #DDDDDD;
    border: 1px solid #999999;
    margin-right: 15px;
    text-align: center;
    overflow: hidden;
}

.staff-card .photo img {
    width: 80px;
    height: 100px;
    object-fit: cover;
    display: block;
    filter: contrast(0.95) saturate(0.85);
}

.staff-card h3 {
    margin-top: 0;
}

.staff-card .title {
    font-weight: bold;
    color: #008080;
    font-size: 11px;
    display: block;
    margin-bottom: 6px;
}

.staff-card p {
    font-size: 11px;
    margin-bottom: 0;
}

/* ============================================================
   UNDER CONSTRUCTION BANNER
   ============================================================ */

.under-construction {
    border: 2px dashed #FF9900;
    background: #FFF8E0;
    padding: 15px;
    text-align: center;
    margin: 15px 0;
}

.under-construction .stripes {
    height: 20px;
    background: repeating-linear-gradient(
        45deg,
        #FF9900,
        #FF9900 10px,
        #000000 10px,
        #000000 20px
    );
    margin-bottom: 10px;
}

.under-construction p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 5px;
}

.under-construction .worker {
    font-size: 32px;
}

/* ============================================================
   UPDATED STAMP
   ============================================================ */

.updated {
    font-family: Courier New, Courier, monospace;
    font-size: 10px;
    color: #999999;
    font-style: italic;
    text-align: right;
    margin-top: 20px;
    padding-top: 8px;
    border-top: 1px dotted #CCCCCC;
}

/* ============================================================
   FOOTER
   ============================================================ */

#footer {
    background: #002244;
    color: #CCCCCC;
    border-top: 3px solid #003366;
    font-size: 10px;
    line-height: 1.6;
}

.footer-content {
    padding: 20px;
    overflow: hidden;
}

.footer-col {
    float: left;
    width: 25%;
    padding-right: 15px;
}

.footer-col h4 {
    color: #66CCFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 3px;
}

.footer-col a {
    color: #99CCCC;
    text-decoration: none;
    font-size: 10px;
}

.footer-col a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.footer-bottom {
    background: #001122;
    padding: 10px 20px;
    text-align: center;
    color: #999999;
    font-size: 10px;
    border-top: 1px solid #003366;
}

.footer-bottom a {
    color: #99CCCC;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #FFFFFF;
}

.footer-divider {
    color: #666666;
    margin: 0 8px;
}

.hit-counter {
    display: inline-block;
    background: #000000;
    color: #00FF00;
    font-family: Courier New, Courier, monospace;
    font-size: 11px;
    padding: 1px 6px;
    letter-spacing: 2px;
    margin-left: 8px;
    border: 1px inset #333333;
}

/* ============================================================
   TERMINAL / MONOSPACE DISPLAY
   ============================================================ */

.terminal {
    background: #000022;
    color: #00FF66;
    font-family: Courier New, Courier, monospace;
    font-size: 11px;
    padding: 15px;
    border: 2px solid #003366;
    margin: 10px 0;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
}

.terminal .prompt {
    color: #00FF66;
}

.terminal .output {
    color: #AAAAAA;
}

/* ============================================================
   TIMELINE (About page)
   ============================================================ */

.timeline {
    border-left: 3px solid #003366;
    margin: 15px 0 15px 10px;
    padding-left: 20px;
}

.timeline-item {
    margin-bottom: 15px;
}

.timeline-item .year {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
}

.timeline-item h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    margin: 2px 0;
}

.timeline-item p {
    font-size: 11px;
    color: #666666;
    margin-bottom: 0;
}

/* ============================================================
   NEWS ARTICLE LIST
   ============================================================ */

.article-list .article {
    border-bottom: 1px dotted #CCCCCC;
    padding: 12px 0;
}

.article-list .article:first-child {
    padding-top: 0;
}

.article-list .article .date {
    font-family: Courier New, Courier, monospace;
    font-size: 10px;
    color: #666666;
}

.article-list .article h3 {
    margin: 2px 0 5px 0;
}

.article-list .article h3 a {
    color: #003366;
    text-decoration: none;
}

.article-list .article h3 a:hover {
    color: #008080;
    text-decoration: underline;
}

.article-list .article p {
    font-size: 11px;
    margin-bottom: 0;
}

/* ============================================================
   FAQ (Support page)
   ============================================================ */

.faq-item {
    margin-bottom: 12px;
}

.faq-item .q {
    font-weight: bold;
    color: #003366;
    font-size: 12px;
    margin-bottom: 3px;
}

.faq-item .q:before {
    content: "Q: ";
    color: #008080;
}

.faq-item .a {
    font-size: 11px;
    color: #444444;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 2px solid #CCCCCC;
}

.faq-item .a:before {
    content: "A: ";
    font-weight: bold;
    color: #CC0000;
}

/* ============================================================
   COVERAGE MAP PLACEHOLDER
   ============================================================ */

.coverage-map {
    background: #EEF4F8;
    border: 1px solid #CCCCCC;
    padding: 40px;
    text-align: center;
    margin: 15px 0;
    font-size: 12px;
    color: #666666;
}

.coverage-map .big {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
}

/* ============================================================
   SERVICE AREA LIST
   ============================================================ */

.area-list {
    columns: 2;
    column-gap: 30px;
    list-style: none;
    margin: 10px 0;
}

.area-list li {
    padding: 2px 0;
    font-size: 11px;
    padding-left: 12px;
    background: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23008080'/%3E%3C/svg%3E") 0 7px no-repeat;
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */

.testimonial {
    background: #F5F8FC;
    border: 1px solid #CCCCCC;
    padding: 15px 20px;
    margin: 15px 0;
    font-style: italic;
    color: #444444;
}

.testimonial .attribution {
    display: block;
    font-style: normal;
    font-weight: bold;
    color: #003366;
    margin-top: 8px;
    font-size: 11px;
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-small { font-size: 10px; }
.text-muted { color: #999999; }
.text-teal { color: #008080; }
.text-red { color: #CC0000; }
.float-left { float: left; }
.float-right { float: right; }
.clear { clear: both; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mt-10 { margin-top: 10px; }

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    #topbar, #navbar, #footer { display: none; }
    #page { border: none; width: auto; }
}