base.css

html,body{margin:0;padding:0}
body{font-family: arial, sans-serif; margin:0; background-color: #ffffff; overflow: hidden;}
input { padding: 0; margin: 0px;}
a { outline: none; }

div#header{position:relative; background: #f3f3f3; margin-bottom: 2px; }
div#header h1{height:40px;line-height:80px;margin:0; padding-left:10px; color: #79B30B}
div#toolbox{background:#f3f3f3; float:left;width:36px;margin-left:-100%;}
div#rightpanel{background:#f3f3f3; float:left;width:140px;margin-left: -140px; font-size: 9px; position: relative; }
div#wrapper{float:left;width:100%; margin-bottom: 2px; }
div#fWorkspace{margin: 0 102px 0 38px; position: absolute;}
div#footer{background: #f3f3f3; color: #dfdfdf; padding:0px; clear:left; width:100%; height: 37px;  font-size: 10px;}

.fWorkspaceExpanded {
	margin: 0 102px 0 0 !important; 
}




/* Header */
#fProjName, #fThreadName {
		
}
#hTitle {
	position: absolute;
	left: 240px;
	top: 0px;
	height: 100%;
}
#hTitle > * {
	float: left;
	margin-top: 7px;
}	
.hButton {
	padding: 0 5px 0 0;
	border: 0px;
}
#hSave {
	position: absolute;
	right: 0;
	top: 0;
}
#hSave > div, #hSave > a {
	float: left;
}
#hLoggedOut {
	
}
#hLoggedIn {
	text-align: right;
	padding: 5px 10px 0 0;
	width: 160px;
	height: 15px;
	display: none;
}



/* Text */
.fT9 {
	font: 9px verdana;
	color: #CCCCCC;
	font-weight: normal;
}
.fT12 {
	font: 12px verdana;
	color: #ffffff;
}
.fT18 {
	font: 18px verdana;
	color: #999999;
}
.fT11 {
	font: 11px verdana;
	color: #cccccc;
}

.fTI {
	font-style: italic;
}
.fTB {
	font-weight: bold;
}


.fTDim {
	color: #999999;
}

.fTsmall {
	font: bold 10px verdana;
	color: #ffffff;
}
.fTThick, .fTThickDrk {
	font-size: 32px;
	color: #4C4C4C;
	font-family: verdana;
	font-weight: bold;
}
.fTThickDrk {
	color: #333333;
}
.fTBlue {
	color: #8C92C5 !important;
}
.fTOrange {
	color: #FF6600 !important;
}
.fTThick2 {
	font-size: 18px;
	color: #999999;
	font-family: verdana;
	font-weight: bold;
}
.fLink {
	text-decoration: none;
}
.fLink:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* form elements */
.fInput {
	border: 1px solid #000000;
	background-color: #cccccc;
	padding: 3px;
	color: #2f2f2f;
}
.fOptional {
	background-color: #737373;
}
.fOptional:focus {
	background-color: #cccccc;
}	




/* Notify */
#fNotify {
	/*background: url('../images/bg_instCore.png');*/
	background-color: #4C4C4C;
	position: absolute;
	height: 30px;
	left: 39px;
	z-index: 100002;
	padding: 10px 10px 0 10px;
	margin-top: 1px;
	color: #ffffff;
	font-size: 18px;
	font-family: Verdana;
	display: none;
	opacity: 0;
}
#fNotifyRound {
	position: absolute;
	top: 0px;
	right: -7px;
}



/* EditMaster Overlay */
#fEditMasterOverlay {
	background: url('../images/bg_editMaster.png');
	position: absolute;
	z-index: 10001;
	width: 100%;
	height: 100%;
}


/* List */
.fList {
	margin: 3px 0 0 0;
	padding: 0px;
	list-style: none;
	border-top: 1px solid #666666;
}
.fList li {
	font: 9px verdana;
	padding: 3px 0 3px 0;
	color: #999999;
	border-bottom: 1px solid #666666;
}
.fList li a {
	color: inherit;
	text-decoration: none;
}
.fList li:hover {
	background-color: #333333;
	color: #ffffff;
	cursor: pointer;
}

