/* Burly-App Foundation Styles
//
//  A collection of standard styles applied to ALL Burly-App installs. This is lowest
//  CSS level for a Burly-App project.
//
//  * Styles which are specific to a given project should not be here; 
//    they should be placed in proj-style.css.
//
//  * Rather than changing these style rules directly, the best practice method is
//    to override them in later stylesheet by increasing the selector specificity.
//
//  == DEPRECATION NOTICE ==
//
//  * Many of the styling class methods which are defined in this file are very
//    out-of-date, and do not follow best practice conventions for the current
//    web (some sections are more than twenty years old).
//      
//  * This layer of the Burly-App CSS will be overhauled in the future to better
//    align in spirit with web development in 2021. 
*/

/*
// General Styles
//  - helpful convenience selectors
*/
.bapp .gray       { color: gray; }

.bapp .small      { font-size: xx-small; }
.bapp .medium     { font-size: x-small; }
.bapp .large      { font-size: medium; }
    
.bapp .ctl        { font-family: geneva, arial, monospace; }
.bapp .mono       { font-family: monospace; }
.bapp .msg        { font-family: helvetica, arial, monospace; }
    
.bapp .bold       { font-weight: bold; }
.bapp .lighter    { font-weight: lighter; }
    
.bapp .indent     { text-indent: 1.33em; }
.bapp .inset      { margin-left: 1.33em; }

.bapp .center     { text-align: center; }
.bapp .left       { text-align: left; }
.bapp .right      { text-align: right; }
.bapp .nowrap     { white-space: nowrap; }

.bapp .fltleft    { float: left; }
.bapp .fltright   { float: right; }
.bapp .clrleft    { clear: left; }
.bapp .clrright   { clear: right; }
.bapp .clear,
.bapp .clr,
.bapp .clrboth    { clear: both; }

.bapp .hidden     { display: none; background: none;}

.bapp .nounder    {text-decoration: none; color: inherit;}

