/* Editor Styles */

/* Body
================================================================== */
	#tempsave { 
		display:none; 
	}

	.txtLayer table *, 
	.txtLayer * {
		line-height: 1 !important;
		margin: 0;
	}

	.txtLayer table *[style="font-size:22px;"], 
	.txtLayer *[style="font-size:22px;"], 
	.txtLayer table *[style="font-size:22px;"] *,
	.txtLayer table *[style="font-size:20px;"], 
	.txtLayer *[style="font-size:20px;"], 
	.txtLayer table *[style="font-size:20px;"] *,
	.txtLayer table *[style="font-size:18px;"], 
	.txtLayer *[style="font-size:18px;"], 
	.txtLayer table *[style="font-size:18px;"] * {
		line-height: 0.95 !important;
		margin: 0;
	}

	#editor .tooltip {
		z-index: 100060;
	}

	#editor .modal {
		z-index: 100050;
	}

	#editor .modal-backdrop {
		z-index: 100040;
	}

	#editor .cke_panel {
		z-index: 100060 !important;
	}

	label.input-xtiny { 
		margin-bottom: 0;
	}

	.ui-icon-triangle-1-e {
		background-position:-32px -16px;
	}

	.ui-icon-triangle-1-w {
		background-position:-96px -16px;
	}

	.ui-resizable-handle {
		position:absolute;
		font-size:.1px;
		z-index:99999;
		display:block;
		height:7px;
		width:7px;
		background:#FFF;
		border:1px solid #999;
	}

	.ui-resizable-disabled .ui-resizable-handle,
	.ui-resizable-autohide .ui-resizable-handle {
		display:none;
	}

	.ui-resizable-n {
		cursor:n-resize;
		top:-6px;
		left:50%;
	}

	.ui-resizable-s {
		cursor:s-resize;
		bottom:-6px;
		left:50%;
	}

	.ui-resizable-e {
		cursor:e-resize;
		right:-6px;
		top:45%;
	}

	.ui-resizable-w {
		cursor:w-resize;
		left:-6px;
		top:45%;
	}

	.ui-resizable-se {
		cursor:se-resize;
		right:-6px;
		bottom:-6px;
	}

	.ui-resizable-sw {
		cursor:sw-resize;
		left:-6px;
		bottom:-6px;
	}

	.ui-resizable-nw {
		cursor:nw-resize;
		left:-6px;
		top:-6px;
	}

	.ui-resizable-ne {
		cursor:ne-resize;
		right:-6px;
		top:-6px;
	}


/* Menu
================================================================== */
#editor-nav .nav > li > a {
	padding: 7px 7px 7px;
}

#layerActions .menu-item p {
	margin: 0;
}

label {
	padding: 4px;
	color: #969494;
	display: inline-block;
	vertical-align: middle;
}

.bg label {
	color: white;
	line-height: 23px;
}

#undo .icon-share-alt {
	-webkit-transform: rotateY(180deg);
}

#undo.disabled,
#redo.disabled {
	opacity: .4;
}

#undo:not(.disabled):hover i,
#redo:not(.disabled):hover i {
	background-image: url("../../img/glyphicons-halflings-white.png");
}

#playlist .menu-item {
    padding: 2px;
    display: inline-block;
    color: #aaa;
    border-left: 1px solid #D0D0D0;
    border-right: 1px solid #D0D0D0;
    font-size: 10px;   
	font-weight: normal;   
	text-align: center;   
	height: 65px;
	line-height: normal;
	vertical-align: middle;
	white-space: nowrap;
}

#selectall-layer {
	width: 70px;
}

#layerActions {
	margin: 0;
} 

#playlist .deactive-item {
	opacity: 0.4;
}

#playlist .deactive-item:hover {
	color: #aaa;
	cursor: default;
}

#playlist .menu-margin {
	margin-bottom: 2px;
}

#playlist .menu-title {
	line-height: 114px;
	vertical-align: bottom;
}

#playlist #rotate-layer .menu-title {
	line-height: 61px;
}

#playlist #pos-layer .menu-title, 
#playlist #size-layer .menu-title {
	line-height: 15px;
}

