/*adult ballet style 2024 */
html, body {margin: 0; padding: 0; overflow: auto; }
body {margin: 0; padding: 0; background-color: #000000; font-family: font-family: Arial, Helvetica, san-serif;
 color: rgb(255, 255, 255); overflow: hidden; }
h1 h2 h3 h3 a p ul ol {margin: 0; padding: 0; }

ul {margin: 0; list-style-type: disc; font-family: arial, san-serif; color: #ffffff; }

.black {color: #000000; }
.copper {color: #a65710; }
.paleyellow {color:#f5b886; }
.liteyellow {color: #fae570; }
.linkyellow {color: #fbdcc2 }
.darkcopper {color:#7a4310; }
.brightcopper {color:#dc8740; }
.litecopper {color: #faa85f; }
.litestcopper {color: #f9d6b7; }
.white {color: #ffffff; }

#contentbox {width: 100%; background-image:url(../images/ballet-shoes-1680.jpg); background-position: 50% .5%; background-repeat:no-repeat; max-width: 1680px; z-index: 2; }
@media only screen and (max-width: 360px) {
#contentbox {background-image:url(../images/ballet-shoes-360.jpg); background-position: 50% .9%; z-index: 2; }
}
@media only screen and (min-width: 361px) and (max-width: 479px) {
#contentbox {background-image:url(../images/ballet-shoes-480.jpg); background-position: 50% 1.5%; }
}
@media only screen and (min-width: 480px) and (max-width: 600px) {
#contentbox {background-image:url(../images/ballet-shoes-600.jpg); background-position: 50% 1%; }
}
@media only screen and (min-width: 601px) and (max-width: 639px) {
#contentbox {background-image:url(../images/ballet-shoes-640.jpg); background-position: 50% 1.5%; }
}
@media only screen and (min-width: 640px) and (max-width: 719px) {
#contentbox {background-image:url(../images/ballet-shoes-720.jpg); background-position: 50% 0; }
}
@media only screen and (min-width: 720px) and (max-width: 768px) {
#contentbox {background-image:url(../images/ballet-shoes-768.jpg); background-position: 50% 0; }
}
@media only screen and (min-width: 769px) and (max-width: 800px) {
#contentbox {background-image:url(../images/ballet-shoes-800.jpg); background-position: 50% 0; }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
#contentbox {background-image:url(../images/ballet-shoes-1024.jpg); background-position: 50% 2.6%; }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
#contentbox {background-image:url(../images/ballet-shoes-1280.jpg); background-position: 50% 1%; }
}


h1 {color: #fbdf41; font-family: "Garamond", serif; font-size: 464%; text-align: left; text-shadow: 2px 2px #000000; padding: 0 0 0 12%; max-width: 1680px; z-index: 10; }

@media only screen and (max-width: 360px) {
h1 {font-size:320%; padding: 0 20% 0 7%; }
}
@media only screen and (min-width: 361px) and (max-width: 375px) {
h1 {font-size:360%; padding: 0 15% 0 7%; }
}
@media only screen and (min-width: 376px) and (max-width: 479px) {
h1 {font-size:360%; padding: 3% 10% 0 7%; }
}
@media only screen and (min-width: 480px) and (max-width: 639px) {
h1 {font-size:420%; padding: 0 10% 0 7%; }
}
@media only screen and (min-width: 640px) and (max-width: 719px) {
h1 {font-size:460%; padding: 0 10% 0 7%; }
}
@media only screen and (min-width: 720px) and (max-width: 768px) {
h1 {font-size:460%; padding: 0 10% 0 7%; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
h1 {font-size:454%; padding: 0 0 0 7%; }
}

.subtitle {font-size: 60%; color:inherit; line-height: 90%; padding: 2% 0 0 0; margin: 0;}
@media only screen and (max-width: 360px) {
.subtitle {font-size: 68%; line-height: 100%; padding: 5% 0 0 0 }
}
@media only screen and (min-width: 361px) and (max-width: 479px) {
.subtitle {font-size:60%; line-height: 110%; padding: 5% 0 0 0; }
}
@media only screen and (min-width: 361px) and (max-width: 479px) {
.subtitle {font-size:60%; line-height: 110%; padding: 5% 0 0 0; }
}
@media only screen and (min-width: 480px) and (max-width: 679px) {
.subtitle {font-size:58%; line-height: 100%; padding: 5% 0 0 0; }
}
@media only screen and (min-width: 680px) and (max-width: 768px) {
.subtitle {font-size:60%; line-height: 100%; padding: 2% 0 0 0; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.subtitle {font-size:60%; line-height: 100%; padding: 1% 0 0 0; }
}

.copperbox {width: 100%; background-color: rgba(166,87,16,.7); padding: 2% 0 1,5% 0%; margin: 0; max-width: 1680px; z-index: 15;}
@media only screen and (max-width: 1024px) {
#copperbox {background-color: rgba(166,87,16,.8); padding: 2.5% 0 1.5% 0%; }
}


.maininfo {color: #ffffff; font-size: 168%; line-height: 200%; padding: 1% 0 1% 12%; width: 90%; margin: 0; }
@media only screen and (max-width: 320px) {
.maininfo {font-size: 112%; padding: 01% 0 2% 7%; width:80%; }
}
@media only screen and (min-width: 321px) and (max-width: 360px) {
.maininfo {font-size: 120%; padding: 1% 0 2% 7%; width:70%; }
}
@media only screen and (min-width: 361px) and (max-width: 480px) {
.maininfo {font-size: 126%; padding: 1% 0 2% 7%; width:86%; }
}
@media only screen and (min-width: 481px) and (max-width: 600px) {
.maininfo {font-size: 128%; padding: 1% 0 2% 7%; width:86%; }
}
@media only screen and (min-width: 601px) and (max-width: 719px) {
.maininfo {font-size: 136%; padding: 1% 0 2% 7%; width:88%; }
}
@media only screen and (min-width: 720px) and (max-width: 768px) {
.maininfo {font-size: 136%; padding: 1% 0 2% 7%; width:88%; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.maininfo {font-size: 154%; padding: 1% 0 2% 7%; width:88%; }
}



a.top:link {font-size:90%; color: #fbdcc2; font-weight:normal;padding: 1px 3px;text-decoration:none; }
@media only screen and (max-width: 720px) {
a.top:link {font-size:80%; padding: 1px 2px; }
}


a.top:visited {font-size:90%; color: #fbdcc2; font-weight:normal;padding: 1px 3px;text-decoration:none; }
@media only screen and (max-width: 720px) {
a.top:visited {font-size:80%; padding: 1px 2px; }
}


a.top:hover {font-size:90%; color:#ffffff; font-weight:normal;padding: 1px 3px;text-decoration:underline; }
@media only screen and (max-width: 720px) {
a.top:hover {font-size:80%; padding: 1px 2px; }
}



h2 {color: #fbdf41; font-family: "Garamond", serif;font-size: 270%; text-align: left; text-shadow: 2px 2px #000000; padding: .6% 
0 0 12%; z-index: 10; }
@media only screen and (max-width: 360px) {
h2 {font-size: 160%; padding: 1% 0 0 7%; }
}
@media only screen and (min-width: 361px) and (max-width: 480px) {
h2 {font-size: 180%; padding: 1% 0 0 7%; }
}
@media only screen and (min-width: 481px) and (max-width: 600px) {
h2 {font-size: 200%; padding: 1% 0 0 7%; }
}
@media only screen and (min-width: 601px) and (max-width: 720px) {
h2 {font-size: 220%; padding: 1% 0 0 7%; }
}
@media only screen and (min-width: 721px) and (max-width: 768px) {
h2 {font-size: 230%; padding: 1% 0 0 7%; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
h2 {font-size: 246%; padding: 1% 0 0 7%; }
}



.likeh3 {color: #fbdf41; font-family: "Garamond", serif;font-size: 180%; text-align: left; padding: 2% 0 0 0; z-index: 10; }
@media only screen and (max-width: 360px) {
.likeh3 {font-size: 130%; padding: 2% 0 0 0; }
}
@media only screen and (min-width: 361px) and (max-width: 719px) {
.likeh3 {font-size: 140%; padding: 2% 0 0 0; }
}
@media only screen and (min-width: 720px) and (max-width: 1023px) {
.likeh3 {font-size: 170%; padding: 2% 0 0 0; }
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
.likeh3 {font-size: 176%; padding: 2% 0 0 0; }
}


.textbox {width: 100%; background-color: rgba(0,0,0,.5); padding: 1% 0 2% 0%; margin: 0; z-index: 25;}

p {color: #ffffff; font-family: "Arial", san-serif;font-size: 130%; line-height: 180%; width: 70%; padding: 0 0 0 12%; margin: 0; }
@media only screen and (max-width: 360px) {
p {font-size: 110%; line-height: 160%; padding: 0 0 0 7%; width: 85%; }
}
@media only screen and (min-width: 361px) and (max-width: 480px) {
p {font-size: 118%; line-height: 165%; padding: 0 0 0 7%; width: 88%; }
}
@media only screen and (min-width: 481px) and (max-width: 680px) {
p {font-size: 120%; line-height: 165%; padding: 0 0 0 7%; width: 88%; }
}
@media only screen and (min-width: 681px) and (max-width: 720px) {
p {font-size: 116%; line-height: 165%; padding: 0 0 0 7%; width: 88%; }
}
@media only screen and (min-width: 721px) and (max-width: 1024px) {
p {font-size: 114%; line-height: 165%; padding: 0 0 0 7%; width: 86%; }
}


.footerlink {text-align:center; padding: 10px 0 0 0; border-top: 1px #7a4310 solid; margin: 30px 0 20px 0; }

a.footer:link {font-size:76%; color:#f5b886; text-decoration:none; }
a.footer:visited {font-size:76%; color:#f5b886; text-decoration:none; }
a.footer:hover {font-size:76%; color:#f5b886; text-decoration:underline; }


a:link {font-size:100%; color:#ffffff; text-decoration:none; padding: 0; }
@media only screen and (max-width: 480px) {
a.white:link {padding: 0 0 0 0; }
}

a:visited {font-size:100%; color:#ffffff; text-decoration:none; padding: 0; }
@media only screen and (max-width: 480px) {
a.white:visited {padding: 0 0 0 0; }
}

a:hover {font-size:100%; color:#fbdcc2; text-decoration:underline; padding: 0; }
@media only screen and (max-width: 480px) {
a.white:hover {padding: 0 0 0 0; }
}


#legalinfo {clear: both; display: block; color: #ffffff; font-family: "Arial", san-serif; font-size: 88%; line-height: 180%; width: 88%; max-width: 1600px; padding: 0 0 2% 12%; margin: 30px 0 20px 0; }
@media only screen and (max-width: 1023px) {
#legalinfo {padding: 0 0 2% 7%; }
}
@media only screen and (min-width: 1024px) {
#legalinfo {padding: 0 0 2% 12%; width:85% }
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* toggle dropdown box section */

.infobox {padding: 10px 0 0 0; position:relative; } /* ultimate togglebox container */
details.ddbox {text-align:left; z-index: 3; }
summary {cursor: pointer;text-decoration:none; background-color:#000000; color:#f5b886; font-size: 84%; text-align:center; padding: 5px 0 10px 0; border-top: 1px #7a4310 solid; text-decoration:none; } /* clickable button */
@media only screen and (max-width: 375px) {
summary {cursor: pointer; width: 98%; }
}
details[open] summary::after {content: "close"; text-decoration:none; background-color:#000000; color:#f5b886; text-decoration:none; position: absolute; bottom: 0; left: 12%; z-index: 90; } /* internal close button */
@media only screen and (max-width: 1024px) {
details[open] summary::after {position: absolute; bottom: 0; left: 7%; }
}


.info {padding: 0; background-color: #000000; margin: 0 0 15px 0;color: #ffffff; font-size: 96%; max-width: 1600px; overflow:hidden;} /* the dropbox itself */


.infofloat {z-index: 77; } /* what does this do */

/* end of togglebox */

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */