/* 

Tegic T9 Solutions CSS Document 

*/

body {
	background:#c9dfe7;
	font-family: "Trebuchet MS", Lucida Grande, Arial, Helvetica;
	color:#666;
}
img {
	display: block;
}
.shown {
	display: block;
}
.hidden {
	display: none;
}



/* ///// Arrow Button - Grey and Blue \\\\\\ */
.arrowButton	{
	width:130px;
	font-size:.7em;
	_font-size:.9em;
	margin:10px 0 0 0;
	clear:both;
}

body#play .arrowButton{
	margin:10px 0 0 100px;
}

.blueButton {
	font-size:.7em;
	margin:0;
	padding:5px 0 0 10px;
	width: 150px;
	clear:both;
	height:16px;
}

.arrowButtonLeft,
.blueButtonLeft {
	float:left; 
	width:20px;
}

.arrowButtonRight {
	float:right; 
	width:105px;
}

.blueButtonRight {
	float:right; 
	width:130px;
}

.orangeArrow {
	margin:-13px 5px 0 10px;
	_margin-top:-14px;
	width:4px;
	height:12px;
	float:right;
	background: transparent url("../images/orangeArrow.gif") top no-repeat;
}

.blueButton .orangeArrow {
	margin: -11px 7px 0 10px;
}
	
a.greyButton:link,
a.greyButton:visited {
	color:#666;
	cursor:pointer;
} 	

a.greyButton:hover {
	color:#f60;
	cursor:pointer;
}



/* ///// Play Button \\\\\\ */

p.playCTA a:link,
p.playCTA a:visited {
	margin-top:10px;
	width:53px;
	line-height: 14px;
	display:block;
	background: transparent url("../images/playCTAButton.gif") 0 0 no-repeat;
	clear:both;
	text-indent: -9999px;
} 

p.playCTA a:hover {
	background: transparent url("../images/playCTAButton.gif") 0 -14px no-repeat;
}



/* ///// Back To Top Button \\\\\\ */

p.backToTopButton a:link,
p.backToTopButton a:visited {
	margin-top:10px;
	width:95px;
	line-height: 14px;
	display:block;
	background: transparent url("../images/backToTopButton.gif") 0 0 no-repeat;
	clear:both;
	text-indent: -9999px;
} 

p.backToTopButton a:hover {
	background: transparent url("../images/backToTopButton.gif") 0 -14px no-repeat;
}





/* ///// Background Images \\\\\\ */

#styleSwitchWrapper {
	position: absolute;
	top:0;
	right:0;
	background:#fff;
	padding:10px;
	width:150px;
	height:50px;
	border:1px solid #ccc;
	filter:alpha(opacity=70);
	opacity: .7;
	-moz-opacity: .7;
	font-size:.8em;
}
	

#backgroundTop {
	position:absolute;
	top:0;
	left:0;
	width:632px;
	height:670px;
	background:#fff;
}


#backgroundBottom {
	position:absolute;
	top: 670px;
	left: 0;
	background: transparent url("../images/bg1_bottom.jpg") top no-repeat;
	width:1057px;
	height:304px;
}

#backgroundLeft {
	position:absolute;
	top: 140px;
	left: 7px;
	background: transparent url("../images/bg2_orangeBoxes.jpg") top no-repeat;
	width:180px;
	height:216px;
}

body#home #backgroundLeft,
body#learn #backgroundLeft {
	left:-30px;
	
}

#backgroundRight {
	position:absolute;
	top: 0;
	left: 632px;
	background: transparent url("../images/bg2_rightSide.jpg") top no-repeat;
	width:425px;
	height:670px;
}




/* ///// Logo - Made as H1 for SEO \\\\\\ */
h1#logo a {
	position:absolute;
	top:0;
	left: 0;
	background: transparent url("../images/logo.gif") top no-repeat;
	width:121px;
	height:87px;
	text-indent:-9999px;
	text-decoration:none; /* // Stops Firefox from displaying the underline on windows' machines \\ */
}




/* ///// Languages and Navigation \\\\\\ */
#languages {
	position:absolute;
	top:8px;
	left:463px;
}

#navigation {
	position:absolute;
	top:35px;
	left:151px;
}

#navigation ul,
#languages ul {
	padding:0;
	margin:0;
	list-style:none;
}

#navigation li,
#languages li {
	float:left;
	margin:0;
	padding:0;
}

#navigation li a,
#languages li a {
	display:block;
	text-indent:-9999px;
	text-decoration:none;	
}



/* Main Navigation buttons */

#navigation li.homeButton a {
	width:57px;
	line-height:38px;
}

#navigation li.homeButton a:link,
#navigation li.homeButton a:visited,
#navigation li.homeButton a:hover  {
	background: transparent url("../images/nav/navigation.gif")  0 0 no-repeat;
}

#navigation li.homeButton a:hover {
	background-position: 0 -36px;
}

