/* styles for anchor tags */

a:link,a:active,a:visited {color:blue; text-decoration:none}
a:hover {color:red;  text-decoration:underline; background:#F9EDED}

/* styles for header tags */

h2 {font-size:16pt; font-family:arial; font-weight:normal; color:blue}

/* styles for table tags */

tr {text-align:left}
th,td {font-size:14pt}

th{font-family:arial;      font-weight:bold; text-align:left}
td{font-family:sans-serif; font-weight:normal; color:#000099; text-align:left}

/* styles for fonts */

.a10,.a12,.a14,.a16,.s10,.s12,.s14,.s16 {
   font-style:normal; font-weight:normal
}

.a10,.a12,.a14,.a16 { font-family:arial }
.s10, s12,.s14,.s16 { font-family:sans-serif; color:#000066 }

.a10,.s10   {font-size:10pt}
.a12,.s12   {font-size:12pt}
.a14,.s14   {font-size:14pt}
.a16,.s16   {font-size:16pt}

.a10b,.a12b,.a14b,.a16b,.s10b,.s12b,.s14b,.s16b { font-weight:bold }

.h1black {
   font-family:arial;  font-style:normal; font-weight:bold;
   font-size:18pt; color:black
}
.h2black {
   font-family:arial;  font-style:normal; font-weight:bold;
   font-size:14pt; color:black
}
.h3black {
   font-family:arial;  font-style:normal; font-weight:bold;
   font-size:12pt; color:black
}
.hblue {
   font-family:arial;  font-style:normal; font-weight:bold;
   font-size:18pt; color:darkblue
}
.vb1   {
   font-family:verdana; font-style:normal; font-weight:bold;
   font-size: 8pt
}

/* styles for left-hand photo right-hand text activity entries */

nav {
    float: left;
    max-width: 310px;
    margin: 0; /* top right bottom left */
    padding: 15px;
}
article {
    /* padding: 130px 0px; */
    overflow: auto;
}

/* style for floating icon panel at lower right corner
   - Facebook and Youtube links */

div.fixed {
    bottom: 0;
    right: 0;
    max-width: 180px;
    min-height: 80px;
    display: inline; /* inline-block; */
    border: 0;
    padding: 0;
    position: fixed;
    z-index: 1; /* goes on top of text, not behind. doesn't help firefox. hmm. */
    background: #ffffcc; /* MARC pale yellow */
}

/* NEW NEW
   left-pointing graphic arrows built from CSS elements
   example: span class="left-arrow" style="font-weight: bold; color: #FFFFCC">location change!< /span
 */

     .left-arrow {
        display: inline-block;
        position: relative;
        background: darkblue;
        padding: 12px;
     }

     .left-arrow:after {
        content: '';
        display: block;
        position: absolute;
        right: 100%;
        top: 50%;
        margin-top: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 15px solid darkblue;
        border-bottom: 10px solid transparent;
        border-left: 10px solid transparent;
     }

     .left-arrow2 {
        display: inline-block;
        position: relative;
        background: darkblue;
        padding: 17px;
     }

     .left-arrow2:after {
        content: '';
        display: block;
        position: absolute;
        right: 100%;
        top: 50%;
        margin-top: -15px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-right: 32px solid darkblue;
        border-bottom: 15px solid transparent;
        border-left: 15px solid transparent;
     }