/*----------------------------------------*
**  Global
**----------------------------------------*/

html, body {
  height: 100%;
  position: relative;
  }
body,div,p,blockquote,h1,h2,h3,h4,h5,ul,li {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  }
ul {
  list-style-type: none;
  }
img {
  border: 0;
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  display: block;
  }
cite {
  display: block;
  height: 1px;
  font-size: 1px;
  line-height: 1px;
  clear: both;
  }


/*----------------------------------------*
**  Fonts & Headings
**----------------------------------------*/

h1,h2,h3,h4,h5,p,a {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #333;
  }
p,h4 {
  font-size: 15px;
  line-height: 20px;
  }

strong {
  font-weight: 700;
  }
em {
  font-style: italic;
  font-weight: 400;
  }

a {
  color: #333;
  text-decoration: none;
  }

h2 {
  font-weight: 300;
  color: #fff;
  font-size: 64px;
  line-height: 68px;
  letter-spacing: -0.04em;
  text-align: center;
  }
.header h2 {
  text-shadow: 0 -1px #bf5800;
  margin-top: -15px;
  padding-bottom: 25px;
  }
.splash h2 {
  text-shadow: 0 -1px #859016;
  padding: 25px 0 15px;
  }


/*----------------------------------------*
**  Header
**----------------------------------------*/

body {
  background: #f70 url(img-css/burst.png) 50% 10px no-repeat;
  border-top: 10px solid #000;
  }

.header {
  position: relative;
  margin: 0 auto;
  width: 960px;
  overflow: visible;
  }

/*  Logo
**----------------------------------------*/

.header .logo {
  position: absolute;
  top: 40px;
  left: 355px;
  width: 250px;
  }
.header .logo a {
  display: block;
  margin: 0 auto;
  width: 159px;
  height: 122px;
  background: url(img-css/logo-header.png) 50% 0 no-repeat;
  text-indent: -3000px; 
  }
.header .logo p {
  height: 37px;
  padding-top: 5px;
  margin-top: -6px;
  background: url(img-css/banner.png);
  text-align: center;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px #ffd182;
  }

/*  Primary navigation
**----------------------------------------*/

.header p.nav {
  text-align: center;
  padding: 70px 8px 140px 0;
  font-size: 0;
  }
.header p.nav a {
  color: #fff;
  text-shadow: 0 -1px #bf5800;
  font-size: 19px;
  line-height: 20px;
  padding-left: 2px;
  }
.header p.nav a:hover,
.header p.nav a.here {
  padding-bottom: 8px;
  background: url(img-css/nav-border.png) 0 100% repeat-x;
  }
.header p.nav a.nav-l {
  margin: 0 140px 0 48px;
  }
.header p.nav a.nav-r {
  margin: 0 48px 0 140px;
  }

/*  Secondary navigation (between games)
**----------------------------------------*/

.header ul.jump {
  margin: -10px auto 0;
  width: 940px;
  height: 35px;
  background: url(img-css/jump-panel.png) repeat-x;
  font-size: 0;
  }
.header ul.jump a {
  display: inline-block;
  vertical-align: text-top;
  color: #fff;
  height: 18px;
  padding: 7px 10px 10px;
  text-shadow: 0 -1px #bf8533;
  font-size: 16px;
  line-height: 20px;
  }
.header ul.jump li {
  float: left;
  }
.header li.jump-l {
  width: 380px;
  text-align: right;
  }
.header li.jump-c {
  width: 180px;
  text-align: center;
  }
.header li.jump-r {
  text-align: left;
  }
.header li.jump-l a {
  padding-left: 28px;
  background: url(img-css/jump-left.png) 0 11px no-repeat;
  }
.header li.jump-r a {
  padding-right: 28px;
  background: url(img-css/jump-right.png) 100% 11px no-repeat;
  }
.header li.jump-c a:hover {
  background-image: url(img-css/jump-panel.png);
  }
