/* Space out content a bit */
body {
    padding-top: 12px;
    padding-bottom: 10px;
    font-family: Verdana, Arial, Helvitica, sans-serif;
    font-size: 12px;
}

/*!* Customize container *!*/
/*@media (min-width: 768px) {*/
    /*.container {*/
        /*max-width: 780px;*/
    /*}*/
/*}*/

/* Everything gets side spacing for mobile first views */
/*.header,*/
/*.content,*/
/*.footer {*/
    /*padding-right: 15px;*/
    /*padding-left: 15px;*/
    /*margin-bottom: 10px;*/
/*}*/
.header {
    border-bottom: 5px solid #336699;
}

/*!* Responsive: Portrait tablets and up *!*/
/*@media screen and (min-width: 768px) {*/
    /*!* Remove the padding we set earlier *!*/
    /*.header,*/
    /*.content,*/
    /*.footer {*/
        /*padding-right: 0;*/
        /*padding-left: 0;*/
    /*}*/

/*}*/
#brand-img {
    margin-left: 5px;
    margin-bottom: 8px;
}

#nav_top .nav-tabs {
    border-bottom: 0;
}

.nav-tabs li a {
    font-weight: bold;
}

.nav-tabs > li > a:focus, .nav-tabs > li > a:hover, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background-color: #99ccff;
    border-bottom-color: #9cf;
}

#main h2 {
    font-weight: bold;
    font-size: 18px;
}

#main h3 {
    font-weight: bold;
    font-size: 16px;
}

ul#assistees{
    list-style: none;
}

ul#assistees li{
    padding-bottom:6px;
}

ul#assistees li a, td.assistee a {
    padding:10px 10px 6px 10px;
}

ul.names {
    /*padding-bottom: 15px;*/
    margin-left: 10px;
    -webkit-columns: 100px 5; /* Chrome, Safari, Opera */
    -moz-columns: 100px 5; /* Firefox */
    columns: 100px 5;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

ul.names li {
    white-space: nowrap;
    /*display: block;*/
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

ul.names li a {
    display: block;
    padding: 2px 0 3px;
    /*height: 20px;*/
}

ul.names li a:hover, .matrix td a:hover {
    text-decoration:underline;
    color: #ff6600;
}

#sidebar {margin:0 0 10px 0;padding:0 0;}
#sidebar .inner {
    background:#6699CC;
    /*width:135px;*/
    margin-left: 25px;
    margin-right: 15px;
    padding-bottom:10px;
    -webkit-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;}
#sidebar h2 {background:#336699;color:#FFF;font-size:12px;font-weight:bold;line-height:1.2;margin:0;padding:5px 10px 5px 13px;text-align:center;}
#sidebar h3 {background:#336699;border-left:5px solid #6699CC;color:#FFF;font-size:13px;font-weight:bold;line-height:1;margin-bottom:10px;padding:5px;text-align:center;}
#sidebar ul {margin:10px 0 0;padding:0; }
#sidebar li {margin-bottom:6px;margin-left:25px;}
#sidebar li a {background:#99ccff;display:block;padding:6px 5px 6px 10px; font-weight: bold; color:#369; text-decoration: none;}
#sidebar li a .fa-caret-right {display:none;margin-right:17px;margin-left:-21px;color:#99ccff;}
#sidebar li a:hover .fa-caret-right {display:inline-block; }
#sidebar li a:hover {color:#003366}
#sidebar li a:active .fa-caret-right {display:inline-block; color:#ffffff;}
#sidebar li a:active {color:#ffffff; background:#336699}
#sidebar li a.active .fa-caret-right{display:inline-block; color:#ffffff;}
#sidebar li a.active {color:#ffffff; background:#336699}
#sidebar li .fa {font-size: 14px}

#sidebar nav#homebase li {margin-left:3px;}
#sidebar nav#homebase li a {padding:5px 2px;}


/* Custom page footer */
.footer {
    margin-top: 15px;
    padding-top: 10px;
    color: #777;
    border-top: 1px solid #336699;
}

.footer p {
    margin-left: 15px;
}


/*.container-narrow > hr {*/
    /*margin: 30px 0;*/
/*}*/

.matrix {
    /*background-color: #99ccff;*/
    /*border: 1px solid black;*/
    margin-bottom: 15px;
}

.matrix thead {
    /*background-color: #336699;*/
    color: #eff4fa;
    display: block;
}

.matrix thead tr {
    background-color: #336699
}

.matrix thead tr.nums {
    font-size: 10px;
}

.matrix thead tr.nums th {
    border-left: 1px solid #eff4fa;
    border-top: 1px solid #eff4fa;
}

.matrix thead tr:first-child th {
    padding: 5px;
}

.matrix thead th {
    width: 17px;
    height: 15px;
    text-align: center;
}

.matrix thead th a {
    color: #eff4fa;
    display: inline-block;
    padding: 0 5px;
}

.matrix thead th form {
    color: #336699;
}

.matrix thead th.mon {
    border-left: 3px solid #eff4fa !important;
}

.matrix thead th:last-child {
    border-right: 1px solid black;
}

.matrix tbody {
    display: block;
    /*max-height: 200px;*/
    /*overflow-y: scroll;*/
}

.matrix thead, .matrix tbody {
    border-left: 1px solid #336699;
    border-bottom: 1px solid #336699;
}

.matrix tbody tr {
    background-color: #dfeaf4;
}

.matrix tbody tr:nth-child(even) {
    background-color: #eff4fa;
}

.matrix tbody td{
    border-top: 1px solid #336699;
    border-left: 1px solid #336699;
    width: 17px;
    height: 15px;
    text-align: center;
    color: #aaa;
}

.matrix tbody td:first-child,
.matrix tbody td:first-child {
    border-left: none;
}

.matrix th.name {
    text-align: left;
    padding: 5px 0 2px 5px;
    width: 120px;
}

.matrix td.name {
    /*padding-left: 7px;*/
    text-align: left;
    width: 120px;
}

.matrix td.name a {
    padding-left: 7px;
}

.matrix tbody td.mon {
    border-left: 3px solid #336699;
}

.matrix tbody td.b {
    background-color: #e5e5e5;
}

.matrix td img {
    vertical-align: top;
}

.matrix #selector {
    text-align-last: center;
    text-align: center;
}

