style.css

/* css Zen Garden default style v1.02 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */

/* Colors

*Primary*
White: #f6f4ec;
Green: #9bc152;
Navy-Gray: #282932;

*Secondary*
Medium Green: #81a53d;
Dark Green: #708647;
Grays: #8b8d9b and #6d6f81;
Blues: #6b6d85 and #47495d;
Dark Navy: #1b1b21;  */

/* Webfonts */
@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400italic|Alegreya+Sans:400,400italic|Alegreya:400italic,900italic);

/* Basic Elements */
html {
	margin: 0;
	padding: 0;
}
body { 
  font-family: 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  font-size: 1.25em;
  line-height: 1.6;
	margin: 0; 
	padding: 0;
  color: #282932; 
	background: #f6f4ec;
  font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern=1", "liga=1";
  -ms-font-feature-settings: "kern", "liga";
  -o-font-feature-settings: "kern", "liga";
  -webkit-font-feature-settings: "kern", "liga";
}

p { 
  margin: 0;
}

p + p {
  text-indent: 1.5em;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Alegreya', Georgia, serif;
  font-weight: normal;
  font-style: italic;
  color: #9bc152;
}

h1 {
  font-size: 3.157em;
  line-height: 1.1;
}

h2 {
  font-size: 2.369em;
  line-height: 1.15;
  margin: 0 0 .54em;
}

h3 { 
  font-size: 1.777em;
  line-height: 1.2;
  margin: .9em 0 .62em;
}

ul {
	margin: 0;
}

li {
	margin: 0;
}

a:link { 
	text-decoration: none;
  transition: all 0.4s ease;

}
a:visited { 
	text-decoration: none; 
}

a:hover, a:focus, a:active { 
	text-decoration: none; 
}

abbr {
  font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  text-transform: lowercase;
}

::selection {
}


/* Specific Styles */

header {
  padding: 10em 4%;
  text-align: center;
  animation: fadein 2s;
  	-webkit-animation: fadein 2s; /* Safari and Chrome */
	  -moz-animation: fadein 2s; /* Firefox */
	  -ms-animation: fadein 2s; /* Internet Explorer */
	  -o-animation: fadein 2s; /* Opera */
}

header h1 {
  font-size: 6.2em;
  font-weight: 900;
  color: #282932;
  margin: 0;
}

header h2 { 
  font-family: 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  font-size: 1.777em;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-style: normal;
}

header abbr {
  text-transform: uppercase;
}

.summary {
  color: #f6f4ec;
  background: #9bc152;
  text-align: center;
  padding: 1.5em 6%;
}

.summary p {
  font-size: 1.333em;
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.4;
  font-style: italic;
}

.summary p + p {
  text-indent: 0;
  font-style: normal;
  font-size: 1em;
  margin-top: .2em;
  color: #708647;
}

.summary a {
  font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  color: #708647;
  border-bottom: 1px solid #708647;
}

.summary a:hover {
  color: #f6f4ec;
  border-bottom: 1px solid #f6f4ec;
}

.preamble, .requirements {
  background: #282932;
  padding: 4em 6%;
}

.preamble h3, .requirements h3 {
  max-width: 34rem;
  margin: 0 auto .62em;
}

.preamble p, .requirements p {
  max-width: 34rem;
  margin: 0 auto;
  color: #f6f4ec;
}

.requirements a {
  color: #f6f4ec;
  border-bottom: 1px solid #f6f4ec;
}

.requirements a:hover {
  color: #9bc152;
  border-bottom: 1px solid #9bc152;
}

.requirements p:last-of-type {
  max-width: 92%;
  text-align: center;
  font-style: italic;
  text-indent: 0;
  padding-top: 4em;
  color: #6d6f81;
}

.requirements p:last-of-type a {
  color: #9bc152;
  border-bottom: none;
}

.requirements p:last-of-type a:hover {
  color: #f6f4ec;
  border-bottom: none;
}

.benefits {
  background: #1b1b21;
  padding: 4em 6%;
}

.benefits h3 {
  max-width: 34rem;
  margin: 0 auto .62em;
  color: #8b8d9b;
}

.benefits p {
  max-width: 34rem;
  margin: 0 auto;
  color: #6d6f81;
}

.explanation, .participation {
  width: 50%;
  box-sizing: border-box;
}

.explanation {
  float: left;
  padding: 4em 10% 4em 8%;
}

.participation {
  display: inline-block;
  padding: 4em 8% 4em 10%;
  background: #9bc152;
}

.explanation h3, .participation h3 {
  margin: 0 auto .62em;
}

.explanation p, .participation p {
  margin: 0 auto;
}

.participation h3 {
  color: #f6f4ec;
}

.participation a {
  color: #282932; 
  border-bottom: 1px solid #282932;
}

.participation a:hover {
  color: #f6f4ec; 
  border-bottom: 1px solid #f6f4ec;
}

.participation p:last-of-type a:nth-of-type(1), .participation p:last-of-type a:nth-of-type(2) {
  font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  text-transform: lowercase;
}

footer {
  background: #9bc152;
}

footer:after {
  content: " ";
  display: table;
  clear: both;
}

footer a {
  float: left;
  box-sizing: border-box;
  width: 20%;
  text-align: center;
  background: #9bc152;
  padding: 1em 0;
  color: #f6f4ec;
  letter-spacing: .05em;
}

