/* TPG site v4.0.0, commented by SG 26/10/07 */

/*/////////////////// - Start - Styles for the main template of the website - Start - ///////////////////*/
/* Reset all margins and paddings for browsers */
* { 
	/*padding: 0;*/
	margin: 0;
}

/* Main body style */
body { 
	margin: 0;
	background-position:left top;
	background-repeat:repeat-x;
	background:#e7e7e8;
	width:100%;
	margin:0px;
	padding: 0px;
	font:bold .7em Arial, Helvetica, sans-serif;
	color:#58585a;
	vertical-align:middle;
}

#wrap {	
	background-color:#ffffff;
	min-width:767px;
	max-width:1000px;
	padding:0px;
	border-top:none;
	border-right:none;
	border-bottom:none;
	border-left:none;
	margin-top:5px;
	margin-right:auto;
	margin-left:auto;
}

/* These styles define the look of any text links other than those defined PER DIV, see below */
a:link { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
}

a:visited { 
	color:#551a8b;
	font-size:1em;
	text-decoration:none;
}

a:hover { 
	color:#323234;
	font-size:1em;
	text-decoration:underline;
}

a:active { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
}

p { margin-top: 10px; }

sup { font-size:0.9em;}

/* This style will show the top left curve image */
#topLeftImage {
	float:left;
	padding:0px;
	background-image:url(../../images/template/tpg_left_header.gif);
	background-repeat:no-repeat;
	width:9px;
	height:9px;
}

/* This style will show the top right curve image */
#topRightImage {
	float:right;
	padding:0px;
	background-image: url(../../images/template/tpg_right_header.gif);
	background-repeat:no-repeat;
	width:9px;
	height:9px;
}

#bottom {
	height:9px;
	background-color:#ffffff;
}

/* This style will show the bottom left curve image */
#bottomLeftImage {
	float:left;
	padding-top:0px;
	padding-bottom:0px;
	background-image:url(../../images/template/tpg_left_footer.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	width:9px;
	height:9px;
}

/* This style will show the bottom right curve image */
#bottomRightImage {
	float:right;
	padding-top:0px;
	padding-bottom:0px;
	background-image: url(../../images/template/tpg_right_footer.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	width:9px;
	height:9px;
}

.nowrap { white-space:nowrap; }
/*/////////////////// - End - Styles for the main template of the website - End - ///////////////////*/



/*/////////////////// - Start - Styles for the header section of the website - Start - ///////////////////*/
/* This is the top div that contains the upper edge graphic */
#header {
	background:url(../../images/template/tpg_header.gif) no-repeat;
	height:8em;
	min-width:747px;
	max-width:1000px;
	margin:0px;
	padding:0px;
	font-size:1em;
	font-weight:normal;
	color:#323234;
}

/* This is the div that holds the logo */
#header_logo {
	float:left;
	display:inline;
	height:70px;
	width:400px;
	text-align:left;
	vertical-align:middle;
	margin-top:0px;
	padding-top:0px;
	padding-left:10px;
white-space: nowrap;
}

/* This is the div that holds the right hand side elements of the header */
#header_extras {
white-space: nowrap;
	float:right;
	display:inline;
	height:8em;
	/*width:280px;*/
width:390px;
	text-align:right;
	font-weight:normal;
	margin-top:0px;
	padding-right:10px;
}

/* These are the various sub-elements of the right hand side of the header */
#header_geography_selection {
	float:right;
white-space: nowrap;
	display:inline;
	height:1.8em;
	width:280px;
	text-align:right;
	margin:0px;
	padding:5px 0px 0px;
	vertical-align:middle;
}

#header_geography_selection a:hover {
	color:#323234;
	font-size:1em;
	text-decoration:underline;
}

#header_geography_selection a:visited {
	color:#551a8b;
	font-size:1em;
	text-decoration:none;
}

#header_last_updated {
	float:right;
	white-space: nowrap;
	color:#1e7fb6;
	display:inline;
	height:2em;
	width:220px;
	text-align:right;
	margin:0px;
	padding:0px 0px 0px;
	display:none;
}
#header_phone {
	float:right;
white-space: nowrap;
width:350px;
	display:inline;
	font-size:2.8em;
	/*height:2em;*/
	color:#676767;
	text-align:right;
	margin:0px;
	padding:0px 0px 0px;
}

