/* Start of HTML5 Boiler Plate to reset user browser configurations or cross browser discrepencies etc. */
html {overflow-y: scroll; height:100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
body{line-height: 1; text-align:center; /* Centers in IE */}
ol, ul{list-style: none;}
blockquote, q{ quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content: ''; content: none;}
table{border-collapse: collapse; border-spacing: 0;}
/* End of Boiler Plate */
/* Generic / Miscellaneous Pages */
*
{
font-family: "Arial", sans-serif;
text-align:left;
}
.centreAlign /* Used to centrally align specific elements */
{
display:block; /* In most cases, elements using this class require block displaying in order to make text aligning have an affect */
text-align:center;
}
.errorText /* Used for displaying Error Messages */
{
color:#AA3333;
font-weight:bold;
text-align:center;
}
.successText /* Used for displaying Success Messages */
{
color:#33AA33;
font-weight: bold;
text-align:center;
}
body#notLogin /* Normal layout */
{
margin-top:2px;
margin-left:auto;
margin-right:auto;
border: solid 1px #767676;
}
body /* layout for the login page */
{
width:1260px;
background-color:#C9C9C9;
}
/* Boxes */
.boxTitle span /* Span is used to contain the "Close" button on popups */
{
right:1em; /* Gives slight spacing from the edge */
position:absolute; /* Ensures the boxes head remains centred */
}
.boxTitle span:hover /* Span is used to contain the "Close" button on popups */
{
cursor: pointer;
text-decoration:underline;
}
.box
{
border: solid 1px #767676;
margin:10px;
text-align:center;
}
.popupCenter .box /* Boxes within the popups - Such as New Repair, New Order, New Sale & Edit Customer */
{
position: relative;
width:768px;
z-index:101;
margin-left:-384px;
margin-top:100px;
}
.popupCenter /* Popup for entering data, such as New Repair, New Order, New Sale & Edit Customer */
{
top:0;
left:0;
display:none;
width:2%; /* When combined with the padding, this ensures the popup is central */
margin-left:auto;
margin-right:auto;
height:100%;
width:100%;
z-index:100;
position:fixed;
padding-left:49%;
padding-right:49%;
background-color: rgba(128,128,128,0.5);
}
.boxTitle /* The title of all boxes */
{
background-color: #27408B;
color:#FFFFFF;
padding:5px;
font-weight:bold;
text-align:center;
}
.boxTitle a /* Any links in box titles */
{
color: #FFFFFF;
text-decoration:none;
}
.boxContent /* Box contents */
{
color:#000000;
background-color:#FFFFFF;
padding:5px;
text-align:center;
font-size:13pt;
}
/* Header bar - "You are currently logged in as..." */
#headerBar
{
text-align:center;
line-height:23px; /* 25 with border */
background-color:#27408B;
color:#FFFFFF;
border: solid 1px #000000;
font-weight:bold;
}
#headerBar a, #headerBar a:visited
{
text-decoration:none;
color:#FFFFFF;
}
#headerBar a:hover
{
text-decoration:underline;
}
/* Logo */
#logoArea
{
background-color: #FFFFFF;
height:68px; /* 70 with border */
border: solid 1px #000000;
position:relative;
font-size: 4em;
font-weight:bold;
text-align:center;
color:#000000;
}
#titleOfPage{
width: 90%;
text-align:center;
}
/* Navigation */
ul
{
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: table; /* List in table formatting is used to ensure the elements expand to the edges evenly */
}
ul li
{
display: table-cell; /* To expand each element as much as possible */
text-align: center;
background-color:#FFFFFF;
font-weight:bold;
padding:0px 20px;
border: 1px solid #000000;
}
li a, li:visited
{
color:#000000;
text-decoration: none;
}
#navigationArea ul li /* Section links */
{
font-size:36pt;
height:48px;
}
#subNavigationArea ul li /* Sub-Section links */
{
height:25px;
font-size:18pt;
}
ul li:hover, ul li.currentPage /* Highlights either the current section / sub-section or the one being hovered over */
{
background-color: #27408B;
color: #FFFFFF;
}
ul li:hover a, ul li.currentPage a /* Highlights either the text of the current section / sub-section or of the one being hovered over */
{
color:#FFFFFF;
}
/* Login Page */
#loginBoxContainer /* Used to centrally align the box */
{
position:absolute;
top:50%;
left:50%;
}
#loginBox
{
float:left;
position:relative;
width:400px;
left:-200px;
top:-150px;
}
#browserError /* To house the error if the user is using a none-Opera browser */
{
background-color:#AA3333;
color:white;
display:none;
}
#browserError a, #browserError a:visited
{
color:white;
}
/* Data Table - Tables for viewing all types of data including Sales, Repairs, Customers and Orders */
table.dataTable
{
font-size: 14pt;
margin: 20px auto;
border-top: 1px solid #000000;
width: 100%;
border-bottom: 1px solid black;
}
th.dataTable
{
background-color: #27408B;
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
padding: 3px 2px;
color:#FFFFFF;
}
th.dataTable a /* Email addresses and some buttons */
{
color:#FFFFFF; /* Prevents default link colouring */
}
tr:first-child th.dataTable
{
border-bottom: 1px solid black; /* Prevent double border on tables with two header rows (Sales) */
}
tr:nth-last-child(2) th.dataTable
{
border-top: 1px solid black; /* Applies border to top of secondary table header row (Sales) */
}
.dataTable tr.dataTableRow:nth-child(odd) /* Every other row */
{
background-color:#CAE1FF;
}
td.dataTable /* Every table element - To ensure they have borders on the left and right (Above and below were identified earlier */
{
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
padding: 3px 2px;
}
td.dataTable a, #hiddenContent a, #rightOfCustomerDetail a, .boxContent a /* Content that appears when rows are selected */
{
text-decoration:none;
color:#000000;
}
td.dataTable a:hover,#hiddenContent a:hover, #rightOfCustomerDetail a:hover, .boxTitle a:hover, .boxContent a:hover /* Text within content that appears when rows are selected */
{
text-decoration:underline;
}
.tableHighlight, tr.dataTableRow:hover, .tableHighlight a, tr.dataTableRow:hover a
{
background-color: #4D71A3 !important; /* As selectors do not have a high specificity value, the !important tag is used */
color:white !important;
}
.hiddenItem /* Generic class for hiding hidden items, such as hidden inputs used to pass data between pages */
{
display:none;
}
#hiddenContent:not(input), .hiddenContent:not(input) /*Ensures hidden items at the bottom of tables are shown correctly when displayed (And also ensures they aren't displayed automatically) */
{
margin-right:-1px;
display:none;
border: 1px solid black;
border-bottom: none;
background-color: #D10000;
text-align:center;
}
th.dataTable[id^="sortable"], th.analysis[id^="sortable"] /* Table headers in the normal and analysis tables that can be sorted by */
{
cursor: pointer;
}
/* Analysis Table */
table.analysis
{
font-size: 14pt;
margin: 20px auto;
border-top: 1px solid #000000;
width: 100%;
border-bottom: 1px solid black;
}
th.analysis
{
background-color: #27408B;
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
padding: 3px 2px;
color:#FFFFFF;
border-bottom: 1px solid black; /* Prevent double border on tables with two header rows (Sales) */
}
table.analysis tr:nth-child(2) th.analysis /* Header rows */
{
font-size:10pt;
}
tr:last-child th.analysis /* When a summary row is displayed as a header row */
{
border-top: 1px solid black; /* Ensures the bottom of the table is marked */
}
tr.analysisRow:nth-child(odd) /* Every other row */
{
background-color:#CAE1FF;
}
td.analysis
{
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
padding: 3px 2px;
}
tr.analysisRow:hover
{
background-color: #565656 !important; /* As selectors do not have a high specificity value, the !important tag is used */
color:white !important;
}
/* Form */
form fieldset button[type="submit"] /* Any submit buttons on forms that use fieldsets */
{
margin-top: 5px;
margin-bottom: 5px;
display:block; /* To prevent the buttons default display mode (Inline) from ignoring margins */
margin-left: auto;
margin-right: auto;
font-size:1em;
}
form legend
{
margin-left:auto;
margin-right:auto;
padding: 5px 0px; /* Solves a webkit issue with legend margins */
font-weight:bold;
}
form label
{
width:49%; /* This, combined with the text align, makes the left hand side right align but not go past the centre point */
display:inline-block;
text-align:right;
margin-right:2%; /* Ensures there is a small gap between the left and right content */
line-height:1.5em;
vertical-align:top; /* To ensure labels for textarea are not pushed down */
}
fieldset:not(#oldCustomer):not(#newCustomer) /* Alters the gap above the customer section if skip customer is being used (And thus there is no customer details) */
{
margin-top:1em;
}
form fieldset.singleColumn /* If only a single column table is being used (Rather than " Content:Content "), it is centred */
{
margin-left:auto;
margin-right:auto;
display:inline-block;
text-align:left;
}
form /* By default, all forms have centred text */
{
text-align:center;
}
form textarea /*