/* custom.css
   do whatever you want here, for the presentation
   you've built in your HTML files.
   If you have a favourite CSS framework -- Bootstrap or Foundation,
   maybe -- then using that is probably a good idea :-)
*/

body {
  background-position: center center;
  background-repeat:no-repeat;
}
#feeble-slide p {
  text-align: center;
  padding:0.5em 1em;
  margin:0;
}
.small-box {
  width: 33%;
  margin: 1.5em;
  background-color: #fff;
  border-radius: 1em;
  opacity:0.75;
}
.central-column {
  width: 60%;
  margin: 1.5em auto 0 auto;
  background-color: #fff;
  border-radius: 1em;
  opacity:0.75;
  position:relative;
}
.central-column.full-opacity {
  opacity: 1;
}
.central-column.extra-wide {
  width:82%;
}
.central-column.extra-narrow {
  width: 50%;
}
.central-column ul {
  margin-top: 0.2em;
}
.central-column ul li {
  margin-left: 0.333em;
  padding-bottom: 0.333em;
  line-height:1.1em;
}
.at-bottom {
  bottom:0em;
  left:0;
  position:absolute;
  width: 100%;
  border-radius:0;
}
.white-on-black {
  background-color: #000;
  color:white;
}
.on-white {
  background-color: #fff;
}
.weak-text {
  font-size:75%;
  color:#666;
  line-height:1.2em;
}
.tiny-text {
  font-size:50%;
  color:#666;
  line-height:1.2em;
}
.beholder-link {
  margin-top:6em;
  font-size: 50%;
}
.code-example {
  display:block;
  background-color:#fff;
  font-size:50%;
  text-align:left;
  line-height:1.1em;
  margin:2em;
  border: 1px solid #000;
  padding:1em;
  font-family:monospace;
  -moz-box-shadow: 6px 6px 5px #CCC;
  -webkit-box-shadow: 6px 6px 5px #CCC;
  box-shadow: 6px 6px 5px #CCC;
}
.renumber-example {
  position: relative;
  padding:0 2em;
}
#feeble-slide .renumber-example p.code-example {
  font-size:90%;
  text-align:left;
  width:33%;
}
.demo-white-on-black {
  background-color: black;
}
.demo-white-on-black p {
  color: white;
}
.demo-white-on-black p.weak-text {
  color: #ccc;
}
.left {
  float:left;
}
.right {
  float:right;
}
span.demo-highlight {
  background-color: #000;
  color: #0f0;
}
#count-results {
  display:none;
  position:absolute;
  top:2.5em;
  right:1em;
  -moz-box-shadow: 6px 6px 5px #000;
  -webkit-box-shadow: 6px 6px 5px #000;
  box-shadow: 6px 6px 5px #000;
  z-index: 10;
}
#count-results table {
  padding:0.3em;
  background-color: #000;
  color: #0f0;
  line-height: 1.3em;
  font-size: 100%; 
  border: 2px solid #0f0;
  font-family: monospace;
}
#count-results table td {
  padding: 0.2em;
}
#count-results td#total-consonants, #count-results td#total-vowels {
  text-align: right;
  width:2em;
}
#count-results td#total-vowels.demo-zero {
  color: #f00;
}
div.highlight-one a{
  color: white;
  font-weight:bold;
  text-decoration:none;
  padding:0.1em;
  background-color:#cc0000;
}
div.highlight-one a:hover{
  background-color:#640000;
}
div.highlight-one {
  background-color: red;
  color: white;
  padding:0.5em 0.5em 0.5em 1em;
  margin:0;
}
div.highlight-two {
  background-color: orange;
  color: black;
  padding:0.5em 0.5em 0.5em 1em;
  margin:0;
}
div.highlight-two code, div.highlight-three code {
  font-weight:bold;
}
div.highlight-three {
  background-color: yellow;
  color: black;
  padding:0.5em 0.5em 0.5em 1em;
  margin:0;
}
div.highlight-four {
  background-color: green;
  color: white;
  padding:0.5em 0.5em 0.5em 1em;
  margin:0;
}
div.highlight-five {
  background-color:black;
  color: #999;
  padding:0.5em 0.5em 0.5em 1em;
  margin:0;
}
div.highlight-five a {
  font-size:70%;
  color: #999;
  text-decoration: none;
}
div.highlight-five a:hover {
  color:white;
}
.at-very-top {
  position:fixed;
  top:0;
  left:0;
}
a.image-credit {
  font-size:0.5em;
  display: inline-block;
  padding:0 0.333em;
  color: white;
  position: absolute;
  background-color:transparent;
  opacity:0.5;
  transition: opacity 1s, background-color 1s;
  text-decoration: none;
}
a.image-credit.dark-on-light {
  color: black;
}
a.image-credit:hover, a.image-credit.dark-on-light:hover {
  opacity: 1;
  color: white;
  background: black;
}
a.image-credit.at-bottom-right {
  bottom: 0;
  right: 0;
}
a.image-credit.at-bottom-left {
  bottom: 0;
  left: 0;
}
a.image-credit.at-top-left {
  top: 0;
  left: 0;
}
.key-button {
  border:1px solid gray;
  padding:0.1em 0.3em;
  border-radius: 0.2em;
  font-weight: bold;
}
#feeble-slide p.final-slide-hint {
  text-align:left;
  color:#ccc;
  margin:12px 230px 0 0;
  background:black;
  float:left;
}
body.demo {
  background: url(demo-images/random_sky.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body.demo-code {
  background-image: url(demo-images/green_torus.png); 
  background-repeat: repeat;
}
body.demo-albert-hall {
  background-image: url(demo-images/pennymaycock_4727397006.jpg);   
}
body.demo-bittern {
  background-image: url(demo-images/pennymaycock_5226316014.jpg);   
}
body.demo-cliffs {
  background-image: url(demo-images/pennymaycock_5032823700.jpg);   
}
body.demo-doggie {
  background-image: url(demo-images/pennymaycock_4615986623.jpg); 
}
body.demo-ducklings {
  background-image: url(demo-images/pennymaycock_14516593551.jpg);   
}
body.demo-horse {
  background-image: url(demo-images/pennymaycock_4632837254.jpg);   
}
body.demo-jumping-doggie-right {
  background-image: url(demo-images/pennymaycock_14333230290_right.jpg); 
}
body.demo-jumping-doggie-left {
  background-image: url(demo-images/pennymaycock_14333230290_left.jpg); 
}
body.demo-lamb {
  background-image: url(demo-images/pennymaycock_4582186480.jpg); 
}
body.demo-leaves {
  background-image: url(demo-images/pennymaycock_5131277181.jpg);   
}
body.demo-reveal-dog {
  background-image: url(demo-images/pennymaycock_7029826929.jpg); 
}
body.demo-seals {
  background-image: url(demo-images/pennymaycock_8705386168.jpg);   
}
body.demo-steps {
  background-image: url(demo-images/pennymaycock_14470512781.jpg); 
}

/* 
   really, presentations are for full-sized screens:
   this is for rehearsal-mode
*/
@media (max-width: 760px) {
  body {
    font-size:1.2em;
  }
  .central-column,
  .central-column.extra-wide,
  .central-column.extra-narrow {
    width:90%;
  }
  .tiny-text {
    font-size:75%;   
  }
  .image-credit {
    font-size:75%;
  }
}