@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
/* --- NORMALIZE -- */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio, canvas, progress, video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden], template {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b, strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 1em 40px; }

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * 1. Define consistent border, margin, and padding.
 * 2. Address width being affected by wide descendants in Chrome and Firefox.
 */
fieldset {
  border: 1px solid #c0c0c0;
  /* 1 */
  margin: 0 2px;
  /* 1 */
  min-width: 0;
  /* 2 */
  padding: 0.35em 0.625em 0.75em;
  /* 1 */ }

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Correct color not being inherited in all browsers.
 *    Known issue: `select` will not inherit color in Chrome and Safari on OS X.
 * 2. Correct font properties not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button, input, optgroup, select, textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Re-apply the `font-weight` to avoid modifying the default UX, and because
 * the default cannot be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button, input {
  line-height: normal; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button, select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled], html input[disabled] {
  cursor: default; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

/* --- MIXIN -- */
/* -- VARIABLE -- */
/* SCREEN SIZES */
/* COLORS */
/* FONTS */
/*-- HEADER --*/
.header {
  position: relative;
  background-color: #474647;
  height: 35px;
  width: 100%; }
  .header .header_wrapper {
    width: 90%;
    margin: 0 auto;
    padding-top: 3px; }
    .header .header_wrapper:before, .header .header_wrapper:after {
      content: " ";
      display: table; }
    .header .header_wrapper:after {
      clear: both; }
    .header .header_wrapper .homeicon {
      width: 28px;
      height: 28px;
      float: left; }
    .header .header_wrapper .headertext {
      width: 120px;
      height: 28px;
      float: left;
      padding-left: 6px; }
      .header .header_wrapper .headertext a {
        color: white;
        line-height: 30px;
        text-decoration: none; }
      .header .header_wrapper .headertext a:hover {
        color: #FE9744; }

/*-- CONTENT --*/
/*-- basic layout --*/
body {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  line-height: 0px;
  background-color: #2FB4BA;
  background-image: url("../images/backgrounds/background.png");
  background-position: center;
  background-repeat: repeat-y; }
  body:before, body:after {
    content: " ";
    display: table; }
  body:after {
    clear: both; }
  body div {
    width: 100%;
    position: relative; }

#wrapper {
  width: 1000px;
  margin: 2.5% auto; }
  #wrapper:before, #wrapper:after {
    content: " ";
    display: table; }
  #wrapper:after {
    clear: both; }

#game_border {
  max-width: 960px;
  position: relative;
  background-color: #5BC2A7;
  float: left;
  z-index: 100;
  /* mobile view */ }
  #game_border:before, #game_border:after {
    content: " ";
    display: table; }
  #game_border:after {
    clear: both; }

#game_container {
  margin: 1% auto;
  padding: 2%;
  width: 94%;
  background-color: #F4F3F3; }
  #game_container:before, #game_container:after {
    content: " ";
    display: table; }
  #game_container:after {
    clear: both; }

img {
  max-width: 100%; }

/*-- Coloring Game --*/
#game_title h3 {
  color: white;
  padding: 0 2%;
  line-height: 18px;
  /*display: none;*/ }

#toolbox_container {
  width: 13%;
  background-color: #FFCF56;
  float: right; }
  #toolbox_container #toolbox_title {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #474647; }
    #toolbox_container #toolbox_title h4 {
      display: inline-block;
      color: #F4F3F3;
      padding: 0 8px;
      line-height: 0; }
  #toolbox_container #toolbox_icons_container {
    position: relative; }
    #toolbox_container #toolbox_icons_container #tool_paint #icon_brush {
      position: absolute;
      top: 0;
      left: 0; }
    #toolbox_container #toolbox_icons_container .inner_circle {
      margin: 10px auto;
      width: 60%;
      height: auto;
      border-radius: 50%;
      background-color: white;
      border: 10px solid #FBAF3C; }
      #toolbox_container #toolbox_icons_container .inner_circle:before, #toolbox_container #toolbox_icons_container .inner_circle:after {
        content: " ";
        display: table; }
      #toolbox_container #toolbox_icons_container .inner_circle:after {
        clear: both; }
    #toolbox_container #toolbox_icons_container .inner_circle:hover {
      cursor: pointer;
      border: 10px solid #F36E53; }

