body
{
	background-color: #fff;
	margin: 0px;
	font-family: Helvetica, Arial;
	font-size: 14px;
	line-height: 24px;
	color: #000;
}

a
{
	color: #00b7f1;
}

a:hover
{
	color: #ff3399;
}

#website
{
	border: 0px solid #999;
	top: 0px;
	left: 50%;
	margin-left: -477px;
	width: 950px;
	position: absolute;
}

#introHeader, #header
{
	height: 145px;
	width: 100%;
	position: relative;
}

#logo
{
	background-image: url(images/Logo-Hairdressing.gif);
	top: 35px;
	height: 82px;
	width: 300px;
	position: absolute;
	cursor: pointer;
}

#headerImage
{
	background-image: url(images/Banner-Home.jpg);
	background-repeat: no-repeat;
	top: 20px;
	right: 0px;
	height: 117px;
	width: 646px;
	position: absolute;
}

#topBanner1, #topBanner2, #topBanner3
{
	top: 20px;
	right: 0px;
	height: 117px;
	width: 646px;
	position: absolute;
}

#topBanner1 { background-image: url(images/TopLevel1.jpg); }
#topBanner2 { background-image: url(images/TopLevel2.jpg); }
#topBanner3 { background-image: url(images/TopLevel3.jpg); }

.LoggedIn
{
	top: 75px;
	left: 314px;
	color: #fff;
	position: absolute;
}

.LoggedIn a
{
	font-size: 11px;
	color: #fff;
}

#ChangeLevel
{
	top: 78px;
	right: 105px;
	position: absolute;
}

#ChangeLevel select
{
	width: 100px;
	border: 0px solid #fff;
}

.errors, #questionFrame blockquote
{
	border: 1px solid #ff0000;
	background-color: #ffbaba;
	color: #ff0000;
	padding: 5px 10px 5px 10px;
	margin-bottom: 10px;
}

#body
{
	border: 0px dotted #ccc;
	position: relative;
}

#introContent
{
	background-image: url(images/IntroBoxBG.gif);
	width: 460px;
	margin-bottom: 35px;
}

#introContent .contentTop
{
	background-image: url(images/IntroBoxTop.gif);
	height: 15px;
	width: 460px;
	position: relative;
}

#introContent .contentBottom
{
	background-image: url(images/IntroBoxBottom.gif);
	height: 15px;
	width: 460px;
	position: relative;
}

.contentFrame
{
	right: 0px;
	width: 647px;
	margin-bottom: 35px;
	position: relative;
}

.contentFrame .contentTop
{
	height: 15px;
	width: 647px;
	position: relative;
}

.contentFrame .contentBottom
{
	height: 15px;
	width: 647px;
	position: relative;
}

.contentFrame { background-image: url(images/MainBoxBG.gif) }
.contentFrame .contentTop { background-image: url(images/MainBoxTop.gif) }
.contentFrame .contentBottom { background-image: url(images/MainBoxBottom.gif) }

/* Unit 1 CSS */

.unit1 { background-image: url(images/MainBoxBG-Unit1.gif) }
.unit1 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit1.gif) }
.unit1 .contentBottom { background-image: url(images/MainBoxBottom-Unit1.gif) }

/* Unit 2 CSS */

.unit2 { background-image: url(images/MainBoxBG-Unit2.gif) }
.unit2 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit2.gif) }
.unit2 .contentBottom { background-image: url(images/MainBoxBottom-Unit2.gif) }

/* Unit 3 CSS */

.unit3 { background-image: url(images/MainBoxBG-Unit3.gif) }
.unit3 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit3.gif) }
.unit3 .contentBottom { background-image: url(images/MainBoxBottom-Unit3.gif) }

/* Unit 4 CSS */

.unit4 { background-image: url(images/MainBoxBG-Unit4.gif) }
.unit4 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit4.gif) }
.unit4 .contentBottom { background-image: url(images/MainBoxBottom-Unit4.gif) }

/* Unit 5 CSS */

