@import "reset.css";

/*
------------------------------------------------------------------------------------------
VIRTUAL STAN 10TH ANNIVERSARY EDITION BASE SCREEN STYLES
------------------------------------------------------------------------------------------
© 2015 Rob Weychert.
All rights reserved.

------------------------------------------------------------------------------------------
CONTENTS
------------------------------------------------------------------------------------------
1. Core Styles
2. Interface
   a. Demeanors
   b. Phrases
3. Layout
   a. Narrow ........... 0px - 500px
   b. Medium ......... 500px - 800px
   c. Wide ........... 800px - infinity

------------------------------------------------------------------------------------------
1. Core Styles
------------------------------------------------------------------------------------------
*/

body {
  font: normal 100% acuta,Arial,serif; /* 16px */
  line-height: 1.25em;
  color: #333;
  }

header,
footer,
.share { 
  font-family: 'BaseTwelveSansSCMedium', Helvetica, Arial, Verdana, sans-serif;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: .05em;
  }

header { 
  color: #5f82a0;
  margin-bottom: .75em;
  }

footer {
  color: #c8d7e6;
  margin: 2em 0;
  }

h1,
h2 { line-height: 1em; }

h1 { font-size: 3em; }

h2,
.share,
footer,
.interface li { font-size: 1.125em; } /* 18px */

h6.classic { margin-top: 1em; }

img { display: block; width: 100%; }

i { display: none; }

a,
span {
  color: #5f82a0;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  }
  
a:hover { color: #ff5a3c; }
a:active { color: #c84b4b; }

.share { background: #5f82a0; }
.share a { color: #fff; }

/*
------------------------------------------------------------------------------------------
2. Interface
------------------------------------------------------------------------------------------
2a. Demeanors
---------------------------------------------
*/

input[type="radio"] {
  display: none;
  }
input[type="radio"]:checked + label span {
  background-color: #ff5a3c;
  }

span {
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  background-color: #c8d7e6;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.5em 1.5em;
  }
span:hover {
  background-color: #5f82a0;
  }

input#jovial[type="radio"] + label span {
  background-image: url("jovial.svg");
  }
input#stoic[type="radio"] + label span {
  background-image: url("stoic.svg");
  }
input#angry[type="radio"] + label span {
  background-image: url("angry.svg");
  }
input#box[type="radio"] + label span {
  background-image: url("box.svg");
  }

/*
---------------------------------------------
2b. Phrases
---------------------------------------------
*/

ul.jovial li.stoic,
ul.jovial li.angry,
ul.jovial li.box,
ul.stoic li.jovial,
ul.stoic li.angry,
ul.stoic li.box,
ul.angry li.jovial,
ul.angry li.stoic,
ul.angry li.box,
ul.box li.jovial,
ul.box li.stoic,
ul.box li.angry { display: none; }

li:nth-child(odd) a { background: #e5ebf3; }
li:nth-child(even) a { background: #c8d7e6; }

li a,
.share a {
  display: block;
  padding: .5em 1em;
  }

li a:hover { cursor: default; }
li a:hover,
.share a:hover {
  color: #fff;
  background: #ff5a3c;
  border: none;
  }

li a:active,
.share a:active {
  color: #fff;
  background: #c84b4b;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  }

.share a { padding-bottom: .75em; }

/*
------------------------------------------------------------------------------------------
3. Layout
------------------------------------------------------------------------------------------
3a. Narrow
---------------------------------------------
*/

nav li { 
  width: 50%;
  display: inline-block;
  }
nav li a { padding: .5em 0; }

.demeanors {
  margin: 1em 0;
  text-align: center;
  line-height: 0;
  }
.demeanors span {
  display: inline-block;
  margin: 0 .5em;
  }

/*
---------------------------------------------
3b. Medium
---------------------------------------------
*/

@media all and (min-width: 500px) {

body {
  padding: 5%;
  margin: 0 auto;
  }

header { margin-bottom: 1.5em; }

h1 { font-size: 4em; }

}

/*
---------------------------------------------
3c. Wide
---------------------------------------------
*/

@media all and (min-width: 800px) {

body {
  padding: 2.5%;
  max-width: 100em;
  }

header {
  float: right;
  width: 37.5%;
  text-align: left;
  }

.image-swap {
  width: 60%;
  float: left;
  clear: left;
  }

h1 { font-size: 3em; }

#content { padding: 0; }

.stan { image-rendering: pixelated; }

.stan { border-top-left-radius: 1em; }
.share,
.share a,
.share a:hover,
.share a:active { border-bottom-left-radius: 1em; }

.share,
footer { margin-bottom: 5%; }

.interface,
footer {
  margin-left: 62.5%;
  clear: right;
  }

.demeanors { text-align: left; }
.demeanors span { margin: 0 1em 0 0; }

footer { text-align: left; }

}