/* colHorz2007.css */

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}




/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx GENERAL LAYOUT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

body {
	background-color: #adf3f7;/*light blue*/
	font: 18px Arial, sans serif;
	color: #047391;/*blue/green*/
}

/*containing the whole page*/
div#container {
	position: relative;
	margin: 0 auto;
	background: url(../assets/pagebg2.jpg) 0 -6px no-repeat;
	width: 1026px;
	height: 772px;
}

/*site logo image*/
div#container img {
	position: absolute;
	top: 20px;
	left: 50px;
	width: 195px;
	height: 52px;
}

/*---------------------start-- NAV --start--------------------------*/
/*positioning nav div with navbar*/
div#container div#nav {
	position: absolute;
	bottom: 80px;
	left: 13px;
	background: url(../assets/navbar.png) 0 0 no-repeat;
	width: 1000px;
	height: 37px;
}

/*positioning and size of <ul>*/
div#container div#nav ul {
	margin-left: 30px;
	width: 876px;
}

/*Floating li's to the left and positiong text*/
div#container div#nav ul li {
	float: left;
	font: 14px Verdana, Arial, sans serif;
	font-weight: bold;
	margin-left: 50px;
	padding-top: 5px;
	color: #047391;
}

/*colouring nav links*/
div#container div#nav ul li a:link, div#container div#nav ul li a:visited {
	color: #047391;/*dk blue/green*/
	text-decoration: none;
}

/*colouring current nav link*/
div#container div#nav ul li a#current {
	color: #023340;
	text-decoration: underline;
}

/*colouring hover nav links except 'current'*/
div#container div#nav ul li a:hover {
	color: #e4f4f4;
	text-decoration: underline;
}
/*---------------------end-- NAV --end-----------------*/

/*--------------------start-- SUBNAV --start----------*/
/*positioning subnav in top right corner of page*/
div#container div#subnav {
	position: absolute;
	top: 10px;
	right: 17px;
	width: 110px;
}

/*font size and family of all <ul> within <div id="subnav">*/
div#container div#subnav ul {
	font-size: 11px;
	font-family: Verdana, Sans Serif;
	
}

/*defining "Navigation" text*/
div#container div#subnav ul li#subnavhd {
	font-weight: bold;
	font-size: 16px;
	height: 18px;
	width: 74px;
	border-bottom: 3px solid #047391;/*dk blue/green*/
}

/*undefining other text in subnav(particularly for IE)*/
div#container div#subnav ul li#subnavhd ul {
	font-weight: normal;
	
}

/*hide page links*/
div#container div#subnav ul ul {
	display: none;
}

/*display page links*/
div#container div#subnav ul li#subnavhd:hover ul {
	display: block;
	width: 110px;
	height: 16px;
	
}

/*putting distance between the <li>'s*/
div#container div#subnav ul  li#subnavhd:hover ul li {
	margin-bottom: 0px;
}

/*achor links*/
div#container div#subnav a {
	text-decoration: none;
	color: #e4f4f4;/*whitish(hint of blue)*/
	border-bottom: 2px solid #e4f4f4;/*whitish(hint of blue)*/
	background-color: #068CB0;/*blue/green*/
	display: block;
	padding-left: 4px;/*indents text*/
	height: 15px;
	width: 110px;
}

/*achor:hover links*/
div#container div#subnav a:hover {
	text-decoration: none;
	background-color: #e4f4f4;/*whitish(hint of blue)*/
	color: #047391;/*blue/green*/
	border-bottom: 2px solid #047391;
	height: 15px;
	width: 110px;
	display: block;
	padding-left: 4px;/*indents text*/
}
/*---------------------END-- subNav --END-----------------*/

/*--------------------START-- Main Box --START----------*/
/*positioning "main box" for ALL PAGES except 'graphic.html' and 'webanim.html'*/
div#container div#mainbox {
	position: absolute;
	top: 100px;
	left: 121.5px;
	width: 783px;
	height: 433px;
	background: url(../assets/mainDisplay.png) 0 0 no-repeat;
}

