@charset "utf-8";



/* color psychology */

.tpNav a { position: absolute; display: block; width: 30px; height: 30px; background: #000; }
.tpNav a img { width: 30px; height: 30px; }
.tpNav a:hover img, 
.tpNav a.selected img, 
.tpNav a.selected:hover img { position: relative; top: -5px; left: -5px; }

/* 10 promotional prompts */

#tp1nav a { text-decoration: none; }
.puzzle {
	 position: relative;
	 width: 225px;
	 height: 225px;
	 margin-left: 15px;
	 font-size: 10px;
	 }
.puzzle td {
	width: 15px;
	height: 15px;
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	}
.word {
	position: absolute;
	z-index: 2;
	}
.letter {
	float: left;
	width: 15px;
	height: 15px;
	text-transform: uppercase;
	text-align: center;
	background: #fff;

	opacity: 0.0;
	}
#tab1 { top: 75px; left: 45px; width: 105px; height: 15px; }
#tab2 { top: 45px; left: 90px; width: 15px; height: 75px; }
#tab3 { top: 60px; left: 105px; width: 120px; height: 15px; }
#tab4 { top: 0px; left: 105px; width: 15px; height: 120px; }
#tab5 { top: 120px; left: 45px; width: 165px; height: 15px; }
#tab6 { top: 135px; left: 0px; width: 150px; height: 15px; }
#tab7 { top: 90px; left: 45px; width: 120px; height: 15px; }
#tab8 { top: 0px; left: 120px; width: 15px; height: 165px; }
#tab9 { top: 90px; left: 180px; width: 15px; height: 105px; }
#tab10 { top: 135px; left: 75px; width: 15px; height: 90px; }

.selected { display: block; }
.selected, 
.selected .letter,
.word:hover .letter { opacity: 1.0; color: #fff; background: #000; }