body { background-image: url(../backgrounds/background.gif); font-family: "Times New Roman, Verdana, Arial, Helvetica, sans-serif"; font-size: 0.85em; }

a:link,a:visited { color: #990033; text-decoration: none; font-weight: bold; }
a:hover { color: #990033; text-decoration: underline; font-weight: bold; }
.borderimg0 { height: 100%; width: 100%; border: none;}
.borderimg1 { height: 100%; width: 100%; border: solid 1px; }
.borderimg2 { height: 100%; width: 100%; border: solid 2px; }

h1 { }
h2 { font-family: "Times New Roman, Verdana, Arial, Helvetica, sans-serif"; font-size: 2.5em; font-weight: bolder; color: red; }


span.footertext { font-size: 64%; }

div { position: absolute; width: 100%; text-align: center; }

div.title1 { top: 40px; }

div.gradimage { height: 40%; left: 80%; top: 40px; width: 20%; }
div.cvtable { left: 30px; top: 80px; width: 75%;}
div.cvmcp { height: 10%; right: 5px; top: 58%; width: 16%; }
div.cvbcs { height: 52px; right: 5px;  top: 70%; width: 112px; }
div.slideshow1 { height: 85%; top: 0px; }
div.slideshow2 { height: 80%; top: 0px; }
div.movie { top: 0px; height: 100%; width: 100%; }
div.slideshowoptions { text-align: left; top: 89%; }
div.slideshowoptions2 { text-align: left; top: 84%; }
div.slideshowoption1 { text-align: left; left: 10%; top: 92%; }
div.slideshowoption1b { text-align: left; left: 10%; top: 87%; }
div.slideshowoption2 { text-align: left; left: 10%; top: 96%; }
div.slideshowoption2b { text-align: left; left: 10%; top: 91%; }

div.text { text-align: left; left: 30px; top: 80px; width: 95%; }
#abtmetext { width: 75%; height: 70%; }

td.tdleft { text-align: left; }
td.tdcenter { text-align: center; }
td.tdright { text-align: right; }
tr.trheight5 { height: 5%; }
tr.trheight10 { height: 10%; }
tr.trheight15 { height: 15%; }
tr.trheight20 { height: 20%; }

td.tdwidth5 { width: 5%; }
td.tdwidth10 { width: 10%; }
td.tdwidth15 { width: 15%; }
td.tdwidth20 { width: 20%; }
td.tdwidth25 { width: 25%; }

img.border0 { border: none; }

/* ----------------------- Index ----------------------- */
table.welcome { top: auto; left: auto; width: 50%; height: 100%; border: none; }
div.welcometext { text-align: left; top: 30%; left: 55%; width: 43%; height: 68%; overflow: auto; }
div.sitalogo { right: 10px; top: 30px; width: 150px; height: 78px; }
span.contact { color: #FF4500; }
img.imgw3c { height: 50%; width: 95%; }
img.mcpbcs { height: 7%; width: 95%; }
/* ----------------------- Index ----------------------- */


/* ----------------------- Computing ----------------------- */
div.compcertstext1 { text-align: left; left: 30px; top: 80px; width: 95%; }
div.compcertstext2 { text-align: left; font-weight: bold; left: 4%; }
#computeach { top: 50%; }
#wordprocessing { top: 80%; }
#hncvb { top: 110%; }
#misc { top: 140%; }
div.comcertimg1  { top: 55%; width: 9%; height: 20%; }
div.comcertimg2  { top: 85%; width: 9%; height: 20%; }
div.comcertimg3  { top: 115%; width: 9%; height: 20%; }
div.comcertimg4  { top: 145%; width: 9%; height: 20%; }
div.comcertimg4b { top: 145%; width: 13%; height: 15%; }
#cert1, #cert21, #cert31, #cert41, #cert51 { left: 5%; }
#cert2, #cert22, #cert32, #cert42, #cert52 { left: 15%; }
#cert3, #cert23, #cert33, #cert43, #cert53 { left: 25%; }
#cert4, #cert24, #cert34, #cert44, #cert54 { left: 35%; }
#cert4b, #cert24b, #cert34b, #cert44b, #cert54b { left: 39%; }
#cert5, #cert25, #cert35, #cert45, #cert55 { left: 45%; }
#cert5b, #cert25b, #cert35b, #cert45b, #cert55b { left: 53%; }
#cert6, #cert26, #cert36, #cert46, #cert56 { left: 55%; }
#cert6b, #cert26b, #cert36b, #cert46b, #cert56b { left: 63%; }
/* ----------------------- Computing ----------------------- */


/* ----------------------- Baton Relay ----------------------- */
.baton { width: 13%; height: 13%;}
#qjbrtext  { text-align: left; left: 25%; top: 80px; width: 70%;}
#qjbrvidshot  { left: 2%; top: 17%; width: 20%; height: 25%;}
#qjbrbatimg01  { left: 5%; top: 45%; }
#qjbrbatimg02  { left: 18%; top: 45%; }
#qjbrbatimg03  { left: 31%; top: 45%; }
#qjbrbatimg04  { left: 44%; top: 45%; }
#qjbrbatimg05  { left: 57%; top: 45%; }
#qjbrbatimg06  { left: 70%; top: 45%; }
#qjbrbatimg07  { left: 5%; top: 60%; }
#qjbrbatimg08 { left: 18%; top: 60%; }
#qjbrbatimg09 { left: 31%; top: 60%; }
#qjbrbatimg10 { left: 44%; top: 60%; }
#qjbrbatimg11 { left: 57%; top: 60%; }
#qjbrbatimg12 { left: 70%; top: 60%; }
#qjbrbatlogo01 { left: 5%; top: 75%; width: 8%; height: 22%; }
#qjbrbatlogo02 { left: 75%; top: 75%; width: 8%; height: 22%; }
#qjbrbatcert { left: 31%; top: 75%; width: 22%; height: 22%; }
#qjbrbatgroup { left: 53%; top: 75%; width: 22%; height: 22%; }
#qjbrbuttontext { text-align: left; left: 15%; top: 75%; }
#qjbrbuttons { left: 30px; top: 50px; }
/* ----------------------- Baton Relay ----------------------- */


/* ----------------------- University ----------------------- */
div.universityimg { top: 78%; width: 9%; height: 20%; }
#universityimg1 { left: 5%; }
#universityimg2 { left: 14%; }
#universityimg3 { left: 23%; }
div.universitytext1 { text-align: left; left: 30px; top: 80px; width: 95%; }
div.universitytext2 { text-align: left; left: 40%; top: 78%; width: 50%; }
div.universitybtn1 { text-align: left; left: 10%; top: 10%; }
div.resweekendimg { top: 25%; left: 25%; height: 75%; width: 75%; }
/* ----------------------- University ----------------------- */


/* ----------------------- Dive Quals ----------------------- */
div.divequalsimg { top: 60%; width: 12%; height: 25%; }
div.divequalsimg2 { top: 60%; width: 17%; height: 19%; }
#divequalsimg1 { left: 5%; }
#divequalsimg2 { left: 18%; }
#divequalsimg3 { left: 31%; }
#divequalsimg4 { left: 44%; }
#divequalsimg5 { left: 57%; }
#divequalsimg6 { left: 75%; }
/* ----------------------- Dive Quals ----------------------- */


/* ----------------------- Dive Sites ----------------------- */
div.divesitetitle1 { width: 65%; top: 40px; }
div.divesitetext1 { text-align: left; left: 30px; top: 60px; width: 95%; height: 50%; }
div.divesitetext2 { text-align: left; left: 30px; top: 80px; width: 60%; height: 80%; }
div.divesitetext3 { text-align: left; top:90%; }
div.divesitetext4 { text-align: left; top: 83%; }
div.divesitetext5 { text-align: left; left: 30px; top: 80px; width: 50%;}
div.divesitetext6 { text-align: left; left: 30px; top: 80px; width: 45%; }
div.divemapimage { left: 30px; top: 57%; width: 95%; height: 20%; }
div.divemapimage2 { height: 90%; left: 55%; top: 40px; width: 40%; }
div.divemapimage3 { left: 50%; top: 40px; width: 40%; height: 90%; }
div.divemapimage4 { left: 6%; top: 5%; width: 90%; height:90%; }
div.divemapimageright { height: 65%; left: 65%; top: 40px; width: 35% }
div.diveimgmap { top: 80px; }
div.divedetstext1 { text-align: left; left: 30px; top: 80px; width: 67%; }
div.divedetstext2 { text-align: left; left: 30px; top: 67%; width: 35%; }
div.divedetstext3 { text-align: left; left: 30px; top: 95%; width: 67%; }
div.divedetstext4 { text-align: left; left: 30px; top: 80px; width: 65%; }
div.divedetstext5 { text-align: right; left: 50%; top: 95%; width: 50%; }
div.divedetstext6 { text-align: right; left: 50%; top: 83%; width: 50%; }
div.divedetsimg { height: 25%; width: 15%; }
#divedetsimg1 { left: 40%; top: 67%; }
#divedetsimg2 { left: 55%; top: 67%; }
div.divedetsmapright { height: 65%; left: 72%; top: 40px; width: 28%; }
div.divedetsphoto1 { height: 20%; left: 65%; top: 60px; width: 30%; }
div.divedetsphoto2 { height: 33%; left: 30px; top: 60%; width: 50%; }
div.divedetsphoto3 { height: 20%; left: 78%; top: 7%; width: 25%; }
div.divesitededication { text-align: left; top: 90%; left: 10%; width: 80%; }
div.divesiteregions { text-align: left; top: 80px; left: 80%; width: 20%; }
/* ----------------------- Dive Sites ----------------------- */


/* ----------------------- Software ----------------------- */
div.softwaretitle1 { top: 10px; } /* filter: shadow(color: #666666, direction: 135); */
div.softwaretext { text-align: left; left: 30px; top: 80px; width: 50%; }
div.softwaretext2 { text-align: left; left: 30px; top: 80px; width: 90%; }
div.softwareimg1 { text-align: left; left: 55%; top: 80px; width: 45%; height: 30%; }
div.softwareimg2 { text-align: left; left: 55%; top: 80px; width: 45%; height: 60%; }
div.softwarebtn1 { top: 92%; }
/* ----------------------- Software ----------------------- */


/* ----------------------- School life ----------------------- */
div.schoollifeimg { top: 75%; width: 9%; height: 20%; }
#schoollifeimg1 { left: 5%; }
#schoollifeimg2 { left: 15%; }
#schoollifeimg3 { left: 25%; }
#schoollifeimg4 { left: 35%; }
#schoollifeimg5 { left: 45%; }
#schoollifeimg6 { left: 55%; }
#schoollifeimg7 { left: 65%; }
/* ----------------------- School life ----------------------- */


/* ----------------------- Tesol ----------------------- */
div.tesolimg { top: 60%; width: 17%; height: 35%; }
#tesolimg1 { left: 5%; }
#tesolimg2 { left: 25%; }
/* ----------------------- Tesol ----------------------- */


/* ----------------------- Engineering ----------------------- */
div.engineeringimg { top: 70%; width: 9%; height: 20%; }
#engineeringimg1 { left: 5%; }
#engineeringimg2 { left: 14%; }
#engineeringimg3 { left: 23%; }
#engineeringimg4 { left: 32%; }
#engineeringimg5 { left: 41%; }
#engineeringimg6 { left: 50%; }
#engineeringimg7 { left: 59%; }
#engineeringimg8 { left: 68%; }
#engineeringimg9 { left: 77%; }
#engineeringimg10 { left: 86%; }
/* ----------------------- Engineering ----------------------- */


/* ----------------------- Certificates ----------------------- */
div.certificatestext1 { text-align: left; left: 30px; top: 80px; width: 90%; }
div.certificatestext2 { text-align: left; font-weight: bold; left: 4%; }
#secondaryeducation { top: 25%; }
#generalcomputing { top: 55%; }
#programming { top: 85%; }
#microsoft { top: 115%; }
#university { top: 145%; }
#engineering { top: 175%; }
#scubadiving { top: 205%; }
#others { top: 235%; }
div.certificatesimg1  { top: 30%; width: 9%; height: 20%; }
div.certificatesimg1b { top: 30%; width: 13%; height: 15%; }
div.certificatesimg2  { top: 60%; width: 9%; height: 20%; }
div.certificatesimg2b { top: 60%; width: 13%; height: 15%; }
div.certificatesimg3  { top: 90%; width: 9%; height: 20%; }
div.certificatesimg3b { top: 90%; width: 13%; height: 15%; }
div.certificatesimg4  { top: 120%; width: 9%; height: 20%; }
div.certificatesimg4b { top: 120%; width: 13%; height: 15%; }
div.certificatesimg5  { top: 150%; width: 9%; height: 20%; }
div.certificatesimg5b { top: 150%; width: 13%; height: 15%; }
div.certificatesimg6  { top: 180%; width: 9%; height: 20%; }
div.certificatesimg6b { top: 180%; width: 13%; height: 15%; }
div.certificatesimg7  { top: 210%; width: 9%; height: 20%; }
div.certificatesimg7b { top: 210%; width: 13%; height: 15%; }
div.certificatesimg8  { top: 240%; width: 9%; height: 20%; }
div.certificatesimg8b { top: 240%; width: 13%; height: 15%; }
#img1, #img21, #img31, #img41, #img51, #img61, #img71, #img81 { left: 5%; }
#img2, #img22, #img32, #img42, #img52, #img62, #img72, #img82 { left: 14%; }
#img2b, #img22b, #img32b, #img42b, #img52b, #img62b, #img72b, #img82b { left: 18%; }
#img3, #img23, #img33, #img43, #img53, #img63, #img73, #img83 { left: 23%; }
#img3b, #img23b, #img33b, #img43b, #img53b, #img63b, #img73b, #img83b { left: 27%; }
#img4, #img24, #img34, #img44, #img54, #img64, #img74, #img84 { left: 32%; }
#img5, #img25, #img35, #img45, #img55, #img65, #img75, #img85 { left: 41%; }
#img6, #img26, #img36, #img46, #img56, #img66, #img76, #img86 { left: 50%; }
#img6b, #img26b, #img36b, #img46b, #img56b, #img66b, #img76b, #img86b { left: 54%; }
#img7, #img27, #img37, #img47, #img57, #img67, #img77, #img87 { left: 59%; }
#img8, #img28, #img38, #img48, #img58, #img68, #img78, #img88 { left: 68%; }
#img9, #img29, #img39, #img49, #img59, #img69, #img79, #img89 { left: 77%; }
#img10, #img210, #img310, #img410, #img510, #img610, #img710, #img810 { left: 86%; }
#img10b, #img210b, #img310b, #img410b, #img510b, #img610b, #img710b, #img810b { left: 90%; }
/* ----------------------- Certificates ----------------------- */


/* ----------------------- Cycle Ride ----------------------- */
div.cycridetext1 { left: 5%; text-align: left; top: 87%; width: 90%; }
div.cycrideimg1 { left: 38%; top: 15%; width: 20%; height: 30%; }
div.cycrideimg2 { left: 40%; top: 48%; width: 25%; height: 35%; }
div.cycrideimg3 { left: 13%; top: 48%; width: 26%; height: 35%; }
div.cycrideimg4 { left: 59%; top: 15%; width: 15%; height: 40%; }
div.cycrideimg5 { left: 2%; top: 15%; width: 35%; height: 30%; }
div.cycrideimg6 { left: 74%; top: 15%; width: 25%; height: 60%; }
div.cycrideimg7 { left: 2%; top: 25%; width: 10%; height: 58%; }
div.cycrideimg8 { left: 66%; top: 56%; width: 15%; height: 27%; }
div.cycridebuttons { left: 80%; top: 92%; width: 10%; }
/* ----------------------- Cycle Ride ----------------------- */


/* ----------------------- Humour ----------------------- */
div.humourtitle1 { top: 10px; } /* filter: shadow(color: #666666, direction: 135); } */
div.humourintro { text-align: left; left: 30px; top: 70px; width: 70%; }
div.humourintro2 { text-align: left; left: 30px; top: 70px; width: 95%; }
div.humourtext1 { text-align: left; left: 30px; top: 25%; width: 95%; }
div.humourtext2 { text-align: left; left: 30px; top: 40%; width: 95%; }
div.humourimg1 { height: 40%; left: 75%; top: 10px; width: 23%; }
div.humourbtn1 { right: 10%; text-align: right; }
/* ----------------------- Humour ----------------------- */


/* ----------------------- H Rules ----------------------- */
div.hr1 { top: 87%; }
div.hr2 { top: 81%; }
hr.hr1 { color: #CC9966; text-align: center; width: 100%; }
/* ----------------------- H Rules ----------------------- */


/* ----------------------- Slide Show ----------------------- */
span.title { width: 100%; padding: 2px; background-color: blue; font-weight: bold; font-size: 1.2em; color: white; }
div.slideshowphoto { left: 2%; top: 10%; width: 60%; height: 65%; border: black solid 1px; }
img.slideshowphoto { width: 100%; height: 100%; }
div.slideshowtext { left: 63%; top: 10%; width: 35%; height: 85%; overflow: auto; text-align: left; }
/* ----------------------- Slide Show ----------------------- */