/**
 * Daleville Crew Website Styles
 *
 * Online since 1998.
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* Colors */
    --color-bg: #000;
    --color-bg-dark: #0b1f24;
    --color-bg-alt: #222;
    --color-text: #777;
    --color-text-muted: #444;
    --color-accent: #6da5d6;
    --color-link: #006699;
    --color-error: #900;

    /* Typography */
    --font-family: Verdana, Arial, Helvetica, sans-serif;
    --font-size-base: 12px;
    --font-size-small: 10px;
    --font-size-form: 11px;

    /* Layout */
    --container-width: 789px;
    --column-width: 384px;
    --column-left-width: 390px;

    /* Spacing */
    --spacing-xs: 2px;
    --spacing-sm: 5px;
    --spacing-md: 10px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text);
    background: url(images/hole.jpg) top center no-repeat var(--color-bg);
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
    padding-bottom: var(--spacing-xs);
}

h3 {
    background: var(--color-bg-dark);
    color: var(--color-accent);
    padding: var(--spacing-sm);
    margin: 0;
    border-bottom: 1px solid var(--color-accent);
    border-top: 1px solid var(--color-accent);
}

/* ==========================================================================
   Links
   ========================================================================== */

a:link,
a:visited,
a:active {
    text-decoration: none;
    color: var(--color-link);
}

