:root {
	--ft-red: #D04432;
	--ft-red-darker: #A52A1A;
	--ft-blue: #2D5DD4;
}
/***
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 !important;
   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==);
}
.logo_tabs {
	list-style: none;
	height: 31px;
	overflow: hidden;
}
.simpleBrowser .logo_tabs {
	display: none;
}
.logo_tab {
	float: left;
	padding: 3px 10px 4px;
	margin: 0px 4px;
	font-size: 15px;
	background: #ddd;
	border: 1px solid #ddd;
	border-bottom: 1px solid #3C5A86;
	cursor: pointer;
	border-radius: 0;
	position: relative;
	top: 3px;
	border-radius: 3px 3px 0 0;
	user-select: none;
}
	.logo_tabs .selected {
		background: #424143;
		color: white;
		border: 1px solid #424143;
		border-bottom: none;
		top: 0;
		padding-top: 4px;
		cursor: default;
	}
	.logo_tabs .selected:hover {
		background: #424143;
		color: white;
	}
	.logo_tab:hover {
		color: white;
		background: #aaa;
		border-color: #aaa;
	}
	/* Pre-JS-tabify FOUC guard: everything used to start server-rendered fully visible and
	   stacked, so this hid it all until logotab.js decided what to show. WebPropertyPrinter now
	   picks and reveals the default (.selected) box itself at render time, so :not(.selected)
	   here is required -- without it, this rule hides that box too (has-js is set by an inline
	   <script> in <head>, before body paint, so it doesn't wait for logotab.js itself to load
	   and run) and nothing but a blocked/slow/failed logotab.js request would ever undo it. */
	html .box_outer.preload:not(.selected) {
		display: none;
	}
.logo_tab_content {
	top: -1px;
	border-radius: 3px;
}
.animPresetController {
	float: left;
	margin-top: 2px;	position: relative;
	cursor:pointer;
}
.animPresetController img,
.animPresetContollerIcon {
	border: 1px solid white;
	border: 1px solid transparent;
}
.animPresetController img:hover,
.animPresetContollerIcon:hover{
	border: 1px solid #000000;
}
.animPresetControllerPreview {
	margin: 0px;
	padding: 0px;
	white-space:nowrap;
	visibility: hidden;
	position:absolute;
	top:26px;
	z-index:1;
}
.animPresetControllerPreview ul{
	margin: 0px;
	padding: 0px;
	list-style: none outside none;
}
.animPresetControllerPreview ul>li {
	height: 20px;
	border: 1px solid;
	background: #CCDDCC;
	text-align:left;
}
.animPresetControllerPreview ul>li:hover {
	background: none repeat scroll 0 0 #9999FF;
}

.animPresetControllerTitle{
	padding:0px 2px;
	font: 12px/20px Lucida Sans,Helvetica,Verdana,sans-serif;
	vertical-align:middle;
}
.ftPremium {
        background: -webkit-linear-gradient(left, rgba(238,238,238,0) 0%,rgba(238,238,238,1) 100%);
        background: linear-gradient(to right, rgba(238,238,238,0) 0%,rgba(238,238,238,1) 100%);
}
.ftPremium .ftPremiumLabel {
        float: right;
        margin-right: 20px;
        padding-right: 24px;
        max-width: 150px;
        height: 32px;
        overflow: hidden;
        background: url('/images/ft-dynamic-premium-stars-only-sprite.png') no-repeat right -28px;
        font-size: 15px;
        font-weight: bold;
        line-height: 40px;
        color: #999;
        text-align: right;
        float: right;
        cursor: default;
}
.ftPremium.ftPremiumActive .ftPremiumLabel {
        background-position: right 0;
        color: green;
}
.ftPremium.ftPremiumActive .ftPremiumLabel:hover {
        cursor: pointer;
}
.ftPremiumSliderOverlay {
        float: right;
        height: 100%;
        overflow: hidden;
        border-left: 1px solid #999999;
        background: url('/images/ft-dynamic-premium-slider-bg.png') top left repeat;
        border-radius: 0 4px 4px 0;
}
.ftPremiumSliderOverlay img {
        float: right;
        height: 40px;
        margin-left: -10px;
        margin-top: -23px;
}
.ftPremiumSliderOverlay span {
        font-weight: bold;
        font-size: 10px;
        line-height: 18px;
        color: #999;
        position: absolute;
        right: 14px;
}
/*from old form.css*/
.logoPreview{
	min-height:140px;
}
.logoStatusImageDiv{
	width:34px;
	height:34px;
	position:absolute;
/*5 Jun: center on image - using CSS, instead of JS*/
	left: 50%;
	top: 50%;
	margin-left: -17px; /*half width*/
	margin-top: -17px; /*half height*/
	/*visibility:hidden; - use CSS class .hide instead*/
	background:white;
	border: 2px solid #477B44;
	border-radius: 9px;
	box-shadow: 0 0 2px 1px #BBBBBB inset, 0 0 2px rgba(0,0,0,.5);
}
	.logoStatusImage{
		display:block;
		position:absolute;
		width:20px;
		height:20px;
	/*5 Jun: center on image - using CSS, instead of JS*/
		left: 50%;
		top: 50%;
		margin-left: -10px; /*half width*/
		margin-top: -10px; /*half height*/
	}