body#home #navigation li.homeButton a { /* // Body Id Reflects the Page name - Active State \\ */
	background: transparent url("../images/nav/navigation.gif")  0 -72px no-repeat;
}

#navigation li.learnButton a {
	width:56px;
	line-height:38px;
}

#navigation li.learnButton a:link,
#navigation li.learnButton a:visited {
	background: transparent url("../images/nav/navigation.gif")  -57px 0 no-repeat;
}

#navigation li.learnButton a:hover {
	background: transparent url("../images/nav/navigation.gif")  -57px -36px no-repeat;
}

body#learn #navigation li.learnButton a { /* // Body Id Reflects the Page name - Active State \\ */
	background: transparent url("../images/nav/navigation.gif")  -57px -72px no-repeat;
}

#navigation li.playButton a {
	width:51px;
	line-height:38px;
}

#navigation li.playButton a:link,
#navigation li.playButton a:visited {
	background: transparent url("../images/nav/navigation.gif")  -113px 0 no-repeat;
}

#navigation li.playButton a:hover {
	background: transparent url("../images/nav/navigation.gif")  -113px -36px no-repeat;
}

body#play #navigation li.playButton a { /* // Body Id Reflects the Page name - Active State \\ */
	background: transparent url("../images/nav/navigation.gif")  -113px -72px no-repeat;
}


#navigation li.askButton a {
	width:53px;
	line-height:38px;
}

#navigation li.askButton a:link,
#navigation li.askButton a:visited {
	background: transparent url("../images/nav/navigation.gif")  -164px 0 no-repeat;
}

#navigation li.askButton a:hover {
	background: transparent url("../images/nav/navigation.gif")  -164px -36px no-repeat;
}

body#ask #navigation li.askButton a { /* // Body Id Reflects the Page name - Active State \\ */
	background: transparent url("../images/nav/navigation.gif")  -164px -72px no-repeat;
}
	
#navigation li.tellButton a {
	width:51px;
	line-height:38px;
}

#navigation li.tellButton a:link,
#navigation li.tellButton a:visited {
	background: transparent url("../images/nav/navigation.gif")  -217px 0 no-repeat;
}

#navigation li.tellButton a:hover {
	background: transparent url("../images/nav/navigation.gif")  -217px -36px no-repeat;
}

body#tell #navigation li.tellButton a { /* // Body Id Reflects the Page name - Active State \\ */
	background: transparent url("../images/nav/navigation.gif")  -217px -72px no-repeat;
}	

/* Languages Buttons */

#languages li.japaneseButton a {
	width:59px;
	line-height:12px;
}
#languages li.japaneseButton a:link,
#languages li.japaneseButton a:visited {
	background: transparent url("../images/nav/languages.gif")  0 0 no-repeat;
}
#languages li.japaneseButton a:hover {
	background: transparent url("../images/nav/languages.gif")  0 -12px no-repeat;
}
#languages li.chineseButton a {
	width:75px;
	line-height:12px;
}
#languages li.chineseButton a:link,
#languages li.chineseButton a:visited {
	background: transparent url("../images/nav/languages.gif")  -59px 0 no-repeat;
}
#languages li.chineseButton a:hover {
	background: transparent url("../images/nav/languages.gif")  -59px -12px no-repeat;
}

#languages li.portugueseButton a {
	width:101px;
	line-height:12px;
}
#languages li.portugueseButton a:link,
#languages li.portugueseButton a:visited {
	background: transparent url("../images/nav/languages.gif")  -134px 0 no-repeat;
}
#languages li.portugueseButton a:hover {
	background: transparent url("../images/nav/languages.gif")  -134px -12px no-repeat;
}

#languages li.englishButton a {
	width:77px;
	line-height:12px;
}
#languages li.englishButton a:link,
#languages li.englishButton a:visited {
	background: transparent url("../images/nav/languages.gif")  -235px 0 no-repeat;
}
#languages li.englishButton a:hover {
	background: transparent url("../images/nav/languages.gif")  -235px -12px no-repeat;
}


/* ///// CTA Container \\\\\\ */
	
#callToActionWrapper {
	position:absolute;
	top: 372px;
	left: 10px;
	width: 180px;
	
}



/* ///// Flash Container \\\\\\ */
	
#flashWrapper {
	position:absolute;
	top: 132px;
	left: 151px;
	width: 514px;
	height:260px;
	/*background: transparent url("../images/flashFiller.jpg") top left no-repeat; */
}

body#learn #flashWrapper {
	width: 640px;
	height:450px; /* This will probably change */
	background:transparent;
}




/* ///// Main Content \\\\\\ */
#contentWrapper {
 	width: 511px;
	position:absolute;
	top: 132px;
	left:210px;
 }

body#home #contentWrapper {
	top: 388px;
	left:151px;
}

