http://localhost/Users/localadmin/Documents/web/eli-web/new-site/the-latest/image/eli2s.jpg/**
 * Style sheet for Eli Thompson's web site.
 **/


/* Reset the browser. This created problems.
@import url("interpeople_reset.css");
*/

/* ----------------------------- BODY ----------------------------- */

html {
  margin:0;
  padding:0;
 }

body {
  background-color: black; /*#dbd1c8;   */
  font-family: Arial;
  font-size: 12px;
}


#wrapper {

    width:  935px; /* WHY NOT 915px;    ?    */
  
 
    /* Center the window horizontally in the browser */
    position: absolute;
    margin: 10px 0 0 -470px;  /* Half of the width */
    left: 50%;
    
    text-align: center;   /* Fix for IE */
    overflow-x:auto; overflow-y:hidden; /* to contain floated children */ 
    display: inline-block;  /* stops expansion of block to the right */
    padding: 0;
	
	/*	border: 2px solid white; /* !!!!!!! */ 
}
    
      
/* ----- ENCLOSES THE MAIN TEXT AREA ON THE LEFT ---------- */ 
#wrapper-left {
  width: 600px;      

  padding:0;
  display: inline-block;  /* stops expansion of block to the right */

   height:100%; 
  
  background-color:  #fffff8; /* Off-white  */
  float: left;
						/* border: 2px solid blue; */
}
/*  ---------   ENCLOSES NAVIGATION BAR ON RIGHT ---------- 
 * The navigation bar is fickle and when dimensions of other
 * objects (wrappers etc) are change the navigation bar may disapper.
 * For example, it may be shown below the main waindow.   
 */
#wrapper-right {
  width: 300px; /* 280px; */

  padding-right: 10px; /* This keep accordion away from right edge */
  height:100%;  
  float: right;
  background-color: white;
  margin-left: 15px;
  text-align: left;
		/* border: 2px solid orange;/* !!!!!! */  
  }
    

/* --------------- ICON BOX AT TOP ------------------- */

#icon-box {
  position: relative;
  top:0;
  left:0;
  width: 600px; 
  height: 105px;
  padding: 0;
  background-color:  #ffcc66; /* white; */ 
  overflow: hidden; /* add this to contain floated children */
}

#icon-on-left {
  width: 230px;
  float:left;
  display: inline-block;  /* stops expansion of block to the right */
        
  padding-left:15px;
  background-color:  #ffcc66; /* white; */ 
        /*                  border: 1px solid orange;   */ 
 }
 
img.icon
{
  opacity:0.95;
  filter:alpha(opacity=95); /* For IE8 and earlier */
}
img.icon:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}
 
#box-on-right {
  height:100px;
  width:300px;
  float:right;
  /*                         border: 1px solid green; */ 
}
                                                                                                                
/* Used for box containing quotes */

p.text-in-icon-box { 
  display:inline-block;
    color: #8e292a;  /*  reddish  */
  font-size: 12px;
  font-weight: bold;
  text-align:center;
  padding-left:0px;
  padding-right:15px;
  padding-bottom:15px;
}

/* Used for box with phone number */
p.text-in-icon-box-large { 
  display:inline-block;
    color: #8e292a;  /*  redish  */
  font-size: 16px;
  font-weight: bold;
  text-align:center;
  padding-left:0px;
  padding-right:15px;
  padding-bottom:15px;
}



 
/* ----------------------- End of icon-box -------------------------- */


/* Used as a gap between the icon box and the content area */
#horizontal-gap {
  width:600px;
  height: 15px;  
  clear:both;
  background-color:   black; /* #dbd1c8; ############## */
 /*		border: 2px solid red;  */  
}

/* Used as a gap between the content area indow and the navigation area ...................
#vertical-gap {
  width:15px;
  height: 600px; 
  clear:both;
    background-color:#dbd1c8;
    border: 2px solid purple; 
}
*/


/* NO LONGER USED  page and wrap */

#column-single  {
  float:left;
  width: 580px;  /* 88888888888888 --- WHY WHY WHY NOT 600 ---   88888888888*/ 
  min-height:100%;  
  padding: 10px; 
  text-align:left; 
  background-color:  #fffff8; /* Off-white */
  /*            border: 1px solid red; */   
}

