quasicms/assets/css/styles.css

	/* These are all EXAMPLES -- they are meant to be updated/changed/modified */
	body { font: 12px 'Verdana', 'Arial', 'Helvetica'; }



	/* Standard HTML Form Controls */
input.button {
    border: 1px solid #A1D771;
    font: 11px 'Arial', 'Helvetica';
    font-weight: bold; background-color: #CEFD58;
}
input.button:hover {
background-color: #fff;
}

input.textbox, textarea.textbox {
    font: 1.1em 'Arial', 'Helvetica';
    width: 300px;
    background-color: #FCFDC3;
    border: 1px solid #A1D771;
    padding: 2px 3px 2px 3px;
}
textarea.textbox {
    width: 400px;
    height: 320px;
}
input.textbox:focus, textarea.textbox:focus {
    background-color: #fff;
    border-color: #A1D771;
}

select.listbox {
    font: 12px 'Arial', 'Helvetica';
    width: 208px;
    background-color: #CEFD58;
    border: 1px solid #A1D771;
}
select.listbox:focus {
    background-color: #fff;
    border-color: #A1D771;
}
a.listboxReset {
font-family: verdana, arial, helvetica;
font-size: 8pt;
text-decoration: none;
color: #337;
}
a.listboxReset:hover {
    text-decoration:
    underline;
}

	/**
	 * Various QControl-specific Styles
	 */

	/* QFileAsset */
div.fileassetDbox {
    border: 4px solid #333;
    background-color: #fff;
    padding: 20px;
    width: 400px;
    overflow: auto;
}
div.fileassetDbox h1 {
    margin: 0;
}
div.fileassetDbox input {
    padding: 3px;
    margin-right: 5px;
}

	/* QDialogBox */
div.dialogbox {
    border: 4px solid #333;
    background-color: #fff;
    padding: 20px;
    width: 400px;
    overflow: auto;
}

	/* QDateTimePicker */
span.datetimepicker { }
span.datetimepicker select {
font: 12px 'Arial', 'Helvetica';
background-color: #CEFD58;
border: 1px solid #A1D771;
}
span.datetimepicker select:focus {
background-color: #fff;
border-color: #A1D771;
}
span.datetimepicker select.month {
width: 55px;
}
span.datetimepicker select.day {
width: 45px;
margin-left: 8px;
 }
span.datetimepicker select.year {
width: 60px;
margin-left: 8px;
}
span.datetimepicker select.hour {
width: 65px;
margin-left: 12px;
margin-right: 2px;
}
span.datetimepicker select.minute {
width: 45px;
margin-left: 2px;
margin-right: 2px; }
span.datetimepicker select.second {
width: 45px;
margin-left: 2px;
}

	/* QDataGrid */
table.datagrid {
    border: 1px solid #A1D771;
}
table.datagrid caption, table.datagrid tfoot {
    padding-bottom: 4px;
    overflow: auto;
}
table.datagrid span.left {
    float: left;
    font-size: 10px;
    display: block;
}
table.datagrid span.right {
    float: right;
    font-size: 10px;
    display: block;
}
table.datagrid tr {
    background-color: #fff;
}
table.datagrid tr.alternate {
    background-color: #CEFD58;
}
table.datagrid th {
    background-color: #A1D771;
    padding: 3px 5px 3px 5px;
    text-align: left;
}
table.datagrid th a {
    color: #000;
    text-decoration: none;
}
table.datagrid th a:hover {
    color: #000;
    text-decoration: underline;
}
table.datagrid td {
    padding: 5px;
}
table.datagrid td a {
    color: #000;
}
table.datagrid td a:hover {
    color: #000;
    text-decoration: none;
}
table.datagrid tfoot {
    border-top: 1px solid #A1D771;
}

	/* QPaginator */