/* Panels */
.panel {
	width: 138px;
	background-color: #f3f3f3;
	border: 1px solid #DFDFDF;
	margin-bottom: 3px;
	position: absolute;
	right: 0px;
	height: 100%;
	z-index: 10001;
}
#fRightClickMenu {
	width: 200px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-bottom: 3px;
	position: absolute;
	z-index: 10003;
	right: 0px;
}

#fRightClickMenu div a {
	font-family: verdana;
	font-size: 9px;
	color: #616DB4;
	text-decoration:none;
}
	


.fPanelItemsList {
	overflow:hidden;
	clear:left;
	position:relative;
	cursor: auto;
}

.panelItemsListCollapse {
	position: relative;
	height: -40px;
}

.panelArrowUp {
	display: none;
	height: 6px;
	background: #666666 url('../images/b_arrowUp_off.png') no-repeat top center;
	cursor: pointer;
}
.panelArrowUpHover {
	background: #333333 url('../images/b_arrowUp_over.png') no-repeat top center;
}

.panelArrowDown {
	display: none;
	height: 6px;
	background: #666666 url('../images/b_arrowDown_off.png') no-repeat top center;
	position: relative;
	bottom: 0px;
	cursor: pointer;
}
.panelArrowDownHover {
	background: #333333 url('../images/b_arrowDown_over.png') no-repeat top center;
}


.panelTitle {
	padding:4px;
	font-family: verdana;
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	background-color: #888888;
	margin-bottom: 1px;
}


.panelItem, #fRightClickMenu div {
	padding: 2px;
	padding-left:4px;
	background-color: #F4F4F4;
	font-family: verdana;
	font-size: 9px;
	color: #666666;
	
	cursor: pointer;
}

.panelItemSelected {
	background-color: #333333 !important; 
	color: #ffffff !important;
}

.fPanelItemsList div:hover, #fRightClickMenu div:hover{ 
	background-color: #E5E5E5;
}

.panelIcons {
	background-color: #F4F4F4;
	width: 100%;
	text-align: right;
	bottom: 0px;
	right: 0px;
	position: absolute;
}





/* Workspace and items inside of it */

.fWorkspace {
	border: solid 1px #dFdFdF;
	overflow: hidden;
	position: absolute;
	background-color: #ffffff;
}

.fObject {
	border: 1px solid #dfdfdf;
	background-color: #ffffff;
	position: absolute;
	text-align:center;
	/*
	-moz-box-sizing: border-box;
	box-sizing: border-box !important;
	*/
}

.fForm {
	position: absolute;
	cursor: default;
	opacity: 0.5;
}