.update-preview-div {
	min-width: 260px;
}
	.update-preview-div .abs-center-self {
		top: auto; /*to snap to bottom of parent*/
		height: 100px;
		width: 350px;
		background-color: rgba(250, 250, 210, 0.85); /*old browsers will fall back to default ft-note-yellow color*/
	}
		.update-preview-div .ft-btn-border-mask {
			float: none;
			margin: 0;
		}
		.update-preview-div .extra {
			color: #555;
		}

.logoImageNote{
	display: inline-block;
	font: 12px/15px Lucida Sans,Helvetica,Verdana,sans-serif;
	color:#777777;
	vertical-align:bottom;

	padding:5px 0;
	position: relative;
	z-index: 2;
}
.logoImageNote img{
	/*position:relative;
	top:1px;*/
	margin-top: 1px;
	margin-bottom: -2px;
}
.logoImageNote div{
	display:inline;
}
.logoImageNote a{
	display:inline;
	top:2px;
}

.box_outer
{
	background: white;
	border: #ccc 1px solid;
	padding: 5px;
	margin: 0;
	border-radius: 0px;
	clear: both;
	position: relative;
	z-index:1;

}
.box_inner {
	clear: both;
	padding: 1em 0;
	overflow: hidden;
}

.group_title a {
	text-decoration: none;
}
.colorSelector div {
	width: 100%;
	height: 100%;
}
.picker_arrow{
	position:absolute;
	bottom:0px;
	right:0px;
}
.fontImage {
	position:relative;
	/*width:330px;*/
	height:75px;
	width: 93%;
	margin-right: 7%;
	text-align: center;
	overflow:hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
}
.formEntryValue.textValue textarea,
.formEntryValue.comboValue select,
.formEntryValue.adjustmentValue input {
	margin-left: 0px;
}
.formEntryValue.comboValue select,
.formEntryValue.comboValue option {
	white-space: nowrap;
}
.formEntryValue.adjustmentValue input {
	width: 35px;
	height: 20px;
	padding: 1px 0 1px 5px;
	float:left;
}
.formEntryValue .radioValue radio{
	margin-left:15px;
}
.formEntryValue .radioValue radio:firts-of-type {
	margin-left:0px;
}



.preload-box {
	margin-top: 1px;
	height: 300px;
	padding: 2em;
}

.logoPreviewWrapper .logoImageDiv { /*only for dynamic!*/
	display: inline-block; /* in order to make overlay (and msg) only appear on hover of actual img*/
}
	.logoPreviewWrapper .logoImage { /*only for dynamic!*/
		max-height: 250px;
		height: auto;
		width:auto;
	}

.ft-proxyform {
	margin-bottom: 1em;
}

.fontImage {
	/*height: 79px;
	width: 100%;
	*width: 99%;*/

	/*Small font box, 5 Jun 2013*/
	width: 190px;
	height: 36px;
	
	max-width: 100%;
}
.box_outer {
	position: relative;
	z-index: 15; /*to put on top of logo_tabs*/
}
.box_group {
	margin-left: 0;
	width: 100%;
	display: none;
}
/* Collapsible sub-groups (StartGroupHandler -- eg an "Advanced" section, or one numbered
   picker item's content) render with the correct box_group hidden/shown purely from the
   "active" class already on their own group_title (server-rendered from the script's
   expand=true/false), no JS required. Toggling still needs JS (the click handler animates it
   via slideToggle, and a picker's onclick switches which item's group is current) -- this only
   fixes the *initial* render, which used to depend on dynamicform.js's setupBoxes() running
   at all. */