/* Encloses the content area under the logo
 * !!!!!! SOMETHING WRONG.
 * It doesn't but only forms a small rectangle at the top.
 * !!!!!! Maybe doesn't do anything?
 */
#two-column  {
   width: 600px; 
/*     min-height:100%;  /* This had no effect */
  padding: 0px; 
  margin: 0px;
  background-color: #fffff8; /* Off-white */
  /*             border: 1px solid purple;  */       
}


#column-left {
  float:left;         
  width: 275px; 
  min-height:100%; 
  margin:0px;
  padding: 10px;
  text-align:left; 
  background-color: #fffff8; /* Off-white */
/*                              border: 2px solid black;   */
}

#column-right {
  float:left;         
  width: 275px;
  min-height:100%;  /* <<<<<<<<<<<<<<<< added */
  padding:10px;
  text-align:left; 
  background-color: #fffff8; /* Off-white# */
   /*                        border: 2px solid red;  */        
}


 


#column-nav-with-background  {
  float:left;
  width: 275px; /* 250px; */ 
  margin: 0px;
  padding-left: 10px; 
  text-align:left; 
  background-color:   #fffff8; /* Off-white */
  background-image: url("../image/office-with-window_opac50_275x800.jpg"); 
  background-repeat:no-repeat;
                 /*
                 background-attachment:fixed;
                 */
}


#column-nav  {
  float:left;
  width: 275px; /* 250px; */ 
  margin: 0px;
  padding-left: 10px;
  text-align:left; 
  background-color:   #fffff8; /* Off-white */
            /*            border: 1px solid green;    */  
}
/* This has same left margin as the columns ???????????? IS THIS USED?   */
#footer-white {
  clear: both;            
  width:500px;
  padding: 10px;
  text-align:left; 
  margin-left: 0; /* 15px; */
  background-color: white;
}

/* !!!!!!!!!!!! IS THIS CENTERED? IF SO, WHY? */
#footer-grey {
  clear:both;
  width: 600px;
  padding:5px 10px;
  background-color: #afafaf;
}
/* -------------------- VIDEO PAGE -----------------------------*/

/* To contain content with white background */
#wrapvideo {
  margin-left:0 auto;
  margin-right:0 auto;
  text-align:center;   /* Fix for IE */

  margin-top: 10px;
  float: left;
  width: 860px;
  padding: 0;

  background-color: #ffffff;
}


#columnvideo {
  float:left;
  width:  840px; 
  text-align:left; 
  margin-left: 30px;
  padding: 10px;
  text-align:left; 
}

/* The iframe seems to ignore stuff placed here */
iframe.youtube {
  float: left;
  margin:0;
  padding:0px;
  margin-bottom: 10px;
/*        border: 20px solid green;  */ 
      }


/* --------------- LISTS-----------*/

#wrap-list {
  width:230px;
  margin:0px;
  padding: 0px;
  	/*				border: 1px solid red; */ 
 }

ul.bulleted {
      
  list-style-image:  url(../image/bullet_blue.gif);
  list-style-position: inside;

  margin-left:1em;
  padding-left:1em;

}
li.bulleted {
  /* border: 1px dotted red;  */
}




/* Plain vertical list */
ul {
  list-style: none;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
/* margin-bottom: 10px;  */
  padding-left:  2em;  
  text-indent:  -2.5em; 
}

ul.indented {
  list-style: none;

  margin-bottom: 10px;
  padding-left: 1em; /* 2em; */ 
  text-indent:0em; /* 1em; */
}

/* Vertical bulleted list */
ul.bulletedOLD
{
  list-style-image:  url(image/bullet_blue.gif);
  list-style-position: inside;
  margin: 0px;
  
  }



/* A single list per page only, but can be more than one row.
 * Intended for a menu.
 * CURRENTLY NOT USED 
 */
#horizontal_list ul {
  margin:0;
  padding:0;
  font-size: 12px; 
  font-weight: bold;
}
#horizontal_list  ul > li {
  display:inline; 
  list-style-type: disc; 
  padding-left: 10px;
}
#horizontal_list  ul > li > a {
  text-decoration: none;
  display:inline;  
  margin:0;
  padding-left: 15px;
}


.nav-list {
    float:left;
    margin-top:15px;
}

.nav-list li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
    margin:0 15px 0 0;

}

