/*****************************************
General Purpose Classes*/
._left {float:left;}
._right {float:right;}
.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;
}
/*
/*****************************************/
/*****************************************
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;
}
/*
/*****************************************/
/*****************************************
Font Icon Classes*/
.iconbox {
    background: none repeat scroll 0 0 #ffffff;
    border-radius: 3px;
    box-shadow: 0 0 3px 0 auto; /* <- set box shadow color */
    color: #auto; /* <- set font color */
    font-family: cwb001;
    padding: 0 0.5em;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}
/*
/*****************************************/
/*****************************************
 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 */

/* 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{background: #cccccc}
.altTbl tr:nth-child(even) td{background: #eeeeee}
.altTbl {padding: 0px 4px 0px 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/OL Classes */
#wrapper ul.grid, #wrapper ol.grid {
margin:0;
padding:0;
overflow:auto;
max-height:400px;
box-shadow: 0 0 1px 0;
list-style: none inside none;
width:96%;
}
ul.grid > li, ol.grid > li {
    display: inline-block;
    margin: 0.1em;
    vertical-align: top;
    width: 24%;
}
ul.grid > li:nth-child(odd), ol.grid > li:nth-child(odd) {
background-color: #d0d0d0;
}
ul.grid > li:nth-child(even), ol.grid > li:nth-child(even) {
background-color:#e0e0e0;
}
.doctag > li {
    list-style: none outside none;
}
.doctag > li > a:before, a.doctag:before {
    content: "\E016";
    font-family: font-awesome;
    margin-left: -1.1333em;
    position: absolute;
}
/*
/*****************************************/
/*****************************************
DL List Classes*/

/* .faq class definition */
dl.faq {margin-left:1em;}

dl.faq > dt {
    background: none repeat scroll 0 0 rgba(221, 221, 221, 0.5);
    margin-bottom: 2px;
    padding: 0.5em;
}

dl.faq > dd {
    background: none repeat scroll 0 0 rgba(221, 221, 221, 0.25);
    margin-bottom: 0.5em;
    padding: 0.5em;
}

dl.faq > dt:before {
    content: "Q: ";
    font-weight: bold;
    margin-left: -1.5em;
    position: absolute;
}

dl.faq > dd > span:before {
    content: "A: ";
    font-weight: bold;
    margin-left: -1.5em;
    position: absolute;
}

/* postgfx extension for FAQ class - adds font icon markers to each dt/dd. */
/* Requires 'font-awesome' icons installed. */
/* See http://app.fontastic.me/ for font resource. */
dl.faq.postgfx > dt, dl.faq.postgfx > dd {
    padding: 0.5em 1.25em 0.5em 0.5em;
}

dl.faq.postgfx > dt:after {
    content: "\E0A1";
    float: right;
    font-family: font-awesome;
    margin-right: -1.1em;
}

dl.faq.postgfx > dd:before {
    content: "\E05B";
    float: right;
    font-family: font-awesome;
    margin-right: -1.1em;
    position: relative;
}

/* DL style for the 5 Ws & H (who what, where, when, why and how) */
dl._5W > dt, dl._5W > dd {
    display: inline-block;
    margin-bottom: 0.25em;
    vertical-align: top;
}
dl._5W > dt {
    border-top: 2px solid #dadada;
    clear: both;
    padding: 0 1em 1em 0.25em;
    text-align: center;
    width: 20%;
}
dl._5W > dd {
    background: none repeat scroll 0 0 #dadada;
    padding: 0.25em;
    width: 75%;
}
/*
/*****************************************/
/*****************************************
Chunky Button Classes */

.btnContainer {
    display:table;
    border-spacing: 0.25em;
}

#wrapper .btnContainer ._btn {
    background: none repeat scroll 0 0 #1EB786;
    border-radius: 2px;
    box-shadow: 2px 2px 2px 1px #DDDDDD;
    color: #FFFFFF !important;
    display: table-cell;
    font-size: 2em;
    font-weight: bold;
    height: 100%;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: pre;
}

#wrapper .btnContainer ._info {
    border: 2px solid #686663;
    box-shadow: 2px 2px 2px 1px #DDDDDD;
    color: #5E0E0A;
    display: table-cell;
    padding: 0 0.4em;
}

#wrapper .btnContainer ._btn:active {
    box-shadow: none;
    transform: translate(-1px, -1px);
}

/*
/*****************************************/
/*****************************************
infobox style */
.infobox {
background:#e1e2e4;
background:linear-gradient(to right, rgba(225, 226, 228, 1) 0%, rgba(225, 226, 228, 0.8) 85%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
width:45%;
float:left;
margin: 0.1em 0.25em;
padding: 0.25em;
border-left: 3px solid #296CB4;
position:relative;
}
.infobox.wide {
width: 96%;
background: linear-gradient(to right, rgba(225,226,228,1) 0%,rgba(225,226,228,0.8) 75%,rgba(255,255,255,0) 100%);
}

#mobile .infobox {
width:100%;
background:#686663;
}

.infobox.soft {
    background: none repeat scroll 0 0 #dedede;
    border-left: 1px solid #aaaaaa;
}
/*
/*****************************************/
/*****************************************
Classes for making clickable divs */
#wrapper .spanlink {
    bottom: 0;
    font-size: 0 !important;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}

.spanlink.b {border: 2px dashed;}

.spanbox {
background: #686663;
padding:0.5rem;
text-align:center;
position:relative;
}
/*
/*****************************************/
.infopanel {
background: #dedede;
box-shadow: 0 0 3px -2px #686663;
text-align:center;
padding: 0.5em;
border-radius: 2px;
}
/*****************************************
Pointers */
/**
* .tri, tri.rt : right facing pointer
* .tri.lt: left-facing pointer
* .tri.up: up facing pointer
* .tri.dn: down-facing pointer
*/
.tri {
    clear: both;
    position: relative;
}
.tri:before, .tri.rt:before {
    border-bottom: 0.333em solid transparent;
    border-left: 0.4em solid;
    border-top: 0.333em solid transparent;
    content: " ";
    display: block;
    height: 0;
    left: -0.5em;
    margin-top: 0.333em;
    position: absolute;
    width: 0;
}

.tri.lt:before {
    border-bottom: 0.333em solid transparent;
    border-left: none;
    border-right: 0.4em solid;
    border-top: 0.333em solid transparent;
    content: " ";
    display: block;
    height: 0;
    left: -0.5em;
    margin-top: 0.333em;
    position: absolute;
    width: 0;
}

.tri.dn:before {
    border-left: 0.333em solid transparent;
    border-right: 0.333em solid transparent;
    border-top: 0.4em solid;
    content: " ";
    display: block;
    height: 0;
    left: -0.666em;
    margin-top: 0.5em;
    position: absolute;
    width: 0;
}

.tri.up:before {
    border-left: 0.333em solid transparent;
    border-right: 0.333em solid transparent;
    border-bottom: 0.4em solid;
    content: " ";
    display: block;
    height: 0;
    left: -0.666em;
    margin-top: 0.5em;
    position: absolute;
    width: 0;
}
/*
/*****************************************/