.group_title.active + .box_group {
	display: block;
}
.box_summary {
	display: none;
}
#fontsizeDiv {
	background: none;
}
/*for animator*/
.box_title_link {
	display: inline; /* prevent line break before optional component */
}
.box_title_link a {
	color: #111;
	text-decoration: none;
}
.box_title_link a:hover {
	color: #3333ff;
}
/*END for old dynamic*/


/*force hardware accelerations for jquery ui sliders, improve performance*/
/*TODO: would perform MUCH better if used transforms instead of absolute position on move*/
.ui-slider-handle {
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.ui-slider-handle.ui-state-focus {
	outline: 0; /*firefox focus slider handle drag bug fix */
}
/*flicker-fix for webkit*/
.ui-slider {
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

/* Plain JS/CSS adjustment slider (replaces the old jQuery UI $.slider() widget -- see
   goSlider() in form/form.js). Sized to match the jQuery UI defaults it replaces
   (.8em track, 1.2em handle) so the touch/narrow-screen overrides further down, which scale
   the handle at specific breakpoints, need only the class name updated, not the dimensions. */
.ft-slider {
	position: relative;
	height: .8em;
	background: #fff;
	border-radius: 3px;
}
.ft-slider-handle {
	position: absolute;
	top: -.3em;
	width: 1.2em;
	height: 1.2em;
	margin-left: -.6em;
	box-sizing: border-box;
	background: #ccc;
	border: 1px solid #999;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.ft-slider-handle:hover {
	background: #aaa;
}
.ft-slider-handle:focus {
	outline: 2px solid #3399ff;
}

/* ==COLUMN STRUCTURE==

LEFT COL |    MIDDLE COL   | RIGHT COL

(.eName) | .formEntryValue | (.ftPremium)

*/

/*absolutely positioned (default left)*/
.eName,
.formEntryName {
	position: relative;
}

/*absolutely positioned right*/
.ftPremiumLabel,
.ftPremium .ftPremiumLabel,
.animPresetController {
	position: absolute;
	right: 0;
	top: 3px;
}
	.animPresetController {
		right: 20px;
	}
	

/*non floating, full width (auto), offset with margins in the middle*/
.formEntryValue {
		width: auto;
		margin: 0 116px 0 132px;
		float: none;
		position: relative;
	}
		.neverPremium .formEntryValue,
		/*ftui does not have neverPremium... fake same effect*/
		.radioType .formEntryValue,
		.colorType .formEntryValue,
		.patternType .formEntryValue,
		.gradientType .formEntryValue,
		.neverPremium .outerWrapper .textareaSymbol {
			margin-right: 0;
		}

			/*exceptions*/
			.textValue.formEntryValue,
			#fontsizeDiv .formEntryValue,
			.fontValue.formEntryValue {
				margin-right: 116px;
			}


/*simpleBrowser fixes, needed for Symbian phones*/
.simpleBrowser .patternValue.formEntryValue,
.simpleBrowser .extValue.formEntryValue,
.simpleBrowser .comboValue.formEntryValue { /*select option(s) ignore correct max-width limit, so put them on their own full width line*/
	clear: both;
	margin-left: 0;
	margin-right: 0;
	margin-top: 4px;
}
	.simpleBrowser .patternValue select,	
	.simpleBrowser .comboValue select,
	.simpleBrowser .extValue select {
		width: 100%;
	}
.simpleFontPreview {
	display: block;
	max-width: 100%;
}

.ft-create-logo-btn {
	height: 40px;
	/*line-height: 15px;*/	
}
	.ft-create-logo-btn .icon {
		margin: 0 0 0 0.5em;
		position: relative;
		top: 1px;
	}
.ft-btn .ft-btn-premium-label {
	display: block;
	font-size: 12px;
	font-weight: normal;
	line-height: 10px;
	color: inherit;
	font-style: inherit;
	margin-left: inherit;
}
.ft-onoff-switch-wrapper {
	padding-left: 1em;
	margin: 4px;
	min-width: 160px;
}
.ft-onoff-switch {
	float: left;
	position: relative;
	width: 40px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	border-radius: 11px;
	box-sizing: border-box;
	outline: none;
	transition: background 0.15s ease-out;
}
	.ft-onoff-switch-handle {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0,0,0,.3);
		transition: left 0.2s ease-out;
	}
	.on .ft-onoff-switch-handle {
		left: 20px;
	}
.ft-onoff-switch-label {
	float: left;
	color: #666666;
	font-size: 13px;
	padding: 0 1.5em;
	cursor: pointer;

	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;     
	-o-user-select: none;
	user-select: none;
}
	.ft-onoff-switch-label-before {
		padding-left: 0;
	}
	.off .ft-onoff-switch-label-before,
	.on .ft-onoff-switch-label-after {
		color: #2a2a2a;
		text-shadow: 1px 1px #ccc;
		cursor: default;
	}

	.on .ft-onoff-switch {
		background: #88B36B;
	}
	.off .ft-onoff-switch {
		background: #B36F70;
	}
	.on .ft-onoff-switch:hover {
		background: #74985B;
	}
	.off .ft-onoff-switch:hover {
		background: #985E5F;
	}
.startBoxType { /** should only  have one of startBoxDiv/Type */
        background: white;
        border: #3c5a86 1px solid;
        padding: 2em .25em 1em;
        margin-bottom: 1em;
        border-radius: 5px;
}
.e,
.formEntry {
        /*transition: left .5s ease-in-out;*/
	margin-bottom: .25em;
	padding: 5px 0 3px;
	position: relative;
	border: 1px solid white;
	border: 1px solid rgba(255,255,255,0);
}
.formEntry {
	margin-bottom: 1em;
}
	.datapicker_opened {
		border: 1px dashed #DE7300;
		padding: 5px 0 3px;	
	}

	.eName,
	.formEntryName {
		float: left;
		width: 100px;
		text-align: right;
		padding-top: 4px;
		margin-left: 20px;
		margin-right: .75em;
		/*
		overflow: hidden;
		text-overflow: ellipsis;
		*/
	}
	.ftPremiumLabel,
	.ftPremium .ftPremiumLabel {
		font-size: 13px;
		height: 30px;
		margin-top: -2px;
		min-width: 36px;
	}
	.eName,
	.advancedToggle,
	.formAdvancedTitle,
	.formEntryName {
		color: #2A2A2A;
		font-size: 15px;
		line-height: 1.1; /*to keep text more together when multi-line*/
		-webkit-transition:background 1s .5s;
		transition:background 1s .5s;
	}
	.formEntryName.highlight {
		background: yellow;
	}
			.formEntryName.highlight.already {
				background: none;
			}
	.radioType .eName,
	.radioName { 
		padding-top: 0;
	}
		.gradientType .formEntryValue:before,
		.patternType .formEntryValue:before,
		.colorType .formEntryValue:before { /*the ones that have datapickerSelectors in them*/
			position: absolute;
			content: "";
			height: 100%;
			width: 100%;
			max-height: 40px;
			/* Must match .gradientWrapper/.patternWrapper/.colorSelector's own width below (220px,
			   not .datapickerSelector's base 200px) -- this is the transparency checkerboard shown
			   *behind* those swatches, so a narrower max-width here leaves a plain (non-checkered)
			   strip down their right edge. */
			max-width: 220px;
			background-image: url('/images/checkered.png');
		}
	.datapickerSelector {
		cursor: pointer;
		width: 200px;
		height: 40px;
		max-width: 100%;
		max-height: 100%;
		border: 2px solid black;
		margin-bottom: 5px;
		position: relative;
	}
		.datapickerSelector:hover {
			/*margin-bottom: 1em; tis is what makes the color picker get larger*/
		}
		.fontSelector {
			width: 100%;
			height: 79px;
			text-align: center;
			background: white;
		}
			.datapickerSelectorValue {
				width: 100%;
				height: 100%;
			}
			.fontSelector .datapickerSelectorValue {
				width: auto;
				height: auto;
			}
			.gradientType .datapickerSelectorValue {
				background-size: 100%;
			}
	/*solid background behind picker arrow*/
	.datapickerSelector:before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		background: black;
		height: 12px;
		width: 12px;
	}
	/* CSS picker arrow */
	.datapickerSelector:after {
		content: "";
		position: absolute;
		right: 1px;
		bottom: 1px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 6px 4px 0;
		border-color: white transparent transparent;
	}
	.radioWrapper {
		float: left;
		margin-right: .5em;
		margin-right: 10px;
		line-height: 1.1;
		min-width: 50px;
	}
		.radioWrapper:last-of-type {
			margin-right: 0;
		}
		.radioWrapper label {
			padding-left: 3px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
		}

	.formEntryValue textarea {
		width: 99%;
		margin-right: 0;
		margin-top: .25em;
		resize: none;
		-webkit-appearance: none;
		border-radius: 0;
		vertical-align: top; /* to get rid of bottom margin in chrome*/
	}
		.tab-content-container .formEntryValue textarea {
			width: 98%; /*hack fix for overflowing container*/
		}
		.formEntryValue .outerWrapper textarea { /* helen */
			width: 100%; /* fix symbol picker alignment issue */
		}
	.adjustmentType .formEntryValue input[type="text"],
	.formEntryValue.adjustmentValue input {
		float: left;
		margin-left: 0;
		margin-right: .5em;
		width: 42px;
		height: 24px;
	}
	/*old dynamic sliderWrapper (rules need to be separated; <=IE8 no understand :not selector)*/
	.sliderWrapper {
		margin: 0 0 0 60px; /* for input on the left */
		float: none;
		width: auto;
	}
		/*old dynamic slider*/
		.sliderWrapper .ft-slider {
			float: left;
			width: 100%;
			margin: 0;
			border: 1px solid #999;
			font-size: 20px;
			position: relative;
			top: 4px;
		}
	/*new ftui slider*/
	.formEntryValue > .ui-slider:not(.ft-onoff-switch) {
		margin: 0 0 0 52px; /* for input on the left */
		border: 1px solid #999;
		font-size: 20px;
		position: relative;
		top: 4px;
	}

	.advancedToggle {
		display: block;
		float: left;
		margin: 0 0 .5em 8%;
		color: #666;
		font-size: 14px;
		cursor: pointer;
	}
		.advancedToggle.collapse-arrow:after {
			border-color: #666 transparent;
		}
		.active .advancedToggle,
		.advancedToggle:hover, .advancedToggle:focus {
			color: #444;
		}
			.active .advancedToggle.collapse-arrow:after {
				border-color: #2a2a2a transparent;
			}
		/*special case: text toogle in first tab*/
		.textAdvancedDiv .advancedToggle,
		#textAdvancedDiv .advancedToggle {
		}
		.advancedTogglePlus {
			display: none;
		}
	.advancedContentDiv  {
		clear: both;
		margin-bottom: 1em;
	}
	
	/*simpleBrowser dynamic*/
	.formEntryValue td {
		float: left;
		width: 50%;
		padding-right: 4px;
	}
