@import "../panes/previewer";
@import "../panes/options";
@import "../panes/linter";
@import "../panes/recorder";
@import "../panes/chat";
@import "../panes/streamer";
@import "../panes/templates";
@import "../panes/info";
@import "../panes/catalogue";

@-webkit-keyframes pulse-info {
  from {
    text-shadow: none;
    filter: none;
  }
  to {
    text-shadow: 0px 0px 5px #08C;
    filter: dropshadow(color=#08C, offx=0, offy=0);
  }
}

@-moz-keyframes pulse-info {
  from {
    text-shadow: none;
    filter: none;
  }
  to {
    text-shadow: 0px 0px 5px #08C;
    filter: dropshadow(color=#08C, offx=0, offy=0);
  }
}


.plunker-paneselector {
  .pulse-info a i {
    -webkit-animation-name: pulse-info;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    
    -moz-animation-name: pulse-info;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-direction: alternate;
  }
}


.plunker-paneselector {
  background: whiteSmoke;
  text-align: center;
  overflow: visible;
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      text-align: center;
      font-size: 16px;
      position: relative;
      margin: 0; padding: 0;
      
      a {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        vertical-align: center;
        color: #999;
        text-decoration: none;
        font-size: 20px;
        
        padding: 0;
      }
    }
    
    li:hover {
      a {
        color: #005580;
        background-color: #EEE;
      }
    }
    
    li.active {
      a {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
        background-color: #08C;
        color: white;
      }
    }
  }
}