/* Menu Icons */
[class^="m_icon-"],[class*=" m_icon-"] {
	display: inline-block;
	background-position: 14px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
	width: 60px;
	height: 65px;
}

.m_icon-add { background-position: 14px 4px; }
.m_icon-cut { background-position: -46px 3px; }
.m_icon-copy { background-position: -99px 3px; }
.m_icon-paste { background-position: -164px 3px;  }
.m_icon-selectall { background-position: -216px 3px; }
.m_icon-remove { background-position: -282px 7px; }
.m_icon-ticker { background-position: 0 14px; }
.m_icon-design { background-position: -402px 4px; }
.m_icon-text { background-position: -460px 6px; }
.m_icon-media { background-position: -518px 1px;}
.m_icon-upload { background-position: -580px 1px; }
.m_icon-rss { background-position: -634px 1px; }


.input-xtiny, 
#size-layer .input-xtiny, 
#pos-layer .input-xtiny, 
#rotate-layer .input-xtiny {
	font-size: 12px;
	padding: 3px 6px;
	line-height: normal;
	height: auto;
	margin-bottom: 2px;
}

#rotate-layer p {
	margin-top: 16px;
}

/* Canvas
================================================================== */
#canvasholder, 
#product-editorHolder {
	overflow: auto;
	position: relative;
    padding: 4px;
}

#canvas, #product-editor {
    position: relative;
    margin: 0 auto;
    background-color: #000000;
    font-size: 12px;
    border: 1px solid #AAA;
    margin-top: 7px;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); 
	overflow: hidden;
}

#p .layer {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.layerHidden {
	display: none;	
}

.overlay {
    background-color: transparent;
    border-style: solid;
    border-color: #999;
    border-width: 1px;
    margin: 0px;
    padding:0px;
    position: absolute;
}

.txtLayer .viewplaylistimg, 
.txtLayer .media-preview {
	position: relative;
	z-index: -1;
}

