/*
Theme Name: Skullgirls Theme
Theme URL: http://skullgirls.com
Description: The custom theme for the Skullgirls website
Author: Derek Soulliere, Will Janz
Author URL: Your website address.
Version: 1.0
*/
@import "reset.css"; /*Resets all browsers to same defaults */

body {
  font: 12px/20px Trebuchet MS, Verdana, Arial, sans-serif, sans;
  color: #fff;
  background: #000 url(images/background.png) top center no-repeat;
  height: 100%;
}

html {
  height: 100%;
}

body {
  min-height: 1200px;      /*Sets minimum body height to browser height*/
  height: auto !important;
  height: 100%;
  position: relative;      /*Required for absolute positioning to correspond */
}

h2, h1 {
  clear: both;
  font: 36px/36px SelznickBold;
  color: #f5e56f;
  text-shadow: 0px 0px 5px #ff5f00;
  margin: 15px 0 10px 0;
  padding: 1px;
}

strong {
  font-size: 1.2em;
  font-weight: bold;
}

/** HEADER
* Top page header. Contains header.skullgirls graphic, menu, and social media menu
* header.skullgirls - header.skullgirls container
* #header.skullgirls .menu - main menu
* #header.skullgirls .social - social media buttons
*/

header.skullgirls
{
  width: 1112px;
  height: 209px;
  position: relative;
  margin: 25px auto 0 auto;
  background: url(images/header.png) no-repeat;
}



header.skullgirls .menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 96px; left: 60px;
}

header.skullgirls .menu li {
  height: 35px;
  float: left;
  margin-left: 20px;
}

header.skullgirls .menu a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  background: url(images/en/menu.png) no-repeat;
}

.en header.skullgirls .menu a {background-image: url(images/en/menu.png)}
.en header.skullgirls .new-menu a {background-image: url(images/en/new-menu.png)}
.fr header.skullgirls .menu a {background-image: url(images/fr/menu.png)}
.de header.skullgirls .menu a {background-image: url(images/de/menu.png)}
.it header.skullgirls .menu a {background-image: url(images/it/menu.png)}
.ja header.skullgirls .menu a {background-image: url(images/ja/menu.png)}
.es header.skullgirls .menu a {background-image: url(images/es/menu.png)}


/*Old English Menu */
/* TODO remove this */
.en header.skullgirls li.media { margin-left: 270px; }
.en header.skullgirls .home a              { background-position: -73px 0px; width: 73px; }
.en header.skullgirls .home a:hover,
.en header.skullgirls .home a.hover        { background-position: 0px 0px; }

.en header.skullgirls .characters a        { background-position: -154px -35px; height: 36px; width: 154px; }
.en header.skullgirls .characters a:hover,
.en header.skullgirls .characters a.hover  { background-position: 0px -35px; }

.en header.skullgirls .game a              { background-position: -74px -71px; width: 73px; }
.en header.skullgirls .game a:hover,
.en header.skullgirls .game a.hover        { background-position: 0px -71px; }

.en header.skullgirls .media a             { background-position: -77px -106px; width: 77px; }
.en header.skullgirls .media a:hover,
.en header.skullgirls .media a.hover       { background-position: 0px -106px; }

.en header.skullgirls .community a         { background-position: -138px -141px; width: 138px; }
.en header.skullgirls .community a:hover,
.en header.skullgirls .community a.hover   { background-position: 0px -141px; }

.en header.skullgirls .store a             { background-position: -78px -176px; height: 36px; width: 78px; }
.en header.skullgirls .store a:hover,
.en header.skullgirls .store a.hover       { background-position: 0px -176px; }


header.skullgirls .new-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 96px;
  left: 70px;
  width: 970px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

header.skullgirls .new-menu li {
  height: 35px;
  flex-grow: 1;
}

header.skullgirls .new-menu a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  background: url(images/en/new-menu.png) no-repeat;
  margin-left: unset;
}

.en header.skullgirls .new-menu a { background-image: url(images/en/new-menu.png); }

/* English Menu */
.en header.skullgirls .new-menu li.media {margin-left: 0; }
.en header.skullgirls .new-menu .home a              { background-position: -85px 0px; width: 79px; }
.en header.skullgirls .new-menu .home a:hover,
.en header.skullgirls .new-menu .home a.hover        { background-position: 0px 0px; }

.en header.skullgirls .new-menu .characters a        { background-position: -152px -35px; height: 36px; width: 142px; }
.en header.skullgirls .new-menu .characters a:hover,
.en header.skullgirls .new-menu .characters a.hover  { background-position: 0px -35px; }