#header_links {
	float:right;
	display:inline;
	height:2em;
	width:220px;
	text-align:right;
	margin:0px;
	padding:0px;
}

#header_links a { 
	color:#1e7fb6;
	font-size:1em;
	text-decoration:none;
}

#header_links a:hover { 
	color:#1e7fb6;
	font-size:1em;
	text-decoration:underline;
}

#header_links a:visited { 
	color:#551a8b;
	font-size:1em;
	text-decoration:none;
}

#header_search {
	float:right;
	display:inline;
	height:2em;
	width:220px;
	text-align:right;
	margin:0px;
	padding:0px;
	vertical-align:middle;
}

#header_search form input {
	margin:0px;
	padding:0px;
	font-size:1em;
	text-align:center;
	vertical-align:middle;
}

/* This would format any form (eg Search bar) that you might put up in this header div */
#header form {
	margin:0px;
	padding:0px;
	vertical-align:middle;
}
/*/////////////////// - End - Styles for the header section of the website - End - ///////////////////*/



/*/////////////////// - Start - Styles for the main navigation - Start - ///////////////////*/
/* This is div that holds the navigation script and handles the menu background via a graphic */
#navigation_holder {
	background-color:#ffffff;
	min-width:767px;
	max-width:1000px;
	width:100%;
	height:24px;
	padding:0px;
	border-top: none;
	border-right:none;
	border-bottom:none;
	border-left:none;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
}

#nav {
	background-image: url(../../images/menu/tpg_menu_bg.gif);
	min-width:727px;
	max-width:1000px;
	margin-left:20px;
	margin-right:20px;
	height:24px;
	clear:both;
}

/* This is the actual Menu div. Content is handled in menudata.jsp in the menu folder */
#navigation {
	float:left;
	display:inline;
	margin-top:5px;
	margin-left:14px;
	margin-right:24px;
	height:20px;
	text-align:left;
}

/* These set the colours of the links in the menu (also configured in the file menudata.jsp) */
#navigation a:link { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
 }
#navigation a:visited { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
 }

.menu {
	margin-right:10px;
}
/*/////////////////// - End - Styles for the main navigation - End - ///////////////////*/



/*/////////////////// - Start - Styles for breadcrumbs - Start - ///////////////////*/
/* These two styles control the breadcumb layout */
#breadcrumbs {
	font-size:1em;
	font-weight:normal;
	padding-top:2px;
	padding-left:2px;
	padding-bottom:0px;
	height:2em;
	margin-top:4px;
	margin-bottom:0px;
	margin-left:20px;
	background-color:#ffffff;
	text-align:left;
}

#breadcrumbs a {
	color:#0f69b4;
}

#breadcrumbs a:hover {
	text-decoration:underline;
}
/*/////////////////// - End - Styles for breadcrumbs - End - ///////////////////*/



/*/////////////////// - Start - Styles for print and top of page links - Start - ///////////////////*/
#print_holder {
	font-size:1em;
	font-weight:normal;
	padding-top:0px;
	padding-right:0px;
	height:22px;
	margin-top:0px;
	margin-right:0px;
	background-color:#ffffff;
	width:100%;
	clear:both;
}

#print {
	font-size:1em;
	font-weight:normal;
	padding-top:2px;
	padding-right:20px;
	height:22px;
	margin-top:4px;
	margin-right:20px;
	padding:0px;
	background-color:#ffffff;
	text-align:right;
}

#print a {
	color:#0f69b4;
}
/*/////////////////// - End - Styles for print and top of page links - End - ///////////////////*/



/*/////////////////// - Start - Styles for the footer - Start - ///////////////////*/
/* This is div that holds the navigation script and handles the menu background via a graphic */
#footer_holder {
	background-color:#ffffff;
	min-width:767px;
	max-width:1000px;
	width:100%;
	height:36px;
	padding:0px;
	border:0px;
    margin: 0px;
	padding-top:0px;
	padding-bottom:0px;
	clear:both;
}

/* This is the global footer that contains the curved lower edge graphic */
#footer {
    background-image:url(../../images/menu/tpg_menu_bg.gif);
	background-repeat:repeat-x;
	padding-top:5px;
	min-width:727px;
	max-width:1000px;
	margin-left:20px;
	margin-right:20px;
	height:22px;
	font-weight:normal;
	font-size:1em;
	padding-bottom:0px;
	color:#323234;
	text-align:center;
}

#footer a {
	color:#323234;
	font-size:1em;
	text-decoration:none;
}

