@import url(http://fonts.googleapis.com/css?family=Marck+Script|Droid+Sans+Mono|Architects+Daughter|Permanent+Marker|Rock+Salt|Nothing+You+Could+Do);
/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* atinfo base scss */
/* COMPASS IMPORTS */
/* line 17, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../var/lib/gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* OWN MIXINS */
/* Simple animation with named arguments */
/* line 10, ../sass/screen.scss */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* line 16, ../sass/screen.scss */
body {
  color: white;
  min-height: 100%;
  /*   font-family: 'Nothing You Could Do', cursive;  */
  font-family: 'Architects Daughter', cursive;
  /*   background : rgb(255,255,255); */
}

/* responsivity hacks */
/* line 26, ../sass/screen.scss */
.header {
  display: none;
}

/* line 28, ../sass/screen.scss */
body.error, a.error {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #990000), color-stop(100%, #660000));
  background-image: -webkit-linear-gradient(top left, #990000, #660000);
  background-image: -moz-linear-gradient(top left, #990000, #660000);
  background-image: -o-linear-gradient(top left, #990000, #660000);
  background-image: linear-gradient(top left, #990000, #660000);
  background-image: -ms-linear-gradient(top left, #990000, #660000);
}

/* line 38, ../sass/screen.scss */
body.dark, a.dark {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #4b4b4b), color-stop(100%, #191919));
  background-image: -webkit-linear-gradient(top left, #4b4b4b, #191919);
  background-image: -moz-linear-gradient(top left, #4b4b4b, #191919);
  background-image: -o-linear-gradient(top left, #4b4b4b, #191919);
  background-image: linear-gradient(top left, #4b4b4b, #191919);
  background-image: -ms-linear-gradient(top left, #4b4b4b, #191919);
}

/* line 48, ../sass/screen.scss */
body.green, a.green {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #004b32), color-stop(100%, #001919));
  background-image: -webkit-linear-gradient(top left, #004b32, #001919);
  background-image: -moz-linear-gradient(top left, #004b32, #001919);
  background-image: -o-linear-gradient(top left, #004b32, #001919);
  background-image: linear-gradient(top left, #004b32, #001919);
  background-image: -ms-linear-gradient(top left, #004b32, #001919);
}

/* line 58, ../sass/screen.scss */
body.purple, a.purple {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #4b0000), color-stop(100%, #190000));
  background-image: -webkit-linear-gradient(top left, #4b0000, #190000);
  background-image: -moz-linear-gradient(top left, #4b0000, #190000);
  background-image: -o-linear-gradient(top left, #4b0000, #190000);
  background-image: linear-gradient(top left, #4b0000, #190000);
  background-image: -ms-linear-gradient(top left, #4b0000, #190000);
}

/* line 68, ../sass/screen.scss */
body.blue, a.blue {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #00324b), color-stop(100%, #001919));
  background-image: -webkit-linear-gradient(top left, #00324b, #001919);
  background-image: -moz-linear-gradient(top left, #00324b, #001919);
  background-image: -o-linear-gradient(top left, #00324b, #001919);
  background-image: linear-gradient(top left, #00324b, #001919);
  background-image: -ms-linear-gradient(top left, #00324b, #001919);
}

/* line 78, ../sass/screen.scss */
body.gold, a.gold {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #4b4b00), color-stop(100%, #191900));
  background-image: -webkit-linear-gradient(top left, #4b4b00, #191900);
  background-image: -moz-linear-gradient(top left, #4b4b00, #191900);
  background-image: -o-linear-gradient(top left, #4b4b00, #191900);
  background-image: linear-gradient(top left, #4b4b00, #191900);
  background-image: -ms-linear-gradient(top left, #4b4b00, #191900);
}

/* line 88, ../sass/screen.scss */
a {
  color: #ddd;
  text-decoration: none;
  font-size: 120%;
  font-family: 'Marck Script', cursive;
}

/* line 95, ../sass/screen.scss */
a:hover {
  color: white;
  text-decoration: underline;
}

/* line 101, ../sass/screen.scss */
a.colorLink {
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* line 107, ../sass/screen.scss */
#container {
  margin: 20px auto 0 auto;
  width: 300px;
  /*  @include debug(white); */
}

/* line 113, ../sass/screen.scss */
#fullPageContainer {
  height: 100%;
  width: 100%;
  display: table;
}

/* line 119, ../sass/screen.scss */
#display {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 120%;
  font-family: 'Nothing You Could Do', cursive;
  line-height: 160%;
}

/* line 128, ../sass/screen.scss */
#size {
  font-size: 260%;
  line-height: 140%;
  font-family: 'Rock Salt', cursive;
}

/* line 134, ../sass/screen.scss */
#container div {
  margin: 10px;
  float: left;
  width: 280px;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  background-image: linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(top left, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0));
  -webkit-box-shadow: 3px 3px 4px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 3px 3px 4px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 4px 4px rgba(0, 0, 0, 0.2);
  /*   @include single-transition(all, 100ms); */
}

/* line 151, ../sass/screen.scss */
#container div.article {
  width: 260px;
  padding: 10px;
  background: none;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, rgba(204, 204, 204, 0.1)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top left, rgba(204, 204, 204, 0.1), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top left, rgba(204, 204, 204, 0.1), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top left, rgba(204, 204, 204, 0.1), rgba(0, 0, 0, 0));
  background-image: linear-gradient(top left, rgba(204, 204, 204, 0.1), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(top left, rgba(204, 204, 204, 0.1), rgba(0, 0, 0, 0));
}

/* line 165, ../sass/screen.scss */
#container div a.block {
  display: block;
  padding: 10px;
  font-family: 'Architects Daughter', cursive;
  /*   @include debug(red) */
}

/* line 172, ../sass/screen.scss */
#container div a.block:hover {
  background: rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* line 177, ../sass/screen.scss */
#container div h1 {
  font-size: 140%;
  margin: 10px 0 20px 0;
  font-family: 'Rock Salt', cursive;
  /*   @include debug; */
}

/* line 184, ../sass/screen.scss */
#container div h2 {
  font-size: 140%;
  margin: 10px 0;
  padding-left: 5px;
  /*   font-family: 'Nothing You Could Do', cursive; */
}

/* line 191, ../sass/screen.scss */
#container div a.block p {
  font-size: 100%;
}

/* line 195, ../sass/screen.scss */
#container div p.note {
  /*  @include debug(); */
  font-size: 90%;
}

/* line 203, ../sass/screen.scss */
#container div.header p {
  /* 	@include debug(); */
  padding: 5px 10px;
}

/* line 209, ../sass/screen.scss */
#container div.header h1 {
  font-size: 90px;
  line-height: 80px;
  margin: 0;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  /*   @include debug(red) */
}

/* line 221, ../sass/screen.scss */
#container div.header h1 span {
  font-size: 20px;
}

/* line 225, ../sass/screen.scss */
#container div.header h2 {
  font-size: 30px;
  margin: 0;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  /*   @include debug(red) */
}

/* line 233, ../sass/screen.scss */
#container div.header h1.fr {
  margin-bottom: 20px;
}

/* line 237, ../sass/screen.scss */
#container div.header h2.fr {
  margin: 10px 0 5px;
}

/* line 241, ../sass/screen.scss */
#container div.header h1.en {
  /*   margin-bottom : 20px; */
}

/* line 245, ../sass/screen.scss */
#container div.header h2.en {
  margin-bottom: 10px;
}

/* line 249, ../sass/screen.scss */
#container div p {
  margin: 10px 0;
  font-size: 120%;
  /*   font-family: 'Nothing You Could Do', cursive; */
}

/* line 255, ../sass/screen.scss */
#container div p.list {
  padding-left: 10px;
}

/* line 260, ../sass/screen.scss */
ul {
  margin-left: 10px;
  overflow: hidden;
}

/* line 265, ../sass/screen.scss */
ul li {
  float: left;
  font-size: 120%;
  padding: 5px 0;
  /*   font-family: 'Nothing You Could Do', cursive; */
  width: 95%;
}

/* line 273, ../sass/screen.scss */
ul li.listType {
  width: 5%;
}

/* line 277, ../sass/screen.scss */
.leftr {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

/* line 281, ../sass/screen.scss */
.leftr2 {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

/* line 285, ../sass/screen.scss */
.rightr {
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

/* line 289, ../sass/screen.scss */
.rightr2 {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

/* line 294, ../sass/screen.scss */
.code {
  background: rgba(0, 0, 0, 0.2);
  font-size: 80% !important;
  padding: 20px 10px;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-family: 'Droid Sans Mono', sans-serif !important;
  font-weight: 700;
}

/* line 305, ../sass/screen.scss */
pre.code {
  margin-top: -20px !important;
  line-height: 120%;
  padding: 0px 10px;
  font-weight: 400;
}

/* line 312, ../sass/screen.scss */
.scale {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  background: rgba(0, 0, 0, 0.2) !important;
  z-index: 5;
}

/* line 319, ../sass/screen.scss */
.light {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

/* line 323, ../sass/screen.scss */
table {
  font-size: 120%;
}

/* line 327, ../sass/screen.scss */
td {
  padding: 10px;
}

/* line 331, ../sass/screen.scss */
td.listType {
  padding-right: 0;
}

/* -- MIN WIDTH 620px ------------------------ */
@media screen and (min-width: 620px) {
  /* line 339, ../sass/screen.scss */
  .header {
    display: block;
  }

  /* line 341, ../sass/screen.scss */
  .viewSmallScreen {
    display: none;
  }

  /* line 343, ../sass/screen.scss */
  #container {
    width: 600px;
  }

  /* line 347, ../sass/screen.scss */
  #container div.twoCols {
    width: 560px;
  }

  /* line 351, ../sass/screen.scss */
  #display {
    padding: 50px 0 !important;
  }
}
/* -- MIN WIDTH 920px ------------------------ */
@media screen and (min-width: 920px) {
  /* line 360, ../sass/screen.scss */
  #container {
    width: 900px;
  }

  /* line 365, ../sass/screen.scss */
  #display {
    font-size: 140%;
    padding: 50px 20px !important;
  }

  /* line 370, ../sass/screen.scss */
  #size {
    font-size: 300%;
  }
}
/* -- MIN WIDTH 920px ------------------------ */
@media screen and (min-width: 1220px) {
  /* line 378, ../sass/screen.scss */
  #container {
    width: 1200px;
  }

  /* line 382, ../sass/screen.scss */
  #display {
    font-size: 200%;
  }

  /* line 386, ../sass/screen.scss */
  #size {
    font-size: 300%;
  }
}