.en header.skullgirls .new-menu .game a              { background-position: -97px -71px; width: 94px; }
.en header.skullgirls .new-menu .game a:hover,
.en header.skullgirls .new-menu .game a.hover        { background-position: 0px -71px; }

.en header.skullgirls .new-menu .filler              { background: none; width: 250px; flex-grow: 0; }

.en header.skullgirls .new-menu .media a             { background-position: -72px -106px; width: 71px; }
.en header.skullgirls .new-menu .media a:hover,
.en header.skullgirls .new-menu .media a.hover       { background-position: 0px -106px; }

.en header.skullgirls .new-menu .community a         { background-position: -138px -141px; width: 138px; }
.en header.skullgirls .new-menu .community a:hover,
.en header.skullgirls .new-menu .community a.hover   { background-position: 0px -141px; }

.en header.skullgirls .new-menu .store a             { background-position: -84px -176px; height: 36px; width: 84px; }
.en header.skullgirls .new-menu .store a:hover,
.en header.skullgirls .new-menu .store a.hover       { background-position: 0px -176px; }



/*Italian Menu*/
.it header.skullgirls li.media {margin-left: 235px}
.it header.skullgirls .home a {width: 72px; background-position: -72px 0px }
.it header.skullgirls .home a:hover, .it header.skullgirls .home a.hover {background-position: 0px 0px }
.it header.skullgirls .characters a {width: 154px; background-position: -154px -35px }
.it header.skullgirls .characters a:hover, .it header.skullgirls .characters a.hover {background-position: 0px -35px }
.it header.skullgirls .game a {width: 86px; background-position: -86px -70px }
.it header.skullgirls .game a:hover, .it header.skullgirls .game a.hover {background-position: 0px -70px }
.it header.skullgirls .media a {width: 76px; background-position: -76px -105px }
.it header.skullgirls .media a:hover, .it header.skullgirls .media a.hover  {background-position: 0px -105px }
.it header.skullgirls .community a {width: 138px; background-position: -138px -140px }
.it header.skullgirls .community a:hover, .it header.skullgirls .community a.hover {background-position: 0px -140px }
.it header.skullgirls .store a {width: 110px; background-position: -110px -175px }
.it header.skullgirls .store a:hover, .it header.skullgirls .store a.hover {background-position: 0px -175px }

/*German Menu*/
.de header.skullgirls .menu li {margin-right: 10px}
.de header.skullgirls li.media {margin-left: 240px}
.de header.skullgirls .home a {width: 70px; background-position: -70px 0px }
.de header.skullgirls .home a:hover, .de header.skullgirls .home a.hover {background-position: 0px 0px }
.de header.skullgirls .characters a {width: 155px; background-position: -155px -35px }
.de header.skullgirls .characters a:hover, .de header.skullgirls .characters a.hover {background-position: 0px -35px }
.de header.skullgirls .game a {width: 64px; background-position: -64px -70px }
.de header.skullgirls .game a:hover, .de header.skullgirls .game a.hover {background-position: 0px -70px }
.de header.skullgirls .media a {width: 87px; background-position: -87px -105px }
.de header.skullgirls .media a:hover, .de header.skullgirls .media a.hover  {background-position: 0px -105px }
.de header.skullgirls .community a {width: 138px; background-position: -138px -140px }
.de header.skullgirls .community a:hover, .de header.skullgirls .community a.hover {background-position: 0px -140px }
.de header.skullgirls .store a {width: 65px; background-position: -65px -175px }
.de header.skullgirls .store a:hover, .de header.skullgirls .store a.hover {background-position: 0px -175px }

/*Japanese Menu*/
.ja header.skullgirls .menu li {margin-right: 11px}
.ja header.skullgirls li.media {margin-left: 230px}
.ja header.skullgirls .home a {width: 78px; background-position: -78px 0px }
.ja header.skullgirls .home a:hover, .ja header.skullgirls .home a.hover {background-position: 0px 0px }
.ja header.skullgirls .characters a {width: 136px; background-position: -136px -35px }
.ja header.skullgirls .characters a:hover, .ja header.skullgirls .characters a.hover {background-position: 0px -35px }
.ja header.skullgirls .game a {width: 77px; background-position: -77px -70px }
.ja header.skullgirls .game a:hover, .ja header.skullgirls .game a.hover {background-position: 0px -70px }
.ja header.skullgirls .media a {width: 92px; background-position: -92px -105px }
.ja header.skullgirls .media a:hover, .ja header.skullgirls .media a.hover  {background-position: 0px -105px }
.ja header.skullgirls .community a {width: 132px; background-position: -132px -140px }
.ja header.skullgirls .community a:hover, .ja header.skullgirls .community a.hover {background-position: 0px -140px }
.ja header.skullgirls .store a {width: 71px; background-position: -71px -175px }
.ja header.skullgirls .store a:hover, .ja header.skullgirls .store a.hover {background-position: 0px -175px }


