html {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
color: #000;
margin:0;
padding:0;
}
table {
padding: 0px;
}
tr.dark {
background-color: #69C;
}
tr.light {
background-color: #9CF;
}
td.course {
border-color: #006;
border-width: 0px 0px 1px 0px;
border-style: solid;
padding: 3px 5px 3px 3px;
}
td.price {
text-align: right;
font-weight: bold;
border-color: #006;
border-width: 0px 0px 1px 1px;
border-style: solid;
padding: 3px 3px 3px 10px;
white-space: nowrap;
}
td.field {
text-align: right;
white-space: nowrap;
border-color: #006;
border-width: 0px 0px 1px 0px;
border-style: solid;
padding: 3px 5px 3px 3px;
}
td.form {
border-color: #006;
border-width: 0px 0px 1px 1px;
border-style: solid;
padding: 3px 3px 3px 10px;
}
img {
border-color: #000;
border-width: 0px;
border-style: solid;
}
h1 {
color: #006;
margin-top: 10px;
font-weight: bolder;
font-size: 30px;
margin-left: 0px;
}
h2 {
color: #F00;
margin-top: 30px;
line-height: 1.4em;
}
h3 {
color: #F00;
}
hr {
border-color: #006;
border-width: 0px 0px 1px 0px;
border-style: dotted;
padding-top: 10px;
}
img.photo {
margin: 0px 0px 10px 10px;
float: right;
padding: 5px;
border: thin solid #FF0000;
}
p.note {
font-size: 10px;
}
p.block {
display: block;
}
.bold {
font-weight: bold;
}
#menu table {
border-color: #000;
border-width: 0;
width: 100%;
}
#menu a {
color: #FFF;
text-decoration: none;
margin: 0px 10px 0px 10px;
}
#menu td {
padding: 0px 5px 0px 5px;
color: #FFF;
white-space: nowrap;
background-image: url(../media/menu1-background.gif);
background-repeat: repeat-x;
}
#menu .bold {
font-size: 14px;
font-weight: bold;
text-align: right;
}
#menu td.side {
padding: 0px;
width: 10px;
background-color:#009;
}
.highlight {
color: #F00;
}
#menu2 {
margin: 9px 9px 10px 0px;
float: left;
}
#menu2 a {
/*
color: #006;
*/
}
#menu2 table {
border-color: #000;
border-width: 0px;
border-style: solid;
}
#menu2 td {
padding: 0px 0px 0px 4px;
}
#menu2 td.side {
padding: 0px;
}
#menu2 td.menu3X {
padding: 0px 0px 0px 8px;
}
#lessonmap {
margin: 0px 5px 5px 0px;
float: left;
}
.correct {
color: #006;
font-weight: bold;
}
.wrong {
text-decoration: line-through;
color: #F00;
font-weight: bold;
}
#score {
margin: 0px 0px 5px 5px;
float: right;
}
#score table {
padding: 0px;
border-color: #006;
border-width: 1px;
border-style: solid;
width: 100px;
}
#score td {
padding: 5px;
text-align: center;
}
#score td.title {
background-color: #006;
color: #FFF;
font-weight: bold;
}
#score td.score {
border-color: #006 #FFF #006 #FFF;
border-width: 0px 10px 1px 10px;
border-style: solid;
}
iframe {
border-color: #000;
border-width: 0px;
border-style: solid;
}
.Xhead {
font-size: 24px;
font-weight: bold;
color: #006;
vertical-align: middle;
}
.Xh2top {
color: #F00;
margin-top: 0px;
line-height: 110%;
}
.Xfooterlinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 150%;
}
.Xmenubot {
background-color: #000066;
white-space: nowrap;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
background-image:  url(../media/new/menuF-background-botX.gif);
background-repeat: repeat-x;
}
#Xcopyrightbox table {
border-color: #000;
border-width: 0px;
border-style: solid;
width: 100%;
}
#Xcopyrightbox a {
color: #FFF;
text-decoration: none;
margin: 0px 10px 0px 10px;
}
#Xcopyrightbox td {
background-color: #006;
padding: 0px 5px 0px 5px;
color: #FFF;
white-space: nowrap;
background-image:  url(../media/new/menuF-background-botX.gif);
background-repeat: repeat-x;
}
#Xcopyrightbox td.logo {
font-size: 14px;
font-weight: bold;
text-align: right;
}
#Xcopyrightbox td.side {
padding: 0px;
width: 10px;
}
.Xstandardtable {
margin-top: 15px;
width: 85%;
margin-bottom: 15px;
}
.Xoverhead {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #999999;
padding-left: 4px;
}

