@charset "utf-8";
/* CSS Document */
 @import "global.css";

a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
	color:#909090;
}

	body{
	  font-family:Arial, Helvetica, sans-serif;
		background:#fff url('../img/background/homepageBackground.jpg') no-repeat scroll center top;
		text-align:center;
		behavior:url("csshover.htc");
	}
	
	#Page{
	  position:relative;
		width:960px;
		margin:27px auto 0;
		text-align:left;

	}
	
	#Page h1{
		/* image replacement */
		width:93px;
		height:0 !important;
		float:left;
		padding-top:66px;
		background:transparent url('../img/logos/xiocom-logo.gif') left top no-repeat;
		overflow:hidden;
		cursor:pointer;
		/* /image replacement */
		margin:0 0 36px;
	}
	
	#Page h1 span{
		display:none	
	}
	
	#HeaderOptions{
		float:right;
		width:350px;		
		margin-right:31px;
	}
	
		#LanguageOptions 
		{
			position:absolute;
			top:1px;
			right:32px;
		}
	
		#LanguageOptions, 
		#LanguageOptions ul
		{
			width:160px;
			margin:0;
			padding:0;
		}
		
			#LanguageOptions li{
			  margin:0;
				padding:0;
			  list-style-type:none;
				border-bottom:1px solid #e26b62;
				text-align:right;
				
			}	
			
			#LanguageOptions a{
			 display:block;
				background-color:#d52b1e;
				color:#fff;		
				width:141px;
				height:15px;
				padding-top:2px;
				padding-right:19px;
				font-size:10px;
			}
			
			#LanguageOptions a:hover{
				background-color:#f1f1f1;
				color:#d52b1e;	
			}	
			
	#LanguageOptions #LanguageChoices{
		display:none;
	}			
	#LanguageOptions:hover #LanguageChoices{
		display:block;
		z-index:10;
	}

		
		#UtilityNav{
		  clear:right;
			float:right;
			height:10px;
			margin:27px 32px 0;
			padding:0;
		}
		
		#UtilityNav li{
		  height:10px;
			float:left;
			list-style-type:none;
			margin-right:5px;
			border-right:2px solid #c6cce0;
			padding-right:5px;
		}
	  
		#UtilityNav li.lastChild{
			border-right-width:0;
			padding-right:0;
		}
		
		#UtilityNav a{
			color:#fff;
			font-size:11px;
			display:block;
			margin-top:-3px;
			font-family:Arial, Helvetica, sans-serif;
		}
	
	
	#Branding{
		clear:both;
		margin-top:42px;
	}
	
	#Branding h2{
	  margin:0;
	  color:#fdc82f;
		font-size:36px;
		/* image replacement */
		width:476px;
		height:0 !important;
		padding-top:35px;
		background:transparent url('../img/branding/brandingHeadline4.gif') left top no-repeat;
		overflow:hidden;
		/* /image replacement */
	}
	
	#Branding h2 span{
		display:none	
	}
	
	#Branding p{
	  width:410px;
		margin:4px 0 0;
	  color:#fff;
		font-size:24px;
		/* image replacement */
		width:424px;
		height:0 !important;
		padding-top:46px;
		background:transparent url('../img/branding/brandingCopy2.gif') left top no-repeat;
		overflow:hidden;
		/* /image replacement */		
	}
	
	#Branding p span{
		display:none	
	}
	
	#Branding a{
	  display:block;
		margin-top:36px;
		height:26px;
	}
	
	
	#Branding a#SeeHowLink img#SeeHowImg{
		display:block;
	}
	#Branding a#SeeHowLink img#SeeHowImgOver{
		display:none;
	}
	#Branding a#SeeHowLink:hover img#SeeHowImgOver{
		display:block;
	}
	#Branding a#SeeHowLink:hover img#SeeHowImg{
		display:none;
	}

	#Navigation{
		margin-top:97px;
	}
	
/* 1st Tier */	
	#Navigation ul{
		margin:0 0 0 -16px;
		padding:0;
	}	
	
	#Navigation li{
	  list-style-type:none;
		float:left;
		background:transparent url('../img/nav/navDivider.gif') right 5px no-repeat;
		position:relative;
	}
		#Navigation li:hover{
			margin-left:-1px;
			padding-left:1px;
			background:transparent url('../img/nav/navOverLastChildBG.gif') right top repeat;
		}			
		#Navigation li.lastChild{
			background-image:none;
		}
		#Navigation li.lastChild:hover{
			background:transparent url('../img/nav/navOverLastChildBG.gif') right top repeat;
		}	
	
	#Navigation li a{
	  display:block;
		padding:8px 17px 11px;
		color:#3f320c;
		font-weight:bold;
		font-size:9px;
		
	}	
		#Navigation a:hover{
			text-decoration:none;
		}
