/*----------------------------
  Note: These styles only 
  only apply to the mainpage
  of the website.
------------------------------*/

#Content
	{
		background: url('../images/content-bg-main.gif') repeat-y 0 10px;
		vertical-align:top;
	}

#ContentBody
	{
		position: relative;	
		clear: both;
		margin: 0;
		padding: 1em 0;
		float: none !important;
		height: auto;
		min-height: 500px;
		line-height: 1.7em;	
		width: auto;
	}

#ContentBody .inside 
	{ 
		padding:0;
		margin:0 15px;
		right: 0;
		float: none;
		width: auto;
	}

.mainBox
	{
		position: relative;
		width: 260px;
		min-height: 150px;
		float: left;
		left: 5px;
		margin: 1.1em 10px 1em 0;
		padding-top: 0;
		font-size: 0.9em;
		line-height: 1.3em;
		color: #555;
		background: url('../images/mainpage-box-bg.png') no-repeat 0 0;
	}

.mainBoxWide
	{
		position: relative;
		width: 800px;
		min-height: 260px;
		float: left;
		left: 5px;
		margin: 1.1em 10px 1em 0;
		padding-top: 0;
		font-size: 0.9em;
		line-height: 1.3em;
		color: #555;
		background: url('../images/mainpage-box-bg-wide-800.png') no-repeat 0 0;
	}

.mainBoxMediumRight
	{
		position: relative;
		width:500px;
		min-height: 260px;
		float: right;
		left: 5px;
		margin: 1.1em 15px 1em 0;
		padding-top: 0;
		font-size: 0.9em;
		line-height: 1.3em;
		color: #555;
		background: #fff url('../images/mainpage-box-bg-wide.png') no-repeat 0 0;
	}

.mainBoxWideRight
	{
		clear:both;
		float:right;
		width: 250px;
		height: 260px;
		border: #0c1a41 1px solid;
	}

#archiver.mainBox {background: url('../images/mainpage-box-bg-new.png') no-repeat 0 0;}

.mainBox .inside { width: 90% !important; }

