@charset "utf-8";
/*
This CSS file belongs to - page-name.html and it's by Eric Miner and The Miner Bits - eric@minerbits.com
*/
/*NOTES and Tips*/
/* Code for Hanging Puncuation - Sample Uses Opening Quotation Mark.
“
.hanging-punctuation-start {position: absolute; right: 100%;}
*/
/*
animation: myAnimation 1s ease-in-out 2s 4;
That is, animation:
*/
/* Media Query Examples -
@media only screen and (min-width: 801px) and (max-width: 1050px) {
.intro {width: 60%;}}
@media only screen and (min-width: 1051px) and (max-width: 1299px) {
.intro {width: 48%;}}
@media only screen and (min-width: 1300px) and (max-width: 1460px) {
.intro {width: 45%;}}
@media only screen and (min-width: 1451px) and (max-width: 1681px) {
.intro {width: 37%;}}
*/
/*
The NEW YORKER's Drop Cap Treatment
#articlebody p.descender:first-letter,span.descendertwo {
font-size:4em;
line-height:.8em;
margin-right:2px;
margin-top:5px;
display:block;
float:left;
}
****NOTE:Mozilla does not recognize line-height for first-letter
#articlebody p.descender-two {
padding-top:10px;
text-indent:0;
}
span.first-two {
display:block;
float:left;
font-size:3em;
line-height:.8em;
margin-right:2px;
}
*/
/* =============================================================================
Begin THE TOP OF THE TREE
========================================================================== */
html {font-size: 16px;}
* {box-sizing: border-box;}
body {
margin: 0 auto;
padding: 0;
position: relative;
background: #FFF;
/*background: url(../images/web-bits/geometry2A-65pcnt.png);*/
color: #040404;}
img {max-width: 100%; border-radius: .25rem;}
h1 {font-size: 6rem;}
h2 {font-size: 40px; font-size: 2.5rem;}
h3 {font-size: 32px; font-size: 2rem; margin-left: 6rem;}
h4 {font-size: 28px; font-size: 1.75rem; margin-top: 0;}
h5 {font-size: 24px; font: 700 1.5rem/1 "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif; margin-bottom: -.25rem; margin-left: 5rem;}
h6 {font-size: 16px; font-size: 1rem; font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-weight: 400; margin: 0 auto 2rem auto;}
p {margin: 1.5rem 8rem;}
li {margin: 1rem 5rem;}
blockquote {font-style: italic;}
blockquote p {margin: 1rem 6rem 0 6rem;}
blockquote a {font-size: 20px; font-size: 1.25rem;}
blockquote a:last-of-type {font-size: 18px; font-size: 1.127rem;}
strong {font-weight: 400;}
blockquote span, cite, strong {font-size: 14px; font-size: 0.875rem;}
strong {margin-bottom: -.25rem; display: block;}
blockquote span {display: block; font-style: normal;}
.hanging {display: inline-block; text-indent: -0.65rem;}
figure {margin-top: 4rem;}
figure>h3 {margin-bottom: .25rem; }
figcaption {text-align: left; font-size: .875rem; text-align: center;}
figcaption p {font-size: 18px; font-size: 1.125rem;}
ul {margin-bottom: 0; margin-left: .75rem;}
/*cite {font-style: italic;}*/
/* =============================================================================
Begin PAGE HEADER
========================================================================== */
.page-header {
font: 700 1rem/.25 "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif;
text-align: right;
margin-right: 8rem;}
.page-header h2 {font-size: 32px; font-size: 2rem;}
/* =============================================================================
Begin MAIN NAV
========================================================================== */
.main-nav {
text-align: right;
margin-right: 8rem;
font: 700 1.25rem/1 "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {
.page-header, .main-nav {margin-right: 2rem;}}
.main-nav h3 {font-size: 24px; font-size: 1.5rem;}
/* =============================================================================
Begin MAIN CONTENT
========================================================================== */
.main-content {
width: 90%;
/*position: relative;*/
display: flex;
flex-flow: column wrap;
margin: 0 auto;
font: 400 18px/1.5 "rooney-sans", Arial, Helvetica, sans-serif;
font: 400 1.125rem/1.5 "rooney-sans", Arial, Helvetica, sans-serif;}
.main-content blockquote {font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic;}
.main-content section {width: 50%;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {.main-content section {width: 90%;}}
@media only screen and (min-width: 1051px) and (max-width: 1299px) {.main-content section {width: 78%;}}
@media only screen and (min-width: 1300px) and (max-width: 1460px) {.main-content section {width: 70%;}}
@media only screen and (min-width: 1451px) and (max-width: 1681px) {.main-content section {width: 57%;}}
.main-content h2, h3 ,h4 {font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.main-content h2 {margin-bottom: 0; text-align: center;}
.main-content h3 {margin-bottom: -2rem; /*text-indent: -4rem;*/}
section {position: relative;}
.intro {margin: 0 auto;}
.intro blockquote {margin-top: -19.5rem; font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: normal;}
.intro blockquote p {margin: 1rem 0 0 8rem;}
h3 ~ blockquote {margin-top: 2rem;}
.intro, .the-internet-web, .web-pages, .web-browsers {margin: 0 auto;}
.intro span {margin-bottom: 4rem;}
.the-internet-web {margin-top: 8rem;}
.web-pages {margin-top: 8rem;}
.web-browsers {margin-top: 8rem;}
.my-cite {font-size: 16px; font-size: 1rem; font-style: normal; margin-top: .5rem;}
.the-internet-web img, .web-pages img {display: block; margin: 0 auto; text-align: center;}
.internet-map {}
.internet-map img {
max-width: auto;
margin: 0 auto;}
.internet-map figcaption {text-align: center; width: 100%;}
.alice-falling-fig {margin-top: 12rem; margin-bottom: 20rem;}
.continue-falling {
height: 660px;
display: flex;
justify-content: center;
margin: -4rem 0 4rem 0;}
.continue-falling img {margin: auto 0;}
/*.continue-falling > img:nth-of-type(1) {position: relative; top: 30%;}
.continue-falling > img:nth-of-type(2) {position: relative; top: 10%;}
.continue-falling > img:nth-of-type(3) {position: relative; top: -10%;}*/
.continue-falling > img:nth-of-type(3) {position: relative; top: 30%;}
.continue-falling > img:nth-of-type(2) {position: relative; top: 10%;}
.continue-falling > img:nth-of-type(1) {position: relative; top: -10%;}
.continue-falling h3 {position: absolute; top: 24%; margin-left: 0;}
/*.alice-credits {display: block; position: relative; margin: -8rem 0 0 43%;}*/
.alice-credits {display: block; position: relative; margin: -12rem 0 0 25%;}
.secondary-nav {position: relative; margin-left: 10%; margin-top: 6rem;}
h6>a {font-size: 20px; font-size: 1.25rem; font-weight: 700;}
dfn h3 {font-style: normal;}
.alice-then-now {display: flex; flex-wrap: wrap; justify-content: center;}
/* =============================================================================
Begin PAGE FOOTER
========================================================================== */
.page-footer {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 8rem;
margin-top: 8rem;
font: 400 18px/1.5 "rooney-sans", Arial, Helvetica, sans-serif;
font: 400 1.125rem/1.5 "rooney-sans", Arial, Helvetica, sans-serif;}
.page-footer blockquote {
width: 45%;
/*margin: 0 auto; */
font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-style: normal;
font-size: 18px;
font-size: 1.125rem;}
@media only screen and (min-width: 801px) and (max-width: 1050px) {
.page-footer {flex-direction: column;}
.page-footer blockquote {width: 86%;}
}
@media only screen and (min-width: 1051px) and (max-width: 1280px) {
.page-footer {flex-direction: column;}
.page-footer blockquote {width: 70%;}}
@media only screen and (min-width: 1281px) and (max-width: 1460px) {.page-footer blockquote {width: 75%;}}
.page-footer figure {margin-top: auto;}
.page-footer p {margin: 1rem 8rem 0 8rem;}
/*.page-footer blockquote {margin-top: 2rem; font-family: "rooney-web", "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: normal;}
.page-footer blockquote p {margin: 1rem 0 0 2rem;}*/
/* =============================================================================
Begin EXTRAS! EXTRAS! EXTRAS!
========================================================================== */
/*BEGIN Links Styling*/
/*Eric Meyer's recommended order - link-visited-focus-hover-active*/
a:link, a:visited {
font-weight: 500;
outline : none;
color: #942B42;
text-decoration : none;
/*border-bottom: 1px solid rgba(187,199,250,.5);*/
box-shadow: 0 -4px 1px rgba(187,199,250,.5) inset;
/*box-shadow: 0 4px 2px rgba(187,199,250,.5);*/
-webkit-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;}
a:hover {
box-shadow: none;
color: #0000CC;
border-bottom: 3px dotted orange;
-webkit-transition: color .5s ease-in-out;
transition: color .5s ease-in-out;}
blockquote a:link {font-style: italic;}
/*End of Links Styling*/