/*-positioning <h1> within <div id="mainbox">---*/
div#container div#mainbox h1 {
	position: absolute;
	font-size: 50px;
	text-align: center;
	top: 40px;
	left: 151.5px;
	width: 480px;
}

/*-positioning text within <div id="mainbox">---*/
div#container div#mainbox p {
	position: absolute;
	top: 140px;
	left: 151.5px;
	width: 480px;
	color: #03566c;/*darker green/blue*/
}
/*--------------------END-- Main Box --END----------*/

/*--------------------START-- Display Box --START----------*/
/*positioning "display box" for 'graphic.html' and 'webanim.html'*/
div#container div#dsplybox {
	position: absolute;
	top: 100px;
	left: 121.5px;
	width: 783px;
	height: 433px;
	background: url(../assets/displaybox.png) 0 0 no-repeat;
}
/*--------------------END-- Display Box --END----------*/

/*--------------------- SITEINFO --------------------------*/
div#siteinfo {
	position: absolute;
	bottom: 50px;
	left: 401.5px;
	width: 223px;
	font-size: 12px;
}

div#siteinfo a {
	color: #047391;/*dk blue/green*/
}

div#siteinfo a:hover {
	color: #e4f4f4;/*whitish(hint of blue)*/
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx index.html xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*to increase the size of the first line of the text*/
div#container div#mainbox p span {
	
	color: #023340;/*dk blue/green*/
}

/*<ul> holds image links*/
div#container div#mainbox ul {
	position: absolute;
	bottom: 50px;
	left: 91.5px;/*ALTERED*/
	width: 600px;/*ALTERED*/
	height: 150px;
	padding-left: 25px;
	padding-top: 20px;
	font-size: 12px;
	/*border: 1px dotted #f00;/*TEMP*/
}

/*floating <li> of image links*/
div#container div#mainbox ul li {
	float: left;
	/*border: 1px dotted #ff0;/*TEMP*/
	margin-top: 8px;
}

/*<li#centre> has margins to separate <li>'s either side of it*/
div#container div#mainbox ul li#centre {
	margin: 0 10px 0 20px;
	/*border: 1px dotted #0f0;/*TEMP*/
}

						/*  WEB WORKS  */
/*setting up image as background image for link to web work*/
div#container div#mainbox ul li a#web {
	display: block;
	background: url(../assets/webduo.png) 0 0 no-repeat;
	width: 210px;
	height: 108px;
	color: #047391;
	
}

/*rollover image on background image for link to web work*/
div#container div#mainbox ul li a#web:hover {
	display: block;
	background: url(../assets/webduoOver.png) 0 0 no-repeat;
	width: 210px;
	height: 108px;
	color: #000;/*black*/
}

/*positioning text to web work image link beneath it*/
div#container div#mainbox ul li a#web span {
	position: absolute;
	margin: 105px 0px 0 0;
	width: 210px;
}

/*extending space for the bold text to web work image link*/
div#container div#mainbox ul li a#web:hover span {
	margin: 105px 0 0 0;
	width: 210px;
}

						/*  TEMP WORKS  */
/*setting up image as background image for link to web work*/
div#container div#mainbox ul li a#temp {
	display: block;
	background: url(../assets/tempuno.png) 0 0 no-repeat;
	width: 108px;
	height: 108px;
	color: #047391;
	
}

/*rollover image on background image for link to web work*/
div#container div#mainbox ul li a#temp:hover {
	display: block;
	background: url(../assets/tempunoOver.png) 0 0 no-repeat;
	width: 108px;
	height: 108px;
	color: #000;/*black*/
}

/*positioning text to wtempeb work image link above it*/
div#container div#mainbox ul li a#temp span {
	position: absolute;
	margin: -20px 0px 0 -43px;
	width: 222px;
	font: 16px Arial, sans serif;
	font-weight: bold;
}