/*Spanish Menu*/
.es header.skullgirls .menu li {margin-left: 8px}
.es header.skullgirls li.media {margin-left: 245px}
.es header.skullgirls .menu .home {margin-left: 20px}
.es header.skullgirls .home a {width: 161px; background-position: -161px 0px }
.es header.skullgirls .home a:hover, .es header.skullgirls .home a.hover {background-position: 0px 0px }
.es header.skullgirls .characters a {width: 105px; background-position: -105px -35px }
.es header.skullgirls .characters a:hover, .es header.skullgirls .characters a.hover {background-position: 0px -35px }
.es header.skullgirls .game a {width: 68px; background-position: -68px -70px }
.es header.skullgirls .game a:hover, .es header.skullgirls .game a.hover {background-position: 0px -70px }
.es header.skullgirls .menu .media, .es header.skullgirls .menu .community, .es header.skullgirls .menu .store  {margin-right: 20px }
.es header.skullgirls .media a {width: 76px; background-position: -76px -105px }
.es header.skullgirls .media a:hover, .es header.skullgirls .media a.hover  {background-position: 0px -105px }
.es header.skullgirls .community a {width: 137px; background-position: -137px -140px }
.es header.skullgirls .community a:hover, .es header.skullgirls .community a.hover {background-position: 0px -140px }
.es header.skullgirls .store a {width: 82px; background-position: -82px -175px }
.es header.skullgirls .store a:hover, .es header.skullgirls .store a.hover {background-position: 0px -175px }

/*French Menu*/
.fr header.skullgirls .menu li {margin-left: 15px}
.fr header.skullgirls li.media {margin-left: 245px}
.fr header.skullgirls .menu .home {margin-left: 20px}
.fr header.skullgirls .home a {width: 92px; background-position: -92px 0px }
.fr header.skullgirls .home a:hover, .fr header.skullgirls .home a.hover {background-position: 0px 0px }
.fr header.skullgirls .characters a {width: 148px; background-position: -148px -35px }
.fr header.skullgirls .characters a:hover, .fr header.skullgirls .characters a.hover {background-position: 0px -35px }
.fr header.skullgirls .game a {width: 79px; background-position: -79px -70px }
.fr header.skullgirls .game a:hover, .fr header.skullgirls .game a.hover {background-position: 0px -70px }
.fr header.skullgirls .media a {width: 76px; background-position: -76px -105px }
.fr header.skullgirls .media a:hover, .fr header.skullgirls .media a.hover  {background-position: 0px -105px }
.fr header.skullgirls .community a {width: 145px; background-position: -145px -140px }
.fr header.skullgirls .community a:hover, .fr header.skullgirls .community a.hover {background-position: 0px -140px }
.fr header.skullgirls .store a {width: 106px; background-position: -106px -175px }
.fr header.skullgirls .store a:hover, .fr header.skullgirls .store a.hover {background-position: 0px -175px }

/* Header - Social Menu */
header.skullgirls .social {
  margin: 0;
  padding: 0;
  list-style-type: none;
  position: absolute;
  top: 49px;
  right: 42px;
  display: flex;
  justify-content: space-evenly;
  width: 150px;
}
header.skullgirls .social li {
  height: 32px;
  width: 32px;
}

header.skullgirls .social a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999px;
  transition: all 200ms ease;
  filter: brightness(0.85);
  background-size: cover;
}

header.skullgirls .social a img {
  display: block;
  width: 100%;
  height: auto;
}
header.skullgirls .social a:hover {
  filter: brightness(1);
}

header.skullgirls .facebook a {
  background-image: url(images/icons/icon-facebook-64x64.png);
}
header.skullgirls .twitter a {
  background-image: url(images/icons/icon-twitter-64x64.png);
}
header.skullgirls .youtube a {
  background-image: url(images/icons/icon-youtube-64x64.png);
}

/* Header - Teaser Banner */
#teaser-banner {
  position: relative;
  top: -68px;
  z-index: -10;
  margin: 0 auto 15px;
  display: flex;
  justify-content: center;
  margin-bottom: -30px;
  width: 1112px;
}

#teaser-banner img {
  height: 211px;
}

