/* The body and #main settings are establsihed to make a PC browser look a bit like a phone.
  The media query at the end of the file then removes these settings for actual phones.
*/
body {
	background-color: Gray;
	font-size: 1.2em;

}

#main {
	font-family: sans-serif;
	max-width: 30em;
	min-height: 38em;
	background-color: white;
	margin-left:auto;
	margin-right:auto;
	padding: 2px;
}

#main li{
	margin-bottom:0.5em;
	margin-top:0.5em;
	list-style: disc;
}

#main li li {
	list-style: disc;
}
/*
#admin li {
	font-size: 0.8em;
}
*/
p{
	margin:0;
	padding:0;
}

#main ul {
	margin-top: 0;
}
h1{
	margin:0;
	padding:0;
}
table {
	width: 100%;
}

th{
	vertical-align: top;
}

p.bc {
	padding-bottom: 0;
	text-shadow:1px 1px 1px silver;
}
td {
	vertical-align: top;
	padding:0;
}
a:visited {
	color: blue;
}
a:hover{
	text-decoration: underline;
}
a {
	font-weight: normal;
	text-decoration: none;
}

.inactiveLink {
	color:silver;
}

form {
	padding:0;
	margin:0;
}
td {
	padding-bottom: 0.5em;
}
p {
	padding-bottom:0.5em;
}
.note {
	font-size:0.9em;
}
.small {
	font-size:0.9em;
}
.errList {
	color: red;
	font-size: 0.9em;
	font-style: italic;	
}
/*
Main header
*/
#hdr {
	background-color: #F8ECDE;
	background: linear-gradient(#F8ECDE, #F8ECDE, #F8ECDE, white);
	background: -webkit-linear-gradient(#F8ECDE, #F8ECDE, #F8ECDE, white);
	background: -o-linear-gradient(#F8ECDE, #F8ECDE, #F8ECDE, white);
	background: -moz-linear-gradient(#F8ECDE, #F8ECDE, #F8ECDE, white);
/*	background-color: #FAF4D7;*/
	padding: 0;
/*	border-bottom: thin gray dotted; */
}

#hdr p {
	padding-bottom: 0.5em;
}

#hdr table {
	padding:0;
	margin: 0;
	border: none;
	width: 100%;
}

.hdrcol1 {
	text-align: left;
	line-height: 2em;
}
.hdrcol2 {
	text-align: right;
}
#hdrt1 td.hdrcol2 {
	vertical-align: top;
}


#hdr p a{
	font-size: 0.8em;
}
.menusep  {
padding-left: 0.5em;
margin-right: 0.5em;
font-weight: normal;
}
/*
Logo Font styling
*/
.logof1 {
	color: #00BFFF;
	font-family: verdana, sans-serif;
	font-weight: normal;
	font-size: 1.4em;
/*	text-shadow:1px 1px 1px gray; */
}
.logof2 {
	color: Maroon;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	font-size: 2.5em;
	text-shadow:1px 1px 2px gray;
}
.logof3 {
	color: Maroon;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	font-size: 1.5em;
/*	text-shadow:1px 1px 1px gray; */
}
/*
body div
*/
#body {
	margin:2px;
	margin-top: 0;
}

#body h2{
	margin-bottom: 0.25em;
	margin-top: 0.25em;
	font-size: 1.25em;
	text-align: center;
}

#body h3{
	margin-bottom: 0;
	margin-top: 0.5em;
	font-size: 1em;
	text-align: left;
}

#help #content {
	padding:0.5em;
}

#help h1{
	margin-bottom: 0.25em;
	margin-top: 0.25em;
	font-size: 1.25em;
	text-align: center;
}

#help h2{
	margin-bottom: 0;
	margin-top: 0.5em;
	font-size: 1em;
	text-align: left;
}

/*
Login form 
*/
#logon table {
	width: 80%;
	border:solid thin black;
	background-color: #FFFFE0;
	margin-left:auto;
	margin-right:auto;
}
.red {
	color: red;
}
table.checkcols {
	width: 90%;
	margin-right:auto;
	margin-left: auto;
}
p.pageMenu {
	text-align: right;
}

