.abs { position: absolute; width: auto; height: auto; }

/* if the background of the hero shot contents is not white (most likely blue) - we need a cap to emphasize the downard white arrow */
.bgContainer .blueBGnav {
  width: 980px;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  background: transparent url(/images/_template/3.4_980-template_trans.png) no-repeat left -1px !important; 
  *background: transparent url(/images/_template/3.4_980-template_trans-ie.png) no-repeat left -1px !important; 
  background: transparent url(/images/_template/3.4_980-template_trans-ie.png) no-repeat left -1px\ !important; 
}
/* the text that goes alongside the navigation controls */
.heroFooter {
  width: 980px;
  height: 30px;
  position: absolute;
  left: 0; 
  bottom: 11px;
}
.heroFooter a, .heroFooter p, .heroFooter span, .heroFooter small { position: absolute; bottom: 0; }
.heroFooter small { bottom: 2px; }
.heroFooter a.more { background-position: right 4px !important; }
.heroFooter span a, .heroFooter span a.more, .heroFooter small a, .heroFooter small a.more { position: relative; background-position: right 1px !important; }
/* STATIC items that will be present through all cycles go in .bgContainer */
.cycleContainer .bgContainer {
  display: block !important;
  height: 321px !important;  /* 341px */
  width: 900px !important;   /* 980px */
  padding: 20px 50px 1px 30px; /* 1px bottom padding necessary for the blue nav */
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 2; 
	background: transparent url(/images/_template/hero_wss_blue-bg-2010-square.jpg) no-repeat left top; 
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
  }
/* all elements of navigation use the same image */
.cycleContainer, .cycleContainer .controls.thumbnail ul li, .cycleContainer .controls.thumbnail a {
  background: transparent url(/images/_template/_cycle/cycle-bg.png) no-repeat left top;
}
.cycleContainer { background-repeat: repeat-x; background-position: left bottom; }
.cycleContainer.light { background-position: left -84px; color: inherit !important; }
.cycleContainer { 
    width: 980px;
    height: 383px !important;
    padding: 0;
    left: -55px;
    top: -36px;
}
.cycleContainer.noControl { background-image: none !important; }
.cycleContainer, .cycleContainer .cycle, .cycleContainer .cycle .cycleItem { position: relative; overflow: hidden !important; z-index: 4; }
.cycleContainer .cycle { width: 980px; height: 341px; }
/* so the static heroshot does not shift when js is disabled 
.cycleContainer .cycle .cycleItem.hero { position: relative; left: 0; top: 0 !important; }*/
/* full heroshot padding */
.cycleContainer.fullHero .cycle .cycleItem { padding: 36px 0 0 55px; }	
/* default cycle control buttons */
.cycleContainer .controls { height: 41px; width: auto; }
.cycleContainer .controls, .cycleContainer .controls.thumbnail { 
    border-left: 1px solid #cecece;
    position: absolute; 
    left: 265px; 
    bottom: 0; 
    z-index: 997; 
    margin-bottom: 0; 
}

/* if the cycle nav needs to be on the right */
.cycleContainer.navRight .controls { left: auto; right: 10px !important; }
.navRight .bgContainer .blueBGnav { background-position: 400px -1px !important; } /* move the white stripe emphasis all the way to hte right */
.cycleContainer .controls { background: none; padding: 0; border-left: none; }
.cycleContainer .controls.thumbnail ul, .cycleContainer .controls.thumbnail ul li { list-style-type: none; padding: 0; margin: 0; }
.cycleContainer .controls.thumbnail ul li, .cycleContainer .controls a, .cycleContainer .controls.thumbnail a { 
	position: relative;
	display: block;
	float: left;
	height: 29px;
	width: 48px;
	margin-right: 8px;
	text-align: center;
	font-weight: bold;
	padding-top: 14px;
	border: none;
	z-index: 999;
}
/* blue arrow w/default control button to match blue hero bg's */
.cycleContainer.blueActive .controls a {
    background-position: transparent url(/images/_template/_cycle/cycle-pager-control-blue.png) no-repeat scroll left bottom; 
}
.cycleContainer.blueActive .controls.thumbnail a, .cycleContainer.blueActive.light .controls.thumbnail a:hover { 
    background-position: left -42px;
}
#contentMain .cycleContainer .controls.thumbnail ul li, .cycleContainer .controls.thumbnail a, .cycleContainer.light .controls.thumbnail a:hover { 
    height: 42px;
    width: 60px; 
    padding: 0 !important; 
    margin: 0 !important;  
}
.cycleContainer.light .controls a, .cycleContainer.light .controls.thumbnail a, .cycleContainer .controls a:hover, .cycleContainer .controls.thumbnail a:hover { 
    background-position: right top; 
    text-decoration: none !important; 
}
.cycleContainer .controls.thumbnail a.activeSlide, .cycleContainer .cycle .controls.thumbnail a:active,
.controls.thumbnail a.activeSlide:hover, .cycleContainer.light .controls.thumbnail a.activeSlide, 
.cycleContainer.light .cycle .controls.thumbnail a:active {
    background-position: -62px top;
    width: 60px !important;
}    
.cycleContainer.blueActive.light { background-position: -62px -42px; width: 60px !important; }
#heroDivider { top: -46px; margin-bottom: -46px; *margin-bottom: -45px !important; margin-bottom: -45px\ !important; }
/* the icons themselves are within spans */
.cycleContainer .controls.thumbnail a span {
  display: block;
  width: 48px;
  height: 48px;
  padding-right: 6px;
  display: block;
  float: left;
  background: url('/images/_icons/_large/_48/ico_lg.png') no-repeat left top;
  text-indent: -999em; /* hide the actual text, show only the bg */
}

