#bodyDiv {
    width: 100%;
    min-height: 100%;
    position: relative;
    margin: 0px;          
}

body {
    margin: 0px;
    font-family: Arial,Helvetica,sans-serif;
}

img {
    border: none;
}

#menuDiv, .heading { 
    background: #f79633;
    height: 64px;
    position: relative;
    background-image: url(banner.png);
    background-position: center;
    background-position-x: 70px;
    background-repeat: no-repeat;
}

#menuDiv #menu {
    position: absolute;
    bottom: 10px;
}

.orangebutton, .greenbutton {
    font-size: xx-small;
    text-decoration: none;
    color: white;
    float: left;
    text-align: center;
    min-width: 48px;
}

.orangebutton img, .greenbutton img {
    width: 32px;
    border: none;       
}

.greenbutton {
    background: #008000;
}

.admin, .notadmin {
    display: none;
}

.topbutton {
    background: #e68b2f;
    color: white;
}

.orangebutton:hover, .topbutton:hover {
    background: #979797;
}

#mainDiv {
    background: #CCC;
    position: relative;
}

#textDiv {
    position: absolute;
    left: 100px;
    height: 100%;
    margin: 0;
    padding: 0;
}

#textDiv textarea, #merge {
    width: 350px;
    font-family: Lucida Console,Monospace,Courier New;            
    font-size: 12px;
    line-height: 13px;
    margin: 0;
    border: none;
    padding: 0;
}

.whitebutton, #statusbar, #imageDiv,
    .noselect, #menuDiv, #templateDiv,
    #menuPanel, #versionbar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea#text {
    border: none;
}

#merge {
    background: #ffffcf;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}

#mergecontrols {
    color: white;
}

#imageDiv {
    position: absolute;
    background: #CCC;
    height: 100%;
}

div.image {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}

div.image img {
    cursor: pointer;
}

#templateDiv {
    position: absolute;
    width: 100px;          
    background: white;
    overflow: auto;
    overflow-x: hidden;
}

#errorDiv {
    position: absolute;
    height: 100px;
    width: 350px;
    overflow: auto;
    color: #800;          
    background: white;
    border-top: 1px solid gray;
    bottom: 0px;
    font-family: Lucida Console,Monospace,Courier New;            
    font-size: 12px;
    line-height: 13px;
}

#errorDiv p {
    margin: 0px;
}

.error {
    color: red;
}

#styleSelect {
    text-align: left;
    border-bottom: 1px solid #ccc;
    background: #ccc;
    padding: 10px;
    font-size: small;
}

.notice {
    background: yellow;
    color: black;
    border: 1px dashed white;
    padding: 3px;
    border: 2px solid #735005;
}

.centertext {
    display: none;
}

.dialog {
    display:none;
    position: absolute;        
}

div.dialog {
    position: absolute;
    border: 2px solid #888;          
    background: white;        
    padding: 10px;
    z-index: 1003;
    display: none;
    box-shadow: 5px 5px 10px #888;
    border-radius: 5px
}

div.dialog h1 {
    color: orange;
    font-family: Tahoma,sans;       
    margin-top: 0px;
}

div.dialog {
    font-family: Tahoma,sans;
}

div.dialog input {
    font-size: large;
}
div.dialog td {
    font-size: large;
}

#filelist a {
    font-family: Tahoma;
    font-size: 10px;
    height: 80px;
    width: 80px;
    border-radius: 5px;
    background: #ccc;
    padding: 5px;
    margin: 5px;
    display: block;
    float: left;
    text-align: center;
}

#filelist a:hover {
    background: yellow;
}

#filelist a.selected {
    background: orange;
}

img#banner {
    bottom: 10px;
    position: fixed;
}

.disabled {
    color: gray;
}

.unlicensed, .subscribed {
    display: none;
}

.admin {
    display: none;
}

.premium {
    background: #ffa500;
    display: inline-block;            
    font-family: arial, sans-serif;
    font-size: 10px;
    padding: 1px;
    pointer-events: none;
    vertical-align: middle;
    line-height: 100%;
}

.image {
    position: relative;
}

.image .premium {
    position: absolute;
    opacity: 0.8;
    left: 20px;
    top: -5px;
}

#arrows {
    display: block;
    position: fixed;
    z-index: 2;
}

.centerText {
    display:none;
}

div.signin {
    background: #f79633;
}

.multiuser {
    display: none;
}

.storefiles {
    display: none;
}

div.tabbox {
    border: 2px solid orange;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 1em;
}

a.tab {
    color: orange;
    padding: 3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: Arial,Helvetica,sans-serif;
    cursor: pointer;
}

a.tab:hover {
    color: white;
    background: orange;
}

a.tabselected {
    color: white;
    background: orange;
    font-weight: bold;
}

#filelist {
    border: 1px solid gray;
    margin: 0.5em;
    width: 700px;
    height: 300px;
    overflow: auto;
}

div#filepreviewdiv {
    border: 1px solid gray;
    margin: 0.5em;
    float: left;
    width: 400px;
    height: 300px;

    overflow: hidden;
}

tbody#filelist td {
    font-size: small;
    padding: 0.8em;
}

table {
    border-spacing: 0px;
    border-collapse: collapse;
}

tr.evenRow {
    background: #ccc;
}

tr.selected {
    background: orange;
}