.unit5 { background-image: url(images/MainBoxBG-Unit5.gif) }
.unit5 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit5.gif) }
.unit5 .contentBottom { background-image: url(images/MainBoxBottom-Unit5.gif) }

/* Unit 6 CSS */

.unit6 { background-image: url(images/MainBoxBG-Unit6.gif) }
.unit6 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit6.gif) }
.unit6 .contentBottom { background-image: url(images/MainBoxBottom-Unit6.gif) }

/* Unit 7 CSS */

.unit7 { background-image: url(images/MainBoxBG-Unit7.gif) }
.unit7 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit7.gif) }
.unit7 .contentBottom { background-image: url(images/MainBoxBottom-Unit7.gif) }

/* Unit 8 CSS */

.unit8 { background-image: url(images/MainBoxBG-Unit8.gif) }
.unit8 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit8.gif) }
.unit8 .contentBottom { background-image: url(images/MainBoxBottom-Unit8.gif) }

/* Unit 9 CSS */

.unit9 { background-image: url(images/MainBoxBG-Unit9.gif) }
.unit9 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit9.gif) }
.unit9 .contentBottom { background-image: url(images/MainBoxBottom-Unit9.gif) }

/* Unit 10 CSS */

.unit10 { background-image: url(images/MainBoxBG-Unit10.gif) }
.unit10 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit10.gif) }
.unit10 .contentBottom { background-image: url(images/MainBoxBottom-Unit10.gif) }

/* Unit 11 CSS */

.unit11 { background-image: url(images/MainBoxBG-Unit11.gif) }
.unit11 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit11.gif) }
.unit11 .contentBottom { background-image: url(images/MainBoxBottom-Unit11.gif) }

/* Unit 12 CSS */

.unit12 { background-image: url(images/MainBoxBG-Unit12.gif) }
.unit12 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit12.gif) }
.unit12 .contentBottom { background-image: url(images/MainBoxBottom-Unit12.gif) }

/* Unit 13 CSS */

.unit13 { background-image: url(images/MainBoxBG-Unit13.gif) }
.unit13 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit13.gif) }
.unit13 .contentBottom { background-image: url(images/MainBoxBottom-Unit13.gif) }

/* Unit 14 CSS */

.unit14 { background-image: url(images/MainBoxBG-Unit14.gif) }
.unit14 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit14.gif) }
.unit14 .contentBottom { background-image: url(images/MainBoxBottom-Unit14.gif) }

/* Unit 15 CSS */

.unit15 { background-image: url(images/MainBoxBG-Unit15.gif) }
.unit15 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit15.gif) }
.unit15 .contentBottom { background-image: url(images/MainBoxBottom-Unit15.gif) }

/* Unit 16 CSS */

.unit16 { background-image: url(images/MainBoxBG-Unit16.gif) }
.unit16 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit16.gif) }
.unit16 .contentBottom { background-image: url(images/MainBoxBottom-Unit16.gif) }

/* Unit 17 CSS */

.unit17 { background-image: url(images/MainBoxBG-Unit17.gif) }
.unit17 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit17.gif) }
.unit17 .contentBottom { background-image: url(images/MainBoxBottom-Unit17.gif) }

/* Unit 18 CSS */

.unit18 { background-image: url(images/MainBoxBG-Unit18.gif) }
.unit18 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit18.gif) }
.unit18 .contentBottom { background-image: url(images/MainBoxBottom-Unit18.gif) }

/* Unit 19 CSS */

.unit19 { background-image: url(images/MainBoxBG-Unit19.gif) }
.unit19 .contentTop { height: 32px; background-image: url(images/MainBoxTop-Unit19.gif) }
.unit19 .contentBottom { background-image: url(images/MainBoxBottom-Unit19.gif) }

.content
{
	padding: 0px 15px 0px 15px;
	font-size: 14px;
	line-height: 24px;
	color: #000;
	position: relative;
}

.content h1, h1
{
	font-size: 22px;
	font-weight: bold;
	line-height: 30px;
	margin: 0px 0px 10px 0px;
	color: #ff3399;
}

