/**
 * Farbtastic Color Picker 1.2
 * © 2008 Steven Wittens
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 137px;
  height: 137px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 33px;
  left: 33px;
  width: 71px;
  height: 71px;
}
.farbtastic .wheel {
  background: url(wheel.png) no-repeat;
  width: 137px;
  height: 137px;
}
.farbtastic .overlay {
  background: url(mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: 0px 0 0 0;
  overflow: hidden; 
  background: url(marker.png) no-repeat;
}


@media screen and (min-width: 300px) and (max-width: 600px) {
  #orion-keyboard-color-menu-wrapper{
		top: 1% !important;
		left: 2% !important;
    width: 220px;
    
	  }
    .farbtastic,
.farbtastic .wheel {
	width: 82px;
	height: 82px;
}
.farbtastic .color,
.farbtastic .overlay {
	top: 20px;
	left: 20px;
	width: 42px;
	height: 42px;
}
.farbtastic .wheel {
	
	width: 82px;
	height: 82px;
	background-size: 100%;
}

.farbtastic .marker {
	width: 14px;
	height: 14px;
	margin: -8px 0px 0px -8px;
	overflow: hidden;	
}
.h-marker .marker{
   top: 44px !important;
}

}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	
  #orion-keyboard-color-menu-wrapper {
		top: 1% !important;
		left: 2% !important;
		width: 220px;
	}
	.farbtastic,
	.farbtastic .wheel {
		width: 82px;
		height: 82px;
	}
	.farbtastic .color,
	.farbtastic .overlay {
		top: 20px;
		left: 20px;
		width: 42px;
		height: 42px;
	}
	.farbtastic .wheel {
		width: 82px;
		height: 82px;
		background-size: 100%;
	}

	.farbtastic .marker {
		width: 14px;
		height: 14px;
		margin: -8px 0px 0px -8px;
		overflow: hidden;
	}

	.h-marker .marker {
		top: 44px !important;
	}

   #onOffkeyBoBacklitAnim{
      right: 125px;
      position: absolute;
   }
   
}

@media screen and (min-width: 300px) and (max-width: 600px) and (orientation: landscape){
         #orion-keyboard-color-menu-wrapper{
          display: none;
         }
}
/* @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
	
  #orion-keyboard-color-menu-wrapper {
		top: 1% !important;
		left: 2% !important;
		width: 220px;
	}
	.farbtastic,
	.farbtastic .wheel {
		width: 82px;
		height: 82px;
	}
	.farbtastic .color,
	.farbtastic .overlay {
		top: 20px;
		left: 20px;
		width: 42px;
		height: 42px;
	}
	.farbtastic .wheel {
		width: 82px;
		height: 82px;
		background-size: 100%;
	}

	.farbtastic .marker {
		width: 14px;
		height: 14px;
		margin: -8px 0px 0px -8px;
		overflow: hidden;
	}

	.h-marker .marker {
		top: 44px !important;
	}

   #onOffkeyBoBacklitAnim{
      right: 125px;
      position: absolute;
   }
   
} */