/* 
========================================================================================================================
Title:				Viocorp
Author URI: 		www.viocorp.com
--
Updated:			15.12.2009
========================================================================================================================
COLOURS
--
Grey darkest:		#111111 // #262626
Grey dark:			#333333
Grey mid:			#999999 // #525252
Grey pale:			#cccccc // #e4e4e4;
Grey paler:			#f9f9f9
Grey palest:		#f0f0f0
--
Green dark:			#006633
Green mid:			#6fbe44
Green pale:			#99cc66
Green paler:		#c6ec9f
--
Red: 				#a33813
--
NOTES 
--
base.css handles the reset and core font styles etc.
========================================================================================================================
*/



/* 
========================================================================================================================
CORE LAYOUT
========================================================================================================================
*/

* 		{ 	}
html 	{ 	min-width: 960px; }
body 	{	position: relative; margin: 0; padding: 0; background: #262626; min-width: 960px; text-align: center;  }

/* Structural Overview
-------------------------------------------------------------- */
.header 				{ height: 130px; background: #262626 url(../img/masthead_bg.jpg) bottom center repeat-x; color: #ffffff; }
.content_header 		{ background: #262626 url(../img/wallpaper_tile.jpg) center bottom repeat; color: #999999; }
.content_body 			{ background: #f9f9f9; }
.footer 				{ border-top: 5px solid #f0f0f0; background: #262626; color: #999999;  }

.inner 					{ width: 940px; margin: 0 auto; padding: 0 10px; text-align: left; }
.header .inner 			{ padding-left: 0; width: 950px; }   /* IE7 chokes on the dynamic nav if this is set to position: relative for the sake of absolutely positioning the utility nav */
.content_header .inner 	{  }
.content_body .inner 	{  }
.footer .inner			{ width: 960px; padding: 20px 0; overflow: hidden; }

/* 
========================================================================================================================
HEADER
========================================================================================================================
*/
.header {	
}

/*
------------------------------------------------------------------------------------------------------------------------
LOGO
------------------------------------------------------------------------------------------------------------------------
*/
.header .logo a {
	display: block;
	width: 460px;
	height: 90px;
	line-height: 90px;
	font-size: 2em;
	text-indent: 2000px;
	overflow: hidden;
	background: transparent url(../img/logo_viocorp.jpg) 0 0 no-repeat;
}
.header .logo .strapline {
	font-size: 0.75em;
	font-style: italic;
}

/*
------------------------------------------------------------------------------------------------------------------------
NAV
------------------------------------------------------------------------------------------------------------------------
*/
.header .nav_main {
	height: 40px;
	line-height: 40px;
	font-size: 1.25em;
	font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif;
}
/* Use the below version if you're not using a dhtml menu, otherwise this stuff is set in dhtml_menu.css */
/*.header .nav_main ul {
	list-style: none;
	margin: 0 0 0 8px;
	padding: 0;
	float: left;
}
.header .nav_main ul li {
	float: left;
	margin: 0;
	padding: 0 20px;
}
.header .nav_main ul li a {
	display: block;
	color: #ffffff;
}
.header .nav_main ul li a:hover, .header .nav_main ul li a:focus {
	color: #c6ec9f;
}
.header .nav_main ul li a.selected {
	color: #006633;
}*/
/* Nav: Home link icon */
.header .nav_main ul li.home {
}
.header .nav_main ul li.home a {
	width: 22px;
	height: 40px;
	float: left;
	text-indent: 200px;
	overflow: hidden;
	background: transparent url(../img/nav_home_sprite.gif) 0 0 no-repeat;
}
.header .nav_main ul li.home a:hover {
	background-position: 0 -40px;
}
.header .nav_main ul li.home a.selected, .header .nav_main ul li.home a.selected:hover {
	background-position: 0 -80px;
}
/* Nav: Customer Sign In */
.header .nav_main a.customer_signin {
	position: absolute;
	right: 25px;
	top: 90px;
	font-size: 0.75em;
	color: #a5cca6;
	padding-left: 12px;
	background: transparent url(../img/icon_signin_lock.gif) center left no-repeat;
}
.header .nav_main a.customer_signin:hover {
	color: #ffffff;
}

/*
------------------------------------------------------------------------------------------------------------------------
UTILITY NAV
------------------------------------------------------------------------------------------------------------------------
*/
.header .nav_utility {
	background: #262626;
	float: right;
	position: absolute;
	top: 0;
	right: 0px;
	font-size: 0.917em;
	line-height: 22px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 0;
}
.header .nav_utility a:hover, .header .nav_utility a:focus {
	color: #c6ec9f;
}
.header .nav_utility ul {
	list-style: none;
	margin: 0 10px;
	padding: 0;
	float: left;
}
.header .nav_utility ul li {
	float: left;
	padding: 0 10px;
}

/*
------------------------------------------------------------------------------------------------------------------------
UTILITY NAV: SEARCH
------------------------------------------------------------------------------------------------------------------------
*/
.header .nav_utility .search {
	float: left;
	margin-right: 3px;
}
/* form */
form.utility_search_form {
	position: relative;
	margin: 0;
	padding: 0;
}
form.utility_search_form label {
	margin: 0;
	padding: 0;
}
form.utility_search_form input.search_text {
	color: #ffffff;
	margin: 0;
	padding: 4px 20px 4px 4px;
	width: 176px;
	height: 14px;
	border: none;
	overflow: hidden;
	background: transparent url(../img/textfield_dark_sprite.gif) 0 0 no-repeat;
}
form.utility_search_form input.search_text:focus, form.utility_search_form input.search_text:active {
	background-position: 0 -22px;
}
form.utility_search_form input.search_text.default, form.utility_search_form input.inactive { /* class set by default_values.js when displaying label inside field */
	color: #999999;
}
form.utility_search_form button {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	padding: 0;
	height: 22px;
	width: 22px;
	border: none;
	text-indent: 200px;
	overflow: hidden;
	cursor: pointer;
	background: transparent url(../img/searchbutton_sprite.gif) 0 0 no-repeat;
}
form.utility_search_form button:hover, form.utility_search_form button:focus, form.utility_search_form button:active {
	background-position: 0 -22px;
}
/* SEARCH BTN 1px OUT <= IE7 */
*:first-child+html form.utility_search_form button { top: 1px; } * html form.utility_search_form button { top: 1px; }

/* 
========================================================================================================================
CONTENT HEADER
========================================================================================================================
*/
.content_header {	
}

/* Base reset */
.content_header h1, .content_header h2, .content_header h3, .content_header h4, .content_header h5, .content_header h6 { 
	color: #ffffff; line-height: 1em;
}
.content_header a, .content_header a:hover, .content_header a:focus {
	color: #ffffff; text-decoration: none;
}

/* Inner */
.content_header .inner {
	height: auto !important;
	min-height: 90px;
	height: 90px;
	background: transparent url(../img/wallpaper_glow.jpg) center bottom no-repeat;
}
.content_header.large .inner {
	height: auto !important;
	min-height: 330px;
	height: 330px;
}

/*
------------------------------------------------------------------------------------------------------------------------
SECTION HEADERS - SET BY ID ON BODY
------------------------------------------------------------------------------------------------------------------------

body#section_signin .content_header .inner 	{ background-image: url(../img/sectionheader_signin.jpg); }
body#section_contact .content_header .inner { background-image: url(../img/sectionheader_contact.jpg); }
body#section_search .content_header .inner 	{ background-image: url(../img/sectionheader_search.jpg); }
body#section_about .content_header .inner 	{ background-image: url(../img/sectionheader_about.jpg); }
body#section_support .content_header .inner { background-image: url(../img/sectionheader_about.jpg); }
body#section_careers .content_header .inner { background-image: url(../img/sectionheader_about.jpg); }
*/
/*
------------------------------------------------------------------------------------------------------------------------
2 COLUMN LAYOUT
------------------------------------------------------------------------------------------------------------------------
*/
.content_header .two_col_container { /* requires clearfix in markup */
	padding: 35px 0 0 320px;
}
.content_header .two_col_container .sidebar {
	position: relative;
	float: left;
	width: 220px;
	margin-right: 0;
	margin-left: -320px;
	padding: 0 0 20px 0;
	display: inline; /* IE6 double-float margin bug */
}
.content_header .two_col_container .main {
	width: 100%;
	float: left;
}

/*
------------------------------------------------------------------------------------------------------------------------
BREADCRUMBS
------------------------------------------------------------------------------------------------------------------------
*/
.content_header .breadcrumbs a {
	color: #999999; font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif;
}
.content_header .breadcrumbs a:hover, .content_header .breadcrumbs a:focus {
	color: #FFFFFF;
}

/*
------------------------------------------------------------------------------------------------------------------------
SHOWCASE NEXT PREVIOUS
------------------------------------------------------------------------------------------------------------------------
*/
.content_header a.next,
.content_header a.previous {
	display: block;
	position: absolute;
	top: 270px;
	right: 0px;
	width: 30px;
	height: 85px;
	text-indent: 200px;
	overflow: hidden;
	background: transparent url(../img/feature_next.gif) 0 0 no-repeat;
	z-index: 200;
}
.content_header a.previous {
	left: 0px;
	background-image: url(../img/feature_prev.gif);
	
}
.content_header a.next:hover,
.content_header a.previous:hover {
	background-position: 0 -85px;
}

/*
------------------------------------------------------------------------------------------------------------------------
FEATURE CONTAINER
------------------------------------------------------------------------------------------------------------------------
*/
.content_header .flash_container {
	position: relative;
	margin-bottom: -30px;
	margin-top: -35px; /* so it pulls up over the content area padding (.two_col_container has 35px top padding) */
	z-index: 9999;
	overflow: hidden;
	bottom: 0px;	/* test only
	height: 360px;
	background-color: #FFC;
	opacity: 0.5;
	color: #000;
	text-align: center;  */
}

/* 
========================================================================================================================
CONTENT BODY
========================================================================================================================
*/
.content_body {
}
/* Base reset */
.content_body a:hover, .content_body a:focus {
	color: #262626;
	text-decoration: underline;
}

/*
------------------------------------------------------------------------------------------------------------------------
2 COLUMN LAYOUT
------------------------------------------------------------------------------------------------------------------------
*/
.content_body .two_col_container { /* requires clearfix in markup */
	padding: 30px 0 30px 320px;
	background: transparent url(../img/sidebar_bg.jpg) center top no-repeat;

}
.content_body .two_col_container .sidebar {
	position: relative;
	float: left;
	width: 220px;
	margin-right: 0;
	margin-left: -320px;
	display: inline; /* IE6 double-float margin bug */
}
.content_body .two_col_container .main {
	width: 100%;
	float: left;
}

/* 
========================================================================================================================
FOOTER
========================================================================================================================
*/
.footer {
}
/* Base resets */
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #cccccc; margin-top: 0.25em; }
.footer h1, .footer h2 { font-size: 1.167em; font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif; }
.footer strong { color: #cccccc }
.footer a:hover, .footer a:focus { color: #c6ec9f; }
.footer p { margin-bottom: 0.833em; }

/*
------------------------------------------------------------------------------------------------------------------------
4 COLUMN LAYOUT
------------------------------------------------------------------------------------------------------------------------
*/
.four_col_container {
	width: 100%;
	overflow: hidden;
	background: #262626 url(../img/content_footer_col_bg.gif) center top repeat-y;
}
.four_col_container .col {
	float: left;
	width: 200px;
	margin: 0 20px;
	display: inline; /* IE6 double-float margin bug*/
}

/*
------------------------------------------------------------------------------------------------------------------------
FOOTER FORMS
------------------------------------------------------------------------------------------------------------------------
*/
.content_footer form,
form.subscription_form,
form.request_contact_form {
}
form.form_builder {
	position: relative;
	clear: both;
	padding: 0;
	margin: 0;
	background: none;
}
.footer form div.form_line,
.footer form p {
	padding: 3px 0;
	margin: 0;
	background-image: none;
}
.footer form div.form_line label,
.footer form label {
	float: none;
	width: auto;
	color: #999999;
}
.footer form input.text {
	color: #ffffff;
	margin: 0;
	padding: 4px 20px 4px 4px;
	width: 176px;
	height: 14px;
	border: none;
	overflow: hidden;
	background: transparent url(../img/textfield_dark_sprite.gif) 0 0 no-repeat;
}
.footer form input.text:focus, .content_footer form input.text:active {
	background-position: 0 -22px;
}
.footer form input.text.default, .footer form input.inactive  { /* class set by default_values.js when displaying label inside field */
	color: #999999;
}
.footer form button {
	width: 200px;
	height: 22px;
	cursor: pointer;
	border: 1px solid #006633;
	color: #ffffff;
	background: #3b6c52 url(../img/button_footer_bg.gif) top left repeat-x;
}
.footer form button:hover,.footer form button:focus {
	background-position: 0 -5px;
	border: 1px solid #006633;
}
.footer form button:active {
	background-position: 0 -10px;
	border-color: #131313;
	outline: 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
LEGAL FOOTER
------------------------------------------------------------------------------------------------------------------------
*/
.footer .footer_legal {
	font-size: 0.917em;
	margin: 40px 0;
	padding: 10px 0;
	border-top: 0px solid #464646;
}

/* Copyright */
.footer p.copyright {
	float: left;
	margin: 0;
	padding: 0;
	line-height: 16px;
}

/* Menu */
ul.footer_menu {
	float: left;
	list-style: none;
	margin: 0 0 0 10px;
	padding: 0;
	border-right: 1px solid #464646;
	border-left: 1px solid #131313;
}
ul.footer_menu li {
	float: left;
	margin: 0;
	padding: 0 10px;
	border-left: 1px solid #464646;
	border-right: 1px solid #131313;
}
ul.footer_menu li a {
	display: block;
	line-height: 16px;
}

/* Icons */
a.twitter {
	padding-left: 20px;
	background: transparent url(../img/icon_twitter.gif) center left no-repeat;
	padding-top: 2px;
	padding-bottom: 2px;
}

a.rss {
	padding-left: 20px;
	background: transparent url(../img/icon_rss.gif) center left no-repeat;
}

/* 
========================================================================================================================
HOME PAGE
========================================================================================================================
*/

/*
------------------------------------------------------------------------------------------------------------------------
FLASH AREA
------------------------------------------------------------------------------------------------------------------------
*/
.home_feature {
	background: #262626 url(../img/wallpaper_tile.jpg) center bottom repeat;
}
.home_feature .flash_container {
	position: relative;
	margin-bottom: -30px;
	z-index: 9999;
	overflow: hidden;
	/* test only
	height: 350px;
	background-color: #FFC;
	opacity: 0.5;
	color: #000;
	text-align: center; */
}

/*
------------------------------------------------------------------------------------------------------------------------
INTRO AREA
------------------------------------------------------------------------------------------------------------------------
*/
.home_intro {
	background: #ffffff url(../img/home_intro_bg.jpg) center top no-repeat;
	border-bottom: 1px solid #e4e4e4;
}
.home_intro .inner { padding: 25px 0 15px 0; }

/*
------------------------------------------------------------------------------------------------------------------------
3 COL CONTAINER
------------------------------------------------------------------------------------------------------------------------
*/
.three_col_container {
	width: 100%;
	overflow: hidden;
}
.content_body .three_col_container {
	padding: 20px 0;
	background: transparent url(../img/bg_threecol_tile.gif) center top repeat-y;
	border-top: 1px solid #f9f9f9;
}

.three_col_container .main {
	width: 460px;
	float: left;
}
.three_col_container .sidebar_1 {
	float: left;
	width: 220px;
	margin-left: 20px;
	display: inline; /* IE6 double-float margin bug */
}
.three_col_container .sidebar_2 {
	float: left;
	width: 220px;
	margin-left: 20px;
	display: inline; /* IE6 double-float margin bug */
}

/*
------------------------------------------------------------------------------------------------------------------------
MENUS
------------------------------------------------------------------------------------------------------------------------
*/
.menu_panel {
	margin-bottom: 1.667em;
}

/* Headings */
.menu_panel h2 {
	/* font-size: 1.5em; margin-bottom: 1.111em;  - Original values*/
	padding-bottom: 0.9em; /* this plus bottom padding needs to = 1.111em */
	margin-bottom: 0.211em;
	padding-top: 0.5em; /* so the icons can render */
	margin-top : -0.5em; /* so the top padding doesn;t stuff the horizontal grid */
	background: transparent url(../img/header_fade.gif) bottom right no-repeat;
}
.menu_panel.news h2 {
}

.menu_panel.banner {
	margin-top: -10px;
}

.menu_panel.twitter h2 {
	background: transparent url(../img/header_twitter.gif) bottom right no-repeat;
}
.menu_panel.event h2 {
	background: transparent url(../img/header_event.gif) bottom right no-repeat;
}
.menu_panel.blog h2 {
	background: transparent url(../img/header_blog.gif) bottom right no-repeat;
}
.menu_panel.work h2 {
}

/* Menus */
.menu_panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu_panel ul li {
	margin: 0 0 1.667em 0;
}
.sidebar .menu_panel ul li {
	margin: 0 0 0.833em 0;
}
.menu_panel ul li h3 {
	/*font-size: 1em;
	margin-bottom: 0;*/
	/*font-size: 1.167em;
	margin-bottom: 1.429em;*/
	font-size: 1.083em;
	/*margin-bottom: 1.538em;*/
	margin-top: -0.1em;
	margin-bottom: 0;
	padding-bottom: 0.1em;
}

/* Work menu */
.menu_panel.work ul {
	margin-top: -10px;
}
.menu_panel.work ul li { /* requires clearfix */
	position: relative;
	margin: 0;
	padding: 5px 0 7px 70px;
	background: transparent url(../img/divider_grey.gif) bottom left repeat-x;
}
/* Clearfix */
.menu_panel.work ul li:after		{ content: " "; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; font-size: 0; }
.menu_panel.work ul li				{ display: inline-block; }
* html .menu_panel.work ul li 		{ height: 1%; }
.menu_panel.work ul li				{ display: block; }
/* Clearfix end */

.menu_panel.work ul li img {
	width: 56px;
	height: 56px;
	float: left;
	margin-left: -70px;
	overflow: hidden;
	background-color: #FFFFF;
	padding: 1px;
	border: 1px solid #e4e4e4;
}
.menu_panel.work ul li h3 {
	margin-top: 0.75em;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-right: 20px;
}
.menu_panel.work ul li a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-indent: -2000px;
	overflow: hidden;
	cursor: pointer;
	background: transparent url(../img/bullet_large.gif) right center no-repeat;
}
.menu_panel.work ul li a:hover {
}

* html .menu_panel.work ul li a { width: 220px; height: 68px; } /* IE6 won't play ball, needs fixed dimensions*/


/* 
========================================================================================================================
ELEMENTS
========================================================================================================================
*/

/*
------------------------------------------------------------------------------------------------------------------------
META
------------------------------------------------------------------------------------------------------------------------
*/
.meta {
	color: #999;
	font-size: 0.833em;
	text-transform: uppercase;
}
.meta a {
	color: #262626;
	text-decoration: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
LOCAL NAV
------------------------------------------------------------------------------------------------------------------------
*/
ul.local_nav {
	margin: 0 0 1.667em 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #FFFFFF;
	border-top: 1px solid #e4e4e4;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.167em;
}
ul.local_nav li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #e4e4e4;
}
ul.local_nav li a {
	display: block;
	color: #525252;
	padding: 10px 25px 10px 10px;
	background: transparent url(../img/bullet_large.gif) right center no-repeat;
}
* html ul.local_nav li a { height: 1%; } /* IE6> needs a set dimension to get rid of the extra space bug */

ul.local_nav li a:hover, ul.local_nav li a:focus {
	background-color: #f0f0f0;
	text-decoration: none;
	background-image: url(../img/bullet_large_dark.gif);
}
ul.local_nav li a.selected, ul.local_nav li a.selected:hover, ul.local_nav li a.selected:focus {
	color: #a33813;
	background: #f0f0f0 url(../img/bullet_large_dark.gif) right center no-repeat;
}

/* Nested Level */
ul.local_nav ul {
	margin: 0;
	padding: 5px 0;
	list-style: none;
	border-top: 1px solid #e4e4e4;
	font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif;
	font-size: 0.857em;
	background: transparent url(../img/gradient_bottom.gif) bottom left repeat-x;
}
ul.local_nav li li {
	border: none;
}
ul.local_nav li li a {
	padding: 5px 5px 5px 25px;
	background: transparent url(../img/bullet_small.gif) 8px center no-repeat;
}
ul.local_nav li li a:hover, ul.local_nav li li a:focus {
	color: #a33813;
	padding-left: 29px;
	background: transparent url(../img/bullet_small.gif) 12px center no-repeat;
}
ul.local_nav li li a.selected, ul.local_nav li li a.selected:hover, ul.local_nav li li a.selected:focus {
	color: #a33813;
	padding-left: 25px;
	background: transparent url(../img/bullet_small.gif) 5px center no-repeat;
}

/*
------------------------------------------------------------------------------------------------------------------------
SECTION MENU (used to list pages in a section, on the section overview page)
------------------------------------------------------------------------------------------------------------------------
*/
ul.section_menu {
	margin: 0 0 1.667em 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #FFFFFF;
	border-top: 1px solid #e4e4e4;
}
ul.section_menu li {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #e4e4e4;
	width: 100%;
	overflow: hidden;
}
ul.section_menu li img {
	float: left;
	margin-right: 1em;
}

/*
------------------------------------------------------------------------------------------------------------------------
SEARCH RESULTS MENU (used to list search results)
------------------------------------------------------------------------------------------------------------------------
*/
.search_results_container {
	padding-top: 2px;
	background: transparent url(../img/divider_grey.gif) 0 0 repeat-x;
}
.search_results_controls { /* used to hold pagination or other sort controls */
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 5px 0;
}
ul.search_results_menu {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #FFFFFF;
	
}
ul.search_results_menu li {
	margin: 0;
	padding: 10px 0;
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #e5e5e5;
}
ul.search_results_menu li h3, ul.search_results_menu li p {
	margin-bottom: 0.5em;
}

/*
------------------------------------------------------------------------------------------------------------------------
ARTICLE RESULTS MENU (used to list multiple articles)
------------------------------------------------------------------------------------------------------------------------
*/
.article_results_container {
	padding-top: 2px;
	background: transparent url(../img/divider_grey.gif) 0 0 repeat-x;
}
.article_results_controls { /* used to hold pagination or other sort controls */
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 5px 0 7px 0;
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}
.article_results_container .article_container { /* used when displaying multiple articles on a page */
	padding: 1.25em 0 1.75em 0;
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}

/*
------------------------------------------------------------------------------------------------------------------------
ARTICLE CONTENT
------------------------------------------------------------------------------------------------------------------------
*/
.article_container {
}
/*img.article_image {
	border: 1px solid #e5e5e5;
	background-color: #FFF;
	padding: 1px;
}*/
div.article_image {
	float: left;
	margin-right: 20px;
	margin-bottom: 1em;
}
div.article_image img {
}
/*.article_heading {
}
.article_summary {
}
.article_link {
	text-decoration: none;
	text-transform: lowercase;
	display: inline;
}*/

.article_controls {
	position: relative;
	margin: 0 0 1.667em 0;
	background: transparent url(../img/divider_grey.gif) left top repeat-x;
}
.article_controls .meta {
	padding: 0.714em 0;
	height: 1.667em; /* 20px if base em is 12px and height not tweaked by font-size */
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}

/* SHARE LINKS ETC */
ul.share_links {
	margin: 0;
	padding: 0;
	list-style: none;
}
.article_controls ul.share_links {
	position: absolute;
	top: 0.714em;
	right: 0;
}
ul.share_links li {
	position: relative;
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
}
* html ul.share_links li { display: inline; } /* IE6 d-float margin bug */

ul.share_links li a.email_link {
	display: block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 2000px;
	background: transparent url(../img/icon_email.gif) 0 0 no-repeat;
}
ul.share_links li a.print_link {
	display: block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 2000px;
	background: transparent url(../img/icon_print.gif) 0 0 no-repeat;
}
ul.share_links li a.plaintext_link {
	display: block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 2000px;
	background: transparent url(../img/icon_plaintext.gif) 0 0 no-repeat;
}
ul.share_links form {
	position: absolute;
	top: -5px;
	right: -5px;
	padding: 0px 10px 10px 10px;
	width: 360px;
	border: 1px solid #cccccc;
	background-color: #f0f0f0;
}
a.close_link {
	display: block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: 2000px;
	background: transparent url(../img/icon_close.gif) 0 0 no-repeat;
}
ul.share_links form a.close_link {
	position: absolute;
	top: 5px;
	right: 5px;
}


/*
------------------------------------------------------------------------------------------------------------------------
PAGINATION
------------------------------------------------------------------------------------------------------------------------
*/
.pagination {
	float: right;
}
.pagination_number {
	display: block;
	float: left;
	margin: 0 6px 0 3px;
	color: #222;
	font-size: 0.833em;
	line-height: 16px;
	text-transform: uppercase;
}
.pagination a {
	display: block;
	float: left;
	margin-right: 3px;
	width:  16px;
	height: 16px;
	overflow: hidden;
	text-indent: 200px;
}
.pagination a.first {
	background: transparent url(../img/icon_paginate_first.gif) 0 0 no-repeat;
}
.pagination a.previous {
	background: transparent url(../img/icon_paginate_previous.gif) 0 0 no-repeat;
}
.pagination a.next {
	background: transparent url(../img/icon_paginate_next.gif) 0 0 no-repeat;
}
.pagination a.last {
	background: transparent url(../img/icon_paginate_last.gif) 0 0 no-repeat;
}
.pagination a:hover, .pagination a:focus  {
	background-position: 0 -16px;
}

/*
------------------------------------------------------------------------------------------------------------------------
GRID AND LIST MENUS
------------------------------------------------------------------------------------------------------------------------
*/
/* MENU CONTROLS - HOLDS PAGINATION, GRID/LIST TOGGLE ETC */
.menu_controls {
	width: 100%;
	overflow: hidden;
	margin: 0 0 1.667em 0;
}

/* VIEW OPTIONS TOGGLE */
.menu_view {
	float: left;
	padding: 0;
}
.menu_view p {
	display: none;
}
.menu_view ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}
.menu_view ul li {
	margin: 0;
	padding: 0 10px 0 0;
	float: left;
}
a.view_list {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	color: #FFF;
	background: transparent url(../img/icon_view_list.gif) 0 -16px no-repeat;
}
a.view_grid {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	color: #FFF;
	background: transparent url(../img/icon_view_grid.gif) 0 -16px no-repeat;
}
a.view_list.selected, a.view_grid.selected, a.view_list.selected:hover, a.view_grid.selected:hover, a.view_list.selected:active, a.view_grid.selected:active {
	background-position: 0 0;
}
a.view_list:hover, a.view_grid:hover {
	background-position: 0 -32px;
}
a.view_list:active, a.view_grid:active {
	background-position: 0 -32px;
}

/* SORT OPTIONS TOGGLE */
.menu_sort {
	float: left;
	padding: 0 0 0 10px;
	margin-left: 0;
	color: #999;
	line-height: 16px;
	font-size: 0.833em;
	font-weight: normal;
	text-transform: uppercase;
	border-left: 1px solid #CCC;
}
.menu_sort ul {
	margin: 0 0 0 5px;
	padding: 0 0 0 5px;
	list-style: none;
	display: inline;
	background: transparent url(../img/bullet_small.gif) left center no-repeat;
}
.menu_sort ul li {
	margin: 0;
	padding: 0 0 0 10px;
	display: inline;
}
.menu_sort a {
	color: #999;
}
.menu_sort a:hover, .menu_sort a:focus {
	color: #262626;
	text-decoration: none;
}
.menu_sort a.selected {
	color: #a33813;
}

/*
------------------------------------------------------------------------------------------------------------------------
(NORMAL) MENUS - GRID AND LIST
------------------------------------------------------------------------------------------------------------------------
*/
/* SHARED ITEMS */
.item_container {
	position: relative;	
}
.item_thumb {
	width: 136px;
	height: 76px;
	padding: 1px;
	background-color: #FFFFFF;
	border: 1px solid #e4e4e4;
	margin-bottom: 5px;
}
.item_name { /* modifies h3 in this case */
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0;
}
.item_name .meta { /* span in item_name heading */ 
	display: block;
	color: #999;
	line-height: 1.667em;
	font-size: 0.833em;
	font-weight: normal;
	text-transform: uppercase;
}

.item_description {
}
.item_link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 138px;
	height: 78px;
	text-indent: -9000px;
	overflow: hidden;
	border: 1px solid #e4e4e4;
	cursor: pointer;
	background: transparent url(../img/empty.gif) 0 0 repeat-x;
}
.item_link:hover {
	border: 1px solid #bbb;
}

/* CASE STUDY ICON */
/* In the showcase section, the grid and list menus are used to render galleries and case studies - if an item is a case study, it gets a class of 'case_study' applied to the item_container. Since the item_container has the lowest z-index for the menu item, if we want to overlay an indicator / icon over the whole menu item, we need to hook it onto something that's got the highest z-index within the menu item... in this case the item_link */
.item_container.case_study .item_link {
	background: transparent url(../img/icon_case_study.gif) right bottom no-repeat;
}

/*
------------------------------------------------------------------------------------------------------------------------
(NORMAL) MENU GRID VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.menu_grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.menu_grid li.menu_item { 				/* should to be specific here, as blanket targeting of all li's breaks any nested lists */
	display: -moz-inline-box;				/* Moz - FF2 doesn't support inline-block (doh, this invalidates css) */
											/* Be careful to specify '-moz-inline-box' NOT '-moz-inline-block', which renders differently */
	display: inline-block;					/* Op, Saf, IE (<=IE7 needs HasLayout set from hack below) \*/
	vertical-align: top;
	width: 140px;
	margin: 0 12px 20px 0;
	padding: 0;
}
/* HACK FOR INLINE BLOCK <= IE7 */
*:first-child+html ul.menu_grid li.menu_item { display: inline; zoom: 1; } * html ul.menu_grid li.menu_item { display: inline; }

/*
------------------------------------------------------------------------------------------------------------------------
(NORMAL) MENU LIST VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.menu_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.menu_list li.menu_item {
	margin: 0 0 0.833em 0;
	padding: 0 0 0.833em 0;
	width: 100%;
	float: left;
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}
ul.menu_list li.menu_item .item_container {
	float: left;
	padding-left: 320px;
}
ul.menu_list li.menu_item .item_thumb {
	float: left;
	margin-left: -320px;
	margin-right: 0;
}
ul.menu_list li.menu_item .item_name {
	float: left;
	width: 140px;
	margin-left: -160px;
	margin-right: 0;
}
ul.media_menu_list li.menu_item .item_description {
}

/*
------------------------------------------------------------------------------------------------------------------------
BASIC VIOSTREAM MEDIA OBJECT
------------------------------------------------------------------------------------------------------------------------
*/
/* VS CONTAINER */
.vs_container {
	position: relative;	
}
/* NAME & DURATION */
.vs_name { 	/* modifies h3 in this case */
	font-size: 1em;
	font-weight: bold;
}
.vs_duration { /* span in vs_name */ 
	color: #999;
	font-size: 0.833em;
	font-weight: normal;
	text-transform: uppercase;
}
/* THUMB */
.vs_thumb {
	width: 136px;
	height: 76px;
	padding: 1px;
	background-color: #FFFFFF;
	border: 1px solid #e4e4e4;
	margin-bottom: 5px;
}
/* INFO */
dl.vs_info {
	display: none;
}
dl.vs_info dt {
}
dl.vs_info dd {
}
/* DESCRIPTION */
.vs_description {
}
/* ADD TO PLAYLIST */
a.vs_addtoplaylist {
	display: none;
}
/* REMOVE FROM PLAYLIST */
a.vs_removefromplaylist {
	display: none;
}	
/* PLAY NOW */
.vs_playnow {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 138px;
	height: 78px;
	text-indent: -9000px;
	overflow: hidden;
	border: 1px solid #e4e4e4;
	cursor: pointer;
	background: transparent url(../img/empty.gif) 0 0 repeat-x;
}
.vs_playnow:hover {
	border: 1px solid #bbb;
}
/* NOW PLAYING INDICATOR */
.now_playing_indicator {
	position: absolute;
	top: 10px;
	left: -3px;
	display: block;
	width: 110px;
	height: 20px;
	padding: 0 5px;
	color: #ffffff;
	font-size: 0.833em;
	text-transform: uppercase;
	background: #a33813;
}

/*
------------------------------------------------------------------------------------------------------------------------
MEDIA MENU GRID VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.media_menu_grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.media_menu_grid li.menu_item { 			/* should to be specific here, as blanket targeting of all li's breaks any nested lists */
	display: -moz-inline-box;				/* Moz - FF2 doesn't support inline-block (doh, this invalidates css) */
											/* Be careful to specify '-moz-inline-box' NOT '-moz-inline-block', which renders differently */
	display: inline-block;					/* Op, Saf, IE (<=IE7 needs HasLayout set from hack below) \*/
	vertical-align: top;
	width: 140px;
	margin: 0 12px 0 0;
	padding: 0;
}
/* HACK FOR INLINE BLOCK <= IE7 */
*:first-child+html ul.media_menu_grid li.menu_item { display: inline; zoom: 1; } * html ul.media_menu_grid li.menu_item { display: inline; }

/*
------------------------------------------------------------------------------------------------------------------------
MEDIA MENU LIST VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.media_menu_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.media_menu_list li.menu_item {
	margin: 0 0 0.833em 0;
	padding: 0 0 0.833em 0;
	width: 100%;
	float: left;
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}
ul.media_menu_list li.menu_item .vs_container {
	float: left;
	padding-left: 320px;
}
ul.media_menu_list li.menu_item .vs_thumb {
	float: left;
	margin-left: -320px;
	margin-right: 0;
}
ul.media_menu_list li.menu_item .vs_name {
	float: left;
	width: 140px;
	margin-left: -160px;
	margin-right: 0;
}
ul.media_menu_list li.menu_item .vs_description {
}

/*
------------------------------------------------------------------------------------------------------------------------
PANEL
------------------------------------------------------------------------------------------------------------------------
*/
.panel {
	position: relative;
	clear: both;
	padding: 15px 15px 5px 15px;
	margin-bottom: 1.667em;
	background: #f0f0f0;
}
.panel p {
	margin-bottom: 0.833em;
}
.panel .panel_header {
}
.panel .panel_body {
	position: relative; /* needed for IE6 */
}
/* CLEARFIX needed for IE6 grid and list menu layouts */
.panel_body:after {content: " "; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; font-size: 0; }
.panel_body {display: inline-block;}
/* Start Holly Hack \*/
* html .panel_body {height: 1%;}
.panel_body {display: block;}
/* End Holly Hack */

/*
------------------------------------------------------------------------------------------------------------------------
PANEL PROMO
------------------------------------------------------------------------------------------------------------------------
*/
.panel.promo {
	padding: 5px 10px 2px 10px;
	margin-bottom: 5px;
	font-size: 1.167em;
	color: #a33813;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: -0.02em;
}
/*
.home_intro .panel.promo {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	background: transparent url(../img/divider_grey.gif) left bottom repeat-x;
}
*/
.panel.promo a {
	color: #a33813;
}
.panel.promo p {
	margin-bottom: 5px;
}
.panel.promo .meta {
	font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif;
	font-size: 0.714em;
}

/*
------------------------------------------------------------------------------------------------------------------------
TABS PANEL
------------------------------------------------------------------------------------------------------------------------
*/
.panel.tabs {
	padding: 0;
	background-color: transparent;
}
ul.tabs {
	list-style: none;
	margin: 0 0 1.667em 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	background: transparent url(../img/tab_gradient_bg.gif) center bottom no-repeat;
}
ul.tabs li {
	float: left;
	margin-right: 20px;
}
ul.tabs li a {
	display: block;
	line-height: 40px;
	padding-bottom: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: -0.02em;
	color: #262626;
	font-size: 1.5em;
}
ul.tabs li a:hover, ul.tabs li a:focus {
	text-decoration: none;
	color: #a33813;
}
ul.tabs li a.active {
	color: #a33813;
	background: transparent url(../img/tab_indicator.gif) center bottom no-repeat;
}

/*
------------------------------------------------------------------------------------------------------------------------
COMMENTS
------------------------------------------------------------------------------------------------------------------------
*/
.comment_list_container {
	position: relative;
	clear: both;
	margin: 1.75em 0;
	padding: 15px 15px 5px 15px;
	background: #f0f0f0;
}
.comment_list_container h2 {
}

/* Ordered list of all comments */
ol.comment_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
ol.comment_list li {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 10px 0;
}
ol.comment_list li.alt {
}
ol.comment_list li .comment_container {
	position: relative;
	background-color: #FFFFFF;
	padding: 5px 5px 5px 80px;
}
ol.comment_list li .comment_container .comment_header {
	font-size: 1.25em;
}
ol.comment_list li .comment_container .comment_header img.avatar {
	position: absolute;
	left: 8px;
	top: 8px;
	width: 56px;
	height: 56px;
	padding: 1px;
	background-color: #ffffff;
	border: 1px solid #e4e4e4;
}
* html ol.comment_list li .comment_container .comment_header img.avatar {
	left: -72px;
}

ol.comment_list li .comment_container .comment_header .author, ol.comment_list li .comment_container .comment_header .author a {
	font-weight: bold;
	color: #262626;
}
ol.comment_list li .comment_container .comment_header .date {
	display: block;
	color: #999;
	font-size: 10px;
	text-transform: uppercase;
}
ol.comment_list li .comment_container .comment_body {
	margin-top: 3px;
}
ol.comment_list li .comment_container .comment_body p {
}

/* misc bits */
.comment_list_container .rss_feed {
	position: absolute;
	right: 18px;
	top: 18px;
	display: block;
	overflow: hidden;
	text-indent: -9000px;
	width: 16px;
	height: 16px;
	background: transparent url(../img/icon_rss.gif) center center no-repeat;
}

/*
------------------------------------------------------------------------------------------------------------------------
COMMENT FORM
------------------------------------------------------------------------------------------------------------------------
*/
.form_container,
.form_builder,
.login_form_container, 
.comment_form_container,
.contact_form_container {
	position: relative;
	clear: both;
	padding: 15px 15px 5px 15px;
	background: #f0f0f0;
}
.comment_form_container h2 {
}
form.comment_form {
}
form.comment_form fieldset {
}
form.comment_form fieldset p {
}
form.comment_form fieldset p label, form.comment_form fieldset p label.label {
}
form.comment_form fieldset .text, form.comment_form fieldset .textarea, form.comment_form fieldset .file {
}
form.comment_form fieldset p.indent {
}

/*
------------------------------------------------------------------------------------------------------------------------
COMMENTS MENU (USED IN PANELS eg MOST RECENT COMMENTS)
------------------------------------------------------------------------------------------------------------------------
*/
ul.comments_menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.comments_menu li {
	margin: 0;
	padding: 0 0 10px 0;
}
ul.comments_menu li .single_comment {
}
ul.comments_menu li .single_comment .comment_header {
	padding: 5px;
	background-color: #FFFFFF;
	margin-bottom: 1px;
}
ul.comments_menu li .single_comment .comment_header img.avatar {
	width: 24px;
	height: 24px;
}
ul.comments_menu li .single_comment .comment_header a {
}
ul.comments_menu li .single_comment .comment_body {
	padding: 5px;
	background-color: #FFFFFF;
}
ul.comments_menu li .single_comment .comment_body a {
}

/*
------------------------------------------------------------------------------------------------------------------------
DEFINITION LIST: INFO LIST (USED ON SHOWCASE PAGES TO LIST PROJECT DETAILS)
------------------------------------------------------------------------------------------------------------------------
*/
dl.info_list {
	margin-top: -0.833em;
	font-family: "Trebuchet MS" , Helvetica, Arial, sans-serif;
}
dl.info_list dt {
	color: #999;
	font-size: 0.833em;
	font-weight: normal;
	text-transform: uppercase;
	margin-top: 0.833em;
}
dl.info_list dd {
	margin-left: 0;
	color: #262626;
}

/*
------------------------------------------------------------------------------------------------------------------------
ICONS
------------------------------------------------------------------------------------------------------------------------
*/
.icon_email {
	padding-left: 24px;
	background: transparent url(../img/icon_email.gif) 0 3px no-repeat;
}
.icon_phone {
	padding-left: 24px;
	background: transparent url(../img/icon_phone.gif) 0 3px no-repeat;
}
.icon_tick {
	padding-left: 24px;
	background: transparent url(../img/icon_tick.gif) 0 3px no-repeat;
}

a.launchproject_link {
	font-size: 1.167em;
	text-transform: uppercase;
	padding-right: 18px;
	background: transparent url(../img/bullet_large_red.gif) top right no-repeat;
}
a.launchproject_link:hover, a.launchproject_link:focus {
}


.contact_address {
	width: 30%;
	margin-right: 3%;
	margin-bottom: 1.667em;
	float: left;
	margin-top: 20px;
}
.contact_address p {
	margin-bottom: 0.833em;
}


/*** Tooltips ***/
.tooltip {
	position: absolute!important;
	overflow:hidden;
	font-size: 12px;
	z-index: 10000!important;
}
.tooltip .xtop, .tooltip .xbottom { display: block; background: transparent; font-size: 1px; }
.tooltip .xb1, .tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { display: block; overflow: hidden; }
.tooltip .xb1, .tooltip .xb2, .tooltip .xb3 { height: 1px; }
.tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { background: #666; border-left: 1px solid #333; border-right: 1px solid #333; }
.tooltip .xbottom .xb2, .tooltip .xbottom .xb3, .tooltip .xbottom .xb4 { background: #666; }
.tooltip .xb1 { margin: 0 5px; background: #333; }
.tooltip .xb2 { margin: 0 3px; border-width: 0 2px; }
.tooltip .xb3 { margin: 0 2px; }
.tooltip .xb4 { height: 2px; margin: 0 1px; }

.tooltip .xboxcontent {
	padding: 0 .5em;
	margin: 0;
	color: #000;
	text-shadow: 2px 2px 0px #CCC;
	word-wrap:break-word;
	border: 1px solid #333;
	border-width: 0px 1px 0 1px;
	background-color: #666;
	text-align: left;
}