html, body {
  height: 100%;
  width: 100%;
}

html {
  background: transparent url(images/footerbg.jpg) repeat-x;
  background-attachment:fixed;
  background-position: bottom left;
  background-color: #000000;
  overflow: auto;
}

body {
  background: transparent url(images/bg_ref.jpg) no-repeat;
  background-attachment:fixed;
  background-position: top left;
  margin: 0px auto;
  padding: 0px;
  position: relative;
  font-family:Verdana;
  z-index: 0;
}

#allcontent {
 min-height:420px;
 height:auto !important;
 text-align:left;
 position:relative;
 width: 1040px;
 margin: 0 auto;
 margin-top: 35px;
 overflow: hidden;
 z-index:0;
}

#content {
 width: 339px;
 margin-top: 20px;
 position:relative;
 float:left; z-index:0;
}

#footer {
 height: 60px;
 margin: 0 auto;
 padding: 0px;
 text-align: left;
 clear:both;
 padding-bottom: 40px;
 width: 1040px;
 color: #bdbdbd;
 font-size: 11px;
 margin-top: 30px;
}

#silverlightRibbonReplacement {
 margin: 0 auto;
 padding: 0px;
 text-align: left;
 clear:both;
 width: 1040px;
 color: #bdbdbd;
 font-size: 11px;
 z-index:0;
}

#footer ul {
 margin-left: 9px;
 padding-left: 0px;
}

#footer li {
 list-style: none; 
 color: #bdbdbd;
 font-size: 11px;
 display: inline;
 padding: 0px 2px;
}
#customercontent
{
 font-family:Verdana;
 position:relative;
 float:left;
 width: 440px;
 margin-top: 20px;
 margin-left: 9px;
}
/*----------------------------------------------page.html---------------------------------------------------*/
#customercontent ul
{

 color: #ffffff;
 font-size: 11px;
  margin-left:15px;
 padding: 0px 2px;
}
#customercontent p {
 color: white;
 font-size: 11px;
margin-top:5px;
margin-bottom:11px;
}

#customercontent img {
 margin-top: 2px;
}



#contentpage2 {
 font-family:Verdana;
 position:relative;
 float:left;
 z-index:10;
 width: 327px;
 margin-top: 20px;
 margin-left: 12px; z-index:0;
}

#contentpage2 img {
 margin: -5px;
}

#contentpage2 p {
 color: white;
 font-size: 11px;
 margin-bottom: 20px;
}

#contentpage2 li {
 color: white;
 font-size: 11px;
 list-style-type:none;
}

#contentpage2 li a{
 color:#59ABFD;
 font-size: 11px;
}

#contentpage4 {
 font-family:Verdana;
 position:relative;
 float:left;
 width: 327px;
 margin-top: 20px;
 margin-left: 12px; z-index:0;
}

#contentpage4 img {
 margin: -5px; 
}

#contentpage4 p {
 color: white;
 font-size: 11px;
 margin-bottom: 20px;
}

#contentpage4 li {
 color: white;
 font-size: 11px;
 list-style-type:none;
}

#contentpage4 li a{
 color:#59ABFD;
 font-size: 11px;
}

#contentpage {
 font-family:Verdana;
 position:relative;
 float:left;
 width: 440px;
 margin-top: 20px;
 margin-left: 9px;
}

#contentpage img {
 margin: -5px; 
}

#contentpage p {
 color: white;
 font-size: 11px;
 margin-bottom: 30px;
}

p {
color: #FFFFFF;
}

#columnRight {
 font-family: Verdana;
 position: relative;
 float: left;
 width: 500px;
 height: 400px;
 padding: 20px;
 padding-top: 50px;
 text-align: right;
}

#columnRight3 {
 font-family: Verdana;
 position: relative;
 float: left;
 width: 500px;
 padding: 20px;
 padding-top: 50px;
 text-align: right;
}


#columnRight h2 {
 color: #63a7f8;
 font-size: 15px;
}

#columnRight p {
 color: white;
 font-size: 11px;
}

#contentpage3 {
 font-family:Verdana;
 position:relative;
 float: left;
 width: 825px;
 margin-left: 4px; z-index:0;
}

#contentpage3 p {
 color: white;
 font-size: 11px;
 margin-bottom: 30px;
}

#columnRight2 {
 font-family:Verdana;
 position: relative;
 float: right;
 width: 440px;
 padding-left: 78px;
}

#columnRight2 h2 {
 color: #63a7f8;
 font-size: 15px;
}

#columnRight2 p {
 color: white;
 font-size: 11px;
}

#columnRight4 {
 font-family: Verdana;
 position: relative;
 float: left;
 width: 500px;
 height: 490px;
 padding: 20px;
 padding-top: 50px;
 text-align: right;
}

#contacts {
	clear: both;
}

#microsoftcontacts {
	width: 300px;
	height: 100px;
	margin-top: 0px;
	padding: 10px;
	float: left;
	margin-left: 20px;
}

#ciscocontacts {
	width: 300px;
	height: 100px;
	margin-top: 10px;
	padding: 0px;
	float: left;
	margin-left: 12px;
}

