/*****************************************
General Purpose Classes*/
._left {float:left; margin-right: 1em;}
._right {float:right; margin-left: 1em;}
.h:hover {opacity:0.8;}
#wrapper a.h:hover,
#wrapper .h a:hover {
    text-decoration: none !important;}
.imgbox {position:relative;}
.imgbox > img:nth-child(1) {
    bottom: 0;
    left: 0;
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}
#mobile .nomobile { display: none; }
/*
/*****************************************/
/*****************************************
Font Classes */
.clean {    /* Inline style that cleans up extra formatting. */
margin: 0px !important;
padding: 0px !important;
line-height:1em !important;
}

.headline {    /* Formats text to appear as a page or section headline. */
text-align:center;
text-decoration:underline;
font-weight:bold;
}

.footnote {    /* Format text to appear as a footnote. */
font-style:italic;
font-size:0.875em;
}

.major {    /* Formats text to be attention grabbing. */
color: #FF0000 !important;
line-height:1.5em;
text-transform:uppercase;
font-weight:bold;
}

.imajor {    /* Inline format for attention grabbing text. */
font-weight: bold;
font-size:1.025em;
}
/*
/*****************************************/
/*****************************************
 Image Classes */

/* Creates horizontal breathing room for image.*/
.breather {margin:0px 10px;} /* intended for images, but can be applied to any element to give breathing room. */
.breather[style*="float:left"], .breather[style*="float: left"], ._left.breather {margin:0 6px 0 0;}
.breather[style*="float:right"], .breather[style*="float: right"], ._right.breather {margin:0 0 0 6px;}

/* Formatting that emulates a photograph. */
.photo {
border-radius: 2px;
box-shadow: 0 0 2px -1px;
padding:3px;
}

/* Applies slightly shifted shadow depending on float. */
.photo[style*="float:left"], .photo[style*="float: left"] {box-shadow: 1px 1px 2px -1px;}
.photo[style*="float:right"], .photo[style*="float: right"] {box-shadow: -1px 1px 2px -1px;}
/* Automatically sizing photo classes. */
.m1, .m75, .m66, .m2, .m3, .m4 ,.m5,
.m10, .m38, .m58 {height:auto;}

.m1 {width:100%;}
.m75 {width:75%;}
.m66 {width:66%;}
#mobile .m1, #mobile .m75, #mobile .m66 {width:100%;}

.m2 {width:50%;}
.m3 {width:33%;}
.m4 {width:25%;}
.m5 {width:20%;}
#mobile .m2, #mobile .m3, #mobile .m4, #mobile .m5 {width:50%;}

.m10 {width:10%;}
#mobile .m10 {width:20%;}
/* Golden ratio divs */
.m38 {width: 37.25%;} /* 3/8ths */
.m58 {width: 62.75%; } /* 5/8ths */
#mobile .m38, #mobile .m58 {width: 50%; }
.m1.square, .m2.square, .m3.square, .m4.square, .m5.square,
.m66.square, .m75.square, .m10.square,
.m38.square, .m58.square {height: 100%;}

.m1.letterbox, .m2.letterbox, .m3.letterbox, .m4.letterbox, .m5.letterbox,
.m66.letterbox, .m75.letterbox, .m10.letterbox,
.m38.letterbox, .m58.letterbox {height: 75%;}

.m1.box, .m2.box, .m3.box, .m4.box, .m5.box,
.m66.box, .m75.box, .m10.box,
.m38.box, .m58.box {height: 62.75%;}

.m1.rect, .m2.rect, .m3.rect, .m4.rect, .m5.rect,
.m66.rect, .m75.rect, .m10.rect,
.m38.rect, .m58.rect {height: 37.25%;}

.m1.strip, .m2.strip, .m3.strip, .m4.strip, .m5.strip,
.m66.strip, .m75.strip, .m10.strip,
.m38.strip, .m58.strip {height: 25%;}
/*
/*****************************************/

/*****************************************
Table Classes - modified to add styling for UL */

/* Formats table for subtle odd/even background coloring and slight improvements to table display. */
/* This is a very neutral style that can be applied within nearly any color scheme. */
.altTbl tr:nth-child(odd) td,
ul.altTbl li:nth-child(odd) {background: #cccccc;}
.altTbl tr:nth-child(even) td,
ul.altTbl li:nth-child(even) {background: #eeeeee;}
.altTbl {padding: 0 4px;}
.altTbl tbody {box-shadow: 0 1px 5px -1px;}
.altTbl tr td, .altTbl tr th {
border-radius: 2px;
padding: 0px 4px;
}
.altTbl tr th {vertical-align:bottom;}
.altTbl tr td {vertical-align:top;}

/* Apply this class to create a sub-header style for td and th items that have a colspan specified.  */
.colHead td[colspan], .colHead th[colspan] {
text-align:center;
font-weight:bold;
}

ul.altTbl {
box-shadow: 0 0 1px 0;
list-style: inside none;
margin: 0 3px;
padding:0;
}
ul.altTbl li a {
    display: block;
    margin: 1px 0;
    padding: 4px;
}
ul.altTbl li:hover {
    opacity: 0.8;
}
/*
/*****************************************/


#wrapper ul.grid {
    list-style: outside none none;
    margin: 0;
}
#wrapper ul.grid > li {
    border-left: 0.25em solid #dddddd;
    display: inline-block;
    margin-right: 1%;
    padding: 0.25em;
    vertical-align: top;
}
#wrapper ul.grid._two > li    { width: calc(47% - 0.5em); }
#wrapper ul.grid._three > li  { width: calc(31% - 0.5em); }
#wrapper ul.grid._four > li   { width: calc(22% - 0.5em); }