.anglePicker-circle {
	border-radius: 100%;
	border: 1px solid #333333;
}
.anglePicker-center {
	border-radius: 100%;
	border: 1px dotted #999999;
	position: absolute;
}
.anglePicker-handle {
	border-radius: 100%;
	background-color: #333333;
	position: absolute;
}

.anglePicker-value {
	border-radius: 3px;
	background-color: #333333;
	position: absolute;
	color: #EEEEEE;
	width:30px;
	height:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:20px;
	text-align: center;
	z-index:1;
}

.anglePicker-top {
	position:relative;
	cursor:pointer;
}
.anglePicker-control {
	position:relative;
	width:40px;
	height:40px;
	border: 1px solid black;
	display:block;
}
.anglePicker-outer.anglePicker-popup {
	opacity:0;
	position:absolute;
	left:45px;
	top:0px;
	display:inline-block;
	border:1px solid orange;
	border-radius:5px;
	background-color: white;
	z-index:2;
}
.anglePicker-other.anglePicker-popup.anglePicker-open {
	opacity:1;
}

/*!
 * roundSlider v1.3.3 | (c) 2015-2019, Soundar
 * MIT license | http://roundsliderui.com/licence.html
 */

.rs-ie, .rs-edge {
    -ms-touch-action: none;
    touch-action: none;
}
.rs-control { position: relative; outline: 0 none; }
.rs-container { position: relative; }
.rs-control *, .rs-control *:before, .rs-control *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rs-animation .rs-transition
{
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.rs-bar
{
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.rs-control .rs-split .rs-path,
.rs-control .rs-overlay1,
.rs-control .rs-overlay2
{
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.rs-control .rs-overlay
{
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.rs-rounded .rs-seperator, .rs-split .rs-path {
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box;
}
.rs-control.rs-error
{
    border: 1px dotted;
    text-align: center;
}
.rs-readonly {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 100;
}
.rs-disabled {
    opacity: 0.35;
}
.rs-inner-container
{
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.quarter div.rs-block { height: 200%; width: 200%; }
.half.top div.rs-block, .half.bottom div.rs-block { height: 200%; width: 100%; }
.half.left div.rs-block, .half.right div.rs-block { height: 100%; width: 200%; }
.bottom > .rs-inner-container > .rs-block { top: auto; bottom: 0; }
.right .rs-inner-container > .rs-block { right: 0; }
div.rs-block { -webkit-border-radius: 1000px; border-radius: 1000px; }
.rs-block
{
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    z-index: 3;
}
.rs-block .rs-inner
{
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}
.rs-overlay { width: 50%; }
.rs-overlay1, .rs-overlay2 { width: 100%; }
.rs-overlay, .rs-overlay1, .rs-overlay2
{
    position: absolute;
    background-color: white;
    z-index: 3;
    top: 0;
    height: 50%;
}
.rs-bar
{
    display: block;
    position: absolute;
    height: 0;
    z-index: 10;
}
.rs-bar.rs-rounded {
    z-index: 5;
}
.rs-bar .rs-seperator {
    height: 0px;
    display: block;
    float: left;
}
.rs-bar:not(.rs-rounded) .rs-seperator {
    border-left: none;
    border-right: none;
}
.rs-bar.rs-start  .rs-seperator { border-top: none; }
.rs-bar.rs-end  .rs-seperator { border-bottom: none; }
.rs-bar.rs-start.rs-rounded .rs-seperator { border-radius: 0 0 1000px 1000px; }
.rs-bar.rs-end.rs-rounded .rs-seperator { border-radius: 1000px 1000px 0 0; }
.full .rs-bar, .half .rs-bar { width: 50%; }
.half.left .rs-bar, .half.right .rs-bar, .quarter .rs-bar { width: 100%; }
.full .rs-bar, .half.left .rs-bar, .half.right .rs-bar { top: 50%; }
.bottom .rs-bar { top: 0; }
.half.right .rs-bar, .quarter.right .rs-bar { right: 100%; }

.rs-handle.rs-move { cursor: move; }
.rs-readonly .rs-handle.rs-move { cursor: default; }
.rs-path { display: block; height: 100%; width: 100%; }
.rs-split .rs-path
{
    -webkit-border-radius: 1000px 1000px 0 0;
    border-radius: 1000px 1000px 0 0;
    overflow: hidden;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
}

/*** tooltip styles ***/
.rs-tooltip
{
    position: absolute;
    cursor: default;
    border: 1px solid transparent;
    z-index: 10;
}
.full .rs-tooltip { top: 50%; left: 50%; }
.bottom .rs-tooltip { top: 0; } 
.top .rs-tooltip { bottom: 0; }
.right .rs-tooltip { left: 0; }
.left .rs-tooltip { right: 0; }
.half.top .rs-tooltip, .half.bottom .rs-tooltip { left: 50%; }
.half.left .rs-tooltip, .half.right .rs-tooltip { top: 50%; }
.rs-tooltip .rs-input { outline: 0 none; border: none; background: transparent; }
.rs-tooltip-text { font-family: verdana; font-size: 13px; border-radius: 7px; text-align: center; }
.rs-tooltip.edit, .rs-tooltip .rs-input { padding: 5px 8px; }
.rs-tooltip.hover, .rs-tooltip.edit:hover { border: 1px solid #AAAAAA; cursor: pointer; }
.rs-readonly .rs-tooltip.edit:hover { border-color: transparent; cursor: default; }

/*** handle types ***/
.rs-handle { border-radius: 1000px; outline: 0 none; float: left; }
.rs-handle.rs-handle-square { border-radius: 0px; }
.rs-handle-dot { border: 1px solid #AAAAAA; padding: 6px; }
.rs-handle-dot:after {
    display: block;
    content: "";
    border: 1px solid #AAAAAA;
    height: 100%;
    width: 100%;
    border-radius: 1000px;
}

/*** theming - colors ***/
.rs-seperator { border: 1px solid #AAAAAA; }
.rs-border { border: 1px solid #AAAAAA; }
.rs-path-color { background-color: #FFFFFF; }
.rs-range-color { background-color: #54BBE0; }
.rs-bg-color { background-color: #FFFFFF; }
.rs-handle { background-color: #838383; }
.rs-handle-dot { background-color: #FFFFFF; }
.rs-handle-dot:after { background-color: #838383; }

.gradientMaker-editor {
	display:inline-block;
	position:relative;
}
.gradientMaker-top {
	display:flex;
	vertical-align: top;
	padding:10px;
}
.gradientMaker-control {
	position:relative;
	width:40px;
	height:40px;
	border: 1px solid black;
	display:block;
}
.gradientMaker-outer.gradientMaker-popup {
	opacity:0;
	position:absolute;
	left:45px;
	top:0px;
	border:1px solid orange;
	border-radius:5px;
	background-color: white;
	z-index:2;
	display:inline-block;
}
.gradientMaker-outer.gradientMaker-popup.gradientMaker-open {
	opacity:1;
}	

.gradientMaker-preview {
	/* margin-left:6px;
	margin-right:6px; */
	width:202px; /*1px for border*/
	height:50px;
	/* ie transparent looking checkerboard */
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAAA3NCSVQICAjb4U/gAAAACVBMVEX////////MzMzj3LoRAAAAA3RSTlMAzMwP69IHAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADEyLzEyLzEyJZRHgQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUSURBVAiZYwiNWsWADa9aGooNAwCZdxHvZF1NBwAAAABJRU5ErkJggg==") top left repeat;
	border: 1px solid black;
	cursor: copy;
}
.gradientMaker-rotate {
	margin:0;
	display:inline-block;
	margin-top: 0px;
	margin-left: 10px;
}

.gradientMaker-detail {
	position:absolute;
	bottom: 0;
	right: 0;
	padding-right: 20px;
}

.gradientMaker-stops {
	position:relative;
	width:200px; /* extra added at run time */
	height:30px;
}

.gradientMaker-stop {
	position: absolute;
}


.gradientMaker-stop-color.selected {
	box-shadow: 0 0 10px #999999;
}

.gradientMaker-stop-pointer-h {
	/*border: 2px solid blue;*/
	/* opacity: 0.5; */
	width: 13px;
	height: 9px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3QIYABwOjNb5GwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABkSURBVBjTjdHBCcQwDETRP9s/qA5XZHfzc0gMwRuTzEUg6SGDAWmtca+qgFf9S+DsL2OToJIkK/qtjTGGcy8Jvfena84nzQWrStWqEvABnmgFMxu4B1v4BnbwFaww13/wNUk4ACIazmFFLEgUAAAAAElFTkSuQmCC") top left no-repeat;
}

.gradientMaker-stop-pointer-h.selected {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3QIYATMsSmjqpQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABaSURBVBjTnZBbCgAxCAMnvf9FeiJ7m+xHVyh9sI+ABDSDImBqrYxu24BvXyTo/WlsSdhGkmaozI3WmjMniYjYbXOelIGlNmCfnYAD+Aws4FtgBEW+74MKP3QBwKdi+TP5PMEAAAAASUVORK5CYII=") top left no-repeat;
}

.gradientMaker-stop-pointer-v {
	/*border: 2px solid blue;*/
	width: 9px;
	height: 13px;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3QIYDgkb3CDW7gAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjThdHLCcAwDATRSfoHuw1V5HImh3xwiOQYdHuI9QqKN8YQuKcGrTVVf8EHZeCFKqDKpFOgus3ps4wA+7UNgN571ciJlpkignvb4nc+qIJExNT+OUnj+cy3OwBD3OE93R0gtgAAAABJRU5ErkJggg==") top left no-repeat;
	float:left;
}

.gradientMaker-stop-pointer-v.selected {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3QIYDgk37vi6DQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABRSURBVBjTjc/BCcAwDEPRr+6/iCfyOOolKYWi1AJfzEPYENLdBvb8Ak+AJ8ATYNk2gKT0A4rXv3LZZpVlJCFA3Z1VVbHbTsc/KMKq+uyOjQnekt9s5toEb9AAAAAASUVORK5CYII=") top left no-repeat;
}

.gradientMaker-stop-color {
	border: 1px solid black;
	/* width: 100%;
	height: 100%; */
	float:left;

}

.gradientMaker-stops-default .gradientMaker-stop .gradientMaker-stop-color {
	width: 13px;
	height: 13px;
}

.gradientMaker-stops-circle .gradientMaker-stop .gradientMaker-stop-color {
	border-radius:100%;
	margin-top: 3px;
	border-radius: 100%;
	width: 25px;
	height: 25px;
}

.gradientMaker-stops-drop .gradientMaker-stop .gradientMaker-stop-color {
	border-radius:0 50% 50% 50%;
	/*transform: translate(-12.5px,-12.5px) rotate(45deg) translate(12.5px,12.5px);*/
	transform: rotate(45deg);
	margin-top: 3px;
	width: 17px;
	height: 17px;
	border: 1px solid black;
	box-shadow: 3px 1px 3px #a2a2a2;
}
.gradientMaker-stops-drop .gradientMaker-stop .gradientMaker-stop-color.selected {
	border-width:3px;
}

.gradientMaker-stops-overlay {
	position:absolute;
	top:-6px;
	left:0px;
}
.gradientMaker-stops.gradientMaker-stops-overlay {
	/* if height !- 0, it interfers with preview clicks */
	height:0px;
	margin-bottom:30px;
}

.gradientMaker-stops-overlay .gradientMaker-stop .gradientMaker-stop-color {
	border-radius:5px;
	width:9px;
	height:58px;
	margin-left:2px;
	margin-top:-61px;
	border: 2px solid white;
	background:none;
}
.gradientMaker-stops-circle .gradientMaker-stop .gradientMaker-stop-pointer-h {
	margin-left: 6px;
}
.gradientMaker-stops-drop .gradientMaker-stop .gradientMaker-stop-pointer-h {
	display:none;
	margin-left: 6px;
}
.gradientMaker-stops-overlay .gradientMaker-stop .gradientMaker-stop-pointer-h {
	border-radius:7px;
	width:13px;
	height:63px;
	border: 2px solid black;
	background: none;
}

.gradientMaker-stops-overlay .gradientMaker-stop .gradientMaker-stop-pointer-h.selected {
	background:none;
}

.gradientMaker-hard {
	text-align:center;
}

input[type="checkbox"] {
	width: auto;
}

/* roundedSlider options*/
.rs-border {
	border: 2px solid #666666;
}
.rs-block .rs-inner {
	display:none;
}
.rs-bar.rs-transition.rs-start{
	display:none;
}
.rs-bar.rs-transition.rs-end{
	display:none;
}

/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/
/* has CUSTOM changes made by Jonas and Cameron,
 * that should be carried over when we upgrade Spectrum.
 * --you can find these changes by searching for 'cameron'
 * But be clear that most of the changes made by jonas :)
 */
/* cameron */
/* changes: make alpha picker higher */

.sp-dragger {
	border: 2px solid black;
	height: 18px;
	width: 18px;
	margin-top: 6px; /*offset the increased dimensions*/
	margin-left: 7px;
	background: none;
	border-radius: 20px; /*5 + 2px white inner border*/
	position: absolute;
}
	.sp-dragger-inner {
		width: 14px;
		height: 14px;
		border: 2px solid white;
		border-radius: 20px;
		*height: 12px;
		*width: 12px;
	}

@media (min-width: 800px) {
	.sp-hue, .sp-val, .sp-dragger, .sp-slider {
		cursor: crosshair;
	}
}


/* original starts here */
.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
  position:relative;
  width: 100%;
  display:inline-block;
}
.sp-top-inner {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 26px; /* cameron: was 18 */
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -22px; /* cameron: was -14 */
    right: 0;
    left: 0;
    height: 16px; /* cameron: was 8 */
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
/*
   border-radius: 5px;
   height: 5px;
   width: 5px;
   border: 1px solid #fff;
   background: #000;
   cursor: pointer;
   position:absolute;
   top:0;
   left: 0;
*/
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #f0c49B;
    padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
   font-size: 12px;
   border: 1px inset;
   padding: 4px 5px;
   margin: 0;
   width: 100%;
   background:transparent;
   border-radius: 3px;
   color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    border: solid 1px #91765d;
    background: #eee;
    color: #333;
    vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}
.sp-preview {
    position:relative;
    width:25px;
    height: 20px;
    border: solid 1px #222;
    margin-right: 5px;
    float:left;
    /*z-index: 0;*/
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:16px;
    height: 16px;
    margin:2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}
/*  Font Awesome 3.0
    the iconic font designed for use with Twitter Bootstrap
    -------------------------------------------------------
    The full suite of pictographic icons, examples, and documentation
    can be found at: http://fortawesome.github.com/Font-Awesome/

    License
    -------------------------------------------------------
    • The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
    • Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
      http://opensource.org/licenses/mit-license.html
    • The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
    • Attribution is no longer required in Font Awesome 3.0, but much appreciated:
      "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"

    Contact
    -------------------------------------------------------
    Email: dave@davegandy.com
    Twitter: http://twitter.com/fortaweso_me
    Work: Lead Product Designer @ http://kyruus.com

    */

@font-face {
  font-family:'FontAwesome';
  src:url('../images/fonts/fontawesome-webfont.eot');
  src:url('../images/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../images/fonts/fontawesome-webfont.woff') format('woff'),
    url('../images/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight:normal;
  font-style:normal
}

[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none!important;background-position:0 0;background-repeat:repeat}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline;line-height:.6em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}li [class^="icon-"],li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.35em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.35em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.35em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{height:.75em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.45em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}
/* CSS Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

@font-face {
    font-family: 'OswaldBook';
    src: url('/images/fonts/oswald-regular-webfont.eot');
    src: url('/images/fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/fonts/oswald-regular-webfont.woff') format('woff'),
         url('/images/fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('/images/fonts/oswald-regular-webfont.svg#OswaldBook') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Overlock';
    src: url('/images/fonts/Overlock-Regular-OTF-webfont.eot');
    src: url('/images/fonts/Overlock-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/fonts/Overlock-Regular-OTF-webfont.woff') format('woff'),
         url('/images/fonts/Overlock-Regular-OTF-webfont.ttf') format('truetype'),
         url('/images/fonts/Overlock-Regular-OTF-webfont.svg#Overlock') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Overlock';
    src: url('/images/fonts/Overlock-Italic-OTF-webfont.eot');
    src: url('/images/fonts/Overlock-Italic-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/fonts/Overlock-Italic-OTF-webfont.woff') format('woff'),
         url('/images/fonts/Overlock-Italic-OTF-webfont.ttf') format('truetype'),
         url('/images/fonts/Overlock-Italic-OTF-webfont.svg#Overlock') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Overlock';
    src: url('/images/fonts/Overlock-Bold-OTF-webfont.eot');
    src: url('/images/fonts/Overlock-Bold-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('/images/fonts/Overlock-Bold-OTF-webfont.woff') format('woff'),
         url('/images/fonts/Overlock-Bold-OTF-webfont.ttf') format('truetype'),
         url('/images/fonts/Overlock-Bold-OTF-webfont.svg#Overlock') format('svg');
    font-weight: bold;
    font-style: normal;
}

/*hide Font Awesome icons when @font-face not supported*/
.md-no-fontface [class^="icon-"],
.md-no-fontface [class*=" icon-"] {
	display: none!important;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: "Overlock", serif;
	font-size: 100%;
	line-height: 1.5em;
	color: #404040;
}
.body-font {
	font-family: "Overlock", serif!important;
}
body, html {
	height: 100%;
}
p {
	margin-bottom: 1em;
}
small {
	font-size: 14px;
}
ul {
	list-style: none;
}
/*generic classes*/
.cf,
.row {
	display: block;
	zoom: 1;
}
.cf:before, .cf:after,
.row:before, .row:after {
	content: "";
	display: table;
}
.cf:after,
.row:after{
	clear: both;
}
.clear {
	clear: both;
}
.hide {
	display: none!important;
}
.fade-in {
	filter: alpha(opacity=0);
	opacity: 0;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.fade-out {
	opacity: 0;
}
.faded-in {
	filter: alpha(opacity=100);
	opacity: 1;
}
.no-anim {
	-moz-transition: all 0s!important;
	-webkit-transition: all 0s!important;
	-o-transition: all 0s!important;
	transition: all 0s!important;
}
.overlay:after {
	display: none;
	content:"";
	position: fixed;
	left:0; top:0; right:0; bottom:0;
	background: rgba(0,0,0,.4);
	z-index: 1000;
}
[contenteditable] {
	cursor: text!important;
}
.button {
	display: block;
	width: 100%;
	background: #2C4147;
	color: white;
	font-family: 'OswaldBook', serif;
	line-height: 3em;
	font-size: 1em;
	margin-bottom: 1em;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	position: relative;
	-moz-transition: all .25s ease-out;
	-webkit-transition: all .25s ease-out; 
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
	input.button:focus, input.button:active {
		border: 0;
	}

.massive.button {
	font-size: 1.5em;
}
.inline.button {
	width: 150px;
	font-size: 15px;
	display: inline-block;
	padding: 0 0.5em;
	margin-right: 1em;
}
.light.button {
	background: #09c;
}
.button [class*="icon-"] {
	vertical-align: middle;
	line-height: inherit;
}
.button-icon-right {
	position: absolute;
	right: 0;
	margin-top: -3px;
}
	.button-icon-right:before {
		vertical-align: middle;		
	}
.icon-button {
	display: inline-block;
	color: #2C4147;
}
.light.icon-button {
	color: #09c;
}
.tooltip {
	top: 0;
	left: 0;
	font-family: 'Overlock';
	font-size: 18px;
	width: 300px;
	line-height: 36px;
	padding: 0 1.25em 0 .5em;
	position: absolute;
	cursor: default;
	border: 1px solid white;
	-moz-transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out; 
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
	.tooltip-close-btn {
		font-size: 0.75em;
		line-height: 1em!important;
	}
	/*tooltip arrow, with with border*/
	.tooltip:before {
		content: "";
		position: absolute;
		bottom: -14px;
		left: 36px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 14px 9px 0;
		border-color: white transparent transparent transparent;
	}
	.tooltip:after {
		content: "";
		position: absolute;
		bottom: -12px;
		left: 38px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 12px 7px 0;
		border-color: #0099cc transparent transparent transparent;
	}
.file-input-btn, .button.file-input-btn {
	position: relative;
	overflow: hidden;
}
.line-through {
	clear: both;
	display: block;
	margin-bottom: 1em;
}
.line-through:before,
.line-through:after {
	content: "";
	display: inline-block;
	border-style: solid;
	border-width: 0.1em 0 0;
	border-color: inherit;
	filter: alpha(opacity=50);
	opacity: .5;
	width: 30%;
	height: 3px;
	
}
.line-through:before {
	margin-right: 1em;
}
.line-through:after {
	margin-left: 1em;	
}

.modal-container {
	margin-bottom: 1em;
}
	.modal {
		padding: 2em 2em 1em 2em;
		position: relative;
	}
		.modal-close {
			position: absolute;
			right: 0;
			top: 0;
			color: #2C4147;
			padding: 0.5em;		
		}
			.modal-close:before {
				padding-right: 0;
			}
		.blue.modal {
			background: #09C;
			color: white;
		}
		.blue .modal-title {
			color: white;
		}
	.modal input,
	.modal textarea,
	.modal select {
		padding-top: .5em;
		padding-bottom: .5em;
	}
	.modal-section-title {
		display: block;
		margin-bottom: .5em;
	}
	.modal-action-buttons {
		padding-top: 1em;
	}
.psuedo-checkbox:before,
.psuedo-checkbox:after {
	cursor: pointer;
}
.psuedo-checkbox:before {
	content: "";
	display: inline-block;
	background: #EEE;
	height: 1.25em;
	width: 1.25em;
	border: 2px solid #EEE;
	border-radius: 5px;
	-webkit-box-shadow:0 0 1px rgba(0,0,0,.4);
	   -moz-box-shadow:0 0 1px rgba(0,0,0,.4);
	        box-shadow:0 0 1px rgba(0,0,0,.4);
	
}
.psuedo-checkbox-icon:after {
	/*prepare to insert fontawesome icon*/
	font-family: FontAwesome;
	/*'ok' checkmark icon*/
	content: "\f00c";
	color: #2C4147;
	line-height: 1.5em;
	text-decoration: inherit;
	display: inline-block;
	speak: none;
	opacity: 0;
}
	input[type="checkbox"]:hover + .psuedo-checkbox-icon:after {
		opacity:.2;
	}
	input[type="checkbox"]:checked + .psuedo-checkbox-icon:after {
		opacity:1;
	}
.info-msg {
	font-size: 11px;
}
/* color picker input styling */
.sp-replacer {
	padding: 3px;
	border-color: #879295;
}
	.sp-replacer:hover, 
	.sp-replacer.sp-active {
		border-color: #2C4147;
	}
	.sp-preview {
		margin-right: 0;
	}
	.module-row .sp-preview {
		height: 21px;
	}
		.sp-preview-inner:before {
			content: "";
			position: absolute;
			right: -1px;
			bottom: -1px;
			background: #EEEEEE;
			height: 6px;
			width: 6px;
		}
		.sp-preview-inner:after {
			content: "";
			position: absolute;
			right: -3px;
			bottom: -2px;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 4px 3px 0;
			border-color: #000000 transparent transparent;
		}
	.sp-dd {
		display: none;
	}
/* Spectrum color picker custom styling */
.sp-container {
    background-color: #EEE;
    border: solid 1px #879295;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue
{
    /*font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;*/
	font-family: "Overlock",serif;
	font-size: 14px;
}
.sp-cancel {
	font-size: 13px;
}
/* use spectrums mobile styling for iPad too */
.md-touch .sp-color { right: 30%; }
    .md-touch .sp-hue { left: 74%; }
    .md-touch .sp-fill { padding-top: 60%; }

	/*added to make alpha slider bigger too*/
	.md-touch .sp-alpha-enabled .sp-top { margin-bottom: 27px; }
	.md-touch .sp-alpha {
	    bottom: -25px;
	    right: 0;
	    left: 0;
	    height: 18px;
	}
	.md-touch .sp-cancel {
		font-size: 13px;
	}
	.md-touch .sp-choose {
		font-size: 14px;
		padding: 8px;
	}


/*layout classes*/
.row {
	width: 100%;
	padding: .5em 2em;
	margin: 0;
}
	.half-col, .two-third-col, .third-col {
		text-align: center;
		margin-bottom: 2em;
	}
	.last-col {
		margin-right: 0!important;
	}
/*general element styles*/
.nav {
	display: none;
	float: left;
	list-style: none;
	font-size: 14px;
}
	.nav li {
		float: left;
		margin-right: 4em;
		color: #666;
	}
		.nav a {
			color: #666;
			text-decoration: none;
			-moz-transition: color  .5s;
			-webkit-transition: color .5s;
			-o-transition: color  .5s;
			-ms-transition: color .5s;
			transition: color .5s;
		}
.main-header,
.main-footer {
}
	.main-header > .row {
		/*padding-right: 0;	why?*/
	}

/* form styles */
form {
	margin-bottom: 1em;
}
input,
select,
option,
textarea {
	width:100%;
	border: 1px solid #bba;
	border-top: 1px solid #999;
	border-right: 1px solid #aaa;
	padding: 4px 0 4px 5px;
	font-size: 16px;
	font-family: 'Overlock', sans-serif;
	color: #404040;
	margin-bottom: 1em;
}
form textarea {
	max-width: 100%;
	padding-bottom: 0;
}
form select {
}
select {
	padding: 2px;
}
	select option {
		width: auto;
		padding: 1px 2px 1px 8px;
		border: 0;
		margin: 0;
	}
::-webkit-input-placeholder {
	color: #333;
}
	input:focus::-webkit-input-placeholder,
	textarea:focus::-webkit-input-placeholder {
		color: #AAA;
	}
:-moz-placeholder{ 
	color: #333; 
}
	input:focus:-moz-placeholder,
	textarea:focus:-moz-placeholder {
		color: #AAA;
	}
::-moz-placeholder {
	color: #333;
}
	input:focus::-moz-placeholder,
	textarea:focus::-moz-placeholder {
		color: #AAA;
	}
:-ms-input-placeholder {  
  	color: #333; 
}
	input:focus:-ms-input-placeholder,
	textarea:focus:-ms-input-placeholder {
		color: #AAA;
	}
input:focus,
textarea:focus {
	border: 1px solid #4343d1;
}
.no-select,
label {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;	
}
/*too generic?
label {
	float: left;	
}*/
.input-w-icon {
	position:relative;
}
	.input-icon {
		position: absolute;
		left: 0;
		line-height: 30px;
		padding-left: 5px;
		color: #666666;
	}
		.input-icon:before {
			padding-right: 0;
		}
	.input-w-icon input,
	.input-w-icon textarea,
	.input-w-icon select {
		padding-left: 1.4em;
	}
	.large.input-w-icon .input-icon {
		line-height: 36px;
		padding-left: .5em;
	}
		.large.input-w-icon .input-icon:before { 
			vertical-align: -10%;
  			font-size: 1.3333333333333333em;
		}
		.large.input-w-icon input,
		.large.input-w-icon textarea,
		.large.input-w-icon select {
			padding: .5em 0 .5em 2em;
		}

/*font styles*/
h1, h2, h3 {
	font-family: 'OswaldBook', serif;
	font-weight: normal;
	margin-bottom: 1.5em;
	line-height: 1.5em;
	text-rendering: optimizeLegibility;
}
h1 {
	font-size: 1.5em;
}
h3 {
	font-size: 18px;
	margin-bottom: 1em;
}
h4 {
	font-size: 1.25em;
	font-weight: normal;
}
/*icon font styles (extends the default fontawesome styles)*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
	padding-right: .5em;
}
/*section specific styles*/

/* header styles */
.beta-flag {
	background: url('/images/beta.png') top right no-repeat;
	background-size: 100% 100%;
	width: 45px;
	height: 45px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}
.logo-wrapper {
	float: left;
	text-decoration: none;
}
/* Don't include plus icon in image, use font icon instead
	.logo {
		float: left;
		width: 100px;
		height: 24px;
		text-indent: -100%;
		overflow: hidden;
		background: url('/images/logo.png') top left no-repeat;
		background-size: auto 100%;
	}*/
	
	.logo {
		float: left;
		height: 24px;
		font-family: "OswaldBook", serif;
		font-weight: bold;
		font-size: 1.5em;
		color: #09C;
		text-transform: uppercase;
		position: relative;
	}
		.logo-img {
			float: left;
			margin-top: 3px;
			height: 20px;
		}
		.logo [class^="icon-"]:before {
			padding-right: 0;
		}
	
	.logo-tagline {
		display: inline-block;
		float: left;
		font-size: 13px;
		line-height: 2em;
		margin-left: .5em;
		color: #333;
	}

.main-nav {
	float: right;
}
	.main-nav li {
	}
		.main-nav .selected {
			color: #EDEDED;
			display: none;
		}
		.main-nav a:hover {
			color: #BBBBBB;
		}
	.main-header .row {
		border-bottom: 2px solid #666666;
	}
	.top-ad-row {
	}
		.main-header .ad-wrapper {
			float: right;
			max-width: 100%;
		}
.file-browse-trigger {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 4em;
	height: 100%;
	filter: alpha(opacity=0);
	opacity: 0;
	width: auto;
	cursor: pointer;
	z-index: 1000;
}

/* content styles */

.main-content {
	min-height: 80%;
	padding-bottom: 2em;
}
	.main-content .row {
		padding-top: 2em;
	}
		.main-intro h1 {
			color: #666;
			margin-bottom: .5em;
		}
		.main-intro h4 {
			margin-bottom: 3em;
		}
	/* front page */
	#progress {
		background: #efefef;
		background: rgba(0,153,204,0.3);
		margin-top: -1.75em;
		margin-bottom: .75em;
	}
		.progress-bar {
			background: green;
			height: 1em;
			width: 0;
		}
	.image-select,
	.front-page-examples {
		text-align: center;
	}
	.image-select-option {
		display: inline-block;
		width: 33%;
		min-width: 100px;
		max-width: 220px;
		padding: 1em 0;
		margin: 0 3% 1em;
		background: #eee;
		position: relative;
		overflow: hidden;
	}
		.md-no-fileinput .use-computer-image {
			display: none;
		}
		
		.use-computer-image .icon-desktop,
		.use-computer-computer-label {
			display: none;
		}
	
		.image-select-option-separator {
			margin-top: 1em;
			font-family: 'OswaldBook',serif;
			color: #666;
		}
			.image-select-option-separator:before,
			.image-select-option-separator:after {
				width: 25%;
			}

	.image-select-option [class^="icon-"]:before,
	.image-select-option [class*=" icon-"]:before {
		padding: 4px 0 8px;
	}
		.image-select-option small {
			display: block;
			font-size: 11px;
			line-height: 1em;
			color: #666;
		}
		.image-select-option-label {
			color: #666;
			font-family: 'OswaldBook', serif;
		}
		
	.import-from-url {
		text-align: left;
		margin-top: -3em;
	}
		.import-from-url .drag-supported {
			display: none;
		}

	.drop-file-here {
		display: none;
	}

	.demo-image-option {
		display: block;
		max-width: 300px;
		margin: 0 auto 2em;
		background: white;
		padding: 2px;
		border: 1px solid #666;
		-webkit-box-shadow:1px 1px 5px black;
		   -moz-box-shadow:1px 1px 5px black;
		        box-shadow:1px 1px 5px black;
	}
		.demo-image-option img {
			display: block;
			width: 100%;
			background: inherit; /*needed for firefox opacity bug*/
		}
/*gallery picker modal*/
.gallery-widget-breadcrumbs {
	margin: -1em 0 .25em;
	text-align: left;
}
	.breadcrumb-item {
		float: left;
		color: #EEE;
		text-decoration: underline;
		padding: .5em 0;
		margin-left: 4px;
	}
		.selected.breadcrumb-item {
			cursor: default;
			text-decoration: none;
		}
		.breadcrumb-item:before {
			content: " > ";
		}
		.breadcrumb-item:first-child:before {
			content: "";
		}

.gallery-widget-list {
	display: none;
	-moz-transition: opacity .25s;
	-webkit-transition: opacity .25s;
	-o-transition: opacity .25s;
	transition: opacity .25s;
}
	.selected.gallery-widget-list {
		display: block;
	}
	#categories-list {
		min-height: 0;
	}
	.gallery-widget-list-item {
		float: left;
		margin: 0 4% 1em 0;
		text-align: center;
		width: 170px;
		max-width: 46%;
		min-height: 113px;
		cursor: pointer;
	}
		.gallery-widget-list-item > img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			max-height: 100%;
		}
	.gallery-widget-pagination {
		display: block;
		margin: 0 auto 1em;
		text-align: center;
		width: 150px;
	}
		.pagination-button {
			display: inline-block;
			height: 34px;
			line-height: 28px;
			margin: 0 0.25em;
			width: 34px;
			background: #2C4147;
			border: 3px solid white;
			border-radius: 50%;
			cursor: pointer;
		}
			.disabled.pagination-button {
				cursor: default;
				filter: alpha(opacity=20);
				opacity: .2;
			}
			.pagination-button [class^="icon-"]:before {
				padding-right: 0;
			}
	/* maker page */
	.maker-toolbar {
		position: fixed;
		display: none;
	}
	.preview-image-wrapper {
		text-align: center;
	}
		.canvas-wrapper,
		.image-wrapper {
			width: 100%;
			text-align: center;
			margin-bottom: 1em;
			position: relative;
		}
		.canvas-wrapper svg,
		.image-wrapper .final-img {
			max-width: 100%;
			max-height: 210px;
			overflow: hidden;
		}
		.image-wrapper .final-img {
			max-height: 400px;
		}
		.loading-image-msg {
			background: #09C;
			color: white;
			height: 210px;
			padding: 60px 0;
			width: 100%;
			position: relative;
			-moz-transition: all 1s;
			-webkit-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;
		}
			.loading-image-spinner {
				width: 45px;
				-moz-transition: all .5s;
				-webkit-transition: all .5s;
				-o-transition: all .5s;
				transition: all .5s;
			}
			.fade-out.loading-image-msg {
				position: absolute;
				height: 100%;
			}
			#init-vectos-info {
				position: absolute;
				width: 90%;
				margin: 0 5%;
				bottom: .5em;
			}
	.maker-modules {	
	}
	.maker-module {
		text-align: left;
	}
		.maker-module input,
		.maker-module select,
		.maker-module option,
		.maker-module textarea {
			margin-bottom: 0;
		}
		.maker-module-header,
		.maker-module .addText {
			background: #333;
			background: #2C4147;
			padding: 0 1em;
			text-align: left;
			font-family: 'OswaldBook', serif;
			/*font-size: 18px;*/
			line-height: 48px;
			color: #FFF;
			border-radius: 5px;
			cursor: pointer;
		}
			.addText-btn [class*="icon-"] {
				vertical-align: inherit;
			}
			.open .maker-module-header,
			.maker-module-header:hover {
				background: #222;
				background: #1E2D31;
			}
			.open .maker-module-header {
				border-radius: 5px 5px 0 0;
			}
			[contenteditable].maker-module-title {
				border-left: 1px solid transparent;
			}
			.maker-module-header .close-toggle {
				float: right;
				line-height: 45px;
			}
			.maker-module-header .close-toggle:before {
				padding-right: 0;
				color: #CCC;

			}
				.open .maker-module-header .close-toggle:before {
					content: "\f0d8";
				}
			.maker-error-refresh-btn {
				background: rgba(0, 0, 0, 0.8);
			}	
		.maker-module-body {
			overflow: hidden;
			background: #CCC;
			padding: 0 1em;
			max-height: 0;
		}
			.open .maker-module-body {
				max-height: 500px;
				padding-top: 1em;
			}
		.module-row {
			margin-bottom: 1em;
		}
			.module-row label {
				float: left;
				font-size: 14px;
				text-align: right;
				width: 42px;
				margin-right: 1em;
			}
			.module-row select {
				float: left;
				width: 150px;
				max-width: 42%;
				margin-right: 1em;
			}
				.module-row .last-col {
					margin-right: 0;
				}
			.textPosSelect {
				display: none;
			}
		.maker-module-body textarea {
			max-width: 100%;
			min-width: 100%;
			height: 3.2em;
		}
		
			.maker-module-body .colorPicker {
				float: left;
			}
		.alignPicker {
			height: 28px;
			width: 33px;
			float: left;
			background: #eee;
			border: 1px solid #879295;
			text-align: center;
		}
			.alignPicker:hover, 
			.active.alignPicker {
				border-color: #2C4147;
			}
			.alignPicker [class^="icon-"]:before,
			.alignPicker [class*=" icon-"]:before {
				padding-right: 0;
				/*vertical-align: middle;*/
				line-height: 28px;
			}
			.alignPickerMenu {
				position: absolute;
				left: 0;
				width: 100%;
				max-width: 400px;
				margin-top: -220px;

				background: #EEEEEE;
				border: 1px solid #879295;

				text-align: left;
				font-size: .75em;
			}
				.alignPickerMenu-title {
					display: block;
					background: #2C4147;
					color: white;
					padding-left: 1em;
				}
				.alignPicker-option{
					float:left;
					height:55px;
					width:33%;
					border-top: 1px solid #CCCCCC;
					border-left:1px solid #999;
					border-right:1px solid white;
					color:#2a2a2a;
					text-align: center;
					text-decoration:none;
					text-shadow:1px 1px #FFFFFF;
					-webkit-box-shadow: inset 0 2px rgba(255,255,255,.8);
						box-shadow: inset 0 2px rgba(255,255,255,.8);
					-moz-transition: all .25s ease-out;
					-webkit-transition: all .25s ease-out; 
					-o-transition: all .25s ease-out;
					transition: all .25s ease-out;
				}
					.alignPicker-option:nth-child(3n+1) {
						width: 34%;
					}
					.selected.alignPicker-option,
					.selected.alignPicker-option:hover{
						-webkit-box-shadow:0 3px 10px rgba(0, 0, 0, 0.4) inset;
							box-shadow:0 3px 10px rgba(0, 0, 0, 0.4) inset;
						border-right-color: #AAA;
						background: #AAA; /*older browsers*/
						background: rgba(0,0,0,0); /*modern browsers*/
					}
	.more-info {
		padding: .5em;
	}
		.more-info:before {
			padding: 0;
		}

	.share-reuse-background-label {
		display: inline-block;
		text-align: left;
		font-size: 15px;
		margin: .5em 0;
		position: relative;
		cursor: pointer;
	}
		.share-reuse-background-label:before,
		.share-reuse-background-label:after {
			position: absolute;
			top: 0;
			right: 100%;
			margin-right: .75em;
			margin-top: 3px;
		}
			.share-reuse-background-label:after {
				margin-right: 1em;
			}
	.plain-share-page-link {
		display: block;
		text-align: right;
		text-decoration: none;
		color: white;
		
	}
	.save-share-image {
		text-align: center;
	}	
	.save-share-image .inline.button {
		margin-right: .5em;
		margin-left: .5em;
	}
	.save-share-image .wait-msg {
		padding: 1em;
		-moz-transition: all .5s;
		-webkit-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
	}
		.fade-out.wait-msg {
		}
	.save-share-spinner {
		width: 25px;
		padding: 1em 0;
		margin-bottom: 1em;
	}
	.save-share-image-more-options .line-through {
		margin: 1em 0 2em;
	}
	#retry-download-btn {
		padding-top: 1em;
	}
	
/* footer styles */
.main-footer {
	color: #CCC;
	background: #383838;
}
	.main-footer .row {
		padding: 4em 2em 2em;
	}
	.main-footer-content-section {
		margin-bottom: 6em;
	}
	.footer-example-list {
	}
		.footer-example-list-item {
			display: block;
			margin-bottom: .5em;
			color: #CCC;
			text-decoration: none;
			border-bottom: 1px dotted #888;
		}
			.footer-example-list-item:hover {
				color:#DDD;
				border-color: #CCC;
			}
	.footer-contact-form label {
		float: left;
	}
@media (max-width : 310px) {
	.image-select-option-separator:before,
	.image-select-option-separator:after {
		width: 15%;
	}
}
@media (max-width : 600px) {
	.save-share-image {
		margin-top: -3em;
	}
	.gallery-photo-picker {
		margin-top: -3em;
	}
	.gallery-widget-list-item:nth-child(2n+1) {
		clear: both;
	}
	.main-page-share-buttons,
	.row.maker-row {
		padding: 0;
		padding-bottom: 2em;
	}
	.preview-image-wrapper .next-btn,
	.maker-modules .addText-btn,
	.maker-module-header {
		display: none;
	}
	.preview-image-wrapper,
	.canvas-wrapper, .preview-image {
		margin-bottom: 0;
	}
		.canvas-wrapper svg {
			display: block;
		}
	.maker-toolbar {
		display: block;
		bottom: 0;
		left: 0;
		height: 3.5em;
		width: 100%;
		z-index: 1;
		background: #8f8f8f;
	}
		.maker-toolbar-button {
			height: 3.5em;
			width: 20%;
			line-height: 3.5em;
			float: right;
			margin-left: 0;
			margin-right: 5%;
		}
			.next-btn.maker-toolbar-button {
				margin-right: 0;
				width: 25%;
			}
		.maker-toolbar .textGroup-btn {
			float: left;
			opacity: 0.6;
		}
		.textGroup-btn-refresh {
			position: absolute;
			left: 0px; right: 0px; top: 0px; bottom: 0px;
			z-index: 10;
			font-size: 2em;
		}
		.textGroup-btn-spinner {
			position: absolute;
			bottom: 0;
			left: 35%;
			width: 30%;
		 webkit-transition:all 1s ease;
		   -moz-transition:all 1s ease;
		     -o-transition:all 1s ease;
			transition:all 1s ease;
		}
		.selected.maker-toolbar-button {
			opacity: 1;
		}
		.maker-toolbar-button [class^="icon-"]:before, 
		.maker-toolbar-button [class*=" icon-"]:before {
			padding-right: 0;
		}
	.no-fixed-pos .modal-container {
		position: relative;
		z-index: 2;
	}
	.share-reuse-background-group {
		margin-right: -2em;
	}
	.share-buttons .button {
		text-align: left;
	}
		.share-buttons [class*="icon-"] {
			padding-left: .25em;
		}
}
@media (max-height : 585px) {
	.limitedHeight {
		display: none;
	}
}
/* temporary.. */
.ad-placeholder {
	background: #CCC;
	height: 80px;
	line-height: 80px;
	width: 600px;
	max-width: 100%;
	font-size: 30px;
	text-align: center;
}
	.square-ad {
		margin: 0 auto;
		width: 300px;
		height: 300px;
		line-height: 300px;	
	}