/* Layerlist
================================================================== */
	#toolboxMenu {
		display: -webkit-box;
	  	-webkit-box-orient: horizontal;
	  	-webkit-box-pack: left;
	  	-webkit-box-align: center;
	  	cursor: pointer;
	  	margin: 0;
	}

	#toolboxMenu li {
		margin-left: 5px;
	}

	#toolboxMenu li.hide {
		-webkit-transform: rotate(-180deg);
		   -moz-transform: rotate(-180deg);
		    -ms-transform: rotate(-180deg);
		     -o-transform: rotate(-180deg);
		        transform: rotate(-180deg);
		opacity: 1;
	}

	#zoomControls {
		border-bottom: 1px solid rgb(229, 229, 229);
		padding: 1px;
		background-color: #2C3033;
	}
	
	#layer-controls {
		position: absolute;
		bottom: 0;
		right: 0;
		border-top: 1px solid rgb(229, 229, 229);
		font-size: 11px;
		background-color: #2C3033;
	}
	
	#layer-controls .layer-actions i {
		margin: 4px 3px;
		margin-top: 6px;
	}

	#layer-controls .layer-actions {
		text-decoration: none;
	}
	
	.zoomButton {
		margin-right: 5px;
		opacity: .5;
	}

	.zoomButton:hover {
		opacity: 1;
		text-decoration: none;
	}

	#zoomPercentage {
		color: #7F7F7F;
	}

	#layertoolbox {
		min-width: 179px;
		max-width: 225px;
		-webkit-transition: -webkit-transform .25s ease, margin .5s ease;
		   -moz-transition: -webkit-transform .25s ease, margin .5s ease;
		    -ms-transition: -webkit-transform .25s ease, margin .5s ease;
		     -o-transition: -webkit-transform .25s ease, margin .5s ease;
		        transition: -webkit-transform .25s ease, margin .5s ease;
	}

	#layerlist {
		margin: 0;
	}

	.hideBox { 
		-webkit-transform: translate(150px);
		   -moz-transform: translate(150px);
		    -ms-transform: translate(150px);
		     -o-transform: translate(150px);
		        transform: translate(150px);
	}

	.hidden { 
		margin-left: 35px; 
	}

	#layeroverview {
	    overflow-x: visible;
		overflow-y: auto;
	}

	span.visibleactive {
	    opacity: 1 !important;
	}

	input.layer_title {
		border: none;
		padding: 0;
		width: 45px;
		font-size: 11px;
		background: none;
		cursor: default;
		max-width: 106px;
		min-width: 45px;
		margin: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
		-moz-box-shadow: none;
	}

	input.layer_title:focus { 
		background: white;
	}

	li.layerListItem {
		position: relative;
		padding: 0;
		cursor: default;
		font-size: 11px;
		overflow: hidden;
		margin: 2px 0;
		border: 1px solid rgb(229, 229, 229);
		border-left-width: 2px;
		border-left-color: #B9B9B9;
		height: 28px;
	}

	.layerText {
		overflow: hidden;
		height: 28px;
		float: left;
		line-height: 28px;
	}

	.txtLayer {
		width: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		background: transparent;
		word-wrap: break-word;
		height: 100%;
		overflow: hidden;
	}

	.txtLayer td > span {
		line-height: inherit !important;
	}


	.txtLayer span > span {
		line-height: inherit !important;
	}
	.txtLayer table {
		table-layout: fixed;
	}

	.txtLayer ul {
		-webkit-margin-before: 1em !important;
		-webkit-margin-after: 1em !important;
		-webkit-margin-start: 0px !important;
		-webkit-margin-end: 0px !important;
		-webkit-padding-start: 40px !important;
	}

	.txtLayer ol li { 
		list-style-type: decimal;
		display: list-item;  
	}
	.txtLayer ul li {
		list-style-type: disc;
		display: list-item;  
	}
	
	.layerOpacity {
		border-left: 1px solid #E5E5E5;
		text-align: center;
		margin: 1px;
		height: 30px;
		float: right;
		vertical-align: top;
	}

	.layerOpacity input { 
		width: 20px;
		margin-right: 0;
		background: transparent;
		border: none;
		padding: 5px 0;
		text-align: right;
		-webkit-box-shadow: none;
		box-shadow: none;
		-moz-box-shadow: none;
		font-size: 11px;
	}

	.toggleView {
		cursor: pointer;
		border-left: 1px dashed rgb(229, 229, 229);
		height: 100%;
		background-color: #2c3033;
	}

	.dragHandle {
		width: 20px;
		height: 28px;
		float: left;
		background: url('../../img/draghandle.png') center center no-repeat;
		cursor: url('../../img/openhand.cur'), default !important;
	}

	#layeroverview li.background, 
	#layeroverview li.playlist {
		border-left-color: #000;
		background-color: #F0F0F0;
	}

	#layeroverview li.locked {
		border-left-color: #E91D18;
		background-color: #FFECEC;
	}
	
	#layeroverview .sortable-placeholder {
		width: 99%;
		height: 28px;
		margin: 2px 0;
		padding: 0;
	}

	.viewIcon {
		opacity: 1;
		margin: 4px 3px;
		margin-left: 5px;
	}
	
	li.invisible {
		visibility: visible;
	}

	li.invisible .viewIcon {
		opacity: 0;
	}

	li .toggleView:hover .viewIcon {
		opacity: .5;
	}

	#editname {
	    display: none;
	}

	.editlayer {
	    float: right;
	    margin: 0px;
	    padding: 0px;
	    text-decoration: underline;
	}

	.editlayer:hover {
	    cursor: pointer;
	    text-decoration: none;
	}

	div.txtHolder {
		margin: 5px 0;
		clear: both;
		width: 100%;
	}

	#align_bottom {
		-webkit-transform: rotate(270deg);
	}

	#align_top {
		-webkit-transform: rotate(90deg);
	}

	.viewplaylistimg {
		position: relative;
		z-index: -1;
	}

/* Show Info Screen
================================================================== */
	.shortcut-list {
		display: inline-block;
		vertical-align: top;
	}

	.shortcut-list td:not(.list-header):first-child {
		font-weight: bold;
	}

	.shortcut-list .list-header {
		padding: 10px 0 2px 0;
		font-weight: bold;
		font-size: 13px;
		border-bottom: 3px double #cdcdcd;
	}