/* expanding textarea */
.formEntryValue.textValue .expandingArea textarea,
.formEntryValue.textValue .expandingArea pre {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}
.formEntryValue.textValue .outerWrapper {
  position: relative;
}
.formEntryValue.textValue .expandingArea {
  position: relative;
  background: #fff;
  min-height: 3em;
  max-height: 5em;
  border: 1px solid #888;
}
.formEntryValue.textValue .expandingArea textarea,
.formEntryValue.textValue .expandingArea pre {
  padding: 5px;
  background: transparent;
  /*font: 400 13px/16px helvetica, arial, sans-serif;*/
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
}
.formEntryValue.textValue .expandingArea textarea {
  /* The border-box box model is used to allow
 *    * padding whilst still keeping the overall width
 *       * at exactly that of the containing element.
 *          */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  /* This height is used when JS is disabled */
  height: 100px;
}
.formEntryValue.textValue .expandingArea.active textarea {
  /* Hide any scrollbars */
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;
  padding-right: 40px;
}
.formEntryValue.textValue .expandingArea pre {
  display: none;
}
.formEntryValue.textValue .expandingArea.active pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}

/*for touch devices (~tablets) (increase target sizes etc)*/
@media (min-width: 600px) and (max-width: 1200px) {
	.has-touch .animPresetController {
		display: none;
	}
	.has-touch .ui-slider .ui-slider-handle,
	.has-touch .ft-slider .ft-slider-handle {
		font-size: 20px;
		height: 1.8em;
		width: 1.8em;
		margin-left: -.9em;
		top: -.6em;
	}
}