.p1 {}
.p2 { background-color: #dfdfdf; }
.p3 { background-color: #5f5f5f; }
.p4 { background-color: #000000; }


.fText {
	background-color: #ffffff;
	background: url('../images/bg_txt01.png') 0px 1px repeat;
	position: absolute;
	font-size: 12px;
	text-align: left;
	wrap-option: softwrap;
	white-space: pre-wrap !important;
	/*outline: 5px solid #ffffff;
	outline-offset: -5px;*/
	/*
	-moz-box-sizing: border-box;
	box-sizing: border-box;*/
}
.fTextHasTxt {
	outline: 0px solid #ffffff;
	border: 1px solid transparent;
	background: url('') !important;
	color: #909090;
}


.fStateLabel {
	top: 0px;
	right: 0px;
	margin-right: -17px;
	height: 10px;
	width: 12px;
	padding: 0 2px 0 2px;
	background-color: #CFCFCF;
	color: #ffffff;
	font-size: 8px;
	position: absolute;
	text-transform: capitalize;
	font-weight: bold;
	font-family: verdana;
	letter-spacing: -1px;
}
.fLabelHolder {
	top: 50%;
	display: inline;
	position: relative;
}
.fLabel  {
	top: -6px;
	display: inline;
	font-size: 10px;
	color: #9f9f9f;
	position: relative;
}
.fLBracket{
	color: #6f6f6f;
}

div.fLabel:hover {
	color: #333333;
}


.fHighlight {
	position:absolute;
	top: 0px;
	left: 0px;
	outline: 3px solid #000000;
	outline-offset: 0px;
	text-align: left;
	width: 100%;
	height: 100%;
}

.parent {
	background-image: url('../images/bg_parent.gif');
	background-position: top right;
	background-repeat: no-repeat;
}

.selected.fObject,.selectedWorkspace, .selectedTxt {
	/*border-color: #353E6F;
	background-image: url('../images/bg_selected.gif');
	background-position: top right;
	background-repeat: no-repeat;
	*/
	border-color: #0f0f0f;
}
.selected.fForm {
	outline: 1px solid #2f2f2f;
	opacity: 1;
}
.selectedInst {
	/*border-color: #D95700;
	background-image: url('../images/bg_selectedInst.gif');*/
}
.selectedTxt {
	border: 1px solid;
}
.toBeCut {
	opacity: 0.3;
}


/*inside items */
div.selected.fInsideMaster, .selected div.fInsideMaster {
	border-color: #626FB5;
}
div.selected.fInsideInstance, .selected div.fInsideInstance{
	border-color: #FF6600;
}
div.selectedTxt.fInsideMasterText, .selected div.fInsideMasterText {
	background: url('../images/bg_txtM01.png') 0px 1px repeat;
	color: #626FB5;
}
div.selectedTxt.fInsideInstanceText, .selected div.fInsideInstanceText {
	background: url('../images/bg_txtI01.png') 0px 1px repeat;
	color: #FF6600;
}



.fForm.selected.fInsideMaster, .selected .fForm.fInsideMaster {
	outline: 1px solid #626FB5;
	opacity: 1;
}

.fForm.selected.fInsideInstance, .selected .fForm.fInsideInstance  {
	outline: 1px solid #FF6600;
	opacity: 1;
}


input[type="text"].fForm, textarea.fForm {
	border: 1px inset #cfcfcf;
}
input[type="button"].fForm, input[type="text"].fForm, select.fForm {
	width: 100px;
}



/*cursor handling*/
.cursorMove {
	cursor: move !important;	
}

div.resizable {
	cursor: auto;	
}

.cursorCrosshair {
	cursor: crosshair;
}


.pasteFillInst {
	background-color: #D95700;
	width: 100%;
	height: 100%;
	position: absolute;
	float: left;
	opacity: 1;
	z-index: 100000;
}





/**** Footer Items - separate states *****/
#fFooterOI, #fFooterText, #fFooterForm, #fFooterWorkspace {
	padding-left: 45px;
	position: absolute;
	bottom: 0px;
	display: none;
	z-index: 10003;
}
#fFooterWorkspace {
	display: block;
}



/**** Footer Items - generic classes *****/
.fFItem,.fFInstItem {
	float: left;
	bottom: 0px;
	height: 95px;
	padding-left: 10px;
}
.fFInstItem {
	left: 873px;
	height: auto;
	bottom: 0px;
	position: absolute;
}
.fFRight{
	width: 5px;
	height: 60px;
	float: left;
	background: #4c4c4c;
	background: url('../images/bg_fRight.png') no-repeat top left;
}
.fFLeft{
	width: 5px;
	height: 60px;
	float: left;
	background: #4c4c4c;
	background: url('../images/bg_fLeft.png') no-repeat top left;
}
.fFCore {
	background: #4c4c4c;
	height: 60px;
	display: inline;
	float: left;
}
.fFTop {
	height: 35px;
	bottom: 3px;
	position: relative;
}


.fFInstTop {
	height: 7px;
	width: 200px;
	background: url('../images/bg_instTop.png');
}
.fFInstCore {
	width: 190px;
	background: url('../images/bg_instCore.png');
	padding-left: 10px;
}
#fFInstItems {
	padding: 5px 0 5px 0;
}
#fFInstItems a img {
	opacity: 0.5;
	border: 0px;
}
#fFInstItems a {
	padding: 0 2px 2px 0;
}





