/* Perfect Imbalance CSS (MAIN SCREEN) [kc]*/





/*...................................................... Global Settings ...*/


body {
	margin: 0px auto;
	width: 100%;
	font-family: "Lucida Grande CE", Myriad-Normal, Verdana, sans-serif;
	color: #333333;
	padding: 0;
	background: #edead9;
	font-size: .85em;
}
img {
	border: none;
	margin: 0;
	padding: 0;
}
h3 {
	padding: 0 0 8px;
	color: #660000;
}
em {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
ul {
	list-style: none;
}
li a {
	border: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #666666;
}
li a:hover {
	color: #333333;
}
a {
	border: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #990000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 85%;
}
a:hover {
	color: #CC0000;
	text-decoration: underline;
}
.hide {
	display: none;
}
#myOnPageContent {
	display: none;
}


/* body background images */

body#intro {
	background: #edead9 url(../images/bg-intro.gif) no-repeat center top;
}
body#cosmos {
	background: #edead9 url(../images/bg-cosmos.gif) no-repeat center top;
}
body#brush {
	background: #edead9 url(../images/bg-brush.gif) no-repeat center top;
}
body#antiquity {
	background: #edead9 url(../images/bg-antiquity.gif) no-repeat center top;
}


.floatR {
	float: right;
}








/*...................................................... Header and Main Navigation ...*/


.wide {
	width: 100%;
	margin: 0px;
	padding: 0;
	float: left;
}
#intro .wide {
	background: #E1DFCE url(../images/intro-tile.jpg) repeat-x center top;
}
#cosmos .wide {
	background: #E1DFCE url(../images/cosmos-tile.jpg) repeat-x center top;
}
#brush .wide {
	background: #E1DFCE url(../images/brush-tile.jpg) repeat-x center top;
}
#antiquity .wide {
	background: #E1DFCE url(../images/antiquity-tile.jpg) repeat-x center top;
}
.head {
	width: 780px;
	margin: 0 auto;
}
#logo {
	float: left;
	margin: 38px 0 0 15px;
	width: 395px;
	height: 92px;
	background: url(../images/title.jpg) no-repeat top left;
}
.head img {
	margin: 0;
	padding: 0;
	border: none;
}
.navBox {
	width: 780px;
	margin: 0px auto 0;
	padding: 0;
}

/* main nav */

.mainNav {
	float: right;
	margin: 38px 0 0;
	padding: 0 40px 0 0;
	width: 272px;
}
.mainNav li {
	float: left;
	margin: 0;
	padding: 0;
}
.mainNav a {
	float: left;
	display: block;
	margin: 0;
	padding: 0;
}
.mainNav .side {
	width: 83px;
	height: 108px;
	
}
.mainNav .center {
	width: 106px;
	height: 108px;	
}


/* icons off */

#t-cosmos a {
	background: url(../images/icons.jpg) no-repeat left top;
}
#t-brush a {
	background: url(../images/icons.jpg) no-repeat center top;
}
#t-antiquity a {
	background: url(../images/icons.jpg) no-repeat right top;
}


/* icons hover */

#t-cosmos a:hover {
	background: url(../images/icons.jpg) no-repeat left center;
}
#t-brush a:hover {
	background: url(../images/icons.jpg) no-repeat center center;
}
#t-antiquity a:hover {
	background: url(../images/icons.jpg) no-repeat right center;
}


/* icons on */

body#cosmos #t-cosmos a {
	background: url(../images/icons.jpg) no-repeat left bottom;
}
body#brush #t-brush a {
	background: url(../images/icons.jpg) no-repeat center bottom;
}
body#antiquity #t-antiquity a {
	background: url(../images/icons.jpg) no-repeat right bottom;
}






/*...................................................... Sub Navigation ...*/


/* thumbs */

.subHead {
	width: 780px;
	margin: 29px auto 0;
	padding: 0;
	float: left;
}
.subNav {
	float: left;
	width: 765px;
	margin: 0;
	padding: 0 0 0 8px;
}
.subNav li{
	float: left;
	margin: 0;
	padding: 2px;
}
.subNav a {
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	width: 55px;
	height: 44px;
	border: 2px solid #000000;
}
.subNav a:hover {
	border: 2px solid #555555;
}


/* thumbs off */

#bell a {
	background: url(../images/t-bell.jpg) center bottom;
}
#robe a {
	background: url(../images/t-robe.jpg) center bottom;	
}
#temple a {
	background: url(../images/t-temple.jpg) center bottom;
}
#maoFate a {
	background: url(../images/t-mao-and-fate.jpg) center bottom;
}

/*...*/

