body {
/*Just to make the main pages look a little nicer.*/
font-family: "Cantarell", Verdana, sans-serif;
font-size: 0.95em;
background: #353842;
}
a {
color: #dedee0;
}
/*No style, used to keep footer et al contained.*/
.main-container {
}
/*Pages go in here.*/
.story-container {
width: 480px;
height: 680px;
border: 1px solid #000;
margin: 0 auto;
margin-top:20px;
overflow: hidden;
}
/*Individual pages of the story.*/
.page {
width: 480px;
height: 680px;
overflow: auto;
position:relative;
}
.page-content {
padding: 25px 15px 15px 15px;
/*Extra padding at top is for the page number - remove if unused.*/
}
.page-number {
position: absolute;
float: right;
right:0;
padding: 15px;
}
/*To keep choices always at the bottom of the page.*/
.stick-to-bottom {
position:absolute;
bottom:0;
width: 480px;
}
/*Optional footer buttons.*/
.footer {
width: 480px;
margin: 0 auto;
margin-top: 15px;
padding-bottom: 15px;
}
.left {
float: left;
padding-left:2px;
}
.right {
float: right;
right: 0;
padding-right:2px;
}
/*Standard page styling base.*/
.page {
background: #eee url(/creations/conlangs/006-Paper-Kraft.jpg); /*REPLACE WITH YOUR OWN - DO NOT HOTLINK*/
color: #000;
}
.page a {
color: #006653;
}
.page a:focus, .page a:hover {
color: #00977b;
}
.page a:focus {
outline: 1px solid #006653;
}
/*Special styling for the example game.*/
.ancient {
background: url(/creations/conlangs/006-Paper-Kraft_alt.jpg); /*REPLACE WITH YOUR OWN - DO NOT HOTLINK*/
box-shadow: inset 0 0 25px 0px rgba(15,5,0,0.9);
font-family: "Symbola", Symbola, Goudy Stout, Palatino, serif;
font-weight:bold;
color: #000;
}
.ancient hr {
height:2px;
border:0;
margin-left:0;
margin-right:0;
background: linear-gradient(to left, rgb(0,0,0,0), #421810 ,rgb(0,0,0,0));
}
.ancient a {
color: #3d120a;
}
.ancient a:focus, .ancient a:hover {
color: #661608;
}
.ancient a:focus {
outline: #421810 1px solid;
}
.ancient .page-number {
padding: 20px 20px 10px 10px;
}
.ancient .page-content {
padding: 40px;
}
.ancient .stick-to-bottom {
padding-bottom: 40px;
padding-right: 40px;
width: 400px;
}
.byline {
font-size: 0.9em;
font-style:italic;
}
/*Support for mobile and narrow screens*/
@media(max-width: 480px) {
.story-container, .footer, .page, .ancient .page {
margin:0;
padding:0;
width: 100%;
}
.ancient .stick-to-bottom {
margin:0;
padding:0;
width: 85%;
position: static;
}
.ancient .stick-to-bottom {
padding-bottom: 5%;
margin: 0 auto;
}
}