/* /1st Tier */
	
	
	
/* 2nd Tier */
	#Navigation ul ul {
		margin:0;
		padding:0;	
		display:none;
	}

	#Navigation li:hover ul {
		display:block;
	}
	
	#Navigation li li:hover{
			background-image:none;
	}
	
	#Navigation #CompanyInfoSub,
	#Navigation #XiocomDifferenceSub,
	#Navigation #OurServicesSub,
	#Navigation #TechnologySub,
	#Navigation #PartnerWithUsSub,
	#Navigation #SupportSub
	{
		position:absolute;
		top:29px;
		left:0;
	}		
			
	#Navigation #CompanyInfoSub li,
	#Navigation #XiocomDifferenceSub li,
	#Navigation #OurServicesSub li,
	#Navigation #TechnologySub li,
	#Navigation #PartnerWithUsSub li,
	#Navigation #SupportSub li
	{
		float:none;
	}			

	#Navigation li li a{
		display:block;
		background-color:#fdc82f;
		border-top:1px solid #a2883c;
		color:#3f320c;		
		width:150px;
		height:15px;
		padding:7px 0 7px 18px; 
		font-size:9px;
	}
		#Navigation li li a:hover{
			background:#fff url('../img/nav/navArrow.gif') 6px 10px no-repeat;
			color:#000;	
		}			
		#Navigation li li.lastChild a{
			border-bottom:1px solid #a0863a;
		}
/* /2nd Tier */
	
	
/* 3rd Tier */	
	#Navigation li.sub div{
				position:absolute;
				top:0;
				left:160px;
	}
	#Navigation li li.sub div {
		background:transparent url('../img/nav/subLeftSide.png') 4px top repeat-y;
	}

	#Navigation li li.sub ul {
		margin-left:8px;
	}		

	#Navigation ul ul li.sub ul {
		display:none;
	}
		#Navigation ul ul li.sub:hover ul {
			display:block;
		}
	
	#Navigation li li li a{
		border-top:1px solid #989898;
	}
		#Navigation li li.lastChild li a{
			border-bottom-width:0;
		}
		#Navigation li li li.lastChild a{
			border-bottom:1px solid #95938b;
		}
	
	  #Navigation li li.sub li a{
			background-color:#f1f1f1;
			background-image:none;
		}
			#Navigation li li.sub li a:hover{
				background:#b1b1b0 url('../img/nav/navSubSubArrow.gif') 6px 10px no-repeat;
				color:#000;	
			}	
		#Navigation li li.sub li a,
		#Navigation li li.sub li a:hover{
			width:210px;	
		}		
/* /3rd Tier */

	
/* Navigation Search */

	#Navigation form{
	  float:right;
		margin-right:32px;
		| margin-right:18px;
	}
	
	#Navigation input{
	  width:187px;
	  margin:4px 3px 0 0;
		float:left;
		color:#666;
		font-size:10px;	
	}
	#Navigation a#SearchLink{
	  margin-top:5px;
		float:left;
	}	
	#Navigation a#SearchLink  img#SearchImg{
		display:block;
	}
	#Navigation a#SearchLink  img#SearchImgOver{
		display:none;
	}
	#Navigation a#SearchLink:hover img#SearchImgOver{
		display:block;
	}
	#Navigation a#SearchLink:hover img#SearchImg{
		display:none;
	}	
