/*----------------------------------------------- SAGE Pastel.com ----------------------------------------------- */
		                                               
.hide {
	display:none;
}

.show {
	display:block;
}

												/*-------------- Main Menu--------------- */
 #mainmenu ul ul ul {
 	display:block;
}

 #mainmenu {
	margin:0;
	padding-top:5px;
	padding-left:5px;
	height:92px;
	width:177px;
	float: left;
	z-index:500;
}
														/* Main Menu's Link Styles */
													
#mainmenu a {
	display: block;
	padding: 2px 2px 2px 4px;
	border-bottom: 1px solid #999999;
	margin: 0px;
	clear: both;
	width:100%;
	z-index:500;
	font-size:11px;
}

#mainmenu a:link, #mainmenu a:visited {
	color: #000;
	text-decoration: none;
	background-color:#FFF;
}

#mainmenu a:hover {
	background-color: #B8D3E2;
	color: #FFF;
	margin: 0px;
	background-color:#00733B;
}
													
													/* Main Menu's Unordered List Styles */

#mainmenu ul {
	list-style-type: none;
	left:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding:0;
	margin:0;
	border-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-color: #999999;
	height:100%;
	width:100%;
	z-index:500;
}

#mainmenu ul li {
	width:96%;
}

 /* 1st Sub-level */ #mainmenu ul ul {
	position:absolute;
	top:155px;
	left:6%;
	border:solid 1px #00733B;
	background-image:none;
	margin:0;
}

#mainmenu ul ul#ProductsSub {	
	height:121px;
}

#mainmenu ul ul ul {
	display:none;
}

#mainmenu ul ul li:link, #mainmenu ul ul li:visited {
	background-color:#FFF;
	color:#666;
	display:block;
	width:150px;
}

#mainmenu ul ul li:hover {
	display:block;
	background-color:#00733b;
	color:#FFF;
	width:150px;
}

  /*2nd Sub-level */ #mainmenu ul ul li:hover ul {
 	position:absolute;
	display:block;
	left:150px;
	top:0px;
	height:100%;
	width:100%;
	border:solid 1px #00733B;
	background-image:none;
}

#mainmenu ul ul li:hover ul ul {
	display:none;
}

#mainmenu ul ul li a:link, #mainmenu ul ul li a:visited {
	color: #666666;
	text-decoration: none;
	background-image:none;
	background-color:#FFFFFF;
	width:180px;
}

#mainmenu ul ul li a:hover {
	display:block;
	background-color:#00733b;
	color:#FFF;
	font-weight:normal;
	margin:0;
	background-image:none;
}


  /*3rd Sub-level */ #mainmenu ul ul ul li:hover ul {
 	position:absolute;
	display:block;
	left:100%;
	top:22px;
	border:solid 1px #00733B;
	background-image:none;
}

#mainmenu ul ul ul a:link, #mainmenu ul ul ul a:visited {
	color: #666666;
	text-decoration: none;
	background-image:none;
	background-color:#FFFFFF;
	width:210px;
}

#mainmenu ul #ATC a:link, #mainmenu ul #ATC a:visited  {
 	width:200px;
}

#mainmenu ul ul #ATC2 a:link, #mainmenu ul ul #ATC2 a:visited  {
 	width:240px;
}

#mainmenu ul ul  #BIC a:link, #mainmenu ul ul #BIC a:visited  {
 	width:210px;
}

#mainmenu ul ul ul a:hover {
	display:block;
	background-color:#00733b;
	color:#FFF;
	font-weight:normal;
	margin: 0px;
	background-image:none;
}

#mainmenu ul ul ul#BIC {
	top:-1px; 
	left:100%;
}

#mainmenu ul ul #BSP {
 	top:22px;
	left:100%;
	width:120px;
	height:auto;
}

#mainmenu ul ul ul#consulting {
	top:183px; 
	left:100%;
	width:120px;
}

#mainmenu ul ul ul#ATC {
	left:100%;
	top:-1px;
}

#mainmenu ul ul ul#ATC2 {
	left:100%; 
	top:22px;
}

#mainmenu ul ul ul#PayrollTraining {
	left:100%;
	top:22px;
	width:120px;
}

#mainmenu ul ul ul#EvolutionTraining {
	left:100%;
	top:46px;
	width:120px;
}

#mainmenu ul ul ul#AccountingSub {
	top:-1px;
	left:100%;
}

#mainmenu ul ul ul#BSP {
	top:22px;
	left:100%;
}

#mainmenu ul ul ul#consulting {
	top:45px;
	left:100%;
}

#mainmenu ul ul ul#payroll {
	top:68px;
	left:100%;
	margin:0;
	padding:0;
}