.upgrade{
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
	background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#306108;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
    float: right;
    margin-top: 5px;
}.upgrade:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
	background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
	background-color:#5cb811;
}.upgrade:active {
	position:relative;
	top:1px;
}

.signedin {
    display: none;
}

.topbutton {
}

.whitebutton {
    display: inline-block;
    border: 3px solid white;
    color: white;
    font-weight: bold;
    padding: 0.5em 0.5em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    margin: 5px;
    text-align: center;
}

#dragTab {
    position: absolute;
    top: 64px;
    bottom: 0;
    left: 500px;
    width: 20px;      
    cursor: e-resize;
    z-index: 3;            
}

#dragTab:hover {

}

.orange {
    background: #f79633;
}
 
.slidingPanel, .leftPanel {
    background: #f79633;
    color: white;
    padding: 1em;
    width: 300px;
    margin: 0;
    bottom: 0;
    position: absolute;
    z-index: 1000;
    font-weight: bold;
    overflow-y: auto;
    top: 64px;
}

.slidingPanel {
    display: none;
}

.leftPanel {
    left: 0;
    bottom: 0;      
}

.slidingPanel input.text {
    background: transparent;
    border: none;
    font-size: large;
    padding: 4px;
    color: white;
    width: 90%;
    background: white;
    color: black;
    opacity: 0.8;
}

.slidingPanel input.text:focus {
    opacity: 1.0;
    outline: none;
}

.slidingPanel a {
    color: white;
    font-weight: normal;
    text-decoration: none;
}

.slidingPanel a:hover {
    text-decoration: underline;
}

.whitebutton:hover {
    background: #808080;
}


div#account-div {
    text-align: right;
}

/* Styles for the help and examples pages */
div.example {
    background: #c0c0c0;
    margin-left: auto;
    margin-right: auto;
}

div.example h2 {
    background: #000080;
    padding: 3px;            
    color: white;
    margin-bottom: 0;
}

div.example h3 {
    margin-bottom: 0;
}

div.box {
    border-left: 2px solid #000080;
    border-right: 2px solid #000080;
    border-bottom: 2px solid #000080;
    padding: 0.5em;
    background: white;
}

div.head {
    text-align: right;
    margin: 0 0 0 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #f79633;
}

div.clear { clear:both; }

#loadingDiv {
    background: orange;
    font-size: 20pt;
    font-family: sans;
    height: 100%;
}

#bodyDiv {
    display: none;
}

.listView {
    border: 1px solid black;
    padding: 0.5em;
}

.listView div {
    cursor: default;
    text-decoration: underline;
}

.button {
    background: #000080;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    padding: 0.5em;
    text-decoration: none;
}

table.featurematrix {
    border-spacing: 3px;
    margin: auto;
    width: 600px;
}

.featurematrix td {
    max-width: 15em;
}

.featurematrix tr {
    border-bottom: 1px solid #ccc;
}

.featurematrix td.square {
    background: orange;
}

#shrink-warning {
    font-weight: bold;
}

#statusbar, #versionbar {
    position: absolute;
    left: 100px;
    width: 350px;
    padding: 3px;
}

#statusbar {
    bottom: 0;
    background: #f79633;
    color: white;
}

#versionbar {
    top: 0;
    background: white;
    border-bottom: 1px solid #ccc;
    padding: 10px 5px;
    line-height: 130%;
}

.red {
    background: #d22528 !important;
}

#statusbar .statusButton, #versionbar .statusButton {
    border: 3px solid white; 
    padding: 3px;
    cursor: pointer;
}

#menuPanel {
    background: #404040;
}

#menuPanel ul {
    padding: 0;
}

#menuPanel ul li {
    list-style-type: none;
    clear: both;
    padding: 10px 0px;
    font-weight: normal;
    cursor: pointer;
    padding-left: 44px;
}

#menuPanel ul li:hover {
    background: #808080;
}

#menuPanel ul li img {
    height: 36px;
    position: absolute;
    left: 16px;
}

#menuPanel ul li:first-line {
    font-size: large;
    font-weight: bold;
}

#revision-select {
    border: none;
    background: #ccc;
    font-size: 15px;
}

.slidingPanel select {
    border: 3px solid white;
    font-size: 20px;
    width: 90%;
    color: white;
}

.checkbox {

}

.spinner, .spinner-gray {
    visibility: hidden;
    height: 10px;
    background-image: url(ajax-bar.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.spinner-gray {
    background-image: url(ajax-gray.gif);
}

body.status-page {
    background: #808080;
}

body.status-page div {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    background: white;
    font-family: sans-serif;
    padding: 1em;
}

body.status-page div h1 {
    text-align: center;
}

body.status-page div input {
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    padding: 0.5em 2.0em;
}

/* Saved indicator */
.not-saved {
    background: red;
}

#merge {
    white-space: pre-wrap;
    overflow-y: auto;
}

.deleted {
    color: red;
    text-decoration: line-through;
}

.inserted {
    color: #008000;
    font-style: italic;
}

#now-editing-filename {
    background-color: #ccc;
    cursor: pointer;
}

#errorDiv {
    cursor: pointer;
}

#errorDiv p:hover {
    background: #ccc;
}

.paypal, .stripe {
    display: none;
}

.google-button {
    background: #4285f4;
    display: inline-block;
    padding: 8px 10px;
    margin: 5px;
    cursor: pointer;
    color: white;
    vertical-align: middle;
    border: 3px solid white;
    font-weight: bold;
}