#footer a:hover {
	color:#323234;
	font-size:1em;
	text-decoration:underline;
}
/*/////////////////// - End - Styles for the footer - End - ///////////////////*/




/*/////////////////// - Start - Styles for the main content, everything below the breadcrums and above the footer - Start - ///////////////////*/
#main { 
	background-color:#ffffff;
	background-repeat:repeat-y;
	margin-left:20px;
	margin-right:20px;
	font-size:1em;
	font-weight:normal;
	padding-top:0px;
	padding-bottom:0px;
	margin-top:0px;
	margin-bottom:0px;
}

#main a {
	color:#0f69b4;
	font-size:1em;
}

#main form {
	width:90%;
	/*font-size:1.1em;*/
}

#main form select {
	width:90%;
	font-size:1.1em;
}

#main input {
	font-size:1.1em;
}

#main form input {
	font-size:1.1em;
}

/* This style controls the style of the main page heading underneath the breadcrumbs */
#general_body_header_wrap {
	background-color:#6f76a0;
	background-repeat:no-repeat;
	color:#ffffff;
	margin-top:0px;
	margin-left:0px;
	padding-left:10px;
	padding-right:0px;
	padding-top:.2em;
	height:1.5em;
	font-weight:bold;
	text-align:left;
}
/* ----------------------*/

/* This style controls the style of the sub headings in the main content */
.general_body_subheader {
	color:#0f69b4;
	font-weight:bold;
	padding-top:10px;
	margin-top:0px;
}
.general_body_header1 {
	color:#0f69b4;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:5px;
	margin-top:0px;
line-height:30px;
	font-size:1.1em;
}

/* Leftside column in the main content */
#leftside {
	background:#ffffff;
	margin:0px;
	text-align:justify;
	font-size:1.1em;
	font-weight:normal;
	padding-right:245px;
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
/* This is IE6 Peek-a-boo and <em> tag fix*/
	*padding-right:10px;
	*zoom:1;
	*overflow:visible;
/*----------------------------*/
}

#leftside ul {
	margin-top:10px;
	line-height:1.5em;
	margin-left:20px;
	list-style:outside;
}

#leftside ol {
	margin-top:10px;
	line-height:1.5em;
	margin-left:20px;
	list-style:outside;
}

#bulletNormal ul {
	padding:20px;
}

#leftside .bulletNormal li {
	margin-top:10px;
	line-height:1.5em;
	margin-left:20px;
	list-style:outside;
}

#leftside ol {
	line-height:1.5em;
	margin-left:28px;
	list-style:outside;
}

/* left column in the main content */
#leftColumn {
	text-align:justify;
	width:49%;
	padding-right:4px;
	float:left;
	padding-top:0px;
	margin-top:0px;
}

/* right column in the main content */
#rightColumn {
	text-align:justify;
	width:49%;
	padding-left:4px;
	float:right;
	padding-top:0px;
	margin-top:0px;
} 

/* left side style where there is no right side column - used with no subs */
#leftside_no_subs {
	background:#ffffff;
	margin:0px;
	text-align:justify;
	font-size:1.1em;
	font-weight:normal;
	padding-right:0px;
	padding-left:0px;
	padding-top:0px;
	padding-bottom:0px;
	width:100%;
}
/*/////////////////// - End - Styles for the main content, everything below the breadcrums and above the footer - End - ///////////////////*/



/*/////////////////// - Start - Styles for the right side column used for the components - Start - ///////////////////*/
/* This style controls the right side column used for the components */
#rightside {
	width:220px;
	float:right;
	background:#ffffff;
	margin:0px;
	padding-bottom:0px;
	padding-top:0px;
} 
/* ----------------------- */

/* These two styles control the header for the component boxes on the right side of the website */
/* o = odd and e = even - This will be used if the components need to have alternating styles */
.rightsideheadero {
	height:1.6em;
	background-image:url(../../images/template/tpg_tabfull_grey.jpg);
	background-repeat:no-repeat;
	color:#58585a;
	margin-left:0px;
	font-weight:bold;
	font-size:1.1em;
	padding-left:22px;
	padding-top:2px;
}
.rightsideheadere {
	height:1.6em;
	background-image:url(../../images/template/tpg_tabfull_grey.jpg);
	background-repeat:no-repeat;
	color:#58585a;
	margin-left:0px;
	font-weight:bold;
	font-size:1.1em;
	padding-left:22px;
	padding-top:2px;
}
/* ----------------------- */