/* Main */
#main {
  max-width: 1000px;
  padding: 10px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#navlinks {
  clear: both;
  font: 24px Selznickbold;
  padding-top: 10px;
}

.blogpost {
  clear: both;
  overflow: hidden;
  margin: 0.5em 0;
}

/***BORDERS***/
.head {height: 83px}
.bottom {height: 65px}


.main.home {
}

/* Padding values here are tightly coupled to the background images! */
.main.home .head {
  background: url(images/edges/home_blog-top-left.png) no-repeat,
              url(images/edges/home_blog-top-center.png) repeat-x content-box,
              url(images/edges/home_blog-top-right.png) no-repeat right;
  padding: 0 130px;
  box-sizing: border-box;
}

.main.home .bottom {
  background: url(images/edges/home_blog-bottom-left.png) no-repeat,
              url(images/edges/home_blog-bottom-center.png) repeat-x content-box,
              url(images/edges/home_blog-bottom-right.png) no-repeat right;
  padding: 0 130px;
  box-sizing: border-box;
}

.main.home .content {
  background: url(images/edges/home_blog-mid-left.png) repeat-y,
              url(images/edges/home_blog-mid-center.png) repeat content-box,
              url(images/edges/home_blog-mid-right.png) repeat-y right;
  min-height: 350px;
  padding: 0px 40px;
  box-sizing: border-box;
}



#homepagevideo {
  width: 1125px;
  height: 653px;
  background: url(images/home-video.png) no-repeat;
  margin: 0 auto 30px auto;
  padding-top: 45px;
  position: relative;
}

#homepagevideo a.play:link, #homepagevideo a.play:visited
{
  width: 158px;
  height: 235px;
  position: absolute;
  left: 470px;
  top: 300px;
  background: url(images/play_btn.png) no-repeat 0 0;
}

#homepagevideo a.play:hover, #homepagevideo a.play.blend
{
  background-position: -157px 0;
}
#homepagevideo .video
{
  width: 1000px;
  height: 562px;
  margin: 0 auto;
  display: none;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5), 5px -5px 5px rgba(0,0,0,0.5), -5px 5px 5px rgba(0,0,0,0.5), -5px -5px 5px rgba(0,0,0,0.5);

}

.ribbon {
width: 1056px;
height: 70px;
top: 204px;
position: absolute;
left: 28px;
}

.ribbon span {
  position: relative;
  display: block;
  width: 100%;
  height: 70px;
  z-index: 10;

    color: #fff;
  font: 38px/70px Selznickbold;
  text-align: center;
  background: #e30617;

  -webkit-animation: main 250ms;
  -moz-animation: main 250ms;
  -ms-animation: main 250ms;
  animation: main 250ms;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  text-shadow: 1px 1px 10px rgba(0,0,0,0.25);

}

.ribbon span strong {
      text-transform: uppercase;
    font-family: Verdana;
    font-weight: bold;
    font-size: 37px;
}

.ribbon span img {
  position: relative;
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 8px;
}

.ribbon span:before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  background: url(images/switch-icon-left.png);
  width: 28px;
  height: 50px;
  vertical-align: text-bottom;
}

.ribbon span:after {
  content: '';
  display: inline-block;
  margin-left: 5px;
  background: url(images/switch-icon-right.png);
  width: 28px;
  height: 50px;
  vertical-align: text-bottom;
}


.ribbon i {
  position: absolute;
}

.ribbon i:nth-child(2), .ribbon i:nth-child(3) {
  position: absolute;
  left: -20px;
  bottom: -20px;
  z-index: 5;
  border: 20px solid transparent;
  border-right-color: #4d0208;

  -webkit-animation: edge 500ms;
  -moz-animation: edge 500ms;
  -ms-animation: edge 500ms;
  animation: edge 500ms;
}

.ribbon i:nth-child(3) {
  left: auto;
  right: -20px;
  border-right-color: transparent;
  border-left-color: #4d0208;
}

.ribbon i:nth-child(4), .ribbon i:last-child {
  width: 20px;
  bottom: -20px;
  left: -60px;
  z-index: 4;
  border: 30px solid #b30514;
  border-left-color: transparent;

  -webkit-animation: back 600ms;
  -moz-animation: back 600ms;
  -ms-animation: back 600ms;
  animation: back 600ms;

  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.ribbon i:last-child {
  bottom: -20px;
  left: auto;
  right: -60px;
  border: 30px solid #b30514;
  border-right-color: transparent;

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.ribbon:hover {
  filter: brightness(110%) contrast(110%);
}

p {
  color: #fefefe;
}

/* animations */

@-webkit-keyframes main {
  0% { -webkit-transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); }
}

@-webkit-keyframes edge {
  0%, 50% { -webkit-transform: scaleY(0); }
  100% { -webkit-transform: scaleY(1); }
}

@-webkit-keyframes back {
  0%, 75% { -webkit-transform: scaleX(0); }
  100% { -webkit-transform: scaleX(1); }
}


@-moz-keyframes main {
  0% { -moz-transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); }
}