/**** Footer Items - particulars *****/
#fFId {
	width: 100px;
}
#fFStates {
	width: 590px;
}
#fFAs {
	width: 150px;
	text-align: center;
}

#fFAs * {
	padding: 18px 1px 0 1px;
}

#fWHXYHolder {
	padding: 5px 0 0 5px;
}

#fInstCore, #fStates {
	height: 100%;
	display: inline;
	float: left;
	padding: 0 3px 0 3px;
}
#fInstCore .fIcons, #fStates .fIcons {
	padding: 4px 0px 0px 0px;
}


#fObjName, #fStateName { text-decoration: none; }

.fWSTitle {
	display: inline;
	float: left;
	padding-top: 16px;
}

#fSSize,#fSPos,#fSContents,#fSEvents,#fSTone,#fMIToggleText {
	display: inline; float: left; padding-right: 15px;
}
#fMIToggleText {
	width: 45px;
}
#fSTone {
	padding-right: 0px;
}
#fSSize {
	margin-left: 20px;
	padding-right: 20px;
}
#fSMIToggle {
	position: absolute;
	margin-top: 8px;
	left: 750px;
}
.fSCheck {
	display: inline; float: left; padding: 0 0 0 0; margin: 4px 0 0 4px;
	background: url('../images/checkbox_on.png') no-repeat top left;
	width: 18px; 
	height: 16px;
	cursor: pointer;
}
.fEditingObj div div.fSTitle {
	padding: 3px 0 0 3px !important;
}
.fEditingObj div div.fSTitle, .fSTitle {
	display: inline; float: left;
	padding: 3px 0 0 0px;
	color: #8C95C8;
	height: 17px;
	cursor: pointer;
}
.fSInputLetter {
	clear: left;
	margin: 2px 0 2px -13px;
	display: inline; float: left;
}
.fSInput {
	display: inline; float: left;
	margin-left: -1px;
}
.fSText {
	clear: left;
	margin-left: 4px;
}
.fEditingObj div div.fSInput input, .fSInput input {
	font-size: 10px; height: 15px; background-color: #626FB5; font-family: arial; border: 1px solid #3F4985; color: #ffffff;  padding: 1px; margin-left: 4px;
}
.fSOver {
	background: url('../images/fSOver.png') no-repeat;
}

/* off/unchecked state */
.fSOff div input {
	font-size: 10px; height: 15px; background-color: #FF6600; font-family: arial; border: 1px solid #CA5100; color: #ffffff;  padding: 1px; margin-left: 4px;
}
.fSOff .fSTitle {
	color: #FF6600;
}

.fSOff .fSCheck {
	background: url('../images/checkbox_off.png') no-repeat top left;
}



.fFooterLink {
	color: #ffffff;
}



.fEditable {
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 1px;
	padding-left: 2px;
	font-size: 9px;
	font-family: verdana;
}

.fEditableLabel {
	width: 65%;
	border: 1px solid #CFCFCF;
	display: inline;
	font-family: inherit;
	font-size: inherit;
}
.fEditableText{
	width: 100%;
	height: 100%;
	border: 0px;
	margin: 0px;
	background-color: #ffffff;
	position: absolute;
	font-family: inherit;
	font-size: inherit;
}




.fCenter {
	text-align: center;
	height: 14px;
	padding-top: 2px;
}


#fCBManager,#fPManager,#fEventManager,#fStateManager,#fIdeaManager,#fFormManager,#fExpAdd,#fExpAct {
	z-index: 100000;
}




#fEventManager {
	width: 238px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-bottom: 3px;
	float:right;
	top: 100px;
	left: 100px;
	position: absolute;
	
	background: #333333; color: #dfdfdf; padding:5px;
}