.content h2, h2
{
	font-size: 18px;
	font-style: italic;
	line-height: 26px;
	margin: 0px 0px 10px 0px;
	color: #00b7f1;
}


#level1, #level2, #level3
{	
	background-position: bottom right;
	background-repeat: no-repeat;
	height: 122px;
	width: 452px;
	margin-bottom: 25px;
	position: relative;
}

#level3
{	
	margin-bottom: 35px;
}

#level1 { background-image: url(images/LoginLevel1BG.gif); }
#level2 { background-image: url(images/LoginLevel2BG.gif); }
#level3 { background-image: url(images/LoginLevel3BG.gif); }

#levelImage1, #levelImage2, #levelImage3
{
	height: 132px;
	width: 106px;
	position: relative;
}

#levelImage1 { background-image: url(images/LoginImage1.jpg); }
#levelImage2 { background-image: url(images/LoginImage2.jpg); }
#levelImage3 { background-image: url(images/LoginImage3.jpg); }

#levelIntro1, #levelIntro2, #levelIntro3
{
	border: 0px solid #d8d9db;
	top: 51px;
	right: 12px;
	width: 320px;
	height: 65px;
	font-size: 13px;
	line-height: normal;
	color: #fff;
	overflow: auto;
	position: absolute;
}

#levelIntro1 a, #levelIntro2 a, #levelIntro3 a
{
	color: #fff;
	text-decoration: none;
}

.levelArrows
{
	top: 19px;
	right: 8px;
	height: 16px;
	width: 30px;
	background-position: right;
	cursor: pointer;
	position: absolute;
}

#levelArrows1 { background-image: url(images/ArrowsLevel1.gif); }
#levelArrows2 { background-image: url(images/ArrowsLevel2.gif); }
#levelArrows3 { background-image: url(images/ArrowsLevel3.gif); }

#levelArrows1:hover { background-image: url(images/ArrowsLevel1H.gif); }
#levelArrows2:hover { background-image: url(images/ArrowsLevel2H.gif); }
#levelArrows3:hover { background-image: url(images/ArrowsLevel3H.gif); }

.levelLogin
{
	top: 53px;
	right: 12px;
	width: 320px;
	height: 65px;
	font-size: 13px;
	line-height: normal;
	color: #fff;
	position: absolute;
	display: none;
}

.levelLogin span
{
	width: 75px;
	line-height: 30px;
	font-weight: bold;
	display: inline-block;
}

.levelLogin input
{
	border: 1px solid #000;
	line-height: 17px;
}

#levelLogin1 input { border-color: #BB8748; color: #BB8748; }
#levelLogin2 input { border-color: #A7A9AC; color: #A7A9AC; }
#levelLogin3 input { border-color: #A39161; color: #A39161; }

.loginButton1 { background-image: url(images/LoginLevel1Button.gif); }
.loginButton2 { background-image: url(images/LoginLevel2Button.gif); }
.loginButton3 { background-image: url(images/LoginLevel3Button.gif); }

.loginButton1, .loginButton2, .loginButton3
{
	border: 0px solid #000;
	width: 48px;
	height: 21px;
	margin-left: 10px;
	cursor: pointer;
}

#navLeft 
{
	margin-bottom: 35px;
}

#navLeft ul
{
	margin: 0px;
	padding: 0px;
	width: 268px;
	list-style-type: none;
	position: relative;
}

#navLeft ul li
{
 	background-image: url(images/navBG.gif);
	line-height: 25px;
	margin-bottom: 3px;
	padding-left: 10px;
	color: #474747;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
}

#navLeft ul li li
{
 	background-image: none;
}

#navLeft li.units
{
 	background-image: url(images/navUnitsBG.gif);
	height: 261px;
	margin-bottom: 3px;
	padding-left: 0px;
	font-size: 14px;
	font-weight: bold;
}

#navLeft li.units a
{
	padding-left: 10px;
}

#navLeft li.units li a
{
	padding-left: 0px;
}

#navLeft a {
	color: #474747;
	text-decoration: none;
}

#navLeft a:hover {
	text-decoration: underline;
}

