/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
ESSENTIALS
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	* {
		margin: 0;
		padding: 0;
		border: 0;
		list-style: none;
		text-decoration: none;
		outline: none;
		}

	body {
		background: #ffc425 url(links/background1.gif);
		padding: 0px;
		margin: 0 auto; /* This bit makes the container center in the browser window. */
		font-size: 62.5%;
		text-align: center; /* HACK to fix IE6 and previous versions of IE not recognising Margins Auto */
		}

	#container {
		width: 80em;
		margin: 0 auto; /* This bit makes the container center in the browser window. */
		padding: 0;
		text-align: left; /* HACK to fix IE6 and previous versions of IE not recognising Margins Auto */
		}






/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
MAIN TYPOGRAPHY
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

	p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		margin-bottom: 1.5em;
		}

	h1 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		text-transform: uppercase;
		font-weight: normal;
		}
		
	h4 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 3em;
		line-height: 1.2em;
		color: #000;
		font-weight: normal;
		}

	dt {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		}
		
	dd {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		}



	a {
		color: #000;
		text-decoration: none;
		}
		
	a:hover {
		color: #FFF;
		text-decoration: none;
		}

	.white {
		color: #FFF;
		}

	.yellow {
		color: #ffc425;
		}
		
	form input, form label, form textarea, form select, form option {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.7em;
		line-height: 1.4em;
		font-weight: normal;
		}

	form option {
		font-size: 1em;
		}

		
		
		
		
		

/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HEADER
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#header {
		width: 80em;
		float: left;
		}

	#logo_wgb {
		float: left;
		}
		
	#logo_insite {
		float: right;
		border-left: 1px solid #000;
		border-right: 1px solid #000;
		}

	#logo_ipa {
		float: right;
		margin-right: 1.5em;
		}

	#logo_insite_folio {
		float: right;
		border-left: 1px solid #ffc425;
		border-right: 1px solid #ffc425;
		}






/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
SIDEBAR NAVIGATION (1ST LEVEL)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/



	#sidebar {
		width: 15em;
		float: left;
		margin-top: 4em;
		}


	#sidebar_menu li {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		font-style: normal;
		text-transform: uppercase;
		border-bottom: 1px solid #000;
		padding: 0.5em 0;
		}
		
	#sidebar_menu a {
		color: #000;
		text-decoration: none;
		}
		
	#sidebar_menu a.active, #sidebar_menu a:hover {
		color: #FFF;
		font-weight: bold;
		}


	#sidebar_marks_fsc {
		margin-top: 10em;
		}







/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
TOP HORIZONTAL NAVIGATION (2ND LEVEL)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#hor_nav {
		border-bottom: 1px solid #000;
		padding: 0.4em 0 0.3em 0;
		}

	#hor_nav ul {
		text-align: left;
		}

	#hor_nav li, #hor_nav p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		font-style: normal;
		text-transform: uppercase;
		list-style: none;
		display: inline;
		padding: 0 0.4em 0 0;
		}
		
	#hor_nav a {
		color: #000;
		text-decoration: none;
		}
		
	#hor_nav a.active, #hor_nav a:hover {
		color: #FFF;
		}








/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
CONTENT
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

	#content {
		width: 55em;
		margin-top: 4em;
		float: right;
		}
	
	#content_graphic {
		width: 55em;
		}

	#content_text {
		width: 55em;
		}
		
	#content_text_contact {
		width: 55em;
		}
		

	.vspace_xxs {
		margin-top: 0.5em;
		}

	.vspace_xs {
		margin-top: 1.5em;
		}

	.vspace_s {
		margin-top: 2.5em;
		}

	.vspace_m {
		margin-top: 3em;
		}


	.vspace_l {
		margin-top: 4em;
		}




	#content_two_col_lft {
		width: 26em;
		float: left;
		}

	#content_two_col_rgt {
		width: 26em;
		float: right;
		}



	.content_graphic_xs {
		width: 24em;
		}
		
	.content_graphic_m {
		width: 45em;
		}

	.content_graphic_l {
		width: 47em;
		}
		
	.content_graphic_xl {
		width: 55em;
		}