@-moz-keyframes edge {
  0%, 50% { -moz-transform: scaleY(0); }
  100% { -moz-transform: scaleY(1); }
}

@-moz-keyframes back {
  0%, 75% { -moz-transform: scaleX(0); }
  100% { -moz-transform: scaleX(1); }
}


@keyframes main {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes edge {
  0%, 50% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes back {
  0%, 75% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}


.category.home, .recent.home  {float: right; clear: right; margin-bottom: 30px; position: relative}
.recent.home  {margin-bottom: 200px;}
.category.home .head, .recent.home .head { width: 245px;background: url(images/edges/home_blog-cat-top.png) no-repeat }
.category.home .bottom, .recent.home .bottom { width: 245px;background: url(images/edges/home_blog-cat-bottom.png) no-repeat }
.category.home .content, .recent.home .content
{
  width: 225px;
  padding: 1px 10px 1px 10px;
  background: url(images/edges/home_blog-cat-mid.png) repeat-y;
}
.category.home .content > *, .recent.home .content > * { position: relative;top: -40px }


.category.home ul, .recent.home ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  font: 24px Selznickbold;
  color: #fff;
  text-align: center;
}

.recent.home ul{font-size: 18px}

.category.home li, .recent.home li {margin: 10px 0}
.category.home ul a:link, .category.home ul a:visited, .recent.home ul a:link, .recent.home ul a:visited
{
  text-shadow: 2px 2px 1px #000;
  color: #fff;
}


.recent.home ul a:hover, .category.home ul a:hover
{
  text-shadow: 0px 0px 3px #F5E56F;
  color: #ddd;
}

.recent.home .cerebella
{
  position: absolute;
  bottom: -200px;
  right: 0px;
}

.systems.home {
  clear: both;
}

.systems-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 0;
  list-style-type: none;
}
.systems-list li {
  margin: 15px;
}
.systems-list img {
  height: 50px;
  width: auto;
}

/*CHARACTERS*/
.characters.main {position: relative; width: 600px}
.characters .name
{
  width: 231px;
  height: 58px;
  background: url(images/edges/character-name.png) no-repeat;
  margin: 0 auto;
  position: absolute;
  top: -20px; left: 50%; margin-left: -115px;
  text-align: center;
  font: 17px SelznickBold;
}
.ja .characters .name {font: 10px/25px SelznickBold}
.characters .name h2 {font-size: 30px; line-height: 20px; margin: 0; padding: 7px 0 2px 0}

.characters h3
{
  display: inline;
  margin: 0;
  font: 24px SelznickBold;
}

.characters .stats
{
  float: left;
  font-size: 18px;
  width: 40%;
}

.characters .likes
{
  float: right;
  width: 50%;
}
.characters h3.dislikes
{
  padding-top: 20px;
}
.main.characters .head {width: 600px;background: url(images/edges/character-top.png) no-repeat}
.main.characters .bottom {width: 600px;background: url(images/edges/character-bottom.png) no-repeat}
.main.characters .content
{
  width: 550px;
  min-height: 200px;
  padding: 1px 25px 1px 25px;
  background: url(images/edges/character-mid.png) repeat-y;
}

#character-portrait
{
  position: absolute;
  top: 1px; right: 0px;
  z-index: -1;
}

#character_select
{
  text-align: center;
  margin: 0 0 50px 0;
}

#character_select a
{
  margin-right: 25px;
}
#character_select .active {opacity: 1}
#character_select .inactive {opacity: 0.3}
#character_select .inactive:hover {opacity: 0.8}