.controls.thumbnail a span.vault       { background-position: left top;    }
.controls.thumbnail a span.backup      { background-position: left -48px;  }
.controls.thumbnail a span.backupX     { background-position: left -96px;  }
.controls.thumbnail a span.billboard   { background-position: left -144px; }
.controls.thumbnail a span.blackberry  { background-position: left -192px; }
.controls.thumbnail a span.blackberryX { background-position: left -240px; }
.controls.thumbnail a span.book        { background-position: left -288px; }
.controls.thumbnail a span.briefcaseM  { background-position: left -336px; }
.controls.thumbnail a span.briefcase   { background-position: left -384px; }
.controls.thumbnail a span.briefcaseX  { background-position: left -432px; }
.controls.thumbnail a span.bullseye    { background-position: left -480px; }
.controls.thumbnail a span.calc        { background-position: left -528px; }
.controls.thumbnail a span.calcX       { background-position: left -576px; }
.controls.thumbnail a span.cal         { background-position: left -624px; }
.controls.thumbnail a span.paint       { background-position: left -672px; }
.controls.thumbnail a span.compass     { background-position: left -720px; }
.controls.thumbnail a span.team        { background-position: left -768px; }
.controls.thumbnail a span.pim         { background-position: left -816px; }
.controls.thumbnail a span.pimX        { background-position: left -864px; }
.controls.thumbnail a span.fileCab     { background-position: left -912px; }
.controls.thumbnail a span.fileCabX    { background-position: left -960px; }
.controls.thumbnail a span.easel       { background-position: left -1008px; }
.controls.thumbnail a span.easelX      { background-position: left -1056px; }
.controls.thumbnail a span.inbox       { background-position: left -1104px; }
.controls.thumbnail a span.inboxX      { background-position: left -1152px; }
.controls.thumbnail a span.lamp        { background-position: left -1200px; }
.controls.thumbnail a span.lampX       { background-position: left -1248px; }
.controls.thumbnail a span.lcd         { background-position: left -1296px; }
.controls.thumbnail a span.lcdX        { background-position: left -1344px; }
.controls.thumbnail a span.palette     { background-position: left -1392px; }
.controls.thumbnail a span.paletteX    { background-position: left -1440px; }
.controls.thumbnail a span.paperClip   { background-position: left -1488px; }
.controls.thumbnail a span.phone       { background-position: left -1536px; }
.controls.thumbnail a span.phoneX      { background-position: left -1584px; }
.controls.thumbnail a span.swissArmy   { background-position: left -1632px; }
.controls.thumbnail a span.publish     { background-position: left -1680px; }
.controls.thumbnail a span.publishX    { background-position: left -1728px; }
.controls.thumbnail a span.dbo         { background-position: left -1776px; }
.controls.thumbnail a span.dboX        { background-position: left -1824px; }
.controls.thumbnail a span.notepad     { background-position: left -1872px; }
.controls.thumbnail a span.group       { background-position: left -1920px; }
.controls.thumbnail a span.groupX      { background-position: left -1968px; }

.cycle { display: none; }  

/* RELAX concept */
#relax 
{
  background: transparent url(/images/_template/hero_relax-2010.jpg) !important; 
  overflow: visible !important;
}
#relaxArm 
{
  right: -20px; 
  bottom: 0; 
  width: 20px; 
  height: 139px; 
  z-index: 998; 
  background: transparent url(/images/_template/hero_relax-side.jpg) right top no-repeat;
}
/* RELAX concept - IE only */
.ie #relax 
{
  background: transparent url(/images/_template/hero_relax-2010_IE.jpg) !important; 
}
.ie #relaxArm 
{
  background: transparent url(/images/_template/hero_relax-side.png) right bottom no-repeat;
}
/* RELAX concept - IE only */