/* OBJECTS */

* { margin: 0; padding: 0; }

/* http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
::selection { background: transparent; }			/* Turn off all text highlighting */
::-moz-selection { background: transparent; }
::-webkit-selection { background: transparent; }
.tblDetails::selection,
textarea::selection,
input[type=textbox]::selection,					/* re-apply for just textboxes */
input[type=text]::selection { background: #ACCD8A !important; }
.tblDetails::-moz-selection,
textarea::-moz-selection,
input[type=textbox]::-moz-selection,
input[type=text]::-moz-selection { background: #ACCD8A !important; }
.tblDetails::-webkit-selection,
textarea::-webkit-selection,
input[type=textbox]::-webkit-selection,
input[type=text]::-webkit-selection { background: #ACCD8A !important; }


html {
/*	NOTE: if we use “min-height: 100%” instead of just “height: 100%” here, then the content of
	#Body will extend beyond the height of the window, with the background expanding as well.

	http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
*/
  height: 100%;
  min-width: 985px;
  min-height: 450px;

  -webkit-touch-callout: none;		/* http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


body {
  /* height: 100%;			this causes problems when using the 'Print' tab with 'Quotes & Invoices' */
  font: 14px verdana;
  color: #444;
  /*background: #fff url("../images/bg.jpg") 0 0 repeat-x;*/
  background-color: #fff;
  cursor: default;
  overflow: hidden;
}


a, a:link, a:visited, a:active { color: #555; font-weight: bold; text-decoration: none; }
a:hover { color: #76A7DC; }


blockquote {  }


.button {
  padding: 0 15px;
  color: #fff;
  font-weight: bold;
  background-color: #808080;
  cursor: pointer;

  border: solid 1px #fff;
  border-radius: 0.3em;
  box-shadow: inset 0 0 4px #fff;				/* , 0 0 8px rgba(0,0,0,0.5) */
  -o-box-shadow: inset 0 0 4px #fff;
  -ms-box-shadow: inset 0 0 4px #fff;
  -moz-box-shadow: inset 0 0 4px #fff;
  -webkit-box-shadow: inset 0 0 4px #fff; }
.button:hover { background-color: #333; }


.checkbox, .radio { margin-right: 5px; }			/* used so the alignment becomes correct; position: absolute; */


.combobox, .listbox, .password, .textbox, .textarea {		/* the combobox are multi-row listboxes */
  font-size: 12px;
  background-color: transparent;
  color: #0055e3;
  border: 1px solid #8eb4f2;

  border-radius: 0.3em;

  box-shadow: inset 0 0 4px rgba(0,0,0,0.3); }			/* , 0 0 2px rgba(0,0,0,0.5) */
  /* all the specifics are in separate css files */
.password, .textbox { padding: 1px 3px 1px; }


h1 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: #444;
  text-decoration: underline;
  text-align: center; }

h2 {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  text-align: left; }

h3 { }


img { }


p { margin-bottom: 20px; text-align: justify; }


ul { list-style: none; }
ul li { }
ul li label, ul li span { float: left; }
ul li .lblSub { padding-left: 12px; color: #aaa; }	/* applicable @ label level; li "sub-category" */


.background { }						/* the universal background image for the project */

.even { }						/* definitions for even items in a list */
.odd {							/* definitions for odd items in a list */
  padding: 10px 0;
  border-radius: 0.5em; }

.first { width: 40px; }
.middle { width: 40px; margin-left: 2px; }
.last { width: 80px; margin-left: 2px; }
.suffix { width: 20px; margin-left: 2px; }

.date { width: 68px !important; font-size: 11px; text-align: center !important; }	/* for all textboxes used to enter dates */
.city { width: 105px; }					/* for all textboxes used to specify a city */
.state { margin-left: 3px; width: 20px; text-align: center; }		/* same as above for State */
.zip { margin-left: 3px; width: 45px; text-align: center; }		/* same as above for zip codes */
.note { color: #bbb; font-size: 10px; }			/* for any object used to enter notes */

.overlay {						/* for darkening the background for popup messages */
  display: none;
  position: fixed;					/* http://stackoverflow.com/questions/13532894/css-overlay-div-not-stretching-to-document-height */
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  opacity: 0.6;
  filter: alpha(opacity=60); }
.info {							/* general message popup */
  margin: 80px 26px 15px;
  padding: 12px 0 12px 57px;
  border: 1px solid #7ca0bf;
  background: #f0f7fa url(../images/webbooks.info.png) 15px 5px no-repeat;
  border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  overflow: auto;
  opacity: 0.8;

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.fail {							/* failure message popup */
  margin: 80px 26px 15px;
  padding: 12px 0 12px 57px;
  border: 1px solid #ff0000;
  background: #ffadad url(../images/webbooks.errs.png) 15px 5px no-repeat;
  border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  overflow: auto;
  opacity: 0.8;

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.succ {							/* success message popup */
  margin: 80px 26px 15px;
  padding: 12px 0 12px 57px;
  border: 1px solid #a9d260;
  background: #fafff1 url(../images/webbooks.succ.png) 15px 5px no-repeat;
  border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  overflow: auto;
  opacity: 0.8;

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.warn {							/* warning message popup */
  margin: 80px 26px 15px;
  padding: 12px 0 12px 57px;
  border: 1px solid #7ca0bf;
  background: #f0f7fa url(../images/webbooks.warn.png) 15px 5px no-repeat;
  border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  overflow: auto;
  opacity: 0.8;

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }




/* LAYOUT */

.page { overflow: hidden; }			/* definitions for the overall page/wrapper */
#imgPage {					/* NOTE: can't use 'background-image' as it doesn't provide the desired functionality */
  position: absolute;
  border-width: 0;
  height: 100%;					/* NOTE: this works, but can't figure out a css centering technique */
  opacity: 0.2;
  z-index: -1; }


.header {					/* definitions for the header of the page */
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 85px;
  margin-bottom: 5px;
  color: #555;
  font-weight: bold;
  overflow: hidden;

  border: 1px solid #808080;
  border-top-width: 0;
  border-bottom-right-radius: 0.5em;
  border-bottom-left-radius: 0.5em;

  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);	/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);	/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* IE10+ */
  background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.header ul li { display: inline; }
.header ul li img { margin: 2px 5px 0 8px; cursor: pointer; }


.sidebar {					/* definitions for the right-hand side bar of the page */
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -40px;
  width: 40px;
  color: #555;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  z-index: 2;

  border: 1px solid #808080;
  border-right-width: 0;
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;

  background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);	/* FF3.6+ */
  background: -webkit-gradient(linear, top right, bottom left, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);	/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* Opera 11.10+ */
  background: -ms-linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* IE10+ */
  background: linear-gradient(right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);		/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.sidebar li {
  display: inline-block;
  margin: 5px 2px 0;
  width: 30px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #808080;
  border-radius: 0.5em; }
.sidebar li img { margin-top: 4px; cursor: pointer; }
.sidebar li label {
  display: block;

  -webkit-transform: rotate(90deg) translateX(100%);			/* Safari */
  -moz-transform: rotate(90deg) translateX(100%);			/* Firefox */
  -ms-transform: rotate(90deg) translateX(100%);			/* IE */
  -o-transform: rotate(90deg) translateX(100%);				/* Opera */
  transform: rotate(90deg) translateX(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	/* Internet Explorer */

  -webkit-transform-origin: left 140%;
  -moz-transform-origin: left 140%;
  -ms-transform-origin: left 140%;
  -o-transform-origin: left 140%;
  transform-origin: left 140%; }


.footer {					/* definitions for the footer of the page */
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 85px;
  overflow: hidden;

  border: 1px solid #808080;
  border-bottom-width: 0;
  border-top-right-radius: 0.5em;
  border-top-left-radius: 0.5em;

  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);	/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);	/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);		/* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);		/* IE10+ */
  background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);		/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }
.footer ul li { display: inline; }
.footer ul li .Screens { border: 1px solid #666; border-radius: 0.5em; cursor: pointer; }


.container {					/* definitions for containers (typically between header and footer) */
  position: absolute;
  top: 30px;
  bottom: 100px;
  left: 0px;
  right: 0px;
  min-height: 225px;
  overflow: hidden; }
.container .Header { }				/* headers within a .container */
.container .Body {				/* contents of the .container */
  display: block;
  position: absolute;
  top: 70px;
  bottom: 0;
/*						   this did not permit centering of the content
  left: 15px;
  right: 15px;
*/
  left: 0;					/* the below group does permit centering of the content - http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin */
  right: 0;
  margin: 0 auto;
  max-width: 1120px;

  overflow: auto; }
.container .Footer { }				/* footers within a .container */


.title {					/* definitions for titlebars throughout the project */
  margin: 20px 0;
  padding: 10px;
  text-align: center;

  border-radius: 0.5em;
  border: 1px solid #6FCEF4;
  box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5); }


.tabs {						/* definitions for the tabs container used in the project */
  position: absolute;
  margin: 9px 0 0 35px; }
.tabs .liTab {					/* definitions for each tabs */
  display: inline;
  margin: 0 1px;
  padding: 4px 9px;
  border: 1px solid #666;
  color: #eee;
  font-weight: bold;

  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;

  background: -moz-radial-gradient(center, ellipse cover, rgba(187,187,187,1) 0%, rgba(0,0,0,0) 100%);		/* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(187,187,187,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(187,187,187,1) 0%,rgba(0,0,0,0) 100%);	/* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(187,187,187,1) 0%,rgba(0,0,0,0) 100%);		/* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(187,187,187,1) 0%,rgba(0,0,0,0) 100%);		/* IE10+ */
  background: radial-gradient(center, ellipse cover, rgba(187,187,187,1) 0%,rgba(0,0,0,0) 100%);		/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  cursor: pointer; }
.tabs .liSel {					/* definitions for the selected tab(s) */
  padding-bottom: 7px;
  color: #666;
  border: 1px solid #555;
  background: #fff;
  border-bottom: 1px solid #b9b9b9;
  cursor: default;

  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0.3) 100%);		/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0.3) 100%);		/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0.3) 100%);		/* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0.3) 100%);		/* IE10+ */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0.3) 100%);		/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); }	/* IE6-9 */



