/*  style.css  */
/*  Responsive style sheet created 2016. For questions contact Craig Jolley.  */
/*  large resolution first - for IE 8 & 9 */
 
* {
    /* box-sizing includes padding when calculating box size */
    box-sizing: border-box;
    /* special for Mozilla */
    -moz-box-sizing: borderbox;
    /* special for webkit*/
    -webkit-box-sizing: border-box;
    @-ms-viewport {
        width: device-width;
    }
    margin: 0;
    padding: 0;
}
 
body {
    max-width: 98%;
    margin: 0 auto;
    font-family: arial, sans-serif;
    color: #525252;
}
 
.container {
    max-width: 900px;
    margin: 0 auto;
}
 
header {
    margin-top: 1em;
    margin-bottom: .7em;
    text-align: center;
}
 
h1 {
    font-size: 1.5em;
    font-weight: normal;
    text-align: center;
    padding-bottom: .1em;
}
 
h2 {
    font-family: times new roman,serif;
    font-size: 1.2em;
    padding-left: .5em;
    padding-top: .5em;
    float: left;
}
 
h3 {
    text-align: center;
    padding: .3em;
    width: 100%;
    float: left;
}
 
h4 {
    font-size:1.2em;
    text-align:left;
    font-weight: normal;
    padding-bottom: .3em;
    float: left;
}
 
h1, h2, .label, .labelDetail, .labelSpec, .inputColor, .changeSort a:link {
    color: #0000FF;
}
 
.red {
    color: #800000;
    font-style: italic;
}
 
.newRed {
    color: #FF0000;
}
 
.click {
    font-style: italic;
}
 
.row:hover {
    background-color: #ff9999;
}
 
.row:active {
    background-color: #c8c8f0;
}
 
a {
text-decoration: none;
}
a:hover {
    font-weight: bold;
}
 
a:visited {
    color: #0000FF;
}
 
.row, .courseDetail  {
    background-color: #c8c8f0;
    width: 100%;
    float: left;
}
 
.row {
    margin-bottom: .3em;
}
 
.courseDetail, .instructions {
    margin-bottom: 1em;
    padding-top: .5em;
}
 
.courseDetail {
    padding-bottom: .5em;
}
 
.lineItem {
    width: 100%;
    float: left;
    padding-left: 1px;
    padding-right: 1px;
/*    margin-bottom:.2em; */
}
 
.label, .labelDetail, .labelSpec {
    width: 27%;
    float: left;
    padding: .2em .3em;
}
 
.labelSpec {
    text-align: right;
    font-style: italic;
}
 
.description, .descriptionDetail {
    width: 73%;
    float: right;
    padding: .2em .3em;
}
 
.schedDetail {
    width: 100%;
    float: left;
    background-color: #ffffff;
    border: 2px solid #a1a1a1;
    margin-bottom: .5em;
}
 
.labelDetail, .descriptionDetail {
    border-bottom: 2px solid #a1a1a1;
}
 
.descriptionDetail {
    border-left: 2px solid #a1a1a1;
}
 
#locationLabel, #locationDetail {
    border-bottom: 0;
}
 
.columnLabels {
    color: #0000FF;
    font-weight: bold;
}
 
.column1, .column2, .column3, .column4, .column5 {
    float: left;
    padding-top: .3em;
    padding-bottom: .3em;
    padding-left: .5em;
}
 
.column1 {
    width: 58%;
}
 
.column2 {
    width: 10%;
}
 
.column3, .column4 {
    display: block;
    width: 5%;
    text-align: center;
}
 
.column5 {
    width: 20%;
}
 
.regForm {
    text-align: center;
    padding-top: .8em;
    padding-bottom: .8em;
    float: left;
    border: .2em;
    /*padding-bottom: 2em;*/
    width: 100%;
}
 
.warning {
    padding-top: .8em;
    padding-bottom: 2em;
    color: #ff0000;
    font-weight: bold;
}
.warningb {
    padding-top: .8em;
    padding-bottom: 2em;
    color: #000000;
    font-weight: bold;
}
.warningb {
    padding-top: .8em;
    padding-bottom: 2em;
    color: #000000;
    font-weight: bold;
}
 
.regButton {
    border-style: outset;
    width: 200px;   /* set the width */
    margin: 0 auto; /* center the content */
    padding: 5px;
    background-color: #af3232;
    color:aliceblue;
}
 
.regButton a, .regButton a:link, .regButton a:active, .regButton a:visited {
    background-color: #af3232;
    color:aliceblue;
    text-decoration: none;
}
 
.infoContact {
    padding-top: 1em;
    padding-bottom: .8em;
    color: #0000FF;
    width: 100%;
    float: left;
}
 
footer {
    float: left;
    padding-top: .8em;
    padding-bottom: 2em;
    width: 100%;
    text-align: center;
    font-size: .9em;
}
 
/* <= 780px  */
 
@media (max-width: 780px) {
/*@media (max-width: 48.75em) {*/
 
     .container {
        width: 98%;
    }
 
    .column1, .column2, .column3, .column4, .column5 {
        margin-right: .16667%;
    }
 
    .title {
        font-size: 1.5em;
    }
 
    .column1 {
        width: 63%;
    }
 
    .column2 {
        width: 15%;
    }
 
    .column3, .column4 {
        display: none;
    }
}
 
/* <=600px  */
 
@media (max-width: 600px) {
/*@media (max-width: 37.5em) {*/
   
    .columnLabels {
        display: none;
    }
   
    .row {
        border: 1px solid #0000FF;
        padding-bottom: .1em;
        margin-bottom: .6em;
    }
   
    .row p {
        font-size: 1.3em;
        border-radius: 7px;
    }
 
    .column1, .column2, .column3, .column4, .column5 {
        float: left;
        padding-top: 0;
        padding-bottom: 0;
    }
 
    .column1 {
        width: 100%;
    }
 
    .column2 {
        width: 40%;
    }
 
    .column2 p {
        background-color: #f7f7ff;
        padding-left: .3em;
        padding-right: .6em;
        text-align: center;
    }
 
    .column5 {
        width: 59%;
    }
}