#ink a {
	background: url(../images/t-ink.jpg) center bottom;	
}
#embroidered a {
	background: url(../images/t-embroidered.jpg) center bottom;	
}
#bamboo a {
	background: url(../images/t-bamboo.jpg) center bottom;
}
#lotus a {
	background: url(../images/t-lotus.jpg) center bottom;	
}

/*...*/

#bowl a {
	background: url(../images/t-bowl.jpg) center bottom;	
}
#jar a {
	background: url(../images/t-jar.jpg) center bottom;	
}
#jade a {
	background: url(../images/t-jade.jpg) center bottom;	
}
#landscapes a {
	background: url(../images/t-landscapes.jpg) center bottom;
}


/* thumbs hover/on */


#bell a:hover,
#robe a:hover,
#temple a:hover,
#maoFate a:hover,
#ink a:hover,
#embroidered a:hover,
#bamboo a:hover,
#lotus a:hover,
#bowl a:hover,
#jar a:hover,
#jade a:hover,
#landscapes a:hover {
	background-position: center top;
}



body#cosmos #p-cosmos #t-bell #bell a,
body#cosmos #p-cosmos #t-robe #robe a,
body#cosmos #p-cosmos #t-temple #temple a,
body#cosmos #p-cosmos #t-maoFate #maoFate a,
body#brush #p-brush #t-ink #ink a,
body#brush #p-brush #t-embroidered #embroidered a,
body#brush #p-brush #t-bamboo #bamboo a,
body#brush #p-brush #t-lotus #lotus a,
body#antiquity #p-antiquity #t-bowl #bowl a,
body#antiquity #p-antiquity #t-jar #jar a,
body#antiquity #p-antiquity #t-jade #jade a,
body#antiquity #p-antiquity #t-landscapes #landscapes a {
	border: #FFFFFF 2px solid;
}


body#cosmos #p-cosmos #bell a,
body#cosmos #p-cosmos #robe a,
body#cosmos #p-cosmos #temple a,
body#cosmos #p-cosmos #maoFate a,
body#brush #p-brush #ink a,
body#brush #p-brush #embroidered a,
body#brush #p-brush #bamboo a,
body#brush #p-brush #lotus a,
body#antiquity #p-antiquity #bowl a,
body#antiquity #p-antiquity #jar a,
body#antiquity #p-antiquity #jade a,
body#antiquity #p-antiquity #landscapes a {
	border: #990000 2px solid;
}



body#cosmos #p-cosmos #bell a:hover,
body#cosmos #p-cosmos #robe a:hover,
body#cosmos #p-cosmos #temple a:hover,
body#cosmos #p-cosmos #maoFate a:hover,
body#brush #p-brush #ink a:hover,
body#brush #p-brush #embroidered a:hover,
body#brush #p-brush #bamboo a:hover,
body#brush #p-brush #lotus a:hover,
body#antiquity #p-antiquity #bowl a:hover,
body#antiquity #p-antiquity #jar a:hover,
body#antiquity #p-antiquity #jade a:hover,
body#antiquity #p-antiquity #landscapes a:hover {
	border: #FFFFFF 2px solid;
}


/* thumb group on */


/*body#cosmos #bell, 
body#cosmos #robe, 
body#cosmos #temple, 
body#cosmos #maoFate, 
body#brush #ink, 
body#brush #embroidered, 
body#brush #bamboo, 
body#brush #lotus, 
body#antiquity #bowl, 
body#antiquity #jar, 
body#antiquity #jade, 
body#antiquity #landscapes {
	background: #FFFFFF;
}*/

body#cosmos #bell a, 
body#cosmos #robe a, 
body#cosmos #temple a, 
body#cosmos #maoFate a, 
body#brush #ink a, 
body#brush #embroidered a, 
body#brush #bamboo a, 
body#brush #lotus a, 
body#antiquity #bowl a, 
body#antiquity #jar a, 
body#antiquity #jade a, 
body#antiquity #landscapes a {
	border: 2px solid #990000;
	background-position: center top;
}








/*...................................................... Teacher Links ...*/