/*extending space for the bold text to web work image link*/
div#container div#mainbox ul li a#temp:hover span {
	margin: -20px 0 0 -43px;
	width: 222px;
	font: 16px  Arial, sans serif;
	font-weight: bold;
}

						/*  GRFX WORK  */
/*setting up image as background image for link to graphics work*/
div#container div#mainbox ul li a#grfx {
	display: block;
	background: url(../assets/grfxduo.png) 8.5px 0 no-repeat;
	width: 227px;
	height: 109px;
	color: #047391;
}

/*rollover image on background image for link to graphics work*/
div#container div#mainbox ul li a#grfx:hover {
	display: block;
	background: url(../assets/grfxduoOver.png) 8.5px 0 no-repeat;
	width: 227px;
	height: 110px;
	color: #000;/*black*/
}

/*positioning text to graphics work image link beneath it*/
div#container div#mainbox ul li a#grfx span {
	position: absolute;
	margin: 105px 0 0 0px;
	width: 227px;
}

/*extending space for the bold text to graphics work image link*/
div#container div#mainbox ul li a#grfx:hover span {
	margin: 105px 0 0 0px;
	width: 227px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX graphics.html XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


/*iframe positioning within "display box" for both "graphics.html" and "webanim.html"*/
div#container div#dsplybox iframe {
	position: absolute;
	top: 45px;
	left: 60px;
	background-color: #047391;/*dark blue/green*/
}


/*--------------------------START-- image links to Iframe image displays --START--------------------------------------*/
/*setting up positioning of icon links to work to be shown*/
div#container div.iconsgfx {
	position: absolute;
	bottom: 125px;
	left: 63px;
	width: 902px;
	height: 83px;
}

/*floating "iconbg.png" to create bg image set behind the reduced image links*/
div#container div.iconsgfx ul li {
	float: left;
	width: 82px;
	height: 83px;
	background: url(../assets/iconbg.png) 0 0 no-repeat;
}

/*(1)Positioning "asdcBisCrd_frnt.png" image in its reduced state*/
div#container div.iconsgfx ul li#bisfrnt img {
	position: absolute;
	left: 16px;
	top: 25px;
	width: 50px;
	height: 33px;
	border: 1px outset #049CC5;
}

/*(1)Enlarging "asdcBisCrd_frnt.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#bisfrnt a:hover img {
	width: 150px;
	height: 98px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(2)Positioning "asdcBisCrd_bck.png" image in its reduced state*/
div#container div.iconsgfx ul li#bisbck img {
	position: absolute;
	left: 98px;
	top: 25px;
	width: 50px;
	height: 33px;
	border: 1px outset #049CC5;
}

/*(2)Enlarging "asdcBisCrd_bck.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#bisbck a:hover img {
	width: 150px;
	height: 98px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(3)Positioning "asdcCorpId.png" image in its reduced state*/
div#container div.iconsgfx ul li#corp img {
	position: absolute;
	left: 188px;
	top: 16.5px;
	width: 33px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(3)Enlarging "asdcCorpId.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#corp a:hover img {
	width: 100px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(4)Positioning "asdcLetterhead.png" image in its reduced state*/
div#container div.iconsgfx ul li#lttr img {
	position: absolute;
	left: 268px;
	top: 15.5px;
	width: 36px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(4)Enlarging "asdcLetterhead.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#lttr a:hover img {
	width: 107px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(5)Positioning "asdcLogo.png" image in its reduced state*/
div#container div.iconsgfx ul li#logo img {
	position: absolute;
	left: 343px;
	top: 30px;
	width: 50px;
	height: 27px;
	border: 1px outset #049CC5;
}

/*(5)Enlarging "asdcLogo.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#logo a:hover img {
	width: 150px;
	height: 81px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(6)Positioning "RhythmSeeker_frnt.png" image in its reduced state*/
div#container div.iconsgfx ul li#seekerfrnt img {
	position: absolute;
	left: 426px;
	top: 17px;
	width: 48px;
	height: 48px;
	border: 1px outset #049CC5;
}