a:hover {
    text-decoration: underline;
    color: var(--color-link);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.outer {
    width: var(--container-width);
    background-color: transparent;
    margin: 0 auto;
    padding: 0;
}

.header {
    padding-bottom: 180px;
}

.header h1 {
    display: none;
}

/* Columns */
.left {
    width: var(--column-left-width);
    padding: 0;
    float: left;
}

.leftinner {
    width: var(--column-width);
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.center {
    width: 790px;
    padding: 0;
    float: left;
}

.centerinner {
    width: 785px;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.right {
    margin-left: 400px;
    padding: 0;
}

.rightinner {
    width: var(--column-width);
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.footer {
    padding: 0;
    margin: 0;
    margin-top: var(--spacing-md);
}

/* Utility Classes */
.black {
    background: var(--color-bg);
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Warning/Alert Box
   ========================================================================== */

.warn {
    background-color: #999;
    color: var(--color-error);
    font-size: var(--font-size-small);
    border: 1px solid var(--color-error);
    font-family: var(--font-family);
    margin: var(--spacing-sm);
    padding: var(--spacing-sm);
}

/* ==========================================================================
   Picture Cards (Thumbnails with Descriptions)
   ========================================================================== */

.pic1,
.pic2 {
    height: auto;
    min-height: 40px;
    margin-top: var(--spacing-xs);
}

.pic1 img,
.pic2 img {
    float: left;
    height: 50px;
    min-height: 50px;
    margin-top: var(--spacing-xs);
    margin-right: var(--spacing-xs);
    width: 80px;
    border: 0;
}

.pic1 p,
.pic2 p {
    padding: 3px;
}

.pic1 {
    background: var(--color-bg);
}

.pic2 {
    background: var(--color-bg-alt);
}

p.pic {
    min-height: 50px;
}

.date {
    float: right;
    margin-left: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    margin-right: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-left: 1px solid var(--color-text-muted);
    border-right: 1px solid var(--color-text-muted);
    border-bottom: 1px solid var(--color-text-muted);
}

/* ==========================================================================
   Video Cards
   ========================================================================== */

.video1,
.video2 {
    height: auto;
    min-height: 102px;
    border-bottom: 1px solid var(--color-bg);
    margin-top: 3px;
}

.video1 img,
.video2 img {
    float: left;
    height: 100px;
    min-height: 100px;
    margin-top: var(--spacing-xs);
    margin-right: var(--spacing-xs);
    width: 150px;
    border: 0;
}

.video1 {
    background: var(--color-bg);
}

.video2 {
    background: var(--color-bg-alt);
}

p.video {
    min-height: 102px;
}

/* ==========================================================================
   Video Player (HTML5)
   ========================================================================== */

.video-player {
    text-align: center;
    margin-bottom: var(--spacing-md);
    background: var(--color-bg);
    padding: var(--spacing-sm);
}

.video-player video {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   Individual Picture View
   ========================================================================== */

.indpic {
    text-align: center;
}

.indpic img {
    max-width: 400px;
    margin: var(--spacing-xs);
    border: 0;
}

/* ==========================================================================
   Picture Navigation
   ========================================================================== */

.picnav {
    text-align: center;
}

.picnav img {
    border: 0;
    margin-top: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

.dnav {
    color: var(--color-link);
    text-align: center;
    background: var(--color-bg);
}

/* ==========================================================================
   Guestbook Styles
   ========================================================================== */

.guestmail {
    float: right;
}

.guestname {
    background: var(--color-bg-dark);
    color: var(--color-accent);
    margin: 0;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--color-accent);
    border-top: 1px solid var(--color-accent);
}

/* ==========================================================================
   Forms
   ========================================================================== */

label {
    display: inline-block;
    margin-top: var(--spacing-sm);
}

input.string,
textarea {
    width: 98%;
    font: normal normal var(--font-size-form) var(--font-family);
    background-color: var(--color-bg-alt);
    color: #999;
    border: 1px solid var(--color-accent);
}

input.captcha {
    width: 120px;
    font: normal normal var(--font-size-form) var(--font-family);
    background-color: var(--color-bg-alt);
    color: #999;
    border: 1px solid var(--color-accent);
}

input.string:focus,
textarea:focus,
input.captcha:focus {
    background-color: var(--color-bg);
    color: #999;
    border: 1px solid var(--color-accent);
    outline: none;
}

input.button {
    border: 1px solid var(--color-accent);
    background-color: var(--color-bg-alt);
    color: var(--color-accent);
    font-family: var(--font-family);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
}

input.button:hover {
    background-color: #333;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.navcontainer {
    background: var(--color-bg-dark);
    border-top: 1px solid var(--color-accent);
    font: normal normal var(--font-size-form) var(--font-family);
    margin-bottom: var(--spacing-md);
}

.navlist {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.navlist li {
    bottom: 11px;
    display: inline;
    line-height: 1.2em;
    margin: 0 3px 0 0;
    padding: 4px 0;
    position: relative;
    background: var(--color-bg);
}

.navlist a,
.navlist a:link,
.navlist a:visited {
    background: var(--color-bg);
    border: 1px solid var(--color-accent);
    bottom: 2px;
    color: var(--color-accent);
    cursor: pointer;
    display: inline;
    height: 1em;
    margin: 0;
    padding: 3px 5px;
    position: relative;
    right: 2px;
    text-decoration: none;
}

.navlist a:hover {
    background: var(--color-accent);
    bottom: 1px;
    color: var(--color-bg-dark);
    border: 1px solid var(--color-bg-dark);
    position: relative;
    right: 1px;
}

.navlist a:active {
    background: #999;
    bottom: 0;
    color: #fff;
    position: relative;
    right: 0;
}

.navlist li.active {
    background: var(--color-bg-dark);
    bottom: 13px;
    display: inline;
    margin: 0 4px;
    padding: 0;
    position: relative;
    background: var(--color-bg);
}

.navlist .active a,
.navlist .active a:link,
.navlist .active a:visited,
.navlist .active a:hover {
    background: var(--color-bg-dark);
	/*
    border-bottom: none;
    border-left: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
    border-top: 1px solid var(--color-accent);
	*/
	border: 1px solid var(--color-accent);
	border-bottom: 1px solid var(--color-bg-dark);
    bottom: 0;
    color: var(--color-accent);
    cursor: text;
    margin: 0;
    padding: 2px 5px 0;
    position: relative;
    right: 0;
}

/* ==========================================================================
   Lightbox Overlay
   ========================================================================== */

.overlay {
    background-image: url(images/overlay.png);
    background-color: rgba(51, 51, 51, 0.8);
}