body#play #contentWrapper,
body#tell #contentWrapper,
body#ask #contentWrapper {
	top: 132px;
	width: 450px;
}	

body#play #contentWrapper {
	left:202px;
}

body#tell #contentWrapper {
	background:#fff;
	left: 202px;
	filter:alpha(opacity=80);
	opacity: .8;
	-moz-opacity: .8;
	color:#333;
}	

body#ask #contentWrapper {
	left: 197px;
	background:#fff;
	filter:alpha(opacity=80);
	opacity: .8;
	-moz-opacity: .8;
	color:#333;
	padding:5px;
}

body#learn #contentWrapper {
	top: 550px;
}

#contentLeft { 
	width:180px;
	float:left;
}

#contentLeft img {
	margin: 49px 0 0 0;
}

#contentRight { 
	width:307px;
	float:right;
}
	
#contentWrapper ul {
padding:0;
margin:0;
}	

#contentWrapper li {
list-style-image:url(../images/global/bulletArrow.gif);
_list-style-image:url(../images/ieBullet.gif);
list-style-position:inside;
line-height:1.5em;
}	

#contentWrapper li a:link,
#contentWrapper li a:visited {
	font-size: .8em;
	text-decoration:none;
}

#contentWrapper li a:hover {
	background:#ffe0cc;
	color:#666;
}

#contentWrapper dt a {
	color: #007bbd;
}

#contentWrapper dt {
	margin:50px 0 0 0;
}

#contentWrapper dd {
	font-size:.8em;
	padding:0;
	margin:10px 0 20px 0;
	line-height:1.2em;
}

#contentWrapper ol {
	padding:0;
}

#contentWrapper ol li {
	list-style-image:none;
}

/* Footer */

#footer {
	position:relative;
	top:50px;
	text-align:center;
	height:100px;
	_width:100%;
}

#footer ul{
	padding:10px 0 0 0;
	list-style:none;
}
		
#footer li{
	font-size:.7em;
	float:left;
}

#footer p {
	font-size:.7em;
	clear:both;
}





/* ///// Decoder \\\\\ */
div#paragraphEncoded p,
div#paragraphDecoded p {
	margin-bottom: 17px;
}
#decoder {
	float:right;
}

#decoder a {
	text-indent: -9999px;
	display:block;
	width:132px;
	line-height:39px;
}	

#decoder a:link,
#decoder a:visited { 
	background: transparent url("../images/decoder.gif")  0 0 no-repeat;
}

#decoder a:hover { 
	background: transparent url("../images/decoder.gif")  0 -38px no-repeat;
}

#contentLeft #decoder.active a {
	background: transparent url("../images/decoder.gif")  0 -76px no-repeat;
}


/* Games */	
.gameWrapper {
	clear:both;
	margin:8px 0 50px 0;
	padding:0; 
}

.gameWrapper img {
	float:left;
}
	
	

/* ///// Type \\\\\\ */

h2 {
	position:absolute;
	top:103px;
	left:202px;
	font-weight:normal;	
	margin:0;
	padding:0;
}

body#home h2,
body#learn h2 {
	left:151px;
}

p {
	font-size:.8em;	
	line-height:1.5em;
	margin:0;
}

.orange { /* // Used for the first word in the beginning main paragraphy \\ */
	color:#f60;
}

h3 {
	font-size:1.5em;
	font-weight:normal;
	letter-spacing:.08em;
	color:#347895;
	margin:0 0 0 100px;
}

h4 {
	font-size:1.3em;
	padding:0;
	font-weight:normal;
	margin:0;
}
	
.gameWrapper p {
	margin: 0 0 0 0;
	font-size:.7em;
	width:350px;
	float:right;
	display:block;
}	

/*///// Links \\\\\\ */

a, 
a:link,
a:visited {
 	color:#007bbd;
 	text-decoration:none;
}

a:hover {
	color:#f60;
}


/*///// Forms ////// */
.spacer {
	font-size:.1em;
	height:1px;
}

.formRow {
	clear:both;
	margin: 10px 0 10px 0;
}

.formLeft {
	text-align:right;
	width:135px;
	float:left;
	font-size:.9em;
}

.formRight {
	float:right;
	width:300px;
	margin-bottom: 7px;
}

form	{
	/*display:block;*/
	margin: 10px 0 0 0;
}


input {
	border:1px solid #999;
	background:#f3f1eb;
	padding:5px;
}

input.button {
	border:0;
	padding:0;
	margin:0 10px 0 0;
	background:none;
}

textarea 
{
	border:1px solid #999;
 	background:#f3f1eb;
 	padding:5px;
	width: 250px;
	height:100px;
	font-family: "Trebuchet MS", Lucida Grande, Arial, Helvetica;
	font-size:.8em;

}

select {
	border:1px solid #999;
	background:#f3f1eb;
	font-size:.7em;
}

option {
	margin:0 0 5px 0;
	color:#666;
	border:none;
}