/* This style controls the font size for the text in the component boxes on the right side of the website */
#rightside a {
	font-size:1.1em;
}
/* ----------------------- */

/* This style controls the font colour on hoving over the text in the component boxes on the right side of the website */
#rightside a:hover {
	text-decoration:underline;
}
/* ----------------------- */

#rightside a:visited {
	/*color:#ff0000;*/
}

/* This style controls the format of the component boxes on the right side of the website */
#main #rightside .box {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:-2px;
	margin-bottom: 10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#f2f2f7;
}
/* ----------------------- */
/*/////////////////// - End - Styles for the right side column used for the components - End - ///////////////////*/


#cartAddress {
	width:99%;
	float:none;
	font-size:12px;
	text-align:left;
	font-weight:normal;
	margin-left:0px;
	padding-top:0px;
	margin-top:0px;
	padding-left:0px;
	
}

#cartAddress table {
	border-color:#d1d2d4;
	border-style:solid;
	border-width:1px;
	border-spacing:2px;
	width:99%;
}

#cartAddress th {
	background-color:#9799b9;
	text-align:left;
	padding-left:5px;
	color:#ffffff;
	font-weight:normal;
	height:20px;
}

#cartAddress th .editLink {
	color:#ffffff;
	padding-right:5px;
	float:right;
}

.cartAddress tr {
	background-color:#d1d2d4; 
}

#cartAddress td {
	padding-left:5px;
	height:20px;
}

.cartAddress td {
	background-color:#d1d2d4; 
	padding-bottom:10px;
	padding-top:10px;

}

.cartAddress_row_color {
  background:#d1d2d4 repeat-x 0px 0px; 
}

.cartAddress_row_over {
   background:#ffffff repeat-x 0px 0px; 
}



#portfolio {
	font-size:12px;
	text-align:left;
	font-weight:normal;
	margin-left:0px;
	padding-top:0px;
	margin-top:0px;
	padding-left:0px;
	width:99%;
}

#portfolio table {
	border-color:#d1d2d4;
	border-style:solid;
	border-width:1px;
	border-spacing:2px;
	width:99%;
}

#portfolio th {
	background-color:#9799b9;
	text-align:left;
	padding-left:5px;
	color:#ffffff;
	font-weight:normal;
	height:20px;
}

#portfolio th .editLink {
	color:#ffffff;
	padding-right:5px;
	float:right;
}

.portfolio tr {
	background-color:#d1d2d4; 
}

#portfolio td {
	padding-left:5px;
	height:20px;
}

.portfolio td {
	background-color:#d1d2d4; 
}

.portfolio_row_color {
  background:#d1d2d4 repeat-x 0px 0px; 
}

.portfolio_row_over {
   background:#ffffff repeat-x 0px 0px; 
}


/* Login, error and sucess messages style colour - Text to be displayed in red */
.loginMsg, .RedErrorText, .successMsg, .mandatory {
	color:#ff0000;
}
/*/////////////////////////////////////*/


/* home page */
.mainSubMenuWrap {
	width:260px;
	border:0px;
}

.mainSubMenu {
    background:url(../../images/mainfeature/tpg_submenu_image.gif) no-repeat;
	border:0px;
	width:242px;
	height:152px;
}

/* these styles set the background for the main image table and its rollover states*/
.mainimage {
	/*background:url(../../images/mainfeature/tpg_main_image1.jpg) no-repeat;*/
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0; 
	height:175px;
}

/* this is the rollover for the first CTA on the main_index page */
.mainimage_roll_1 {
	background: url(../../images/mainfeature/tpg_main_image2.jpg) no-repeat;
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0; 
	height:175px;
}

.tpg_tableft_grey {
	/*height:1.5em;*/
	height:20px;
	background-image:url(../../images/template/tpg_tabfull_grey.gif);
	background-repeat:no-repeat;
	color:#58585a;
	margin-left:0px;
	font-weight:bold;
	font-size:1.1em;
	padding-left:22px;
	/*padding-top:2px;*/
	text-align: middle;
line-height:20px;

}

#homepagecolumns {
	margin-top:10px;
	
}

#homeleft {
	position:relative;
	left:0px;
	top:0px;
	width:26%;
	/*width:290px;*/
	background:#ffffff;
	float:left;
	padding-right:50px;
}

