/* =========================================================
   Adam K. Watts — Dance Pages
   Shared stylesheet for:

   /dance/index.html
   /dance/advanced_tips.htm
   /dance/Brazilian_Bolero.htm
   ========================================================= */


/* ---------------------------------------------------------
   Basic page setup
   --------------------------------------------------------- */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

h1 {
    margin-top: 10px;
    margin-bottom: 9px;
    font-family: Schwarzwald, Verdana, Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: normal;
    color: #ffffff;
}

h2 {
    margin-top: 0;
    margin-bottom: 9px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #ffffff;
}

h3 {
    margin-top: 0;
    margin-bottom: 9px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

h4 {
    margin-top: 0;
    margin-bottom: 9px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
}


/* ---------------------------------------------------------
   Main text
   --------------------------------------------------------- */

.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.HangingIndent {
    margin-bottom: 9px;
    padding-left: 28px;
    text-indent: -28px;
}


/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

td {
    font-size: 11px;
}

td.head {
    padding: 8px 10px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 900;
    color: #ffffff;
    background-color: #894DFB;
}


/* ---------------------------------------------------------
   Resource links
   --------------------------------------------------------- */

.celllink4 {
    padding: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #ffffff;
}

.celllink4 a {
    color: #000000;
    text-decoration: none;
}

.celllink4:hover {
    background-color: #dac9fd;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

a {
    color: #000000;
}

a:hover {
    color: #000000;
}


/* ---------------------------------------------------------
   Images and embedded video
   --------------------------------------------------------- */

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}


/* =========================================================
   RESPONSIVE ADAPTATION
   =========================================================

   The desktop composition is intentionally preserved.

   The rules below only allow the existing 650px and 835px
   compositions to contract when the viewport is too narrow
   to display them at their original dimensions.

   No full-width redesign is introduced.
   ========================================================= */


/* ---------------------------------------------------------
   Smaller desktop / tablet

   The 835px content area begins contracting before it can
   create horizontal scrolling.
   --------------------------------------------------------- */

@media (max-width: 865px) {

    table[width="835"] {
        width: calc(100% - 30px);
        margin-left: auto;
        margin-right: auto;
    }

}


/* ---------------------------------------------------------
   Tablet / large phone

   The 650px header also begins contracting.
   --------------------------------------------------------- */

@media (max-width: 680px) {

    table[width="650"] {
        width: calc(100% - 30px);
        margin-left: auto;
        margin-right: auto;
    }

    table[width="835"] {
        width: calc(100% - 30px);
    }

}


/* ---------------------------------------------------------
   Phone

   Text gets a little more breathing room and embedded
   video becomes fluid.

   The original visual hierarchy remains intact.
   --------------------------------------------------------- */

@media (max-width: 600px) {

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 15px;
    }

    h4 {
        font-size: 15px;
    }

    .text {
        font-size: 14px;
        line-height: 1.5;
    }

    .HangingIndent {
        padding-left: 20px;
        text-indent: -20px;
    }

    td.head {
        font-size: 15px;
    }

    .celllink4 {
        font-size: 13px;
    }

    iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

}


/* ---------------------------------------------------------
   Very narrow phones

   The original 650px header cannot remain side-by-side
   indefinitely. Only at this point do the two header
   columns stack.

   This is the minimum structural change necessary to make
   the header usable on a narrow phone.
   --------------------------------------------------------- */

@media (max-width: 480px) {

    table[width="650"] tr {
        display: block;
    }

    table[width="650"] td {
        display: block;
        width: 100%;
        text-align: center;
    }

    table[width="650"] td:first-child {
        padding-bottom: 0;
    }

    table[width="650"] td:last-child {
        padding-top: 0;
    }

}