@media (max-width: 652px) {
	.logoPreviewWrapper,
	.logoPreview {
		min-height: 0;
	}
	

	.animPresetController {
		display: none;
	}
	.ui-slider .ui-slider-handle,
	.ft-slider .ft-slider-handle {
		font-size: 20px;
		height: 1.5em;
		width: 1.5em;
		margin-left: -.75em;
		top: -.4em;
	}
	.eName,
	.formEntryName {
		margin-left: .25em;
	}
	.formEntryValue {
		margin: 0 50px 0 118px;
	}
	.fontSelector {
		height: auto;
	}
		/*make textbox, fontSize slider and fontSelector div full width*/
			/*dynamic*/
		.textValue.formEntryValue,
		#fontsizeDiv .formEntryValue,
		.fontValue.formEntryValue,
			/*ftui*/
		.textDiv .formEntryValue,
		.fontsizeDiv .formEntryValue,
		.fontnameDiv .formEntryValue {
			margin-right: 2%;
		}
	.radioWrapper {
		font-size: 15px;
		text-align: center;
	}
		.radioWrapper input[type="radio"] {
			/*width: 100%;	stretches the input on IEMobile*/
		}
		.radioWrapper label {
			float: none;
			display: block;
		}
		.ftPremiumLabel span,
		.ftPremium .ftPremiumLabel span {
			display: none;
		}
	.ftPremiumLabel,
	.ftPremium .ftPremiumLabel {
		margin: 0 1% -2px 0;
	}
	.textAdvancedDiv {
		margin-left: 2%;
	}
	.datapickerSelector {
		/*change margin?*/
	}
}