/* Layer Style
================================================================== */
	#modal-layerStyle .disabled {
		opacity: .3;
	}

	#modal-layerStyle input.input-tiny {
		text-align: right;
	}

	/* Background Styles */
	#baPos .btn {
		min-width: 36px;
		min-height: 26px;
	}

	#baPos .tooltip + .btn,
	#borderStyles .tooltip + .btn {
		margin-left: 5px;
	}

	#baPos .btn i {
		-webkit-transition: -webkit-transform .3s ease-in-out;
	}

	#pos-topleft i { -webkit-transform: rotate(45deg); }
	#pos-topright i { -webkit-transform: rotate(-45deg); }
	#pos-bottomleft i { -webkit-transform: rotate(-45deg); }
	#pos-bottomright i { -webkit-transform: rotate(45deg); }


	#pos-topleft.active i { -webkit-transform: translateX(5px) translateY(3px) rotate(45deg); }
	#pos-top.active i { -webkit-transform: translateY(3px); }
	#pos-topright.active i { -webkit-transform: translateX(-5px) translateY(3px) rotate(-45deg); }
	#pos-left.active i { -webkit-transform: translateX(3px); }
	#pos-right.active i { -webkit-transform: translateX(-3px); }
	#pos-bottomleft.active i { -webkit-transform: translateX(5px) translateY(-3px) rotate(-45deg); }
	#pos-bottom.active i { -webkit-transform: translateY(-3px); }
	#pos-bottomright.active i { -webkit-transform: translateX(-5px) translateY(-3px) rotate(45deg); }


	#gradientColors input[type="range"] {
		width: 110px;
	}

	#gradientColors .control-label {
		text-align: left;
	}

	/* Border Styles */
	#borderStyles .btn {
		min-width: 30px;
		min-height: 30px;
		border-width: 2px;
		border-color: #9f9f9f;
	}

	#border_solid{border-style:solid;}
	#border_dotted{border-style:dotted;}
	#border_dashed{border-style:dashed;}
	#borderStyles #border_double{border-style:double; border-width: 3px; }
	#border_groove{border-style:groove;}
	#border_inset{border-style:inset;}
	#border_outset{border-style:outset;}
	#border_ridge{border-style:ridge;}


	/* Border Radius */
	#radiusPreview .btn {
		min-width: 40px;
		min-height: 30px;
		font-size: 11px;
	}

	#brTopLeft { -webkit-border-top-left-radius: 10px; }
	#brTopRight { -webkit-border-top-right-radius: 10px; }
	#brBottomLeft { -webkit-border-bottom-left-radius: 10px; }
	#brBottomRight { -webkit-border-bottom-right-radius: 10px; }

	#border #bTop { border-top-width: 3px; border-top-style: solid; height: 28px; } 
	#border #bLeft { border-left-width: 3px; border-left-style: solid; width: 28px; } 
	#border #bRight { border-right-width: 3px; border-right-style: solid; width: 28px; } 
	#border #bBottom { border-bottom-width: 3px; border-bottom-style: solid; height: 28px; } 

/* Input Slider
================================================================== */
	input[type="range"] {
		-webkit-appearance: none !important;
		color: #909090;
		padding: 0;
		height: 5px;
		margin: 0 5px;
		width: 175px;
		border: 1px solid #E8E8E8;
		-webkit-border-radius: 3px 3px;
		margin-bottom: 1px;
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance:none !important;
		width: 14px;
		height: 14px;
		-webkit-border-radius: 100px;
		margin: -4px;
	}

	input[type="range"]::-webkit-slider-thumb:hover { 
		-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); 
	}

