* {
  box-sizing: border-box; }

html {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  background: #23232f;
  font-size: 0.86rem; }

p, li, textarea, input, select {
  font-family: "Open Sans", sans-serif; }

p.section {
  margin-top: 3px; }

form {
  margin: 0;
  padding: 0; }

input[type=text],
input[type=number] {
  background: #222;
  color: #ddd;
  border: 1px solid #424242;
  padding: 0.3em; }

input[type=submit] {
  background: #272727;
  color: #dadada;
  padding: 0.5em 1em;
  font-size: 0.9em;
  font-weight: bold;
  border: 1px solid #2cab69; }

textarea {
  background: #222;
  color: #ddd;
  border: 1px solid #424242;
  font-size: 13px; }

a {
  color: #044454; }

a:visited {
  color: #0C5669; }

a:hover {
  color: #B00; }

a:active {
  color: #000; }

#container a.button {
  background: #272727;
  color: #dadada;
  padding: 0.5em 1em;
  font-size: 0.9em;
  font-weight: bold;
  border: 1px solid #2cab69;
  padding: 0.25em 0.8em;
  text-decoration: none;
  transition: background 0.2s; }

#container a.button:hover {
  background: #444; }

#header {
  margin: 0;
  padding: 0;
  border: 0;
  height: 61px;
  width: 100%;
  background: linear-gradient(90deg, #34ac6e 0, #3473ac 100%);
  color: #fff;
  position: relative; }

#header #hLeft {
  margin: 0;
  padding: 0;
  border: 0;
  width: 304px;
  height: 61px;
  float: left; }

#header #hRight {
  margin: 0;
  padding: 0 8px 0 0;
  height: 61px;
  float: right;
  text-align: right; }

#header #hRight p {
  margin: 0;
  padding: 0;
  line-height: 30px;
  vertical-align: bottom; }

#header #hRight form {
  margin: 0;
  padding: 0;
  display: none; }

#hLeft img {
  border: 0;
  margin: 0;
  padding: 0;
  height: 61px;
  width: 237px; }

#hLeft h1 {
  margin: 0;
  padding: 0 0 0 0.5em;
  line-height: 61px; }
  #hLeft h1 a {
    text-decoration: none;
    color: #fff; }

#mainnav {
  position: relative;
  text-align: left;
  height: 40px;
  color: #fff;
  margin: 0;
  padding: 0;
  z-index: 3; }

#mainnav a,
#menuList li a,
a.starter {
  text-decoration: none;
  display: block;
  font-weight: bold;
  color: #ccc; }

#mainnav a:hover {
  color: #fff; }

#mainnav a.n1:hover {
  background: #2d955f; }

#mainnav a.n2:hover {
  background: #2d8e65; }

#mainnav a.n3:hover {
  background: #2c886a; }

#mainnav a.n4:hover {
  background: #2c8070; }

#mainnav a.n5:hover {
  background: #2c7976; }

#menuList {
  margin: 0;
  padding: 0; }

#menuList ul {
  margin: 0;
  padding: 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); }

#menuList li {
  display: inline;
  list-style: none; }

a.starter, a.starter:visited {
  display: block;
  margin: 0;
  padding: 0;
  float: left;
  width: 120px;
  line-height: 40px;
  color: #fff;
  text-align: center; }

a.starter:hover, a.starter:active {
  color: #fff; }

.menu {
  text-align: left;
  color: #fff;
  position: absolute;
  width: 130px;
  visibility: hidden;
  padding: 0;
  margin: 0; }

.menu li a,
.menu li a:visited {
  background: #23232f;
  color: #ccc;
  display: none;
  font-weight: normal !important;
  line-height: 28px;
  width: 180px;
  margin: 0;
  padding: 0 2px 0 5px;
  border-bottom: 1px solid #111;
  z-index: 5; }

#mainnav .menu li a:hover,
#mainnav.menu li a:active {
  background: #267d50;
  color: #fff;
  z-index: 5; }

#mainnav .menu li a.admin {
  background: #3B3B3B;
  color: #FFF;
  border-top: 1px solid #000; }

