/* Burly-App Styles
//
//  A collection of standard styles applied to all burly-app installs
//  * styles specific to a given project should not be here; they should be placed in
//    proj-style.css instead
//  * rather than changing these style rules override them in later stylesheet by
//    increasing the selector specificity
*/

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

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

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

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

.hidden     { display: none; }

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

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

ul.inline-menu {
    list-style-type: none;
    padding-left: 0;
}
ul.inline-menu li {
    display: inline;
	margin: 0.33em 0.66em;
}
ul.inline-menu li.selected {
    font-weight: bold;
}
/*
// Application Outputs
*/
div.app-head {
    width: 85%;
	margin: 0.33em auto 0.99em auto;
}
div.app-content {
    margin-top: 0.66em;
}
.app-menu {
    width: 100%;
    text-align: right;
    font-family: sans-serif;
    font-size: x-small;
    margin: 0.33em;
}
.app-menu ul {
    display: inline;
    padding: 0;
}
/* ul#main-menu { } */
/* ul#user-menu { } */
#user-menu {
	position: fixed;
	height: 14px;
	margin: 0;
	top: 0;
	left: 0;
	right: 0;
	background: #efefef;
	z-index: 10000;
}
#user-menu #user-handle {
	font-size: larger;
}
/* app-main.user-menu is set if bother user is logged in and user menu is active */
div#app-main.user-menu {
	margin-top: 16px;
}
/* ul#staff-menu { } */
/* ul#sys-menu { } */
/* ul#app-menu { } */
#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;
}
#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%;
}
#app-err {
    font-family: sans-serif;
    border: 1px solid red;
    background-color: #ffffe6;
    padding: 0.33em 1.33em;
    margin: 0.33em auto;
    width: 66%;
}
#app-err img {
    padding-top: 0.33em;
}
#app-err ul {
    margin: 0;
    padding: inherit;
    list-style-type: disc;
}
/*
// App Views
//  * helpful layout wrappers
*/
div.app-main {
    margin: 0 auto;
    width: 753px;
    text-align: left;
}
div.layout {
    margin: 0 1.33em;
/*  border: 1px dotted gray; */
}
div.layout p {
    margin: 0.33em 0;
}
div.layout label.hidden {
    display: none;
}
div.layout label {
    font-weight: bold;
    font-family: helvetica, arial, monospace;
    display: block;
    margin-top: 0.66em;
    width: auto;
    font-size: x-small;
}
div.layout label.faint {
    font-weight: 500;
}
div.layout label.selection {
    font-size: xx-small;
}
div.layout label.inline {
    display: inline-block;
}
.platform-msie div.layout label.inline {
    zoom: 1;
    *display: inline;
}
div.layout .staticval label {
    display: inline-block;
    text-indent: 1.33em;
}
.platform-msie div.layout .staticval label {
    zoom: 1;
    *display: inline;
}
div.layout .staticval {
    color: black;
}
div.layout .staticval strong {
    color: black;
    font-size: small;
}
div.layout .fldhelp,
div.layout .msgval {
    color: gray;
    font-style: italic;
    font-size: x-small;
}
.flderr {
    border: 2px groove red;
}
div.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;
}
.platform-msie div.button {
    zoom: 1;
    *display: inline;
}
div.app {
    width: 487px;
    background-color: #ddd;
    border: 1px solid gray;
    padding: 1.33em;
}
div.app p.title {
    margin-top: 0;
    padding-top: 0;
    font-weight: bold;
}
div.app .uval {
    display: inline-block;
    width: 233px;
    padding: 3px;
    background-color: #efefef;
}
.platform-msie div.app .uval {
    zoom: 1;
    *display: inline;
}
/*
// App Table Views
//  - data tables
*/
table.data-app {
    margin: 0.66em 0;
    border: 0;
}
table.data-app caption {
    background-color: #ddd;
    font-weight: bold;
    margin-top: 0.33em;
    padding: 3px 0;
    border: 1px solid gray;
}
table.data-app tbody {
    font-family: arial, helvetica, sans-serif;
    font-size: x-small;
}
table.data-app .menu {
    padding-right: 0.66em;
    text-align: right;
}
table.data-app tr.row {
    line-height: 0.66em;
}
table.data-app tr.row td {
    border: 0;
    border-bottom: 1px solid #eee;
}
/*
table.data-app tr.row:hover{
    background-color: #ffffe6;
}
*/
table.data-app tr.row td.menu {
    border-right: 1px solid #eee;
    width: 40px;
}
table.data-app tr.row td.menu ul {
    list-style-type: none;
}
table.data-app tr.row td.menu ul li {
    display: inline-block;
}
.platform-msie table.data-app tr.row td.menu ul li {
    zoom: 1;
    *display: inline;
}
/*
// App Form Views
//  - helpful html form construction
*/
div.form-app {
    position: relative;
    z-index: 1;
/*  padding: 0 1.66em 0.66em 1.66em; */
/*  background-color: #fff; */
}
div.form-app fieldset {
    font-family: helvetica, arial, monospace;
    background-color: #ddd;
    padding-bottom: 0.66em;
}
div.form-app fieldset+fieldset {
    margin-top: 0.66em;
}
div.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;
}
div.form-app input[type=text],
div.form-app input[type=password]{
    padding: 2px;
    margin-bottom: 2px;
}
/* div.form-app div.horiz-inline { } */
div.form-app div.horiz-inline div {
    margin: 0.33em 0;
}
div.form-app table.data-app {
    border: 0;
    padding: 0;
    margin: 0;
    margin-top: 0.33em;
}
/*
// Iconography
*/
div.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    border: 0;
    position: relative;
    cursor: pointer;
}
.platform-msie div.icon {
    zoom: 1;
    *display: inline;
}
div.icon[class~='AJAX'] {
    background-image: none;
}
div.icon[class~='AJAX'].loading {
    background-image: url(../images-app/ajax-loader.gif); /* animated loading indicator */
}
div.icon[class~='USER'],
div.icon[class~='STAFF'],
div.icon[class~='SYSOP'] {
    background-image: url(../images-app/user.gif);
}
div.icon[class~='GROUP'] {
    background-image: url(../images-app/group.gif);
}
div.icon[class~='DOC'] {
    background-image: url(../images-app/doc.gif);
}
div.icon[class~='PIC'],
div.icon[class~='PIC-1'] {
    background-image: url(../images-app/photo.png);
}
div.icon[class~='PIC-2'] {
    background-image: url(../images-app/photos.png);
}
div.icon[class~='TRUE'] {
    background-image: url(../images-app/bullet_green.png);
}
div.icon[class~='FALSE'] {
    background-image: url(../images-app/bullet_white.png);
}
div.icon[class~='ADD'] {
    background-image: url(../images-app/add.png);
}
div.icon[class~='DELETE'] {
    background-image: url(../images-app/delete.png);
}
div.icon[class~='THUMB-UP'] {
    background-image: url(../images-app/thumb_up.png);
}
div.icon[class~='THUMB-DN'] {
    background-image: url(../images-app/thumb_down.png);
}
div.icon[class~='STAR'] {
    background-image: url(../images-app/star.png);
}