/* CSS for <http://www.redblobgames.com/articles/curved-paths/>
   Copyright 2012 Red Blob Games
   License: CC BY 3.0 <http://creativecommons.org/licenses/by/3.0/>
   You are free to use, share, remix portions of this CSS file,
   including using it for commercial purposes, as long as you give me credit.
   */

main svg, main img {
    width: 100%;
    height: auto;
}

svg {
    background-color: hsl(220,20%,30%);
    pointer-events: visiblePainted;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

svg > * {
    pointer-events: none;
}

.blueprint {
    fill: none;
    stroke: hsl(300,0%,70%);
    stroke-width: 2;
    stroke-dasharray: 4,3;
    stroke-opacity: 0.1;
}

text.blueprint {
    font-family: var(--sans-serif);
    fill: hsl(300,0%,70%);
    fill-opacity: 0.1;
    stroke: none;
    font-size: 0.6em;
    text-anchor: middle;
    dominant-baseline: middle;
}

svg .blueprint {
    fill-opacity: 1.0;
    stroke-opacity: 1.0;
}

#arrowhead {
    fill: hsl(300,0%,70%);
    fill-opacity: 0.1;
}
svg #arrowhead {
    fill-opacity: 1.0;
}

.path path {
    stroke-linejoin: round;
}

.otherpaths path {
    fill: none;
    stroke: hsl(220,20%,50%);
    stroke-width: 1px;
}

path.clip-arc {
    fill: hsl(220,50%,70%);
    fill-opacity: 0.2;
}

path.clip-bezier {
    fill: hsl(60,50%,70%);
    fill-opacity: 0.2;
}

.pavement {
    fill: none;
    stroke: hsl(0,0%,50%);
}

.pavement-white-stripe {
    fill: none;
    stroke: hsl(0,0%,100%);
}

.pavement-yellow-stripe {
    fill: none;
    stroke: hsl(60,100%,50%);
    stroke-width: 1;
    stroke-dasharray: 7,10;
}

.invisible-draggable {
    pointer-events: visiblePainted;
    fill-opacity: 0.0;
}

.draggable {
    pointer-events: visiblePainted;
    fill: hsl(50,80%,70%);
    stroke: hsl(50,40%,70%);
    stroke-width: 2;
    cursor: move;
}
@media (hover: hover), (-moz-touch-enabled: 0) {
    .draggable {
        fill-opacity: 0.0;
        stroke-opacity: 0.5;
    }
}
.draggable.green {
    fill: hsl(120,80%,70%);
    stroke: hsl(120,40%,70%);
}
svg:hover .draggable {
    fill-opacity: 1.0;
    stroke-opacity: 0.3;
}
svg .draggable:hover {
    stroke-opacity: 1.0;
}

.draggable, .blueprint, #arrowhead {
    -webkit-transition-property: fill-opacity, stroke-opacity;
    -webkit-transition-duration: 1s;
    -moz-transition-property: fill-opacity, stroke-opacity;
    -moz-transition-duration: 1s;
    transition-property: fill-opacity, stroke-opacity;
    transition-duration: 1s;
}
svg:hover .draggable, svg:hover .blueprint, svg:hover #arrowhead {
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    transition-duration: 0.1s;
}



/* Some areas will have text and diagrams side by side if the browser is wide, and flow normally if the browser is narrow */

.sidebyside {
    display: block;
    margin-top: 1.75rem;
}
@media only screen and (min-width: 70em) {
    body {
        --margin: 1.125rem;
        --body-width: calc((100vw - 3 * var(--margin)) / 2);
        --sidebyside: calc(var(--margin) + 2 * var(--body-width));
    }
    section > * {
        margin-left: calc((100vw - var(--sidebyside)) / 2);
        margin-right: calc((100vw - var(--sidebyside)) / 2);
    }
    section > h2 {
        margin-left: calc((100vw - var(--sidebyside))/2 - var(--h2-margin));
    }
    section > .sidebyside {
        width: var(--sidebyside);
        max-width: none;
        margin-bottom: var(--line-height);
    }
    .sidebyside > * {
        vertical-align: top;
        display: inline-block;
        margin: 0;
        margin-right: var(--margin);
        width: var(--body-width);
    }
    .sidebyside > *:last-child {
        margin-right: 0;
    }
    .sidebyside > .float-right {
        float: right;
        width: var(--body-width);
        margin-top: 0;
    }
}
/* limit body-width to 660px:
   full width = 18px leftmargin + 660px leftcolumn + 18px gutter + 660px rightcolumn + 18px rightmargin  */
@media only screen and (min-width: 85.9em) {
    body {
        --body-width: 41.25rem;
    }
}