/* Box model
================================================================== */
	.hbox {
	  display: -webkit-box;
	  -webkit-box-orient: horizontal;
	  -webkit-box-align: stretch;

	  display: -moz-box;
	  -moz-box-orient: horizontal;
	  -moz-box-align: stretch;

	  display: box;
	  box-orient: horizontal;
	  box-align: stretch;
	}

	.vbox {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-box-align: stretch;

	  display: -moz-box;
	  -moz-box-orient: vertical;
	  -moz-box-align: stretch;

	  display: box;
	  box-orient: vertical;
	  box-align: stretch;
	 
	}

	.spacer {
	  -webkit-box-flex: 1;
	  -moz-box-flex: 1;
	  box-flex: 1;
	}

	.reverse {
	  -webkit-box-direction: reverse;
	  -moz-box-direction: reverse;
	  box-direction: reverse;
	}

	.boxFlex0 {
	  -webkit-box-flex: 0;
	  -moz-box-flex: 0;
	  box-flex: 0;
	}

	.boxFlex1, .boxFlex {
	  -webkit-box-flex: 1;
	  -moz-box-flex: 1;
	  box-flex: 1;
	}

	.boxFlex2 {
	  -webkit-box-flex: 2;
	  -moz-box-flex: 2;
	  box-flex: 2;
	}

	.boxGroup1 {
	  -webkit-box-flex-group: 1;
	  -moz-box-flex-group: 1;
	  box-flex-group: 1;
	}

	.boxGroup2 {
	  -webkit-box-flex-group: 2;
	  -moz-box-flex-group: 2;
	  box-flex-group: 2;
	}

	.start {
	  -webkit-box-pack: start;
	  -moz-box-pack: start;
	  box-pack: start;
	}

	.end {
	  -webkit-box-pack: end;
	  -moz-box-pack: end;
	  box-pack: end;
	}

	.center {
	  -webkit-box-pack: center;
	  -moz-box-pack: center;
	  box-pack: center;
	}


	.input-tiny{width:25px;}
	.input-xtiny{width:45px;}

/* Layer Animation
================================================================== */
	@-webkit-keyframes fadein {
	    0%{ opacity: 0; }
	    100%{ opacity: 1; }
	}

	@-webkit-keyframes rotatein {
	    0%{ opacity: 0; -webkit-transform: rotate(0deg); }
	    100%{ opacity: 1; -webkit-transform: rotate(360deg); }
	}

	@-webkit-keyframes moveinleft {
	    0%{ opacity: 0; left: -9999px;}
	    100%{ opacity: 1; left: initial;}
	}

	@-webkit-keyframes moveintop {
	    0%{ opacity: 0; top: -9999px;}
	    100%{ opacity: 1; top: initial; }
	}

	@-webkit-keyframes fadeout {
	    0%{ opacity: 1; }
	    100%{ opacity: 0; }
	}



	.fadein { 
	   -webkit-animation-timing-function: linear;
	   -webkit-animation-iteration-count: 1;
	   -webkit-animation-fill-mode: forwards;
	   opacity: 0;
	}

	.fadeout {
		-webkit-animation-name: fadeout;
	   -webkit-animation-duration: 3s;
	   -webkit-animation-timing-function: linear;
	   -webkit-animation-iteration-count: 1;
	   -webkit-animation-fill-mode: forwards;
	   opacity: 1;
	}

/*
* Spectrum Colorpicker v1.1.0
* https://github.com/bgrins/spectrum
* Author: Brian Grinstead
* License: MIT
================================================================== */
	.sp-container {
	    position:absolute;
	    top:0;
	    left:0;
	    display:inline-block;
	    z-index: 2147483647;
	    overflow: hidden;
	}
	.sp-container.sp-flat {
	    position: relative;
	}

	.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-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: 18px;
	}
	.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: -14px;
	    right: 0;
	    left: 0;
	    height: 8px;
	}
	.sp-alpha-inner{
	    border: solid 1px #333;
	}

	/* Don't allow text selection */
	.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .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-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%);
	}

	/* 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;
	}

	/* Basic display options (colors, fonts, global widths) */
	.sp-container {
	    border-radius: 0;
	    background-color: #fff;
	    border: 1px solid #cdcdcd;
	    padding: 0;
	}

	.sp-container, .sp-color, .sp-hue	{
	    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 {
	    border: solid 1px #666;
	}

	/* Input */
	.sp-input-container {
	    width: 100%;
	}

	.sp-initial-disabled, .sp-input-container {
	    width: 100%;
	}

	.sp-input {
	   font-size: 12px !important;
	   margin: 0;
	   width: 92%;
	   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: dashed 1px #cdcdcd;
	}

	.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-button-container {
	    float: right;
	    width: 100%;
	    text-align: right;
	}

	.sp-replacer {
	    margin:0;
	    overflow:hidden;
	    cursor:pointer;
	    padding: 3px;
	    display:inline-block;
	    *zoom: 1;
	    *display: inline;
	    border: solid 1px #cdcdcd;
	    background: #fff;
	    color: #333;
	    vertical-align: middle;
	    margin-top: 2px;
	}

	.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: 20px;
	    height: 18px;
	    /*border: solid 1px #222;*/
	    margin-right: 3px;
	    float:left;
	    z-index: 0;
	    margin-left: 1px;
	    margin-top: 1px;
	}

	.sp-palette {
	    *width: 200px;
	    max-width: 200px;
	}

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

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

	.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=);
	}