#character-portrait.cerebella {top: 49px; right: -24px }
#character-portrait.peacock {top: 216px; right: 5px }
#character-portrait.filia {top: 186px; right: -22px }
#character-portrait.fortune {top: 172px; right: 5px }
#character-portrait.parasoul {top: 209px; right: 5px }
#character-portrait.painwheel {top: 119px; right: -38px }
#character-portrait.valentine {top: 106px; right: 5px }
#character-portrait.double {top: 100px; right: 5px }
#character-portrait.squigly {top: 131px; right: 5px }
#character-portrait.band {top: 190px; right: 3px }
#character-portrait.eliza {top: 162px; right: 5px }
#character-portrait.beowulf {top: 135px; right: 3px }
#character-portrait.robo-fortune {top: 135px; right: 3px }
#character-portrait.annie {top: 230px; right: 3px }
#character-portrait.fukua {top: 230px; right: 3px }
#character-portrait.umbrella {top: 230px; right: 3px; width: 450px; }
#character-portrait.umbrella > img { width: 450px; }

.eliza.characters .name
{
  width: 320px;
  height: 58px;
  background: url(images/edges/character-name-long.png) no-repeat;
  margin: 0 auto;
  position: absolute;
  top: -20px; left: 50%; margin-left: -160px;
  text-align: center;
  font: 14px SelznickBold;
}



#character-portrait img
{

}
.characters .trailer
{
  clear: both;
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  text-align: center;
}

/* Game page */
.main.game {float: right;}
.main.game .head { width: 735px;background: url(images/edges/home_blog-top.png) no-repeat }
.main.game .bottom{ width: 735px; background: url(images/edges/home_blog-bottom.png) no-repeat }
.main.game .content {
  width: 655px;
  min-height: 200px;
  padding: 1px 40px 1px 40px;
  background: url(images/edges/home_blog-mid.png) repeat-y;
}
.main.game h1 {
  clear: both;
  font: 72px/72px SelznickBold;
  color: #f5e56f;
  text-shadow: 0px 0px 5px #ff5f00;
  margin: 15px 0 20px 0;
  padding: 1px;
  text-align: center
}

.game.list { float: left; margin-bottom: 20px; position: relative; }
.game.list .head { width: 245px; background: url(images/edges/home_blog-cat-top.png) no-repeat; }
.game.list .bottom{ width: 245px; background: url(images/edges/home_blog-cat-bottom.png) no-repeat; }
.game.list .content {
  width: 225px;
  padding: 1px 10px 1px 10px;
  background: url(images/edges/home_blog-cat-mid.png) repeat-y;
}
.game.list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font: 24px Selznickbold;
  color: #fff;
  text-align: center;
}
.game.list ul{ font-size: 36px; }
.game.list li { margin: 10px 0; }

/* Where are these? */
.store .game h2 {
  color: #fff;
  text-align: center;
  margin: 5px 0;
}

.store .game h2 a {
  display: block;
  margin: 10px auto;
  box-shadow: 2px 2px 5px #000;
}

/* World Page */

.world-page {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.world-page h1 {
  clear: both;
  font: 72px/72px SelznickBold;
  color: #f5e56f;
  text-shadow: 0px 0px 5px #ff5f00;
  margin: 15px 0 20px 0;
  padding: 1px;
  text-align: center;
}
.world-page img {
  height: auto; /* Needed because it will distort for some reason without it */
  max-width: 100%;
}
.world-page p {
  font-size: 13px;
  text-align: left;
}

.world-list {
  width: 245px;
  margin-right: 20px;
}
.world-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font: 24px Selznickbold;
  color: #fff;
  text-align: center;
  font-size: 36px;
}
.world-list li {
  margin: 10px 0;
}

.world-content {
  width: 735px;
}
.world-content .head {
  width: 735px;
  background: url(images/edges/home_blog-top.png) no-repeat;
}
.world-content .bottom {
  width: 735px;
  background: url(images/edges/home_blog-bottom.png) no-repeat;
}
.world-content .content {
  width: 655px;
  min-height: 200px;
  padding: 1px 40px 1px 40px;
  background: url(images/edges/home_blog-mid.png) repeat-y;
}

/*MEDIA*/
.main.media {

}
.main.media .head { width: 1000px;background: url(images/edges/media-top.png) no-repeat }
.main.media .bottom{ width: 1000px; background: url(images/edges/media-bottom.png) no-repeat }
.main.media .content
{
  width: 960px;

  padding: 1px 20px 1px 20px;
  background: url(images/edges/media-mid.png) repeat-y;
}

.main.media .content > * { position: relative;top: -50px }
.main.media .content > *:last-child { margin-bottom: -100px; }

/* Media - Screenshots */

.screenshots {
  position: relative;
  overflow: hidden;
}