@media (max-width: 520px) {
	/*hide inputs, as long as sliders work (requires touch, for mobile)*/
	/*special case for imageHeight and Width - always show inputs*/
	.has-touch .adjustmentType .formEntryValue input[type="text"],
	.has-touch .formEntryValue.adjustmentValue input:not([name=imageHeight]):not([name=imageWidth]) {
		display: none;
		position: absolute;
		z-index: 2;
		font-size: 18px;
		height: 28px;
		width: 48px;
		margin-top: -4px;
		margin-right: 8px;
		right: 100%;
		border: 2px solid #333;
		box-shadow: 0 0 5px;
	}
		/* remove offset from slider */
		.sliderWrapper,
		.formEntryValue > .ui-slider:not(.ft-onoff-switch) {
			margin: 0; /* no longer input on the left */
		}
		/*show them as tooltips*/
		.has-touch .adjustmentType .formEntryValue input[type="text"].sliderActive,
		.has-touch .formEntryValue.adjustmentValue input:not([name=imageHeight]):not([name=imageWidth]).sliderActive {
			display: block;
		}
			/*with CSS triangle*/
			.has-touch input[type="text"].sliderActive ~ .ui-slider:after,
			.has-touch input.sliderActive ~ .sliderWrapper .ui-slider:after,
			.has-touch input.sliderActive ~ .sliderWrapper .ft-slider:after {
				content: "";
				position: absolute;
				z-index: 1;
				right: 100%;
				margin-right: 4px;
				border-style: solid;
				border-color: transparent transparent transparent #333333;
				border-width: 6px 0 6px 10px;
				border-radius: 5px;
			}
				input.sliderActive::-webkit-outer-spin-button,
				input.sliderActive::-webkit-inner-spin-button {
					-webkit-appearance: none;
    				margin: 0;
				}
	/*otherwise hide sliders instead */
	.no-touch .ui-slider:not(.ft-onoff-switch),
	.no-touch .ft-slider {
		display: none;
	}
	.ft-onoff-switch-wrapper {
		margin: 4px 0;
	}

	/*special case: imageWidth and imageHeight - always show inputs instead of sliders*/
	#imageWidthDiv .ui-slider,
	#imageHeightDiv .ui-slider,
	#imageWidthDiv .ft-slider,
	#imageHeightDiv .ft-slider {
		display: none;
	}
	.popularSymbol.extraSymbol {
		display: none;
	}
}

