/*! Colton Ballet School */

/* Basics */

html {
    font-family: Verdana, sans-serif;
    line-height: 1.375em;
    color: white;
}

body {
    margin: 0 auto;
    max-width: 50em;
    background-color: black;
}

figure {
    margin: 0;
}

a {
    color: inherit;
}

a.plain {
    color: inherit;
    text-decoration: none;
}

nav {
    margin: 1em 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 0.6875em 0;
    /*color: white;*/
    /*background: black;*/
}

nav a {
    display: inline-block;
    padding: 0.6875em 1em;
    /*text-decoration: underline;*/
    /*color: inherit;*/
}

header {
    padding-bottom: 0.5em;
    color: black;
    background-color: white;
}

header figure {
    max-width: 538px;
    margin: 0 auto;
}

header figure img {
    width: 100%;
}

header figure figcaption {
    color: white;
}

div.banner {
    max-width: 800px;
    margin: 1em auto;
    border-top: 1px solid white;
}

div.banner a {
    text-decoration: none;
}

div.banner figure img {
    width: 500px;
    max-width: 100%;
}

div.banner figure figcaption {
    font-size: .75em;
    margin-top: -0.5em;
    margin-bottom: 2em;
}

div.banner p {
    font-style: normal;
}

main {
    /*color: rgb(200,200,215);*/
    color: #F8F0FA;
    text-align: center;
}

main figure img {
    width: 100%;
}

main p {
    /*font-size: 1.125em;*/
    margin: 0 7.5%;
}

h1 {
    line-height: 1em;
}

h1 + p.subhead {
    font-size: 1.5em;
    margin-top: -0.5em;
    margin-bottom: 1em;
    font-style: italic;
    font-weight: bold;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h2 + .subhead {
    font-size: 1.25em;
    margin-top: -0.75em;
    margin-bottom: 1em;
}

h3 {}

h3 + .subhead,
#sharon-mayfield-summer-dance-intensive h3 + .subhead {
    margin-top: -0.5em;
    margin-bottom: 1em;
    font-style: italic;
    font-weight: bold;
}

.tuition-schedule,
#summer-programs table.tuition-schedule {
    width: 100%;
    max-width: 24em;
    margin: auto;
}

#summer-programs table.tuition-schedule {
	margin: 1.5em auto;
}

#school-calendar table {
    width: 100%;
    max-width: 40em;
    margin: auto;
}

#school-calendar table,
#school-calendar table * {
    /*outline: 1px solid red;*/
}

#school-calendar td,
#school-calendar th {
    text-align: center;
    vertical-align: top;
    font-weight: bold;
    padding: 0.2em 1em 1em 1em;
}

#school-calendar .year th {
    font-size: 1.75em;
    padding: 1.5em 0 0 0;
}

#school-calendar .month {
    /*border-top: 1px solid white;*/
    font-size: 1.1em;
    border-bottom: 1px solid white;
}

#school-calendar .month th {
    padding-bottom: 0.2em;
}

#school-calendar .month th:before {
    content: '\A\A';
    white-space: pre;
}

#school-calendar .notes {
    font-weight: normal;
}

#school-calendar .notes:before {
    content: '\A';
    white-space: pre;
}

footer {
    color: white;
    text-align: center;
    padding-bottom: 2em;
}

/*footer nav {
    padding: 0.2em 0 0.5em 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

footer nav a {
    display: inline-block;
    padding: 0.5em 1em;
}
*/
footer p {
    font-style: italic;
    /*margin: 0;*/
}

.announcement {
	margin-top: 2em;
	padding: 1em 2em;
	color: black;
	background: white;
	font-style: normal;
	text-align: center;
}

.announcement :not(em) {
	font-style: normal;
}

.announcement img {
	width: 67%;
	margin: 0 auto;
}

#class-schedules table,
#summer-programs table,
#sharon-mayfield-summer-dance-intensive table {
    width: 100%;
    max-width: 40em;
    margin: 2em auto;
}

#class-schedules tbody,
#sharon-mayfield-summer-dance-intensive tbody {
    border-top: 1px solid white;
    padding-bottom: 2em;
}

#class-schedules tr,
#summer-programs tr,
#sharon-mayfield-summer-dance-intensive tr {
    padding-bottom: 2em;
}

#summer-programs thead th {
    padding-bottom: 0.25em;
}

#summer-programs thead tr:last-child th {
    padding-bottom: 2em;
}

#class-schedules tr:last-child td,
#summer-programs tr:last-child td {
    padding-bottom: 2em;
}

#class-schedules .division-name {
    padding: 1em 0 0.75em 0;
    font-size: 1.2em
}

#class-schedules .class-name,
#class-schedules .weekdays,
#class-schedules .time,
#summer-programs .class-name,
#summer-programs .weekdays,
#summer-programs .time,
#sharon-mayfield-summer-dance-intensive .class-name,
#sharon-mayfield-summer-dance-intensive .weekdays,
#sharon-mayfield-summer-dance-intensive .time {
    font-weight: bold;
}

#class-schedules .age-group:before,
#class-schedules .time:before,
#class-schedules .studio:before,
#class-schedules .instructor:before,
#summer-programs .time:before,
#summer-programs .studio:before,
#summer-programs .instructor:before {
    content: '\A';
    white-space: pre;
}

#class-schedules .school-grade:before {
    content: '/  ';
}   

#class-schedules .school-grade:after {
    content: '\A';
    white-space: pre;
}

#class-schedules td,
#class-schedules th,
#summer-programs td,
#summer-programs th,
#sharon-mayfield-summer-dance-intensive td {
    padding: 0.5em 0;
}

footer .DA-logo {
    max-height: 10em;
	max-width: 100%;
}

#teachers-and-staff .head-shot {
    margin-top: 2em
}

#teachers-and-staff main img {
    width: auto;
    /*margin: 0em auto;*/
}

#teachers-and-staff section,
#curriculum section,
#tuition-and-enrollment section,
#summer-programs section {
    margin: 2em auto;
    border-top: 1px solid white;
}

#curriculum h2+h3 {
    margin-top: -0.5em;
}

#Nutcracker-banner figcaption {
    padding: 0 0 1em 0;
    font-style: italic;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.5em;
}

#Nutcracker-poster figcaption {
    padding: 1em 0 0.5em 0;
    font-style: italic;
    font-weight: bold;
    font-size: 1.5em;
}

#sharon-mayfield-summer-dance-intensive figure.vertical {
    width: 320px;
    max-width: 100%;
    margin: auto;
}

#sharon-mayfield-summer-dance-intensive p {
    margin-top: 1em;
    margin-bottom: 1em;
}

#sharon-mayfield-summer-dance-intensive table {
    margin-top: 0em;
}

#sharon-mayfield-summer-dance-intensive h1 + p.subhead {
    font-size: 1.5em;
    margin-top: -0.5em;
    margin-bottom: 1em;
    font-style: italic;
    font-weight: bold;
}