﻿/* body
{
	font-family: Arial;
}
*/
h1.H1Header
{
	font-family: Arial;
	font-size: 12pt;
	text-align: center;
	color: #336699;
	margin: 0px;
	padding: 0px;
}
h1.H1HeaderExtraLargeOld
{
	font-family: Arial;
	font-size: 14pt;
	text-align: center;
	color: #336699;
	margin: 0px;
	padding: 0px;
}
h1.H1HeaderExtraLarge
{
	font-family: Arial;
	font-weight: bold;
	font-size: 13pt;
	text-align: center;
	background-color:#EEEEEE;
	color: #666;
	margin-top:0px;
	margin-bottom: 15px;
	padding: 6px;
	color: teal;
}
h1.H1InsideHeader
{
	font-family: Arial;
	font-weight: bold;
	font-size: 10pt;
	text-align: left;
	background-color:#EEEEEE;
	margin-top:0px;
	margin-bottom: 15px;
	padding: 6px;
	color: teal;
}
.td
{
	vertical-align: top;
	text-align: left;
}

.MyHLink
{
	color: teal;
}
a.MyHLink:link {
	color: teal;
}
a.MyHLink:visited {
	color: teal;
}
a.MyHLink:hover {
	color: teal;
}
a.MyHLink:active {
	color: teal;
}

.TopTable
{
	border-style: solid;
	border-color:Silver;
	border-width:0px;
	border-spacing:0
	
}
.Heading
{
	color: teal;
	font-weight: bold;
	vertical-align: top;
	text-align: left;
}

.HeadingWhite
{
	color: white;
	font-weight: bold;
	vertical-align: top;
	text-align: left;
}

.BodyText
{
	color: teal;
	vertical-align: top;
	text-align: left;
}

a.BodyText:link {
	color: teal;
}
a.BodyText:visited {
	color: teal;
}
a.BodyText:hover {
	color: teal;
}
a.BodyText:active {
	color: teal;
}

.BodyTextRight
{
	color: teal;
	vertical-align: top;
	text-align: right;
}
.BodyTextNumeric
{
	color: teal;
	vertical-align: top;
	text-align: right;
}
.BodyTextBold
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	float:left
}
a.BodyTextBold:link {
	color: teal;
}
a.BodyTextBold:visited {
	color: teal;
}
a.BodyTextBold:hover {
	color: teal;
}
a.BodyTextBold:active {
	color: teal;
}

.BodyTextBoldRight
{
	color: teal;
	vertical-align: top;
	text-align: right;
	font-weight: bold;
	float:right
}
a.BodyTextBoldRight:link {
	color: teal;
}
a.BodyTextBoldRight:visited {
	color: teal;
}
a.BodyTextBoldRight:hover {
	color: teal;
}
a.BodyTextBoldRight:active {
	color: teal;
}
.BodyTextBlueBold
{
	color: #2b6298;
	font-size:22px;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
	float:left
}
.BodyTextItalic
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-style: italic;
}
.BodyTextItalicSmall
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-style: italic;
	font-size:10px;
}

.BodyTextItalicBold
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-style: italic;
	font-weight: bold;
}

.BodyTextBlack
{
	color: black;
	vertical-align: top;
	text-align: left;
}
.BodyTextBlackBold
{
	color: black;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
}
.BodyTextBlackBoldCenter
{
	color: black;
	vertical-align: top;
	text-align: center;
	font-weight: bold;
}


