@charset "UTF-8";


/*******************
 GENERAL RULES
********************/


html {
	margin: 0px;
	padding: 0px;

}

body {
	margin: 0px;
	padding: 0px;
	background: #FFF url(../imgs/vp_bg_gradient.png) repeat-x top left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #444;
}

h1 { /* Main big teal titles */
	margin-top: 0px;
	font-size: 24px;
	color: #00B1B0;
	font-weight: bold;
}


h2 { /* Home page sub heading */
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 1.2px;
	font-weight: normal;
}

h3 { /* internal pages sub headings */
	font-size: 17px;
	line-height: 21px;
	letter-spacing: 1.1px;
	font-weight: normal;
}

h4 { /* Team members names */
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	font-weight: bold;
	color: #00B1B0;
}

h5 { /* Team members names */
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	font-weight: bold;
	color: #00334D;
}


a:link {
	color: #00B1B0;
	text-decoration: none;
}

a:visited {
	color: #00B1B0;
	text-decoration: none;
}

a:hover {
	color: #25bfbe;
	text-decoration: underline;
}



#wrapper {
	width: 1000px;
	margin: 0px auto 0px auto;
	/* background: #ddd; */
	/* border: dotted 1px #333333; */
	padding: 0px 0px 0px 0px;
}


/* NAVBARS */

/* Main navbar */

#navbar {
	padding: 15px 0px 0px 0px;
	margin: 0px;
}


#navlist {
	padding: 5px;
	margin: 0px 0px 0px 33px;
}

#navlist li {
	display: inline;
	list-style: none;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
}

#navlist li a {
	margin: 0px 0px 0px 0px;
	padding: 5px;
}

#navlist li a:link {
	text-decoration: none;
	color: #FFF;
}
#navlist li a:visited {
	text-decoration: none;
	color: #FFF;
}
#navlist li a:hover {
	text-decoration: none;
	color: #FFF;
	background-color: #00334D;
}

/* Managing the 'you are here' states based on descendant selectors */

body#home #tab-home a, body#approach #tab-approach a, body#what #tab-what a, body#service_one #tab-what a, body#service_two #tab-what a, body#service_three #tab-what a, body#service_four #tab-what a, body#team #tab-team a, body#news #tab-news a, body#clients #tab-clients a, body#work #tab-work a, body#articles #tab-articles a, body#contact #tab-contact a {
	text-decoration: none;
	color: #FFF;
	background-color: #00334D;
}


/* Sub navbar */

#sub_navbar {
	padding: 0px;
	margin: 0px;
	/* height: 20px; */
}

#sub_navlist {
	padding: 5px 5px 5px 25px;
	/* Tried using ie_hacks to align the sub nav exactly to the main nav entry
	but ie sorted, Safari was then the problem. Honestly cba about it. So I realigned it
	a bit more to the left (around 200px left margin). The difference between browsers 
	is few pixels that are not noticeable in this layout */
	margin: 0px 0px 0px 110px;
	background: #00334D;
	width: 584px;
}

#sub_navlist li {
	display: inline;
	list-style: none;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
}

#sub_navlist li a {
	margin: 0px 0px 0px 0px;
	padding: 5px;
}

#sub_navlist li a:link {
	text-decoration: none;
	color: #FFF;
}
#sub_navlist li a:visited {
	text-decoration: none;
	color: #FFF;
}
#sub_navlist li a:hover {
	text-decoration: none;
	color: #ECEA66;
}

body#service_one #subtab_one a, body#service_two #subtab_two a, body#service_three #subtab_three a, body#service_four #subtab_four a {
	text-decoration: none;
	color: #ECEA66;
}


/* TOP ROUNDED CORNERS SLICE */

#top_slice {
	width: 1000px;
	height: 40px;
	background: url(../imgs/vp_slice_top.png) no-repeat top left;
}


/* INNER CONTENTS */

/* Wrappers */

#shadow_wrapper {
	margin: 0px;
	padding: 0px;
	background: url(../imgs/vp_shadow_wrapper_bg.png) repeat-y top left;
}

#contents_wrapper {
	width: 957px;
	margin: 0px 0px 0px 16px;
	}



/* Header */

#header {
	height: 80px;
	width: 100%;
}

#header_logo {
	margin: 0px 0px 0px 20px;
}




/* Slogan area */

#slogan_bar {
	background: #00334D;
	height: 40px;
	width: 100%;
}

#slogan {
	margin: 11px 0px 0px 66px;
	}

#slogan_bar a:link {
	font-size: 11px;
	text-decoration: none;
	color: #00B1B0;
}
#slogan_bar a:visited {
	font-size: 11px;
	text-decoration: none;
	color: #00B1B0;
}
#slogan_bar a:hover {
	font-size: 11px;
	text-decoration: none;
	color: #FFF;
}

#newsletter_link {
	display: inline;
	position: relative;
	top: -6px;
	left: 350px;
}

	

/* Maincontent areas */