/*(6)Enlarging "RhythmSeeker_frnt.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#seekerfrnt a:hover img {
	width: 150px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(7)Positioning "RhythmSeeker_bck.png" image in its reduced state*/
div#container div.iconsgfx ul li#seekerbck img {
	position: absolute;
	left: 508px;
	top: 17px;
	width: 48px;
	height: 48px;
	border: 1px outset #049CC5;
}

/*(7)Enlarging "RhythmSeeker_bck.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#seekerbck a:hover img {
	width: 150px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(8)Positioning "rpmlogo.png" image in its reduced state*/
div#container div.iconsgfx ul li#rpmlogo img {
	position: absolute;
	left: 589px;
	top: 25px;
	width: 50px;
	height: 32px;
	border: 1px outset #049CC5;
}

/*(8)Enlarging "rpmlogo.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#rpmlogo a:hover img {
	width: 150px;
	height: 95px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(9)Positioning "drumWizard.png" image in its reduced state*/
div#container div.iconsgfx ul li#tom img {
	position: absolute;
	left: 672px;
	top: 17px;
	width: 48px;
	height: 48px;
	border: 1px outset #049CC5;
}

/*(9)Enlarging "drumWizard.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#tom a:hover img {
	width: 150px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(10)Positioning "pinkfrnt.png" image in its reduced state*/
div#container div.iconsgfx ul li#pinkfrnt img {
	position: absolute;
	left: 755px;
	top: 16px;
	width: 46px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(10)Enlarging "pinkfrnt.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#pinkfrnt a:hover img {
	width: 139px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(11)Positioning "pinkbck.png" image in its reduced state*/
div#container div.iconsgfx ul li#pinkbck img {
	position: absolute;
	left: 835px;
	top: 22px;
	width: 50px;
	height: 39px;
	border: 1px outset #049CC5;
}

/*(11)Enlarging "pinkbck.png" image to normal size when hovered over*/
div#container div.iconsgfx ul li#pinkbck a:hover img {
	width: 150px;
	height: 118px;
	border: 2px outset #049CC5;
	z-index: 10;
}
/*--------------------------END-- image links to Iframe image displays --END--------------------------------------*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX     webanim.html     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*<div id="dsplybox">iframe positioning within "display box" for both "graphics.html" and "webanim.html"; styling placed in graphics.html part of css file*/
/*--------------------------START-- image links to Iframe image displays --START--------------------------------------*/
/*<div id="icons">setting up positioning of icon links to work to be shown;styling placed in graphics.html part of css file*/

/*--------------------------START-- image links to Iframe image displays --START--------------------------------------*/
/*setting up positioning of icon links to work to be shown*/
div#container div.iconsweb {
	position: absolute;
	bottom: 125px;
	left: 63px;
	width: 902px;
	height: 83px;
}

/*floating "iconbg.png" to create bg image set behind the reduced image links*/
div#container div.iconsweb ul li {
	float: left;
	width: 82px;
	height: 83px;
	background: url(../assets/iconbg.png) 0 0 no-repeat;
}

/*(1)Positioning "benlake.png" image in its reduced state*/
div#container div.iconsweb ul li#ben img {
	position: absolute;
	left: 21px;
	top: 16px;
	width: 38px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(1)Enlarging "benlake.png" image to normal size when hovered over*/
div#container div.iconsweb ul li#ben a:hover img {
	width: 113px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(2)Positioning "artAfrica.png" image in its reduced state*/
div#container div.iconsweb ul li#africa img {
	position: absolute;
	left: 97px;
	top: 24px;
	width: 50px;
	height: 35px;
	border: 1px outset #049CC5;
}

/*(2)Enlarging "artAfrica.png" image to normal size when hovered over*/
div#container div.iconsweb ul li#africa a:hover img {
	width: 150px;
	height: 106px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(3)Positioning "longrunartistes.png" image in its reduced state*/
