/* OBJECTS */

* { margin: 0; padding: 0; }


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: 908px;					/* used for firefox, Opera, and Netscape browsers.  IE has code in the actual html. */
  min-height: 780px; }


body {
  height: 100%;
  font: 13px verdana;
  color: #808080;
  cursor: default;

  background: #e9eef2;							/* Old browsers 	was #1e5799 */
  background: -moz-linear-gradient(top, #375976 0%, #e9eef2 60%);	/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#375976), color-stop(60%,#e9eef2)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #375976 0%,#e9eef2 60%);	/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #375976 0%,#e9eef2 60%);		/* Opera 11.10+ */
  background: -ms-linear-gradient(top, #375976 0%,#e9eef2 60%);		/* IE10+ */
  background: linear-gradient(to bottom, #375976 0%,#e9eef2 60%);	/* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375976', endColorstr='#e9eef2',GradientType=0 ); /* IE6-9 */
}


a, a:link, a:visited, a:active { color: #396AA4; text-decoration: none; }
a:hover { color: #555; }


.button {
  padding: 0 10px;
  color: #808080;
  font-weight: bold; }
.button:hover { }


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


.combobox, .listbox, .password, .textbox, .textarea {	/* the combobox are multi-row listboxes */
  color: #76A7DC;
  background-color: #F5F5F5;
  border: 1px solid #e5e5e5;
/*
  background-color: transparent;
  border: 1px solid #eee;
*/
  border-radius: 0.3em; }
  /* box-shadow: 0 0 4px rgba(f,f,f,0.3) inset,0 0px 2px rgba(0,0,0,0.1); } */
.textbox { padding: 1px 3px 1px; }
.combobox, .listbox { width: 200px; }
.password, .textbox { width: 192px; }


h1 {
  font-size: 60px;
  color: #000;
  font-weight: normal;
  opacity: 0.4;
  text-align: center; }
h2 {
  margin-top: 0;
  font-size: 14px;
  font-variant:small-caps;
  color: #000;
  letter-spacing: 2px;
  opacity: 0.4;
  text-align: center; }
h3 { }


img { }


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


ul { list-style: none; width: 336px; }
ul li { text-align: right; }
ul li label, ul li span { float: left; }
ul li span label { float: none; }			/* unset the above declaration in the event we have an <li><span><input type='checkbox'><label>click me</label></span>...</li> */
ul .liSub { padding-left: 12px; color: #aaa; }		/* applicable @ li level; li "sub-category" */


.background { }						/* the universal background image for the project */
.date { width: 60px; text-align: center; }
.city { width: 113px; }
.state { margin-left: 3px; width: 20px; text-align: center; }
.zip { margin-left: 3px; width: 45px; text-align: center; }
.note { color: #bbb; font-size: 10px; }
.overlay {						/* for darkening the background for popup messages */
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.6;
  opacity: 0.6;
  filter: alpha(opacity=60); }
.info {							/* general message popup */
  margin: 10px 4px 20px 5px;
  padding-left: 80px;
  height: 52px;
  border-radius: 0.4em;
  -webkit-border-radius: 0.4em;
  overflow: auto; }
.fail {							/* failure message popup */
  margin: 15px;
  padding: 10 0;
  border: 1px solid #ff0000;
  background: #ffadad url(../images/errs.jpg) 15px 5px no-repeat; }
.succ {							/* success message popup */
  margin: 15px;
  padding: 10 0;
  border: 1px solid #a9d260;
  background: #fafff1 url(../images/cfrm.gif) 15px 5px no-repeat; }
.warn {							/* warning message popup */
  margin: 15px;
  padding: 10 0;
  border: 1px solid #7ca0bf;
  background: #f0f7fa url(../images/info.png) 15px 5px no-repeat; }




/* LAYOUT */

.header {
  padding: 5px 10px;
  height: 19px;
  border: 1px solid #ccc;
  background-color: #F5F5F5;
  border-radius: 0.5em;
  opacity: 0.7;
  font-weight: bold;

  box-shadow: 0px 0px 5px 1px #fff, inset 0px 0px 5px 1px #000;
  -moz-box-shadow: 0 0px 10px 1px #000;
  -webkit-box-shadow: 0 0px 10px 1px #000; }
.header label { font-weight: bold; }
.header ul { float: right; width: 500px; text-align: right; }
.header li { display: inline; margin-left: 5px; }
.header img { cursor: pointer; }
.header #liAdmin img { display: none; }


.title {
  margin-top: 9px;
  padding: 5px 10px;
  background-color: #F5F5F5;
  border: 1px solid #ccc;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;

  box-shadow: 0px 0px 10px 1px #000;
  -moz-box-shadow: 0 0px 10px 1px #000;
  -webkit-box-shadow: 0 0px 10px 1px #000; }
.title img { display: none; float: right; cursor: pointer; }


.tabs { position: absolute; margin-top: 10px; }		/* z-index: 1; */
.tabs .liTab {
  display: inline;
  margin-right: 10px;
  padding: 2px 10px;
  background-color: #ddd;
  border: 1px solid #ccc;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  cursor: pointer;

/*  box-shadow: -5px -1px 10px -3px #333, 5px -1px 10px -3px #333; */
  box-shadow: 0 0px 10px 1px #000;
  -moz-box-shadow: 0 0px 10px 1px #000;
  -webkit-box-shadow: 0 0px 10px 1px #000; }
.tabs .liSel { background-color: #fff; border-bottom: 2px solid #fff; cursor: default; opacity: 0.9; }


.container {
  background-color: #fff;
  border: 1px solid #ccc;
  border-top-width: 0;
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  opacity: 0.8;

  box-shadow: 0px 0px 10px 1px #000;
  -moz-box-shadow: 0 0px 10px 1px #000;
  -webkit-box-shadow: 0 0px 10px 1px #000; }
.container .Header {					/* headers within a .container */
  padding: 5px 10px;
  font-weight: bold;
  background-color: #F5F5F5;
  border-bottom: 1px solid #e5e5e5;
  border-top-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
  text-align: left; }
.container .Header img { float: right; margin-left: 5px; cursor: pointer; }
.container .Body {
  position: absolute;
  top: 28px;
  bottom: 0;
  width: 100%;
  overflow: auto; }
.container .Footer { }					/* footers within a .container */


.footer {
  position: absolute;
  bottom: 0;
  padding: 2px 0;
  width: 100%;
  font-size: 10px;
  border: 1px solid #ccc;
  background-color: #F3F4F4;
  border-radius: 0.5em;
  text-align: center;

  box-shadow: 0px 0px 10px 1px #000;
  -moz-box-shadow: 0 0px 10px 1px #000;
  -webkit-box-shadow: 0 0px 10px 1px #000; }
.footer a { font-weight: bold; }




/* ENHANCEMENTS */

.disabled, .disabled:hover {
  color: #808080;
  background-color: #e8e8e8;
  cursor: default; }

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

.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

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

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

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