/* RSS Feed
================================================================== */

.feed_filter {
	margin-left: 0;
}

.feed_filter .filter_item {
	margin-right: 10px;
	padding: 0 4px;
	margin: 2px 0;
	border: 1px solid #EDEDED;
	border-right-width: 3px;
	min-width: 90px;
}

.feed_filter .filter_item:first-child {
	border:none;
}

.filter_item label {
	color: #333333;
	font-weight: bold;
	cursor: pointer;
	padding-top: 6px;
	line-height: 16px;
	font-size: 12px;
}

.img-selected .icon-ok-sign {
	display: none;
}


.filter_active .img-selected .icon-ok-sign {
	display: block;
	color: white;
}

.filter_item.NIEUWS {
	border-right-color: #6D9EEB;
	background: rgba(109, 158, 235, 0.1);
}

.filter_item.VERKEER {
	border-right-color: #6AA84F;
	background: rgba(106, 168, 79, 0.1);
}

.filter_item.TECH {
	border-right-color: #E92323;
	background: rgba(233, 35, 35, 0.1);
}

.filter_item.SPORT {
	border-right-color: #FF8F00;
	background: rgba(255, 143, 0, 0.1);
}

.filter_item.WEER {
	border-right-color: #000000;
	background: rgba(0, 0, 0, 0.1);
}

.filter_item.OVERIG {
	border-right-color: #A5A5A5;
	background: rgba(165, 165, 165, 0.1);
}

.feed_filter .filter_item_label {
	width: auto;
	font-weight: bold;
	font-size: 13px;
	color: #333333;
}

.preset_items {
	float: left;
	margin: 0 10px 10px 0;
	min-width: 164px;

	border: 1px solid #EDEDED;

	-webkit-transition: opacity .4s linear, margin .4s linear;
		 -moz-transition: opacity .4s linear, margin .4s linear;
			 -o-transition: opacity .4s linear, margin .4s linear;
				  transition: opacity .4s linear, margin .4s linear;

	line-height: 17px;
}

.edit_feed {
	font-weight: bold;
	padding: 0px 4px;
}

.preset_hide {
	height: 0;
	margin: 0;
	opacity: 0;
	border: 0;
	min-width: 0;
}

.preset_items.preset_active {
	-webkit-animation: bounce .4s ease-out forwards;
     -moz-animation: bounce .4s ease-out forwards;
       -o-animation: bounce .4s ease-out forwards;
          animation: bounce .4s ease-out forwards;
}


.fadeout-anim {
	-webkit-animation: fadeout .5s linear forwards;
     -moz-animation: fadeout .5s linear forwards;
       -o-animation: fadeout .5s linear forwards;
          animation: fadeout .5s linear forwards;
  -webkit-backface-visibility: hidden;
}

.fadein-anim {
	-webkit-animation: fadein .5s linear forwards;
     -moz-animation: fadein .5s linear forwards;
       -o-animation: fadein .5s linear forwards;
          animation: fadein .5s linear forwards;

  -webkit-backface-visibility: hidden;

}

@-webkit-keyframes fadein {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 1; }
}