/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
EXTERNAL LINKS PAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#external_links {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		width: 100%;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		}
		
	#external_links a {
		text-transform: none;
		}

		
	#external_links {
		border-top: 1px solid #000;
		border-collapse: collapse;
		margin-top: 4em;
		}
	
	
	#external_links tr {	
		border-bottom: 1px solid #000;
		}
		
	.td_right {	
		padding: 0.5em 0 0.5em 7em;
		}
		
	.td_left {
		width: 25em;
		}



/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
JOBS PAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#job_vacancies {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		width: 100%;
		margin: 0;
		padding: 0;
		}
		
	#job_vacancies thead {
		text-transform: uppercase;
		}
		
		
	#job_vacancies a {
		text-transform: none;
		}

		
	#job_vacancies {
		border-top: 1px solid #000;
		border-collapse: collapse;
		margin-top: 4em;
		}
	
	
	#job_vacancies tr {	
		border-bottom: 1px solid #000;
		}
		
	.job_td_right {	
		width: 10em;
		padding: 0.5em 1em 0.5em 0;
		}
		
	.job_td_centre {
		width: 12em;
		padding: 0.5em 0 0.5em 0;
		}
		
	.job_td_left {
		width: 30em;
		}




		
/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
PORTFOLIO PAGE VARIATIONS
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/



	.portfolio {
		background: #000 url(links/background2.gif);
		}


	#sidebar_portfolio {
		width: 15em;
		float: left;
		margin-top: 4em;
		}


	#sidebar_menu_portfolio li {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		font-style: normal;
		text-transform: uppercase;
		border-bottom: 1px solid #FFF;
		padding: 0.5em 0;
		}
		
	#sidebar_menu_portfolio a {
		color: #FFF;
		text-decoration: none;
		}
		
	#sidebar_menu_portfolio a.active, #sidebar_menu_portfolio a:hover {
		color: #ffc425;
		font-weight: bold;
		}


	#standout {
		width: 55em;
		}

	#portfolio_img {
		width: 55em;
		}





/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
PORTFOLIO PAGE VARIATIONS
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#standout_folio_text {
		margin-top: 2.5em;
		}

	#folio_description {
		margin-top: 2.5em;
		width: 20.5em;
		}

	#folio_description {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #FFF;
		margin-bottom: 1.5em;
		}





/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
EXPANDABLE MENU
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#expandable_menu p, #expandable_menu li, #expandable_menu dt, #expandable_menu dd {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.05em;
		line-height: 1.4em;
		color: #000;
		}
		
	#expandable_menu li h2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		line-height: 1.4em;
		color: #000;
		border-bottom: 1px solid #000;
		padding: 0.5em 0;
		font-weight: normal;
		}

	#expandable_menu li ul, #expandable_menu li dl, #menu_p_wrapper {
		margin: 1.3em 0 2em 0;
		}

	#expandable_menu li ul li, #expandable_menu li dl dt, #expandable_menu li dl dd {
		border: none;
		color: #000;
		}
	
	#expandable_menu li dl dd {
		margin-bottom: 1.5em;
		}
		
	#expandable_menu li dl dt {
		font-weight: bold;
		}
	
	.arrow_on {
		background: url(links/arrow_on.gif) no-repeat 100% 50%;
		}
		
	.arrow_off {	
		background: url(links/arrow_off.gif) no-repeat 100% 50%;
		}











/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
PORTFOLIO TOP HORIZONTAL NAVIGATION (2ND LEVEL)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/



	#hor_nav_portfolio p {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		font-style: normal;
		text-transform: uppercase;
		list-style: none;
		display: inline;
		padding: 0 0.4em 0 0;
		color: #ffc425;
		}
		
	#hor_nav_portfolio a {
		color: #FFF;
		text-decoration: none;
		}
		
	#hor_nav_portfolio a.active, #hor_nav_portfolio a:hover {
		color: #ffc425;
		}


	#hor_nav_portfolio_left {
		width: 15em;
		float: left;
		}

	#hor_nav_portfolio_right {
		width: 40em;
		float: right;
		}

	#hor_nav_portfolio {
		border-bottom: 1px solid #FFF;
		padding: 0.4em 0 0.3em 0;
		float: left;
		}

	#arrow_button img {
		width: 1.3em;
		float: right;
		margin: 0 0 0 1em;
		}
		
	#fading_squares {
		width: 12em;
		float: right;
		}
		
		
		
		
		
		
