﻿/*----------------------------
  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: 300px;
		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: 930px;
		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;
		font-size: 14pt;
		border: none;
		padding: 6px 0 0 0;
		margin: 12px 0 0 0;
		min-height: 46px;	
		display:block;
	}

.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: 5px 0 0 45px;
		margin-left:10px;
		height:42px;
		text-decoration: none !important;
		width:90%;
		vertical-align:middle;
	}

.mainBox a#ma { background: url('images/mainpage-box-btn-new.png') no-repeat 0 -10px; }
.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;}
/*  .mainBox a#linkBalancer { 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#purewire { background: url('images/mainpage-box-btn.png') no-repeat 0 0; }
.mainBox a#ngfirewall { 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; }
.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
	}

.mainBox p, .mainBoxMediumRight p, .mainBoxWideRight p
	{
		margin: 3px 3px 3px 10px;
	}

/*--------------------------
	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: 930px;
		height:225px;
		margin:0 0 40px 2px;
		background: url('images/Mainpage-Banner-Area.png') 0 0 no-repeat;
		text-align:left;
	}

#mainPageBannerArea3
	{
		clear:both;
		width: 930px;
		height:225px;
		margin:0 0 40px 2px;
		background: url('images/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/Main-Page-3Box-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/Main-Page-3Box-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/Main-Page-3Box-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;
	}

/*********** STYLING THE VIDEO POPUP ***********/

#blanket
	{
		z-index: 9001;
		left:0px;
		width: 100%;
		position: absolute;
		top: 0px;
		background-color: #fafafa;
		opacity: 0.65;
	}

#popUpDiv
	{
		z-index: 9002;
		top:0;
		left:0px;
		width:800px;
		height: 300px;		
		position: absolute;
		background-color:: #eeeeee;
		cursor: hand;
		margin-top:-110px;
	}

#tblMainPageVideos
	{
		background-color: #1d59b1;
		border: #1d59b1 2px solid;
		z-index:8000;
	}

#tblMainPageVideos .contactForm
	{
		background-color: #fff;
	}

#tblMainPageVideos .header
	{
		font-weight:bold;
		color: #fff;
	}

.makePointer a:hover
	{
		cursor: hand;
	}
	
	/***  Main Page "Sales Process" Boxes  ***/

#salesProcessStrip 
{
	height:200px;
	width:920px;
	margin: 20px 5px 20px 5px;
}

#salesProcessStrip .box1
	{
		height:200px;
		width:230px;
		float:left;
		background: url('images/sales-process/box1.gif') 0 0 no-repeat;
	}

#salesProcessStrip .box1:hover
	{
		height:200px;
		width:230px;
		background: url('images/sales-process/box1-hover.gif') 0 0 no-repeat;
	}

#salesProcessStrip .box2
	{
		height:200px;
		width:230px;
		float:left;
		background: url('images/sales-process/box2.gif') 0 0 no-repeat;
	}

#salesProcessStrip .box2:hover
	{
		height:200px;
		width:230px;
		background: url('images/sales-process/box2-hover.gif') 0 0 no-repeat;
	}

#salesProcessStrip .box3 {
	height:200px;
	width:230px;
	float:left;
	background: url('images/sales-process/box3.gif') 0 0 no-repeat;
}

#salesProcessStrip .box3:hover {
	height:200px;
	width:230px;
	background: url('images/sales-process/box3-hover.gif') 0 0 no-repeat;
}

#salesProcessStrip .box4 {
	height:200px;
	width:230px;
	float:left;
	background: url('images/sales-process/box4.gif') 0 0 no-repeat;
}

#salesProcessStrip .box4:hover {
	height:200px;
	width:230px;
	background: url('images/sales-process/box4-hover.gif') 0 0 no-repeat;
}

 ul.salesProcessList
{
	margin:45px 0 5px 20px;
	width:150px;
}