/* ENHANCEMENTS */

.disabled, .disabled:hover {			/* definitions for disabled form objects */
  color: #bbb !important;
  background-color: #e8e8e8 !important;
  cursor: default !important;
  border: 1px solid #bbb !important;
  opacity: 0.4; }

.show { display: block !important; }
.hide { display: none !important; }

.bold { font-weight: bold !important; }
.italic { font-style: italic !important; }
.underline { text-decoration: underline !important; }
.bottomline { border-bottom: 1px solid #808080 !important; }	/* used if you want to add 'underline' to something (e.g. <li>, <td>, ...) */
.capitalize { text-transform: capitalize !important; }
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }

.right { text-align: right !important; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.justify { text-align: justify !important; }

.cleft  { clear: left !important; }
.cright { clear: right !important; }
.cboth  { clear: both !important; }
.fleft  { float: left !important; }
.fright { float: right !important; }
.fnone  { float: none !important; }
.noover { overflow: hidden !important; }
.curved { border-radius: 0.4em !important; }

.uroman { list-style-type: upper-roman !important; }
.lroman { list-style-type: lower-roman !important; }
.ulatin { list-style-type: upper-latin !important; }
.llatin { list-style-type: lower-latin !important; }
.ualpha { list-style-type: upper-alpha !important; }
.lalpha { list-style-type: lower-alpha !important; }
.decimal { list-style-type: decimal !important; }
.disc { list-style-type: disc !important; }
.circle { list-style-type: circle !important; }
.square { list-style-type: square !important; }
.nolist { list-style-type: none !important; }