.bapp .inline     { display: inline-block; }
.bapp.platform-msie .inline {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

/*
// Basal UI Elements
//  - low level shared UI elements
*/
.bapp hr.noshade {
    border-width: 0;
    height: 2px;
    color: gray;
    background-color: gray;
}
.bapp hr.thin {
    border-width: 0;
    border-bottom: 1px solid;
}

.bapp ul.inline-menu {
    list-style-type: none;
    padding-left: 0;
}
.bapp ul.inline-menu li {
    display: inline;
	margin: 0.33em 0.66em;
}
.bapp ul.inline-menu li.selected {
    font-weight: bold;
}

/*
// Application Outputs
*/
.bapp .app-head {
    width: 85%;
	margin: 0.33em auto 0.99em auto;
}
.bapp .app-content {
    margin-top: 0.66em;
}
.bapp .app-menu {
    width: 100%;
    text-align: right;
    font-family: sans-serif;
    font-size: x-small;
    margin: 0.33em;
}
.bapp .app-menu ul {
    display: inline;
    padding: 0;
}
/* ul#main-menu { } */
/* ul#user-menu { } */
.bapp #user-menu {
	position: fixed;
	height: 14px;
	margin: 0;
	top: 0;
	left: 0;
	right: 0;
	background: #efefef;
	z-index: 10000;
}
.bapp #user-menu #user-handle {
	font-size: larger;
}
/* main.user-menu is set if both user is logged in and user menu is active */
.bapp #app-main.user-menu {
	margin-top: 21px;
}
/* ul#staff-menu { } */
/* ul#sys-menu { } */
/* ul#app-menu { } */
.bapp #app-foot pre.debug {
    border-top: 1px dotted gray;
    overflow-y: scroll;
    min-height: 200px;
    max-height: 500px;
    background-color: #efefef;
    padding: 0.33em;
    white-space: pre-wrap;
}
.bapp #app-msg {
    font-family: sans-serif;
    color: black;
    border: 1px solid blue;
    background-color: #b4d1ec;
    padding: 0.33em 1.33em;
    margin: 0.33em auto;
    width: 66%;
}
.bapp #app-err {
    font-family: sans-serif;
    border: 1px solid red;
    background-color: #ffffe6;
    padding: 0.33em 1.33em;
    margin: 0.33em auto;
    width: 66%;
}
.bapp #app-err img {
    padding-right: 0.66em;
}
.bapp #app-err ul {
    margin: 0;
}
/*
// App Views
//  * helpful layout wrappers
*/
.bapp .app-main {
    margin: 0 auto;
    width: 753px;
    text-align: left;
}
.bapp .app-main h1,
.bapp .app-main h2,
.bapp .app-main h3,
.bapp .app-main h4 {
    font-family: sans-serif;
}
.bapp .layout {
    margin: 0 1.33em;
/*  border: 1px dotted gray; */
}
.bapp .layout p {
    margin: 0.33em 0;
}
.bapp .layout label.hidden {
    display: none;
}
.bapp .layout label {
    font-weight: bold;
    font-family: helvetica, arial, monospace;
    display: block;
    margin-top: 0.66em;
    width: auto;
    font-size: x-small;
}
.bapp .layout label.faint {
    font-weight: 500;
}
.bapp .layout label.selection {
    font-size: xx-small;
}
.bapp .layout label.inline {
    display: inline-block;
}
.bapp.platform-msie .layout label.inline {
    zoom: 1;
    *display: inline;
}
.bapp .layout .staticval label {
    display: inline-block;
    text-indent: 1.33em;
}
.bapp.platform-msie .layout .staticval label {
    zoom: 1;
    *display: inline;
}
.bapp .layout .staticval {
    color: black;
}
.bapp .layout .staticval strong {
    color: black;
    font-size: small;
}
.bapp .layout .fldhelp,
.bapp .layout .msgval {
    color: gray;
    font-style: italic;
    font-size: x-small;
}
.bapp .flderr {
    border: 2px groove red;
}
.bapp .button {
	padding-top: 5px;
	display: inline-block;
	width: 127px;
	height: 19px;
	font-family: sans-serif;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	background-color: #efefef;
	border: 2px inset #231f20;
}
.bapp.platform-msie.button {
    zoom: 1;
    *display: inline;
}
.bapp .app {
    width: 487px;
    background-color: #ddd;
    border: 1px solid gray;
    padding: 1.33em;
}
.bapp .app p.title {
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
}
.bapp .app .uval {
    display: inline-block;
    width: 233px;
    padding: 3px;
    background-color: #efefef;
}
.bapp.platform-msie .app .uval {
    zoom: 1;
    *display: inline;
}
.bapp .app img {
    border: none;
}
/*
// App Table Views
//  - data tables
*/
.bapp table.data-app {
    margin: 0.66em 0;
    border: 0;
}
.bapp table.data-app caption {
    background-color: #ddd;
    font-weight: bold;
    margin-top: 0.33em;
    padding: 3px 0;
    border: 1px solid gray;
}
.bapp table.data-app tbody {
    font-family: arial, helvetica, sans-serif;
    font-size: x-small;
}
.bapp table.data-app .menu {
    padding-right: 0.66em;
    text-align: right;
}
.bapp table.data-app tr.row {
    line-height: 0.66em;
}
.bapp table.data-app tr.row td {
    border: 0;
    border-bottom: 1px solid #eee;
}
.bapp table.data-app tr.row td.menu {
    border-right: 1px solid #eee;
    width: 40px;
}
.bapp table.data-app tr.row td.menu ul {
    list-style-type: none;
}
.bapp table.data-app tr.row td.menu ul li {
    display: inline-block;
}
.bapp.platform-msie table.data-app tr.row td.menu ul li {
    zoom: 1;
    *display: inline;
}
/*
// App Form Views
//  - helpful html form construction
*/
.bapp .form-app {
    position: relative;
    z-index: 1;
/*  padding: 0 1.66em 0.66em 1.66em; */
/*  background-color: #fff; */
}
.bapp .form-app fieldset {
    font-family: helvetica, arial, monospace;
    background-color: #ddd;
    padding-bottom: 0.66em;
}
.bapp .form-app fieldset+fieldset {
    margin-top: 0.66em;
}
.bapp .form-app fieldset legend {
    padding: 3px 1.33em 1px 1.33em;
    font-weight: bold;
    background-color: #ddd;
    border: 1px solid gray;
    border-bottom: 0;
    position: absolute;
    top: -19px;
    z-index: 100;
}
.bapp .form-app input[type=text],
.bapp .form-app input[type=password]{
    padding: 2px;
    margin-bottom: 2px;
}
.bapp .form-app div.horiz-inline div {
    margin: 0.33em 0;
}
.bapp .form-app table.data-app {
    border: 0;
    padding: 0;
    margin: 0;
    margin-top: 0.33em;
}
/*
// Iconography
*/
.bapp div.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 0;
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.bapp.platform-msie div.icon {
    zoom: 1;
    *display: inline;
}
.bapp div.icon[class~='AJAX'] {
    background-image: none;
}
.bapp div.icon[class~='AJAX'].loading {
    background-image: url(/images-app/ajax-loader.gif); /* animated loading indicator */
}
.bapp div.icon[class~='USER'],
.bapp div.icon[class~='STAFF'],
.bapp div.icon[class~='SYSOP'] {
    background-image: url(/images-app/user.gif);
}
.bapp div.icon[class~='GROUP'] {
    background-image: url(/images-app/group.gif);
}
.bapp div.icon[class~='DOC'] {
    background-image: url(/images-app/doc.gif);
}
.bapp div.icon[class~='PIC'],
.bapp div.icon[class~='PIC-1'] {
    background-image: url(/images-app/photo.png);
}
.bapp div.icon[class~='PIC-2'] {
    background-image: url(/images-app/photos.png);
}
.bapp div.icon[class~='TRUE'] {
    background-image: url(/images-app/bullet_green.png);
}
.bapp div.icon[class~='FALSE'] {
    background-image: url(/images-app/bullet_white.png);
}
.bapp div.icon[class~='ADD'] {
    background-image: url(/images-app/add.png);
}
.bapp div.icon[class~='DELETE'] {
    background-image: url(/images-app/delete.png);
}
.bapp div.icon[class~='THUMB-UP'] {
    background-image: url(/images-app/thumb_up.png);
}
.bapp div.icon[class~='THUMB-DN'] {
    background-image: url(/images-app/thumb_down.png);
}
.bapp div.icon[class~='STAR'] {
    background-image: url(/images-app/star.png);
}
.bapp div.icon[class~='WORLD-GO'] {
    background-image: url(/images-app/world_go.png);
}
.bapp div.icon[class~='SHARE'] {
    background-image: url(/images-app/share.png);
}
.bapp div.icon[class~='COPY'] {
    background-image: url(/images-app/copy-link.png);
}
.bapp div.icon[class~='CHECK'] {
    background-image: url(/images-app/check.png);
}