.BodyTextLeft
{
	color: teal;
	vertical-align: top;
	text-align: Left;
}
.BodyTextCenter
{
	color: teal;
	vertical-align: top;
	text-align: center;
}
a.BodyTextCenter:link {
	color: teal;
}
a.BodyTextCenter:visited {
	color: teal;
}
a.BodyTextCenter:hover {
	color: teal;
}
a.BodyTextCenter:active {
	color: teal;
}
.BodyTextLarge
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-size: 22px;
}
.BodyTextMedium
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-size: 20px;
}
.BodyTextExtraLarge
{
	color: teal;
	vertical-align: top;
	text-align: left;
	font-size: 28px;
}
.LoginLogout
{
	color: teal;
	vertical-align: top;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	text-indent: 5px;
	right: 5px;
}
.Error
{
	color: Red;
	vertical-align: top;
	text-align: left;
}
.MenuTD
{
	vertical-align: middle;
	background-color: #336699;
	margin:0px;
	margin-bottom:0px;
}
.MenuBase
{
	color: white;
	margin: 0px;
	font-family: Arial;
	font-weight: bold;
	font-size: 12px;
}

.MenuHover
{
	color: yellow;
}
.MenuSelected
{
	color: yellow;
}

.MenuBaseDyn
{
	color: white;
	background-color: #336699;
	margin: 0px;
	font-family: Arial;
	font-weight: bold;
	font-size: 12px;
}

.MenuHoverDyn
{
	color: yellow;
	background-color: #336699;
}
.MenuSelectedDyn
{
	color: yellow;
	background-color: #336699;
}

.Intro
{
	color: teal;
	font-family: Verdana, Arial, Tahoma;
	vertical-align: top;
	text-align: left;
}
.GalleryText
{
	color: teal;
	font-family: Verdana, Arial, Tahoma;
	vertical-align: top;
	text-align: left;
}

.TableClear
{
	vertical-align: top;
	height: auto;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	border-bottom-style: none;
}
.TableStd
{
	vertical-align: top;
	height: auto;
	/*
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
*/
}
.TD.TDRow1
{
	width: 50pc;
	vertical-align: top;
	text-align: left;
	background-color: #EFF3FB;
}
.TD.TDRow2
{
	width:50pc;
	vertical-align:top;
	text-align:left;
	background-color: white;
}
.TD.TDRowHdr
{
	width:50pc;
	vertical-align:top;
	text-align:left;
	background-color:#507CD1;
}
.TD.TDRowHdrCentre
{
	width: 50pc;
	vertical-align: top;
	text-align: Center;
	background-color: #507CD1;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
	color: white;
}
.TDSelectedTab
{
background-color:#507CD1;
}
.TDUnSelectedTab
{
background-color: White;
}

.OrangeBG
{
	background-image: url(Images/Orange.jpg);
	background-repeat: repeat-x;
	background-color: transparent;
}
.FloatingInfo
{
	float: right;
	border-style: groove;
	border-width: medium;
	display: block;
	position: relative;
	background-color: #C0C0C0;
	height: 200px;
	width: 200px;
	
}
.StandOutCell
{
	background-color: #E4E4E4;
	font-family: Arial, Helvetica, sans-serif;
	font-size: inherit;
	color: #008080;
	font-style: italic;
	font-weight: lighter;
}
.UpdateNotification
{
	color: navy;
	font-family: Verdana, Arial, Tahoma;
	vertical-align: text-bottom;
	text-align: left;
	height: 22px;
	border-top-style: ridge;
	border-right-style: ridge;
	border-left-style: ridge;
	background-color: white;
	border-bottom-style: ridge;
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-weight: bold;
}