@media (max-width: 450px) {
	.radioWrapper {
		margin-bottom: 1em;
	}
	.logo_tab {
		top: 0; /*too easy to missclick otherwise!*/
		font-size: 13px;
		margin: 0 .5%;
		padding: 7px 5px 9px;
		min-width: 12%;
		max-width: 27%;
		text-align: center;
		position: relative;
		z-index: 10;
	}
	.startBoxType {
		padding-top: 1em;
	}
	.eName,
	.formEntryName {
		font-size: 14px;
		width: 86px;
	}
	.advancedToggle {
		font-size: 14px;
	}
	.radioWrapper label {
		font-size: 13px;
	}
	.fontSelector,
	.fontImage {
		height: 42px;
	}	
}
/*for tiny containers*/
@media (max-width: 340px) {
	.eName,
	.formEntryName {
		font-size: 13px;
		width: 80px;
	}
	.formEntryValue {
		margin-left: 96px;
	}
	.ft-onoff-switch-label {
		padding: 0 1.25em;
	}
		.ft-onoff-switch-label-before {
			padding-left: 0;
		}
}
/*for the absolute smallest screens*/
@media (max-width: 300px) {
	.logo_tabs {
		height: 27px;
	}
		.logo_tab {
			overflow:hidden;
			font-size: 11px;
			padding: 5px 3px 7px
		}
	.box_outer {
		padding: 3px 3px 3px 0;
	}
	.box_inner {
		padding: .25em 0;
	}
		.e, .formEntry {
			margin-left: 0;
			margin-right: 0;
		}
		.eName,
		.formEntryName {
			font-size: 13px;
			width: 65px;
			margin-left: 0;
			margin-right: .5em;
		}
		.formEntryValue {
			margin-left: 72px;
			margin-right: 42px;
		}
		.radioWrapper { 
			margin-right: 8px;
		}
}

.logoPreview {
	margin-bottom: 1em;
}
.ft-btn-border-mask.ft-create-logo-btn-mask {
	/*margin: 0 0 1em 40px;*/
        margin: 3px 1em 0;
	float: right;
	width: 120px;
}

.logo_tabs {
	margin-top: 8px;
	clear: both;
}

/*create logo btn now inline next to .logo_tabs - for desktop (not lte IE*)*/
@media(min-width: 601px){
	.logo_tabs,
	.ft-create-logo-btn-mask {
		display:inline-block;
		vertical-align: bottom;
	}
	.logo_tabs {
		clear: none;
		float: left;
	}
	.ft-create-logo-btn-mask {
	 	float: right;
		margin: 3px 1em 0;
		border-radius: 0;
		position: relative;
		z-index: 14;
	}
		.ft-btn-border-mask.premiumText.ft-create-logo-btn-mask {
			margin: -5px 1em;
		}
		.ft-btn-border-mask.premiumText .ft-create-logo-btn {
			line-height: auto;
			padding: 5px 16px 10px;
		}
		.ft-create-logo-btn {
			border-radius: 2px 2px 0 0;
			/*font-size: 15px;*/
			/*line-height: 15px;*/
			height: auto;
			/*padding: 5px 16px;*/
		}
			.ft-create-logo-btn:active {
				/*padding: 6px 16px 4px;*/
			}
			.ft-create-logo-btn.arrow:after {
				margin-right: -8px;
				margin-left: 12px;
			}
}

@media(max-width: 601px){
	div.ft-btn-border-mask.ft-create-logo-btn-mask {
		float: none;
		margin: 0 auto 1em;
		display: block;
		/*margin: 0 auto 1em;
		width: 80%;*/
	}
	.ft-btn-border-mask.premiumText .ft-create-logo-btn {
		padding: 5px 16px 10px;
	}
}

/*tiny devices*/
@media(max-width: 300px){
	.ft-create-logo-btn-mask {
		float: none;
		margin: 0 auto 1em;
		width: 80%;
	}
}
#imageAlignmentDiv .radioWrapper {
	line-height: 1.5;
}
#imageAlignmentDiv .radioWrapper:nth-of-type(3n+1){
	clear: both;
}