#learn {
	width: 256px;
	height: 100px;
	margin-top: 0px;
	padding: 10px;
	float: left;
}

#learn h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:12px;
	font-weight: bold;
	margin-top: 5px;
}

#learn p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;	
}

#learn2 {
	width: 190px;
	height: 136px;
	margin-top: 0px;
	padding: 10px 0px 10px 60px;
	float: left;
}

#learn2 h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:14px;
	font-weight: bold;
	margin-top: 5px;
	margin-left: -3px;	
}

#learn2 p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;
	margin-left: -3px;	
}

#learn2 a {
	color: #FFFFFF;
}

#download {
	width: 256px;
	height: 79px;
	margin-top: 0px;
	padding: 10px;
	float: left;
	margin-left: -13px;
}

#download h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:14px;
	font-weight: bold;
	margin-top: 5px;
}

#download p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;
}

#download2 {
	width: 190px;
	height: 136px;
	margin-top: 0px;
	padding: 10px 1px 10px 1px;
	float: left;
}

#download2 h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:14px;
	font-weight: bold;
	margin-top: 5px;
	margin-left: -3px;
}

#download2 p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;
	margin-left: -3px;
}

#download2 a {
	color: #FFFFFF;
}

#enjoy {
	background:url(images/enjoy.png) no-repeat;
	width: 256px;
	height: 79px;
	margin-top: 0px;
	padding: 10px;
	float:left;
}

#enjoy h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:14px;
	font-weight: bold;
	margin-top: 5px;
}

#enjoy p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;
}

#enjoy2 {
	width: 190px;
	height: 136px;
	margin-top: 0px;
	padding: 10px 0px 10px 0px;
	float:left;
}

#enjoy2 h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:14px;
	font-weight: bold;
	margin-top: 5px;
	margin-left: -3px;	
}

#enjoy2 p {
	color:#000000;
	font-family:Verdana;
	font-size:11px;
	margin-top: -5px;
	margin-left: -3px;
}

#enjoy a {
	color: #FFFFFF;
}

#enjoy2 a {
	color: #FFFFFF;
}

#PreviewBar {
 font-family:Verdana;
 margin-top: 18px;
 margin-left:30px;
 position:relative;
 float:left;
 width: 420px;
 padding: 10px;
}

#PreviewBar h2 {
 color:#63a7f8;
 font-family:Verdana;
 font-size:11px;
 font-weight:normal;
 margin-top: -10px;
 position:relative;
}

/*  PreviewBar on Customer pages should align to the top. Making the anchors 
    around the side rollover images into blocks.
*/
#PreviewBar.customer { margin-top: 0px; }
#PreviewBar.customer a { display: block; }


.preview {
 width: 420px;
 margin-top: 35px;
 position:relative;
}

.preview img {
 float: left;
 margin-right:20px;
}

.preview h1 {
 color:#63a7f8;
 font-family:Verdana;
 font-size:17px;
 margin-top: 0px;
}

.preview p {
 color:#FFFFFF;
 font-family:Verdana;
 font-size:11px;
 margin-top: -5px;
}

#contentnews {

 font-family:Verdana;
 position:relative;
 float:left;
 width: 900px;
 margin-left: 8px;
}

#contentnews img {
 margin: -5px; 
}

#contentnews p {
 color: white;
 font-size: 11px;
 margin-bottom: 20px;
}

#contentnews li {
 color: white;
 font-size: 11px;
 list-style-type:none;
}

#contentnews li a{
 color:#59ABFD;
 font-size: 11px;
}

a {
 color:#59ABFD;
}

#videoselect {
 float: right;
 clear: both;
 margin-right: 30px;
 margin-top: 25px;
}

#videoselect p {
 color: white;
 font-size: 12px;

}

#contentvideos span {
 margin-bottom: 70px;
}

#videoselect h2 {
 color: #63a7f8;
 font-size: 12px;
 margin-bottom: 25px;
}

.previewbg {
 background: url(images/seperator.png) no-repeat 0% 100%;
 padding-left: 30px;
}


#silverlightvideo {
 margin-top: 30px; 
}

#videoselect tr {
 padding: 10px;
}

h3 {
 font-family: arial;
 font-size: 20px;
 font-weight: lighter;
 color: #63a7f8;
}

#scroll {
	margin: 0px auto;
	height: 350px;
	/* overflow-y: hidden */;
	position: relative;
	/* padding-right: 14px */;
}

#scroll #videolist {
	position: relative;
	-moz-user-select: none;
}

#scroll #bar {
	position: absolute;
	right: 0px;
	width: 14px;
	height: 100%;
	background: transparent url(images/scrollbar.png) 50% 0% repeat-y;
}

#scroll #bar #icon {
	background: transparent url(images/scroll.png) 50% 50% no-repeat;
	position: absolute;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.subh {
  font-weight: bold;
  color: #63acfd;
  font-size: 12px;
}

.subh2 {
  font-weight: bold;
  color: #59ABFD;
  font-size: 12px;
}


/* ----------------------------------------------------------------------------------------------------------- */