.screenshots > ul {
  width: 10000em;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.screenshots > ul > li {
  float: left;
  margin-right: 10px;
  width: 202px;
}

.screen-prev, .screenshot-next {
  border: none;
}

/* Media - Videos */

.screen, .video-player
{
  overflow: hidden;
  position: relative;
  height: 560px;
  width: 1000px;
  cursor: pointer;
  background: url(images/ajax-loader.gif) center center no-repeat;
  margin: 30px 0;
}



.video-player
{
  background: url(images/movie-loader.gif) 51px 19px no-repeat;
}



.media.music .yamane
{
  width: 710px;
  height: 180px;
  padding: 25px 35px 0 195px;
  background: url(images/yamane.png) no-repeat;
  margin: 20px auto;
  font-size: 14px;
  line-height: 20px;
}



.media.music #player
{
  position: relative;
  clear: both;
  width: 978px;
  height: 554px;
  margin: 0 auto;
  background: url(images/music.png) no-repeat;
}

.media.music #player .cp-container
{
  position: relative;
  z-index: 10000;
  top: 273px;
  margin: 0 auto;
}
.media.music #player h2
{
  position: absolute;
  width: 100%;
  text-align: center;
  color: #f5e56f;
  text-decoration: none;
  text-shadow: 0px 0px 5px #ff5f00;
  font-size: 60px;
  text-transform: uppercase;
  bottom: 90px;
}

.media.music #player .select_prev:link, .media.music #player .select_prev:visited
{
  position: absolute;
  left: 270px;
  top: 290px;
  width: 60px;
  height: 65px;
  background: url(images/music_arrow-left.png) no-repeat;
}
.media.music #player .select_next:link, .media.music #player .select_next:visited
{
  position: absolute;
  right: 270px;
  top: 290px;
  width: 60px;
  height: 65px;
  background: url(images/music_arrow-right.png) no-repeat;
}

.media.music #player .art
{
  position: absolute;
  top: 257px;
  left: 350px;
}
.video-player .video
{
  width: 900px;
  height: 506px;
  position: relative;
  left: 51px; top: 19px;
  z-index: 10;
  background: url(images/videos.png) no-repeat;
}



#border
{
  width: 945px;
  height: 550px;
  background: url(images/edges/media-container.png) no-repeat;
  position: absolute;
  top: -4px; left: 28px;
  z-index: 1;
}

.screen img
{
  width: 900px;
  position: absolute;
  z-index: 0;
  left: 50px; top: 20px;
  box-shadow: 3px 3px 5px #000
}


#ost {overflow: auto; margin: 30px 0;}
#ost .cover {
  float: left;
}

#ost .info {
  float: right;
  margin-top: 40px;
  width: 491px;
  height: 123px;
  background: url(images/edges/music-info.png) no-repeat;
  padding: 45px 50px;
}

#ost .downloads
{
  float: right;
  clear: right;
  width: 590px;
  text-align: center
}

#ost .downloads h2 {text-align: center}



#ost .downloads li
{
  display: inline-block;
  margin: 10px 20px;
  padding: 0;
  list-style-type: none;
}



/*COMMUNITY*/
#community
{
  margin: 0 auto;
  width: 941px;
  height: 702px;
  padding-bottom: 330px;
  position: relative;
  background: url(images/community.png) no-repeat;
}

#community h2
{
  text-align: center;
  position: relative;
  top: 700px;
}

.videos h2
{
  font-size: 20px;
  text-align: center;
  margin: 0;
}

.videos {
  padding-bottom: 70px
}

nav.media
{
  text-align: center;
}

nav.media a
{
  margin: 0 5%;
  opacity: .5;
}
nav.media a.active{opacity: 1}


/** Store

*/

body.store {
  background-image: url(images/store/background-store.png);
}

.store .game h2 {
  height: 68px;
  background: url(images/store/heading-play-the-game.png) no-repeat center center;
  text-indent: -9999px;
}
.store .mobile-game h2 {
  height: 68px;
  background: url(images/store/heading-play-on-mobile.png) no-repeat center center;
  text-indent: -9999px;
}
.store .merchandise h2 {
  height: 68px;
  background: url(images/store/heading-get-the-merch.png) no-repeat center center;
  text-indent: -9999px;
}
.store .music h2 {
  height: 68px;
  background: url(images/store/heading-music.png) no-repeat center center;
  text-indent: -9999px;
}

.page-break {
  height: 68px;
  background: url(images/store/line-rule.png) no-repeat center center;
}

.store #main > section {
  margin: 50px 0;
}

.store #main > section:last-child {
  margin-bottom: 100px;
}

/* FIXME I think there are some reflows */
.store-list {
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 25px 0;
  padding: 0;
  min-height: 96px;
  flex-wrap: wrap;
}

.store-list li {
  margin: 12px;
}