div#container div.iconsweb ul li#lngrun img {
	position: absolute;
	left: 179px;
	top: 23px;
	width: 50px;
	height: 38px;
	border: 1px outset #049CC5;
}

/*(3)Enlarging "longrunartistes.png" image to normal size when hovered over*/
div#container div.iconsweb ul li#lngrun a:hover img {
	width: 150px;
	height: 113px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(4)Positioning "rpm.png" image in its reduced state*/
div#container div.iconsweb ul li#rpm img {
	position: absolute;
	left: 262px;
	top: 15.5px;
	width: 48px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(4)Enlarging "rpm.png" image to normal size when hovered over*/
div#container div.iconsweb ul li#rpm a:hover img {
	width: 144px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(5)Positioning "narco.png" image in its reduced state*/
div#container div.iconsweb ul li#narco img {
	position: absolute;
	left: 343px;
	top: 23px;
	width: 50px;
	height: 38px;
	border: 1px outset #049CC5;
}

/*(5)Enlarging "narco.png" image to normal size when hovered over*/
div#container div.iconsweb ul li#narco a:hover img {
	width: 150px;
	height: 113px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(6)Positioning "flawless.png" image in its reduced state*/
div#container div.iconsweb ul li#flawless img {
	position: absolute;
	left: 428px;
	top: 16px;
	width: 44px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(6)Enlarging "flawless.png" image to bigger size when hovered over*/
div#container div.iconsweb ul li#flawless a:hover img {
	width: 133px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(7)Positioning "guitar.png" image in its reduced state*/
div#container div.iconsweb ul li#guitar img {
	position: absolute;
	left: 507px;
	top: 22px;
	width: 50px;
	height: 39px;
	border: 1px outset #049CC5;
}

/*(7)Enlarging "guitar.png" image to bigger size when hovered over*/
div#container div.iconsweb ul li#guitar a:hover img {
	width: 150px;
	height: 116px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(8)Positioning "hypnotist.jpg" image in its reduced state*/
div#container div.iconsweb ul li#hypno img {
	position: absolute;
	left: 589px;
	top: 16px;
	width: 49px;
	height: 50px;
	border: 1px outset #049CC5;
}

/*(8)Enlarging "hypnotist.jpg" image to bigger size when hovered over*/
div#container div.iconsweb ul li#hypno a:hover img {
	width: 146px;
	height: 150px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(9)Positioning "franchise.png" image in its reduced state*/
div#container div.iconsweb ul li#franchise img {
	position: absolute;
	left: 671px;
	top: 28px;
	width: 50px;
	height: 26px;
	border: 1px outset #049CC5;
}

/*(9)Enlarging "franchise.png" image to bigger size when hovered over*/
div#container div.iconsweb ul li#franchise a:hover img {
	width: 150px;
	height: 78px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX     templates.html     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*<div id="dsplybox">iframe positioning within "display box" for templates.html, "graphics.html" and "webanim.html"; styling placed in graphics.html part of css file*/
/*--------------------------START-- image links to Iframe image displays --START--------------------------------------*/

/*<div id="iconstpl">setting up positioning of icon links to work to be shown;styling placed in graphics.html part of css file*/
div#container div.iconstpl {
	position: absolute;
	bottom: 125px;
	left: 63px;
	width: 902px;
	height: 83px;
}

/*floating "iconbg.png" to create bg image set behind the reduced image links*/
div#container div.iconstpl ul li {
	float: left;
	width: 82px;
	height: 83px;
	background: url(../assets/iconbg.png) 0 0 no-repeat;
}

/*(1)Positioning "performers1.png" image in its reduced state*/
div#container div.iconstpl ul li#perf1 img {
	position: absolute;
	left: 15px;
	top: 22px;
	width: 50px;
	height: 38px;
	border: 1px outset #049CC5;
}

/*(1)Enlarging "performers1.png" image to normal size when hovered over*/
div#container div.iconstpl ul li#perf1 a:hover img {
	width: 150px;
	height: 113px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(2)Positioning "performers2.png" image in its reduced state*/