.matrix #selector option {
    text-align: left;
}

#matrix {
    position:relative;
    width: 565px;
}


#cal-text-toggle {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
}

#dates-cal {

}

.dates-text {
    display: none;
}

#dates-text {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 0;
    margin-right: 10px;
}

#dates-text .panel-heading {
    padding: 5px 15px;
}

#dates-text .panel-heading h3 {
    margin: 0;
    font-size: 16px;
    text-shadow: -1px -1px #333;
}
#dates-text .panel-heading p {
    margin:0;
}


#dates-text .panel-footer {
    background-color: #369;
    color: #ccc;
    padding: 3px 15px;
}
#dates-text .panel-footer p {
    margin: 2px 0 0 0;
}

#dates-text .panel-heading, #dates-text .panel-footer {
    text-align: center;
}

/* iOS */
#dates-text .panel-body::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
}

/* iOS */
#dates-text .panel-body::-webkit-scrollbar-thumb {
    background-color: #999999;
    -webkit-border-radius: 13px;
}

.help p {
    font-size: 14px;
}

p.indent {
    text-indent: 0;
    margin-left: 3em;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    /*.container {*/
        /*max-width: 800px;*/
    /*}*/

    /* Remove the padding we set earlier */
    /*.header,*/
    /*.content,*/
    /*.footer {*/
        /*padding-right: 0;*/
        /*padding-left: 0;*/
    /*}*/
    /* Space out the masthead */
    .header {
        margin-bottom: 10px;
    }

    .grid--borderBetween > [class*='col-']:before,
    .grid--borderBetween > [class*='col-']:after {
        background: #6699aa;
        bottom: 0;
        content: " ";
        position: absolute;
        width: 1px;
        top: 0;
    }

    .grid--borderBetween > [class*='col-']:before {
        left: 0;
    }

    .grid--borderBetween > [class*='col-']:after {
        right: -1px;
    }

    .grid--borderBetween > [class*='col-']:first-child:before,
    .grid--borderBetween > [class*='col-']:last-child:after {
        display: none;
    }

    #dateParticipants {
        min-height: 250px;
    }
    #dates-cal, #dates-text {
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        /*width: 217px;*/
        margin-top: -45px;
    }

    #dates-text {
        height: 360px;
    }

    #dates-text .panel-body {
        overflow: auto;
        height: 289px;
    }
    @media (min-width:1200px)
    {
        .container{width:992px}
    }

}