#option_container {
  width: 13%;
  background-color: #7ECDC3;
  float: right;
  margin-top: 10px; }
  #option_container #option_title {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #474647; }
    #option_container #option_title h4 {
      display: inline-block;
      color: #F4F3F3;
      padding: 0 8px;
      line-height: 0; }
  #option_container #option_icons_container {
    position: relative; }
    #option_container #option_icons_container .inner_circle {
      margin: 10px auto;
      width: 60%;
      height: auto;
      border-radius: 50%;
      background-color: white;
      border: 10px solid #63A69F; }
      #option_container #option_icons_container .inner_circle:before, #option_container #option_icons_container .inner_circle:after {
        content: " ";
        display: table; }
      #option_container #option_icons_container .inner_circle:after {
        clear: both; }
    #option_container #option_icons_container .inner_circle:hover {
      cursor: pointer;
      border: 10px solid #2E5E58; }

.texthider {
  display: none; }

/*-- SGV --*/
#coloring_book_image {
  float: left;
  width: 84%;
  padding: 5px; }

#svg_container {
  margin: 0;
  padding: 0;
  width: 100%;
  float: left;
  display: inline-block;
  position: relative;
  padding-bottom: 62%;
  vertical-align: middle;
  overflow: hidden;
  outline: 4px solid #474647; }

.svg-content {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0; }

/*-- Color Palletes container --*/
#palette_container {
  float: left;
  width: 84%;
  padding: 15px 5px;
  height: auto;
  background-color: #A8A091;
  margin-top: 10px;
  border-radius: 2px; }
  #palette_container:before, #palette_container:after {
    content: " ";
    display: table; }
  #palette_container:after {
    clear: both; }
  #palette_container #scroll_left {
    width: 5%;
    float: left;
    height: 90px;
    background-image: url("../images/icons/scroll_left.png");
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center center; }
  #palette_container #scroll_left:hover {
    cursor: pointer;
    background-image: url("../images/icons/scroll_left_hover.png"); }
  #palette_container #scroll_right {
    width: 5%;
    float: right;
    height: 90px;
    background-image: url("../images/icons/scroll_right.png");
    background-repeat: no-repeat;
    background-size: 90% auto;
    background-position: center center; }
  #palette_container #scroll_right:hover {
    cursor: pointer;
    background-image: url("../images/icons/scroll_right_hover.png"); }
  #palette_container #colors {
    width: 86%;
    float: left;
    height: 90px;
    margin: 0 2%;
    background-color: WHITE;
    border-radius: 20px; }

#colors {
  overflow: hidden; }
  #colors ul {
    list-style: none;
    margin: 0;
    margin-top: -11px;
    padding: 0;
    width: 2600px;
    position: absolute;
    left: 0; }
    #colors ul:before, #colors ul:after {
      content: " ";
      display: table; }
    #colors ul:after {
      clear: both; }
    #colors ul li {
      Float: left;
      margin: 0 10px;
      width: 68px;
      height: 68px;
      border-radius: 40px;
      position: relative;
      border: 7px solid #CFCBC2; }
      #colors ul li img {
        position: absolute;
        top: 0;
        left: 0;
        width: 68px; }
      #colors ul li[id="#E9292F"] {
        background-color: #E9292F; }
      #colors ul li[id="#EC5724"] {
        background-color: #EC5724; }
      #colors ul li[id="#F0763F"] {
        background-color: #F0763F; }
      #colors ul li[id="#FAAA21"] {
        background-color: #FAAA21; }
      #colors ul li[id="#FAD41C"] {
        background-color: #FAD41C; }
      #colors ul li[id="#AAC02C"] {
        background-color: #AAC02C; }
      #colors ul li[id="#5A913A"] {
        background-color: #5A913A; }
      #colors ul li[id="#006644"] {
        background-color: #006644; }
      #colors ul li[id="#009887"] {
        background-color: #009887; }
      #colors ul li[id="#7ECDC3"] {
        background-color: #7ECDC3; }
      #colors ul li[id="#62BFDC"] {
        background-color: #62BFDC; }
      #colors ul li[id="#0077AD"] {
        background-color: #0077AD; }
      #colors ul li[id="#263287"] {
        background-color: #263287; }
      #colors ul li[id="#462A88"] {
        background-color: #462A88; }
      #colors ul li[id="#4E0A55"] {
        background-color: #4E0A55; }
      #colors ul li[id="#924564"] {
        background-color: #924564; }
      #colors ul li[id="#F0648B"] {
        background-color: #F0648B; }
      #colors ul li[id="#F6A0B3"] {
        background-color: #F6A0B3; }
      #colors ul li[id="#E8D4A6"] {
        background-color: #E8D4A6; }
      #colors ul li[id="#BF9A6A"] {
        background-color: #BF9A6A; }
      #colors ul li[id="#7F6350"] {
        background-color: #7F6350; }
      #colors ul li[id="#000000"] {
        background-color: #000000; }
      #colors ul li[id="#4C4C4C"] {
        background-color: #4C4C4C; }
      #colors ul li[id="#A0A0A0"] {
        background-color: #A0A0A0; }
      #colors ul li[id="#FFFFFF"] {
        background-color: #FFFFFF; }
    #colors ul li:hover {
      cursor: pointer;
      border: 7px solid #A8A091; }

