body
{
 background-color: #202020;
 font-family: 'Century Gothic', 'Copperplate Gothic Bold', 'Bookman Old Style', 'Franklin Gothic Medium', 'Arial Black', 'Lucida Console', Verdana, Arial, 'Lucida Grande', Sans-Serif, Artistik, Avatar;
 font-size: 1em;
 color: #E0E0E0;
 padding: 0px;
 margin: 0px;
 /* height: 100%; -- seems unnecessary -- original motivation: so that children % have something to reference -- http://www.webmasterworld.com/forum83/200.htm */
}
.small
{ font-size: 0.6em; }
.invalid
{
 background-color: #401010;
}
.sizer
{
 position: absolute;
 visibility: hidden;
 /* spaces in a text area are not empty, but they are also not non-breaking
  * so if we want our sizer to accruately compute the size needed for our 
  * text area then id needs to not collapse spaces
  */
 white-space: pre-wrap;
}
.msg
{
 position: absolute;
 z-index: 100;
 top: 0px;
 left: 0px;
 padding: 3px;
 padding-right: 16px;
 background-color: #FFFFE1;
 color: #000000;
 border-bottom: 1px solid #202020;
 visibility: hidden;
}
.msgx
{
 position: absolute;
 top: 0px;
 right: 0px;
 width: 10px;
 height: 10px;
 margin-top: 4px;
 margin-right: 4px;
 cursor: pointer;
}
.dragger
{
 position: absolute;
 top: -7px;
 left: 0px;
 height: 9px;
 width: 8.5in;
 cursor: move;
 background-image: url(widgets/dragger.gif);
}
.icoOpen
{
 position: absolute;
 right: -3px;
 top: -4px;
 width: 17px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/open.gif);
}
.icoOpen:hover { background-image: url(widgets/open..gif); }
.icoClose
{
 position: absolute;
 right: -3px;
 top: -8px;
 width: 17px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/closer.gif);
}
.icoClose:hover { background-image: url(widgets/closer..gif); }
.icoClos
{
 position: absolute;
 right: -3px;
 top: -3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/close.gif);
}
.icoClos:hover { background-image: url(widgets/close..gif); }
.icoSave
{
 position: absolute;
 left: 3px;
 top: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/save.gif);
}
.icoSave:hover { background-image: url(widgets/save..gif); }
.icoPrint
{
 position: absolute;
 left: 20px;
 top: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/print.gif);
}
.icoPrint:hover { background-image: url(widgets/print..gif); }
.icoFont
{
 position: absolute;
 left: 37px;
 top: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/font.gif);
}
.icoFont:hover { background-image: url(widgets/font..gif); }
.icoBoxLayout
{
 position: absolute;
 left: 54px;
 top: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/layout.gif);
}
.icoBoxLayout:hover { background-image: url(widgets/layout..gif); }
.icoBoxEdit
{
 position: absolute;
 left: 54px;
 top: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/edit.gif);
}
.icoBoxEdit:hover { background-image: url(widgets/edit..gif); }
.icoPageup
{
 position: absolute;
 right: 20px;
 bottom: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/pageup.gif);
}
.icoPageup:hover { background-image: url(widgets/pageup..gif); }
.icoPagedown
{
 position: absolute;
 right: 3px;
 bottom: 3px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/pagedown.gif);
}
.icoPagedown:hover { background-image: url(widgets/pagedown..gif); }
.icoGoLayout
{
 position: absolute;
 left: 0px;
 bottom: -16px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/layout.gif);
}
.icoGoLayout:hover { background-image: url(widgets/layout..gif); }
.icoGoEdit
{
 position: absolute;
 left: 0px;
 bottom: -16px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/edit.gif);
}
.icoGoEdit:hover { background-image: url(widgets/edit..gif); }
.icoNewEntry
{
 position: absolute;
 left: 17px;
 bottom: -16px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/pagedown.gif);
}
.icoNewEntry:hover { background-image: url(widgets/pagedown..gif); }
.icoReset
{
 position: absolute;
 right: 1px;
 top: 1px;
 width: 14px;
 height: 14px;
 cursor: pointer;
 background-image: url(widgets/reset.gif);
}
.icoReset:hover { background-image: url(widgets/reset..gif); }
.title
{
 font-size: 1.6em;
}
.bigtitle
{
 font-size: 2.4em;
}
.strong
{
 font-weight: bold;
}
.editable
{
 color: #CFDD95;
 cursor: pointer;
}
textarea.txt
{
 background-color: transparent; /* #101010; /* IE can't inherit */
 font-family: inherit;
 font-size: inherit;
 color: #CFDD95;
 padding: 0px;
 margin: 0px;
 border: 0px;
 position: relative;
 left: -1px;
 overflow: hidden; /* else IE will always show scrollbars */
}
textarea.invalid
{
 background-color: #401010;
}
textarea.title
{
 font-size: 1.6em;
}
textarea.bigtitle
{
 font-size: 2.4em;
}
textarea.strong
{
 font-weight: bold;
}
.dlg
{
 position: absolute;
 padding: 8px;
 border: 1px solid #6B6352;
 background-color: #404040;
 z-index: 90;
}
.gdlg
{
 position: absolute;
 padding: 8px;
 z-index: 90;
}
input.mnu
{
 background-color: #202020;
 font-family: inherit;
 font-size: inherit;
 color: #E0E0E0;
 border: 1px solid #000000;
 margin-bottom: 5px;
}
input.btn
{
 background-color: #202020;
 font-family: inherit;
 font-size: inherit;
 font-weight: bold;
 color: #E0E0E0;
 border: 1px solid #E0E0E0;
 margin-top: 5px;
}
input.btn:hover
{
 background-color: #000000;
 color: #FFFFFF;
}
input.txt
{
 background-color: transparent; /* #101010; /* IE can't inherit */
 font-family: inherit;
 font-size: inherit;
 color: #CFDD95;
 padding: 0px;
 margin: 0px;
 border: 0px;
}
input.popped
{
 background-color: transparent; /* #404040; /* IE can't inherit */
}
input.title
{
 font-size: 1.6em;
}
input.bigtitle
{
 font-size: 2.4em;
}
.tile
{
 position: absolute;
 background-color: #101010;
 border: 1px solid #6B6352;
 padding-top: 15px;
 padding-left: 3px;
 padding-right: 9px;
 padding-bottom: 3px;
 max-width: 500px;
 cursor: move;
 z-index: 1;
}
.tbar
{
 position: absolute;
 top: -3px;
 left: 0px;
 height: 9px;
 width: 100%;
 background-image: url(widgets/dragger.gif);
}
.avatar
{
 position: absolute;
 top: -7px;
 left: -7px;
 background-repeat: no-repeat;
}
.sheets
{
 position: absolute;
 padding: 0.3in;
 background-color: #101010;
 z-index: 1;
}
.pad
{
 position: relative;
}
.sht_bdr_lft
{
 position: absolute;
 left: -1px;
 width: 1px;
 height: 11in;
 background-color: #6B6352;
}
.sht_bdr_rht
{
 position: absolute;
 right: -1px;
 width: 1px;
 height: 11in;
 background-color: #6B6352;
}
.sht_bdr_btm
{
 position: absolute;
 left: -1px;
 right: -1px;
 bottom: -14px;
 height: 13px;
 border-top: 1px solid #6B6352;
 background-color: #202020; 
}
.sht_bdr_spc
{
 position: absolute;
 left: -1px;
 right: -1px;
 height: 0.1in;
 background-color: #202020; 
}
.sht_bdr_spc1
{
 position: absolute;
 left: 0px;
 right: 0px;
 height: 1px;
 top: 0px;
 background-color: #6B6352;
}
.sht_bdr_spc2
{
 position: absolute;
 left: 0px;
 right: 0px;
 height: 1px;
 bottom: 0px;
 background-color: #6B6352;
}
.box
{
 position: absolute;
 margin: 1px;
}
.boxlit
{
 position: absolute;
 border: 1px solid #404040;
 cursor: pointer;
}
.boxlit:hover
{
 border: 1px solid #ffffff;
}
.boxstill
{
 position: absolute;
 border: 1px solid #404040;
 cursor: pointer;
}
.boxmask
{
 position: absolute;
 border: 1px dotted #ffffff;
 cursor: move;
 background-image: url("widgets/nothing.gif"); /* Stops clicks from getting through in IE */
 background-repeat: no-repeat;
 z-index: 80;
}
.boxhdl
{
 position: absolute;
 width: 5px;
 height: 5px;
 border: 1px solid #dd0000;
}
.boxtl
{
 top: -9px;
 left: -9px;
 cursor: nw-resize;
}
.boxtm
{
 top: -9px;
 left: 50%;
 margin-left: -4px;
 cursor: n-resize;
}
.boxtr
{
 top: -9px;
 right: -9px;
 cursor: ne-resize;
}
.boxml
{
 top: 50%;
 margin-top: -4px;
 left: -9px;
 cursor: w-resize;
}
.boxmr
{
 top: 50%;
 margin-top: -4px;
 right: -9px;
 cursor: e-resize;
}
.boxbl
{
 bottom: -9px;
 left: -9px;
 cursor: sw-resize;
}
.boxbm
{
 bottom: -9px;
 left: 50%;
 margin-left: -4px;
 cursor: s-resize;
}
.boxbr
{
 bottom: -9px;
 right: -9px;
 cursor: se-resize;
}
.ent
{
 position: relative; /* so that gui buttons can be absolutely positioned at the bottom of the last one */
 margin-bottom: 1px;
 padding: 1px; /* fakes transparent border so that positioning doesn't change when borders are added */
}
.entlayout
{
 position: relative;
 border: 1px solid #404040;
 margin-bottom: 1px;
 cursor: pointer;
}
.entlayout:hover
{
 border: 1px solid #ffffff;
}
.entstill
{
 position: relative;
 border: 1px solid #404040;
 margin-bottom: 1px;
 cursor: pointer;
}
.entmove
{
 position: relative;
 border: 1px dotted #ffffff;
 margin-bottom: 1px;
 cursor: pointer;
}
.ghost
{
 position: absolute;
 background-image: url("widgets/ghost.png"); /* IE can't do opacity (#404040, 50% opacity) background-color: rgba(64,64,64,0.5); */
 cursor: pointer;
}
.trash
{
 position: absolute;
 cursor: pointer;
 z-index: 10;
}
.rcbox
{
 position: absolute;
 visibility: hidden;
 padding: 2px;
 padding-bottom: 4px;
 border: 1px solid #6B6352;
 background-color: #404040;
 z-index: 90;
}
.rcmask1
{
 position: absolute;
 visibility: hidden;
 top: 0px;
 left: 0px;
 background-color: transparent; /*red*/
 z-index: 89;
}
.rcmask2
{
 position: absolute;
 visibility: hidden;
 top: 0px;
 left: 0px;
 background-image: url("widgets/ghost.png"); /* IE can't do opacity (#404040, 50% opacity) background-color: rgba(64,64,64,0.5); */
 z-index: 89;
}
.rcentry
{
 padding-left: 4px;
 padding-right: 4px;
 cursor: pointer;
}
.rcentry:hover
{
 background-color: #6B6352;
 color: #202020;
}
.rchot
{
 background-color: #CFDD95;
 color: #202020;
}
.rcplain
{
 padding-left: 4px;
 padding-right: 4px;
}
.debug
{
 position: absolute;
 top: 0px;
 right: 0px;
 width: 200px;
 height: 100%;
 overflow-x: scroll;
}
.hid
{
 visibility: hidden;
}
.gone
{
 display: none;
}
.clickable
{
 cursor: pointer;
}
.clickable:hover
{
 text-decoration: underline;
}