div#container div.iconstpl ul li#perf2 img {
	position: absolute;
	left: 97px;
	top: 24px;
	width: 50px;
	height: 35px;
	border: 1px outset #049CC5;
}

/*(2)Enlarging "performers2.png" image to normal size when hovered over*/
div#container div.iconstpl ul li#perf2 a:hover img {
	width: 150px;
	height: 106px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(3)Positioning "tryptic.jpg" image in its reduced state*/
div#container div.iconstpl ul li#tryp img {
	position: absolute;
	left: 179px;
	top: 22px;
	width: 50px;
	height: 39px;
	border: 1px outset #049CC5;
}

/*(3)Enlarging "tryptic.jpg" image to normal size when hovered over*/
div#container div.iconstpl ul li#tryp a:hover img {
	width: 150px;
	height: 116px;
	border: 2px outset #049CC5;
	z-index: 10;
}

/*(4)Positioning "photo.jpg" image in its reduced state*/
div#container div.iconstpl ul li#photo img {
	position: absolute;
	left: 262px;
	top: 22px;
	width: 50px;
	height: 37px;
	border: 1px outset #049CC5;
}

/*(4)Enlarging "photo.jpg" image to normal size when hovered over*/
div#container div.iconstpl ul li#photo a:hover img {
	width: 150px;
	height: 110px;
	border: 2px outset #049CC5;
	z-index: 10;
}



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX     pricing.html     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*set up <div id="price">'s position, size and scrolling ability*/
div#container div#mainbox div#price {
	position: relative;
	top: 120px;
	left: 171.5px;/*moved <div#price> over an extra 20px due to scroll bar (create a more balanced look)*/
	width: 480px;
	height: 280px;
	overflow: auto;
}


/*<p#one> is 1st and top division of scrolled section*/
div#container div#mainbox div#price p#one {

	top: 20px;
	left: 0;
	width: 460px;
	font-size: 18px;
}

/*highlight first section of text in <p#one>*/
div#container div#mainbox div#price p#one span {
	color: #023340;/*dk blue/green*/
	font-size: 18px;
}

/*italicise bracketed date*/
div#container div#mainbox div#price p#one span#italic {
	font-style: italic;
	font-size: 16px;
	color: #047391;/*blue/green*/
}

/*<ul> is 2nd division of scrolled section*/
div#container div#mainbox div#price ul {
	
	top: 110px;
	left: 0;
	width: 440px;
	font-size: 18px;
}



/*loose floating of <li>'s* and adding space between them*/
div#container div#mainbox div#price ul li {
	float: none;
	margin-bottom: 5px;
}

/*emphasise 'Web' and 'Graphics' <li>'s*/
div#container div#mainbox div#price ul li.caps {
	
	font-variant: small-caps;
	margin-bottom: 5px;
	margin-top: 10px;
	text-decoration: underline;
	color: #023340;/*dk blue/green*/
	width: 180px;
}


/*<h2> for 3rd division*/
div#container div#mainbox div#price h2 {
	position: relative;
	font-variant: small-caps;
	margin-bottom: 5px;
	margin-top: 50px;
	text-decoration: underline;
	color: #023340;/*dk blue/green*/
	width: 175px;
	font-weight: normal;
	top: 680px;
	left: 0;
}


/*<p#two> is 3rd division of scrolled section*/
div#container div#mainbox div#price p#two {
	position: relative;
	top: 700px;
	left: 0;
	width: 460px;
	font-size: 18px;
}

/*<h3> for 4th division*/
div#container div#mainbox div#price h3 {
	position: relative;
	font-variant: small-caps;
	margin-bottom: 5px;
	margin-top: 10px;
	text-decoration: underline;
	color: #023340;/*dk blue/green*/
	width: 80px;
	font-weight: normal;
	top: 710px;
	left: 0;
}

