/* EDIT and MANAGE and LOGIN */

#editModeHeader {
	background-color: #ff77bb;
	font-size: 1.0em;
	font-weight: bold;
	text-align: center;
	padding: 6px;
}

#debugModeHeader {
}

#manageArea {
	float: left;
	width: 25%;
	height: 600px;
	overflow: scroll;
	font-size: 0.7em;
	text-align: left;
	margin: 1em;
}
#manageArea ul {
	list-style: none;
	padding-left: 0;
}

#managePreviewFrame {
	float: right;
	border: 1px dotted black;
	width: 70%;
	height: 600px;
}

/* Edit Area */

div.editArea {
	margin: 2em;
	float: none;
	clear: both;
}

div.editArea textarea {
	width: 100%;
	height: 500px;
}

div.editArea div.buttons {
	border: 1px dotted red;
}

/* Login Box */

div.loginBox {
	text-align: center;
	margin: 24px auto 0 auto;
	padding: 0 6px 6px 6px;
	border: 1px dashed black;
	width: 180px;
	background-color: #dddddd;
	font-weight: bold;
}

div.loginBox input {
	width: 180px;
}



div.missingPart {
	width:  10px;
	height: 10px;
	border: 4px dotted red;
	background: yellow;
}

pre.css {
	text-align: left;
	font-size: 1.2em;
}

.part .editLink {
	position: relative;
	top: 15px;
	float: left;
	z-index: 1;
}


.left {
	float: left;
}

.right {
	float: right;
}

.center {
	margin-left: auto;
	margin-right: auto;
}



p.error,
p.notification {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}
p.notification {
	border: 3px dotted blue;
	color: blue;
	background-color: #eeeeff;
}
p.error {
	color: red;
	background-color: #ffeeee;
	border: 3px dotted red;
}

a.hiddenLink span {
	visibility: hidden;
	margin-top: 6px;
	margin-right: 6px;
}
a.hiddenLink:hover span {
	visibility: visible;
}

a.hiddenLink img {
	visibility: hidden;
	margin-top: 6px;
	margin-right: 6px;
}
a.hiddenLink:hover img {
	visibility: visible;
}


div.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}