/* Basic Layout of pages: color scheme, text centering */

body {color:black;
      background-color:#f8f8f8;
      }
/* watermarked pages */
body.wm
      {
      background-image:url("../images/watermark.jpg");
      background-position: bottom right;
      background-repeat: no-repeat;
      }
/* text alignments. Center all headings, and anything of class="ctr" */ 
h1,h2,h3,h4,h5,h6 {text-align:center;}
.ctr              {text-align:center;}
.rite             {text-align:right;}
td.rite2          {text-align:right;} /*vertical-align:text-top} /* pertains to forms */
.finePrint        {font-size: small;}

/* bold white lettering */
.bldwt {font-weight:bold; color:white;}

/* thumbnails */
img.th {padding:1px;border: 1px solid transparent;}
a:hover img.th 
  {border: 1px solid #00f;}

/* lists with no bullet points (nodec = "no decoration")
 *  - nodec is used for the client list
 *  - modec for the individual model pages */
ul.nodec {list-style-type:none;}
ul.modec {list-style-type:none;}

/***************************************************************
 * Ordinary text highliting (booking policy, success stories)  *
 * font weights, use of upper case and underlining in contexts */ 

h1.up {text-transform: uppercase;}

/* class boldStart refers to paragraphs that open with a single
 * word or phrase that requires emphasis. Emphasis in other parts of the text
 * is conveyed with <strong> or <em> (not in use for initial writing)
 */
p.boldStart b {font-weight:bold;
               text-transform: uppercase;}
               
ul.boldStart li b {font-weight:bold;
                  text-transform: uppercase;
                  text-decoration: underline;}
                  
/* highlighted text (booking policy, */ 
.boldStart em      {color:red;}
.boldStart i       {color:green;}
.boldStart strong  {color:red;}



/* this affects the layout of the catalog pages */
table.catalog td {text-align:center;}

/* ********************************************************************
 * Navigation Menus by ul-type list                                   *
 * (refer to http://css.maxdesign.com.au/listamatic/horizontal03.htm) *
 * I added a class "freeButton" that allows an anchor to appear as a  *
 * button of this style, in any context. Usage                        *
 *    <span class="freeButton"><a href="x.htm">X</a></span>           */
 
/* This controls the area behind the buttons (but in the ul context)  */
div.navcontainer ul.navlist
{
  /* aspects of the list relative to other elements */ 
  padding-left:0;
  margin: 0 0 .7em 0;        /* top, R, bottom, L */
  width: 100%;
  background-color: transparent; /* normally, match it to the body background-color */
  text-align:center;
    
  font-family: arial, helvetica, sans-serif; /* impacts the lettering on the buttons */
  /* this size looks good on most browsers, and it helps prevent button overflow */
  font-size:10pt;
  /* color: White;*/
  /* float:right;*/
  
  /* ------- Some Button Design Options --------- */   
  /* fuzzy, thick purple-blue midway line option: */
  background-image:url("../images/ulMenuBackActive2.gif"); background-repeat: repeat-x;
  
  /* black line under all buttons, joining them option */
  /* border-bottom: 1px solid #000; */

  /* for debugging the layout */
  /* border: 1px solid red; */
}

/* try to maintain compatibility with menu-ed version */
.freeButton
{
  /* aspects of the list relative to other elements */ 
  padding-left:0;
  margin: 0 0 .7em 0;        /* top, R, bottom, L */
  /*width: 100%;*/
  background-color: transparent; /* normally, match it to the body background-color */
    
  font-family: arial, helvetica, sans-serif; /* impacts the lettering on the buttons */
  font-size:10pt;
  
  /* color: White;*/
  /* float:right;*/
  
  /* ------- Some Button Design Options --------- */   
  /* fuzzy, thick purple-blue midway line option: */
}


/* alternate background for nav bar, hinting at current location 
#rednav
{background-image:url("../images/ulMenuGreen.png");
 background-repeat: repeat-x;}
 */


/* this arranges menu buttons in a horizontal line */
div.navcontainer ul.navlist li { display: inline; }  

/*  size of buttons or "cells" padding: H, W
 *    navcontainer ul          ... this contains non-buttons area of the bar
 *    navcontainer ul li a     ... buttons area
 *    navcontainer ul li#current  ... button corresponding to current page
 *
 *  adding margin to navcontainer ul li a lets you space the buttons out, e.g.
 *   margin:2em;
 *  changing float makes the set of buttons go left, right, center (none).
 */

/* This is for a side bar selection of buttons */
div.leftNav {float:left;
             width:211px; 
             /*width:12em;*/}
/* color of line that appears under logo on individual model pages */
div.leftNav a:hover {background-color:#FFDF2A;}
/* color behind buttons for browsing talent */
td.indivFreeButtons{background-color:#CCCCDE;}
/* color behind buttons on bottom left of individual model pages */
td.indivFreeButton2{background-color:#F0F0FF;}
             
/*-----------+-----------------+
 *  taghead  | freeButtonHead  |
 *-----------+-----------------+  
 * classes tagHead and freeButtonHead are intended to be dead buttons (no hyperlink)
 * that are similar in size and shape. Useful in making a label amongst buttons */
div.navcontainer ul.navlist li.taghead,
.freeButtonHead
{
  /* Match the padding with the values for
   * div.navcontainer ul.navlist li a
   * to make this cclass blend in with the buttons. */
  padding: 0.2em 1em 0.2em;  /* top, R, bottom, L */
  line-height:100%;
  margin: 14px 0 0 20px;        /* top, R, bottom, L */
  float:none;
  
  /* ---- design of the text on the taghead/freeButtonHead label ---- */ 
  text-decoration: none;    /* alternatives: underline, overline, blink, etc.. */
  /* black letters on white */ 
  color: black; font-weight:bold;
  background-color:white;  
  
  /* white letters on background color ressembling fuzzy purple-blue line */  
  /*color: white; font-weight:bold;
  background-color:#646CE1;*/  
  
  /* --- design of the outline around the taghead/freeButtonHead area ---- */
  /* using thickness and tone to direct attention to the right, */
  /* staying consistent with button borders along the top and bottom */ 
  border-top:    1px solid #66c;
  border-bottom: 1px solid #66c;
  border-left:   5px solid #66c;
  border-right:  1px solid #99F;
  
  /* simpler, more prosaic option */
  /*border: 1px solid #006;*/
}

/*----------------------+
 *  Navigation Buttons  |
 *----------------------+
 * Basic design of "buttons" that are hyperlinks
 * This covers the default case: a button with
 *   (a) no mouse on it
 *   (b) the page it leads to has never been visited */
div.navcontainer ul.navlist li a,
.freeButton a
{
  /* padding  = space within buttons (i.e. between text and edge)
   * margin   = space between buttons */
  line-height:200%;
  padding: 0.2em 1em 0.2em; /* top, R, bottom, L */
  margin: 0 0 0 6px;
  float:none;

  /* nature of the text that appears on the button */
  color: black;
  text-decoration: none;
  font-weight:normal;

  /* ---- background of the button --- */
  /* a picture makes the button appear 3-dimensional */
  background-image:url("../images/linkUp.png"); background-repeat: repeat-x;
  /* set background color to match bottom pixel in the graphic 
   * This comnes into play if user has browser set to larger font size */ 
  background-color:#dedede;
  
  /* solid color option is simpler and bolder.
   * obviously, dark backgrounds like #3b65df will require you to use lite text,
   * e.g. use color:white above */
  /*background-color: #3b65df;*/

  /* ---- design options: edge of button ---- */
  border: 1px solid #bbb;  /* humble, thin gray line */
}

/* Links/Buttons in special states:
 * Color scheme of mouse over (hover) is in       navcontainer ul li a:hover
 * Color scheme of current location is in         navcontainer ul li#current  
 * Color scheme of visited pages is in            navcontainer ul li a:visited
 * Color scheme of mouse over visited pages is in navcontainer ul li a:visited:hover */

/* Appearance of button when mouse is hovering over it,
 * and the button leads to a page the user has never seen */ 
div.navcontainer ul.navlist li a:hover,
.freeButton a:hover
{
  /*  -- design options: button text --- */
  color: blue;
  line-height:200%;
  font-weight:normal;
  /*text-decoration: underline;*/
  
  /*  -- design options: button background --- */
  /*background-color: #759aff;*/
  /*background-image:url("../images/hover.png"); background-repeat: repeat-x;*/
  background-image:url("../images/linkB.png"); background-repeat: repeat-x;
  background-color:#d0d6ec;
  
  /*  -- design options: button edge --- */
  /* It's tempting to make a thicker boundary, but that will jerk things around
   * unless you use the same thickness for all the other button states. 
   * It's nice to see a color resemblance with the button text */
   border: 1px solid #1E90FF;
}

/* This is basically a "dead" button signifying the viewer's current location.
 * Including it maintains a consistent layout in the navigation menu.
 * Hi-liting this dead button tells the viewer where s/he is relative to the rest
 * of the site, making the navigation menu work like an instrument panel.
 *
 * Roughly matching the look of visited pages has a logical consistency,
 * but some may consider it confusing. */
div.navcontainer ul.navlist li#current,
.freeButton#current
{
  /* these features are copied from div.navcontainer ul.navlist li a, .freeButton a */ 
  line-height:200%;
  padding: 0.2em 1em 0.2em; /* top, R, bottom, L */
  margin: 0 0 0 6px;
  float:none;
  
  /*  -- design options: button text --- */
  color: #5C33A7;  
  font-style: italic;
  font-weight:normal;
  text-decoration:none;
  
  /*  -- design options: button background --- */
  /*background-color: #759aff;*/
  background-image:url("../images/linkDn.png");background-repeat: repeat-x;
  background-color:#e4e4e4;
  
  /*  -- design options: button edge --- */
  border: 1px solid #5C33A7;
}


/* Appearance of button to visited page, when mouse is NOT over the button
 * A distinct look may be helpful, but there's a danger of visual clutter.
 * One can always wait until the mouse comes before alerting the user that
 * page was already visited */
div.navcontainer ul.navlist li a:visited,
.freeButton a:visited
{
  line-height:200%;
  outline:none;
  
  /* button text */
  font-weight:normal;
  font-style: italic;
  
  /* button background */  
  /*background-image:url("../images/link2.png"); background-repeat: repeat-x; */
  
  /* button edge */ 
  /*border: 1px solid #bbb;*/
}

/* Mouse over button leading to previously visited page
 * Design choices similar to mouse-over of buttons to unvisited pages */ 
div.navcontainer ul.navlist li a:visited:hover,
.freeButton a:visited:hover
{
  /* button text */ 
  /* italic and bold will change the size of the button,
   * so it's good to avoid them DURING a mouse-over */
  line-height:200%;
  font-weight:normal;
  color: #4E00DE;
    
  /* button background */
  background-image:url("../images/linkP.png");background-repeat: repeat-x;
  /*  background-image:url("../images/hoverVisit.png"); background-repeat: repeat-x;*/
  background-color:#e8d0ec;
  
  /* button edge */
  border: 1px solid #5C33A7;
}

/* <li id="current-a"> referrs to a button that is down, but also an active link 
 * (button can be re-pressed) */
div.navcontainer ul.navlist li#current-a a,
.freeButton#current-a a
{
  line-height:200%;
  background-image:url("../images/linkDn.png"); background-repeat: repeat-x; 
  background-color:#e4e4e4;
  /* button edge */ 
  border: 1px solid blue;
}

div.navcontainer ul.navlist li#current-a a:hover,
.freeButton#current-a a:hover
{
  line-height:200%;
  background-image:url("../images/linkB.png"); background-repeat: repeat-x;
  background-color:#d0d6ec;
}

div.navcontainer ul.navlist li#current-a a:visited,
.freeButton#current-a a:visited
{
  line-height:200%;
  /* button background */  
  background-image:url("../images/linkDn.png"); background-repeat: repeat-x; 
  background-color:#e4e4e4;
  /* button edge */ 
  border: 1px solid #5C33A7;
}

div.navcontainer ul.navlist li#current-a a:visited:hover,
.freeButton#current-a a:visited:hover
{
  line-height:200%;
  /* button background */
  background-image:url("../images/linkP.png");background-repeat: repeat-x;
  /*  background-image:url("../images/hoverVisit.png"); background-repeat: repeat-x;*/
  background-color:#e8d0ec;  
}