p.vertMenu {
	text-align: center;
    padding:1em;
}

#hdrt1 td.hdrcol2 a, .pageMenu a , .tblMenu a, .vertMenu a {
	/*border: solid thin;
	border-color: #B5EDFF;*/
	border: none;
   -webkit-border-radius: 0.5em;
   border-radius: 0.5em;
	padding: 2px 6px 2px 6px;
	background-color: #D7EEFA;
	font-size:0.9em;
	margin-left:0.5em;
	box-shadow: 1px 1px 1px gray;
}

.tblMenu .inactiveLink, .pageMenu .inactiveLink {
	/*border: solid thin;
	border-color: #B5EDFF;*/
	border: solid thin;
	border-color: silver;
   -webkit-border-radius: 0.5em;
   border-radius: 0.5em;
	padding: 2px 6px 2px 6px;
	background-color: white;
	font-size:0.9em;
	font-weight: normal;
	margin-left:0.5em;
}

#hdrt1 td.hdrcol2 a {
	border: solid thin;
	border-color: #B5EDFF;
}

tr.listHdr {
	background-color: #FFFACD;
}

tr.listHdr th:first-child {
	text-align: left;
	font-size:1.2em;
	padding-top:0.25em;
	padding-bottom:0.25em;
}

th.tblMenu {
	text-align:right;
	font-size:1em;
}
td.tblMenu {
	text-align:right;
}
.fldList th {
	text-align: right;
	padding-bottom:0.5em;
}

.auditList th {
	text-align: right;
	font-size:0.9em;
	padding-bottom:0;
}
.auditList td {
	padding-bottom:0;
	font-size:0.9em;
}
.promo {
	font-size:0.7em;
	color: Gray;
	text-align: center;
}

/* msg styles */
.msg {
   -webkit-border-radius: 0.25em;
   border-radius: 0.25em;
	font-style: italic;
	color: #006400;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left:auto;
	margin-right:auto;
	border: thin solid green;
	width: 80%;
	padding: 0.5em;
	background-color: #ECFDED;
}
.err {
   -webkit-border-radius: 0.25em;
   border-radius: 0.25em;
	font-style: italic;
	color: red;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left:auto;
	margin-right:auto;
	border: thin solid red;
	width: 80%;
	padding: 0.5em;
	background-color: #FFFACD;
}