ul.buttons { 
    position: relative;   /* Explicitly declared the position so the sub-nav has a reference point. */
    margin: 0;     /* Zero out the default UL margin. */
    padding: 0;    /* Zero out the default UL padding. */
    width: 622px;  /* Declared a width for the heck of it. */
}

ul.buttons li {
 display: inline; 
 text-decoration: none;
 white-space: nowrap;
}
 
#navbar {
	height: 25px;
	margin-top: 20px;
/* No longer need a margin-left for the container div.
	margin-left: -40px;
*/
position: relative;  /* Explicitly declared the position so the sub-nav has a reference point in case it ignores the UL. */
width: 625px;  /* Set a width for the heck of it, slightly wider than the UL. */
}

img {
 border: 0 none;  /* The width of the border is more important than the type. This was actually getting used. */
}

#content img {
 margin: -5px; 
}


h1 {
	font-family:Verdana;
 font-size: 23px;
 font-weight: lighter;
 color: #63a7f8;
 margin-top: 15px;
 margin-bottom: 5px;
}

span {
 color: white;
 font-weight: lighter;
 font-family:Verdana;
}

#content h1 {
 margin-left: 12px;
}
#content p {
 color: white;
 font-family:Verdana;
 font-size: 11px;
 margin-left: 12px;
 width: auto;
}

a.button {
	display: block;
	height: 25px;
    width: 103px;
	float: left;
	text-decoration:none;
}

a.button img {
	margin-top: 1px;

}

a.button.home {
	background: transparent url(images/homeButton.png) no-repeat 50% 50%;
}

a.button.home:hover {
	background: transparent url(images/homeOn.png) no-repeat 50% 50%;
}

a.button.solution {
	background: transparent url(images/solutionButton.png) no-repeat 50% 50%;
}

a.button.solution:hover {
	background: transparent url(images/solutionOn.png) no-repeat 50% 50%;
}

a.button.customers {
	background: transparent url(images/customersButton.png) no-repeat 50% 50%;
}

a.button.customers:hover {
	background: transparent url(images/customersOn.png) no-repeat 50% 50%;
}

a.button.events {
	background: transparent url(images/eventsButton.png) no-repeat 50% 50%;
}

a.button.events:hover {
	background: transparent url(images/eventsOn.png) no-repeat 50% 50%;
}

a.button.news {
	background: transparent url(images/newsButton.png) no-repeat 50% 50%;
}

a.button.news:hover {
	background: transparent url(images/newsOn.png) no-repeat 50% 50%;
}

a.button.contact {
	background: transparent url(images/contactButton.png) no-repeat 50% 50%;
}

a.button.contact:hover {
	background: transparent url(images/contactOn.png) no-repeat 50% 50%;
}

/*---------------------------------SilverLight/Ribbon----------------------------------------------------*/

#silverlightControlHostMap {
  position:relative;
  width: 700px;
  height: 350px;
  float:left;
  padding-bottom: 0px;
  z-index:0
}

#silverlightControlHostMap2 {
  position:relative;
  width: 680px;
  height: 350px;
  float:left;
  padding-bottom: 0px;
  color: #bdbdbd;
  font-size: 11px;
    z-index:0
}

#silverlightControlHostRibbon {
  position:relative;
  width: 100%;
  float:left;
  z-index:0;

  
}

#contact {
	width: 550px;
}

#contact h1 {
	color:#FFFFFF;
	font-family:Verdana;
	font-size:12px;
	font-weight: bold;
	margin-top: 5px;
}

#articles li {
	padding-top: 10px;
	margin-left: -39px;
}

/* SUB-NAVIGATION MENU
***************************************************************************** */
#navbar
{
	z-index:30;
}
#navbar ul li ul { 
	display: none;
	position: absolute;
	top: 25px; /* The main nav is 25px so move sub-nav down by that amount. */
	left: 0px; /* Set the left to zero since that is where the main nav starts too. */
	height: 75px;  /* The height is set to the same height as the background image. */
	width: 716px;  /* The width is set to the same width as the background image. */
	line-height: 20px;
	list-style: none; 
	text-align: left;   /* The reason it was really hard to see before was the opacity was too light. */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;
	margin: 0;          /* Zero out the default margin and padding, but add a little */
	padding: 5px 0 0;   /* padding-top to the sub-UL to move it down a little bit. */
	background: #000000 url(images/bg-subnav.gif) no-repeat 100% 50%; 
	z-index: 30;
}

/* lists nested under hovered list items; sfHover added for Superfish.  */
#navbar ul li:hover ul, #nav li.sfHover ul, li.over ul { display: block; }
#navbar ul li ul li { clear: both; display: block; width: 200px; font-size: 100%; }
#navbar ul li ul li a { padding-left: 0; padding-right: 9px; color: #ffffff; text-decoration: none; border-right: 0 none; }
#navbar ul li ul li a:hover, #nav li ul li a.selected { text-decoration: underline; }

/* Each subnav gets a different offset to line itself up under their main nav parent. 
   Check the IE css files for the different measurements. */
/* Corrected a typo, previously targeting an id not a class. */
#navbar ul li .customersub li  { margin-left: 217px; font-size: 10px; }
#navbar ul li .customersub li  a:hover { color: #62abfd;text-decoration:none;}