/* SaveLoad Manager Stuff */
#fSaveLoadManager {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 205px;
	z-index: 100001;
	display: none;
}
.fSLCore {
	background: #4c4c4c;
	padding: 20px 0px 5px 10px;
}
.fSLBottom {
	background: url('../images/bg_SL.png') no-repeat bottom left;
	height: 7px;
}
#fSLSave, #fSLLoad, #fSLLogin {
	display: none;
}
#fTaken {
	color: #333333;
	position: absolute;
	right: 43px;
	display: none;
}


/* Act */
#fExpAct {
	width: 390px;
	position: absolute;
	top: 100px;
	margin-left: 30%;
	display: none;
	cursor: move;
}
.fActCursor {
	cursor: url('../images/a_arrowFaded.png'), default;
}
.fActNone {
	opacity: 0.5;
}
#fActMouseClear,#fActKeyClear {
	display: none;
}
#fExpArrow {
	position: absolute;
	z-index: 100002;
	background: url('../images/a_arrow.png');
	width: 38px;
	height: 38px;
	display: none;
	cursor: move;
}
.fArrowL {
	background: url('../images/a_arrow_L.png') !important;
}
.fArrowR {
	background: url('../images/a_arrow_R.png') !important;
}
.fArrowDL {
	background: url('../images/a_arrow_DL.png') !important;
}
#fExpKey {
	position: absolute;
	background: url('../images/a_key.png') no-repeat right top;
	padding: 2px 50px 0 0;
	z-index: 100002;
	height: 38px;
	top: 95px;
	right: 160px;
	min-width: 100px;
	color: #CD0000;
	font-weight: bold;
	font-size: 24px;
	text-align: right;
	display: none;
}



/* Add Thread */
#fExpAdd {
	width: 390px;
	position: absolute;
	top: 100px;
	margin-left: 30%;
	display: none;
}
.fExpAddTop {
	height: 7px;
	width: 100%;
	background: url('../images/bg_TBAddTop.png');
}
.fExpAddCore {
	width: 360px;
	background: url('../images/bg_smCore.png');
	padding: 10px 15px 10px 15px;
	margin: 0px;
	font-size: 1px;
	position: relative;
}
.fExpAddBottom {
	height: 7px;
	width: 100%;
	background: url('../images/bg_TBAddBottom.png');
}


/* Idea Manager Stuff */
#fIdeaManager {
	position: absolute;
	top: 100px;
	left: 100px;
	display: none;
}
.fIMIdea {
	padding: 3px 3px 0 5px;
	margin: 0px;
	position: relative;
}
#fIMTop {
	height: 7px;
	width: 103px;
	background: url('../images/bg_imTop.png');
}

#fIMCore {
	width: 83px;
	background: url('../images/bg_smCore.png');
	padding: 0px 10px 0px 10px;
	margin: 0px;
	font-size: 1px;
	position: relative;
}

.fIMBottom {
	height: 7px;
	width: 103px;
	background: url('../images/bg_imBottom.png');
}
.fIMArrows {
	padding: 5px;
}
.fIMHeader {
	position: absolute;
	top:0px;
	right: -5px;
	width: 50px;
}


/* State Manager Stuff */
#fStateManager, #fFormManager {
	position: absolute;
	height: 80px;
	top: 100px;
	left: 100px;
	display: none;
}

.fSMLeft {
	height: 80px;
	width: 7px;
	background: url('../images/bg_smLeft.png');
	display: inline;
	float: left;
}

.fSMCore,.fFMCore {
	height: 80px;
	background: url('../images/bg_smCore.png') repeat-x;
	float: left;
	padding-right: 5px;
	padding-top: 5px;
	margin: 0px;
	font-size: 1px;
}
.fFMCore {
	padding: 10px 0 10px 0;
}
.fFMCore a {
	padding: 0 5px 0 5px;
}

