default.css

html, body {
	background-color:#444;
	font-family:"Century Gothic", Helvetica, Arial, sans-serif;
	color:#ccc;
}
a {
	color:#fff;
	text-decoration: none;
}
ul {
	padding:0;
}
ul li {
	list-style:none;
	padding-left:10px;
}
.logo {
	background:url(layout/coDEsign.png);
	height:35px;
	width:150px;
	text-indent:-1000em;
	position: absolute;
	top: -1px;
	margin: 0;
}
.doc {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/*** future feature of having editing interface fadout during pause ***/
.hd, .controls, .rightnav {
	-webkit-transition: opacity ease-in-out .5s;
}
body.sleep .hd, body.sleep .rightnav { opacity:.2; }
body.sleep .controls { opacity:0; }

.holder {
	position:absolute;
	top: 35px;
	left:0;
	right: 300px;
	bottom:0;
	overflow:hidden;
}
iframe {
	overflow:auto;
}
iframe.document {
	width:100%;
	height:100%;
	border:none;
}
input.search, .showColor {
	position:absolute;
	top: 5px;
	font-size: 18px;
}
input.search {
	left: 70%;
	right: 10px;
}
.showColor {
	left: 70%;
	margin-left:-110px;
}
.queryLen {
	position:absolute;
	top:11px;
	right:32px;
	font-size:12px;
	text-align:right;
	z-index:500;
}
.hierarchy {
	position:absolute;
	top:5px;
	left:160px;
	margin:0;
	font-size:14px;
	text-transform: lowercase;
}
.hierarchy li {
	float:left;
	padding: 3px 8px;
	max-width:120px;
	text-overflow:ellipsis;
	overflow:hidden;
	border-radius:4px;
	white-space:nowrap;
	cursor: pointer;
}
.attrs {
	font-size:12px;
}
.hierarchy li:last-child {
	background-color:rgba(255,255,255,.2);
}
.colorModule {
	position:absolute;
	top: 35px;
	bottom:0;
	right:300px;
	overflow:auto;
	z-index:1000;
	background-color:#333;
	width:200px;
	font-size: 12px;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}
.colorModule .ct {
	padding: 124px 8px 0;
}
.curPrev {
    position:absolute;
    top:24px;
    left:0;
    height:100px;
    width:200px;
    background-image:url(layout/grid.png);
}
.curCol, .prevCol {
    position:absolute;
    height:100px;
    width:100px;
    top:0;
    left:0;
}
.prevCol {
    left:100px;
}
.colorInputs input {
    float:left;
    width:30px;
    margin-right:8px;
}
.colorInputs input.useAlpha {
    float:right;
}
.colorInputs input:first-child {
    clear:left;
}
.closePalette {
    position:absolute;
    top:5px;
    left:5px;
    border-radius:10px;
    background-color:#666;
    padding: 0 3px;
}
input[type="color"] {
    text-indent: -1000em;
    width:20px;
    height:20px;
    border:solid 2px #fff;
    cursor:pointer;
}
.slider {
    height:300px;
    float:left;
    margin: 15px;
}
.rightnav {
	position:absolute;
	top: 35px;
	bottom:0;
	right:0;
	overflow:auto;
	z-index:1000;
	background-color:#333;
	width:300px;
	font-size: 12px;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}
.rightnav .ct {
	padding: 0 8px;
}
.coverSheet, .grid {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
}
.gridH, .gridV {
	background-color:rgba(0,0,0,.03);
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.selectors {
	background-color: #444;
	padding-top: 1px;
	margin-top: 10px;
	border-radius: 6px;
}
.selectors li {
	padding: 5px;
	margin: 0 5px;
	border-bottom: 1px solid #333;
	position: relative;
	cursor: pointer;
}
.active {
	background-color: #666;
	border-radius: 3px;
}
.btn {
	border-radius: 4px;
	background-color: #666;
	padding: 3px 8px 6px;
	line-height: 18px;
}
.addStyle {
	float: right;
}
.newStyle {
	display: none;
}
.sheet {
	position: absolute;
	top: 5px;
	right: 5px;
	display: none;
}
.modes a {
	display:inline-block;
	padding: 4px 8px;
}
li:hover .sheet {
	display: inline;
}
.selector {
	font-weight:bold;
	color:#fff;
}
.sheets li {
	padding-top:5px;
}
.rules li {
	padding-top:0;
	padding-bottom:3px;
}
.strike {
	text-decoration: line-through;
}
.bgThumb, .bgs li, .bgs h3, .thumbText {
	-webkit-transition:all .2s ease-in-out;
}
.bgThumb {
	background-size:cover, auto;
	background-repeat:no-repeat, repeat;
	width:40px;
	height:30px;
	float:left;
	margin-top:3px;
	margin-left:-80px;
	border-radius:5px;
	margin-top:-27px;
}
.selected .bgThumb {
	width:70px;
	height:80px;
	margin-top:0;
}
.thumbBox {
	width:50%;
	height:50%;
	margin-top:15%;
	margin-left:25%;
	background-color:#ccc;
	overflow:hidden;
}
.thumbText {
	font-size:24px;
	font-family: Georgia, Times, serif;
	color:#000;
	text-align:center;
	-webkit-transform: scale(2);
	transform: scale(2);
	height:35px;
}
.selected .thumbText {
	font-size:45px;
}
.bgs li {
	padding-left:80px;
	position:relative;
	height:40px;
	overflow:hidden;
	border-radius:5px;
}
.bgs li.selected {
	padding-left:90px;
	height:135px;
	background-color:#222;
}
.bgLabel { display:none; }
.selected bgLabel { display:inline; }
.bgs h3 {
	margin-left:-30px;
	margin-bottom:5px;
	width:205px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.bgs .selected h3 {
	margin-left:-80px;
	width:245px;
}
.bgs .rem {
	top:10px;
	display:none;
	margin-top:0;
}
.bgs .selected .rem {
	display:block;
}
.bgs .edit {
	position:absolute;
	top:10px;
	right:5px;
}
.bgs .selected .edit { display:none; }
.bgControls {
	padding-top:4px;
}
.fontSearch {
	width:260px;
}

.controls, .box, .pad {
	position:absolute;
}
.controls.hover, .box.hover, .pad.hover {
	outline:none;
}
.label .meta {
	display:none;
}
.label:hover .meta {
	display:inline;
}
.label input {
	margin-top:-2px;
	height:8px;
}
.margin {
	border:dotted 1px rgba(0,0,0,.3);
}
.box {
	border:solid 1px rgba(0,0,100,.4);
	box-shadow: 0 0 5px rgb(0,0,100);
}
.pad {
	border:dotted 1px rgba(0,0,0,.3);
}
.handle {
	position:absolute;
	height:20px;
	width:20px;
	background-color:rgba(0,0,0,.3);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	-webkit-border-radius:14px;
	-moz-border-radius:14px;
	border-radius:14px;
	text-align: center;
	line-height: 18px;
	-webkit-transition:background .2s linear;
	display:none;
}
.layoutMode .layout.handle { display:block; }
.decorateMode .decorate.handle { display:block; }
.typeMode .type.handle { display:block; }

.props li {
	padding-bottom:10px;
}
.decoAdd {
	position:relative;
}
.addOptions {
	position:absolute;
	top:4px;
	left:0;
	display:none;
	background-color:#444;
	color:#fff;
	font-size:16px;
	z-index:500;
	border-radius:6px;
	padding:5px;
	box-shadow: 1px 1px 8px #000;
}
.addOptions li {
	padding: 5px 8px;
	border-radius:6px;
}
.addOptions li:hover {
	background-color:#666;
}

.inline {
	overflow:hidden;
}
.inline li {
	float:left;
	margin-right:2px;
}
.inline .remove { display:none; }
.inline li.active:hover .remove {
	display:inline-block;
	background-color:#888;
	border-radius:10px;
	padding: 1px 4px;
	line-height:10px;
	margin-left:2px;
	font-size:10px;
}
.btns li {
	padding: 4px 8px;
	background-color:#666;
	color:#000;
	cursor: pointer;
}
.btns li.active {
	background-color:#ccc;
}
.stacked li {
	margin-bottom:2px;
}
#markup {
	width:250px;
	margin-top:12px;
}

.handle:hover, .handle.drag {
	background-color:rgba(0,0,0,.5);
	outline:none;
}
.handle.drag {
	background-color:rgba(0,0,0,.8);
	box-shadow: 0 0 10px #fff;
}
.handle.right:hover, .handle.right.drag {
	cursor:e-resize;
}
.handle.bottom:hover, .handle.bottom.drag {
	cursor:s-resize;
}
.handle.top:hover, .handle.top.drag {
	cursor:n-resize;
}
.handle.left:hover, .handle.left.drag {
	cursor:w-resize;
}
.handle.top.left:hover, .handle.top.left.drag {
	cursor:move;
}
.handle.right.bottom:hover, .handle.right.bottom.drag {
	cursor:se-resize;
}
.handle.right.top:hover, .handle.right.top.drag {
	cursor:ne-resize;
}
.handle.left.bottom:hover, .handle.left.bottom.drag {
	cursor:sw-resize;
}

/* handle specific styles */
.top {
    top: 0;
}
.left {
    left: 0;
}
.bottom {
    bottom: 0;
}
.right {
    right: 0;
}
.top.left.position {
    margin-left: -10px;
    margin-top: -10px;
}
.right.bottom.margin {
    margin-right: -20px;
    margin-bottom: -20px;
}
.handle.double {
    font-size: 9px;
}
.handle.subhandle {
    background-color: rgba(0,0,0,0);
    border: none;
}
.handle.subhandle.left, .handle.subhandle.right {
    top: 15px;
    bottom: 15px;
    height: auto;
    min-height: 10px;
    width: 10px;
}
.handle.subhandle.top, .handle.subhandle.bottom {
    left: 15px;
    right: 15px;
    width: auto;
    min-width: 10px;
    height: 10px;
}
.handle.subhandle.margin.left { left: -10px; }
.handle.subhandle.margin.right { right: -10px; }
.handle.subhandle.margin.top { top: -10px; }
.handle.subhandle.margin.bottom { bottom: -10px; }

.handle .labelWrap {
	position:absolute;
	top:10px;
	left:50%;
	margin-left:-50px;
	padding-top:12px;
	z-index:1000;
}
.handle.left .labelWrap, .handle.right .labelWrap {
	top:50%;
	margin-top:-25px;
	left:10px;
	margin-left:0;
	padding-left:12px;
	padding-top:0;
}
.handle .label {
	display:block;
	background-color:#ccc;
	color:#000;
	border-radius:4px;
	padding: 4px 6px 6px;
	opacity:0;
	text-align:center;
	-webkit-transition: opacity .2s linear;
	line-height: 16px;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	box-shadow: 1px 1px 4px rgba(0,0,0,.7);
	padding-right:30px;
	white-space:nowrap;
}
.handle .property {
	font-size:10px;
	font-weight:normal;
}
.handle .value {
	display:block;
	font-weight:bold;
	font-size:18px;
}
.handle .label::after {
	content:'.';
	width:0;
	height:0;
	overflow:hidden;
	border:solid 7px transparent;
	border-bottom-color:#ccc;
	border-top-width:0;
	position:absolute;
	top:5px;
	left:50%;
	margin-left:-5px;
}
.handle.left .label::after, .handle.right .label::after {
	border-bottom-color:transparent;
	border-right-color:#ccc;
	border-top-width:7px;
	border-left-width:0;
	top:50%;
	left:5px;
	margin-left:0;
	margin-top:-5px;
}
.rem {
	position:absolute;
	background-color:#aaa;
	color:#fff;
	width:20px;
	height:20px;
	border-radius:20px;
	top:50%;
	right:5px;
	margin-top:-10px;
	line-height:20px;
	text-align:center;
	display:none;
	font-size:14px;
	font-weight:normal;
}
.rem:hover {
	background-color:#888;
}
.handle.defined .rem, .handle.selected .rem {
	display:block;
}

.handle {
	overflow:hidden;
}
.handle.defined {
	background-image: -webkit-gradient(linear, left top, right bottom, from(#66FF99), to(#66CC66));
	opacity:.4;
}
.handle.defined.left, .handle.defined.right {
	background-image: -webkit-gradient(linear, left top, right top, from(#66FF99), to(#66CC66));
}
.handle.defined.top, .handle.defined.bottom {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#66FF99), to(#66CC66));
}
.handle:hover, .handle.drag {
	overflow:visible;
	background-color:rgba(0,0,0,.3);
}
.handle:hover, .handle.drag, .handle.selected {
	box-shadow: 1px 1px 5px rgba(0,0,0,.7);
	opacity:1;
}
.handle.showLabel { 
	overflow:visible;
}
.handle.showLabel .label, .handle:hover .label, .handle.drag .label {
	opacity:1;
}


.ui-slider .ui-slider-range { display:none; }
.alphaSlider { background:red none; }
.hueSlider {
    background-image: -webkit-linear-gradient(top, 
        rgb(255, 0, 0),
        rgb(255, 0, 255),
        rgb(0, 0, 255),
        rgb(0, 255, 255),
        rgb(0, 255, 0),
        rgb(255, 255, 0),
        rgb(255, 0, 0)
    );
}