a.lnkBoy:active
{
	background-position: center -23px;
	background-repeat: no-repeat;
	background-image: url('Boy.jpg');
	margin: -10px -10px -10px -10px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #00FFFF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkBoy:link
{
	background-position: center -23px;
	background-repeat: no-repeat;
	background-image: url('Boy.jpg');
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #0000FF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkBoy:visited
{
	background-position: center -23px;
	background-repeat: no-repeat;
	background-image: url('Boy.jpg');
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #0000FF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkBoy:hover
{
	background-position: center -23px;
	background-repeat: no-repeat;
	background-image: url('Boy.jpg');
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #000000;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}
                                           
a.lnkGirl:active
{
	background-position: center -23px;
	background-image: url('Girl.jpg');
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #FF99FF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkGirl:link
{
	background-position: center -23px;
	background-image: url('Girl.jpg');
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #FF99FF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkGirl:visited
{
	background-position: center -23px;
	background-image: url('Girl.jpg');
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #FF99FF;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

a.lnkGirl:hover
{
	background-position: center -23px;
	background-image: url('Girl.jpg');
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0em 1.2em;
	font: 12pt "arial";
	color: #000000;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0px;
	height: 50px;
	width: 150px;
}

.TDChildContainer
{
	vertical-align: top;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: capitalize;
	color: teal;
}
a.TDChildContainer:link {
	color: teal;
}
a.TDChildContainer:visited {
	color: teal;
}
a.TDChildContainer:hover {
	color: teal;
}
a.TDChildContainer:active {
	color: teal;
}

.QuestionnaireLink
{
	width: 40px;
	height: 40px;
}

a.QuestionnaireLink:link {
	color: teal;
}
a.QuestionnaireLink:visited {
	color: teal;
}
a.QuestionnaireLink:hover {
	color: teal;
}
a.QuestionnaireLink:active {
	color: teal;
}

.thumbnails img
{
height:40px;
width:40px;
}

img.Photo
{
	border-style: groove ridge ridge groove;
	border-width: thin;
	border-color: #CCCCCC #808080 #808080 #CCCCCC;
}

/* Animated Collipsible Panel */
.squarebox {
    width: 100%;
    border: solid 1px #336699;
    text-align: center;
    overflow: hidden; }
.squareboxgradientcaption {
    color: #ffffff;
    padding: 5px;
    background-image: url('gradient_blue.png');
    background-repeat: repeat-x; }
.squareboxcontent {
    background-color: #f5f5f5;
    padding: 10px;
    overflow: hidden;
    border-top: solid 1px #336699; }
    
.Timeout
{
	border: thin double Black;
	color: #FFFFFF;
	font-size: medium;
	font-weight: bold;
	margin: 10px;
	background-color: #FF5050;
	position: absolute;
	top: 300px;
	left: 70px;
	z-index: 1000;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

    
/* From ben */

body {
background:#FFFFFF;  
margin:0px auto; 
padding:0;
/* font:normal 67.5% "Trebuchet MS", verdana, Arial,Helvetica,sans-serif; */
font:normal 80% "Trebuchet MS", verdana, Arial,Helvetica,sans-serif;
color:teal;
}
#mission
{
	margin: 15px auto;
	width: 100%;
	height: 75px;
}

#maincontainerhome{

margin:0px auto;
width:740px;
height: 528px;
}

#maincontainer{

margin:0px auto;
width:740px;
height: 450px;
}
#final /* BB */
{
	margin: 0px auto;
	width: 740px;
	height: 175px;
	top: auto;
}

/*HOME*/
#homeintro {
margin: 05px 0px;
padding: 05px 20px;
background:url(images/background-mum-baby-toys.jpg) no-repeat bottom;
text-align:left;
}
#homeintro h1 {
display:block;
width: 335px;
padding:0px;
margin:0px 0px 20px 0px;
color:#008080;
font-size: 22px;
font-family: "Trebuchet MS", verdana, Arial,Helvetica,sans-serif;
font-weight:bold;
}


#homeintro p{
padding:0px;
margin:0px;
}
#homeintro ul {
width: 290px;
list-style:none;
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
}
#homeintro li {

padding:0px 0px 20px 35px;
margin:0px;
color:#008080;
font-size:15px;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
background-image: url(images/tick.gif);
background-repeat: no-repeat;
background-position: 0px 7px;

}
#homeabout {
margin: 20px 0px;
padding: 20px 20px 20px 300px;
background:url(images/background-kids.jpg) no-repeat bottom;
text-align: left;
}

#homeabout h2 {
color:#008080;
font-size: 22px;
font-family: "Trebuchet MS", verdana, Arial,Helvetica,sans-serif;
font-weight:bold;
padding:0px;
margin:0px 0px 20px 0px;
}

