cinder-ru/cinder_css.tw2

::StoryCSS [scss stylesheet]
@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}
body {margin:0;}

/*Supress page-to-page transitions*/
.transition-in[data-t8n^=dissolve] {
  -webkit-animation:appear 0ms step-start;
  animation:appear 0ms step-start
}

/*Layout*/
.scene {
  padding: 0;
  white-space: normal; /*Needs compensating spaces for buttons*/
  clear: both;
  margin-bottom:20px; /*comp*/
}
.s-dark {
  background-color: #000;
  color: #fff;
}
.sect-cont {
  margin: auto;
  max-width:640px;
  padding: 0 20px 20px;
}
.sect-img {
  margin: auto;
  max-width:640px;
  padding:0;
  font-size: 0;
  line-height: 0;
}

.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.hidden {
  display: none;
}
.block {
  display: block;
}

/*Score*/
img.star {
  height: 50px;
  width: 50px;
  vertical-align: bottom;
}

div.sect-img img{
  white-space: normal;
}

/* Equip layout */
#equipmenu {
  white-space: normal;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}/*tw-passage has pre-wrap as its setting, creates whitespace*/

.row {
  display: block;
  width: 100%;
  margin: 0;
  line-height: 0;
  tw-link,
  .link,
  .enchantment-link,
  tw-hook {
    margin: 0;
    padding: 0;
    line-height: 0;
    border: 0;
  }
  &::before,
  &::after {
    display: table;
    line-height: 0;
  }
  &::after {
    clear: both;
  }
}
.col400 {
  float: left;
  width: 60%;
}
.col240 {
  float: left;
  width: 20%;
}

.btn100 {
  height: 100px;
  display:block;
  line-height: 1.3em;
  padding: 25px;
}

/*Links*/
tw-link, .link, .enchantment-link, .btn {
  background-color: #000;
  border: 1px solid #000;
  border-radius: 5px;
  color: #fff;
  padding: 8px 16px;
  display: block;
  margin: 5px 0;  
  cursor: pointer;
  text-decoration: none;
}
a.btn:visited { 
  color: #ffffff;
}

.enchantment-link,
tw-link,
.btn {
  &:hover {
    background-color: #be1a00;
    border-color: #be1a00;
    color: #fff;
    text-decoration: none;
  }
  &:focus,
  &:active,
  &:visited {
    color: #000;
  }
}
.s-dark tw-link, 
.s-dark .link, 
.s-dark .enchantment-link {
  background-color: #000;
  border: none;
  border-radius: 0;
  color: #be1a00;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.s-dark .enchantment-link:hover, 
.s-dark tw-link:hover {
  background-color: #000;
  text-decoration: underline;
  color: #fff;
}

.s-dark #equipmenu .enchantment-link:hover,
.s-dark #equipmenu tw-link:hover {
    border: 0;
}

.visited,
.visited:hover {
  color: #fff;
}

/*Walk compass links*/
.cont-w-nav {
  width:200px;
  height:200px;
  overflow: hidden;
  margin: 20px auto; /*or 0 auto 20px if pre-wrap on tw-passage is on*/
}
.walk-nav {
  width:200px;
  height:200px;
  line-height: 0;
  @include rotate(45);
  span,
  tw-link {
    display: inline-block;
    width: 100px;
    height:100px;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
  }
}
.no-rotate {
  @include rotate(0);
}

.walk-nav tw-expression tw-link,
.walk-nav tw-link{
  background-color: #000;
  background: url(walk-arrow.svg) 0 0 no-repeat;
  text-indent: -10000px;
  cursor: pointer;
  &:hover {
    background-color: #cadbaa;
    background: url(walk-arrow-h.svg) 0 0 no-repeat;
  }
}
.walk-nav .w-r tw-expression tw-link,
.walk-nav .w-r tw-link,
.walk-nav .inactive.w-r {
  @include rotate(90);
}
.walk-nav .w-d tw-expression tw-link,
.walk-nav .w-d tw-link, 
.walk-nav .inactive.w-d{
  @include rotate(180);
}
.walk-nav .w-l tw-expression tw-link,
.walk-nav .w-l tw-link,
.walk-nav .inactive.w-l {
  @include rotate(270);
}
.walk-nav .inactive {
  background: url(walk-arrow-off.svg) 0 0 no-repeat;
  text-indent: -10000px;
} 
.walk-nav .inactive:hover {
  background: url(walk-arrow-off.svg) 0 0 no-repeat;
}

