*:focus {
    outline: none;
}

#content article {
    margin: 0;
}

#content h1 {
    padding: 10px 0 0 0;
    margin: 0;
}

.page-title {
    margin: 0;
    float: left;
}

.content-header {
    margin: 0 0 10px 0;
}

.column {
    display: inline-block;
    vertical-align: top;
}

.left-column {
    padding: 0 5px 0 0;
}

.right-column {
    padding: 0 0 0 5px;
}

/*
split the content box with the border since there are some drop shadowed content boxes without the top border
*/
.summary-box {
    box-shadow: 0 -2px 8px -4px #000000;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .5);
    padding: 10px;
    margin: 10px 0;
}

.summary-box.static-content {
    padding: 0 10px 10px 10px;
}

.summary-box.static-content .summary-item {
    padding: 0 0 10px 0;
}

.summary-box.static-content .summary-item header {
    padding: 10px 0;
}

.summary-box.static-content .summary-item p {
    padding: 10px 0;
}

.summary-border {
    border-top: 4px solid #01A6E6;
}

.summary-box {
    padding: 0;
}

.summary-box header {
    padding: 10px;
    color: black;
    font-size: 18px;
}

.summary-box ul {
    list-style: none;
    padding: 20px 10px 0 10px;
    margin: 0;
}

.summary-box.static-content ul {
    padding: 10px;
}

.summary-box.summary-border ul {
    padding: 10px 10px 0 10px;
}

.summary-box hr {
    border-top: dotted 1px #dddddd;
    margin: 0;
    padding: 5px 0 0 0;
}

.summary-box ul a, .summary-box ul a:visited, .summary-box ul a:hover {
    text-decoration: none;
    color: #3d8ec7;
}

.summary-box li {
    padding: 5px 0;
}

.summary-box .blurb {
    padding: 0;
}

.summary-box .document-meta-data {
    color: #bababa;
    font-size: 12px;
}

.summary-box footer {
    font-size: 14px;
    text-align: right;
    padding: 10px;
}

    .summary-box footer a, .summary-box footer a:visited {
        text-decoration: none;
        color: #3d8ec7;
    }

/* added this class because the button class in main.css has too much stuff in it like positioning.  
that should be separated out to it's own class so that we can style all buttons using a single class.
then position it with a different class because the position will be dependent on the page.
*/
.library-button {
    padding: 5px 15px;
    background-color: #b3d4fc;
    color: #11416d;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #6ba7cb;
}

#toggle-favorites img, .toggle-favorites img {
    padding: 0 10px 0 0;
    vertical-align: bottom;
}

#toggle-favorites, .toggle-favorites {
    display: inline-block;
}

#content .library-button:hover {
    text-decoration: none;
}

.header-button {
    float: right;
    margin: 10px 0 0 0;
}

.help-dialog {
    width: 75%;
}

.summary-box.summary-border {
    margin: 20px 0;
}

.grid .summary-box.summary-border {
    width: 48.5%;
    display: inline-block;
    vertical-align: top;
}

    .grid .summary-box.summary-border:nth-child(even) {
        margin: 0 0 20px 8px;
    }

    .grid .summary-box.summary-border:nth-child(odd) {
        margin: 0 8px 20px 0;
    }

@media (max-width:768px) {
    .grid .summary-box.summary-border {
        display: block;
        width: auto;
        margin: 0;
    }

        .grid .summary-box.summary-border:nth-child(even) {
            margin: 0 0 10px 0;
        }

        .grid .summary-box.summary-border:nth-child(odd) {
            margin: 0 0 10px 0;
        }
}

/* jQueryui overrides */

.ui-dialog {
    position: relative;
    background: #ffffff;
    border: 2px solid #cccccc;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

.ui-dialog:after, .ui-dialog:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ui-dialog:after {
        border-color: #ffffff;
        border-color: rgba(255, 255, 255, 0);
        border-width: 20px;
        margin-left: -20px;
    }

.ui-dialog:before {
        border-color: #cccccc;
        border-color: rgba(204, 204, 204, 0);
        border-width: 23px;
        margin-left: -23px;
    }

.ui-dialog-titlebar {
    display: none;
}

.ui-tabs .ui-tabs-nav-li {
    float: left;
    width: auto;
}

.ui-tabs .ui-tabs-nav li {
    float: left;
    width: 33.3%;
    border-bottom: 1px solid #01a6e6;
}

    .ui-tabs .ui-tabs-nav li.ui-tabs-active {
        border-bottom: 0;
        border-right: 1px solid #01a6e6;
    }

    .ui-tabs .ui-tabs-nav li:first-child {
        float: left;
    }

.ui-tabs .ui-tabs-nav li a.ui-tabs-anchor {
    padding-left: 10px;
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    overflow: hidden;

    }

.tabs {
    margin: 10px 0;
}

.ui-widget-content a {
    font-size: 1em !important;
}

.not-signed-in {
    display: none;
}

    .not-signed-in p {
        padding: 20px 0;
        margin: 0;
        text-align: center;
    }

#content a.favorite:hover {
    text-decoration: none;
}