#homecenter {
		background:#ffffff;
		float:left;
		/*width:290px;*/
		width:40%;
	/*	margin-left:10px;*/
	padding-right:10px;
}

#homeright {
	position:relative;
	right:0px;
	top:0px;
	width:25%;
	background:#ffffff;
	float:right;
    margin-left:1px;
}

.rightsideheader1 {
	height:1.6em;
	background-repeat:no-repeat;
	color:#58585a;
	margin-left:0px;
	font-weight:bold;
	font-size:1.1em;
	padding-left:22px;
	padding-top:2px;
}


#main #homepagecolumns .box {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:-2px;
	margin-bottom: 10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#f2f2f7;
	font-size:1.1em;
}

#main #homepagecolumns .box1 {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:0px;
	margin-bottom: 10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#9799b9;
	color:#ffffff;
	font-weight:bold;

}


#main #homepagecolumns .box2 {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:0px;
	margin-bottom: 10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#f2f2f7;
	font-weight:normal;
font-size:1.1em;
}

#main #homepagecolumns .box3 {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:0px;
	margin-bottom: 10px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#fffffff;
	font-weight:bold;
}


/* Login form styles */
#home_login_area {
	float:none;
	background:#ffffff;
	margin:0px;
	padding-bottom:0px;
	padding-top:0px;
}

.home_login_header {
	height:1.6em;
	background-image:url(../../images/template/tpg_tabfull_grey.gif);
	background-repeat:no-repeat;
	color:#58585a;
	margin-left:0px;
	font-weight:bold;
	font-size:1em;
	padding-left:22px;
	padding-top:2px;
}

#main #home_login_area .home_login_box {
	margin-bottom: 0px;
	padding-top:5px;
	padding-left:0px;
	padding-right:10px;
	background:#f2f2f7;
	font-size:.9em;
}

#home_login_area form input {
	margin:0px;
	padding:0px;
	font-size:1em;
	vertical-align:middle;
}

#home_form {
	margin-left:0px;
	padding-left:0px;
	text-align:left;
}

.home_form {
	margin:0px;
	padding:0px;
}

.home_buttons {
	width:50px;
	font-size:.8em;
}

.bulletNormal ul {
	padding:20px;
}

.bulletNormal li {
	margin-top:10px;
	line-height:1em;
	margin-left:20px;
	list-style:outside;
}
#main #mainSubMenu .box2 {
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
	margin-top:0px;
	margin-bottom: 0px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	background:#f2f2f7;
	font-weight:bold;
}
hr {
border: none 0;
border-top: 1px dashed #d0d0d0;
/*the border*/
margin-top:10px;
margin-bottom:0px;
height: 1px; /*whatever the total width of the border-top and border-bottom equal*/
} 
#home_page_course_footer a:link { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
}

#home_page_course_footer a:visited { 
	color:#323234;
	font-size:1em;
	text-decoration:none;
}
#home_page_course_footer a:hover { 

	text-decoration:underline;
}
#specials_button_text {
font-size:1.2em;padding-top:26px;padding-left:19px;color:white;padding-right:9px;
}
#specials_button_text a {

color:white;
text-decoration:none;
}
#specials_button {
color:white; 
text-decoration:none;
}
#specials_button:hover { 

	cursor:pointer;
}
#overlay
{
	position: absolute;
	left: 0px;
	top: 0px;
	
	width: 100%;
	height: 100%;
	
	background: url(../../images/overlay1.gif);
	
	/* Set both opacity and filter, for MSIE and firefox compatability */
	opacity: .5;
	filter: alpha(opacity=50);
	
	/* z-index sets the layer order, so that the overlay rests on top.
	Bear in mind that the popup dialogue needs to be even higher! */
	z-index: 1000;
}

#dialogue #close
{
	position: absolute;
	right: 5px;
	top: 0px;
font:normal 1.2em Arial, Helvetica, sans-serif;
}

#dialogue #close a
{
	color: #DD0000;
	text-decoration: none;
font:normal 1.2em Arial, Helvetica, sans-serif;
}

#dialogue
{
	position: absolute;
	
	left: 50%;
	margin-left: -175px;
	top: 100px;
	
	width: 350px;
	padding: 20px;
	font:normal 1.1em Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	
	z-index: 2000;
}
#dialogue #title
{
	padding-bottom:10px;
	font:bold 1.2em Arial, Helvetica, sans-serif;
}