PHP Demo Application - Source Code
/Application/View/Css/Style.css
<script type="text/javascript">
@charset "utf-8";
/* =-=-=-=-=-=-=-[Main Document]-=-=-=-=-=-=-=- */
body {
background-color: #a0a0d0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
margin: 0;
}
#ajaxBusyIndicator {
display: none;
top: 25px;
left: 25px;
position: fixed;
z-index: 9999;
background-color: #ffffff;
border: 2px solid #e0e0e0;
width: 150px;
height: 150px;
background: #ffffff url(Images/AjaxLoader.gif) no-repeat center;
}
/* =-=-=-=-=-=-=-[Top Bar]-=-=-=-=-=-=-=- */
.topBarHeading {
padding-top: 8px;
padding-left: 12px;
text-align: left;
color: #fcfcfc;
font-size: 24pt;
cursor: default;
}
.breadCrumbs {
font-size: 10pt;
margin-top: -4px;
margin-left: 14px;
margin-bottom: 18px;
color: #c0c0ff;
}
.breadCrumbs a {
color: #e0e0ff;
}
.headerBuffer {
margin-top: 100px;
}
/* =-=-=-=-=-=-=-[Navigation Menu]-=-=-=-=-=-=-=- */
#menu {
margin: -7px 0 0 3px;
padding: 0;
}
#menu li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#menu li a {
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #eaffed;
white-space: nowrap;
}
#menu li a:hover {
background: #24313C;
}
#menu li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#menu li ul li {
float: none;
display: inline;
}
#menu li ul li a {
width: auto;
background: #e0e0e0;
color: #24313C;
}
#menu li ul li a:hover {
background: #ffffc0;
}
/* =-=-=-=-=-=-=-[Filters]-=-=-=-=-=-=-=- */
.mainBlock {
position: absolute;
display: block;
margin-top: 8px;
margin-left: 220px;
*margin-left: 0px;
}
.mainBlockWindow {
display: block;
width: 800px;
margin-top: 8px;
margin-left: 0px;
}
.filter {
display: inline;
width: 800px;
background-color: #e0e0e0;
height: auto;
}
.selectFilter {
background-color: #fff;
border: 1px #000 solid;
width: 350px;
font-size: 11pt;
cursor: pointer;
}
.filterColumn {
display: inline;
}
.filterBlock {
display: block;
width: 100%;
padding: 2px 0;
background: #f0f0f0 url(Images/FilterBackground.gif) repeat-x scroll center top;
border: #cccccc #cccccc;
}
.filterSelectBlock {
float: left;
margin-right: 20px;
margin-top: -4px;
}
.filterBlock .inputText {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 0;
width: 400px;
}
.filterBlock .inputText:hover, .filterBlock .inputText:focus {
float: left;
padding: 1px 0;
border: solid 2px orange;
margin: 0;
width: 400px;
}
.filterBlock .inputNumeric {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 0;
width: 100px;
}
.filterBlock .inputNumeric:hover, .filterBlock .inputNumeric:focus {
float: left;
padding: 1px 0;
border: solid 2px orange;
margin: 0;
width: 100px;
}
.filterBlock .inputSelect {
float:left;
font-size:12px;
border:solid 1px #aacfe4;
margin: 0;
width: 405px;
}
.tableFilters {
table-layout: fixed;
border: 1px dotted #000;
background-color: #f0f6dd;
width: 800px;
margin: 4px auto;
}
.tableFilters td {
border-top: 1px dotted black;
padding: 2px 0 4px 0;
}
.tableFilters .inputText {
margin-top: 2px;
}
.tableFilters .col1 {
width: 216px;
color: #0000C0;
}
.tableFilters .col1 label {
display: block;
padding-right: 12px;
text-align: right;
}
.tableFilters .col2 {
width: 150px;
}
.tableFilters .col2 select {
width: 144px;
color: #000;
background-color: #fff;
border: 1px #c0c0c0 solid;
padding-top: 2px;
padding-bottom: 2px;
}
.tableFilters .col3 {
width: 434px;
}
.tableFilters .col4 {
width: 30px;
}
.tableFilters .col4 .closeButton {
background: url(Images/CloseButton.png);
width: 21px;
height: 21px;
font-size: 24pt;
margin-left: 4px;
cursor: pointer;
}
.tableFilters .col4 .closeButton:hover {
background: url(Images/CloseButton.png) -21px -0;
width: 21px;
height: 21px;
font-size: 24pt;
margin-left: 5px;
cursor: pointer;
}
.selectOperator {
font-size: 10pt;
color: #000;
background-color: #fff;
border: 1px #c0c0c0 solid;
padding-top: 2px;
padding-bottom: 2px;
}
/* =-=-=-=-=-=-=-[Form Elements]-=-=-=-=-=-=-=- */
.frmUpdate {
font-family: Segoe UI,Arial,sans-serif;
font-size: 11pt;
width: 100%;
}
.frmUpdate ul {
list-style: none;
margin: 0;
padding: 0;
}
.frmUpdate li {
clear: both;
}
.frmUpdate label {
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
margin-top: 4px;
}
.frmUpdate fieldset {
font-size: 12pt;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.frmUpdate hr {
clear: both;
}
.frmUpdate .form-label-left {
width: 200px;
margin-right: 20px;
text-align: left;
float: left;
font-size: 12pt;
}
.frmUpdate .readOnly {
background-color: #e0e0e0;
color: #000;
float: left;
padding: 1px 3px;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
width: 250px;
}
.frmUpdate input {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
}
.frmUpdate .inputLargeText {
width: 900px;
height: 400px;
}
.frmUpdate .radioButton {
float: left;
text-align: left;
display: block;
border: none;
}
.frmUpdate .radioButtonLabel {
float: left;
text-align: left;
display: block;
margin-top: -2px;
margin-left: 10px;
}
.frmUpdate .radioFieldset {
width: 450px;
float: left;
margin-left: 12px;
margin-bottom: 20px;
}
.frmUpdate .dualistFieldset {
width: 728px;
float: left;
margin-left: 12px;
margin-bottom: 20px;
padding: 8px;
}
.frmUpdate .labelAvailable {
background-color: #8B7D6B;
text-align: center;
width: 321px;
}
.frmUpdate .labelSelected {
background-color: #8B7D6B;
text-align: center;
width: 321px;
margin-bottom: 2px;
}
.frmUpdate .clear {
clear: both;
margin-top: 0;
}
.frmUpdate .fileName {
float: left;
margin-left: 150px;
padding-bottom: 7px;
}
.callout {
color: #f00;
float: left;
margin-left: 220px;
margin-bottom: 8px;
margin-top: 0;
width: 417px;
border-right: 4px solid white;
border-bottom: 4px solid white;
border-left: 1px solid black;
border-top: 1px solid black;
padding: 4px;
background-color: #fdfea8;
}
.calloutList {
position: relative;
margin-top: 0;
width: 400px;
padding: 4px;
}
.error ul {
margin: 10px;
padding: 8px 8px 8px 16px;
}
.inputText {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
width: 400px;
}
.inputText:hover, .inputText:focus {
float: left;
padding: 1px 0;
border: solid 2px orange;
margin: 2px 0 20px 10px;
width: 400px;
}
.inputPassword {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
width: 300px;
}
.inputPassword:hover, .inputPassword:focus {
float: left;
padding: 1px 0;
border: solid 2px orange;
margin: 2px 0 20px 10px;
width: 300px;
}
.inputNumeric {
float: left;
padding: 2px 1px;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
width: 100px;
}
.inputNumeric:hover, .inputNumeric:focus {
float: left;
padding: 1px 0;
border: solid 2px orange;
margin: 2px 0 20px 10px;
width: 100px;
}
.inputTextPopup {
font-size: 10pt;
color: #000;
background-color: #fff;
border-left: 1px #fff solid;
border-top: 1px #fff solid;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
padding-top: 2px;
padding-bottom: 2px;
width: 368px;
height: 19px;
}
.inputTextPopup:hover, .inputTextPopup:focus {
font-size: 10pt;
border: 2px orange solid;
background-color: #fefde0;
padding-top: 1px;
padding-bottom: 1px;
width: 366px;
height: 19px;
}
.inputTextPopupButton {
background-color: #f0f0f0;
color: #000;
cursor: pointer;
font-size: 8pt;
height: 28px;
width: 30px;
}
.inputSelect {
float:left;
font-size:12px;
border:solid 1px #aacfe4;
margin: 2px 0 20px 10px;
width: 405px;
}
.divDuallist1 {
display: block;
width: 320px;
float: left;
margin-left: 10px;
}
.divDuallist2 {
display: block;
width: 48px;
float: left;
margin-left: 10px;
margin-top: 117px;
}
.divDuallist3 {
display: block;
width: 320px;
float: left;
margin-left: 10px;
}
.divDuallist3_nomargin {
display: block;
width: 252px;
float: left;
margin-left: 10px;
}
.inputDuallist {
font-size: 10pt;
color: #000;
background-color: #fff;
border: 1px #fff solid;
width: 320px;
}
.inputDuallistView {
font-size: 10pt;
color: #000;
background-color: transparent;
border: 1px #fff solid;
width: 244px;
}
.inputDuallistBlock {
float: left;
margin-left: 12px;
}
.inputDuallistBottom {
vertical-align: bottom;
}
.inputDuallistMiddle {
vertical-align: middle;
}
.inputDuallistAuto {
font-size: 10pt;
color: #000;
background-color: #fff;
border-left: 1px #fff solid;
border-top: 1px #fff solid;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
padding-top: 2px;
padding-bottom: 2px;
width: 317px;
height: 19px;
}
.inputDuallistAuto:focus {
font-size: 10pt;
border: 2px orange solid;
background-color: #fefde0;
padding-top: 1px;
padding-bottom: 1px;
width: 315px;
height: 19px;
}
.formImage {
margin-left: 150px;
border-color: #fff;
border-style: solid;
border-width: 7px 7px 50px;
}
.formIcon {
margin-left: 150px;
border: none;
}
.viewRecordsButton {
background: url(Images/Buttons.png);
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
float: right;
cursor: pointer;
}
.viewRecordsButton:hover {
background: url(Images/Buttons.png) 0 -32px;
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
float: right;
cursor: pointer;
}
.viewRecordsButtonHighlight {
background: url(Images/Buttons.png) 0 -64px;
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
float: right;
cursor: pointer;
}
.viewRecordsButtonHighlight:hover {
background: url(Images/Buttons.png) 0 -96px;
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
float: right;
cursor: pointer;
}
.loginBlock {
margin-top: 24px;
}
.loginBlock .form-label {
width: 100px;
margin-right: 20px;
text-align: right;
float: left;
font-size: 12pt;
}
.loginBlock .login-result {
margin-top: 24px;
width: 565px;
overflow: hidden;
text-align: center;
font-size: 12pt;
color: #c00000;
}
.loggedInBlock {
color: #c0c0ff;
font-weight: normal;
font-size: 9pt;
position: absolute;
width: 100%;
text-align: right;
top: 76px;
z-index: -100;
}
/* =-=-=-=-=-=-=-[Results Navigator]-=-=-=-=-=-=-=- */
.flexigrid div.fbutton .add {
background: url(Images/Add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete {
background: url(Images/Delete.png) no-repeat center left;
}
.flexigrid div.fbutton .edit {
background: url(Images/Edit.png) no-repeat center left;
}
.flexigrid div.fbutton .select {
background: url(Images/Select.png) no-repeat center left;
}
.flexigrid div.fbutton .clear_sort {
background: url(Images/ClearSortColumns.png) no-repeat center left;
}
.clear {
clear: both;
}
.frontBlock {
width: 75%;
margin-top: 20%;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
background-color: #e0e0e0;
text-align: center;
font-size: 14pt;
margin-left: auto;
margin-right: auto;
padding: 24px;
line-height: 1.5em;
opacity:0.9;
}
.loginButton {
background: url(Images/Buttons.png);
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
cursor: pointer;
}
.loginButton:hover {
background: url(Images/Buttons.png) 0 -32px;
width: 184px;
height: 16px;
font-size: 8pt;
color: #fff;
padding: 8px 8px 8px 8px;
margin-top: 0;
margin-left: -2px;
margin-right: 12px;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #000 solid;
border-top: 1px #000 solid;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 1.2em;
cursor: pointer;
}