.warnText {
	font-style: italic;
	color: red;
	font-size: 0.9em;
}
/* filterWrap styles*/
#filterWrap
{
    background-color:#ffecec;
    border: 1px silver solid;
    box-shadow: 1px 1px 1px 0px grey;
    padding:0.5em;
    margin-bottom:0.25em;
}
input[type=text] {
	width: 90%;
}
textarea {
	width: 90%;
}
 /* from http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit */
 input[type=checkbox],
 input[type=radio] {
    border: 1px solid #555;
   padding: 0.5em;
   font-size: 15px;
   line-height: 1.2em;
   width: 80%;
   background: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
   -webkit-appearance: none;
   -webkit-box-shadow: 1px 1px 1px #fff;
   -webkit-border-radius: 0.5em;
  display: inline-block;
   font-size: 15px;
   line-height: 1em;
   margin: 0 0.25em 0 0;
   padding: 0;
   width: 1.25em;
   height: 1.25em;
   -webkit-border-radius: 0.25em;
   vertical-align: text-top;
 }

 input[type=radio] {
    -webkit-border-radius: 2em; /* Make radios round */
  }
  
  input[type=checkbox]:checked {
   background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%008%00%00%008%08%02%00%00%00'%E4%ACI%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04DIDATx%DA%EC%98%B9J%2CA%14%86%EF%F4%AC%8E%5B%24%F8%00%93%BA%83%89%89%A1%22n%A1%81%89%B8%22%82%2B%06%A2%E2%82%B8%20%1A%A9(%B8%BC%87%8F%E0%12%09%3E%82K%AA%20%EAu%EEo%FFw%0EEuO%2F3%A3%5C%2F%FD%07E%F5Lu%F7%D7%FF9u%BA%BA%22%A9T%EA%D7O%90%F1%EB%87(%00%0D%40%03%D0%004%00%0D%40%03%D0%FF%1B4%F2%3D%B7I%A7%D3%B6%BF%87B%A1%7F%05T%105V%22%F2G%2F%B8%91oC%D4%40qH%3E%B4%D2w%CA%D1%D0%D7H%F3%89%94%86aloo%0F%0C%0C%D8%BA%EB%7C%C1H8%1C%FE%22%2F%D3%19%FD%B5%C40677%BB%BB%BB%D1%8F%C5b%7B%7B%7B%B6%8F%975%F4%BE%40%ADs%C2zu%8D%F2%E3%E3%03-%EE%B2%B1%B1AJhjj%0A'%EE%EF%EF%A3%C5%03xa%8D%409%F09g%95%20B%18%06%CA%F5%F5u%A1%A4%26''qk%F8%8A%7FU%DC%AC%A0%D1h%D4c%1C%1D%1C%95%1Bp%00%11y%08%8E%B5%B5%B5%AE%AE.%EB%95%9B%9A%9A%8E%8F%8F1Re%CD%11T%8B%23%95L%26%CB%CA%CA%EE%EE%EE%D4y%23%E5F%CCF%07%9E%AD%AC%ACtvvZ%AF%7Cyy944%04J%8C%01%A8%9A%00%F6%A0%C8kWJ%E6%19%DBD%22%B1%BB%BB%5BYY988x%7F%7FouB%BCD%BB%B4%B4%D4%D1%D1a%BD%F2%C5%C5%C5%F0%F0%F0%EB%EB%2Bl%22(Mu%02upT%9D%10%BC%7D%3C%1E%DF%D9%D9%A9%A9%A9A%FF%F0%F0%10%96%3C%3C%3C%A8%09%A0V%C7%E5%E5%E5%F6%F6v%5BJ%3C%E4%DB%DB%1B))W%D0P%5B%5B%9B%83%9DD%FCm%0A%DEommUWW%CB%18D%1F%C6%3C%3E%3E%8A%A98%0B%23%D1.%2C%2C%B4%B6%B6%3AP%C6LEM1%F4%CE%F3)%A4MF%DB%99%FB%FE%FE%8E_%40YUU%A5%0DSY%25%EE%F3%F3%F3---%0E%94%88%8C%80%D2Q%D7%1C5bn%E2%85%00%7D%7D%7Dm%3D%1F%C9zppPQQA%D7%F1%0B%BC%CCF%89T%C1%18d9%40%13%A6%E2%A6x%23%B5oU%B8%BE%BE%3E%9CEj8%00zuu%05%C3jkk5%82%92%92%92%E6%E6%E6%F3%F3%F3%A7%A7%A7%C5%C5E%5BJ%CC%F1%91%91%11P%0A%A2J%C9%04%90d%B5U%04C%B3%85%9Eqg%9A%F3%F0%EC%EC%0Cm__%9F%D5%D7%A3%A3%A3%DB%DB%5B%10%5B%2F%85'%1C%1D%1De%5DSm%23%9Cj%87S%1D%CDV%9E%98%A3%F0%80%C9%C7%FC%C3%E1%E9%E9)%3A%FD%FD%FDVV%C8%96rll%0C%97*..%8Eg%24%94%5E*%A8%0FP%89%3E%7D%3D99A%07%8B%20%D7w%2F%D2z%7C%7C%9C%94%92%9A%DAd%F7B%F9%09%EA%10zb%81U%EA%9C%FC%05_%D1qf%05%E5%C4%C4%04%93X%CDK%A1t%AD%9D%3E%0A%3EA%ADi%84%16%ACh%AD9%40%DD%DC%DC%90%12yYd%8A%94%B4%D3%2F%A5K%E8%A5%E0%AB%F3%D1%C8%88%AC%A8%FF%8D%8D%8D%DA%B9%CF%CF%CF%B3%B3%B3%18%03%3E%82%D2N%EB%04%F2%FE%D9%94%D5Qu9%C2%9A%2F%AC2%09%A0%E9%E9i%BCT%1B%1A%1AT%CA%9E%9E%9E%97%97%17D%5C%B33gJ%F7%D0%0B%2B%86%91U%2Bu8%9C%99%99%C1%07F%5D%5D%1D)%7B%7B%7B%B1%DA(--M%9AR%83.1%F1K%E9%BEpVYU8%E2%A2%C5%03%80%60nn%0EK%E3T*%85%E9%85%E7%C1%22%B0(%23%A1T%8B%91_JO%9F%22%C2%AA%BD%B1%84%18%10x%7D%AF%AE%AE%82%09%C3%CA%CB%CB%B5%D7%8FV%8Cr%A0%F4%FA%CD%24%AC%E4c%2B%8E%22%D0p%91%8B%26%D4K%B1Y%DE%40%EA%8A37%CAOP%2F%A7%C9BS-Ob*PdE%A2%FEH%E2%82P%FA%D8%80%10Vy%A3%0A%2Bhh'%07%A8%95A%94'%A5%BF%9D%12%8D%95%1D%88%B5V6g%C8*%E5%B6%20%94%BE%B7tlY%85R%C6%C8%87T%3E%B3'%DF%BD'%8D%953L%FD%92%B6%EE%EA%E4O%99%E3%26%99%F6%11%E7%BC%7DR%10%CA%DCw%F3%D4%95%94-J%A1%F8%0A%B6%EDXp%A0%60%0F%3F%00%0D%40%03%D0%00%F4k%F4G%80%01%00%E2%BB%B3%8D%BD%BE%0E%DE%00%00%00%00IEND%AEB%60%82") no-repeat center center;
   -webkit-background-size: 28px 28px; /* shrink high resolution background */
 }
 