#teachers {
	width: 760px;
	margin: 14px auto 0px;
	padding: 0px 0px 6px 10px;
	float: left;
	/*background: url(../images/pem.jpg) no-repeat right top;*/
}
#teachers ul h4 {
	float: left;
	margin: 0;
	padding: 0;
	background: url(../images/teachers-text.jpg) no-repeat center center;
	width: 201px;
	height: 22px;
}
#teachers ul {
	float: left;
	margin: 0;
	padding: 0;
}
#teachers li {
	float: left;
	margin: 0;
	padding: 0;
}
#teachers #pem {
	float: left;
	margin: 0;
	padding: 0 0 0 345px;
}
#teachers #lesson a {
	margin: 0 0 0 10px;
	padding: 0;
	background: url(../images/lesson-plans.jpg) no-repeat top center;
	width: 104px;
	height: 22px;
	float: left;
}
#teachers #world a {
	margin: 0 0 0 8px;
	padding: 0;
	background: url(../images/compare.jpg) no-repeat top center;
	width: 153px;
	height: 22px;
	float: left;
}
#teachers #pem a {
	margin: 0;
	padding: 0;
	background: url(../images/pem.jpg) no-repeat top center;
	width: 88px;
	height: 22px;
	float: left;
}
#teachers #lesson a:hover {
	background: url(../images/lesson-plans.jpg) no-repeat bottom center;
}
#teachers #world a:hover {
	background: url(../images/compare.jpg) no-repeat bottom center;
}
#teachers #pem a:hover {
	background: url(../images/pem.jpg) no-repeat bottom center;
}






/*...................................................... Content Area ...*/


/* container */

.page {
	width: 780px;
	margin: 0 auto;
}


/* left section */

.imageContent {
	/*width: 380px;*/
	float: left;
	clear: left;
	padding-top: 30px;
	padding-left: 10px;
	padding-bottom: 50px;
	/*text-align: center;*/
}
/*.imageContent a {
	padding-bottom: 16px;
	background-image: url(../images/zoom.gif);
	background-repeat: no-repeat;
	background-position: 6px bottom;
}*/
/*.imageContent a:hover {
	background-color: #999999;
}*/
.imageContent img {
	padding: 8px 8px 18px;
	margin: 0;
	border: 1px solid #E0DECA;
	background-color: #FFFFFF;
	background-image: url(../images/zoom.gif);
	background-repeat: no-repeat;
	background-position: 6px bottom;
}
/*#maoHide {
	width: 360px;
	height: 541px;
	background: url(../images/mao.jpg) no-repeat top center;
	display: block;
}*/
/*.imgLock {
	padding: 8px 8px 18px;
	margin: 0;
	border: 1px solid #E0DECA;
	background-color: #FFFFFF;
	background-image: url(../images/zoom.gif);
	background-repeat: no-repeat;
	background-position: 6px bottom;
}*/
html a .noImage {
	background: #FFFFFF url(../images/mao.jpg) no-repeat center 8px;
	padding: 0;
	margin: 0;
}
html a .printImg {
	display: none;
}


/* right section */


.contentText {
	float: left;
	width: 335px;
	padding-left: 25px;
	padding-top: 40px;
	padding-bottom: 50px;
}
.introText {
	float: left;
	width: 355px;
	padding-left: 30px;
	padding-top: 30px;
	line-height: 1.9em;
	margin: 0;
	padding-bottom: 50px;
	/*text-align: justify;*/
}
.introText em {
	font-size: 1.7em;
	padding-bottom: 0.75em;
	display: block;
	line-height: 1.3em;
	color: #444444;
}
.introText p {
	padding: 0;
	margin: 0;
}
.sectionText {
	float: left;
	width: 360px;
	padding-left: 18px;
	padding-top: 30px;
	line-height: 1.9em;
	padding-bottom: 50px;
}
.sectionText p {
	padding: 0;
	margin: 0;
}
.sideBox {
	float: left;
	width: 280px;
	line-height: 1.9em;
	/*text-align: justify;*/
	padding-top: 70px;
	padding-left: 50px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666666;
}
.lessonPage {
	padding-top: 10px;
	padding-bottom: 50px;
	float: left;
}
.lessonText {
	width: 720px;
	float: left;
	padding-left: 35px;
	padding-top: 10px;
	padding-bottom: 0px;
}
.lessonText h3 {
	margin: 0;
	padding: 5px 0 0;
	float: left;
}
.lessonContent {
	float: left;
	padding: 20px 30px;
	width: 640px;
}
.lessonText .download {
	padding: 15px 20px 0 0px;
	margin: 0;
	float: right;
}

.lessonText .download a {
	width: 137px;
	height: 25px;
	background: url(../images/download-text.gif) no-repeat top center;
	float: left;
	display: block;
	padding: 0;
	margin: 0;
}
.lessonText .download a:hover {
	background: url(../images/download-text.gif) no-repeat bottom center;
}
.lessonText .downloadImg {
	padding: 1em 0 0 0;
	margin: 0;
	float: left;
	clear: left;
}