/*<p#three> is 4th division of scrolled section*/
div#container div#mainbox div#price p#three {
	position: relative;
	top: 725px;
	left: 0;
	width: 460px;
	font-size: 18px;
}

/*achor links within <p#three>*/
div#container div#mainbox div#price p#three a { 
	color: #047391;/*dark blue/green*/
	text-decoration: underline;
}

/*achor hovers within <p#three>*/
div#container div#mainbox div#price p#three a:hover {
	color: #e4f4f4;/*whitish*/
	text-decoration: underline;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX     aboutus.html     XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*get rid of <a> default underline*/
div#container div#mainbox p a {
	text-decoration: none;
}

/*-highlighting explained text within <p>---*/
div#container div#mainbox p a span {
	color: #047391;/*dark green/blue*/
	border-bottom: 1px dashed #03566c;/*darker green/blue*/
	font-size: 16px;
	font-variant: small-caps;
}

/*-highlighting explained text within <p>---*/
div#container div#mainbox p a:hover span {
	color: #9D0038;/*red pink*/
	border-bottom: 1px dashed #9D0038;/*red pink*/
	
}

/*Hide annotation of text highlight*/
div#container div#mainbox p a span.defin {
	display: none;
}

/*reveal annotation of text highlight*/
div#container div#mainbox p a:hover span.defin {
	display: block;
	position: absolute;
	border: 2px solid #047391;/*dark blue/green*/
	border-top: 2px solid #047391;/*dark blue/green*/
	border-bottom: 2px solid #047391;/*dark blue/green*/
	color: #000;
	background-color:#ff9;/*yellow/light cream*/
	padding: 5px;
	text-align: center;
	font-variant: normal;
}

/*positioning 'definition 1' of highlight text,"LCDT"*/
div#container div#mainbox p a:hover span.defin1 {
	top: 30px;
	left: 300px;
	width: 190px;
	height: 70px;
	background: #ff9 url(../assets/definBg2.png) 0 -10px repeat-x;
}

/*positioning 'definition 2' of highlight text,"Musicals"*/
div#container div#mainbox p a:hover span.defin2 {
	top: 45px;
	left: 90px;
	width: 190px;
	height: 90px;
	background: #ff9 url(../assets/definBg2.png) 0 10px repeat-x;
}

/*anchor links within <p>*/
div#container div#mainbox p a#note {
	font-variant: small-caps; 
	color: #047391;/*dark blue/green*/
}

/*anchor hovers within <p>*/
div#container div#mainbox p a#note:hover {
	color: #e4f4f4;/*whitish*/
}

/*anchor links within <p>*/
div#container div#mainbox p a#link, div#container div#mainbox p a#link {
	font-variant: small-caps; 
	color: #047391;/*dark blue/green*/
	text-decoration: underline;
}

/*anchor hovers within <p>*/
div#container div#mainbox p a#link:hover {
	color: #e4f4f4;/*whitish*/
	text-decoration: underline;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx contact.html xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
div#container div#mainbox p {
	margin-top: -20px;
}

/*positioning form*/
div#container div#mainbox form {
	position: absolute;
	top: 160px;
	left: 218.5px;
	width: 346px;
	height: 259px;
}

div#container div#mainbox form ul {
	position: absolute;
	top: 0;
	left: -26px;/*moves all the form elements towards the left to centre the look of the form*/
	width: 346px;
	height: 259px;
}

/*floating 'name' item left and placing margin to its right*/
div#container div#mainbox form ul li#nmflt {
	float: left;
	margin-right: 10px;
}

/*placing margin beneath all <li>'s to separate info*/
div#container div#mainbox form ul li {
	margin: 0 0 5px 0;
	color: #03566c;/*darker green/blue*/
}

/*colouring background of input areas in form*/
div#container div#mainbox form input, div#container div#mainbox form textarea {
	background-color:#ff9;/*yellow/light cream*/
	color: #000033;
	font-family: Verdana, Arial, Sans Serif;
}