/*Social links*/
.social {
  padding: 8px 14px;
  margin-left: 5px;
  border-radius: 3px;
  background-color: #000000;
  transition: all .6s;
  -moz-transition: all .6s;
  -webkit-transition: all .6s;
  -o-transition: all .6s;
  color: #ffffff;
  text-decoration: none;
}
.social:hover {
  transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  color: #ffffff;
}
.facebook:hover {
  background-color: #435fa8;
}
.twitter:hover {
  background-color: #39d2fe;
}

/*Inventory*/
.inventory-content {
  width: 210px;
  height: 210px;
}
.slot {
  width: 100px;
  height: 100px;
  background-color: #444;
}
.slotwide {
  width: 200px;
  height: 100px;
  background-color: #cadbaa;
}

.slotfull {
  width: 200px;
  height: 200px;
  background-color: red;
}

/*Twine items*/
tw-passage{
  white-space: normal;
}

tw-passage img {
  max-width: 640px;
  /* max-width: 100%; */
}
tw-sidebar {
  display: none;
}
tw-story {
  width: 100%;
  margin:0;
}

/*Fonts*/
tw-story {
  font-size: 19px;
}

h1 {
  font-size: 2.5em;
  text-align: center;
  margin: 0.3em 0;
}
.toph {
  margin-top: 0;
  padding-top: 20px;
}
.char-name {
  font-size: 60%;
  line-height: 0;
  top: 0.3em;
}
.char-talk:before {
  content: '«';
  font-size: 200%;
  line-height: 40%;
  padding-right: 0.1em;
  top: 0.2em;
}
.char-talk:after {
  content: '»';
  font-size: 200%;
  line-height: 40%;
  padding-left: 0.1em;
  top: 0.2em;
}
.more-link tw-link{
  margin:0;
  padding: 0;
  border: none;
}
.alert {
  color: #ae0000;
}

.mapPin {
  position: relative; 
  top: 0; 
  left: 0;
}
.mapPin tw-hook {
  position: absolute; 
  top: 0; 
  left: 0;
}

/*Device sizes*/
@media (max-width: 479px) {
  tw-story {
    font-size: 17px;
  }
}
@media (max-width: 640px) {
  #equipmenu .row .col240:nth-child(3) {
  display:none;
  }
}
/*Was a test to fix zoom-level, now clips Cinder's dress att small sizes*/
.scene.equip {
  min-width: 300px;
}

::StoryJS [script]

//From http://twinery.org/forum/index.php/topic,2450.0.html adding sounds, don't yet know where to place audio file
$(document.body).on("mouseenter", "a", function () {
  $("<audio></audio>").attr({
    src: "sound/transition1.ogg",
    autoplay: "autoplay"
  });
});

//http://twinery.org/forum/index.php/topic,2495.0.html Calling JS with a hack
if (typeof Undo == "undefined") {
  var Undo = {
    hide: function() {
      $('div[class="equip1"]').hide();
    }
  };
  window.Undo = Undo;
}

window.onload = function() {
$(function()
{
// disable :hover on touch devices - removes all rules that include a :hover, so isolate all :hover selectors
// based on https://gist.github.com/4404503 
// via https://twitter.com/javan/status/284873379062890496
// + https://twitter.com/pennig/status/285790598642946048
// re http://retrogamecrunch.com/tmp/hover
  if ('createTouch' in document)
  {
    try
    {
      var ignore = /:hover\b/;
      for (var i=0; i<document.styleSheets.length; i++)
      {
        var sheet = document.styleSheets[i];
        for (var j=sheet.cssRules.length-1; j>=0; j--)
        {
          var rule = sheet.cssRules[j];
          if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText))
          {
            sheet.deleteRule(j);
          }
        }
      }
    }
    catch(e){}
  }
});
}