body {
    font-family: 'Open Sans', Verdana, sans-serif;
    background-color: whitesmoke; 
    padding: 0px;
    padding-left: 0em;
    margin: 0px;
}

div.inlineForm {
    padding: 1em;
    margin: 0.5em;
    border: solid rgb(62,99,128) 2px;
    border-radius: 8px;
}

ul.p2e {
    list-style-type: none;
    margin: 0.5em;
}

ul.p2e li {
    margin-left: -2em;
    padding-left: 0em;
}

a:hover { color: #A71432; }
a { color: #000000; }

img { border: none; }

td.logo { vertical-align: middle; text-align: center; }

form { padding: 0; margin: 0; }

img.icon16 {
    display: inline;
    margin: 1px;
    width:  16px;
    height: 16px;
}

table {
    padding: 0px;
    margin:  0px;
    border-collapse: collapse;
    border-spacing: 0px;
    border: none;
}

div { padding: 0px; margin:  0px; }

div.login {
    width: 60em;
    height: 2em;
    position: relative;
}

div.mamTitle {
    position: absolute;
    left: 0.6em;
    top: 2.3em;
    font-size: 75%;
}

div.welcome {
    font-size: smaller;
    position: absolute;
    right: 0.5em;
    bottom: 0;
    font-style: italic;
}

div.welcome form {
    display: inline;
}

div.password {
    border: solid #cccccc 1px;
    border-radius: 5px;
    padding: 0.5em;
    background-color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 15em;
}

div.pwtitle {
    padding: 0.5em;
    font-weight: bold;
}

div.pwinput {
    padding: 0.5em;
}
div.pwfail {
    /* font-size: smaller; */
    border: solid #cccccc 1px;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5em;
    color: red;
}
.hidden { display: none; }

div.banner {
    top:              0px;
    left:             0px;
    margin-bottom:    1em;
    text-align:       left;
    color:            black;
    /* background-color: transparent; */
    border-bottom: solid rgb(222,231,248) 2px;
}

div.banner table {
    /* background-color:   transparent;  */
    margin:             0px;
    padding:            0px;
    color:              black;
}

div.content {
    padding-left: 0.5em;
    padding-top: 0.5em;
}

.center {
    text-align: center;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

td.link {
    padding-left:    0.4em;
    padding-right:   0.4em;
    text-align:      center;
    vertical-align:  bottom;
}


a.calnav {
    text-decoration:    none;
}

a.calnav span {
    text-decoration:    underline;
}

div.heading, span.heading {
    padding:    0.2em;
    /* background-color: transparent; */
    color:            black;
    text-align: left;
    vertical-align: middle; 
    font-weight:    normal;
}

table.heading2 {
    padding:    0.2em;
    /* background-color: transparent; */;
    color:            black;
    text-align: left;
    vertical-align: middle; 
    font-weight:    normal;
    border: solid white 1px;
}

ul.nav {
    margin-top: 1.5em;
    margin-left: 0em;
    padding: 0em;
}

ul.nav li
{
    list-style-type: none;
    margin-bottom: 0.5em;
    text-align: right;
    /* font-size: smaller; */
    white-space: nowrap;
}

ul.nav li.active a { font-weight: bold; color: #A71432; }
ul.nav li a { text-decoration: none; }

div.navb,
div.navbactive
{
    width: 8em;
    margin:  0px;
    padding: 0px;
    border-top: solid darkslategray 1px;
    border-left: solid darkslategray 1px;
    border-right: solid darkslategray 1px;
    border-bottom: none;
    /* font-size: smaller; */
    border-radius: 5px;
}

div.navb a,
div.navbactive a
{
    display: block;
    text-decoration: none;
    color: white;
    padding-bottom: 0.25em;
}

div.navbactive { color: white; }

div.navbactive a,
div.navbactive a:hover
{
    color: white;
}

div.navb a:hover { color: white; }

div.navb,
div.navb a
{
    color: black;
    background-color: whitesmoke; 
}

div.navb a:hover,
div.navbactive,
div.navbactive a:hover
{
    background-color: #A71432;
}

img.cview {
    vertical-align: middle;
    margin-left:    1em;
    margin-right:   0.2em;
    width:          16px;
    height:         16px;
}

div.editForm {
    margin: 0.5em;
    padding: 0.5em;
    border: solid #A71432 1px;
}

div.editForm table {
}
div.editForm table td,
div.editForm table th {
    border: none; 
}

table.Directory { width: 75%; }
table.Directory th,
table.Directory td { white-space: nowrap; }

table.Directory th,
table.Directory th.section,
table.Distribution th,
table.Products th,
table.cdr th
{
    background-color:   #EEEEEE;
    color:              black;
    padding-left:   0.5em;
    padding-right:   0.5em;
    text-align: center;
    font-weight:        normal;
    /* font-size: smaller; */
    border: solid #CCCCCC 1px;
}

table.Presence th
{
    background-color:   #EEEEEE;
    padding-left:   0.5em;
    padding-right:   0.5em;
    text-align: center;
    border: solid #CCCCCC 1px;
}

table.cdr th,
table.cdr td
{
    font-size: smaller
}

table.Distribution td,
table.Directory td,
table.Products td,
table.CallDetails td,
table.cdr td
{
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
    border: solid #CCCCCC 1px;
    background-color: white;
}


table.Directory th.section { /* font-size: smaller; */ font-weight: bold;}

table.Distribution th.email,
table.Distribution th.vmail,
table.Distribution th.members
{
    text-align: center;
    vertical-align: middle;
}

table.Distribution td.email,
table.Distribution td.vmail,
table.Distribution td.members
{
    padding-left:  0.5em;
    padding-right: 0.5em;
    vertical-align: top;
}

table.Distribution td.members { width: 60em; }

table.Distribution td.email,
table.Distribution td.members,
table.Directory td.name,
table.Directory td.desc,
table.Directory td.remote,
table.Directory td.email
{
    text-align: left;
}

table.Directory td.name,
table.Directory td.email
{
    padding-right: 2em;
}

table.Distribution td.email,
table.Distribution td.vmail,
table.Distribution td.members,
table.Directory td.desc,
table.Directory td.remote,
table.Directory td.remoteExt,
table.Directory td.name,
table.Directory td.userext,
table.Directory td.ext,
table.Directory td.email
{
    /* font-size: smaller; */
}

table.Directory td.userext {
    padding-left: 1em;
    text-align: left;
}

table.Distribution td.vmail
{
    text-align: center;
}

@media print
{
    a { text-decoration: none; }
    div.login,
    ul.nav, ul.nav li.active, 
    div.navb, div.navbactive,
    img { display: none; }
    img.icon16, img.pfb { display: inline; }
    div.content { border: none; }
    div.pwcontent { border: none; }
    body {
        width:  7in;
        background-color: white; 
    }
    * { font-size: 8pt; 
        font-family: 'Open Sans', Verdana, sans-serif; }

    table.info { margin: 0; }
}

div.confinfo {
    text-align: left;
    position: relative;
}

div.confinfo > div.label { 
    padding: 0.25em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div.confinfo > div.contents {
    padding: 0.25em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.confinfo.activeconf > div.label { border: solid darkgreen 1px; }
div.confinfo.schedconf > div.label { border: solid darkblue 1px; }
div.confinfo.expconf > div.label { border: solid darkgray 1px; }

div.confinfo.activeconf > div.contents { border: solid darkgreen 1px; border-top: none; }
div.confinfo.schedconf > div.contents { border: solid darkblue 1px; border-top: none; }
div.confinfo.expconf > div.contents { border: solid darkgray 1px; border-top: none; }

div.confinfo > div.label a { margin-left: 2em; }
div.confinfo > div.label span.bkg { margin-left: 0.5em; font-style: italic;}

div.confinfo.activeconf > div.label { background-color: lightgreen; }
div.confinfo.schedconf > div.label { background-color: lightblue; }
div.confinfo.expconf > div.label { background-color: lightgray; }

div.confinfo.expconf > div.contents { color: darkgray; }
div.confinfo.expconf > div.contents span.hilite { color: darkgray; }

div.confinfo > div.label span.state { 
    position: absolute;
    right: 0.5em;
}

div.confinfo > div.label { 
    padding: 0.25em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div.confinfo > div.contents {
    padding: 0.25em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.confinfo:not(:last-child) { margin-bottom: 1em; }
div.confinfo > div.contents table { width: 100%; }

div.qinfo {
    text-align: left;
    position: relative;
}

div.qinfo:not(:first-child) { margin-top: 0.5em; }

div.qinfo > div.label { 
    padding: 0.25em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

div.qinfo > div.label a { margin-left: 1em; font-size: smaller; }

div.qinfo > div.contents {
    padding: 0.25em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.qinfo > div.label { border: solid darkblue 1px; background-color: lightblue}
div.qinfo.q_notinuse > div.label { border: solid darkgray 1px; background-color: lightgray;}

div.qinfo > div.label span.ctrlbutton { 
    position: absolute;
    right: 0.5em;
    top: 0.1em;
}

div.qinfo > div.label span.distAlgo { 
    font-style: italic;
    font-weight: normal;
    margin-left: 0.5em;
    font-size: smaller;
}

div.qinfo > div.contents { border: solid darkblue 1px; border-top: none; }
div.qinfo.q_notinuse> div.contents { border: solid darkgray 1px; border-top: none; }

table td.caller {
    /* font-size: smaller; */
    text-align: left;
}

span.starttime
{
    color: #999999;
}

table.qstats { width: 100%; }
table.qstats td { text-align: left; }
table.qstats td a { font-weight: normal; }

table.forminput {
    border: none;
    border-collapse: collapse;
    border-spacing: 0px;
    /* font-size: smaller; */
}

table.forminput td.label
{
    border: none;
    text-align:right;
    font-weight: bold;
}
table.forminput td.text
{
    border: none;
    text-align:left;
}

span.hint {
    margin-left: 0.5em;
    font-weight: normal;
    /* font-size: smaller; */
    color: #999999;
}

div.tip {
    border: solid #CCCCCC 1px;
    background-color: #EEEEEE;
    margin: 0.25em;
    border-radius: 5px;
}

div.tip div.tipbanner {
    text-align: left;
    font-weight: bold;
    padding-left: 0.5em;
}

div.tip div.tipcontent {
    text-align: left;
    padding: 0.5em;
    font-weight: normal;
} 


div.freeslots {
    border: solid #CCCCCC 1px;
    /* font-size: smaller; */
    background-color: #EEEEEE;
}

div.freeslots div.content {
    text-align: left;
    border-bottom: solid #CCCCCC 1px;
}

div.freeslots div.freebanner {
    text-align: left;
    font-weight: bold;
    padding-left: 0.5em;
}

div.confmsg {
    margin:0.5em;
    padding: 0.5em;
    border: solid #A71432 1px;
    text-align: left;
    /* font-size: smaller; */
}

span.repeat {
    padding-left: 1em;
    color: #999999;
    font-style: italic;
    font-weight: normal;
}

div.conflict {
    margin-top: 1em;
    border: solid #A71432 1px;
    padding: 0.5em;
    padding-bottom: 0em;
}

div.conflict div.schedconf {
    text-align: center;
}

div.conflict div.sublabel {
    color: #A71432;
    /* font-size: smaller; */
}

div.pleasewait,
div.checking
{
    margin: 1em;
    border: solid #A71432 1px;
    background-color: #F0F0F0;
    color: #A71432;
    /* font-size: smaller; */
    font-style: italic;
    padding: 0.5em;
    display:none;
    border-radius: 5px;
}

span.hilite {
    color: #A71432;
    font-family: Courier, monospace; }

div.preempt {
    margin: 0.25em;
    border: solid #CCCCCC 1px;
    padding: 0.25em;
    color: #A71432;
}

div.fyi2_h,
div.fyi2_a
{
    text-align:         left;
    color:              black;
    font-weight:        normal;
    font-size:          small;
    margin-right:       0.25em;
    margin-bottom:      0.25em;
    padding:            0.25em;
    background-color: #FFFFCC;
    border: solid #993333 1px; 
    border-radius: 4px;
}

div.fyi2_h span.fyi2b,
div.fyi2_a span.fyi2b
 {
    text-align:         left;
    display:            block;
    color: #993333;
    font-weight: bold;
    background-color: transparent;
}

div.fyi2_h span.fyi2d,
div.fyi2_a span.fyi2d
 {
    display:            block;
    text-align:         left;
    color:              black;
}

div.fyi2_a span.fyi2b2 { background-color: #993333; }

div.reportInfo {
    margin: 0.5em;
    padding: 0.5em;
    border: solid #CCCCCC 1px;
    text-align: left;
    font-size: 0.75em;
    background-color: #EEEEEE;
    border-radius: 5px;
}

.formLabel,
.checkBoxLabel {
    vertical-align:     middle;
    padding-right:      4px;
    font-weight: bold;
}

.formLabel { text-align: right;}
.checkBoxLabel { text-align: left;}

div.inst { margin: 0.5em; }
div.inst2 { margin-bottom: 0.5em; }

div.buttons { margin-top: 0.5em; margin-bottom: 0.5em; }
div.qbuttons { margin-bottom: 0.5em; }

div.buttons input:not(:first-child) { margin-left: 0.75em; }
div.qbuttons input:not(:first-child) { margin-left: 0.75em; }

div.ajaxStatus {
    display: none;
    margin: 0.5em;
    padding: 0.25em;
    border: solid #CCCCCC 1px;
    background-color: #FFFFCC;
    color: red;
    font-style: italic;
    text-align: left;
}

span.selectAgentInst {
    font-style: italic;
    color: #A71432;
}

span.filterlabel {
    font-weight: normal;
    font-style: italic;
    /* font-size: smaller; */
    padding-left: 2em;
    padding-right: 0.5em;
}

div.actionStatus {
    color:  blue;
    font-style: italic;
    display:none;
}

div.errorStatus {
    color:  red;
    font-style: italic;
    display:none;
}

div.form_error {
    border: solid red 1px;
    background-color: #FFFCC;
    margin-top: 0.25em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 0.5em;
    font-weight: normal;
    display:none;
}

div.form_error table,
div.form_error table tr,
div.form_error table tr td
{
    background-color: #FFFFCC;
}

thead th.istsort:hover,
thead td.istsort:hover { 
    background-color: #A71432;
    color: white;
}

div.userpassword {
    text-align: left;
}

span.pwreq {
    font-family: Courier, monospace;
}

div.pwwarning {
    color: red;
    margin: 0.5em;
    padding: 0.5em;
    border: solid red 1px;
    text-align: center;
}

div.pwinfo {
    /* font-size: smaller; */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

td.fullname {
    padding-left: 1em;
    vertical-align: bottom;
    /* font-size: smaller; */
}

span.fullname {
    font-weight: bold;
}

td.userpicture {
    text-align: left;
    padding-left: 1em;
    vertical-align: bottom;
}

td.userlinks {
    width: 7em;
    text-align: right;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
}

td.usercontactinfo {
    vertical-align: top;
}

.noborder,
.noborder table,
.noborder table table,
.noborder td,
.noborder td td
 { border: none !important; }

/* Start of Products Style */

div.function { text-align: left; margin-bottom: 0.5em; }
div.function div.heading { font-weight: bold; color: black; border:none;}
div.function div.content { border: none; margin-left: 0.5em; background-color: white; }
div.function div.content span.phone { font-family: Courier,monospace;}
div.function div.content span.button { font-style: italic; font-weight: bold}
div.function div.content span.dial { font-style: italic; }
div.function div.content span.number { font-weight: bold }
div.function div.content span.info { font-style: italic}
span.cmd { font-weight: bold; }

div.function ol { margin-top: 0.5em; margin-bottom: 0.5em; }
div.function ul { margin-top: 0.5em; margin-bottom: 0.5em; }

div.section ol { margin-top: 0.5em; margin-bottom: 0.5em; }
div.section ul { margin-top: 0.5em; margin-bottom: 0.5em; }

div.hidediv { display: none; }
span.hidespan { display: none; }
li.hideli { display: none; }

span.link { font-weight: normal; color: black; }
span.link a { color: blue }

table.shortcuts { border: solid gray 1px; margin-top: 0.5em;}
table.shortcuts td { padding: 0.5em; border: solid gray 1px; text-align: left}

table.shortcuts td.shortcut { font-weight: bold; color: white; background-color: black; text-align: center;}
/* End of Products Style */

div.mam_page {
    width: 50em;
}

div.mam_label {
    background-color: #A71432;
    padding: 0.25em;
    padding-left: 0.5em;
    margin-bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white; 
background: -webkit-linear-gradient(#A71432, #930018); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#A71432, #930018); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#A71432, #930018); /* For Firefox 3.6 to 15 */
background: linear-gradient(#A71432, #930018); /* Standard syntax */
}

div.mam_label a, 
div.mam_label a:hover { color: white; }
div.mam_label a { margin-left: 2em; }

div.mam_content {
    border: solid #cccccc 1px;
    border-top: none;
    padding: 0.5em;
    margin-top: 0;
    margin-bottom: 0.5em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white;
}

div.mam_content div.section:not(:last-child) { margin-bottom: 1em; }
/*
div.mam_content div.section:not(:last-child) { border-bottom: solid #CCCCCC 1px;
}
*/

div.mam_content div.section > div.heading {
    padding: 0.25em;
    padding-left: 0.5em;
    font-weight: bold;
    color: black;
    margin-bottom: none;
background: -webkit-linear-gradient(#EEEEEE, #CCCCCC); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#EEEEEE, #CCCCCC); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#EEEEEE, #CCCCCC); /* For Firefox 3.6 to 15 */
background: linear-gradient(#EEEEEE, #CCCCCC); /* Standard syntax */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: solid #999999 1px;
}

div.mam_content div.section > div.content {
    padding: 0.5em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: solid #999999 1px;
    border-top: none;
}

div.info1 { font-size: smaller; border-radius: 5px; }
table.section { border-collapse: collapse; }
table.section td,
table.section th {
    border: solid #CCCCCC 1px;
    padding: 0.2em;
}

.smaller { /* font-size: smaller !important; */}

.c_l, .c_c, .c_r { padding: 0.2em; }
.c_l { text-align: left; }
.c_c { text-align: center; }
.c_r { text-align: right; }

span.p {
    font-style: italic;
    font-size: smaller;
    color: gray;
}

/***** Font Definition for Open Sans. This stylesheet comes from qrohlf.com/posts/better-opensans *****/

/* Regular */
@font-face {
    font-family: 'Open Sans';
    
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;

}

/* Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: italic;

}

/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 200;
    font-style: normal;

}

/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;

}

/* Semibold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 500;
    font-style: normal;

}

/* Semibold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic') format('svg');
    font-weight: 500;
    font-style: italic;

}

/* Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-weight: 700;
    font-style: normal;

}

/* Bold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
    font-weight: bold;
    font-weight: 700;
    font-style: italic;

}

/* Extra Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold-webfont.eot');
    src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBold-webfont.svg#OpenSansExtrabold') format('svg');
    font-weight: 900;
    font-style: normal;

}

/* Extra Bold Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#OpenSansExtraboldItalic') format('svg');
    font-weight: 900;
    font-style: italic;

}


svg.icon {
    width: 1em;
    height: 1em;
    padding-right: 0.1em;
}

svg.icon_notAttached path {
    fill: #EF4236;
    d: path("M15.853,13.728L8.942,1.036c-0.419-0.769-1.466-0.769-1.885,0l-6.91,12.692 c-0.419,0.769,0.104,1.731,0.942,1.731h13.82C15.748,15.459,16.271,14.498,15.853,13.728z M9,13.459H7v-2h2V13.459z M9,10.459H7 v-6h2V10.459z");
}

svg.icon_user path {
    fill: #A0A0A0;
    d: path("M8.922,9.23c1.197-0.83,2.01-3.385,2.01-4.852c0-2.161-1.772-4.419-3.933-4.419S3.095,2.217,3.095,4.378 c0,1.459,0.804,3.994,1.991,4.838c0.086,0.061-0.159,1.363-0.256,1.381C2.086,11.093,0,12.753,0,13.959v2h14v-2 c0-1.206-2.072-2.866-4.816-3.362C9.087,10.579,8.843,9.285,8.922,9.23z");
}

svg.icon_ext path {
    fill: #A0A0A0;
    d:  path("M6.718,11.344H4.284l-0.822,4.615H1.655l0.822-4.615h-2.631V9.805h2.957L3.429,6.42h-2.66V4.574h2.986 l0.843-4.615h1.807L5.561,4.574h2.423l0.844-4.615h1.817L9.801,4.574h2.353V6.42H9.477L8.849,9.805h2.381v1.538H8.525 l-0.822,4.615H5.896L6.718,11.344z M4.609,9.805h2.434L7.67,6.42H5.236L4.609,9.805z");
}

svg.icon_device path {
    fill: #A0A0A0;
    d: path("M2.235-0.041c0,0-2.435,2.566-2.222,4.407c0.202,1.755,2.537,4.582,4.592,6.62 c2.433,2.413,5.743,4.881,7.11,4.971S16,13.426,16,13.426L11.534,9.37l-1.733,1.947L6.996,8.601L4.433,6.112L6.43,4.31 L2.235-0.041z");
}

div[data-banner] {
    border: solid blue 1px;
    border-radius: 4px;
    padding: 0.25em;
    margin: 0em;
    margin-bottom: 0.25em;
    width: 50em;
}

div[data-banner] ul { padding: 0em; margin: 0em; }
div[data-banner] ul li {
    padding-left: 1.25em;
    margin: 0em;
    list-style-position: inside;
    list-style-type: none;
    text-indent: -1.25em;
}

div[data-banner="alert"] { border: solid red 2px; background-color: lightyellow; }
div[data-banner="warning"] { border: solid orange 1px; background-color: lightyellow; }
div[data-banner="notice"] { border: solid darkgray 1px; background-color: lightyellow;}