.mainBox p a {font-weight: bold; color: #036 !important}
.mainBox p a:hover {font-weight: bold; color: #888 !important; }
.mainBox p a:active {font-weight: bold; color: #06c !important; }

.mainBox h2
	{
		color: #1d59b1;
		font: bold 2.1em tahoma, verdana, sans-serif;
		border: none;
		padding: 6px 0 0 0;
		margin: 12px 0 0 0;
		min-height: 42px;	
	}

.mainBoxMediumRight h2
	{
		color: #1d59b1;
		font: bold 2.1em tahoma, verdana, sans-serif;
		border: none;
		padding: 6px 0 0 0;
		margin: 12px 0 0 0;
		min-height: 42px;	
	}

.mainBox a.headLink
	{
		display: block;
		cursor: pointer;
		background: url('../images/mainpage-box-btn.png') no-repeat 0 0;
		padding: 0 0 0 45px;
		text-decoration: none !important;
	}

.mainBox a#ma { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#wsf { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#train { background: url('../images/mainpage-box-btn-training.png') no-repeat 0 0; }
.mainBox a#mx-backup { background: url('../images/mainpage-box-btn-mx.png') no-repeat 0 0; font-size: 0.9em}
/*  .mainBox a#linkBalancer { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }  */
.mainBox a#backup { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#sslvpn { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#yosemite { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#cudatel { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }
.mainBox a#purewire { background: url('../images/mainpage-box-btn-new.png') no-repeat 0 0; }

.mainBox a:hover.headLink h2
	{
	color: #e29926 !important;
	}

.mainBox a#train:hover.headLink h2, .mainBox a#mx-backup:hover.headLink h2
	{
	color: #d31818 !important;
	}

.mainBox a.headLink:hover
	{
		background-position: 0 -100px !important;
	}
	
.mainBox h2.compact { font-size: 1.9em;}
.mainBox h2 .headspace { padding: 11px 0 0 0; }a
.mainBox h2.compact .headspace { padding: 13px 0 0 0; }
.mainBox h2.small {font-size: 2em}
.mainBox p {padding: 0 0 1ex 0; margin: 0;}
.mainBox .buttonRow {border-top: 1px solid #777; padding-top: 1ex}
.mainBox .buttonRow img {margin-top: 0.5ex}
.mainBox .buttonRow div {float: right; width: 125px; text-align: center; font-weight: bold; margin-top: 1ex}

.mainIntro
	{
		float: left;
		padding: 0 !important;
		margin: 0 0 -10px 0 !important;
		width: 550px;
		height: 120px
	}

/*--------------------------
	Optrics Bottom Box
---------------------------*/

#OptricsServices.mainBox .buttonRow 
	{ 
		float:right; 
		border-left: 1px solid #777;
		border-width: 0 0 0 1px;
		width: 150px;
		margin-top: -10px;
		text-align: right;
	}

#OptricsServices.mainBox p
	{
		padding:0 1em 1em 1em;
		margin:0 
	}

#OptricsServices.mainBox 
	{
		position: relative;
		width: 260px;
		min-height: 150px;
		background: url('../images/mainpage-box-bg2.png') no-repeat 0 0;
		padding:0;
		left: 5px;
		margin: 1.1em 10px 1em 0;
		font-size: 0.9em;
		line-height: 1.3em;	
	}

#trainingPic
	{
		float:right;
		margin: -10px 0 0 10px !important;
	}
	

#OptricsServices.mainBox .left
	{
		width: 480px;
		float: left;
	}	

#OptricsServices.mainBox .right
	{
		position:relative;
		width: 260px;
		float: right;
		right: 10px;
	}

#OptricsServices.mainBox #train { margin-left: 1em; }

/***************************** Main Page Table of Badges ******************************/

#mainPageBadges table {border-collapse:collapse;width:800px;height:auto;} 
/*
#mainPageBadges table td {border:1px solid #000;width:265px;height:30px;text-align:center;padding:0;} 
#mainPageBadges table a {width:100%;height:100px;display:block;background-color:Silver;} 
#mainPageBadges table a:hover {display:block;background-color:#0ea4fb;}
*/

/********************** Top Banner Area on Main Page ************************/

#mainPageBannerArea
	{
		clear:both;
		width: 816px;
		height:225px;
		margin:0 0 40px 2px;
		background: url('../images/mainpage/Mainpage-Banner-Area.png') 0 0 no-repeat;
		text-align:left;
	}

#mainPageBannerArea3
	{
		clear:both;
		width: 816px;
		height:225px;
		margin:0 0 40px 2px;
		background: url('../images/mainpage/Mainpage-Banner-Area-3.png') 0 0 no-repeat;
		text-align:left;
	}

#mainPageBannerArea a, #mainPageBannerArea3 a
	{
		text-decoration:none;
	}

#mainPageBannerArea p, #mainPageBannerArea3 p
	{
		font-size:9pt;
	}

#mainPageBannerArea a:hover, #mainPageBannerArea3 a:hover
	{
		text-decoration:underline;
	}

.mainBannerBox
	{
		position: relative;
		width: 235px;
		min-height: 225px;
		float: left;
		font-size: 8pt;
		color: #555;
		text-align:left;
	}

.innerBannerBox	
		{
			margin:5px;
			width:100%;
			overflow:hidden;
			vertical-align: top;
			font-size: 8pt;
			line-height:1.1em;
			text-align:left;
		}

.mainBannerButton
	{
		float:right;
		margin:0 35px 0 0;
		font-size:8pt;
	}

#mainPageBannerArea ul, #mainPageBannerArea3 ul
	{
		margin-left: -1px;
	}

#mainPageBannerArea ul li, #mainPageBannerArea3 ul li
	{
		list-style:none;
		font-size:8pt;
		line-height:1em;
	}

/******************** Main Box Rollover Buttons *************************/

.innerBannerBox h2
	{
		color: #1d59b1;
		font: bold 2.1em tahoma, verdana, sans-serif;
		border: none;
		padding: 6px 0 0 0;
		margin: 2px 0 0 0;
		min-height: 36px;	
	}

.innerBannerBox a.headLink1
	{
		display: block;
		cursor: hand;
		background: url('../images/mainpage-3buttons-1.png') no-repeat 0 0;
		padding: 0 0 0 45px;
		text-decoration: none !important;
	}

.innerBannerBox a.headLink2
	{
		display: block;
		cursor: hand;
		background: url('../images/mainpage-3buttons-2.png') no-repeat 0 0;
		padding: 0 0 0 45px;
		text-decoration: none !important;
	}
	
.innerBannerBox a.headLink3
	{
		display: block;
		cursor: hand;
		background: url('../images/mainpage-3buttons-3.png') no-repeat 0 0;
		padding: 0 0 0 45px;
		text-decoration: none !important;
	}

.innerBannerBox a.headLink1:hover, .innerBannerBox a.headLink2:hover, .innerBannerBox a.headLink3:hover
	{
		background-position: 0 -100px !important;
	}

.innerBannerBox a:hover.headLink1 h2, .innerBannerBox a:hover.headLink2 h2, .innerBannerBox a:hover.headLink3 h2
	{
		color: #e29926 !important;
	}