#homeabout p{
color:#008080;
font-size:15px;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
padding:0px;
margin:0px 0px 15px 0px;
	height: 120px;
}



a.bigbutton {
font-size:15px;
font-weight:bold;
width: 246px;
height:23px;
display:block;
padding:12px 0px 12px 40px;
margin:0px;
background: url(images/bluebutton.gif);
color:#FFFFFF;
text-decoration:none;
}

a.bigbutton:hover {
text-decoration:underline;
}


/*How Speech Quest Works*/
#process {
height:362px;
margin: 20px 0px 20px 0px;

}
.stepcolumn {

width:218px;
height:418px;
float:left;
padding:0 39px 0 0;
background: url(images/column-divide.gif) repeat-y right top;
}

.stepcolumn h2{

color:#008080;
font-size:15px;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;

margin:0px 0px 15px 0px;
display:block;
padding:10px 0px 10px 45px;
}

.stepcolumn h2.one{

background:url(images/process1.gif) no-repeat left top;
}
.stepcolumn h2.two{

background:url(images/process2.gif) no-repeat left top;
}
.stepcolumn h2.three{

background:url(images/process3.gif) no-repeat left top;
}

.stepcolumn p{

color:#008080;
font-size:13px;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;
padding:0px;
margin:15px 0px 15px 0px;
text-align:left;
}
.stepcolumn.first {

}
.stepcolumn.last {

padding:0 0px 0 0;
background: none;

}
a.medbutton {
font-size:15px;
font-weight:bold;
width: 145px;
height:23px;
display:block;
padding:12px 0px 12px 40px;
margin:0px;
background: url(images/bluebutton-med.gif) no-repeat top left;
color:#FFFFFF;
text-decoration:none;
}

a.medbutton:hover {
text-decoration:underline;
}

a.medbutton2 {
font-size:15px;
font-weight:bold;
width: 145px;
height:23px;
display:block;
padding:12px 0px 12px 40px;
margin:0px;
background: url(images/bluebutton-med2.gif) no-repeat top left;
color:#FFFFFF;
text-decoration:none;
}

a.medbutton2:hover {
text-decoration:underline;
}
/*process menu */
#processmenu {
border:1px solid #ddd;
height:37px;
padding:10px;
}


#processmenu .stepcolumn h2{

color:#336699;
font-size:14px;
font-family:Arial,Helvetica,sans-serif;
font-weight:bold;

margin:0px 0px 15px 0px;
display:block;
padding:10px 0px 10px 40px;
}

#processmenu .stepcolumn h2.first{

margin:0px 0px 15px 20px;
padding:10px 0px 10px 0px;
}
#processmenu .stepcolumn h2.one{

background:url(images/process1.gif) no-repeat left top;
}
#processmenu .stepcolumn h2.two{

background:url(images/process2.gif) no-repeat left top;
}
#processmenu .stepcolumn h2.three{

background:url(images/process3.gif) no-repeat left top;
}

#processmenu .stepcolumn h2 a{
color:#008080;
text-decoration:underline;
}

#processmenu .stepcolumn {

width:125px;
float:left;
margin:0px;
padding:0 30px 0 0;
background: url(images/rightarrow.gif) no-repeat right 8px;
background:none;
}
#processmenu .stepcolumn.last{


padding:0 0 0 0;
background: none;
}
/* for changing cursor on ASP:BUTTON */
.hoverbutton
{color:Navy;
 background-color:Silver;
 cursor:pointer;
  border-width:1px;
 border-style:Groove;
 font-size:14px;
 font-weight:bold;
 height:28px;
 width:250px;    
}
.static
{color:White;
 background-color:Navy;
 border-width:1px;
 border-style:Groove;
 font-size:14px;
 font-weight:bold;
 height:28px;
 width:250px;    
 }
/* end of button cursor */