.store-list a {
  display: block;
}

.store-list img {
  height: 70px;
  width: auto;
}

#main .rp_wcdpd_pricing_table td {
  color: #eee;
}

/** Footer

* Top page header. Contains header.skullgirls graphic, menu, and social media menu
* header.skullgirls - header.skullgirls container
* #header.skullgirls .menu - main menu
* #header.skullgirls .social - social media buttons

*/

footer {
  width: 1000px;
  margin: 20px auto;
  background: url(images/footer-bg.png) no-repeat center top;
}

footer > ul {
  margin: 20px auto 0 auto;
  width: 100%;
  padding: 0px;
  list-style-type: none;
  text-align: center;
}

footer li {
  display: inline-block;
  margin: 0 30px 0 30px;
}

footer .hvs-logo img {
  height: 65px;
  width: auto;
}

footer .future-club-logo img {
  height: 65px;
  width: auto;
}

footer .copyright {
  color: #d8cab0;
  height: 98px;
  width: 890px;
  margin: 20px auto 0;
  background: url(images/edges/footer-edge.png) no-repeat top center;
  text-align: center;
  padding: 11px 55px;
  text-transform: uppercase;
  font-size: 10px;
}



/*BLOG*/

.continue_reading
{
  font: 18px SelznickBold;
  float: left;
}

/*HYPERLINKS*/

a:link, a:visited
{
  color: #f5e56f;
  text-decoration: none;
  text-shadow: 0px 0px 5px #ff5f00;
}

a:hover
{
  color: #f4ecb0;
  text-shadow: 0 0 2px #F5E56F, 0 0 7px #FF5F00;
}

#language_list {
  list-style: none;
  position: absolute;
  right: 46px;
  top: 20px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#language_list li {
  display: inline;
  margin: 0 3px;
}

#language_list li.active img {
  box-shadow: 0 0 2px #F5E56F, 0 0 5px #FF5F00;
}

#language_list li:hover img {
  box-shadow: 0 0 2px #F5E56F;
}

/* WooCommerce */
header.skullgirls .cart-contents {
  display: block;
  padding-top: 22px;
  padding-left: 45px;
}

header.skullgirls .cart-contents:focus {
  outline: 0;
}
#main .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a, #main .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, #main .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active a, #main .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
  color: #000 !important;
}

#main .woocommerce #payment, #main .woocommerce-page #payment {
  color: #000;
}

#main .chosen-container .chosen-results {
  color: #000;
}

#main .woocommerce form .form-row input.input-text, #main .woocommerce form .form-row textarea, #main .woocommerce-page form .form-row input.input-text, #main .woocommerce-page form .form-row textarea {
  padding: 5px 10px;
}
.woocommerce-info a:link, #main .woocommerce-info a:visited, #payment a:link, #payment a:visited {
  color: #555;
}


.woocommerce > h2 {
  font-size: 22px;
  margin: 0;
}

#main .woocommerce form.checkout_coupon, #main .woocommerce form.login, #main .woocommerce form.register, #main .woocommerce-page form.checkout_coupon, #main .woocommerce-page form.login, #main .woocommerce-page form.register {
  border: 1px solid rgba(255,255,255,0.25);
}

#main .price del {
  color: #fff;
}
#main .price ins, #main .price {
  color: #85cc66;
  font-size: 1.2em;
}

.woocommerce_tabs .tabs {
  display: none;
}

.pp_details {
  display: none;
}

.ost {
  margin-right: 3%;
}

.humble {
  width: 48%;
  height: 330px;
  float: left;
}

.widget-header-row, .widget-tip-row, .widget-email-row, .widget-payment-processor-row {
  display: none !important;
}

/*FONT FACE FONTS*/

@font-face {
    font-family: 'SelznickBold';
    src: url('fonts/selznick_remix_nf-webfont.eot');
    src: url('fonts/selznick_remix_nf-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/selznick_remix_nf-webfont.woff') format('woff'),
         url('fonts/selznick_remix_nf-webfont.ttf') format('truetype'),
         url('fonts/selznick_remix_nf-webfont.svg#SelznickRemixNFRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Selznick';
    src: url('fonts/selznicknormal-webfont.eot');
    src: url('fonts/selznicknormal-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/selznicknormal-webfont.woff') format('woff'),
         url('fonts/selznicknormal-webfont.ttf') format('truetype'),
         url('fonts/selznicknormal-webfont.svg#SelznickNormalRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.guide-downloads {text-align: center}
.guide-downloads a {display: block; margin: 10px 0}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}