/* Inspiration from undohtml.css - (CC) 2004 Tantek Celik. Some Rights Reserved. Also from Eric Meyer reset css.  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {}
div, ul, ol, dl, form, fieldset {position:relative;}
a:link, a:hover, a:visited {text-decoration:none;}
a img, :link img, :visited img {border:none;}
ol, ul {list-style:none;}
ins {text-decoration:none;} /* remember to highlight inserts somehow! */
del {text-decoration:line-through;}

html {}
body { background: #81adb5 url(/images/bg_body.jpg) 50% 0px repeat-x; color:#666; font: 62.5%/1.3 Verdana, Geneva, sans-serif; }
p { font-size: 12px; padding: 0 0 14px 0; }
ul { font-size: 12px; }
a { color:#5ba7cd;text-decoration:none; }
a:hover { text-decoration:underline; }


#wrap {width: 940px; margin:0 auto; text-align:left;}
#header { position: relative; height: 120px; }
#content { background: rgba(121, 157, 163, 0.5 ); _background: #81adb5; padding: 10px; }

#logo { position: absolute; top: 16px; left: -16px; }

h1 { position: absolute; text-indent: -9999em; }

.contact-list { position: absolute; top: 45px; left: 520px; }
.contact-list li { height: 48px; line-height: 48px; display: block; float: left; font-size: 22px; color: #5ba7cd; }
.contact-number { background: url(../images/mobile.gif) no-repeat 0 0; padding: 0 50px 0 40px; }
.contact-email { background: url(../images/contactus.gif) no-repeat 0 12px; padding-left: 53px; }

.section { padding: 20px 15px 0 65px; }
.section h2 { text-indent: -9999em; position: absolute;  }

.aboutus { background: #fff url(../images/aboutus.gif) no-repeat 0 0; margin-bottom: 20px; height: 130px;  }
.aboutus p { padding-right: 260px; }
.aboutus .highlight { color: #6699cc; }

.counselling { background: #fff url(../images/counselling.gif) no-repeat 0 0; height: 397px }
.counselling .highlight { color: #b1c259; font-weight: bold; }

.education { background: #fff url(../images/education.gif) no-repeat 0 0; margin-bottom: 20px; height: 163px }
.education p { padding-right: 10px; }

.supervision { background: #fff url(../images/supervision.gif) no-repeat 0 0; height: 195px; }
.supervision p { padding-right: 10px; }

.services { width: 250px; height: 130px; padding: 10px; background: #f1f5e8; position: absolute; top: 0; right: 0; }
.services h3 { padding: 2px 0; background: #d0d8ce; color: #fff; text-align: center; font-size: 30px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; }
.services ul { padding: 8px 0; background: #dee8e0}
.services li { display: block; height: 21px; line-height: 21px; padding: 0 0 3px 38px; background: url(../images/tick.gif) no-repeat 12px 0; }

.callout { background: #dee8e0; padding: 10px 17px; margin-bottom: 18px; }
.callout h4 { font-size: 12px; padding-bottom: 10px; }
.callout li { padding-bottom: 3px; list-style-type: disc; margin-left: 15px; }

.promo-banner { display:none; background: url(../images/promobanner.jpg); height: 140px; margin-top: 20px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #fff; }
.promo-banner h2 { width: 300px; font-size: 23px; font-weight: normal; position: absolute; left: 333px; top: 14px; }
.promo-banner ul { width: 240px;  position: absolute; left: 657px; top: 22px; font-size: 14px; line-height: 15px;  }
.promo-banner li { padding-bottom: 3px; list-style-type: disc; margin-left: 15px; }
.promo-banner p { font-size: 16px; font-weight: bold;  position: absolute; left: 333px; top: 116px; padding-bottom: 0  }

div#foot p { font-size: 11px; padding: 10px; color: #fff; }

div#foot img { position: absolute; right: 10px; top: 10px; }

.col-1 { float: left; width: 560px; }
.col-2 { float: right; width: 340px; }
.half { width: 47.8%; margin-right: 1%; }
.floatleft { float: left; }
.clearer { clear: both; height: 0; margin: 0; padding: 0; font-size: 0; line-height:0; }