/* 
================================================================
    SASS for eclass UI v3.0 - Global styles - version 0.0926a
================================================================
*/


/* COLORS ---------------------------------------------------------------------- */
$color-panel: #FFFFFF;
$color-toolbox: #F0F4F6;

$color-header: #EEEEEE;
$color-footer: #EEEEEE;

$color-background: #232C3A;
$color-main-content: #FAFAFA;
$color-sidebar: #EAEAEA;

$color-hover: #4da1e4;

$color-green: #6BCE6B;
$color-red: #CE6B6B;



/* FONTS ------------------------------------------------------------------------- */
$font-default: 'Open Sans';
$font-icon: 'FontAwesome';


/* TRANSITIONS ------------------------------------------------------------------- */
$transition-time: 120ms;





/* MIXINS ------------------------------------------------------------------------------- */

@mixin user-select($value)
{
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  -o-user-select: $value;
  user-select: $value;
}

@mixin box-sizing($type)
{ 
  box-sizing: $type;
  -moz-box-sizing: $type;
  -webkit-box-sizing: $type;
}

@mixin box-shadow($value...)
{
  box-shadow: $value;
  -moz-box-shadow: $value;
  -webkit-box-shadow: $value;
}

@mixin border-radius($value)
{
  border-radius: $value;
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
}

@mixin transition($value)
{
  -webkit-transition: $value;
  -moz-transition: $value;
  -o-transition: $value;
  -ms-transition: $value;
  transition: $value;
}

@mixin background-size($value)
{
  -webkit-background-size: $value;
  -moz-background-size: $value;
  -o-background-size: $value;
  background-size: $value;
}

@mixin transform($value)
{
  behavior:url(-ms-transform.htc);  
  -moz-transform:rotate($value);  
  -webkit-transform:rotate($value);  
  -o-transform:rotate($value);  
  -ms-transform:rotate($value);
}

@mixin transform-origin($value)
{
  -moz-transform-origin: $value;
  -webkit-transform-origin: $value;
  -o-transform-origin: $value;
  -ms-transform-origin: $value;
  transform-origin: $value;
}








/* CSS ANIMATIONS -----------------------------------------------------------------*/
.transition
{
  @include transition(all 150ms linear);
}

@-webkit-keyframes NEW-ITEM-FX
{
0%   {background: rgba(232, 255, 203,1);}
20%   {background: rgba(232, 255, 203,1);}
100%  {background: rgba(232, 255, 203,0);}
}


@-moz-keyframes NEW-ITEM-FX
{
0%   {background: rgba(232, 255, 203,1);}
20%   {background: rgba(232, 255, 203,1);}
100%  {background: rgba(232, 255, 203,0);}
}


@-o-keyframes NEW-ITEM-FX
{
0%   {background: rgba(232, 255, 203,1);}
20%   {background: rgba(232, 255, 203,1);}
100%  {background: rgba(232, 255, 203,0);}
}


@keyframes NEW-ITEM-FX
{
0%   {background: rgba(232, 255, 203,1);}
20%   {background: rgba(232, 255, 203,1);}
100% {background: rgba(232, 255, 203,0);}
}