#mainmenu ul ul ul#stationery {
	top:91px; 
	left:100%;
	padding:0;
}

#mainmenu ul ul ul#SDK {
	top:114px; 
	left:100%;
	padding:0;
}




													/*-------------- Main Menu 2 --------------- */
												

 #mainmenu2 {
	margin:0;
	margin-top:5px;
	margin-left:5px;
	height:92px;
	width:177px;
	float: left;
	z-index:500;
}
														/* Main Menu 2's Link Styles */
													
#mainmenu2 a {
	display: block;
	padding: 2px 2px 2px 4px;
	border-bottom: 1px solid #999999;
	margin: 0px;
	clear: both;
	width:100%;
	z-index:500;
	font-size:11px;
}

#mainmenu2 a:link, #mainmenu2 a:visited {
	color: #000;
	text-decoration: none;
	background-color:#FFF;
}

#mainmenu2 a:hover {
	background-color: #B8D3E2;
	color: #FFF;
	margin: 0px;
	background-color:#00733b;
}
													
													/* Main Menu 2's Unordered List Styles */

#mainmenu2 ul {
	list-style-type: none;
	left:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding:0;
	margin:0;
	border-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-color: #999999;
	height:100%;
	width:177px;
	z-index:500;
}
/* 1st Sub-level */ #mainmenu2 ul ul {
	position:absolute;
	top:178px;
	width:177px;
	margin-left:-1px;
	border:solid 1px #00733B;
	background-image:none;
}

#mainmenu2 ul ul a:link, #mainmenu2 ul ul a:visited {

	color:#666666;
	text-decoration: none;
	background-image:none;
	background-color:#FFFFFF;
	width:180px;
}

#mainmenu2 ul ul a:hover {
	color:#FFF;
	font-weight:normal;
	margin:0;
	background-color:#00733b;
}

#mainmenu2 ul ul li:hover ul ul {
	display:none;
}
 


													/*-------------- Main Menu 3--------------- */
													
 #mainmenu3 {
	margin:5px;
	width:200px;
	float:left;
	border:1px none #999;
	height:92px;
	background-color:#FFF;
}


.Arrow {
	background-image: url(../images/favicon.gif);/* the arrow bg image goes here */
}

.InvisiDiv {
	position:absolute;
	width:314px;
	height:163px;
	left:6px;
	top:185px;
	border:solid 0px pink;
	z-index:2;
	visibility:hidden;
}

.InvisiDiv a:link , .InvisiDiv a:hover , .InvisiDiv a:visited , .InvisiDiv a:active {
	width:100%;
	height:100%;
	text-decoration:none;
}

.InvisiDiv2 {
	position:absolute;
	width:179px;
	height:92px;
	left:568px;
	top:237px;
	border:solid 1px pink;
	z-index:2;
}

.InvisiDiv2 a:link , .InvisiDiv2 a:hover , .InvisiDiv2 a:visited , .InvisiDiv2 a:active {
	width:100%;
	height:100%;
	text-decoration:none;
}


											      /*-------------- Login Button --------------- */
															
#LoginArea {
	position:absolute;
	width:140px;
	top:145px;
	height:33px;
	background-color:#000000;
}
															
#LoginBtn {
	position:relative;
	left:0;
	top:5px;
	display:block;
	height:25px;
	padding:0;
	margin:0;
	background-position:center;
	background-image:url(http://www.pastel.co.za/images/login.gif);
	background-repeat:no-repeat;
	background-color:#000000;
	border:solid 1px grey;
	list-style-type:none;
}

#LoginBtn a {
	text-decoration:none;
}

#LoginBtn:hover {
	display:block;
	background-position:center;
	background-image:url(http://www.pastel.co.za/images/login_o.gif);
	background-repeat:no-repeat;
	background-color:#000000;
	text-decoration:none;
	width:100%;
}

#LoginBtn ul {
	display:none;
	border-left:solid 1px #00733b;
	border-right:solid 1px #00733b;
	border-top:solid 1px #00733b;
	width:90px;
}

#LoginBtn ul li {
	height:25px;
	display:block;
	width:95px;
}

#LoginBtn:hover ul {
	position:absolute;
	width:100px;
	left:20px;
	top:25px;
	padding:0;
	margin:0;
	background-color:#FFFFFF;
 	display:block;
} 

#LoginBtn:hover ul li {
	display:block;
	text-align:center;
	text-decoration:none;
	width:100%;
	border-bottom:solid 1px #003366;
	background-color:#FFFFFF;
}

#LoginBtn ul li a {
	text-decoration:none;
	display:block;
	width:100%;
	height:25px;
}

#LoginBtn ul li:hover, #LoginBtn ul li a:hover {
	background-color:#00733b;
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	width:100%;
}