#mainnav .menu li a:hover.admin {
  background: url("site/menu_arrow1.gif") 126px 7px no-repeat #a91809; }

#mainnav .menu .submenu li a {
  line-height: 20px;
  background: #C8C8C8;
  color: #000; }

#mainnav .menu .submenu li a:hover {
  background: #044454;
  color: #FFF; }

#menu1, #menu2, #menu3, #menu4, #menu5, #menu6, #menu7, #menu8 {
  width: 180px;
  z-index: 4; }

#subnav {
  background: url("site/subnav.gif") repeat-x #000;
  height: 27px;
  margin: 0;
  padding: 0 5px 0 0; }

#subnav a {
  color: #FFF;
  text-decoration: none; }

#subnav a:hover {
  color: #000;
  text-decoration: underline; }

#subnav ul {
  margin: 0;
  padding: 0; }

#subnav ul li {
  display: inline;
  line-height: 27px;
  list-style: none;
  margin-left: 1.5em; }

/*** MAIN AREA ***/
#container {
  margin: 0;
  padding: 0 0 30px 0;
  width: 100%;
  float: left;
  position: relative;
  background: #2e2e2e;
  color: #eee; }
  #container a {
    color: #84deaf; }
  #container a:hover {
    color: #e8e8e8; }

#leftCol {
  margin: 20px;
  padding: 0;
  width: 200px;
  float: left; }

#rightCol {
  margin: 5px 5px 5px 250px; }

#rightCol_full {
  margin-left: 10px; }

/* full screen column, when left column is not used */
h1 {
  font-size: 2.5em;
  position: relative; }

h2 {
  font-size: 1.3em;
  position: relative; }

h3 {
  font-size: 1.1em;
  position: relative; }

h3.section {
  margin: 3em 0 0 0; }

/*big top margin to divide page into sections */
h4 {
  font-size: 1em;
  position: relative;
  margin-bottom: 0; }

h1, h2, h3 {
  font-family: Oswald, "Droid Sans", arial, sans-serif; }

#footer {
  margin: 0;
  padding: 1em;
  width: 100%;
  min-height: 45px;
  background: #111;
  color: #F0F0F0;
  clear: left; }

#footer a,
#footer a:visited {
  color: #F0F0F0;
  background: transparent;
  text-decoration: none;
  font-weight: bold; }

#footer a:hover,
#footer a:active {
  text-decoration: underline;
  color: #84deaf; }

#footer ul {
  margin: 0;
  padding: 0; }

#footer ul li {
  display: inline;
  list-style: none;
  margin-right: 1em; }

#leftCol .feature {
  margin: 1em 0 0.1em 0;
  padding: 3px;
  background: #F5F2E7;
  border: 1px solid #CAC3A6; }

#leftCol .feature h3 {
  font-size: 1em;
  color: #002985;
  margin: 0; }

