/* Cascading Style Sheet for site Creative Condo - 03 Sep 2006 */
/* ******************  default body  *************** */

/* Color refs:
  #fff8d0 = lt. yellow  (extern hover)  #edf5ff = v. lt. blue    #6fa7a6 = med. teal #8d112d dk. red
  #fe8    = med. yellow (onscr)         #f5f9ff = v.v. lt. blue  #006360 = dark teal #fefee2 v.lt.yellow
  #ffd800 = dark yellow (offscr,bg)     #e3efff = l. blue        #b9d3d4 = lt. teal  #fff white
 */

/* bgcolor="#B9D3D4" link="#0000EF" vlink="#55188A" alink="#FF0000" text="#000000" background="bg.jpg" */

body {
   background-color: #c9ab72; /* or: ece1cc (lt. tan) or: f4dabc;  or: e7cdaf or more orangy was: fbd1a0; */
 /*  background-image: url(/Images/bg.jpg); */
   background-image: none;
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}

/* Links */
a:link, a:visited, a:active
 { text-decoration: underline; background-color: transparent; }
a:link { color: blue; }
a:visited { color: #309; }
a:active { color: #f00; }

/* No default border on "regular" images, so make one that will have a border: */
a.photo:link IMG, td.propthumb a:link IMG { border: 2px solid blue; }
a.photo:visited IMG, td.propthumb a:visited IMG { border: 2px solid #309; }
a.photo:active IMG, td.propthumb a:active IMG { border: 2px solid red; }

/* Off-site links */
a.extern:link { background-color: transparent; color: #037; }
a.extern:visited { background-color: transparent; color: #525; }
a.extern[href]:hover { background-color: #fefee2; color: #8d112d }
/* The MSIE kludges: ones without 'href' hoses standards-compliant agents, grr */
a.extern:href:hover, a.extern:hover
 { background-color: #fefee2; color: #8d112d }

/* Provide for special handling of "off-screen" nav links: */
td a.offscr { display: block; height: auto; width: 100%; } /* to highlight behind all of the "button" cell */
a.offscr:link { background-color: #fefee2; color: blue }
a.offscr:visited { background-color: #fefee2; color: #309 }

/* Define the hover color we use so we can show it if needed: */
.hover { background-color: #8d112d; color: #fefee2; }

@media screen { /* hide from IE3 */
a[href]:hover { background-color: #8d112d; color: #fefee2; } /* Default hover is like "onscr" colors */
/* Do the next line to avoid having the MSIE kludge below do something "funny" */
/* (But now if an anchor and a link are on the same line, the background won't change then! Grr) */
/* Drop this so links hover OK: a[id]:hover, a[name]:hover
 { background-color: transparent; } */
/* Other link definitions: */
a.nonrect[href]:hover
 { background-color: transparent; border: none; } /* hover here would look wierd */
/* Kludge to make MSIE work since it doesn't support attribute selectors,
   so it doesn't recognise the standard "a[href]:hover" construct, sigh! */
/* MSIE Strict needs no "href", but this messes up non-MSIE, so see above */
a:href:hover, a:hover
 { background-color: #8d112d; color: #fefee2; }
a.nonrect:href:hover
 { background-color: transparent; border: none; } /* MSIE kludge, hover here would look wierd */
}

/* Setting so there is no hover display for image links
   (otherwise it looks funny on non-rectangular images) */
@media screen { /* hide from IE3 */
a[href]:hover IMG {
   background-color: transparent; /* transparent doesn't seem to work as I want it to */
   border: 0; /* For default, don't have a border, so none to hover either */
 }
a.nonrect[href]:hover IMG {
   background-color: transparent; /* hover background here would look wierd */
   border: 1px solid #8d112d;
 }
a.photo[href]:hover IMG, td.propthumb a[href]:hover IMG {
   background-color: #fff; /* why didn't transparent work? */
   border: 2px solid #8d112d;
 }
/* Kludge to make MSIE work since it doesn't support attribute selectors,
   so it doesn't recognise the standard "a[href]:hover" construct, sigh! */
a:href:hover IMG {
   background-color: transparent; /* hover background here would look wierd */
   border: 0; /* For default, don't have a border, so none to hover either */
 }
a.nonrect:href:hover IMG {
   background-color: transparent; /* hover here would look wierd */
   border: 1px solid #8d112d;
/*   color; none;
   border: none; */
 }
a.photo:href:hover IMG, a.photo:hover IMG, td.propthumb a:href:hover IMG, td.propthumb a:hover IMG {
   background-color: #fff; /* why didn't transparent work? */
   border: 2px solid #8d112d;
 }
}

/* Other elements */

img {
   vertical-align: middle;
   border: 0; /* For default, don't have a border */
}
img.photo, td.propthumb a IMG {
   vertical-align: middle;
   border: 2px solid black;
}
img.nonrect {
   vertical-align: middle;
   border-width: 1px;
   border-style: dotted;
   border-color: transparent; /* white; since "transparent" does not work on MSIE! :-( */
}
p.nonrect {
   margin-left: auto; /* These 2 center the table, but not on MSIE, see .msiekludge <grr> */
   margin-right: auto;
}

/* MSIE is broken and does not honor standard ways of centering a table
   So to do so, fool it by putting a table into a "<div>" of the following class: */
.msiekludge {
   text-align: center;
}

table {
   table-layout: auto;
   margin-left: auto; /* These 2 center the table, but not on MSIE, see .msiekludge <grr> */
   margin-right: auto;
   border-style: none; /* Drop the box around a standard table */
}

/* Then, some notes say that in the _real_ table def, set the text-align back to
   "left" or defaulted cells will be centered, not left aligned,
   but this does not seem to work, so just make certain that all cells set
   their own text-align as is desired ... sheesh, what a mess! */
td {
   text-align: left;
}

/* Used on certain script error pages: */
body.errorpg {
   background-color: #ffccff; /* Light magenta */
   background-image: none;
   color: #5e1b0f;            /* Dark Red */
   font-family: sans-serif;
}

/* Body styles used with ARDEpet application: */
body.master, body.mirror {
   background-color: white;   /* white */
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}
body.testsrvr {
   background-color: #ff0;    /* yellow */
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}
body.othersrvr {
   background-color: red;     /* red */
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}

/* **********  "Private" page definitions  ********* */
/* Also used for private metrics pages */
/* MSIE does not seem to honor the following the same way Firefox does. */
/* On MSIE "transparent" causes the folowing to display "a:visited", etc. not the background: */
a.prvnorect:link IMG, a.metrnorect:link IMG,
a.prvnorect:visited IMG, a.metrnorect:visited IMG {
   border-width: 1px;
   border-style: dotted;
   border-color: transparent; /* white; since "transparent" does not work on MSIE! :-( */
}
a.prvnorect:active IMG, a.metrnorect:active IMG
 { border: 1px dotted red; }

body.private, body.metrics {
   background-color: white;
   background-image: none;
   text-align: left;
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}
img.prvnorect, img.metrnorect {
   vertical-align: middle;
   border-width: 1px;
   border-style: dotted;
   border-color: transparent; /* white; since "transparent" does not work on MSIE! :-( */
}
/* Define the private link colors we use so we can show them if needed: */
.prvlink, .metrlink { background-color: #eee; color: #444; }
.prvvisited, .metrvisited { background-color: transparent; color: #444; }

/* Special treatments for private links: */
a.private:link, a.metrics:link
 { background-color: #eee; color: #444; }
a.private:visited, a.metrics:visited
 { background-color: transparent; color: #444; }
a.prvextern:link, a.metrextern:link
 { background-color: #afc1db; color: #002454; }
a.prvextern:visited, a.metrextern:visited
 { background-color: transparent; color: #037; }

/* Define the private hover color we use so we can show it if needed: */
.prvhover, .metrhover { background-color: #444; color: white; }
/* Define private hovers, keeping MSIE kludges separate or standard styles don't work */
a.private[href]:hover, a.prvextern[href]:hover, a.metrics[href]:hover, a.metrextern[href]:hover
  { background-color: #444; color: white }
/* The MSIE kludges: ones without 'href' hose standards-compliant agents, grr */
a.private:href:hover, a.prvextern:href:hover, a.metrics:href:hover, a.metrextern:href:hover,
a.private:hover, a.prvextern:hover, a.metrics:hover, a.metrextern:hover
  { background-color: #444; color: white }
/* hover bg on non-rectangular images would look wierd */
a.prvnorect[href]:hover, a.metrnorect[href]:hover
  { background-color: transparent; border: none; }
/* The MSIE kludges: ones without 'href' hose standards-compliant agents, grr */
a.prvnorect:href:hover, a.metrnorect:href:hover,
a.prvnorect:hover, a.metrnorect:hover
  { background-color: transparent; border: none; }
a.prvnorect[href]:hover IMG, a.metrnorect[href]:hover IMG
  { background-color: transparent; border: 1px solid #eee; }
/* The MSIE kludges: ones without 'href' hose standards-compliant agents, grr */
a.prvnorect:href:hover IMG, a.metrnorect:href:hover IMG,
a.prvnorect:hover IMG, a.metrnorect:hover IMG
  { background-color: transparent; border: 1px solid #eee; }

/* Used on contract and other official pages: */
body.contract {
   background-color: white;
   background-image: none;
   text-align: left;
   color: black;
   font-family: Arial, Helvetica, sans-serif;
}
/* For small things (like expiration messages) in the contract: */
.contractexp {
   text-align: center;
   color: black;
   font-size: 70%;
   line-height: 1.1;
   font-family: Arial, Helvetica, sans-serif;
}
/* Use sparingly! Confuses users due to links. */
.underline {
   text-decoration: underline;
}

/* These are classes which may be applied to multiple tags: */

.brdr {
   border-style: solid; /* Add the box around the table or block */
   border-width: 1px;
   border-color: #004aba;
}

/* border to be used around each real page content: */
.tblbrdr {
   width: 99%;
   padding: 5px;
   border-style: inset; /* Add the box around the table or block */
   border-width: 1px;
   border-color: #8ab9ff;
}

.center {
   text-align: center;
}

.left {
   text-align: left;
}

.right {
   text-align: right;
}

.justify {
   text-align: justify;
}

.middle {
   vertical-align: middle;
   text-align: center;
/*   border: 3px solid black; */
}

.margin {
   margin-left: 5%;
}

.indent {
   text-indent: 2em;
}

.undent {
   margin-left: 2em;
   text-indent: -2em;
}

.clearall {
   clear: both;
}

/* Intended for photo display pages: */
/* Date of photos: */
.phimgdate {
   color: #999999;
   font-size: 80%;
}
/* Index of photos: */
.phimgindx {
   color: #999999;
}

/* More Specials: */

/* Page title (Hx, etc.) formats: */
.pgttl {
   text-align: center;
   font-size: 100%; /* This makes the heading conform to the sizes this site wants */
   margin-top: 5px; /* This is to keep FireFox from pushing Strict page content as far down the screen */
   margin-bottom: 5px;
}
/* General description: */
.gendesc {
   text-align: left;
   font-size: 80%;
   margin-top: 0;
}

.feature {
   text-align: left;
   font-size: 85%; /* For some reason, this seems to make it less that 100%, go figure */
   margin-bottom: 0;
}
/* Feature description: */
.featdesc {
   text-align: left;
   font-size: 80%;
   margin-top: 0;
}

/* Contact info: */
.contact {
   text-align: center;
   font-size: 100%; /* For some reason, this seems to make it less that 100%, go figure */
   font-weight: bolder;
}

/* Property description: */
.propdesc {
   font-size: 80%;
}
/* Property name (within a prop desc): */
.property {
   font-weight: bolder;
}
/* Number of units (within a prop desc): */
.numunit {
   font-style: italic;
   font-weight: bolder;
}

/* Property thumbnail cell: */
td.propthumb {
   text-align: center;
   font-size: 80%;
   background-color: #c9ab72; /* tan, like page: #c9ab72; darker tan: #c99122; reddish, like subheading block: #8d112d */
   /* border: 1px dashed black; */ /* add border around each name/photo pair */
}

/* Property interior thumbnail cell: */
td.interthumb {
   text-align: center;
   font-size: 80%;
}

/* Rate period heading cell: */
th.rateperiod {
   background-color: #8d112d;
   color: #fefee2;
   text-align: center;
   font-size: 80%;
   font-weight: bolder;
   width: 25%;
   border: 1px solid black;
}
/* Rate month heading cell: */
th.ratemonth {
   background-color: #8d112d;
   color: #fefee2;
   text-align: right;
   font-size: 80%;
   font-weight: bolder;
   border: 1px solid black;
}
/* Rate cost cell: */
td.ratecost {
   background-color: #fefee2;
   color: black;
   text-align: center;
   font-size: 80%;
   border: 1px solid black;
}

/* Other property avail. notice: */
.otherprop {
   text-align: center;
   font-weight: bolder;
   font-size: 80%;
}

/* Title on an error page */
.errttl {
   text-align: center;
   background-color: #ff0000;
}

/* Page "Updated" info line: */
.updated {
   text-align: center;
   font-size: 70%;
}

/* Explanitory info: */
.explain {
   font-weight: bolder;
   color: #8d112d;
   font-size: 90%;
}
.explaintiny {
   font-size: 60%;
}

.explainphoto {
   font-size: 60%;
   line-height: 1.2;
}

/* Critical info: */
.critical {
   font-weight: bold;
   font-size: 90%;
}

/* Highlighted info: */
.highlight {
   color: #8d112d;
}

/* Required info: */
.required {
   font-weight: bold;
   font-size: 70%;
   color: #8d112d;
}

/* Form action elements: */
.formele {
   text-align: center;
   vertical-align: middle;
   padding: 9px; /* if this is too small, MSIE chops the top of the fake button, grr */
   margin: 1px;
}

/* Form action button: */
input {
   font-family: Arial, Helvetica, sans-serif;
}

/* Real and fake form action button: */
.inputbtn, .fakebtn {
   line-height: 1.2;
   padding: 3px;
}

/* Top navigation block: */
.navblock
{
   background-color: #8d112d; /* Med. Teal */
   color: white;
   text-align: center;
/*   border: 2px inset #fff; */ /* dwe enable to add inset box */
}

/* Navigation buttons */
td.onscr, button.offscr, input.offscr, td.offscr
{
   padding: 1px;
}
td.onscr, button.offscr, input.offscr, td.offscr, .inputbtn, .fakebtn
{
   text-align: center;
   vertical-align: middle;
   font-size: 80%;
   font-weight: bolder;
}
/* dwe no onscr button td.onscr, */ button.offscr, input.offscr, td.offscr, .inputbtn, .fakebtn
{
/* Add the box around the table or block, use darker color */
   border-top: 2px outset #ece1cc; /* fefee2 */
   border-right: 2px outset #ece1cc;
   border-bottom: 2px outset #ece1cc;
   border-left: 2px outset #ece1cc; /* dwe implement to add nav buttons */
}
/* For the page onscreen now: */
td.onscr
{
   background-color: #8d112d;
   color: #fefee2;
}

/* For pages offscreen now and for "real" buttons: */
.inputbtn, .fakebtn, button.offscr, input.offscr, td.offscr
{
   background-color: #fefee2;
   color: black;
}

/* Add special navigation hover styles; be sure background is appropriate */
@media screen { /* hide from IE3 */
button.offscr:hover, input.offscr:hover, a.offscr[href]:hover
 { background-color: #8d112d; color: #fefee2; }
/* Kludge to make MSIE work since it doesn't support attribute selectors,
   so it doesn't recognise the standard "a[href]:hover" construct, sigh! */
/* in 4.01 transitional, use this: button.offscr:hover, input.offscr:hover, a.offscr:href:hover */
button.offscr:hover, input.offscr:hover, a.offscr:href:hover, a.offscr:hover
 { background-color: #8d112d; color: #fefee2; }
}