/*
Stylesheet by www.miltonbayer.com April 2010
*/


/*
ie6 png fix, as per http://www.twinhelix.com/css/iepngfix/
basically, add the elements that will contain png's below:
*/
div, img, h1, h2, h3, input	{behavior: url("styles/iepngfix.htc") }


/*
zero margins and padding
*/
html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,li,menu,ol,ul,table,tr,td,th,p,img,dl,dt,dd
{margin:0; padding:0; }
img,fieldset	{border:none; }


/*
core
*/
body		{text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; background:#F3EDF9 url('../images/body-bg.jpg') repeat-x top left; color:#330066; }

p 			{padding:0 0 15px 0; }
a 			{color:#330066; text-decoration:underline; }
a:hover	    {text-decoration:none; }

h1, h2, h3, h4	{margin:0; padding:0 0 15px 0; font-weight:normal; }
h1			{font-size:24px; }
h2			{font-size:17px; }
h3			{font-size:16px; }
.hide		{display: none;}

/*
main boxes and divs
*/
#all	 				{width:980px; margin:0 auto; text-align:left; padding:2px; background:#FFF; }
#header				{background:url('../images/header/header-bg.jpg') repeat-x top left; position:relative; padding:30px; }
#content 			{float:right; width:690px; display:inline; position:relative; margin:0 30px 30px 0; }
#newsBox 			{float:left; width:460px; display:inline; position:relative; margin:0 0 0 30px; }
#sideBar			{float:left; display:inline; width:200px; margin:0 0 30px 30px; }
#sideBarHome	{float:right; display:inline; width:200px; margin:0 30px 0 0; }
#footer 			{clear:both; overflow:hidden; zoom:1; padding:30px; background:#D7C3E8; border-top:1px solid #330066; }
#introText		{clear:both; padding:15px 30px; }
#promoBoxes		{float:left; width:200px; margin:0 0 0 30px; }
#signUp				{background:#E2D1F1; padding:10px; margin:0 0 24px 0; }
#breadcrumb		{background:#EDEDED; padding:6px 20px; margin:20px 30px; color:#6F6F6F; height:14px; }


/*
page / section specific
*/

/*header (form background:#713C96;) */
#header h1								{position:absolute; left:300px; top:40px; width:297px; height:38px; text-indent:-9999px; /*background:url('../images/header/title.png') no-repeat top left;*/ }
#header form							{padding:2px; position:absolute; top:36px; right:36px; }
#header form p						    {padding:0; }
#header form label				        {display:block; float:left; width:76px; height:24px; text-indent:-9999px; background:url('../images/header/search-text.jpg') no-repeat top left }
#header form input#headerSearchTerm     {margin:0; padding:2px; float:left; margin:0 2px 0 2px; }
#header img								{border:0; border:none; }


/*breadcrumb*/
#breadcrumb p		{float:left; }
#breadcrumb ul	{list-style:none; }
#breadcrumb li	{float:left; padding:0 10px; margin:0 0 0 10px; background:url('../images/breadcrumb/arrow.gif') no-repeat left center; }


/*sideBar*/
#sideBar h2		{font-size:18px; padding:0 0 10px 0; }

/*subNav in sidebar*/
ul#subNav						{list-style:none; font-size:13px; margin:0 0 30px 0; }
#subNav li					{}
#subNav li a				{display:block; border-bottom:1px solid #C4C4C4; padding:6px 0 6px 0; margin:0 0 5px 0; text-decoration:none }
#subNav li a:hover	{text-decoration:underline }


/*content*/
#content h1							{position:relative; padding:0 0 25px 0; }
#content h1 span				{position:absolute; top:5px; right:0; }
#content img.introPic		{margin:0 0 20px 0; }
#content h4							{color:#7C7C7C; font-size:12px; margin:-20px 0 0 0; padding:0 0 20px 0; }
#content p#introText		{border-top:1px solid #AFAFAF; border-bottom:1px solid #AFAFAF; padding:10px 0; margin:0 0 20px 0; font-size:12px; }

#content table		{width:100%; font-size:13px; margin:0 0 20px 0; }
#content table td	{padding:8px; background:#F1E8F9; }
#content table th	{padding:8px; text-align:left; font-weight:bold; color:#FFFFFF; background:#640199; }


/*detail page*/
.detailPage h1		    {border-bottom:1px solid #AFAFAF; margin:0 0 20px 0; }
.detailPage	p			{font-size:13px; }


/*image alignment*/
#content img.alignRight	{float:right; margin:0 0 10px 20px; }
#content img.alignLeft	{float:left; margin:0 20px 10px 0; }


/*photos page
see: http://www.flickr.com/badge.gne
*/
#flickrGallery					{margin:0 0 20px -30px; clear:both; }
.flickr_badge_image img	        {float:left; width:210px; height:158px; margin:10px 0 20px 30px; }


/*videos*/
#playerContainer	{float:left; margin:0 0 30px 20px; min-height:330px; }
ul.videos			{clear:both; list-style:none; margin:0 0 30px -30px; }
.videos li			{float:left; margin:0 0 30px 30px; font-size:12px; }
.videos li img		{margin:10px 0 0 ; }

/*hub page*/
.hubBox							{margin:0 0 20px 0; padding:0; font-size:13px; }
.hubBox img					{float:left; margin:0 30px 0 0; }
.hubBox img.button	{float:right; margin:0 0 20px 20px; }
.hubBox p						{padding:0; }
.hubBox h2 					{padding:0 0 10px 0; font-size:17px; }


/*promotion boxes(home page)

These styles are here if you need a dynamic height (no keyline around the boxes though)

*/
.promo							{margin:0 0 10px 0; padding:10px 10px 0 10px; }
.promo p						{padding:0 0 15px 0; }
.promo h2						{font-size:18px; margin:0; padding:0 0 5px 0; font-weight:bold; }
.promo img.button	 	        {float:right; margin:0 0 0 10px; }
.dark							{background:url('../images/promo-boxes/dark.jpg') repeat top left; color:#FFFFFF; }
.medium							{background:url('../images/promo-boxes/medium.jpg') repeat top left; color:#FFFFFF; }
.light							{background:url('../images/promo-boxes/light.jpg') repeat top left; color:#330066; }

/*fixed height promo boxes (with keyline) - needed to have boxes lined up on home page*/
.darkFixed				{background:url('../images/promo-boxes/darkFixed.jpg') repeat top left; color:#FFFFFF; height:105px; }
.mediumFixed			{background:url('../images/promo-boxes/mediumFixed.jpg') repeat top left; color:#FFFFFF; height:105px; }
.lightFixed				{background:url('../images/promo-boxes/lightFixed.jpg') repeat top left; color:#330066; height:105px; }


/*news boxes (home page)*/
.newsSnippet				{color:#330066; padding:10px 0 10px 0; border-bottom:2px solid #E9E0F5; width:464px; overflow:auto; position:relative; }
.newsSnippet img			{float:left; margin:0 10px 10px 0; }
.newsSnippet h2				{font-size:12px; font-weight:bold; padding:0 0 10px 0; }
.newsSnippet .button	    {position:absolute; bottom:0; right:0; }


/*sign up (home page)*/
#signUp img			{float:left; margin:0 10px 10px 0; }
#signUp h2			{display:inline; float:left; text-indent:-9999px; width:92px; height:34px; padding:0; margin:0 0 10px 0; background:url('../images/home/sign-up-heading.png') no-repeat top left; }
#signUp label		{display:block; clear:both; margin:0 0 5px 0; }
#signUp #email	{margin:0; padding:2px; border:2px solid #CCCCCC; float:left; margin:0 10px 0 0; width:130px; }
#signUp p				{padding:0; font-size:12px; }
#signUp strong	{color:#330066; }


/*intro text - before footer, after main content (home page)*/
#introText h1		{text-indent:-9999px; margin:0; padding:0 0 15px 0; width:324px; height:22px; background:url('../images/home/intro-heading.png') no-repeat top left; }


/*footer*/
p#footerCopy		{clear:both; }
#footerCopy span	{float:right; }
#footerCopy	span a	{padding:0 5px; }

#clients		{float:left; width:300px; margin:0 0 10px 0; }
#clients img	{float:left; margin:0 10px 10px 0 }

/*see: http://www.flickr.com/badge.gne*/
#flickr				            {float:right; width:400px; margin:0 0 30px 0; }
#flickr img		                {margin:0 0 20px 0; }
#flickr .flickr_badge_image img	{float:left; width:66px; height:66px; border:4px solid #FFFFFF; margin:0 5px 6px 0; }

/*
navigation
*/
ul#nav					{list-style:none; text-indent:-9999px; margin:2px 0 2px -2px; padding:0; height:34px; position:relative; z-index:10; }
ul#nav li				{display:inline; }
ul#nav li a				{float:left; height:34px; text-decoration:none; margin:0 0 0 2px; }

/*show the buttons*/
#nav li.home a				{width:128px; background:url('../images/header/nav/home.png') no-repeat left bottom; }
#nav li.products a		{width:236px; background:url('../images/header/nav/products.png') no-repeat left bottom; }
#nav li.about a				{width:149px; background:url('../images/header/nav/about.png') no-repeat left bottom; }
#nav li.careers a			{width:132px; background:url('../images/header/nav/careers.png') no-repeat left bottom; }
#nav li.media	a				{width:182px; background:url('../images/header/nav/media.png') no-repeat left bottom; }
#nav li.contact a			{width:143px; background:url('../images/header/nav/contact.png') no-repeat left bottom; }

/*hover states for the buttons*/
#nav li.home a:hover			{background:url('../images/header/nav/home.png') no-repeat left top; }
#nav li.products a:hover	{background:url('../images/header/nav/products.png') no-repeat left top; }
#nav li.about a:hover			{background:url('../images/header/nav/about.png') no-repeat left top; }
#nav li.careers a:hover		{background:url('../images/header/nav/careers.png') no-repeat left top; }
#nav li.media	a:hover			{background:url('../images/header/nav/media.png') no-repeat left top; }
#nav li.contact a:hover		{background:url('../images/header/nav/contact.png') no-repeat left top; }

/*on state for the button, you'll need to add a class of on to each active top level <li>*/
#nav li.on a	{background-position:left top; }

/*for positioning of the first sub-nav drop down*/
#nav li.home ul				{}
#nav li.products ul		    {left:130px; }
#nav li.about ul			{left:368px; }
#nav li.careers ul		    {left:519px; }
#nav li.media	ul			{left:653px; }
#nav li.contact ul		    {left:837px; }

/*styling of the first set of drop down ul*/
ul#nav ul					{display:none; text-indent:0; margin:0; height:auto; padding:2px 2px 0 2px; background:#FFFFFF; position:absolute; top:34px; }
ul#nav ul li				{display:block; position:relative; }
ul#nav ul li a				{display:block; float:none; height:auto; margin:0 0 2px 0; padding:6px 10px; background:#E2D1F1l; color:#650199; }
ul#nav ul li a:hover	    {background:#650199; color:#FFFFFF; }

/*specificity battles. Let's pop this on one line (hover states for subnav, over-writing of background images)*/
#nav li.home ul li a, #nav li.products ul li a, #nav li.about ul li a, #nav li.careers ul li a, #nav li.media	ul li a, #nav li.contact ul li a	{background:#E2D1F1; }
#nav li.home ul li a:hover, #nav li.products ul li a:hover, #nav li.about ul li a:hover, #nav li.careers ul li a:hover, #nav li.media	ul li a:hover, #nav li.contact ul li a:hover	{background:#650199; }

/*sub-sub nav (3rd level sub nav)*/
ul#nav li.products ul li ul	{position:absolute; top:-2px; left:256px; }
ul#nav li.about ul li ul		{position:absolute; top:-2px; left:169px; }
ul#nav li.careers ul li ul	{position:absolute; top:-2px; left:152px; }
ul#nav li.media ul li ul		{position:absolute; top:-2px; left:202px; }
ul#nav li.contact ul li ul	{position:absolute; top:-2px; left:163px; }


/*
slideshow / carousel
*/
#tabs					{height:307px; margin:0 0 30px 0; overflow:hidden; }
#tabs ul.ui-tabs-nav 	{display:block; background:#CCCCCC; list-style:none; width:980px; height:48px; border-left:1px solid #999999; }
.ui-tabs-nav li			{float:left; width:245px; }
.ui-tabs-nav li	a		{display:block; background:url('../images/slideshow/nav-bg.jpg') repeat-x top left; color:#999999; padding:13px 10px 13px 10px; font-size:12px; margin:0; border:1px solid #999999; border-left:0; text-decoration:none; }

/* Tabs*/
.ui-tabs 									{position:relative; padding:0; zoom: 1; }
.ui-tabs .ui-tabs-nav 						{margin:0; padding:0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {margin-bottom:0; padding-bottom:0; }
.ui-tabs .ui-tabs-panel 					{display:block; border:0; padding:0; background:none; }
.ui-tabs .ui-tabs-hide 						{display:none !important; }

.ui-tabs-nav li.ui-state-active a	{color:#330066; padding-bottom:19px; position:relative; top:-6px; border-bottom:1px solid #999999; }

#fragment-1, #fragment-2, #fragment-3, #fragment-4	{position:relative; }
.fragmentBox		{position:absolute; top:40px; left:40px; padding:16px; width:240px; height:154px; color:#E2D1F1; background:url('../images/slideshow/overlay.png') no-repeat top left; }
.fragmentBox h1	    {color:#FFD800; font-size:17px; font-weight:bold; margin:0; padding:0 0 10px 0; }
.fragmentBox p	    {font-size:11px; }
.fragmentBox img	{position:absolute; bottom:16px; right:16px; }


/*Additional css by Peter Spooner*/

/*Right justify some of the fragment boxes in the slideshow*/
.fragmentBoxRight		{position:absolute; top:40px; left:640px; padding:16px; width:240px; height:154px; color:#E2D1F1; background:url('../images/slideshow/overlay.png') no-repeat top left; }
.fragmentBoxRight h1	{color:#FFD800; font-size:17px; font-weight:bold; margin:0; padding:0 0 10px 0; }
.fragmentBoxRight p	    {font-size:11px; }
.fragmentBoxRight img	{position:absolute; bottom:16px; right:16px; }

/*Displaying Validation Errors (Pro ASP.NET MVC Framework, p.388)*/
.field-validation-error             { color: Red; }
.input-validation-error             { border: 1px solid red; background-color: #ffeeee; }
.validation-summary-errors          { font-weight: bold; color: Red; }

/*content page*/
.itemBox							{ clear:both; margin:10px 0 0 0; padding:5px 0 0 0; font-size:10px;}
.itemBox img					    { float:left; margin:0 10px 0 0; }
.itemBox img.button	                { float:right; margin:0 0 10px 10px; }
.itemBox p						    { padding: 0; font-size:13px; }
.itemBox h2 					    { padding: 0 0 10px 0; font-size:17px; }

#goldcare, #monarch, #fragmentColor1, #fragmentColor2, #fragmentColor3, #fragmentColor4  { color: #FFD800; }
#whiteHeading { color:white; }

/*Hide these while page is loading */
/*#tab2, #tab3, #tab4 {display:none; }
#fragmentBox1, #fragmentBox2, #fragmentBox3, #fragmentBox4 {display:none; }*/
#tabs { display:none; }

/*site map*/
.siteMapNode {font-size:12px; }
.siteChildMapNode {font-size:12px; padding: 10px; }

/* li on privacy page*/
.privacy { padding:10px; list-style-type:disc; list-style-position:inside; }

.partFinder							{clear:both; background:#E2D1F1; margin:0 0 15px 0; padding:10px 10px 0 10px; }
.partFinder p						{padding:0 0 15px 0; }
.partFinder h2						{font-size:18px; margin:0; padding:0 0 5px 0; font-weight:bold; }
.partFinder img.button	 	        {float:right; margin:0 0 0 10px; }

a.heading	{text-decoration:none; }

/*Search*/
.wide_search			{	background-color: #E2D1F1;	padding: 12px 10px 8px 40px; margin: 0 auto 16px auto; width: 560px;}
.wide_search label		{	color: #7B27A8;	font-size: 18px; display: block; float: left;}
.wide_search .input_search		{width: 400px; float: left; margin: 0px 6px 0px 6px;}
.paging.search_results  {border-top:1px dotted #B2B2B2; margin:5px 0 5px; padding:10px 0 20px 0; }
.paging					{border-bottom:1px dotted #B2B2B2; margin:20px 0 0; padding:0 0 20px;}
.paging ul				{float:right; }
.paging li				{border-right:1px solid #330066; display:inline; margin:0 5px 0 0; padding:0 5px 0 0;}
.last					{border-right:medium none !important; margin-right:0 !important; padding-right:0 !important;}
.results				{border-bottom:1px dotted #666666; padding:1.5em 0 0.5em;}

/*People*/
.peopleImg         {float:right; margin: 0 0 10px 10px; }
p.peopleName       {font-size:17px; }
.peopleTitle       {font-weight:bold;}
hr.peopleHr        {margin: 0 0 11px 0; }

img.banner { padding: 0 30px 30px 30px; }

li.pdf {background-image: url(../Images/pdficon_small.gif); background-repeat: no-repeat; background-position:left; padding: 3px 0 3px 20px; }