span.paginator {
    margin: 0;
    padding: 0;
}
span.paginator span {
    list-style-type:none; display: inline;
    padding: 0;
    margin: 0;
}
span.paginator span.page a {
    text-decoration: none;
    color: #000000;
    padding: 0 3px 0 3px;
    margin: 0 2px 0 2px;
}
span.paginator span.page a:hover {
    background-color: #ccf;
}
span.paginator span.arrow {
    font-weight: bold;
    color: #ccc; margin: 0;
    padding: 0 3px 0 3px;
}
span.paginator span.arrow a {
    font-weight: bold;
    color: #000;
    text-decoration: none;
}
span.paginator span.selected {
    font-weight: bold;
    background-color: #ccf;
    padding: 0 3px 0 3px;
    margin: 0 2px 0 2px;
    border: 1px;
    border-style: solid;
}
span.paginator span.break {
color: #666;
margin: 0 5px 0 5px;
}
span.paginator span.ellipsis {
color: #666;
}

	/* QCalendar */
	div.calendar {
    width: 200px;
    border: 1px solid #337;
    background-color: #ccf;
    }
		div.calendar div.navigator {
        background-color: #337;
        overflow: auto;
        height: 100%;
        color: #fff;
        padding: 2px 6px 2px 6px;
        }
		div.calendar div.navigator div.left {
        float: left;
        }
		div.calendar div.navigator div.month {
        float: left;
        width: 80px;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        }
		div.calendar div.navigator div.year {
        float: right;
        }
		div.calendar div.navigator div.year span {
        font-size: 11px;
        font-weight: bold;
        margin-left: 6px;
        margin-right: 6px;
        }
			div.calendar div.navigator a {
            color: #fff;
            text-decoration: none;
            }
			div.calendar div.navigator a:hover {
            text-decoration: underline;
            }
		div.calendar table {
        border: 0;
        margin-left: auto;
        margin-right: auto;
        }
			div.calendar th {
             text-align: center;
             border: 0;
             padding: 4px 2px 4px 2px;
             font-weight: bold;
             font-size: 10px;
             }
			div.calendar td {
            text-align: center;
            border-width: 0 0 1px 0;
            border-style: solid;
            border-color: black;
            padding: 0;
            }
				div.calendar td.lastRow {
                border-width: 0;
                }
				div.calendar td a {
                text-decoration: none;
                color: #000;
                display: block;
                padding: 2px 6px 2px 6px;
                }
				div.calendar td.today {
                background-color: #bbd;
                }
                
				div.calendar td.nonMonth a {
                color: #A1D771;
                }
				div.calendar td.selected {
                background-color: #c9a;
                font-weight: bold;
                }
				div.calendar td a:hover {
                background-color: #CEFD58;
                color: #000;
                }
		div.calendar div.options {
        text-align: center;
        background-color: #337;
        }
			div.calendar div.options a {
            color: #fff;
            font-size: 10px;
            text-decoration: none;
            }
			div.calendar div.options a:hover {
            text-decoration: underline;
            }

	/**
	 * Styles for Custom Render Functions as defined in QControl.class.php
	 */

	div.renderWithName {
    padding: 4px 0 4px 0;
    overflow: auto;
    height: 100%;
    }
		div.renderWithName div.left {
        float: left;
        width: 200px;
        margin-right: 25px;
        }
		div.renderWithName div.required {
        font-weight: bold;
        text-transform: uppercase;
        }
		div.renderWithName div.left span.instructions {
        font: 10px 'Verdana', 'Arial', 'Helvetica';
        color: #999; font-style: italic;
        text-transform: none;
        }

		div.renderWithName div.right { }
		div.renderWithName div.right span.error {
        margin-left: 15px;
        font: 10px 'Verdana', 'Arial', 'Helvetica';
        color: #600;
        }



	/**
	 * Form and Dashboard Draft-Specific Styles
	 * NOTE: because these are page specific, we use element IDs instead of
     *   element classes for most items here
	 * (e.g. we will never have more than one titleBar per page)
	 */

	div#titleBar {
    background-color: #535E14; /* olive green*/
    border: 1px solid #337;
    margin-bottom: 18px;
    text-align: center;
    }
		div#titleBar h2 {
/*         background-color: #535E14; /* olive green*/ */
        font: 12px 'Georgia', 'Times New Roman', 'Times';
        font-style: italic;
        font-weight: bold;
        color: #fff;
        margin: 0;
        padding: 2px 5px 2px 5px;
        float: none;
        }
    div#titleBar h2#right {
        float: right;
        font: 10px 'Verdana', 'Arial', 'Helvetica';
        font-style: normal;
        font-weight: normal;
         }
		div#titleBar h2#right a {
        color: #fff;
        text-decoration: none;
        }
		div#titleBar h2#right a:hover {
        text-decoration: underline;
        }
		div#titleBar h1 {
/*         font: 28px 'Georgia', 'Times New Roman', 'Times'; */
        font: 'Georgia', 'Times New Roman', 'Times';
        color: #fffeee;
        margin: 0;
        padding: 2px 0 2px 5px;
        font-weight: bold;
        }

	p.create { }
		p.create a {
        text-decoration: none;
        color: #337;
        font-weight: bold;
        }
		p.create a:hover {
        text-decoration: underline;
        }

div#draftList { }
div#draftList h1 {
    margin: 0;
    font: 20px 'Georgia', 'Times New Roman', 'Times';
    font-weight: bold;
}
div#draftList p {
    margin-top: 6px;
    margin-bottom: 18px;
}
/*
div#formControls {
    padding: 0 0 0 20px;
}

div#formActions {
    background-color: #A1D771;
    padding: 10px;
    height: 20px;
    margin-top: 18px;
}
div#formActions div#save {
    float: left;
}
div#formActions div#cancel {
    margin-left: 10px;
    float: left;
}
div#formActions div#delete {
    float: right;
}*/
div#dashboard { }
div#dashboard div#left {
    float: left;
    width: 20%;
    height: 1000px;
    font-size: 10px;
    color: #fff;
    background-color: #535E14;
    border: 1px double #000;
    padding: 5px;
    margin-left: 1em;
}
div#dashboard div#right {
    position: relative;
    float: left;
    margin-left: 10px;
/*     width: 760px; */
    width: 75%;
    }
div#dashboard div#right div#pnlList {
    margin-bottom: 10px;
    border: 1px solid #000;
    padding: 5px;
/*     height: 300px; */
    overflow: auto;
}
div#dashboard div#right div#pnlEdit {
    border: 1px solid #000;
    padding: 5px;
    background-color: #CEFD58;
/*     height: 240px; */
    overflow: auto;
}


#classNames {
position: relative;
border-width: 0px 1px 1px 1px;
border-style: double;
width:100%;
overflow: auto;
border-color: #224499;
}

div.className {
    font-style: bold;
    font-size: 1.2em;
    font-family: georgia, helvetica, serif;
    border-top: 2px solid gray;
    border-bottom: 2px solid black;
    border-left: 2px solid gray;
    border-right: 2px solid black; 
    padding: 2px;
    cursor: pointer;
    position: relative;
    background-color: #FFD16F;
    color: black;
}
div.className:hover {
    border-top: 2px solid black;
    border-bottom: 2px solid gray;
    border-left: 2px solid black;
    border-right: 2px solid gray;
}