/* Import genUI.css here, to avoid importing in every page */
@import "genUI.css";

@font-face {
    font-family: 'OpenDyslexicMono-Regular';
    src: url("OpenDyslexicMono-Regular.otf");
}

:root {
  --skillsDarkBGC:#9e649e; --skillsDarkFGC:#fff;
  --skillsLightBGC:#e7d0ec; --skillsLightFGC:#545;
}


body {
	font-family: 'Roboto', sans-serif;
	background-color:#fff; color:#888;
}

input, select { font-size: 120%; }

/* frames/overlays */
.frameInnerScroller { overscroll-behavior-x:none; /* prevent horizontal overscroll, icky. */ }


/* actionBar (header bar) */
table.actionBar { background-color:#4479a1; background-color:#2e679b; color:#fff; }

table.headerTbl { width:100%; background-color:#2e679b; border-collapse:collapse; color:#fff; user-select:none; }
table.headerTbl td { padding:16px; vertical-align:middle; white-space:nowrap; }
table.headerTbl td.headerBtn { width:1px; cursor:pointer; }
table.headerTbl td.headerTitle { font-size:20px; }
table.headerTbl td img { vertical-align:middle; height:24px; }


.inlineBtn { background-color:#7390a7; background-color:#678ba9; color:#fff; }
.inlineBtn_grey { background-color:rgba(92,92,92, 0.66); color:#fff; }
.inlineBtn .leftImg,
.inlineBtn_grey .leftImg { height:30px; margin:-5px 0 -5px -5px; vertical-align:middle; }



/*--------------
  App
----------------*/
body .vblock1.clicked { background-color:#ddd; }

.infoFloatyBox { margin:15px; padding:15px; border-radius:5px; background-color:#ee9; color:#660; }
.infoFloatyBox.instructionColor { background-color:#cbdbed; color:#445; }

.spinnerDiv { 
	background:url("/images/spinner_black.gif"); background-size:contain;
	background-position:50%; background-repeat:no-repeat; 
	height:64px; opacity:0.4; 
}

/* smaller button */
.inlineBtn.btnSmall,
.inlineBtn_grey.btnSmall { padding:10px; margin-right:5px; }
.inlineBtn.btnSmall .imgLabel,
.inlineBtn_grey.btnSmall .imgLabel { height:24px; margin:-4px 0; }

.topInfoArea { padding:15px; background-color:#cbdbed; color:#555; font-size:90%; }
.topInfoArea .inlineBtn { background-color:rgba(255,255,255, 0.99); color:#555; }
.topInfoArea .inlineBtn.clicked { background-color:rgba(200,200,200, 0.99); color:#555; }
.topInfoArea .inlineBtn .leftImg { opacity:0.66; }
/*.topInfoArea .inlineBtn .skillsColorDark { background-color:var(--skillsDarkBGC); color:var(--skillsDarkFGC) }*/
.topInfoArea.greyColor { background-color:#d3d3d3; color:#444; }
/*.topInfoArea.skillsColor { background-color:#e7d0ec; color:#545; }*/

/*body .skillsColorDark { background-color:#9e649e; color:#fff; }
body .skillsColorLight { background-color:#e7d0ec; color:#545; }*/
body .skillsColorDark { background-color:var(--skillsDarkBGC); color:var(--skillsDarkFGC) }
body .skillsColorLight { background-color:var(--skillsLightBGC); color:var(--skillsLightFGC); }


.pmBubble { display:inline-block; vertical-align:middle; background-image:url("../images/pmbubble1.png"); background-size:100% 100%; padding: 10px 15px 12px; color:#526d82; font-style:italic; xborder:solid 1px #888; }

/*--------------
  Text 
----------------*/
.fakeTextLink { color:#00f; text-decoration:underline; cursor:pointer; }



/*----------------------------------
  Main screen
------------------------------------*/
.progressVal { font-size:130%; font-weight:bold; xcolor:#77b; xbackground-color:#dde; padding:0px 5px; border-radius:3px; text-decoration:underline; }

/*table.mainNavGrid {
	width:100%;
}
table.mainNavGrid > tbody > tr > td {
	width:33%;
}

table.mainNavGrid .buttonHeaderImg { height:48px; }*/

.mainNavList .buttonHeaderImg { height:48px; }
.mainNavList .inlineBtn { display:block; margin:0; padding:9px 20px 12px; background-color:#608196; font-size:85%; width:65px; }


/*--------------
  Modal Bottom
----------------*/
.modalBtmBG { position:absolute; top:0; z-index:12; width:100%; height:100%; background-color:rgba(0,0,0, 0.66); overflow:auto; display:none; }
.modalBtmUI { position:absolute; bottom:0; z-index:12; width:100%; height:0; background-color:#fff; overflow:auto; }

/*--------------
  AFSM - almost full screen modal
----------------*/
.afsmBG { position:absolute; top:0; z-index:12; width:100%; height:100%; background-color:rgba(0,0,0, 0.66); overflow:auto; display:none; }
.afsmUI_outer { position:absolute; top:0; z-index:12; width:100%; height:100%; background-color:#transparent; overflow:auto; padding:12px; display:none; box-sizing:border-box; }
.afsmUI_inner { position:relative; width:100%; height:100%; border:solid 2px #888; border-radius:15px; background-color:#fff; color:#888; overflow:auto; xpadding:15px; box-sizing:border-box; }


/*--------------
  badgeFO - badge flyout panel
----------------*/
.badgeFO_outer {
	display:none; position:absolute; right:10px; top:70px; z-index:12; width:0;
	border:solid 2px #888; border-radius:15px; background-color:#fff; color:#888; overflow:auto; padding:15px; box-sizing:border-box;
	box-shadow: 0px 0px 40px rgba(0,0,0, 0.5);
}
.badgeFO_xBtn {  }

/*----------------------
  Top-right context menu
------------------------*/
.contextTRMenu { position:absolute; right:0; z-index:51; display:none; }
.contextTRMenu .menuItem { background-color:#eee; border:solid 1px #888; xborder-top-width:0; padding:17px 20px 17px 10px; cursor:pointer; }
.contextTRMask { position:absolute; top:0; z-index:50; width:100%; height:100%; background-color:rgba(0,0,0, 0.00); overflow:auto; display:none; }


/*----------------------
  Reading area font
------------------------*/
.readerFontSize_1 .readingContent { font-size:90%; }
.readerFontSize_2 .readingContent { font-size:100%; }
.readerFontSize_3 .readingContent { font-size:110%; }
.readerFontSize_4 .readingContent { font-size:125%; }
.readerFontSize_5 .readingContent { font-size:140%; }
.readerFontFamily_serif .readingContent { font-family:serif; }
.readerFontFamily_sans .readingContent { font-family:sans-serif; }
.readerFontFamily_dyslexic .readingContent { font-family:'OpenDyslexicMono-Regular', sans-serif; }