.nav-list li a {
 /*   font-size:18px; */
    font-family: arial;
    color:#b64366;
    text-decoration:none;
  /*  padding:4px 10px 5px 10px; */
  /*  background-image:url('../images/nav_divider.png'); */
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;
    display:block;

}
.nav-list li a:hover{
    border-bottom:2px solid #b64366;
}


/* ------------- TABLE ---------------------------------- */

table {  
      width:500px;
      border:0; 
      cellpadding:4px;
      cellspacing:10px;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      font-size: 12px;      
}
table.on-left {  
      width:500px;
      border:0; 
      cellpadding:4px;
      cellspacing:10px;
      margin-top: 0;
      font-size: 12px;      
}

tr {
   valign: top;
}

th {
  color: #0f0f0f;
  font-weight: bold; 
  margin-right: 15px;
  }
  
td {
      border:0;
      border-width: 0; 
      margin: 0;
      padding: 0;
      cellpadding:0;
      cellspacing:0;
      border-spacing: 0;   
}

/* ------------------------ IMG ---------------------*/ 
img { border: 0;
      border-width: 0; 
      margin: 0;
      padding: 0;
      cellpadding:0;
      cellspacing:0;
      border-spacing: 0; 
 }
 
/* -------------- HEADINGS ------------------------------*/



h1, h2, h3 {
	font-family: Arial; /* "Tempus, Verdana, Arial, sans-serif";  ########  */
	margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    color: color: #F8BF24; /* #8e292a;  /* ############################################### */
	font-weight: bold;
	text-align: left;
	valign: top;
	}
h1 {font-size: 24px; /* ####### */
	}
h2 {font-size: 20px;    /* ####### */
	}
h3 {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 0px;
  }

  
/* ------------- IMAGE ------------------
 * CURRENTLY NOT USED
 */
img.centered-image {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* ------------------ PARAGRAPH -------------------- */
p {
  margin-left: 0;
}


/* A block of centered text of fixed width */
p.block_text {
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

p.centeredtext {   /* >>>>>>>>> Why 30em ? */
  width: 30em;
  margin-left: auto;
  margin-right: auto; 
}



p.small-text-on-right {
  color: black;
  font-size: 10px;
  text-align: right;
}
p.copyright {
  color: black;
  font-size: 10px;
  text-align: center;
}

p.excerpt{
  border: 2px solid #555555; 
  background-color: #ffddaa; /* #ffcc99;  */
  padding: 5px;  

  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

p.announcement{
  border: 2px solid #555555; 
  background-color: #ffddcc;
  padding: 5px;  

  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

/* Large but not too in your face */
p.important {
   color: #555555;
   font-weight: bold;
   font-size: 18px; 
}

/* Large but not too in your face */
p.very-large {
   color: #555555;
   font-weight: bold;
   font-size: 24px; 
}

/* Place at bottom of area. */
p.text-at-bottom {
   color: #ffaa55; /* black;  /* white; /*   */
  /*  font-weight: bold; */
   font-size: 12px; 
   valign: bottom;
}

span.alert {
  font-weight: bold;      
  color: red;
}
 


span.color-one{
               color: #444444;
 }
 
span.color-two{
               color: sienna;
 }
 
span.small-no-para {
  font-size: 10px;
   margin-left: 0;
 }
 
/* By default this is bold but that's too dominating in black
 * so make the color softer that is dark grey.
 */
strong {
  font-weight: bold;      
  color: #afafaf;
}
em {
  font-weight: bold;      
  color: #555555;
 }
 
/* 88888888888888888888888888888888888 IS THIS WISE? WHAT ABOUT bold text that is/nt black? */ 
b {
  color: #444444;
   }
 
/* This is for an in-line header. Use with span */
.inlineheader {
  color: #555555;
  font-weight: bold;
  padding-right: 5px;
}
/* This is for the home link. Use with span */
.home { 
  color: black;
  font-size: 10px;
  text-align:right;
}

p.small {
  font-size: 10px;
   margin-left: 0;
}


/* ------------------ LINK COLORS --------------- */


a {
  text-decoration:   none;
  font-weight: bold;
  }

a:link  { 
 /* color:  red;  #330099;   */
}

a:visited {  
 /* color: #003399; */
} 


a:active   	{
  color: red; /* #0033CC; */
} 

a:hover    	{
  color: orange;
}


/*
img.adjusted {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
  }
 */