#teacher-profile img {
padding: 5px;
margin-bottom: 10px;
margin-left: 15px;
float: right;
}
.Xtopline {
margin-top: 5px;
}
.Xfrontbullet {
line-height: 1.6em;
background-image: url(../media/new/plaintarget10.gif);
background-repeat: no-repeat;
margin-left: 10px;
padding-left: 15px;
width: 320px;
background-position: left top;
}
.Xsitemap {
padding-top: 3px;
padding-bottom: 6px;
}
.Xsitemapbullet {
line-height: 1.5em;
background-image: url(../media/new/plaintarget10.gif);
background-repeat: no-repeat;
margin-left: 0px;
padding-left: 15px;
width: 260px;
background-position: left top;
margin-top: 5px;
margin-bottom: 10px;
}
.Xh1Test {
right: 150px;
}

/* added by Oli */
body {font: 76% "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", lucida, helvetica, arial, sans-serif; line-height: 1.5em;}
#index #body, #index-en #body {width: 400px; text-align: center; margin: 20px auto 0;}
#index #body h2, #index-en #body h2 {text-align: left; margin: 0; font-size: 125%;}
#index #body p, #index-en #body p {text-align: left;}
#copyright {text-align: center; margin-top: 15px;}
#index-en #body img, #index #body img {margin: 0 auto 15px;}
p {margin-bottom: 1em;}
/*
p {margin: 0;}
p + p {margin-top: 1em;}
*/
p.faq-question {font-weight: bold; margin-top: 1.4em;}
p.faq-question + p {margin-top: 0.4em;}
.img-right {float: right; margin: 0 auto 10px; padding: 0 10px;}
table#contact-info {margin: 0.5em 0; border: 0; padding: 0 0.5em;}
table#contact-info tr {margin: 0; padding: 0;}
table#contact-info th {margin: 0; padding: 0 0.66em 0 0; text-align: right; font-weight: normal; color: #666;}
table#contact-info th.fn {text-align: center; color: #000; font-weight: bold;}
table#contact-info td {margin: 0; border-left: 1px #ccc solid; padding: 0.2em 0 0.2em 0.6em;}
.tables table {float: left;}
form#order #flyer {position: relative;}
form#order .info-thumbs {float: right;}
form#order .info-thumbs li {float: left; width: 120px; margin: 1em 3px 0; padding: 0 0 1em; text-align: center; text-indent: 0;}
form#order #progress-cards .info-thumbs {float: none;}
form#order .info-thumbs img {margin-right: 0; vertical-align: top;}
form#order h3 {color: #000;}
.hide {visibility: hidden;}
.clear {clear: both; height:1px; margin:0; padding:0; font-size: 15px; line-height: 1px;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html>body .clearfix {display: inline-block; width: 100%;}
* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}
h2.deemphasise {color: #000;}

/* data tables */
.tables table.data {width: 47.5%;}
table.data {margin: 0.5em; border: 1px #999 solid; padding: 0; border-collapse: collapse;}
table.data tr {margin: 0; padding: 0; vertical-align: top;}
table.data thead, table.data tfoot {border-top: 2px solid #999; border-bottom: 2px solid #999; background: #ccc;}
table.data th {margin: 0; border-right: 1px solid #999; padding: 0.3em 0.6em; font-weight: bold; text-align: left;}
table.data thead th {border-left: 1px solid #999; border-right: 1px solid #999;}
table.data tbody {border-top: 1px solid #999;}
table.data td {margin: 0; border-left: 1px solid #999; padding: 0.3em 0.6em; text-align: right;}
table.data .table-text {text-align: left;}
table.data td.colbreak {border-left: 1px solid #999;}
table.data caption {margin: 0 3em; font-weight: bold;}
td.rowspan {vertical-align: middle;}

/* forms */
form#order {width: 59em;}
#order ul, form#order ol {list-style: none; margin: 0; padding: 0;}
#order fieldset {margin: 1em 1em 0 0; padding: 0.6em 0;}
#order legend {font-weight: bold;}
#order select {font-size: 1em; width: 5em; margin-right: 1em;}
#order fieldset li {width: 26em; position: relative; margin: 1em; padding: 0;}
#order #student-reward li {width: auto;}
/* add text-indent for long lines sometime if it'll work in IE;
width: 22em; padding-left: 6em; text-indent: -6em; */
#order input#Phone {padding: 0;}
#order fieldset#franchisee li {width: 47em; margin: 1em; position: relative; padding-left: 0; text-indent: 0;}
fieldset#franchisee label {width: 15em; float: left; margin-right: 1em; text-align: right;}
fieldset#franchisee label em {position: absolute; left: 38em; width: 10em; font-weight: bold; color: red; text-align: left;}
fieldset#franchisee input, fieldset#franchisee select {font-size: 1em; width: 20em; margin-right: 0;}
form#order input.submit_button {float: right; width: 15em; margin-right: 0.83em; font-size: 1.2em;}
#level_2, #level_3, #level_4, #level_5, #level_6, #level_7, #level_8, #level_9, #modern_matters, #modern_words, #modern_idioms {float: left; width: 28em;}
fieldset#flyer {clear: left;}
#order fieldset p, #Business_Cards, #order h3, #primary-colours-order {margin-left: 1em;}
fieldset#flyer select {width: 7em;}
fieldset#flyer select.back, fieldset#flyer input#Front_Explosion_Text {width: 11em; margin-right: 0;}
#order fieldset#flyer ol li {width: 47em; margin: 1em; position: relative; padding-left: 9em; text-indent: -9em;}
#order fieldset img {vertical-align: middle; border: 1px solid #999; margin-right: 1em;}
#order fieldset img.portrait {margin-left: 31px;}
#order fieldset img:hover {border: 1px solid red;}
#order fieldset img:active {border: 1px solid #000;}
form .form_submit {float: right; margin-top: 1em;}
form input {padding-left: 1em;}
/* 2 cols for bus routes */
#order .bus-route-years {position: relative;}
#order #bus-routes li {margin-bottom: 9px; padding: 0;}
* html #order #bus-routes li {position: relative;}
#order #bus-routes li.year4 {margin-top: -252px;}
#order #bus-routes li.year1, #order #bus-routes li.year2, #order #bus-routes li.year3 {margin-left: 1em;}
#order #bus-routes li.year4, #order #bus-routes li.year5, #order #bus-routes li.year6-7, #order #bus-routes li.year8-9 {margin-left: 30em;}

/* teacher photo box while waiting for photo */
.img-replace {float: right; width: 300px; height: 226px; margin: 0 auto 10px 15px; border: 1px solid #999; padding: 5px;}

/*extra CSS added by Chris*/
.dialog { position:relative; margin:0px auto; min-width:8em; max-width:950px; color:#000; z-index:1; margin-left:12px;margin-bottom:0.5em;}
.dialog .content,.dialog .t,.dialog .b,.dialog .b div {height:100%; background:transparent url(../media/main_box.png) no-repeat top right; _background-image:url(../main_box.png);}
.dialog .content { position:relative; zoom:1; _overflow-y:hidden; padding:0px 12px 0px 0px;}
.dialog .t {position:absolute; left:0px; top:0px; width:12px;margin-left:-12px; height:100%; _height:1600px;background-position:top left;}
.dialog .b { /* bottom */ position:relative; width:100%;}
.dialog .b,.dialog .b div { height:30px;font-size:1px;}
.dialog .b { background-position:bottom right;}
.dialog .b div { position:relative; width:12px;margin-left:-12px; background-position:bottom left;}
.dialog .hd, .dialog .bd, .dialog .ft {position:relative;}
.dialog .wrapper {position:static;max-height:1000px;overflow:auto;}
.dialog h4, .dialog p {margin:0px;padding:0.5em 0px 0.5em 0px;}
.dialog h4 {padding-bottom:0px;}
.content-box {margin:0 10px 0 10px; float:left; position:absolute; left:120px; top:90px;}
.content-box-top {background:url(../media/top.png) bottom left repeat-x; width:100%; height:18px; float:left; margin:0px; padding:0px;}
.content-box-topleft {background:url(../media/top-left.png) bottom left no-repeat; width:17px; height:18px; float:left;}
.content-box-topright {background:url(../media/top-right.png) bottom right no-repeat; width:26px; height:18px; float:right; }
.content-box-left {background:url(../media/left.png) top left repeat-y; }
.content-box-right {padding:10px 20px 0px 5px; margin-left:10px; background:url(../media/right.png) top right repeat-y; }
.content-box-contents {background:#FFF url(../media/content-logo.gif) bottom right no-repeat; }
.content-box-bottom {background:url(../media/bottom.png) bottom repeat-x; width:100%; height:26px; float:left; }
.content-box-botleft {background:url(../media/bottom-left.png) bottom left no-repeat; width:17px; height:26px; float:left; }
.content-box-botright {background:url(../media/bottom-right.png) bottom right no-repeat; width:26px; height:26px; float:right; }
.side_menu {}
.side_menu ul, li{display: block; margin:0; padding-left:10px; text-indent: 0px; }
.side_menu_top {background:transparent  url(../media/side_menu_top.png) top left no-repeat; width:123px; height:17px;}
.side_menu_sides {background:transparent  url(../media/side_menu_bg.png) top left repeat-y ; width:123px; margin-top:0px;}
.side_menu_content { background:#FFFFFF url(../media/side_menu_logo.png) bottom left no-repeat; width:100px; margin-left:7px; min-height:150px;}
.side_menu_bottom {background:transparent url(../media/side_menu_bottom.png) top left no-repeat; width:123px; height:25px;}