.lessonText .downloadImg a {
	width: 125px;
	height: 125px;
	background: #333333 url(../images/lesson-jar.jpg) no-repeat top center;
	float: left;
	clear: left;
	display: block;
	padding: 0;
	margin: 1.5em 0 0;
}
.lessonText .downloadImg a:hover {
	background: url(../images/download-small.gif) no-repeat bottom center;
}
/*.lessonText .download a {
	width: 101px;
	height: 101px;
	background: url(../images/download.gif) no-repeat top center;
	float: left;
	display: block;
	padding: 0;
	margin: 1em 0 0;
}
.lessonText .download a:hover {
	background: url(../images/download.gif) no-repeat bottom center;
}*/
.lessonText p {
	padding: 1em 15px 0px 20px;
	line-height: 1.5em;
	font-size: 90%;
}
.lessonParagraphs {
	float: left;
	width: 510px;
	text-align: justify;
}
.lessonText span {
	color: #444444;
	font-size: 80%;
	padding-left: .5em;
}


/* rounded side box */

.paragraph {
	padding: 20px 25px;
	float: left;
	margin: 0;
}
.paragraph a {
	font-size: 80%;
	font-family: "Lucida Grande CE", Myriad-Normal, Verdana, sans-serif;
	padding: 0 2px;
}
.container {
	padding: 0;
	clear: both;
	margin: 0;
	background: #FFFFFF;
	float: left;
}
.containerA {
	float: left;
	background: url(../images/rounded-leftTop.gif) no-repeat left top;
	margin: 0;
	padding: 0;
}
.containerB {
	float: left;
	background: url(../images/rounded-rightTop.gif) no-repeat right top;
	margin: 0;
	padding: 0;
}
.containerC {
	float: left;
	background: url(../images/rounded-leftBottom.gif) no-repeat left bottom;
	margin: 0;
	padding: 0;
}
.containerD {
	float: left;
	background: url(../images/rounded-rightBottom.gif) no-repeat right bottom;
	margin: 0;
	padding: 0;
}




.introPic {
	padding-top: 60px;
	padding-left: 40px;
	float: left;
}
/*.introPic img {
	padding: 8px;
	border: 1px solid #E0DECA;
}*/
.subInfo {
	/*font-weight: bold;*/
	font-size: .9em;
	/*background: #D6D3C1;*/
	padding-top: .5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	
}
.subInfo li {
	padding-bottom: .5em;
	
}
/*.contentText {
	padding-bottom: 50px;
}*/
.contentText p {
	line-height: 1.9em;
	/*text-align: justify;*/
	padding-top: 1em;
}
.themeList {
	float: left;
	margin: 20px 0 0;
	padding: 0;
	clear: both;
	width: 100%;
}
.themeList li {
	margin: 0;
	padding: 4px 0;
}
.themeList a {
	margin: 0;
	padding: 0;
}

/*.resources {
	line-height: .8em;
}*/
/*.resources ul {
	padding-left: 5px;
}*/
.resources li {
	padding-top: .5em;
	font-size: .9em;
}
.resources a {
	border: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #990000;
	font-weight: bold;
	text-transform: uppercase;
}
.resources a:hover {
	color: #CC0000;
	text-decoration: underline;
}
.questionBox {
	padding-top: 15px;
	float: left;
}
.questionList {
	float: left;
	/*clear: both;*/
	padding: 15px 10px 0px 20px;
	margin: 0;
	/*width: 325px;*/
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height: 1.4em;
}
.questionList li {
	padding: 0 22px 13px;
	margin: 0px;
	background: url(../images/bullet.gif) no-repeat left .3em;
}





/*...................................................... Hidden text ...*/


.more a {
	padding: 4px 8px 4px 16px;
	float: right;
	margin: 15px 20px 0 0;
	clear: both;
	background: #BBB7A2 url(../images/arrow.gif) no-repeat 6px center;
	border: 2px solid #E0DECA;
	color: #FFFFFF;
}
.more a:hover {
	background: #A6A391 url(../images/arrow.gif) no-repeat 6px center;
}
#hiddenInfoOne {
	display: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-decoration: none;
}
#hiddenInfoTwo {
	display: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-decoration: none;
}
.hiddenInfoButton {
	float: right;
	padding-right: 20px;
	padding-top: 10px;
	clear: both;
}
.hiddenInfoButton a {
	/*float: left;
	display: block;
	padding: 4px 8px;
	background: #CCCCCC;
	border: 1px solid #E0DECA;*/
	padding: 4px 8px 4px 16px;
	float: left;
	background: #BBB7A2 url(../images/arrow.gif) no-repeat 6px center;
	border: 2px solid #E0DECA;
	color: #FFFFFF;
	text-decoration: none;
	margin: 0;
}
.hiddenInfoButton a:hover {
	background: #A6A391 url(../images/arrow.gif) no-repeat 6px center;
	color: #FFFFFF;
	text-decoration: none;
	margin: 0;
}