/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
FOOTER - ADDS A COMFORTABLE SPACE TO THE BOTTOM OF THE PAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#footer {
		width: 80em;
		clear: both;
		float: left;
		margin: 6em 0 0 0;
		}




/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
CONTACT FORM
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

	#contact_intro {
		width: 40em;
		}

	#contact_form {
		margin-top: 3em;
		}
		
	#contact_form table {
		margin-bottom: 1.2em;
		margin-left: -0.2em;
		width: 100%;
		}
		
	#contact_form td {
		background: #FFF;
		width: 50%;
		margin: 0 0 0 0.5em;
		}
		
	#contact_form tr {
		height: 1.5em;
		}
			
	#contact_form label {
		visibility: hidden;
		display: none;
		background: #FFF;
		color: #000;
		font-family: Arial, Helvetica, sans-serif;
		}
		

	#contact_form input {
		background: #FFF;
		width: 95%;
		color: #000;
		margin: 0 0 0 0.5em;
		}

	#contact_form textarea {
		background: #FFF;
		width: 100%;
		color: #000;
		}



	#contact_form select {
		background: #FFF;
		color: #000;
		margin: 0 0 0 0.5em;
		width: 95%;
		}	
		
	#contact_form legend {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		color: #000;
		padding: 0 0 1em 0;
		text-transform: uppercase;
		}

	#form_submit {
		padding-top: 2em;
		}

	#contact_form .submit {
		color: #000;
		background: #FFF;
		border: 0;
		text-align: left;
		text-transform: uppercase;
		font-weight: bold;
		}

	#contact_form textarea {
		background: #FFF;
		width: 100%
		color: #000;
		padding: 0.5em;
		}








	#contact_details_4col {
		margin: 3em 0 0 0;
		float: left;
		}


	#contact_details_1 {
		float: left;
		margin: 0 1.5em 0 0;
		width: 10.5em;
		}

	#contact_details_2 {
		float: left;
		margin: 0 1.5em 0 0;
		width: 13.5em;
		}

	#contact_details_3 {
		float: left;
		margin: 0 1.5em 0 0;
		width: 12.5em;
		}

	#contact_details_4 {
		float: left;
		margin: 0;
		width: 13.5em;
		}





/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
QUOTE FORM
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#quote_form {
		margin-top: 3em;
		}
		
	#quote_form table {
		margin-bottom: 1.2em;
		margin-left: -0.2em;
		width: 100%;
		}
		
	#quote_form td {
		background: #FFF;
		width: 50%;
		margin: 0 0 0 0.5em;
		}
		
	#quote_form tr {
		height: 1.5em;
		}
			
	#quote_form label {
		visibility: hidden;
		display: none;
		background: #FFF;
		color: #000;
		font-family: Arial, Helvetica, sans-serif;
		}
		

	#quote_form label.drop_down {
		visibility: visible;
		display: inline;
		margin: 0 0 0 0.5em;
		}


	#quote_form input {
		background: #FFF;
		width: 95%;
		color: #000;
		margin: 0 0 0 0.5em;
		}

	#quote_form textarea {
		background: #FFF;
		width: 100%;
		color: #000;
		}



	#quote_form select {
		background: #FFF;
		color: #000;
		margin: 0 0 0 0.5em;
		width: 95%;
		}	
		
	#quote_form option {
		margin:0.5em;
		}	

	#quote_form legend {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.1em;
		color: #000;
		padding: 0 0 1em 0;
		text-transform: uppercase;
		}

	#form_submit {
		padding-top: 2em;
		}

	#quote_form .submit {
		color: #000;
		background: #FFF;
		border: 0;
		text-align: left;
		text-transform: uppercase;
		font-weight: bold;
		}



	#quote_note {
		margin-top: 3em;
		}


/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
THANKYOU PAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

	#content_text_thankyou h4 {
		margin-bottom: 0.5em;
		}

	#content_text_thankyou p {
		width: 29em;
		}




/* 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
HOME PAGE
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/


	#ipa_notice {
		margin: 2em 0 0 0;
		padding: 0 0 0 0;
		}