#maincontent_wide {
	/* NOT USING IT FOR NOW 
	JUST HAVE A WIDE MC area ON HOME PAGE and IT'S
	maincontent_home (further down under page specific rules) */
}

#maincontent {
	width: 100%;
	/* I could close the float here by floating this as well, but for the main
	content area I have decided to use extra markup by inserting a float clearer div after the
	right bar. This also ensures some white space at the end of the main content area. */
	/* Some estra space as well at the end of the maincontent area */
	padding: 0px 0px 40px 0px;
}

#two_col_contents {
	/* we have to float this in ordert o make it extend around everything
	including the floated links columns that follow the headings */
	float: left;
	/* ### REMEMBER: the double margin IE bug arises here if we use margins.
	In that case we fix it using display: inline as explained on Position is Everything Explorer double margin article. */
	display: inline;
	margin: 30px 0px 0px 68px;
	width: 600px;
}

#two_col_contents h1 {
	margin-bottom: 20px;
}


/* Right Bar */

#rightbar {
	float: left;
	width: 180px;
	background: #FFF;
	border: solid 1px #C7D9E4;
	padding: 5px;
	margin: 30px 0px 0px 53px;
	/* ### REMEMBER: the double margin IE bug arises here if we use margins.
	In that case we fix it using display: inline as explained on Position is Everything Explorer double margin article. */
	display: inline;
	font-size: 11px;
}

#rightbar_header {
	background: #00B1B0;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 3px;
	padding: 10px 3px 10px 3px;
	color: #FFF;
}

#rightbar p {
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	margin: 0px;
	width: 160px;
	}

.rightbar_entry {
	padding: 15px 5px 15px 12px;
	border-bottom: dashed 1px #00334D;
}

.rightbar_entry a:link {
	color: #004360;
	text-decoration: none;
	font-weight: bold;
}

.rightbar_entry a:visited {
	color: #004360;
	text-decoration: none;
	font-weight: bold;
}

.rightbar_entry a:hover {
	color: #004360;
	text-decoration: underline;
	font-weight: bold;
}

#rightbar_links {
	padding: 15px 5px 15px 12px;
}



/* Footer */

#footer {
	background: #E0E5E1;
}

#footer p {
	font-size: 9px;
	color: #666;
	margin: 0px;
	padding: 14px 0px 0px 30px;
}



/* BOTTOM ROUNDED CORNERS SLICE */

#bottom_slice {
	width: 1000px;
	height: 45px;
	background: url(../imgs/vp_slice_bottom_green.png) no-repeat top left;
}





/*******************
 PAGE SPECIFIC RULES
********************/


/* HOME PAGE */

#maincontent_home {
	width: 100%;
	/* The old height was 500px, but we have reduced it for laptops */
	/* height: 500px; */
	height: 340px;
	background: #FFF url(../imgs/vp_home_lighthouse_short.jpg) no-repeat top left; 
}

#home_contents {
	/* we have to float this in ordert o make it extend around everything
	including the floated links columns that follow the headings */
	float: left;
	/* ### REMEMBER: the double margin IE bug arises here if we use margins.
	In that case we fix it using display: inline as explained on Position is Everything Explorer double margin article. */
	display: inline;
	margin: 30px 0px 0px 68px;
	width: 480px;
}

#home_contents h1 {
	margin-bottom: 20px;
}

#home_contents h2 {
	margin-bottom: 20px;
	color: #00334D;
}

#home_links_left {
	float: left;
	width: 225px;
	margin-right: 30px;
	}
	
#home_links_right {
	float: left;
	width: 225px;
	}

#home_contents a:link {
	font-size: 14px;
	font-weight: bold;
}

#home_contents a:visited {
	font-size: 14px;
	font-weight: bold;
}

#home_contents a:hover {
	font-size: 14px;
	font-weight: bold;
}


/* TEAM PAGE */

.team_member_wrapper {
	/* testing border - border: dotted 1px #333; */
	width: 600px;
	/* Trying the latest technique to auto-close floats to avoid floated
	elements slipping outside the container: overflow: auto */
	overflow: auto;
	margin-top: 20px;
}

.team_member_photo_contacts {
	float: left;
	width: 150px;
	font-size: 11px;
}

.team_member_photo_contacts p {
	margin: 5px 0px 0px 0px;
	padding: 0px;
}

.team_member_biog {
	float: left;
	width: 420px;
	margin-left: 25px;
	font-size: 11px;
	/* The titles here are h4 */
}


/* NEWS AND EVENTS */


.news_wrapper {
	/* testing border - border: dotted 1px #333; */
	width: 600px;
	/* Trying the latest technique to auto-close floats to avoid floated
	elements slipping outside the container: overflow: auto */
	overflow: auto;
	margin-top: 20px;
}

.news_subtitle {
	font-weight: bold;
}


/* Styles for div with image caption */
.news_image_wrapper {
	float: left;
	margin-right: 10px;
}

.news_image_caption {
	font-size: 10px;
}