footer a:nth-of-type(even) {
  background: #81a53d;
}

footer a:hover {
  background: #f6f4ec;
  color: #9bc152;
}

aside {
  width: 100%;
}

.sidebar {
  background: #1b1b21;
  color: #47495d;
  padding: 4em 0;
  text-align: center;
}

.design-selection {
  float: left;
  width: 60%;
  font-style: italic;
  box-sizing: border-box;
  border-right: 1px solid #47495d;
}

.design-archives, .zen-resources {
  display: inline-block;
  width: 40%;
}

.sidebar h3 { 
  font-size: .75em;
  margin: 0;
  line-height: 1.6;
  padding: .5em 4%;
  color: #6b6d85;
}

.sidebar ul {
  padding: 0;
}

.sidebar li {
  list-style-type: none;
  padding: .3em 2%;
}

.sidebar a {
  font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  font-style: normal;
  color: #9bc152;
  letter-spacing: 0.06em;
}

.sidebar a:hover {
  color: #f6f4ec;
}

.design-selection a:nth-of-type(even) {
  font-family: 'Alegreya Sans', Verdana, Tahoma, sans-serif;
  letter-spacing: 0;
  color: #f6f4ec;
}

.sidebar a:hover:nth-of-type(even) {
  color: #47495d;
}

.zen-resources h3 {
  padding-top: .92em;
}

.design-archives a, .zen-resources a {
  color: #47495d;
}

/* Media Queries */

@media (max-width: 64em) {
  body {
    font-size: 1.125em;
  }

  .summary p {
    max-width: 40rem;
  }

  .explanation h3, .participation h3, .preamble h3, .requirements h3, .benefits h3 {
    max-width: 27.5rem;
  }

  .explanation p, .participation p, .preamble p, .requirements p, .benefits p {
    max-width: 27.5rem;
  }
}

@media (max-width: 54em) {
  body {
    font-size: 1em;
  }

  .summary p {
    max-width: 34rem;
  }
}

@media (max-width: 47em) {
  header h1 {
    font-size: 4.5em;
  }

  header h2 {
    font-size: 1.333em;
  }

  .explanation, .participation {
    width: 100%;
    padding: 4em 6%;
  }
}

@media (max-width: 34em) {
  header {
    padding: 6em 4%;
  }
  header h1 {
    font-size: 2.6em;
    line-height: 0.8;
  }

  header h2 {
    font-size: 1em;
    letter-spacing: 0.2em;
    margin-top: 0.3em;
  }

  .summary p {
    font-size: 1em;
    line-height: 1.6;
    max-width: 27.5rem;
  }

  .summary p + p {
    font-size: .9em;
  }

  h3 {
    font-size: 1.333em;
  }

  .design-selection {
    width: 100%;
    border-right: none;
    padding: 0 3%;
  }

  .design-selection li:last-of-type {
    border-bottom: 1px solid #47495d;
    padding-bottom: 3em;
  }

  .design-archives {
    padding-top: 3em;
    width: 100%;
  }

  .zen-resources {
    width: 100%;
  }
}

@media (min-width: 47em) {
  .benefits {
    position: absolute;
    float: left;
    background: none;
    max-width: 7.5rem;
    text-align: right;
    margin-top: 12em;
    left: 50%;
    margin-left: -25.5rem;
  }

  .benefits h3 {
    font-size: 1em;
    margin: 0;
    font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif;
    font-style: normal;
    
  }

  .benefits p {
    font-size: .75em;
    line-height: 1.4;
  }
}

@media (min-width: 54em) {
  .benefits {
    max-width: 8rem;
    margin-top: 12.5em;
    margin-left: -28rem;
  }
}

@media (min-width: 64.125em) {
  .benefits {
    max-width: 9.4rem;
    margin-top: 13.1em;
    margin-left: -34rem;
  }

  aside {
	  position: absolute;
	  top: -26.5em;
	  transition: all 0.4s ease;
    animation: fadein 2s;
  	-webkit-animation: fadein 2s; /* Safari and Chrome */
	  -moz-animation: fadein 2s; /* Firefox */
	  -ms-animation: fadein 2s; /* Internet Explorer */
	  -o-animation: fadein 2s; /* Opera */
  }

  aside:hover {
	  top: -1em;
  }

  aside:after {
	  position: absolute;
	  content: "+";
	  text-align: center;
	  background: #1b1b21;
	  color: #f6f4ec;
	  font-size: 20px;
	  width: 30px;
	  height: 30px;
	  border-radius: 30px;
	  bottom: -0.65em;
	  left: 50%;
	  margin-left: -15px;
  }
}

@media (min-width: 94em) {
  body {
    font-size: 1.375em;
  }

  .summary p {
	max-width: 49rem;
  }

  .benefits {
	max-width: 12.5rem;
	margin-left: -41rem;
  }

  .explanation h3, .explanation p, .participation h3, .participation p {
	width: 34rem;
  }
}

@media (min-width: 120em) {
  body {
    font-size: 1.5em;
  }

  .summary p {
	  max-width: 51rem;
  }

  .preamble h3, .preamble p, .requirements h3, .requirements p {
	  max-width: 37.5rem;
  }

  .explanation h3, .explanation p, .participation h3, .participation p {
  	width: 37.5rem;
  }

  .benefits {
	margin-left: -49rem;
  }
}

/* Animations */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}