.variation {
	display: inline;
	margin-left: 5px;
}
.font-variation img {
	margin-bottom:1px;
}
.pattern-variation img {
	margin-bottom:0px;
}
.color-variation img {
	margin-bottom:3px;
}
.gradient-variation img {
	/*margin-bottom:-3px;*/
}

.variation img:hover {
	transform-origin: center center; /* Set pivot point for rotation */
	animation: ringBell 0.3s infinite; /* Apply animation */
}
@keyframes ringBell {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.ft-edit-icon {
	display: inline;
	margin-left: 5px;
	/* See .gradientWrapper below -- an inline element's default vertical-align is baseline, which
	   for an inline-block sibling depends on that sibling's *content* (its own content's baseline,
	   or -- once that content is hidden -- its margin-bottom edge instead). Pin this to a fixed,
	   content-independent reference so it doesn't visibly jump when the swatch's img is hidden. */
	vertical-align: middle;
}
.ft-edit-icon svg {
	/* The svg itself is also an inline replaced element and defaults to vertical-align:baseline,
	   which reserves a few px of space below it for text descenders -- same alignment quirk as the
	   icon vs. wrapper above, just one level down. Without this the icon sits visibly low inside
	   its own (already vertical-align:middle'd) container. */
	vertical-align: top;
}

.patternWrapper,.colorSelector,.gradientWrapper {
	display: inline-block;
	/* pattern's and gradient's swatch <img>s are both rendered at 220x40 (their own width/height
	   attrs, WebPropertyPrinter.java -- a 2x-scaled 440x80 source), but the shared .datapickerSelector
	   base rule these also carry sets width:200px -- 20px too narrow, so pattern's img (no CSS
	   max-width constrains it) simply overflows its container instead of being contained by it, and
	   color's swatch (a plain colored div, no img, so nothing overflows) is left the odd one out at
	   the un-overridden 200px. Explicit, equal size for all three so they visually match. */
	width: 220px;
	height: 40px;
	/* A custom (hand-edited) gradient has no static thumbnail file, so gradientEditor.js hides that
	   img and paints the gradient as this wrapper's own CSS background instead -- without an
	   explicit size, hiding the img would collapse the wrapper to 0 height, which shifts the sibling
	   .ft-edit-icon (inline-flow baseline realignment) down to the collapsed baseline. Explicit size
	   alone isn't enough though: an inline-block's default (baseline) vertical-align is normally
	   based on its content's own baseline -- once the img inside is display:none, it has no content,
	   so its baseline becomes its margin-bottom edge instead, and things realign against that.
	   vertical-align:top pins this to the line box's top instead -- a fixed reference that doesn't
	   depend on this element's own content, OR (unlike :middle, which measured differently between
	   the regular editor and the animator -- the two pages don't carry quite the same sibling
	   content, eg the animator has no separate "variation" icon) on other inline content sharing the
	   line. That's also what the checkered transparency background behind this swatch
	   (.formEntryValue:before above) is positioned from (top:0), so this now lines up flush behind
	   it -- both start at the same, content-independent top edge. */
	vertical-align: top;
}
@media (max-width: 450px) {
	.variation img {
		margin-bottom:5px;
	}
}

.ft-dynamic-separator {
    padding: 1px 0px;
    background-color: black;
    margin: 0 25% 20px 25%;
}

.formEntry.ftAdmin {
	display:none;
}

.formEntry .gradientMaker-hard {
	text-align: left;
	margin-left: 10px;
}
.formEntry .gradientMaker-top {
	padding: 10px 0 0 0; 
}
.pickerItem {
	border: 1px solid black;
	border-radius:3px;
	width:40px;
	height:33px;
	text-align:center;
	float:left;
	margin-right: 5px;
	user-select: none; /* clicking between numbered picker items (picker/picker2/fillPicker) shouldn't select their "#N" text */
}
.pickerItem.selected {
	background-color: #8888ff;
	font-weight: bold;
}
.picker2AddBtn, .picker2RemoveBtn {
	user-select: none; /* the +/- glyphs (picker2/fillPicker add/remove) shouldn't be selectable like ordinary text */
}