.header li.jump-l a:hover {
  background-image: url(img-css/jump-left.png), url(img-css/jump-panel.png);
  background-position: 0 11px, 0 0;
  background-repeat: no-repeat, repeat-x;
  }
.header li.jump-r a:hover {
  background-image: url(img-css/jump-right.png), url(img-css/jump-panel.png);
  background-position: 100% 11px, 0 0;
  background-repeat: no-repeat, repeat-x;
  }

/*  Patreon
**----------------------------------------*/

.patreon {
  margin: 0 auto 30px;
  width: 940px;
  height: 160px;
  background-color: rgba(0, 0, 0, 0.5);
  }
.patreon-button {
	float: left;
	text-align: center;
	margin: 35px 20px 35px 35px;
	}
.patreon-button a {
	display: block;
  width: 260px;
	height: 90px;
	border-radius: 45px;
	background: linear-gradient(#eee, #bbb);
	text-align: center;
	text-transform: uppercase;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.1em;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
	}
.patreon-button a:hover {
	background: linear-gradient(#fff, #ddd);
	}
.patreon-button a span {
	display: inline-block;
  padding-top: 13px;
	}
.patreon-button a img {
  width: 200px;
  display: inline;
	}

.patreon p {
  color: #fff;
  padding: 16px 30px;
	text-align: center;
  font-size: 14px;
  line-height: 17px;
  }
.patreon p.intro {
  padding-bottom: 0;
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
  }



/*----------------------------------------*
**  Grid
**----------------------------------------*/

.grid {
  width: 960px;
  margin: 0 auto;
  }
body.directory .grid {
  padding-bottom: 50px;
  }

.grid a.game {
  position: relative;
  display: block;
  float: left;
  margin: 10px;
  width: 300px;
  height: 300px;
  background-color: #fff;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-image: url(img/00-placeholder.png);
	background-size: 300px auto;
  }
.grid a.game:hover {
  box-shadow: 0 0 8px #fff;
  }

.grid .blank {
  float: left;
  margin: 10px;
  width: 300px;
  height: 300px;
  background-color: #fff;
  opacity: 0.25;
  }

.grid .new {
  text-indent: -3000px;
  background-image: url(img-css/sash-new.png);
  width: 60px;
  height: 60px;
  position: absolute;
  top: -3px;
  left: -3px;
  }


/*----------------------------------------*
**  Title (Grid, Content) & Number (Steps)
**----------------------------------------*/

.title {
  text-align: center;
  background-image: url(img-css/bar.png);
  background-repeat: no-repeat;
  }
.content .title {
  background-position: 50% 12px;
  padding-bottom: 45px;
  width: 940px;
  margin: 0 auto;
  position: relative;
  }
.grid .title {
  background-position: 50% 9px;
  margin-top: 13px;
  }

.title p.number,
.steps p.number span {
  background-color: #b1c01d;
  border: 2px solid #fff;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  vertical-align: text-top;
  }
.content .title p.number {
  height: 18px;
  font-size: 16px;
  line-height: 20px;
  padding: 1px 7px 2px;
  }
.grid .title p.number {
  height: 12px;
  font-size: 11px;
  line-height: 13px;
  padding: 1px 5px 2px;
  }
.steps p.number span {
  font-weight: 700;
  width: 32px;
  height: 28px;
  font-size: 26px;
  line-height: 30px;
  padding: 1px 0 3px;
  }

.title h3 {
  font-weight: 300;
  }
.content .title h3 {
  margin: 3px 0 10px;
  font-size: 58px;
  line-height: 60px;
  letter-spacing: -0.06em;
  }
.grid .title h3 {
  margin: 0 0 5px;
  font-size: 36px;
  line-height: 38px;
  letter-spacing: -0.06em;
  }

.title p.designer {
  font-weight: 900;
  color: #f70;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  }
.content .title p.designer {
  font-size: 16px;
  line-height: 18px;
  }
.grid .title p.designer {
  font-size: 12px;
  line-height: 14px;
  }

.content .title p.additional-credit {
  margin-top: 4px;
  color: #666;
  }

.content .title .new {
  text-indent: -3000px;
  background-image: url(img-css/sash-new-large.png);
  width: 86px;
  height: 128px;
  position: absolute;
  top: -53px;
  left: -5px;
  }


/*----------------------------------------*
**  Content
**----------------------------------------*/

.content {
  background-color: #fff;
  padding: 50px 0 100px;
  }
body.home .content {
  padding-bottom: 50px;
  }

/*  Columns
**----------------------------------------*/

.one {
  width: 640px;
  margin: 0 auto;
  }

.columns {
  width: 960px;
  margin: 0 auto;
  }
.columns div {
  float: left;
  margin: 0 10px;
  }
.two div { width: 460px; }
.three div { width: 300px; }

.patreon .columns,
.splash .columns {
  width: 880px;
  margin: 0 auto;
  }
.patreon .columns div,
.splash .columns div {
  margin: 0 15px;
  }

.patreon .two div,
.splash .two div {
  width: 410px;
  }

/*  Headings & Text
**----------------------------------------*/

.text p {
  margin: 10px 0;
  }

.text p.lead {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 20px;
  }
.text h3 {
  margin: 40px 0 10px;
  font-size: 28px;
  line-height: 30px;
  font-weight: 700;
  color: #b1bf1d;
  letter-spacing: -0.05em;
  }
.one h3 {
  text-align: center;
  }
.text h4 {
  margin: 30px 0 -10px;
  font-weight: 900;
  }

.text a {
  text-decoration: underline;
  }
.text a:hover {
  color: #666;
  }

.text .picture img {
  width: 600px;
  margin: 30px auto 40px;
  }


/*  Splash
**----------------------------------------*/

.splash {
  margin: 0 auto;
  width: 940px;
  background-color: #b1c01d;
  }
.splash .columns {
  padding-bottom: 36px;
  }
.splash .columns p {
  color: #fff;
  text-shadow: 0 -1px #859016;
  }
.splash .banner {
  background-color: #ebefc6;
  }
.splash .banner p {
  position: relative;
  top: -18px;
  margin: 0 auto;
  height: 37px;
  width: 250px;
  padding-top: 5px;
  background: url(img-css/banner.png);
  text-align: center;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px #ffd182;
  }


/*  Steps
**----------------------------------------*/

.steps {
  width: 940px;
  margin: 0 auto;
  }
body.home .steps {
  padding-bottom: 20px;
  background-color: #ebefc6;
  }
body.how-to .steps {
  padding-bottom: 40px;
  }

.steps .step {
  width: 300px;
  float: left;
  text-align: center;
  }
.steps .mid {
  width: 340px;
  }
.steps img {
  margin: 0 auto;
  }

.steps p.number {
  margin-top: 10px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  }
body.home .steps p.number {
  background-image: url(img-css/bar-rev.png);
  }
body.how-to .steps p.number {
  background-image: url(img-css/bar.png);
  }

.steps p.number span {
  background-color: #b1c01d;
  border: 2px solid #fff;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  vertical-align: text-top;
  height: 28px;
  width: 32px;
  font-size: 26px;
  line-height: 30px;
  padding: 1px 0 3px;
  }

.steps h3 {
  margin-top: 4px;
  padding-right: 4px;
  font-weight: 900;
  color: #666;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: -0.03em;
  }
.steps p.caption {
  margin: 5px 40px 0;
  color: #999;
  }
.steps .mid p.caption {
  margin-left: 50px;
  margin-right: 50px;
  }

/*  Game
**----------------------------------------*/

.display {
  width: 940px;
  margin: 0 auto;
  }

.display .data {
  width: 300px;
  float: right;
  text-align: center;
  padding-top: 201px;
  margin-top: -10px;
  background-repeat: no-repeat;
  background-image: url(img/00-placeholder.png);
  background-size: 300px auto;
  }

.display .data-card {
  background-color: #c5d056;
  border-top: 10px solid #b1c01d;
  border-bottom: 10px solid #b1c01d;
  }
.display .data-card h4 {
  padding-top: 10px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 -1px #949c40;
  text-transform: uppercase;
  }
.display .data-card p {
  padding: 0 20px 11px;
  color: #313416;
  font-size: 14px;
  line-height: 16px;
  }
.display .data-card p.key {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  }
.display .data-card .button {
  background-color: #b1c01d;
  padding-top: 12px;
  }
.display .data-card .bgg-button {
  background-color: #b1c01d;
  padding-top: 10px;
  }
.display .data-card p.status {
  background-color: #b1c01d;
  padding: 4px 0 12px;
  font-size: 12px;
  line-height: 13px;
  color: #313416;
  font-weight: 400;
  }
.display .data-card p.status strong {
  font-weight: 700;
  }

.display .text {
  width: 620px;
  }
.display .text p.links,
.display .text p.links a {
  font-weight: 700;
  color: #f70;
  text-decoration: none;
  }
.display .text p.links {
  margin-bottom: 18px;
  }

.display .text .designer {
  padding-left: 150px;
  background-repeat: no-repeat;
  }
.display .text .designer strong {
  font-weight: 700;
  }
.display .text h4 + div.designer {
  margin-top: 24px;
  }


/*----------------------------------------*
**  Buttons
**----------------------------------------*/

.button a {
  display: block;
  margin: 0 auto;
  width: 226px;
  height: 43px;
  padding-top: 7px;
  background: url(img-css/button-wide.png);
  font-weight: 300;
  color: #fff;
  font-size: 27px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 -1px #bf5800;
  letter-spacing: -0.05em;
  }
.button a:hover {
  box-shadow: none;
  background-position: 0 -50px;
  }

.grid .button { padding: 7px 0 16px; }
.splash .button { padding: 17px 0 16px; }

.data .button a {
  background-image: url(img-css/button-download.png), url(img-css/button-wide.png);
  background-position: 188px 10px, 0 0;
  background-repeat: no-repeat, no-repeat;
  height: 42px;
  padding-top: 8px;
  width: 198px;
  padding-right: 28px;
  }
.data .button a:hover {
  background-image: url(img-css/button-download.png), url(img-css/button-wide.png);
  background-position: 188px 10px, 0 -50px;
  background-repeat: no-repeat, no-repeat;
  }

.bgg-button a {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 41px;
  padding-top: 7px;
  padding-left: 50px;
  text-align: center;
  background: url(img-css/button-bgg.png);
  font-weight: 400;
  color: #fff;
  font-size: 14px;
  line-height: 15px;
  text-align: center;
  text-shadow: 0 -1px #859016;
  }
.bgg-button a strong {
  font-weight: 700;
  }
.bgg-button a:hover {
  box-shadow: none;
  background-position: 0 -48px;
  }


/*----------------------------------------*
**  Footer
**----------------------------------------*/

.footer {
  background-color: #000;
  padding: 25px 0 15px;
  clear: both;
  }
.footer h5 {
  font-size: 14px;
  line-height: 17px;
  color: #fff;
  font-weight: 700;
  }
.footer p {
  font-size: 14px;
  line-height: 17px;
  color: #aaa;
  margin-bottom: 12px;
  }
.footer p a {
  color: #aaa;
  text-decoration: underline;
  }
.footer p a:hover {
  color: #fff;
  }

.footer p.social {
  margin-top: 16px;
  }
.footer p.social a {
  display: block;
  height: 32px;
  color: #ddd;
  padding-left: 42px;
  text-decoration: none;
  background-repeat: no-repeat;
  }
.footer p.social a:hover {
  color: #fff;
  background-position: 0 -32px;
  }
.footer p.social a span {
  font-weight: 700;
  }
.footer p.social a:hover span {
  color: #fff;
  }
.footer p.twitter a { background-image: url(img-css/social-twitter.png); }
.footer p.twitter a span { color: #00aced; }
.footer p.email a { background-image: url(img-css/social-email.png); }
.footer p.email a span { color: #6b0; }

.footer .copyright {
  clear: both;
  }
.footer .copyright p {
  text-align: center;
  color: #777;
  font-size: 12px;
  line-height: 14px;
  padding-top: 105px;
  background: url(img-css/logo-footer.png) 50% 30px no-repeat;
  }



/*----------------------------------------*
**  Game images
**----------------------------------------*/

.grid a.g-01, body.g-01 .data { background-image: url(img/01-the-other-hat-trick.png); }
.grid a.g-02, body.g-02 .data { background-image: url(img/02-bad-grandmas.png); }
.grid a.g-03, body.g-03 .data { background-image: url(img/03-zeppelin-derby.png); }
.grid a.g-04, body.g-04 .data { background-image: url(img/04-muses.png); }
.grid a.g-05, body.g-05 .data { background-image: url(img/05-combo.png); }
.grid a.g-06, body.g-06 .data { background-image: url(img/06-shape-up.png); }
.grid a.g-07, body.g-07 .data { background-image: url(img/07-jest.png); }
.grid a.g-08, body.g-08 .data { background-image: url(img/08-the-empire-engine.png); }
.grid a.g-09, body.g-09 .data { background-image: url(img/09-witch-hunt.png); }
.grid a.g-10, body.g-10 .data { background-image: url(img/10-pocket-imperium.png); }
.grid a.g-11, body.g-11 .data { background-image: url(img/11-bicycle-race.png); }
.grid a.g-12, body.g-12 .data { background-image: url(img/12-good-little-trains.png); }
.grid a.g-13, body.g-13 .data { background-image: url(img/13-good-little-ninjas.png); }
.grid a.g-14, body.g-14 .data { background-image: url(img/14-good-little-martian.png); }
.grid a.g-15, body.g-15 .data { background-image: url(img/15-good-little-tricks.png); }
.grid a.g-16, body.g-16 .data { background-image: url(img/16-good-little-gardens.png); }
.grid a.g-17, body.g-17 .data { background-image: url(img/17-good-little-hunters.png); }

body.g-01 .text .designer { background-image: url(img/designer-brett-j-gilbert.png); }
body.g-02 .text .designer { background-image: url(img/designer-tony-boydell.png); }
body.g-03 .text .designer { background-image: url(img/designer-todd-sanders.png); }
body.g-04 .text .designer { background-image: url(img/designer-adam-taylor.png); }
body.g-05 .text .designer { background-image: url(img/designer-michael-fox.png); }
body.g-06 .text .designer { background-image: url(img/designer-mo-holkar.png); }
body.g-07 .text .designer { background-image: url(img/designer-brett-j-gilbert.png); }
body.g-08 .text .d-01     { background-image: url(img/designer-chris-marling.png); }
body.g-08 .text .d-02     { background-image: url(img/designer-matthew-dunstan.png); }
body.g-08 .text .d-03     { background-image: url(img/designer-sebastien-antoniou.png); }
body.g-09 .text .d-01     { background-image: url(img/designer-matt-green.png); }
body.g-09 .text .d-02     { background-image: url(img/designer-sam-mercer.png); }
body.g-10 .text .designer { background-image: url(img/designer-david-j-mortimer.png); }
body.g-11 .text .designer { background-image: url(img/designer-sebastian-bleasdale.png); }
body.g-12 .text .d-01,
body.g-13 .text .d-01,
body.g-14 .text .d-01,
body.g-15 .text .d-01,
body.g-16 .text .d-01,
body.g-17 .text .d-01     { background-image: url(img/designer-brett-j-gilbert.png); }
body.g-12 .text .d-02,
body.g-13 .text .d-02,
body.g-14 .text .d-02,
body.g-15 .text .d-02,
body.g-16 .text .d-02,
body.g-17 .text .d-02     { background-image: url(img/designer-matthew-dunstan.png); }