@charset "UTF-8";

html {}
body {margin: 30px 0; padding: 0; background-color:#F7F7F7; font-family: Arial, sans-serif; font-size: 100%;

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

}

.TabbedPanelsContent, .TabbedPanelsContent2 {display: none;}
.TabbedPanelsContentfirst, .TabbedPanelsContent2first {display: block;}

/*______________________________ SUNDRIES ______________________________*/

.clearFloat {clear:both; height:0; font-size: 1px; line-height: 0px;}

/*______________________________ TEXT & LINKS ______________________________*/

h1 { font-family: Arial, sans-serif; color: #000000; font-size: 13px; font-family: Arial, sans-serif; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0.6em 0 0 0; text-align: left;}

h2 { font-family: Arial, sans-serif; color: #666666; font-size: 13px; font-family: Arial, sans-serif; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0.4em 0 0 0; text-align: left;}

h3 { font-family: Arial, sans-serif; color: #666666; font-size: 1em; font-family: Arial, sans-serif; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0.3em 0 0 0; text-align: left;}

h4 { font-family: Arial, sans-serif; color: #888888; font-size: 1.3em; line-height: 1.3em; font-family: Arial, sans-serif; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 0 20px 0.7em 20px; text-align: left;}

p { font-family: Arial, sans-serif; color: #888888; font-size: 1em; line-height: 1.3em; font-family: Arial, sans-serif; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 0 0 0.3em 0; text-align: left;}

a {cursor: pointer;}

a:link, a:visited {color: #000000; text-decoration:none; outline: none;}
a:hover, a:active {color: #888888; text-decoration:none; outline: none;}

h1 a:link, h1 a:visited {color: #000000; text-decoration:none; outline: none; padding-right: 10px; background: url(../images-generic/link-arrow-off.gif) right no-repeat;}
h1 a:hover, h1 a:active {color: #666666; text-decoration:none; outline: none; background: url(../images-generic/link-arrow-on.gif) right no-repeat;}

h2 a:link, h2 a:visited {color: #000000; text-decoration:none; outline: none; padding-right: 10px; background: url(../images-generic/link-arrow-off.gif) right no-repeat;}
h2 a:hover, h2 a:active {color: #666666; text-decoration:none; outline: none; background: url(../images-generic/link-arrow-on.gif) right no-repeat;}

ul li a:link, ul li a:visited {color: #000000; font-weight: bold; text-decoration:none; outline: none; padding-right: 10px; background: url(../images-generic/link-arrow-off.gif) right no-repeat;}
ul li a:hover, ul li a:active {color: #666666; font-weight: bold; text-decoration:none; outline: none; background: url(../images-generic/link-arrow-on.gif) right no-repeat;}

img {border: none;}
img a {border: none; cursor: pointer;}

.testimonials {background: url(../images-generic/testimonials-top.gif) top no-repeat transparent; width: 415px; margin: 0; padding: 0;}
.testimonials h3 {margin: 0; padding: 12px 20px 5px 20px; display: block; text-align: left;}
.testimonials p {padding: 0 125px 0 20px; margin: 0;}

.blog {background: url(../images-generic/blog-top.gif) top no-repeat transparent; width: 415px; margin: 0; padding: 0;}
.blog h3 {margin: 0; padding: 12px 20px 5px 20px; display: block; text-align: left;}
.blog p {padding: 0 20px 0 20px; margin: 0;}

.twitter {background: url(../images-generic/twitter-top.gif) top no-repeat transparent; width: 415px; margin: 0; padding: 0;}
.twitter h3 {margin: 0; padding: 12px 20px 7px 20px; display: block; text-align: left;}
.twitter p {padding: 0 20px 0 20px; margin: 0; float: left; display: inline;}

.team {background: url(../images-generic/team-top.gif) top no-repeat transparent; width: 415px; margin: 0; padding: 0;}
.team h3 {margin: 0; padding: 12px 0 5px 20px; display: block; text-align: left;}
.team p {padding: 0 0 0 20px; margin: 0;}

.jobs {background: url(../images-generic/jobs-top.gif) top no-repeat transparent; width: 415px; margin: 0; padding: 0;}
.jobs h3 {margin: 0; padding: 12px 20px 5px 20px; display: block; text-align: left;}
.jobs p {padding: 0 20px 0 20px; margin: 0;}


/*______________________________ CONTENTS HOLDER ______________________________*/

#contents{width: 980px; padding: 0 0 30px 0; margin: 0 auto; background-color: #FFFFFF; border: 1px solid #CCC; position: relative; min-height: 693px;}


/*______________________________ FLASH HOLDER ______________________________*/

#apDiv1 {width:980px; height: 680px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; z-index: 1; background-color: transparent;}

object, object:active, object:focus,
embed, embed:active, embed:focus {outline: none; outline: 0;}

/*______________________________ LEFT HAND CONTENT HOLDER ______________________________*/

.carousel {overflow: hidden !important;}

#leftMainBox {width: 465px; float: left; display: inline; margin: 0; padding: 24px 0 0 25px; text-align:left; font-family: Arial, sans-serif; font-size: 75%; color: #666; z-index: 2; position: relative;}
		
		.leftHandContent {width: 415px; padding: 0 25px; margin: 0;}
				.leftHandContent h1 {font-family: Arial, sans-serif; color: #000000; font-size: 1.5em; letter-spacing: 0px; font-weight: normal; padding: 470px 0 0 0; margin: 0.3em 0; text-align: center;}
				.leftHandContent h4 {font-family: Arial, sans-serif; color: #666666; font-size: 1.0em; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0.3em 0; text-align: left; line-height: 1.4em;}
				.leftHandContent h5 {font-family: Arial, sans-serif; color: #888888; font-size: 1.0em; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 0 0 0.8em 0; text-align: left; line-height: 1.4em;}
				.leftHandContent h6 {font-family: Arial, sans-serif; color: #888888; font-size: 1.0em; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 23px 0 0 0; text-align: left;}
				.leftHandContent p {font-family: Arial, sans-serif; color: #888888; font-size: 1.3em; letter-spacing: 0; font-weight: normal; padding: 0; margin: 0 0 0.3em 0; text-align: center;}
		
		.portfolioContent {width: 465px; padding: 0; margin: 0;}
				.portfolioContent h1 {font-family: Arial, sans-serif; color: #000000; font-size: 12px; letter-spacing: 0px; font-weight: normal; padding: 0px 25px 0 25px; margin: 0.3em 0; text-align: center;}
				.portfolioContent h6 {font-family: Arial, sans-serif; color: #888888; font-size: 1.0em; letter-spacing: 0px; font-weight: normal; padding: 0 25px; margin: 23px 0 0 0; text-align: left;}
				.portfolioContent p {font-family: Arial, sans-serif; color: #888888; font-size: 11px; letter-spacing: 0; font-weight: normal; padding: 0 25px; margin: 0 0 0.3em 0; text-align: center;}
				
		.newsExtraContent {width: 415px; padding: 0 25px; margin: 0;}
				.newsExtraContent h1 {font-family: Arial, sans-serif; color: #000000; font-size: 1.5em; letter-spacing: 0px; font-weight: normal; padding: 470px 0 0 0; margin: 0.3em 0; text-align: center;}
				.newsExtraContent h4 {font-family: Arial, sans-serif; color: #666666; font-size: 0.9em; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0.3em 0; text-align: left;}
				.newsExtraContent h5 {font-family: Arial, sans-serif; color: #888888; font-size: 0.9em; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 0 0 0.8em 0; text-align: left;}
				.newsExtraContent h6 {font-family: Arial, sans-serif; color: #888888; font-size: 1.0em; letter-spacing: 0px; font-weight: normal; padding: 0; margin: 23px 0 0 0; text-align: left;}
				.newsExtraContent p {font-family: Arial, sans-serif; color: #888888; font-size: 1.0em; letter-spacing: 0; font-weight: normal; padding: 0; margin: 0 0 0.3em 0; text-align: center;}
				
						.expandLink a:link, .expandLink a:visited {color: #000000; text-decoration:none; outline: none; padding-left: 12px; background: url(../images-generic/expand-arrows-off.gif) left no-repeat;}
						.expandLink a:hover, .expandLink a:active {color: #666666; text-decoration:none; outline: none; background: url(../images-generic/expand-arrows-on.gif) left no-repeat;}

		.lhList3Column {width: 120px; padding: 0 12px 0 0; margin: 0 12px 0 0; line-height: 1.2em; border-right: #888888 1px solid; float: left; display: inline; color: #888888;}
		
				.lhList3Column ul {list-style: none; padding: 0; margin: 0;}
						.lhList3Column ul li {padding: 0; margin: 0;}
				
		.lhList3ColumnLast {width: 120px; padding: 0; margin: 0; line-height: 1.2em; border-right: none; float: left; display: inline; color: #888888;}
				
				.lhList3ColumnLast ul {list-style: none; padding: 0; margin: 0;}
						.lhList3ColumnLast ul li {padding: 0; margin: 0;}								
								
		.lhList2Column {width: 200px; padding: 0 15px 0 0; margin: 0; line-height: 1.05em; border-right: none; float: left; display: inline; color: #888888;}
				.lhList2Column ul {list-style: none; padding: 0; margin: 0;}
						.lhList2Column ul li {padding: 0; margin: 0;}
								
		.lhList2ColumnLast {width: 200px; padding: 0; margin: 0; line-height: 1.05em; border-right: none; float: left; display: inline; color: #888888;}
				.lhList2ColumnLast ul {list-style: none; padding: 0; margin: 0;}
						.lhList2ColumnLast ul li {padding: 0; margin: 0;}
										
		
.homePortfolio {width: 415px; padding: 100px 0 20px 0; margin: 0; background: transparent; border: none;}

.aboutImages {width: 415px; height: 313px; padding: 101px 0 56px 0; margin: 0; background: transparent; border: none;}

.newsExtraImages {width: 415px; height: 313px; padding: 101px 0 56px 0; margin: 0; background: transparent; border: none;}


/*______________________________ CONTACT FORM ______________________________*/

.leftHandContent form {width: 415px; padding: 100px 0 30px 0; margin: 0;}
		.leftHandContent form div {clear: both; padding: 0; margin: 0;}
		.leftHandContent label {font-size: 90%; color: #888888; padding: 4px 0 0 0; margin: 0; cursor: pointer; float: left; display: inline;}
		.leftHandContent input.txt {color: #666666; background-color: #FFFFFF; border: 1px solid #ABABAB; width: 304px; padding: 4px 3px; margin: 0 0 9px 0; float: right; display: inline;}
		.leftHandContent input.btn {color: #888888; background-color: #FFFFFF; border: 1px solid #ABABAB; padding: 0 5px; margin: 0 0 0 10px; cursor: pointer;}
		.leftHandContent input.btn:hover {color: #FFFFFF; background-color: #888888;}
		.leftHandContent input.btn2 {color: #888888; background-color: #FFFFFF; border: 1px solid #ABABAB; padding: 0 5px; margin: 0 0 0 103px; cursor: pointer;}
		.leftHandContent input.btn2:hover {color: #FFFFFF; background-color: #888888;}
		.leftHandContent textarea.txt2 {color: #666666; background-color: #FFFFFF; border: 1px solid #ABABAB; width: 304px; height: 5em; padding: 4px 3px; margin: 0 0 9px 0; float: right; display: inline;}


/*______________________________ THANK YOU PAGE ______________________________*/
		
.thankYouPage {width: 480px; height: 200px; padding: 200px 450px 200px 50px; margin: 0; background: url(../images-generic/logo-and-strap.gif) top right no-repeat;}
.thankYouPage h1 {font-size: 150%; padding: 2em 0; margin: 0;}
.thankYouPage p {font-size: 90%; padding: 0; margin: 0;}


/*______________________________ RIGHT HAND CONTENT HOLDER ______________________________*/

#rightMainBox {float: right; display: inline; font-family: Arial, sans-serif; color:#000; width:490px; z-index: 3; position: relative;}

		.rhList3Column {width: 120px; padding: 0 10px 0 0; margin: 10px 10px 0 0; line-height: 1.2em; border-right: #888888 1px solid; float: left; display: inline; color: #888888;}
				.rhList3Column ul {list-style: none; padding: 0; margin: 0;}
						.rhList3Column ul li {padding: 0; margin: 0;}
				
		.rhList3ColumnLast {width: 120px; padding: 0; margin: 10px 0 0 0; line-height: 1.2em; border-right: none; float: left; display: inline; color: #888888;}
				.rhList3ColumnLast ul {list-style: none; padding: 0; margin: 0;}
						.rhList3ColumnLast ul li {padding: 0; margin: 0;}

#map {width: 406px; height: 280px; padding:0; margin: 10px 0 3px 0; border: #888888 1px solid;}


/*______________________________ BLOG  CONTENT HOLDER ______________________________*/

.navPrevious {width: 11px; height: 11px; text-indent: -3000px; background: transparent url(../images-generic/right-arrow-off.gif) bottom no-repeat; float: right; display: inline;}
.navNext {width: 11px; height: 11px; text-indent: -3000px; background: transparent url(../images-generic/left-arrow-off.gif) bottom no-repeat; float: right; display: inline;}
.tweetHolder {background: url(../images-generic/twitter-gs.gif) bottom right no-repeat;}


/*______________________________ CSS TABLE ______________________________*/

.tableRow  {width: 100%; border: none; padding: 0; margin: 0;}

		.tableLeftColumn {width: 48%; padding: 0; margin: 0; float: left;}
		.tableRightColumn {width: 48%; padding: 0; margin: 0; float: right;}


/*______________________________ PAGE DROP SHADOW ______________________________*/

#capper {width: 980px; height: 17px; padding: 0; margin: 0 auto; background: url(../images-generic/capper.gif) top no-repeat #f7f7f7; z-index: 4;}


/*______________________________ FOOTER HOLDER ______________________________*/

#footer	{color: #999; font-family: Arial, sans-serif; font-weight:normal; text-align: left; font-size:10px; letter-spacing: 0.9px; margin: 0 auto; padding: 0 5px; width: 970px; z-index: 5;}
		#footer a:link, div#footer a:visited {color:#999; font-weight:bold; text-decoration:none; outline: none;}
		#footer a:hover, div#footer a:active {text-decoration:none; color:#666; outline: none;}
		
		.rangeLeft {float: left; display: inline; font-weight: bold;}
		.rangeRight {float: right; display: inline;}
		
		
		
		
		
/*______________________________  ______________________________*/

/*______________________________ SpryTabbedPanels  ______________________________*/

.TabbedPanels {
	margin: 0px;
	padding: 30px 0px 0px 30px;
	float: left;
	clear: none;
	width: 415px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	font-size: 8.5pt;
	font-family: Arial, sans-serif;
	color: #000;
}
.TabbedPanelsTabGroup {
	height: 25px;
	margin: 0px;
	padding: 0px;
}
.TabbedPanelsTab {
	position: relative;
	float: left;
	padding: 5px 0px 0px 0px;
	margin: 0px;
	font: 8.5pt Arial, sans-serif;
	background-image: url(../images-generic/tab1.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 69px;
	list-style: none;
	border-left: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	text-align: center;
	outline: none;
}
.TabbedPanelsTabHover {
	background-image: url(../images-generic/tab2.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 69px;
}
.TabbedPanelsTabSelected {
	background-image:url(../images-generic/tab2.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 69px;
}
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
	outline: none;
}
.TabbedPanelsContentGroup {
	clear: both;
	border: none;
	padding: 0px;
	margin: 0px;
}
.TabbedPanelsContent {
	padding: 4px;
	margin: 0;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 300px;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	padding: 0;
	margin: 0;
	
}
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	margin: 0;
	width: 30em;
	height: 20em;
}

/*______________________________ SpryTabbedPanels2  ______________________________*/

.TabbedPanels2 {
	margin: 10px 0 0 0;
	padding: 5px 0px 0px 30px;
	float: left;
	clear: none;
	width: 415px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	font-size: 8.5pt;
	font-family: Arial, sans-serif;
	color:#000;
}
.TabbedPanelsTabGroup2 {
	height: 25px;
	margin: 0px;
	padding: 0px;
}
.TabbedPanelsTab2 {
	position: relative;
	float: left;
	padding: 5px 0px 0px 0px;
	margin: 0px;
	font: 8.5pt Arial, sans-serif;
	background-image:url(../images-generic/tab5.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 83px;
	list-style: none;
	border: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	text-align:center;
	outline: none;
}
.TabbedPanelsTabHover2 {
	background-image:url(../images-generic/tab3.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 83px;
}
.TabbedPanelsTabSelected2 {
	background-image:url(../images-generic/tab4.gif);
	background-repeat: no-repeat;
	height: 20px;
	width: 83px;
}
.TabbedPanelsTab2 a {
	color: black;
	text-decoration: none;
	outline: none;
}
.TabbedPanelsContentGroup2 {
	clear: both;
	border: none;
	background: url(../images-generic/tabbed-panel2-bg.gif) bottom no-repeat transparent;
}
.TabbedPanelsContent2 {
	padding: 0;
}
.TabbedPanelsContentVisible2 {
}
.VTabbedPanels2 .TabbedPanelsTabGroup2 {
	float: left;
	width: 10em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	
}
.VTabbedPanels2 .TabbedPanelsTab2 {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}
.VTabbedPanels2 .TabbedPanelsTabSelected2 {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}
.VTabbedPanels2 .TabbedPanelsContentGroup2 {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

/*______________________________ SpryTabbedPanels3  ______________________________*/

.TabbedPanels3 {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 415px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	font-size: 8.5pt;
	font-family: Arial, sans-serif;
	color:#666;
}
.TabbedPanelsTabGroup3 {
	height: 25px;
	margin: 0px;
	padding: 0px;
	/*visibility: hidden;*/
	display: none;
}
.TabbedPanelsTab3 {
	position: relative;
	float: left;
	padding: 0px;
	margin: 0px;
	font: 8.5pt Arial, sans-serif;
	background: transparent;
	height: 20px;
	width: 40px;
	list-style: none;
	border: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	text-align:center;
	outline: none;
}
.TabbedPanelsTabHover3 {
	background: transparent;
	height: 20px;
	width: 40px;
}
.TabbedPanelsTabSelected3 {
	background: transparent;
	height: 20px;
	width: 40px;
}
.TabbedPanelsTab3 a {
	color: black;
	text-decoration: none;
	outline: none;
}
.TabbedPanelsContentGroup3 {
	clear: both;
	border: none;
	background: transparent;
	width: 415px;
	padding: 0;
	margin: 0;
}
.TabbedPanelsContent3 {
	padding: 0;
	display: none;
}
TabbedPanelsContent3FIRST {display: block;}
.TabbedPanelsContentVisible3 {
}





/* ---------------- PORTFOLIO --------------------- */



/*______________________________ DITCH THESE BITS WHEN PORTING OVER ______________________________*/

.stepcarousel1, .stepcarousel2, .stepcarousel3, .stepcarousel4, .stepcarousel5 {background: transparent;}


/*______________________________ GALLERY ELEMENTS ______________________________*/

.stepcarousel1 {
position: relative; /*leave this value alone*/
border: none;
overflow: hidden; /*leave this value alone*/
width: 323px; /*Width of Carousel Viewer itself*/
margin: 0 auto;
padding: 0;
height: 273px; /*Height should enough to fit largest content's height*/
background: transparent !important;
}

.stepcarousel1 .belt1 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel1 .panel1 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 9px 0 9px; /*margin around each panel*/
width: 305px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
background: transparent !important;
}

.stepcarousel1 .panel1 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 0; margin: 7px 0 1px 0;}

.stepcarousel1 .panel1 p {font-size: 95%; font-weight: normal; color: #888888; padding: 0; margin: 0;}

.mainLeftArrow{float: left; display: inline; padding: 0; margin: -162px 0 0 0;}
.mainRightArrow{float: right; display: inline; padding: 0; margin: -162px 0 0 0;}



.mainLeftArrow, .leftArrow, .mainRightArrow, .rightArrow, .bottomArrowRight, .bottomArrowLeft {cursor: pointer;}



.stepcarousel2, .stepcarousel3, .stepcarousel4, .stepcarousel5 {
position: relative; /*leave this value alone*/
border: none;
overflow: hidden !important; /*leave this value alone*/
width: 397px; /*Width of Carousel Viewer itself*/
margin: 90px auto 0 auto;
padding: 0;
top: 0px;
height: 415px; /*Height should enough to fit largest content's height*/
}

.stepcarousel2 .belt2, .stepcarousel3 .belt3, .stepcarousel4 .belt4, .stepcarousel5 .belt5 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel2 .panel2, .stepcarousel3 .panel3, .stepcarousel4 .panel4, .stepcarousel5 .panel5 {
float: left; /*leave this value alone*/
overflow: hidden !important; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 12px 0 12px; /*margin around each panel*/
width: 373px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.panel3, .panel4, .panel5 {top: 10px !important;}

.panel1, .panel2, .panel3, .panel4, .panel5 {background: url("../portfolio/images/loading.gif") center 130px no-repeat;}

/*#portfolio2 {border: 2px solid red;}*/

.stepcarousel2 .panel2 h1, .stepcarousel3 .panel3 h1, .stepcarousel4 .panel4 h1, .stepcarousel5 .panel5 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 0; margin: 5px 0 10px 0;}

.stepcarousel2 .panel2 p, .stepcarousel3 .panel3 p, .stepcarousel4 .panel4 p, .stepcarousel5 .panel5 p {font-size: 95%; font-weight: normal; color: #888888; padding: 0 15px; margin: 0;}

.leftArrow{float: left; display: inline; padding: 0; margin: -268px 0 0 0;}
.rightArrow{float: right; display: inline; padding: 0; margin: -268px 0 0 0;}


/*______________________________ LIGHTBOX ELEMENTS ______________________________*/

#lightbox {position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img {width: auto; height: auto;}
#lightbox a img {border: none; }

#outerImageContainer {position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer {padding: 10px;}

#loading {position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;}
#hoverNav {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;}
#imageContainer>#hoverNav {left: 0;}
#hoverNav a {outline: none;}

#prevLink, #nextLink {width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;}
#prevLink {left: 0; float: left;}
#nextLink {right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {background: url(../portfolio/images/prevlabel.gif) left 15% no-repeat;}
#nextLink:hover, #nextLink:visited:hover {background: url(../portfolio/images/nextlabel.gif) right 15% no-repeat;}

#imageDataContainer {font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%;}

#imageData {padding:0 10px; color: #666;}
#imageData #imageDetails {width: 70%; float: left; text-align: left;}	
#imageData #caption {font-weight: bold;}
#imageData #numberDisplay {display: block; clear: left; padding-bottom: 1.0em;}			
#imageData #bottomNavClose {width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay {position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;}



/* ----------------- BOTTOM RIGHT ------------------- */


/*______________________________ DITCH THESE BITS WHEN PORTING OVER ______________________________*/

.stepcarousel6, .stepcarousel7, .stepcarousel8, .stepcarousel9, .stepcarousel13 {background: transparent;}


/*______________________________ GALLERY ELEMENTS ______________________________*/

.stepcarousel6, .stepcarousel7, .stepcarousel8, .stepcarousel9, .stepcarousel13 {
position: relative; /*leave this value alone*/
border: none;
border-bottom: 1px #EEEEEE solid;
overflow: scroll; /*leave this value alone*/
width: 413px; /*Width of Carousel Viewer itself*/
margin: 0 auto 3px auto;
padding: 0;
height: 146px; /*Height should enough to fit largest content's height*/
}

.stepcarousel6 .belt6, .stepcarousel7 .belt7, .stepcarousel8 .belt8, .stepcarousel9 .belt9, .stepcarousel13 .belt13 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel6 .panel6 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0 0 20px 0; /*margin around each panel*/
padding: 0; /*padding around each panel*/
width: 413px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.stepcarousel7 .panel7, .stepcarousel8 .panel8, .stepcarousel9 .panel9 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
padding: 0; /*padding around each panel*/
width: 413px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.stepcarousel13 .panel13 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
padding: 8px 0 0 0; /*padding around each panel*/
width: 413px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.stepcarousel6 .panel6 img {padding: 0 20px 20px 20px; margin: 0; float: right; display: inline; border: none; outline: none;}

.stepcarousel7 .panel7 img, .stepcarousel8 .panel8 img, .stepcarousel9 .panel9 img, .stepcarousel13 .panel13 img {padding: 10px 0 0 10px; margin: 0; float: right; display: inline; border: none; outline: none;}

.bottomArrowLeft{float: right; display: inline; padding: 0; margin: 0 0 5px 0;}
.bottomArrowRight{float: right; display: inline; padding: 0; margin: 0 10px 5px 0;}




/* -------------------- ABOUT US -------------------------- */

/*______________________________ DITCH THESE BITS WHEN PORTING OVER ______________________________*/

.stepcarousel10 {background: transparent;}


/*______________________________ GALLERY ELEMENTS ______________________________*/

.stepcarousel10 {
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
margin: 0 auto;
padding: 0;
height: 313px; /*Height should enough to fit largest content's height*/
}

.stepcarousel10 .belt10 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel10 .panel10 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 4px 0 4px; /*margin around each panel*/
width: 305px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}


.stepcarousel10 .panel10 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 25px 0 10px 0; margin: 0;}

.stepcarousel10 .panel10 p {font-size: 95%; font-weight: normal; color: #000000; padding: 0; margin: 0;}

.aboutLeftArrow{float: left; display: inline; padding: 0; margin: -202px 0 0 0; cursor: pointer;}
.aboutRightArrow{float: right; display: inline; padding: 0; margin: -202px 0 0 0; cursor: pointer;}



/* --------------------- NEWS EXTRA --------------------- */

/*______________________________ DITCH THESE BITS WHEN PORTING OVER ______________________________*/

.stepcarousel11, .stepcarousel12 {background: transparent;}


/*______________________________ GALLERY ELEMENTS ______________________________*/

.stepcarousel11, .stepcarousel12 {
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
margin: 0 auto;
padding: 0;
height: 313px; /*Height should enough to fit largest content's height*/
}

.stepcarousel11 .belt11, .stepcarousel12 .belt12 {
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel11 .panel11, .stepcarousel12 .panel12 {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px 4px 0 4px; /*margin around each panel*/
width: 305px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
text-align: center;
}

.panel11, .panel12 {
margin: 10px auto;	
padding: 0 0 0 4px;
}

.stepcarousel11 .panel11 h1, .stepcarousel12 .panel12 h1 {font-size: 110%; font-weight: normal; color: #000000; padding: 25px 0 10px 0; margin: 0;}

.stepcarousel11 .panel11 p, .stepcarousel12 .panel12 p {font-size: 95%; font-weight: normal; color: #888888; padding: 0; margin: 0;}

.labfabLeftArrow{float: left; display: inline; padding: 0; margin: -202px 0 0 0;}
.labfabRightArrow{float: right; display: inline; padding: 0; margin: -202px 0 0 0;}