/* This is a comment in CSS. */
/*     */

/*
Multiple-line
CSS
comment
*/

/*  Styling Body Background colour is HEX: #D5F0E6   RGB: 213, 240, 230   */

body {
background-color: #C6E4EE;
padding: 10px;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #000000;
font-size: 12px;
   }


/* Setting Paragraph Fonts   */

p.fourteenpx {font-size:14px;}
p.smm {font-size:medium; font-weight:bold;}

/*  Centering Text   */

h1.center {text-align: center}
h2.center {text-align: center}
h3.center {text-align: center}
h4.center {text-align: center}
h5.center {text-align: center}
p.center {text-align: center}


/* 
 This adds styling for IPA characters; in page use 
   <span class="ipa"></span>    
*/

.ipa {font-family: "Lucida Sans Unicode";
      font-weight: bold
      }

/* Set Border for Images in Links 
a img {
border: 2px solid #00000;
       }
*/

/* Set Masthead Text */
#masthead {
    font-family: Verdana, Arial, Helvetica, serif;
	font-size:12px;
           }
/* Set Masthead Links */
#masthead a {
text-decoration: none;
font-weight: bold;
display: block;
padding: 2px 3px 2px 3px;
/*  background-color: #D5F0E6;   */
background-color: #9EB6BE;
color: #000000;
border-top: 1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
     }

/* Masthead Hover State */
#masthead a:hover {
background-color: #8BA0A7;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
    }

#3colbox {
float:left;
    }
#navigation {
float: left;
width: 120px;
    }
#threecolbox {
float:left;
    }
#navigation {
float: left;
width: 120px;
    }


#contentColumn {
float: left;
width: 70%;
padding: 0 10px 0 20px;
margin-left: auto;
margin-right: auto;
    }

#adColumn {
float:right;
width: 130px;
padding: 0 0 0 5px;
    }


/* Setting the Navigation List */
#navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 120px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
   }

#navigation li {
padding: 0;
margin: 0;
   }


/* Setting Navigation Links */
#navigation a {
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
display: block;
padding: 3px 12px 3px 8px;
background-color: #9EB6BE;
/*  #A894A2   */

color: #000000;
border-top: 1px solid #dddddd;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #dddddd;
   }

#navigation a:hover {
background-color: #8BA0A7;
border-top: 1px solid #333333;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
   }

#navigation li li a {
text-decoration: none;
text-transform: lowercase;
font-weight: normal;
padding: 3px 3px 3px 3px;
background-color: #8FBC8F;
color: #111111;
    }



#navigation li li a:hover {
background-color: #81A181;
   }
/*   #navigation li li a:hover {
background-color: #20B2AA;
   }  */

 


#navigation li li a:active {
padding: 2px 13px 4px 7px;
background-color: #444444;
color: #eeeeee;
border-top: 1px solid #333333;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #333333;
   }

/* Setting Content Column Links */
#contentColumn a:link {
color: #4F5C67;
   }
/*    
#contentColumn a:visited {
  color: #7E95AA;
  }
 */

#contentColumn a:hover {
  color: #4F5B5F;
   }
/*     
#contentColumn a:active {
  color:#000000;
  }
*/


/* Setting Sitemap Listings Links */

#sitemapListings a:link {
   color: #4F5C67;
   }


#sitemapListings a:visited {
  color:#7E95AA;
  }

#sitemapListings a:hover {
  color: #5F96CA;
  font-weight: bold;
  }


#sitemapListings a:active {
  color:#000000;
  }




/* Setting Vowel Chart Specs    */
#vowelChart {
    font-family: "Lucida Sans Unicode";
    font-weight: bold;
    font-size: 140%;    
           }

/* Setting Vowel Chart Links */

#vowelChart a:link {
    color: #20B2AA;
      }
#vowelChart a:visited {
    color:#20B2AA;
    }


/* Setting Ad Column Links */
#adColumn a:link {
color: #4F5C67; 
   }

#adColumn a:visited {
  color:#4F5C67;
  }

#adColumn a:hover {
  color: #5F96CA;
/*
background-color: darkseagreen;
  */ 
   }

#adColumn a:active {
  color:#000000;
  }