@-webkit-keyframes fadeout {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}


.preset_items .view {
	padding: 2px 0 2px 0;
}

.rss-layer {
	overflow: hidden;
}

.rss-layer .txtLayer {
	padding: 5px;
}

.preset_items .descr {
	clear: both;
	padding: 1px 5px;
	background: #fff;
}

.descr.NIEUWS {
	border-bottom: 2px solid #6D9EEB;
}

.descr.NIEUWS h4 {
	color: #0666FD;
}

.descr.VERKEER {
	border-bottom: 2px solid #6AA84F;
}

.descr.VERKEER h4 {
	color: #1A9B02;
}

.descr.TECH {
	border-bottom: 2px solid #E92323;
}

.descr.TECH h4 {
	color: #E92323;
}

.descr.SPORT {
	border-bottom: 2px solid #FF8F00;
}

.descr.SPORT h4 {
	color: #FF8F00;
}

.descr.WEER {
	border-bottom: 2px solid #000000;
}

.descr.WEER h4 {
	color: #000000;
}

.descr.OVERIG {
	border-bottom: 2px solid #A5A5A5;
}

.descr.OVERIG h4 {
	color: #A5A5A5;
}

.descr h4 {
	margin: 0;
  line-height: 20px;
  font-size: 14px;
  color: #69C1E7;
  font-weight: 600;
  text-rendering: optimizelegibility;
}

.descr p { 
	font-size: 12px;
  margin-bottom: 0px;
}

/*.rss-image {
	background: url('/assets/default/img/rssFeed.png') center center no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 3px;
	top: 3px;
}*/

label.rss_labels {
	width: 85px;
	text-align: left;
	font-size: 12px;
	border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}

.rss-title-bold {
	font-weight: bold;
	font-size: 105%;
	display: block;
	color: inherit;
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0);}
	40% {-webkit-transform: translateX(-20px);}
	60% {-webkit-transform: translateX(-10px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateX(0);}
	40% {-moz-transform: translateX(-20px);}
	60% {-moz-transform: translateX(-10px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateX(0);}
	40% {-o-transform: translateX(-20px);}
	60% {-o-transform: translateX(-10px);}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
	40% {transform: translateX(-20px);}
	60% {transform: translateX(-10px);}
}

#wads-list {
	margin: 5px;
	width: 100%;
}

.wads-item {
	border: 4px solid #fff;
	display: inline-block;
	width: 150px;
	height: 150px;
	background: #F3F3F3;
	position: relative;

	-webkit-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset,rgba(128,128,128,.6)0 0 16px 0;
		 -moz-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset,rgba(128,128,128,.6)0 0 16px 0;
			 -o-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset,rgba(128,128,128,.6)0 0 16px 0;
					box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset,rgba(128,128,128,.6)0 0 16px 0;
}

.wads-item > p {
	font-weight: bold;
	margin-top: 5px;
	letter-spacing: 1px;
	font-size: 13px;
}

.wads-item > p:first-child {
	margin-left: 5px;
	float: left;
}

.wads-item > p:nth-child(2) {
	margin-right: 5px;
	float: right;
}

.wads-caption {
	position: absolute;
	left: 0;
	width: 100%;
	top: auto;
	bottom: 0;
	height: 60%;
	text-align: center;
	background: #FFF;
}

.wads-caption > h2 {
	font-size: 24px;
	margin: 0;
	line-height: normal;
	margin-top: 10px;
	font-weight: normal;
}


.wads-item.wads-active {
	background: #43AC6A;

	-webkit-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset, rgba(67, 172, 106, 0.6) 0 0 16px 0;
		 -moz-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset, rgba(67, 172, 106, 0.6) 0 0 16px 0;
			 -o-box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset, rgba(67, 172, 106, 0.6) 0 0 16px 0;
					box-shadow: rgba(0,0,0,.0745098)0 1px 1px 0 inset, rgba(67, 172, 106, 0.6) 0 0 16px 0;
}

.wads-item.wads-active > p { 
	color: #FFF;
}

.wads-item + .wads-item {
	margin-left: 20px;
}