.news_image_caption p {
	margin-top: 2px;
	margin-bottom: 0px;
}


/* CLIENTS PAGE */

#clients_images_wrapper {
	width: 600px;
}

#clients_images_wrapper img {
	border: solid 1px #b9e3e4;
	margin: 2px;
}

#clients_testimonials {
	font-style: normal;
}

#clients_testimonials .company_name {
	font-style: normal;
	font-weight: bold;
}


/* CLIENT WORK PAGE */

#client_work_links_slice_top {
	background: url(../imgs/vp_client_work_links_slice_top.gif) no-repeat top left;
	height: 10px;
	margin-top: 20px;
	font-size: 1px;
}

#client_work_links_body {
	background: #e0eee7;
	padding: 10px 0px 10px 0px;
	/* In order to wrap floated elements - overflow: auto; */
	overflow: auto;
	height: 100%;
}

#client_work_links_col_1 {
	float: left;
	width: 260px;
	margin: 0px 0px 0px 30px;
	padding: 0px;
	/* To avoid double margin bug in IE: display: inline; */
	display: inline;
}

#client_work_links_col_2 {
	float: left;
	width: 270px;
	margin: 0px 0px 0px 20px;
	/* To avoid double margin bug in IE: display: inline; */
	display: inline;
}

.client_work_list {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-left: 10px;
}


#client_work_links_slice_bottom {
	background: url(../imgs/vp_client_work_links_slice_bottom.gif) no-repeat top left;
	height: 10px;
	font-size: 1px;
}



/* ARTICLES PAGE */


#articles_links_slice_top {
	background: url(../imgs/vp_client_work_links_slice_top.gif) no-repeat top left;
	height: 10px;
	margin-top: 20px;
	font-size: 1px;
}

#articles_links_body {
	background: #e0eee7;
	padding: 10px 0px 10px 0px;
	/* In order to wrap floated elements - overflow: auto; */
	overflow: auto;
	height: 100%;
}

#articles_links_col_1 {
	float: left;
	width: 260px;
	margin: 0px 0px 0px 30px;
	padding: 0px;
	/* To avoid double margin bug in IE: display: inline; */
	display: inline;
}

#articles_links_col_2 {
	float: left;
	width: 270px;
	margin: 0px 0px 0px 20px;
	/* To avoid double margin bug in IE: display: inline; */
	display: inline;
}

.articles_list {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-left: 10px;
}


#articles_links_slice_bottom {
	background: url(../imgs/vp_client_work_links_slice_bottom.gif) no-repeat top left;
	height: 10px;
	font-size: 1px;
}




/* CONTACT PAGE */

#contact_left_col {
	width: 300px;
	float: left;
}

#contact_left_col p {
	margin-top: 0px;
}

#contact_right_col {
	width: 300px;
	float: left;
}

/* JANE has asked to remove the contact form
// on 20090811. I keep the styles just in CASE

#contact_form_slice_top_wrapper {
	margin: 0px;
	font-size: 1px;
}

#contact_form_slice_bottom_wrapper {
	margin: 0px;
	font-size: 1px;
}


#contact_form {
	background: #E0EEE7;
	padding: 30px;
	margin: 0px;
	width: 520px;
}

#contact_form label {
	font-weight: bold;
	font-size: 14px;
}

#contact_form input,textarea {
	margin-bottom: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #444;
}

#contact_form .button {
	font-size: 13px;
}
*/



/* NEWSLETTER PAGE */

#newsletter_form_slice_top_wrapper {
	margin: 0px;
	font-size: 1px;
}

#newsletter_form_slice_bottom_wrapper {
	margin: 0px;
	font-size: 1px;
}


#newsletter_form {
	background: #E0EEE7;
	padding: 20px;
	margin: 0px;
	width: 540px;
}

#newsletter_form label {
	font-weight: bold;
	font-size: 14px;
}

#newsletter_form input,textarea {
	margin-bottom: 15px;
	/* Using vertical align to render the label of the checkbox 
	consistently aligned to the checkbox itself also in IE6 */
	vertical-align: top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #444;
}

#newsletter_form .button {
	font-size: 13px;
	margin-top: 10px;
}


#newsletter_form #t_and_c {
	font-size: 9px;
	margin-top: 0px;
}

#newsletter_form #t_and_c_label {
	position: relative;
	top: 2px;
}




/*******************
 VARIOUS CLASSES
********************/


/* PNG TRANSPARENCY FIX */

/*
APPLY THE CLASS TO EACH IMAGE THAT NEEDS
TO BE FIXED FOR TRANSPARENCY. IF THE IMAGE IS
A BACKGROUND IMAGE APPLY CLASS TO THE ELEMENT
THAT HAS THAT BACKGROUND
*/
.png_ie_fixed, img {
	behavior: url(scripts/iepngfix.htc);
}

.italic {
	font-style: italic;
}

.strong {
	font-weight: bold;
}

.float_clearer {
	clear: both;
}