*
{
	margin: 0em;
	padding: 0em;
}

h1,h2
{
}

HTML {
	BACKGROUND: url('images/bg.gif') #dadada repeat-y center top;
}

body
{
	font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
	font-size: 9.4pt;
	color: #000;
	BACKGROUND: url('images/bg.gif') #dadada repeat-y center top;

}

a
{
	color: #046DB3; /* blue 0066DE      red F0341A */
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
	color: #F0341A;   /*green 669933*/
}
	

/* categories and menu */

a.nav:link
{
	color: #046DB3; /* blue 0066DE      red F0341A */
	text-decoration: underline;
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}

a.nav:visited
{
	color: #046DB3; /* blue 0066DE      red F0341A */
	text-decoration: underline;
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}

a.nav:hover
{
	text-decoration: none;
	color: #F0341A;   /*green 669933*/
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}

/* a.nav:visted   a.nav:active  a.nav:active */


/* articles */

a.nav2:link
{
	color: #046DB3; /* blue 0066DE      red F0341A */
	text-decoration: underline;
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}

a.nav2:visited
{
	color: #046DB3; /* blue 0066DE      red F0341A */
	text-decoration: underline;
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}

a.nav2:hover
{
	text-decoration: none;
	color: #F0341A;   /*green 669933*/
	font-size: 11pt;
	font-weight: bold;
	font-family: Arial, "Trebuchet MS", sans-serif;
}



div#testimonials {
	font-size: 0.91em;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
	padding: 8px;
	background-color: #EEFFEF;
	border: 1px solid #BDE2BE;
	line-height: 1.3em;
    width: 93%;
  }


div#notice_green {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #EEFFEF;
	border-top: 2px solid #BDE2BE;
	border-bottom: 2px solid #BDE2BE;
	line-height: 1.3em;
    width: 90%;
  }

div#notice_grey {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #F5F5F5;
	border-top: 2px solid #EAEAEA;
	border-bottom: 2px solid #EAEAEA;
	line-height: 1.3em;
    width: 325px;
  }

div#notice_blue {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #DFEDF6;
	border-top: 2px solid #98C4E0;
	border-bottom: 2px solid #98C4E0;
	line-height: 1.3em;
    width: 90%;
  }

div#notice_yellow {
	margin-bottom: 20px;
	padding: 8px 8px 8px 22px;
	background-color: #FFF6BF;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	line-height: 1.3em;
    width: 90%;
  }

div#search_results {
	margin: 0.5em 0.5em 0em 0.5em;
	padding: 1.5em 3em 1.5em 1.5em;
	width: 930px;
}


/* Outer */

#outer
{
	MIN-HEIGHT: 100%; 
	MARGIN: 0px auto; 
	WIDTH: 978px; 
	POSITION: relative; 
	HEIGHT: 100%; 
	TEXT-ALIGN: left
}

/* Header */

#header
{
	position: relative;
	background: #0589E0 url('images/a11.gif') bottom left repeat-x;
	height: 89px;
	padding-left: 2em;
}

#header h1
{
	position: absolute;
	top: 20px;
	font-size: 2.2em;
	letter-spacing: -0.05em;
	left: 28px;
}

#header h1 a
{
	color: #fff;
	text-decoration: none;
}

#header h1 a:hover
{
	color: #fff;
	text-decoration: underline;
}



#header h2
{
	position: absolute;
	font-size: 0.8em;
	top: 52px;
	color: #FFFFFF;
	left: 29px;
}


/* Menu */

#menu
{
	position: absolute;
	top: 17px;  /* WAS: 37px */
	right: 3em;
}

#menu ul
{
	list-style: none;
}

#menu li
{
	display: inline;
	padding-left: 1.1em;
	margin-left: 1em;
	border-left: dotted 1px #E0E8EF;
}

#menu li.first
{
	border: 0em;
	margin-left: 0em;
	padding-left: 0em;
}

#menu li a
{
	color: #fff;
	padding: 0.1em;
	text-decoration: none;
}

#menu li a:hover
{
	text-decoration: underline;
}

/* Content */

#content
{
	line-height: 1.6em;
}


#content p
{
	margin-bottom: 1.5em;
}

#content h1
{
	padding-bottom: 0.3em;
	margin-bottom: 0.5em;
	color: #000000;
	font-size: 1.7em;
}

#content h2,h3,h4,h5,h6,h7
{
	margin-bottom: 1em;
	border-bottom: dashed 1px #dfdfdf;
	padding-bottom: 0.3em;
	color: #000000; /* blue 0589E0 */
	font-family: "Trebuchet MS";
}

#content h2
{
	font-size: 1.8em; /* WAS 1.8 */
}


#content h3
{
	font-size: 1.5em;
}

#content h4
{
	font-size: 1em;
	color: #000000;
	border-bottom: none;
}