/* /Navigation Search */


		
	
	#Callouts{
	  margin-top:0;
		padding-top:32px;
		clear:both;
	}
	
	#Callouts li{
	  list-style-type:none;
		float:left;
		background:transparent url('../img/callouts/calloutDivider.gif') right top no-repeat;
		padding:0 40px 0 36px;
	}	
	#Callouts li.firstChild{	
	  padding-left:0;
	}
	#Callouts li.lastChild{
    background-image:none;
	}		
	
	#Callouts h3{
		color:#fff;
		margin:0;
		padding:0;	
		font-size:20px;
		font-weight:bold;
	}
	
	#Callouts p{
	  width:150px;
		margin-top:6px;
		color:#fff;	
		font-size:11px;
		font-weight:normal;
	}
	
	#Callouts a{
	  display:block;
		margin-top:6px;
		color:#d52b1e;	
		font-size:10px;
		font-weight:normal;
		font-variant:small-caps;
	}
	
	#Callouts a:hover{
		color:#909090;
	}			
	
	.gradientBox {
	  float:right;
		background:transparent url('../img/callouts/gradientBoxBottom.gif') left bottom no-repeat;
		margin:-21px 32px 0 0;
		padding:0;
		width:248px;
	}	

	.gradientBoxInner {
		background:transparent url('../img/callouts/gradientBoxTop.gif') left top no-repeat;
		margin:0;
		padding:0;
		width:248px;
	}		
	
	.gradientBox h3{
	  float:left;
		margin:10px 0 7px 15px;
		| margin-left:7px; 
	  color:#000;
		font-size:16px;
		/* image replacement */
		width:112px;
		height:0 !important;
		padding-top:13px;
		background:transparent url('../img/callouts/xiocomnews.jpg') left top no-repeat;
		overflow:hidden;
		/* /image replacement */		
		}
		
	.gradientBox h3 span{
		display:none
	}		
		
	.gradientBox a.moreLink{
	  margin:10px 15px 0 0;
		float:right;
	}	
		
	.gradientBox a{
		margin:0;
		color:#d52b1e;	
		font-size:10px;
		font-weight:bold;
	}
		
	.gradientBox a:hover{
		color:#909090;
	}		
		
	.gradientBox p{
	  clear:both;
	  width:224px;
		margin:0 0 5px 15px;
		border-top:1px solid #dadcde;
		border-bottom:1px solid #dadcde;
		padding:7px 0;
		color:#000;	
		font-size:11px;
		font-weight:normal;
		
	}
	
	.gradientBox p strong{
		font-weight:bold;
		display:block;
	}
		
	.gradientBox ul{
		margin-bottom:6px;
	}		
		
	.gradientBox li{
		margin-left:15px;
		padding-left:20px;
	}
	
	.gradientBox li.iconRSS{
		background:transparent url('../img/icons/iconRSS.gif') left 4px no-repeat;
	}
	
	.gradientBox li.iconVideo{
		background:transparent url('../img/icons/iconVideo.gif') left 4px no-repeat;
	}	
		
	#Footer{
	clear:both;
	padding-top:36px;
	}	
	
	#Footer p{
		margin:0 0 -2px 0;
		padding:22px 0 0;
		color:#666666;
		font-size:11px;
		font-weight:normal;
	}
	
	#Footer ul{
	  padding-bottom:3px;
	}
	
	#Footer li{
	  float:left;
		margin-right:7px;
		background:transparent url('../img/footer/footerNavDivider.gif') right 5px no-repeat;
	  padding-right:7px;
		list-style-type:none;
	}
	
	#Footer li.lastChild{
	  background-image:none;
	}	
	
	#Footer a{
		color:#666666;
		font-size:11px;
		font-weight:normal;
	}
	
	#Footer a:hover{
		color:#ab424f;
	}
		
	#FeedbackLink{
		float:right;
		margin-right:32px;
		padding:22px 0 0;
	}
	#Footer a#FeedbackLink  img#FeedbackImg{
		display:block;
	}
	#Footer a#FeedbackLink  img#FeedbackImgOver{
		display:none;
	}
	#Footer a#FeedbackLink:hover img#FeedbackImgOver{
		display:block;
	}
	#Footer a#FeedbackLink:hover img#FeedbackImg{
		display:none;
	}	
		
	/*---  IE HACKS ---*/
	
	#Header h1{	
		| height:66px;
  }
	#LanguageOptions {
		| padding-right:42px;	
	}
	
	#LanguageOptions a{
		| width:160px;
		| height:17px;
	}
	
	
	#Branding{
		| margin-top:0;
	}
	
	#Navigation ul{
		| margin:0;
	}	
	
  #Navigation li a{
		| padding-top:6px;
	}	
	
	#Callouts{
	  | margin-top:0;
	}
	
	.gradientBox h3{
		| margin-left:7px;
		| height:13px;
	}
	
	.gradientBox a.moreLink{
	  | margin-right:0 7px 0 0;
	}
			
	.gradientBox ul{
		| margin-bottom:10px;

	}		
	
  a .defaultImage{
		display:inline;
	}
	a .hoverImage{
		display:none;	
	}
  a:hover .defaultImage{
		display:none;
	}
	a:hover .hoverImage{
		display:inline;	
	}	
	
	/* clearfix */
	.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}