/*** CONTROL PANEL **/
.controlPanel {
  margin: 0;
  padding: 10px 0 0 0;
  width: 149px;
  position: relative;
  color: #000; }

.controlPanel h2 {
  margin: 0;
  line-height: 30px;
  color: #9e9e9e; }

ul.cpNav {
  margin: 0 0 30px 0;
  padding: 0; }

.cpNav li {
  margin: 0;
  padding: 0;
  width: 149px;
  list-style-type: none; }

.cpNav li a,
.cpNav li a:visited {
  margin: 0;
  padding: 0;
  display: block;
  line-height: 26px;
  vertical-align: middle;
  text-decoration: none;
  transition: all 0.2s; }

.cpNav li a:hover {
  background: #34ac6e;
  text-decoration: none; }

#container .cpNav li a:hover {
  color: #fff; }

.cpBottom {
  display: none;
  margin: 0;
  padding: 0;
  width: 149px;
  height: 13px;
  position: relative; }

/***** CSS 'TOOLS' **/
.clear {
  clear: both; }

.clearLeft {
  clear: left; }

.center {
  text-align: center; }

.right {
  text-align: right; }

.bb1 {
  border-bottom: 1px solid #B00; }

.bb2 {
  border-bottom: 1px solid #34ac6e; }

.bb3 {
  border-bottom: 1px solid #000; }

h2.box2 {
  background: #044454;
  line-height: 25px;
  color: #FFF;
  padding-left: 3px; }

.highlight1, .highlight1Bold, .h, .hBold, .h1 {
  color: #B00; }

/* h stands for highlight */
.highlight1Bold, .hBold {
  font-weight: bold; }

.hightlight2, .h2 {
  color: #34ac6e; }

.highlight3, .h3 {
  color: #517D04; }

.normal {
  font-weight: normal; }

.bold {
  font-weight: bold; }

.underline {
  text-decoration: underline; }

.small {
  font-size: 11px; }

.hidden {
  display: none; }

.noMargin {
  margin: 0; }

.thumb100, .thumb50, .featureCenter img.thumb100 {
  width: 100px;
  height: 100px;
  border: 1px solid #000; }

.thumb50 {
  width: 50px;
  height: 50px;
  border: 1px solid #000; }

.decorationIcon {
  width: 50px;
  height: 50px;
  border: 0; }

.thumb70 {
  width: 70px;
  height: 70px;
  border: 1px solid #000; }

.icon20, .tip, .tipSpace {
  width: 20px;
  height: 20px;
  border: 0; }

.removeRow {
  width: 20px;
  height: 20px;
  border: 0;
  float: left;
  margin-right: 5px; }

.tipSpace {
  margin-left: 15px; }

.bigButton {
  width: 120px;
  height: 62px;
  border: 0; }

.smallButton {
  width: 95px;
  height: 20px;
  border: 0; }

.edit, .editLong {
  width: 39px;
  height: 17px;
  border: 0; }

.editRemove {
  width: 53px;
  height: 17px;
  border: 0; }

.editLong {
  width: 100px; }

.infoArrow {
  width: 25px;
  height: 25px;
  border: 0;
  margin: 0 5px 0 0; }

.extendArrow {
  width: 25px;
  height: 25px;
  border: 0;
  cursor: pointer; }

.tip {
  cursor: pointer; }

.task {
  width: 145px;
  height: 30px;
  border: 0; }

/* primarily used for quote and order actions */
.addRow {
  width: 95px;
  height: 20px;
  border: 0; }

.sqlBox {
  width: 580px;
  height: 300px;
  padding: 3px;
  color: #000;
  background: #E7E2C5;
  border-color: #333;
  border-style: solid;
  border-width: 2px 1px 1px 2px; }

.pages a {
  text-decoration: none;
  font-weight: bold;
  margin-right: 8px; }

.pages a.current, .pages a:active.current {
  color: #AAA !important; }

/* used for alphabetical shortcut list */
.alphabet {
  letter-spacing: 3px; }

.alphabet a {
  text-decoration: none; }

.alphabet a:hover {
  text-decoration: underline; }

.submitDiv {
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  clear: left; }

.submitDiv input {
  position: relative; }

.notification {
  border: 1px solid #34ac6e;
  background: #155d3e;
  color: #fff;
  padding: 1em;
  margin: 1em auto 3em auto;
  width: 400px;
  box-shadow: 4px 4px 0 #232332;
  transition: all 0.3s;
  transform: translateY(-3em);
  opacity: 0.3; }
  .notification h3 {
    font-family: "Open Sans", sans-serif; }
  .notification.activate {
    transform: translateY(0);
    opacity: 1; }


.notification.bad {
    border: 1px solid #9a4234;
    background: #3016c86e;
}

#rightCol .notification h3 {
  margin: 0 0 0.5em 0;
  padding: 0 5px 0 5px;
  font-size: 1.1em;
  line-height: 29px;
  height: 29px;
  vertical-align: middle; }

.searchInterface {
  border: 1px solid #000;
  background: #E7E2C5;
  position: relative; }

/**** APPLICATION SECTIONS ***
-------------------------------*/
/* Styles for the major application sections to make them more easily identifiable.
Customers = orange / black
Suppliers = grey / yellow
Orders = green / white/blue(073848)
Quotes = yellow / purple
Products = blue / white
Users = purple / yellow */
/** Main Headings (colour is standard colour. Highlight class is also commonly used) **/
#sectionCustomer h1,
#sectionSupplier h1 {
  color: #fff;
  padding: 1em 0; }

#sectionQuote h1 {
  color: #000;
  line-height: 28px;
  background: url("site/section_quotebg.png") no-repeat 100% 0 #F8AC0A; }

#sectionProduct h1 {
  color: #FFF;
  line-height: 28px;
  background: url("site/section_productbg.png") no-repeat 100% 0 #08589C;
  margin-bottom: 0; }

#sectionOrder h1 {
  color: #FFF;
  line-height: 28px;
  background: url("site/section_orderbg.png") no-repeat 100% 0 #2D4700;
  margin-bottom: 0; }

#sectionUser h1 {
  color: #FFF;
  line-height: 28px;
  background: url("site/section_userbg.png") no-repeat 100% 0 #56102E; }

#sectionCustomer .feature {
  color: #2e2e2e;
  text-shadow: 0 0 3px #5dc7b6; }

#sectionSupplier .feature {
  color: #2e2e2e;
  text-shadow: 0 0 3px #5dc7b6; }

#sectionOrder .feature {
  color: #A2FB07; }

#sectionQuote .feature {
  color: #5D085E; }

#sectionProduct .feature {
  color: #F8AC0A; }

#sectionUser .feature {
  color: #F8AC0A; }

/**** DIV STYLES ***/
.sectionHeader {
  margin: 0;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: #1c1c23;
  border-bottom: 1px solid #444; }

.sectionHeader h2 {
  margin: 0;
  padding: 0;
  color: #b6b6b6; }

.sectionHeader img {
  width: 25px;
  height: 25px;
  border: none;
  float: left;
  margin: 0; }

.touch, .touchFill {
  margin: 0;
  padding: 0; }

.touch {
  padding: 1.5rem; }

.touchFill {
  background: #111; }

.touch p, .touch h4 {
  margin: 0 0 1em 0; }

.inner {
  margin: 0 10px 10px 5px;
  padding: 0; }

/*** TWO COLUMN SUB SYSTEM (left and right side data ***/
.leftHalf, .rightHalf {
  margin: 0;
  padding: 0;
  border: 0;
  width: 48%;
  float: left;
  position: relative; }

#rightCol .leftHalf h4, #rightCol .rightHalf h4 {
  margin: 0 0 0.5em 0; }

#rightCol .leftHalf h3,
#rightCol .rightHalf h3 {
  margin: 0 0 0.5em 0;
  font-family: "Open Sans", sans-serif;
  font-size: 1em; }

/**** LISTS ****/
ul.blank {
  margin: 0 5px 10px 0;
  padding-left: 0; }

ul.blank li {
  list-style-type: none; }

/*ul.inline {display: block;}*/
ul.inline li {
  display: block;
  float: left;
  width: 9em;
  margin-right: 5px; }

li.button a {
  display: block;
  width: 9em;
  line-height: 25px;
  background: #333;
  color: #FFF;
  border: 1px solid #000;
  text-align: center;
  text-decoration: none;
  font-weight: bold; }

li.button a:hover {
  background: #B00; }

.menuList {
  margin: 0 0 2em 0;
  padding: 0;
  width: 25em; }

.menuList li {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 250%;
  border-bottom: 1px solid #424242; }

.menuList li a {
  text-decoration: none; }

.menuList li a:hover {
  font-weight: bold; }

/**** TABLES ***/
th, td {
  text-align: left;
  vertical-align: top;
  padding: 5px; }

.solidBG {
  background: #FFF; }

.dataBorder {
  border: 1px solid #222; }

.dataBorder .header th {
  border-color: #222; }

.dataBorder th, .dataBorder td {
  border-style: solid;
  border-color: #525050;
  border-width: 0 1px 1px 0; }

.data .header th {
  background: #222;
  color: #FFF; }

.data .header2 th, .data .header2 td {
  background: #044454;
  color: #FFF;
  font-weight: bold;
  border-color: #022832; }

.data .alt {
  background: #212323; }

.data .header .null {
  background: #FFF; }

.bottomGap {
  margin-bottom: 2em; }

.data .header a, .data .header a:visited {
  color: #F2C806; }

.data .header a:hover {
  color: #ECECEC; }

.boxTable {
  background: #3a3a3a; }

#contactInfo td {
  padding-right: 2em; }

/* update detail row (hidden by default) */
.detailRow {
  background: #2a343c;
  color: #ececec;
  line-height: 150%; }

.detailRow td {
  border-bottom: 1px solid #333;
  padding: 15px; }

.detailRow strong {
  background: #000;
  padding: 4px; }

.detailRow .half {
  margin: 0;
  padding: 0;
  width: 48%;
  float: left; }

.detailRow a {
  color: #7EDAF1; }

.detailRow a:visited {
  color: #ACD5E0; }

.detailRow a:hover {
  color: #F3B668; }

/* update type icons */
td.email, td.phone, td.meeting {
  background-repeat: no-repeat;
  background-position: 99% 50%;
  background-size: 25px; }

td.email {
  background-image: url("site/admin/comm_email.png"); }

td.meeting {
  background-image: url("site/admin/comm_meeting4.png"); }

td.phone {
  background-image: url("site/admin/comm_phone3.png"); }

/*** FORM ELEMENTS **/
.text {
  background: #fff;
  color: #333; }

.requiredField {
  background: #F5A50A;
  color: #000; }

/* required form field */
/* Diag */
.text2 {
  background: #000;
  color: #FFF; }

.text3 {
  background: #444;
  color: #FFF; }

.text4 {
  background: #999;
  color: #000; }

textarea {
  width: 17em;
  height: 6em; }

.detailRow textarea {
  background: #252525;
  color: #FFF;
  width: 90%; }

.taSmall {
  height: 3em; }

/*smaller textarea*/
.taMedium {
  width: 15em;
  height: 5em; }

.taBig {
  width: 38em;
  height: 6em; }

.taHuge {
  width: 45em;
  height: 10em; }

.formLong {
  width: 17em; }

.formShort {
  width: 4em; }

.category {
  font-weight: bold;
  border-top: 1px solid #E20; }

.sub {
  margin-left: 1.5em; }

/** Floating tool tip **/
#tip {
  position: absolute;
  top: 70px;
  left: 460px;
  width: 200px;
  background: #E4E4E4;
  color: #000;
  border: 1px solid #333;
  border-width: 1px 2px 2px 1px;
  display: none; }

/**** SHORT TERM (TEMP) STYLING COPIED FROM OTHER APPS ***/
.method {
  float: left;
  width: 250px;
  height: 200px;
  border-style: solid;
  border-color: #555;
  border-width: 1px 2px 2px 1px;
  margin: 0 0.5em 0.5em 0;
  background: #F0F0F0;
  padding: 5px; }

.method h3 {
  margin: -5px -5px 0.5em -5px;
  background: #B00;
  color: #FFF;
  padding-left: 5px;
  line-height: 1.7em;
  font-size: 1.1em; }

.category {
  font-weight: bold;
  border-top: 1px solid #E20; }

.sub {
  margin-left: 1.5em; }

/*
 * RESPONSIVENESS
 * - not changing markup at this point
 * ------------------ */
@media screen and (max-width: 768px) {
  /* Single Column */
  #leftCol {
    float: none;
    margin: 2em;
    width: auto;
    text-align: center;
    border-bottom: 2px solid #9297a1; }
  #rightCol {
    margin: 2em; }
  .menubar a,
  #menuList a,
  #mainnav a,
  #menuList li a,
  a.starter {
    display: inline-block;
    width: 40%; }
  /* e.g. Recent customers on home page */
  .menuList {
    width: auto; }
  .menuList li {
    padding: 1em;
    margin: 1px; }
  .menuList li a {
    padding: 1em; }
  #menuList .home {
    display: none; }
  /* Sidebar Control Panel */
  .controlPanel {
    margin: 0 auto;
    padding: 0;
    width: auto;
    max-width: 25em;
    background: transparent; }
  .cpBottom {
    background: transparent;
    display: none; }
  .controlPanel h2 {
    background: transparent;
    border: none;
    font-size: 1.25em; }
  .cpNav li a {
    width: auto;
    line-height: normal;
    padding: 0.75em; } }