#content h5
{
	font-size: 1.4em;
}

#content h6
{
	font-size: 1.8em;
	border-bottom: none;
	margin-bottom: 0.4em;
	padding-bottom: 0em;
}

#content h7
{
	color: #333399;
	font-size: 1.7em;
	border-bottom: none;
	margin-bottom: 0.4em;
	font-weight: bold;
	padding-bottom: 1em;

}


#content ul
{
	margin-bottom: 1.5em;
	padding-left: 1em;
	list-style: square;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 10px;
}


#navlist2 ul
{
	margin-bottom: 1.5em;
	padding-left: 0em;
	list-style: square;
}
#navlist2 li
{
display: block;
margin: 0;
padding: 0;
list-style-type: none;
/*padding-right: 5px;*/
}

#navlist3 ul
{
float:right;
margin: 0;
padding: 0;
list-style-type: none;
}

#navlist3 li { margin: 0 0 .2em 0;}

#navlist3 a
{
display: block;
color: #FFF;
background-color: #777777;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navlist3 a:hover
{
background-color: #BBBBBB;
/*	background: #004778 url('images/d7.jpg') bottom left repeat-x;*/
color: #FFF;
}



#active
{
color:#888888;
}



#content blockquote
{
	margin-bottom: 1.5em;
	padding: 0.75em 0.75em 0.75em 1.5em;
	border-left: solid 0.75em #ffffff;
	background: #FFFFFF;
}

#content blockquote p
{
	margin-bottom: 1em;
}

#content table
{
	margin-bottom: 1.5em;
	border-collapse: collapse;
	text-align: left;
}

#content table th
{
	font-weight: bold;
	padding: 0.5em;
}

#content table td
{
	padding: 0.5em;
	border-right: solid 1px #fff;
}

#content table tr.rowH
{
	color: #fff;
	background: #006192 url('images/a8.gif') top left repeat-x;
	border-right: solid 1px #fff;
}

#content table tr.rowA
{
	background: #F8F8F8 url('images/a6.gif') top left repeat-x;
	border-top: solid 1px #fff;
	color: inherit;
}

#content table tr.rowB
{
	background: #FDFDFD url('images/a7.gif') top left repeat-x;
	border-top: solid 1px #fff;
	color: inherit;
}

#content table.vocabulary
{
	padding:0px 0px 0px 0px;
}


#content table.vocabulary td
{
	padding:0.3em;
	/* border: solid 1px #efefef; */
	vertical-align: top;
}


#content table.verbs
{
	padding:0px 0px 0px 0px;
}

#content table.verbs td
{
	padding:0.18em;
	border: solid 1px #efefef;
}

#content table.verbs td.title
{
	font-size: 14px;
	font-family: Arial, Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	color: #000;
}

#content table.verbs tr.rowA
{
	background: #efefef;
}


/* Primary Content */

#primaryContentContainer
{
	background-color: #fff;
	float: right;
	margin: 2em 0em 0 0;
/*	margin: 0em -19em 0em -19em;*/
	width: 700px;
}

#primaryContent
{
/*	margin: 1.5em 19em 0em 17.25em;
	padding: 1.5em 3em 1.5em 3em; */
	width: 700px;
}

/* Secondary Content */

#secondaryContent
{
	position: relative;
	float: left;
	width: 14em;
	padding: 2.5em 2em 1.5em 2em;
	background: #fff url('images/a1.gif') top right repeat-y;
}

#secondaryContent .xbg
{
	position: absolute;
	right: 0em;
	bottom: -64px;
	background: #fff url('images/a3.gif') top right no-repeat;
	height: 64px;
	width: 128px;
}

#secondaryContent ul
{
	font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
	font-size: 9pt;
	color: #000;

}

#secondaryContent h3
{
	font-family: Arial, Georgia, "Trebuchet MS", sans-serif;
	font-size: 10pt;
	color: #555555;
	border-bottom: none;
	padding-bottom: 0em;

}




/* Tertiary Content */

#tertiaryContent
{
	position: relative;
	float: right;
	width: 25px;
/*	padding: 3em 2em 1.5em 2em; */
	background: #fff;

}

#tertiaryContent .xbg
{
	position: absolute;
	left: 0em;
	bottom: -64px;
	background: #fff; /*url('images/a4.gif') top left no-repeat; */
	height: 64px;
	width: 25px;

}

/* Ads */

#adOnRight
{
	position: relative;
	float: right;
	width: 345px;
/*	margin-left: 10px;
	padding: 3em 2em 1.5em 2em; */
	background: #fff;

}

#adInMiddle
{
	position: relative;
	float: left;
	width: 210px;
/*	margin-righht: 10px;
	padding: 3em 2em 1.5em 2em; */
	background: #fff;

}




/* Footer */

#footer
{
	position: relative;
	z-index: 1;
	border-top: dashed 1px #dfdfdf;
	padding: 1em 0em 2em 0em;
	margin: 1em 2em 0em 2em;
	text-align: center;
}

.clear
{
	clear: both;
}

.word
{
	font-weight: bold;
	color: #000;
	font-size: 14px;
}

.transcription
{
    font-weight: normal;
    color: #669933;
	font-size: 13px;
}

.style1 {
	color: #009900;
	font-weight: bold;
}
.style2 {
	color: #0000FF;
	font-weight: bold;
}







/*

 SoundManager 2: In-page MP3 player example
 ------------------------------------------

 Clicks on links to MP3s are intercepted via JS, calls are
 made to SoundManager to load/play sounds. CSS classes are
 appended to the link, which are used to highlight the
 current play state and so on.

 Class names are applied in addition to "sm2_link" base.

 Default:

 sm2_link

 Additional states:

 sm2_playing
 sm2_paused

 eg.

 <!-- default -->
 <a href="some.mp3" class="sm2_link">some.mp3</a>

 <!-- playing -->
 <a href="some.mp3" class="sm2_link sm2_playing">some.mp3</a>


 Note you don't require ul.graphic / ul.flat etc. for your use
 if only using one style on a page. You can just use .sm2_link{}
 and so on, but isolate the CSS you want.

 Side note: Would do multiple class definitions eg.

 a.sm2_default.sm2_playing{}

 .. except IE 6 has a parsing bug which may break behaviour,
 applying sm2_playing {} even when the class is set to sm2_default.


 If you want to make your own UI from scratch, here is the base:

 Default + hover state, "click to play":

 a.sm2_link {}
 a.sm2_link:hover {}

 Playing + hover state, "click to pause":

 a.sm2_playing {}
 a.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 a.sm2_paused {}
 a.sm2_paused:hover {}


*/

/* two different list types */

ul.flat {
 list-style-type:none;
 padding-left:0px;
}

ul.flat li,
ul.graphic li {
 padding-bottom:1px;
}

ul.flat li a {
 display:inline-block;
 padding:2px 4px 2px 4px;
}

ul.graphic {
 list-style-type:none;
 padding-left:0px;
 margin-left:0px;
}

/* background-image-based CSS3 example */

ul.graphic {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.graphic li {
 margin-bottom:2px;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
 /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 display:inline-block;
 padding-left:22px;
 min-height:16px;
 border:3px solid #666;
 background-color:#666;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 padding:0px 3px 0px 20px;
 min-width:19em;
 _width:19em;
 text-decoration:none;
 font-weight:bold;
 color:#fff;
 text-shadow: 0 0 0 #000; /* stupid Safari "fat" font rendering tweak */
}

ul.graphic li a.sm2_link {
 /* safari 3.1+ fun (or, proprietary crap. TBD.) */
 -webkit-transition-property: hover;
 -webkit-transition: all 0.15s ease-in-out;
}

ul.graphic li a.sm2_paused:hover,
ul.graphic li a.sm2_link:hover {
 background:#333 url(../image/icon_play.png) no-repeat 0px 50%;
 _background-image:url(../image/icon_play.gif); /* IE 6 */
 border-color:#333;
}

ul.graphic li a.sm2_paused {
 background-color:#999;
 border-color:#999;
}

ul.graphic li a.sm2_paused:hover {
 background:#999 url(../image/icon_play.png) no-repeat 0px 50%;
 _background-image:url(../image/icon_play.gif);
 border-color:#999;
}

ul.graphic li a.sm2_playing,
ul.graphic li a.sm2_playing:hover {
 background:#336699 url(../image/icon_pause.png) no-repeat 0px 50%;
 _background-image:url(../image/icon_pause.gif);
 border-color:#336699;
 text-decoration:none;
}

/* hide button while playing?
ul.graphic li a.sm2_playing {
 background-image:none;
}
*/
/* flat CSS example */

ul.flat a.sm2_link {
 /* default state: "a playable link" */
 border-left:6px solid #999;
 padding-left:4px;
 padding-right:4px;
}

ul.flat a.sm2_link:hover {
 /* default (inactive) hover state */
 border-left-color:#333;
}


ul.flat a.sm2_playing {
 /* "now playing" */
 border-left-color:#6666ff;
 background-color:#000;
 color:#fff;
 text-decoration:none;
}

ul.flat a.sm2_playing:hover {
 /* "clicking will now pause" */
 border-left-color:#cc3333;
}

ul.flat a.sm2_paused {
 /* "paused state" */
 background-color:#666;
 color:#fff;
 text-decoration:none;
}

ul.flat a.sm2_paused:hover {
 /* "clicking will resume" */
 border-left-color:#33cc33;
}