.spoiler-btn {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #cfc096;
}
.spoiler-btn:hover {
  color: #cfc096;
  text-decoration: underline;
}
.spoiler-btn-bottom {
  width: 100%;
  text-align: right;
}

.spoiler-body {
  display: none;
}

.spoiler .show,
.spoiler.expanded .hide {
  display: inline;
}
.spoiler .hide,
.spoiler.expanded .show {
  display: none;
}

.spoiler.simple .spoiler-btn {
  width: 100%;
}
.spoiler.simple .spoiler-btn-bottom {
  display: none;
}
.spoiler.simple.expanded .spoiler-btn-bottom {
  display: block;
}

#content {
  max-height: 640px;
  width: 100%;
  max-width: 570px;
  margin: 0 auto;
}

html{
	padding: 1em;
	height:100%;
	min-height:100%;
}

body{
	min-height:100%;
}
.background {
	background: url(background-photo.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:#F1E7C3;
}
/* unvisited link */
a:link {
    color: #cfc096;
}

/* visited link */
a:visited {
    color: #cfc096;
}

/* mouse over link */
a:hover {
    color: #cfc096;
}
.page{
    max-width: 95vw;
    margin: 0 auto;
}

.box{
    padding: .5em 1em;
    background: #fff;
    margin: 0 auto;
    border: 1px solid #e9daaf;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
table th,
table td{
    text-align: left;
}
table.layout{
    width: 100%;
    border-collapse: collapse;
}
table.display{
    margin: 1em 0;
}
table.display th,
table.display td{
    border: 1px solid #e9daaf;
    padding: .5em 1em;
}

table.display th{ background: #f0e6ca; }
table.display td{ background: #fff; }

table.responsive-table{
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 80em){
    table.responsive-table{
        box-shadow: none;
    }
    table.responsive-table thead{
        display: none;
    }
    table.display th,
    table.display td{
        padding: .5em;
    }

    table.responsive-table td:nth-child(1):before{
        content: 'CRN:';
    }
    table.responsive-table td:nth-child(2):before{
        content: 'Course Code:';
    }
    table.responsive-table td:nth-child(3):before{
        content: 'New Distributions:';
    }
    table.responsive-table td:nth-child(4):before{
        content: 'Old Distributions:';
    }
    table.responsive-table td:nth-child(5):before{
        content: 'Department:';
    }
    table.responsive-table td:nth-child(6):before{
        content: 'Semester:';
    }
    table.responsive-table td:nth-child(7):before{
        content: 'Course Title:';
    }
    table.responsive-table td:nth-child(8):before{
        content: 'Professors:';
    }
    table.responsive-table td:nth-child(9):before{
        content: 'Locations:';
    }
    table.responsive-table td:nth-child(10):before{
        content: 'Schedules:';
    }
    table.responsive-table td:nth-child(11):before{
        content: 'URL:';
    }
    table.responsive-table td:nth-child(1),
    table.responsive-table td:nth-child(2),
    table.responsive-table td:nth-child(3),
    table.responsive-table td:nth-child(4),
    table.responsive-table td:nth-child(5),
    table.responsive-table td:nth-child(6),
    table.responsive-table td:nth-child(7),
    table.responsive-table td:nth-child(8),
    table.responsive-table td:nth-child(9),
    table.responsive-table td:nth-child(10),
    table.responsive-table td:nth-child(11){
        padding-left: 10em;
    }
    table.responsive-table td:nth-child(1):before,
    table.responsive-table td:nth-child(2):before,
    table.responsive-table td:nth-child(3):before,
    table.responsive-table td:nth-child(4):before,
    table.responsive-table td:nth-child(5):before,
    table.responsive-table td:nth-child(6):before,
    table.responsive-table td:nth-child(7):before,
    table.responsive-table td:nth-child(8):before,
    table.responsive-table td:nth-child(9):before,
    table.responsive-table td:nth-child(10):before,
    table.responsive-table td:nth-child(11):before{
        position: absolute;
        left: 0.5em;
        font-weight: bold;
    }

    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.actions{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}