input {
  width: 68px;
  height: 68px;
  border-radius: 40px;
  border: none;
  /* colors  */ }
  input[class="#E9292F"] {
    background-color: #E9292F; }
  input[class="#EC5724"] {
    background-color: #EC5724; }
  input[class="#F0763F"] {
    background-color: #F0763F; }
  input[class="#FAAA21"] {
    background-color: #FAAA21; }
  input[class="#FAD41C"] {
    background-color: #FAD41C; }
  input[class="#AAC02C"] {
    background-color: #AAC02C; }
  input[class="#5A913A"] {
    background-color: #5A913A; }
  input[class="#006644"] {
    background-color: #006644; }
  input[class="#009887"] {
    background-color: #009887; }
  input[class="#7ECDC3"] {
    background-color: #7ECDC3; }
  input[class="#62BFDC"] {
    background-color: #62BFDC; }
  input[class="#0077AD"] {
    background-color: #0077AD; }
  input[class="#263287"] {
    background-color: #263287; }
  input[class="#462A88"] {
    background-color: #462A88; }
  input[class="#4E0A55"] {
    background-color: #4E0A55; }
  input[class="#924564"] {
    background-color: #924564; }
  input[class="#F0648B"] {
    background-color: #F0648B; }
  input[class="#F6A0B3"] {
    background-color: #F6A0B3; }
  input[class="#E8D4A6"] {
    background-color: #E8D4A6; }
  input[class="#BF9A6A"] {
    background-color: #BF9A6A; }
  input[class="#7F6350"] {
    background-color: #7F6350; }
  input[class="#000000"] {
    background-color: #000000; }
  input[class="#4C4C4C"] {
    background-color: #4C4C4C; }
  input[class="#A0A0A0"] {
    background-color: #A0A0A0; }
  input[class="#FFFFFF"] {
    background-color: #FFFFFF; }

/*-- Side Bar --*/
.sidebar_container {
  width: 250px;
  position: absolute;
  margin-top: 60px;
  margin-left: 760px;
  -webkit-transition: margin-left 2s ease;
  -moz-transition: margin-left 2s ease;
  -o-transition: margin-left 2s ease;
  transition: margin-left 2s ease; }
  .sidebar_container:before, .sidebar_container:after {
    content: " ";
    display: table; }
  .sidebar_container:after {
    clear: both; }
  .sidebar_container .sidebar {
    width: 200px;
    float: left;
    background-color: #3F997D;
    overflow: hidden;
    height: 630px; }
    .sidebar_container .sidebar:before, .sidebar_container .sidebar:after {
      content: " ";
      display: table; }
    .sidebar_container .sidebar:after {
      clear: both; }
  .sidebar_container label {
    cursor: pointer;
    height: auto; }
    .sidebar_container label:before, .sidebar_container label:after {
      content: " ";
      display: table; }
    .sidebar_container label:after {
      clear: both; }
  .sidebar_container input {
    display: none; }
  .sidebar_container #sidebarTab {
    float: left;
    width: 30px;
    margin-top: 170px;
    height: auto; }
    .sidebar_container #sidebarTab:before, .sidebar_container #sidebarTab:after {
      content: " ";
      display: table; }
    .sidebar_container #sidebarTab:after {
      clear: both; }
    .sidebar_container #sidebarTab #top {
      float: left;
      width: 0;
      height: 0;
      border-bottom: 30px solid #3F997D;
      border-right: 30px solid transparent; }
    .sidebar_container #sidebarTab #mid {
      float: left;
      width: 30px;
      height: 200px;
      background-color: #3F997D; }
    .sidebar_container #sidebarTab .opencloseicon_container {
      width: 30px;
      height: 200px;
      background-color: transparent;
      background-image: url("../images/sidebar/open_normal.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 50% auto;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transition: transform 1s ease;
      -moz-transition: transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease; }
    .sidebar_container #sidebarTab .opencloseicon_container:hover {
      background-image: url("../images/sidebar/open_hover.png");
      cursor: pointer; }
    .sidebar_container #sidebarTab .rotater {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg); }
    .sidebar_container #sidebarTab #bot {
      float: left;
      width: 0;
      height: 0;
      border-left: 30px solid #3F997D;
      border-bottom: 30px solid transparent; }

.lefter {
  margin-left: 960px; }

#thumb_container {
  position: relative; }
  #thumb_container #scroll_up {
    position: absolute;
    top: -38px;
    height: 35px;
    background-image: url("../images/icons/scroll_up.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13% auto;
    z-index: 99; }
  #thumb_container #scroll_up:hover {
    background-image: url("../images/icons/scroll_up_hover.png");
    cursor: pointer; }
  #thumb_container #scroll_down {
    position: absolute;
    bottom: -38px;
    height: 35px;
    background-image: url("../images/icons/scroll_down.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 13% auto;
    z-index: 99; }
  #thumb_container #scroll_down:hover {
    background-image: url("../images/icons/scroll_down_hover.png");
    cursor: pointer; }
  #thumb_container #thumbslist {
    position: relative;
    height: 540px;
    overflow: hidden;
    margin-top: 40px; }
    #thumb_container #thumbslist ul {
      padding: 0;
      margin: 0 20px;
      list-style: none;
      position: absolute;
      top: 0px;
      width: 160px; }
      #thumb_container #thumbslist ul li {
        margin: 0px;
        padding: 10px 0px; }

/* Responsive
@media (min-width: $small-width){	

	}	
@media (min-width: $medium-width){	 

}
@media (min-width: $large-width){		
}

@media (min-width: $xlarge-width){	  

}
*/
body {
  background-image: none;
  overflow: hidden; }

.header, .header_wrapper {
  display: none; }

#wrapper {
  width: 1000px;
  margin: 0;
  -webkit-transform: scale(0.75, 0.75);
  -webkit-transform-origin: 0 0;
  -ms-transform: scale(0.75, 0.75);
  -ms-transform-origin: 0 0;
  -mz-transform: scale(0.75, 0.75);
  -mz-transform-origin: 0 0;
  transform: scale(0.75, 0.75);
  transform-origin: 0 0; }
  #wrapper:before, #wrapper:after {
    content: none;
    display: none; }
  #wrapper:after {
    clear: both; }

#game_border:before, #game_border:after {
  content: none;
  display: none; }
#game_border:after {
  clear: both; }

#sidebar_container {
  margin-left: 960px; }

#sidebarTab {
  display: none; }

#option_more {
  display: none; }

#option_icons_container {
  height: 206px; }

#option_save {
  padding-top: 40px; }

.can-download-svg #option_save img {
  display: none; }
.can-download-svg #option_save .inner_circle {
  width: 70px !important;
  height: 70px !important;
  background-image: url(../images/icons/heart.png);
  background-position: top left;
  background-size: 70px 70px; }

.can-download-svg #option_save .inner_circle:hover {
  background-image: url(../images/icons/heart_hover.png); }

.can-download-svg #option_title {
  overflow: hidden; }
  .can-download-svg #option_title h4:before {
    content: 'Save';
    margin-left: 32px;
    margin-right: 50%; }

.offscreen {
  position: absolute;
  display: block;
  top: 0; }