/*These styles used for image on help and static pages edited in the system*/
img.imgFloatRight {
    float:right;
    padding-left: 1em;
}

img.imgFloatLeft {
    float:left;
    padding-right: 1em;
}

img.imgCentre {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

img.imgCenter {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

/* this stuff is for the content div in a template display */
/* the values have been chosen to render similarly to the way gmail will render the div as an HTML email*/
#tmpltContent
{
    font-size:0.8rem;
    width:95%;
    margin-left:auto;
    margin-right:auto;
    border: 1px silver solid;
    box-shadow: 3px 3px 3px 0px grey;
    padding: 0.5em;
}

#tmpltContent h1
{
    text-align:left;
    font-size:2em;
}
#tmpltContent h2
{
    text-align:left;
    font-size:1.5em;
}
#tmpltContent h3
{
    text-align:left;
    font-size:1.17em;
}
div:focus{
    outline: none;
}

#tmpltCombo select
{
    font-size:0.9em;
    margin-bottom:0.25em;
    margin-top:0.25em;
    padding-bottom:0.25em;
    padding-top:0.25em;
}
/* put the following @media command at the end of the css file */
/* it is here to force phone type devices to use the full screen width */

/*This first section for portrait tablets */
@media (max-width: 800px){
body {
/*	font-size: 1.3em; */
	background-color: white;
    background-image:none;
	padding:0;
	margin:0;
}
#main {
	width: default;
	min-height: 0;
	max-width:500em; /* so it does not have any effect */
    border-style:none;
	box-shadow: none;
}
}

@media (max-width: 599px){
body {
	font-size: 1em;
	background-color: white;
	padding:0;
	margin:0;
}
#main {
	width: default;
	min-height: 0;
	max-width:500em; /* so it does not have any effect */
	}

/* make these all the same on small devices */

img.imgFloatRight {
    margin-left:auto;
    margin-right:auto;
    display:block;
    float: none;
    padding-left: 0;
}

img.imgFloatLeft {
    margin-left:auto;
    margin-right:auto;
    display:block;
    float: none;
    padding-left: 0;
}

img.imgCentre {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

img.imgCenter {
    margin-left:auto;
    margin-right:auto;
    display:block;
}
}