.fSMRight {
	height: 80px;
	width: 7px;
	background: url('../images/bg_smRight.png');
	float: left;
}

.fSMTitle1 {
	text-align: right;
	vertical-align: bottom;
	float: left;
	margin: 2px 4px 0 0;
	width: 95px;
	height: 80px;
	position: relative;
}

#fSMStateName {
	white-space: nowrap;
	vertical-align: top;
	padding: 0px;
	margin: 0px;
}

#editAll {
	padding: 9px 10px 0 0;
}
.fSMState {
	float: left;
	padding: 0 3px 0 0;
	margin: 0px;
	width: 36px;
	text-align: center;
	vertical-align: top;
	position: relative;
}
.fSMState input,.fIMIdea input {
	position: absolute;
	left: 11px;
	bottom: -17px;
	margin: 0px;
	padding: 0px;
	width: 14px;
	height: 14px;
}
.fIMIdea input {
	left: 45px;
	top: 15px;
}

.fSMArrows {
	padding: 3px 3px 0 3px;
	width: 20px;
}
.fSMStarting {
	display: block;
	position: absolute;
	bottom: 13px;
	right: 0px;
	color: #8C95C8;
}






#fCBManager,#fPManager {
	position: absolute;
	width: 270px;
	top: 100px;
	left: 100px;
	display: none;	
}
.fCBTop {
	background: url('../images/bg_cpTop.png') no-repeat;	
	height: 7px;
}
.fCBCore,.fCBCorePaste {
	background: url('../images/bg_cpCore.png');	
	padding: 0px 10px 10px 10px;
}
.fCBCorePaste {
	background: url('../images/bg_cpCore.png');	
	padding: 20px 0 20px 0;
	text-align: center;
}
.fCBBottom {
	background: url('../images/bg_cpBottom.png') no-repeat;	
	height: 7px;
}
.fCBContents {
	display: none;
}
#CBEmpty {
	padding: 20px;
	
}
#fCBInto {
	width: 100%;
	height: 33px;
	background: url('../images/into.png') no-repeat;	
	vertical-align: middle;
	padding: 10px 0 0 70px;
	text-align: left;
	font-weight: bold;
	font-color: #cccccc;
}



/*Experience Thread Items*/
#fExpOverview {
	display: none;
	background: url('../images/bg_threadOverview.png') repeat-y;	
	position: absolute;
	z-index: 10000;
	display: none;
	margin-left: 39px;
}
.fThreadOverviewItem {
	position: absolute;
	text-decoration: none;
	cursor: move;
}
.fExpHoverText {
	padding: 3px 0 0 6px;
}
#fExpThreadBar {
	position: absolute;
	z-index: 100001;
	height: 48px;
	margin-left: 39px;
	display: none;
	background: url('../images/bg_instCore.png');
}
#fExpTBThread {
	float: left;
	padding: 10px 0 0 15px;
}
#fExpTBThread * {
	float: left;
}
#fExpTBControls {
	float: right;
	padding: 10px;
}
#fExpTBOver {
	width: 58px;
	top: 48px;
	display: none;
	position: absolute;
	text-align: center;
}
#fExpTBOver div {
	background: url('../images/bg_threadMid.png');
}
#fExpTBOver div img {
	padding: 3px 0 3px 0;
}
#fExpTBArrow {
	background: url('../images/b_threadArrow_off.png') no-repeat !important; 
	position: absolute;
	top: -47px;
	left: 17px;
	width: 28px;
	height: 10px;
}





#fTempJData {
	width: 650px;
	height: 550px;
	background-color: #ffffff;
	border: 1px solid #666666;
	margin-bottom: 3px;
	float:right;
	top: 20px;
	left: 400px;
	position: absolute;
	color: #000000; padding:5px;
}
#fTempJData textarea {
	width: 100%;
	height: 100%;
}



#cbMini{
	float: right;
	position: relative;
	width: 112px;
	height: 37px;
	background: url('../images/cbMini.png') no-repeat top right;
}