html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }
a:focus, input:focus{ outline-style: none; }
select:focus, option:focus, select::-moz-focus-inner, option::-moz-focus-inner { outline: none; border: none; outline-width: 0; }

/* Clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Clear */
br.clear{ clear: both; }
.hidden{ display: none; }
.invisible{ position: absolute; top: -5000px; left: -5000px; }

body{ background: #fff; font-family: 'Arial', 'Helvetica', sans-serif; color: #1b1c1d; font-size: 14px; line-height: 24px; }
	body *{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* Buttons */
.btn{ background: #1d95cd; border: #187baa 1px solid; border-radius: 4px; color: #fff; padding: 5px 10px; text-decoration: none; box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.3), 0 1px 1px 0 #ededed; font-size: 13px; }
	.btn.gray{ background: #f8f8f8; border: #ddd 1px solid; color: #555; box-shadow: inset 0 1px 1px 0 #fff, 0 1px 1px 0 #ededed; font-size: 13px; }

/* Layout */
div.header{ width: 100%; position: fixed; top: 0; left: 0; background: #232c36; z-index: 2; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); }

div.toolbar{ width: 320px; position: absolute; right: 0; top: 45px; height: calc(100% - 45px); background: #f8f8f8; border-left: #ddd 1px solid; z-index: 1; overflow-x: hidden; overflow-y: auto; }
	.sidebar-scrolling div.toolbar{ width: 330px; }
div.canvas{ width: calc(100% - 320px); padding: 20px; position: absolute; height: calc(100% - 45px); left: 0; top: 45px; overflow-x: hidden; overflow-y: auto; }
	.sidebar-scrolling div.canvas{ width: calc(100% - 330px); }
	.canvas div.text{ padding: 20px 30px; }
	.canvas div.html{ padding: 20px; background: #1a1a1a; color: #bbb072; overflow-x: auto; position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none;  }
	.canvas .html pre{ white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
	
div.footer{ position: fixed; bottom: 0; left: 0; width: 100%; background: #eee; border-top: #ccc 1px solid; padding: 5px 20px; text-align: right; z-index: 1; font-size: 11px; font-family: 'Lucida Grande', 'Lucida Unicode', 'sans-serif'; box-shadow: inset 0 1px 3px 0 #f5f5f5, 0 -1px 1px 0 rgba(0,0,0,0.1); }
	.footer a{ color: #1b1c1d; text-decoration: none; margin-left: 14px; }
	.footer a:hover{ color: #3781b0; text-decoration: underline; }

/* Header */

.header h1{ width: 150px; height: 28px; float: left; display: inline; margin: 9px 0 0 10px; }
.header h1 a{ display: block; width: 150px; height: 28px; background: url('sprite.png') 0 0 no-repeat; text-indent: -5000px; }
	.header h1 a:hover{ opacity: .8; }

/* Actions */
.header div.actions{ position: absolute; right: 0; top: 0; }
.header .actions span{ cursor: pointer; display: inline; float: left; width: 45px; height: 44px; background-image: url('sprite.png'); background-repeat: no-repeat; text-indent: -5000px; }
	.header .actions span.download{ background-position: 17px -324px; }
		.header .actions span.download:hover{ background-position: 17px -354px; }
	.header .actions span.select{ background-position: 18px -383px}
		.header .actions span.select:hover{ background-position: 18px -413px;}
	.header .actions span.html{ background-position: 16px -442px;}
		.header .actions span.html:hover{ background-position: 16px -472px; }

/* Types */
.header div.types{ overflow: hidden; float: left; display: inline; padding: 0 0 0 20px; margin-top: 0; }
	.header .types span{ font-size: 13px; float: left; display: inline; color: #dbdbdc; padding: 16px 18px 16px 36px; line-height: 1em; background-image: url('sprite.png'); background-repeat: no-repeat; text-decoration: none; }
	.header .types span:hover{ color: #75beed; }
	.header span.active{ background-color: #1b1e22; color: #fff; box-shadow: 0 1px 0 0 #31353b, inset 0 1px 2px 0 #0f1113; }
	.header .types span:hover{ cursor: pointer; border-color: #aaa; }
		.header .types span.paragraphs.active{ background-position: 14px -32px; }
		.header .types span.paragraphs{ background-position: 14px -62px; }
		.header .types span.list.active{ background-position: 14px -92px; }
		.header .types span.list{ background-position: 14px -122px; }
		.header .types span.photos.active{ background-position: 14px -152px; }
		.header .types span.photos{ background-position: 14px -182px; }
		.header .types span.itemlist.active{ background-position: 14px -212px; }
		.header .types span.itemlist{ background-position: 14px -242px; }

	.header h2{ font-size: 11px; background: #aaa; color: #fff; text-transform: uppercase; line-height: 11px; padding: 5px; font-weight: bold; margin-bottom: 10px; }

/* Toolbar */
div.toolbar{ font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 11px; line-height: 1em; }
	.toolbar div.tools{ display: none; }
	
/* Loading */
div.loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 10; color: #fff; text-align: center; display: none; text-align: center; }
	.loading span{ display: block; width: 100px; margin: 0 auto; background: #75beed; color: #fff; padding: 3px; border-radius: 0 0 4px 4px; font-size: 13px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5); }

/* Tabs */
div.tabs{ overflow: hidden; border-bottom: #d5d5d5 1px solid; box-shadow: 0 1px 1px 0 #dcdcdc; }
	.tabs span{ float: left; display: inline; width: 50%; text-align: center; padding: 15px 0; background: #fefefe; background: linear-gradient(#ffffff, #fcfcfc); cursor: pointer; color: #a7a7a7; }
		.tabs span:hover{ color: #3781b0; }
	.tabs span.active{ background: #ebebeb; background: linear-gradient(#d6d6d6, #fcfcfc); color: #303030; box-shadow: inset 0 2px 5px 0 #aaa; }
	
/* Tools */
div.tools{ padding: 10px; color: #787979; }
	.tools div.input{ width: 100%; display: inline-block; }
	.tools .input:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
	.tools .input label{ float: left; display: inline; width: 100px; }
		.tools span.tooltip{ border-bottom: #ccc 1px dashed; display: inline-block; padding-bottom: 3px; cursor: help; }
	.tools div.input{ margin-bottom: 10px; clear: both; }
	.tools h2{ font-weight: bold; text-transform: uppercase; color: #aaa; text-shadow: 0 1px 0 #fff; padding-bottom: 12px; font-size: 10px; }
	.tools div.group{ border-top: #ddd 1px solid; padding-top: 10px; margin-top: 0; }
		.tools .group h2{ padding-bottom: 5px; }
	.tab-html{ display: none; }

/* Checkboxes */
.input.checkbox input[type="checkbox"]{ display: none; }
	.input.checkbox label{ float: none; display: block; width: auto; padding: 5px 0 5px 20px; background: url('sprite.png') 0 -736px no-repeat; cursor: pointer; }
		.input.checkbox label:hover{ background-position: 0 -776px; }
		.input.checkbox input:checked + label{ background-position: 0 -816px; }
		.input.checkbox input:checked + label:hover{ background-position: 0 -856px; }
		.input.checkbox.disabled label{ background-position: 0 -896px; color: #bbb; }

/* Crop style */
.input.crop-options label{ width: 100px; float: left;  }

div.crop-style{ width: 70px; }
	.crop-style div.option{ width: 50%; border: #ccc 1px solid; background: #fafafa; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 1px 1px 0 #d8d8d8; text-indent: -5000px; float: left; height: 26px; cursor: pointer; text-align: center; padding-top: 4px; }
	.crop-style .option.short-side{ border-left: 0; border-radius: 0 100px 100px 0; }
	.crop-style .option.long-side{ border-right: 0; border-radius: 100px 0 0 100px; }
	.crop-style .option.active{ background: #ebebeb; background: linear-gradient(#d6d6d6, #fcfcfc); color: #303030; box-shadow: inset 0 1px 3px 0 #aaa; }
	.crop-style div.option:hover{ background-color: #fff; border-color: #c0c0c0; }
	.crop-style .option span{ display: block; width: 16px; height: 16px; background: url('sprite.png') 0 0 no-repeat; }
		.crop-style .option.long-side span{ background-position: 0 -940px; margin-left: 10px; }
		.crop-style .option.short-side span{ background-position: 0 -970px; margin-left: 8px; }
	.crop-style select{ display: none; }
	.crop-options div.input.text{ width: 90px; display: inline-block; margin: 0 0 0 5px; }
		.crop-options .input.text input[type="text"]{ width: 50px; border-radius: 0 3px 3px 0; }

/* Checklist */
div.checklist{ overflow: hidden; }
	.checklist div.input.checkbox{ width: 50%; float: left; display: inline; clear: none;  }


/* Collection select */
.select-collection label{ font-weight: bold; padding-top: 7px; }
div.collection{ width: 190px; }
.collection div.select-wp{ width: 76%; float: left; display: inline; overflow: hidden; box-shadow: 0 1px 1px 0 #d8d8d8; border-right: #ccc 1px solid; }
.collection select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background: #fafafa; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5); border-radius: 0; padding: 3px 25px 3px 8px; border: 1px solid #ccc; height: 25px; float: left; display: inline; margin: 0; width: 130%; color: #555; background-image: url('sprite.png'); background-position: 130px -583px; background-repeat: no-repeat; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; outline: none; }
	.collection select::-moz-focus-inner{ border: 0; outline: none; }
	.collection select:focus{ outline: none; }
.collection span{ background: #fafafa; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 1px 1px 0 #d8d8d8; border-radius: 0; padding: 3px; border: 1px solid #ccc; height: 25px; width: 12%; overflow: hidden; display: inline; float: left; margin: 0; text-indent: -5000px; background-image: url('sprite.png'); background-repeat: no-repeat; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
	.collection span:active{ background-color: #eee; }
	.collection span.prev{ border-radius: 15px 0 0 15px; border-width: 1px 0 1px 1px; background-position: 10px -521px; }
	.collection span.next{ border-radius: 0 15px 15px 0; border-width: 1px 1px 1px 0; background-position: 8px -551px; }
	.collection span:hover, .collection select:hover{ border-color: #bbb; }

/* Select */
.select div.select-wp{ overflow: hidden; box-shadow: 0 1px 1px 0 #d8d8d8; border: #ccc 1px solid; border-radius: 100px; }
.select select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background: #fafafa; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5); border-radius: 0; padding: 4px 25px 4px 8px; border: 0; height: 25px; margin: 0; width: 130%; color: #555; background-image: url('sprite.png'); background-position: 180px -581px; background-repeat: no-repeat; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; outline: none; line-height: 1em; }
.select.full label{ float: none; display: block; padding-bottom: 4px; }
.select label{ padding-top: 8px; }
.select.full select{ background-position: 280px -581px; }
	
/* Canvas: Paragraphs */
.text .paragraphs h1{ font-size: 36px; line-height: 1em; margin: 10px 0; font-weight: bold; }
.text .paragraphs h2{ font-size: 30px; line-height: 1em; margin: 10px 0; font-weight: bold; }
.text .paragraphs h3{ font-size: 24px; line-height: 1em; margin: 10px 0; font-weight: bold; }
.text .paragraphs h4{ font-size: 18px; line-height: 1em; margin: 10px 0; font-weight: bold; }
.text .paragraphs h5{ font-size: 14px; line-height: 1em; margin: 10px 0; font-weight: bold; }
.text .paragraphs p{ margin-bottom: 20px; }
.text .paragraphs strong{ font-weight: bold; }
.text .paragraphs em{ font-weight: italic; }

/* Canvas: List */
.text .list li{ list-style-position: inside; padding-left: 20px; }
	.text .list.disc li{ list-style-type: disc; }
	.text .list.circle li{ list-style-type: circle; }
	.text .list.square li{ list-style-type: square; }
	.text .list.none li{ list-style-type: none; }
	.text .list.decimal li{ list-style-type: decimal; }
	.text .list.decimal-leading-zero li{ list-style-type: decimal-leading-zero; }
	.text .list.lower-alpha li{ list-style-type: lower-alpha; }
	.text .list.lower-roman li{ list-style-type: lower-roman; }
	.text .list.upper-alpha li{ list-style-type: upper-alpha; }
	.text .list.upper-roman li{ list-style-type: upper-roman; }
	
/* Canvas: Item list */
.canvas .itemlist ul{ display: table; width: 100%; }
.canvas .itemlist li{ padding: 20px 0 0 0; margin: 20px 0 0 0; display: table-row; }
	.canvas .itemlist div.img{ display: table-cell; vertical-align: top; padding: 20px 20px 20px 0; border-top: #ddd 1px solid; }
	.canvas .itemlist div.info{ display: table-cell; vertical-align: top; padding: 20px 0 20px 0; border-top: #ddd 1px solid; }
		.canvas .itemlist li:first-child div{ border: 0; padding-top: 0; }
	.canvas .itemlist h2{ font-size: 24px; font-weight: bold; line-height: 1em; margin-bottom: 5px; }
	.canvas .itemlist div.meta{ font-size: 12px; margin: 0 0 3px 0; padding: 0; }
	
canvas {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

/* Sliders */
.slider { width: 137px; float: left; display: inline; margin-top: 5px; }
	.sliding.has-input .slider{ width: 118px; }
.slider > .dragger { background: #fafafa; box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 0 4px rgba(0,0,0,0.2); border-radius: 10px; border: 1px solid #ccc; width: 12px; height: 12px; }
.slider > .dragger:hover { background: #fff; border-color: #aaa; }
.slider > .track, .slider > .highlight-track { background: #e2e2e2; border-radius: 8px; height: 4px; }
.slider > .highlight-track { background-color: #7aaecd; }
	.toolbar .sliding span.output, .toolbar .sliding.has-input input[type="text"]{ border: #e0e0e0 1px solid; width: 30px; float: left; display: inline !important; text-align: center; margin-left: 10px; padding: 3px 0; border-radius: 4px; background: #f5f5f5; color: #999; }
	.toolbar .sliding.has-input input[type="text"], .toolbar .text input[type="text"]{ border-color: #ccc; background-color: #fff; box-shadow: inset 0 1px 1px 0 #ccc; }
		.toolbar .sliding.has-input input[type="text"]:focus, .toolbar .text input[type="text"]:focus{ border-color: #3781b0; box-shadow: inset 0 1px 1px 0 #ccc, 0 0 5px 0 #62b2e4; }
	.toolbar .sliding label{ padding-top: 3px; }
	.toolbar .sliding.has-input em{ display: inline-block; padding: 3px 0 3px 5px; font-style: normal !important; }

	.toolbar .text input[type="text"]{ width: 190px; border: #e0e0e0 1px solid; border-radius: 4px; padding: 3px 5px; }
	.toolbar .text label{ padding: 4px 0; }

/* Dialog */
div.dialog{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background: rgba(0,0,0,0.4); }
	.dialog div.box{ width: 400px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.8); border-radius: 4px;  overflow: hidden; }
	.dialog .box div.content{ padding: 20px; }
	.dialog .box div.content.error{ background: url('sprite.png') 20px -599px no-repeat; padding-left: 100px; }
	.dialog div.submit{ padding: 15px; border-top: #ccc 1px solid; background: #f5f5f5; text-align: right;}
	.dialog .submit a{ background: #1d95cd; border: #187baa 1px solid; border-radius: 4px; color: #fff; padding: 5px 20px; text-decoration: none; box-shadow: inset 0 1px 1px 0 rgba(255,255,255,0.3); font-size: 13px; text-transform: uppercase; }

/* Dialog box - Tutorial, Info menu */
div.dialog-box{ background: #fff; position: absolute; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.8); border-radius: 4px; overflow: visible; z-index: 4; font-size: 13px; line-height: 19px; }
.dialog-box div.arrow{ width: 15px; height: 15px; background: url('dialog-arrows.png') no-repeat; }


/* Flash message */
div.message{ padding: 15px 30px 0 20px; }
	.message div.container{ background: #eaf6e9; border: #d3e5d2 1px solid; border-radius: 4px; padding: 15px; font-size: 13px; line-height: 21px; position: relative; }
	.message a{ color: #1864b1; }
	.message span.close{ position: absolute; top: 5px; right: 8px; font-weight: bold; font-size: 18px; color: #b4bdb3; cursor: pointer; }
		.message span.close:hover{ color: #656d64; }

/* Tooltips */
div.tooltip{ position: absolute; background: #c7e8c5; top: 0; right: 0; max-width: 130px; font-size: 10px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; line-height: 14px; z-index: 100; padding: 8px; border-radius: 3px; }
	div.tooltip:after{ content: url('tooltip-arrow.png'); position: absolute; bottom: -7px; right: 50%; }

/* Tutorial */
.tutorial div.slide{ position: absolute; width: 100%; height: 100%; z-index: 3; left: 0; top: 0; display: none; }
	.tutorial div.bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		.tutorial .bg div{ position: absolute; }
	.tutorial div.element-header{ width: 100%; height: 45px; top: 0; left: 0; }	
	.tutorial div.element-toolbar{ width: 320px; height: calc(100% - 45px); right: 0; top: 45px;}	
	.tutorial div.element-content{ width: calc(100% - 320px); height: calc(100% - 45px); left: 0; top: 45px; }
	.tutorial div.element-logo{ width: 170px; height: 45px; left: 0; top: 0; }
	.tutorial div.element-extras{ width: 250px; height: 45px; right: 0; top: 0; }
	.tutorial div.element-menu{ width: 580px; height: 45px; left: 0; top: 0; }
	.tutorial div.opaque{ background: rgba(38,43,48,0.7); }
	.tutorial div.opaque-blue{ background: rgba(38,43,48,0.7); }

	.tutorial div.dialog-box{ width: 400px; }
	.tutorial .dialog-box h3{ font-weight: bold; font-size: 18px; line-height: 1.4em; }
	.tutorial .dialog-box div.content{ padding: 20px; }
		.tutorial .content p{ padding-top: 4px; color: #444; }
		.tutorial .content p.strong{ font-weight: bold; }
	.tutorial div.submit{ padding: 15px; border-top: #ccc 1px solid; background: #f5f5f5; text-align: right; border-radius: 0 0 4px 4px; }
	.tutorial div.slide{ display: none; }
	.tutorial .dialog-box li{ display: block; padding-top: 15px; overflow: hidden; }
	.tutorial .dialog-box .content li p{ padding-top: 0; float: left; display: inline; width: 230px; line-height: 14px; }
	.tutorial .dialog-box .content li i{ float: left; display: inline; width: 23px; height: 23px; background-color: #4e545a; border-radius: 4px; margin-right: 5px; margin-top: 1px;  background-image: url('sprite.png'); background-repeat: no-repeat; }
	.tutorial .dialog-box li strong{ display: block; }
		.tutorial .dialog-box .content li i.download{ background-position: 5px -335px; }
		.tutorial .dialog-box .content li i.select{ background-position: 7px -394px; }
		.tutorial .dialog-box .content li i.html{ background-position: 4px -454px;}
	#slide-types div.dialog-box{ top: 60px; left: 30px; }
		#slide-types div.arrow{ top: -10px; right: 40px; position: absolute; width: 30px; background-position: 0 3px; }
	#slide-toolbar div.dialog-box{ top: 60px; right: 340px; }
		#slide-toolbar div.arrow{ top: 30px; right: -8px; position: absolute; width: 15px; height: 30px; background-position: -15px 0; }
	#slide-content div.dialog-box{ top: 60px; right: 20px; width: 280px; }
		#slide-content div.arrow{ top: 30px; left: -8px; position: absolute; width: 15px; height: 30px; background-position: 0 0; }
	#slide-extras div.dialog-box{ top: 60px; right: 10px; width: 300px; }
		#slide-extras div.arrow{ top: -10px; right: 20px; position: absolute; width: 30px; background-position: 0 3px; }


div.info-menu{ width: 165px; top: 45px; left: 20px; padding: 0; box-shadow: 0 0 2px 1px rgba(0,0,0,0.2); display: none; }
	.info-menu div.arrow{ top: -8px; left: 125px; position: absolute; width: 30px; background-position: 0 3px; }
	.info-menu div.submenu{ position: relative; z-index: 5; }
	.info-menu .submenu a{ display: block; border-bottom: #eee 1px solid; padding: 8px 15px; color: #1b1c1d; text-decoration: none; }
		.info-menu .submenu a:hover{ background: #f8f8f8; color: #3781b0; }
		.info-menu .submenu a:first-child{ border-radius: 4px 4px 0 0; }
	.info-menu div.share{ overflow: hidden; padding: 10px 15px 15px 15px;  }
		.info-menu .share a{ float: left; display: inline; width: 30px; height: 30px; background: url('sprite.png') 0 -1006px no-repeat; text-indent: -5000px; margin-right: 5px; }
		.info-menu .share a.facebook{ background-position: -30px -1006px; }
		.info-menu .share a:hover{ opacity: .8; }
		.info-menu .share h3{ font-size: 12px; padding-bottom: 5px; color: #787979; }