#navLeft li ul
{
	margin: 3px 0px 0px 6px;
}

#navLeft li li
{
	line-height: 28px;
	width: 86px;
	margin: 0px 1px 1px 0px;
	padding: 0px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
}

#navLeft li li a 
{
	color: #fff;
	padding: 0px;
}

#nav2 .unit1 { background-color: #c7a0cb }
#nav2 .unit2 { background-color: #00b7f1 }
#nav2 .unit3 { background-color: #ed1846 }
#nav2 .unit4 { background-color: #95cc6e }
#nav2 .unit5 { background-color: #ee4c9b }
#nav2 .unit6 { background-color: #ffdb14 }
#nav2 .unit7 { background-color: #702c91 }
#nav2 .unit8 { background-color: #95b5df }
#nav2 .unit9 { background-color: #fcb959 }
#nav2 .unit10 { background-color: #08af63 }
#nav2 .unit11 { background-color: #ac499b }
#nav2 .unit12 { background-color: #00abbd }
#nav2 .unit13 { background-color: #d7c800 }
#nav2 .unit14 { background-color: #f48466 }
#nav2 .unit15 { background-color: #acd58a }
#nav2 .unit16 { background-color: #8977b6 }
#nav2 .unit17 { background-color: #dd8cb0 }
#nav2 .unit18 { background-color: #2abb9f }
#nav2 .unit19 { background-color: #005aab }

