/***********************************************************************
    Pretty tables.
***********************************************************************/
/*
table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

table td, table th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}

table tr:nth-child(even){background-color: #f2f2f2}

table tr:hover {background-color: #ddd;}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: #4CAF50;
    color: white;
}
*/

/***********************************************************************
    End pretty tables.
***********************************************************************/


/* jquery fonts are huge. */
.ui-widget{font-size:12px;}
th { font-size: 16px; }
td { font-size: 14px; }


body {
    width:      95%;
    margin:     0 auto;
}


/* title bar, including text and loading image */
#title {
    display:         flex;
    justify-content: center;
    align-items:     center;
    vertical-align:  top;
}

/* changeset review column headers use h3, center the headers. */
#stacks-container h3 {
    text-align: center;
}



/* Stack out of date indicator */
/* jquery UI adds classes to our headers when doing accordion(), which 
   overrides the text color. Tell CSS that ours is more important. */
.outdated {
    color:      #CC0000 !important;
}
.updated {
    color:      #006E2E !important;
}



/* modules bar */
#modules {
    display:         flex;
    justify-content: center;
    align-items:     center;
    vertical-align:  top;
}

.module-button {
    font-size: 1.5em;
}

/* controls bar */
#controls {
    margin-bottom:      2em;
}
span.control form,
span.control fieldset {
    display:    inline;
}
.divider {
    width:              1em;
    display:            inline-block;
}
.divider div {
    width:              1px;
    background-color:   black;
    display:            inline-block;
}


/* footer bar */
hr.footer {
    margin-top:         3em;
}
.footer {
    font-size:          50%;
    font-weight:        lighter;
    color:              #555555;
}
.footer span {
    margin-right:       1em;
}
#footer {
    margin-top:         1em;
}


/* changeset review has 3 tables side-by-side. */
.grid-container {
    display:               grid;
    grid-template-columns: 1fr 2fr 4fr;
    grid-gap:              0.1em;
    text-align:            center;
}
/* non-rightmost children have a border+line on their right. */
.grid-container .grid-child-left,
.grid-container .grid-child-middle {
    border-right:  2px groove lightgrey;
    padding-right: 1em;
}
.grid-container .grid-child-middle,
.grid-container .grid-child-right {
    padding-left: 1em;
}

/* Deletions, or Replacement=true changes. */
.changeset-change-stop {
    color: #dd0000;
    font-weight: bolder;
}
/* Replacement=conditional changes. */
.changeset-change-warning {
    color:       #af00af;
    font-weight: bolder;
}
/* Additions or Replacement=false changes. */
.changeset-change-ok {
    color: #008800;
}

/* Final 'change is safe' or 'needs manual review' message */
#change_safety_message {
    margin-top   1em;
    font-size:   30px;
    font-weight: bolder;
}


/* code block for changeset execute command */
#change_execute_command {
    background:    #f4f4f4;
    color:         #666;
    font-family:   monospace;
    line-height:   1.6;
    margin-top:    1em;
    margin-bottom: 1em;
    max-width:     100%;
    overflow:      auto;
    padding:       1em 1.5em;
    display:       block;
    white-space:   pre;
    font-size:     80%;
    text-align:    left;
}
.changeset-exec-ok {
    border: 3px solid #008800;
}
.changeset-exec-review {
    border: 3px solid #dd0000;
}


td.details-control {
    background: url('details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('details_close.png') no-repeat center center;
}