/* Main page styles */

body {
background: #111111;
color: #222222;
font-family: Arial;
font-size: 16px;
margin: 0px;
}

#header {
background: #111111;
position: relative;
width: 90%;
max-width: 1000px;
margin: auto;
}

#header img {
width: 100%;
height: auto;
display: block;
}

#nav {
background: #7a1717;
position: relative;
width: 90%;
max-width: 1000px;
margin: auto;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}

#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#nav li {
display: inline;
margin-left: 12px;
margin-right: 12px;
}

#nav a {
color: white;
font-weight: bold;
text-decoration: none;
}

#nav a:visited {
color: white;
}

#nav a:hover {
color: #dddddd;
text-decoration: underline;
}

#section {
background: #f3f0e9;
position: relative;
width: 86%;
max-width: 960px;
margin: auto;
padding: 20px;
}

#footer {
background: #222222;
color: white;
position: relative;
width: 90%;
max-width: 1000px;
margin: auto;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}

h1 {
color: #7a1717;
font-size: 30px;
}

h2 {
color: #7a1717;
font-size: 22px;
border-bottom: 1px solid #7a1717;
}

p {
line-height: 24px;
}

a {
color: #8b1e1e;
}

a:visited {
color: #5c3b3b;
}

a:hover {
color: #c21f1f;
}

.main-photo {
width: 60%;
max-width: 500px;
height: auto;
border: 3px solid #222222;
margin-bottom: 10px;
}

.music-photo {
width: 45%;
max-width: 400px;
height: auto;
border: 3px solid #222222;
margin-bottom: 10px;
}

.content-list {
list-style-type: square;
line-height: 26px;
}

.assignment-list {
line-height: 26px;
}

table {
width: 60%;
border: 1px solid #222222;
margin-bottom: 20px;
}

th {
background: #7a1717;
color: white;
padding: 8px;
border: 1px solid #222222;
}

td {
padding: 8px;
border: 1px solid #222222;
}

.instagram {
text-align: center;
padding: 10px;
background: white;
color: #222222;
}

/* Required sidebar properties */

.sidebar {
float: right;
width: 30%;
height: auto;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}

.sidebar-bottom {
display: none;
}

@media screen and (max-width: 600px) {

#header {
width: 100%;
}

#nav {
width: 100%;
}

#nav li {
display: block;
margin-top: 8px;
margin-bottom: 8px;
}

#section {
width: 88%;
padding: 6%;
}

#footer {
width: 100%;
}

.main-photo {
width: 100%;
}

.music-photo {
width: 100%;
}

table {
width: 100%;
}

.sidebar {
display: none;
}

.sidebar-bottom {
display: block;
position: relative;
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border: 1px solid white;
background: white;
}
}