.unit1 .subnav { background-color: #e3d0e5 }
.unit2 .subnav { background-color: #80dbf8 }
.unit3 .subnav { background-color: #f68ca3 }
.unit4 .subnav { background-color: #cae6b7 }
.unit5 .subnav { background-color: #f7a6cd }
.unit6 .subnav { background-color: #ffed89 }
.unit7 .subnav { background-color: #b896c8 }
.unit8 .subnav { background-color: #cadaef }
.unit9 .subnav { background-color: #fedcac }
.unit10 .subnav { background-color: #84d7b1 }
.unit11 .subnav { background-color: #d6a4cd }
.unit12 .subnav { background-color: #80d5de }
.unit13 .subnav { background-color: #ebe480 }
.unit14 .subnav { background-color: #fac2b3 }
.unit15 .subnav { background-color: #d6eac5 }
.unit16 .subnav { background-color: #c4bbdb }
.unit17 .subnav { background-color: #eec6d8 }
.unit18 .subnav { background-color: #95ddcf }
.unit19 .subnav { background-color: #80add5 }

.unitGen1617 { background-color: #bb8748 }
.unitGen2H { background-color: #a7a9ac }
.unitGen3H { background-color: #a39161 }

#nav2 .unitHide 
{
	color: #fff;
	opacity: 0.2; 
	zoom: 1;
	filter: alpha(opacity=20); 
}

.unit1 .subnav a { color: #957898 }
.unit2 .subnav a { color: #008bb7 }
.unit3 .subnav a { color: #a81132 }
.unit4 .subnav a { color: #6a914e }
.unit5 .subnav a { color: #a7356d }
.unit6 .subnav a { color: #a9910d }
.unit7 .subnav a { color: #702c91 }
.unit8 .subnav a { color: #667b98 }
.unit9 .subnav a { color: #a97c3c }
.unit10 .subnav a { color: #068149 }
.unit11 .subnav a { color: #7a346e }
.unit12 .subnav a { color: #007480 }
.unit13 .subnav a { color: #928800 }
.unit14 .subnav a { color: #9e5542 }
.unit15 .subnav a { color: #74905d }
.unit16 .subnav a { color: #5e527d }
.unit17 .subnav a { color: #8a576e }
.unit18 .subnav a { color: #1d816e }
.unit19 .subnav a { color: #004583 }

.subnav
{
	margin: 1px 2px 15px 2px;
	padding: 0px;
	list-style-type: none;
	position: relative;
}

.subnav li
{
	font-size: 12px;
	padding: 0px 12px 0px 12px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	line-height: 24px;
	display: -moz-inline-box;
	display: inline-block;
}

* html .subnav li { display:inline; }  /* for IE 6 */
* + html .subnav li { display:inline; }  /* for IE 7 */

.subnav li a
{
	text-decoration: none;
}

.subnav li a:hover
{
	text-decoration: underline;
}

#pageTitle
{
	display: none;
}

#pageTitle a
{
	top: 0px;
	left: 0px;
	font-family: Arial;
	font-weight: bold;
	font-size: 17px;
	color: #fff;
	padding-left: 12px;
	line-height: 32px;
	text-decoration: none;
	position: absolute;
}

#footer
{
	border-top: 1px solid #d8d9db;
	height: 75px;
	position: relative;
}

#cengageLogo
{
	background-image: url(images/LogoCengage.gif);
	top: 15px;
	height: 42px;
	width: 127px;
	position: absolute;
}

#copyright
{
	top: 20px;
	right: 0px;
	font-size: 11px;
	line-height: 15px;
	color: #999999;
	text-align: right;
	position: absolute;
}

#copyright a
{
	color: #999999;
	text-decoration: none;
}

#copyright a:hover
{
	color: #999999;
	text-decoration: underline;
}

#imageBank img
{
	width: 192px;
	padding: 0px 10px 10px 0px;
	border: 0px;
}

.playerFrame
{
	margin-bottom: 15px;
	position: relative;
	text-align: center;
}

.button
{
	border: 1px solid #D8D8D8;
	line-height: 25px;
	padding: 0px 10px 0px 10px;
	margin: 10px 1px 10px 1px;
	color: #474747;
	background-color: #EDEDED;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	display: -moz-inline-box;
	display: inline-block;
	cursor: pointer;
	position: relative;
}

.selected
{
	border-color: #474747;
	color: #FFFFFF;
	background-color: #474747;
}

* html .button { display: inline; }
* + html .button { display: inline; }

#tabs-1 ol ol
{
	margin: 10px;
}

#tabs-1 ol li
{
	font-weight: bold;	
}

#tabs-1 ol li li
{
	list-style-type: lower-alpha;
	font-weight: normal;	
}

#tabs-1 ol li li.correct
{
	font-weight: bold;	
	color: red;
}

#tabs-3 table
{
	width: 100%;
	border-width: 0px 0px 1px 1px;
	border-style: solid;
	border-color: #c7c7c7;
}

#tabs-3 th, #tabs-3 td
{
	text-align: left;
	border-width: 1px 1px 0px 0px;
	border-style: solid;
	border-color: #c7c7c7;
	padding: 2px 5px 2px 5px;
}

#questionFrame
{
	width: 700px;
	text-align: left;
	position: relative;
}

#questionFrame ol
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#questionFrame ol ol
{
	margin: 20px;
	padding: 0px;
}

#questionFrame ol li
{
	font-size: 22px;
	font-weight: bold;
	margin: 0px 0px 20px 0px;
	color: #ff3399;
	display: none;
}

#questionFrame ol ol li
{
	font-size: 18px;
	font-style: italic;
	line-height: 26px;
	margin: 0px 0px 10px 0px;
	color: #00b7f1;
	display: block;
}

#questionFrame div
{
	font-size: 22px;
	font-weight: bold;
	margin: 0px 0px 20px 0px;
	color: #ff3399;
	text-align: center;
	display: block;
}

#questionFrame #Result
{
	display: none;
}

#tickBox
{
	top: 15px;
	left: -100px;
	width: 74px;
	height: 74px;
	background-image: url(images/tickBox.gif);
	position: absolute;
}

#tick, #cross
{
	top: 0px;
	left: 0px;
	width: 74px;
	height: 74px;
	background-image: url(images/tick.gif);
	position: absolute;
	display: none;
}

#cross
{
	background-image: url(images/cross.gif);
}

#gallery
{
	display: none;
}

#punymce
{
	margin: 10px;
	background-color: #fff;
}

#punymce table, #punymce img
{
	border: 1px dotted #ccc;
}

#punymce td
{
	border: 1px dotted #ccc;
}