@charset "utf-8";
/* CSS Document */

/*******************************************************************
          Written by  	:  	Kyle Bottorff
		  				 	Kytor Industries
		  				 	www.kytor.com
									
		  Date        	:  	05.23.2009
		  Last Edit		:	11.05.2017
					 
		  Description 	:  	Contains the formatting and general
		  				 	layout style for the Enterprise
						 	Resource Planning system.
						 
		  Notice	  :  	Use of this content is permitted only with
						 	written consent of Kyle Bottorff.
*******************************************************************/


/*******************************************************************
         					Load Fonts
*******************************************************************/
	@font-face {
		font-family: Helvetica-Custom;
		src: url(../font/helvetica.otf);
	}
	@font-face {
		font-family: Helvetica-Light-Custom;
		src: url(../font/helvetica-light.otf);
	}
	@font-face {
		font-family: Roboto-Light;
		src: url(../font/Roboto-Light.ttf);
	}
	@font-face {
		font-family: Roboto-Thin;
		src: url(../font/Roboto-Thin.ttf);
	}


/*******************************************************************
         Body, plain text, and universal link decoration
*******************************************************************/

body {
	margin:0;
	padding:0; 
	font-family:Helvetica-Light-Custom;
	font-size:18px; }

/*Defines STANDARD DEFAULT hyperlink mouseover properties */
a:link					{color:#065b70; text-decoration:none;}
a:visited 				{color:#065b70; text-decoration:none;}
a:hover 				{color:#f5f6f7; text-decoration:none; background-color:#328495;}
a:active 				{color:#f5f6f7; text-decoration:none; background-color:#065b70;}

/* Erase all link properties for key elements */
.noDecoration a:link 	{text-decoration: none; background-color:transparent;}
.noDecoration a:visited {text-decoration: none; background-color:transparent;}
.noDecoration a:active 	{text-decoration: none; background-color:transparent;}
.noDecoration a:hover 	{text-decoration: none; background-color:transparent;}

/* Use normal text for certain link classes */
.plainLink a:link 		{color:#424140; text-decoration: none; background-color:transparent;}
.plainLink a:visited 	{color:#424140; text-decoration: none; background-color:transparent;}
.plainLink a:active 	{color:#424140; text-decoration: none; background-color:transparent;}
.plainLink a:hover 		{color:#424140; text-decoration: none; background-color:transparent;}

/* Use normal text for editing tabs */
.tabLink a:link 		{color:#999; text-decoration: none; background-color:transparent;}
.tabLink a:visited 		{color:#999; text-decoration: none; background-color:transparent;}
.tabLink a:active 		{color:#999; text-decoration: none; background-color:transparent;}
.tabLink a:hover 		{color:#424140; text-decoration: none; background-color:transparent;}


/*******************************************************************
                        Navigation Bar
*******************************************************************/


.navBarLink a:link 		{margin:0px; padding:10px; color:#DDD; text-decoration: none; background-color:transparent; height:40px; border-left:rgba(200, 200, 200, .4) 1px solid}
.navBarLink a:visited 	{margin:0px; padding:10px; color:#DDD; text-decoration: none; background-color:transparent; height:40px; border-left:rgba(200, 200, 200, .4) 1px solid}
.navBarLink a:active 	{margin:0px; padding:10px; color:#DDD; text-decoration: none; background-color:transparent; height:40px; border-left:rgba(200, 200, 200, .4) 1px solid}
.navBarLink a:hover 	{margin:0px; padding:10px; color:#FFF; text-decoration: none; background-color: rgba(0,0,0,0.5); height:40px; border-left:rgba(200, 200, 200, .4) 1px solid}



.homeLink a:link 	{	margin:0px;
						color:#DDD;
						text-decoration: none;
						background-color:transparent;
						position: absolute;
						top:0px;
						left:0px;
						height:40px;
						width:40px;
						}	
.homeLink a:visited {	margin:0px; 
						color:#DDD;
						text-decoration: none;
						background-color:transparent;
						}
.homeLink a:active 	{	margin:0px;
						color:#DDD;
						text-decoration: none;
						background-color:transparent;
						height:40px;
						width:40px;}
.homeLink a:hover 	{	margin:0px;
						color:#DDD;
						text-decoration: none;
						background-color: rgba(0,0,0,0.5);
						position: absolute;
						top:0px;
						left:0px;
						height:-20px;
						width:40px;
					}


.buttonLink a:link {	margin:0px; 
						padding:13px 8px 12px 8px;
						position:relative;
						top:-8px; 
						color:#DDD;
						text-decoration: none;
						background-color:transparent;
						height:40px;
						border-left:rgba(200, 200, 200, .4) 1px solid}		
.buttonLink a:visited {	margin:0px; 
						padding:13px 8px 12px 8px; 
						position:relative;
						top:-8px; 
						color:#DDD;
						text-decoration: none;
						background-color:transparent;}
.buttonLink a:active {	margin:0px;
						padding:13px 8px 12px 8px; 
						position:relative;
						top:-8px;
						color:#DDD;
						text-decoration: none;
						background-color:transparent;
						border-left:rgba(200, 200, 200, .4) 1px solid}
.buttonLink a:hover {	margin:0px; 
						padding:13px 8px 12px 8px; 
						position:relative;
						top:-8px;
						color:#DDD;
						text-decoration: none;
						background-color: rgba(0,0,0,0.5);
						height:40px;
						border-left:rgba(200, 200, 200, .4) 1px solid}
						
						
.dropButton a:link {	color:#DDD;
						text-decoration: none;
						background-color:transparent;
						height:40px;
						border-left:rgba(200, 200, 200, .4) 1px solid}		
.dropButton a:visited {	color:#DDD;
						text-decoration: none;
						background-color:transparent;}
.dropButton a:active {	color:#DDD;
						text-decoration: none;
						background-color:transparent;
						border-left:rgba(200, 200, 200, .4) 1px solid}
.dropButton a:hover {	color:#DDD;
						text-decoration: none;
						background-color: rgba(0,0,0,0.5);
						height:40px;
						border-left:rgba(200, 200, 200, .4) 1px solid}
						
						
						
ul.navDrop, ul.navDrop ul { list-style:none; }

/*Style for 1st level menu header*/
ul.navDrop li { 
	z-index:5;
	position: relative;
	height:40px;
	float: right;
	zoom: 1; /*Needed for IE*/ 
	background:none; /*background color of menu header (1st level)*/;
	font-family:Roboto-Light;
	list-style:none; 
	color:#DDD; }
	
ul.navDrop li:hover { background:none; }

ul.navDrop li a {
	/*Menu link styles*/
	display: block;
	color:#DDD;
	list-style:none; }

/* Building menu items - for 2nd and more level menu items*/
ul.navDrop ul { 
	display:none; /*initially menu item is hidden*/
	position: absolute; /*absolute positioning is important for menu to float*/
	width: 180px;
	
	/*Formating of menu items*/
	border-left:1px solid #444;
	border-right:1px solid #444;
	border-bottom:1px solid #444;
	padding:0px;
	text-align:right;
	
	/*optional - to change position of 2nd level menu item*/
	top: 40px; 
	right: 1px; 
}
ul.navDrop ul li { 
	font-family: Roboto-Light;
	font-size:14px;
	float: none;
	list-style:none;
	padding-left:6px;
	padding-right:6px;
	line-height:1.7;
	height: 30px;
	background-color: #FFF;
}
							  
ul.navDrop ul li a
{ 
	width: 100%; 
	height: 15px;
	display: block; 
	color: #333;
	height:40px;
} 

/* Hover effect for menu*/
ul.navDrop li:hover > ul 			
{ 
	display: block;
	background: #F0F0F0;
}	



/*******************************************************************
                   Container: Portal Icons / Tiles
*******************************************************************/


.iconContainer {
	display:inline-block;
	width:135px;
	height:170px;
	margin:10px 0px 10px 0px;
	padding:20px 0 0 0;
	color:#FFF;
	font-family:Roboto-Light;
	font-size:18px; }
	/*font-size: 1vw} */

.iconImg {
	width:125px;
	height: 125px;
	border-radius:8px;
	margin-top:5px;
	margin-bottom:5px; }

#tilesContent {
	min-width:500px;
	max-width:1000px;
	min-height:500px;
	height: calc(100% - (180px));
	text-align:center;
	margin:20px auto 0px auto;
	padding: 100px auto 0px auto;
	/*Tile CSS Tags Beow */
	-webkit-column-width: 180px; /* Chrome, Safari, Opera */
	-moz-column-width: 180px; /* Firefox */  
	column-width: 180px;
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}


/* Used for portal page icon titles */
.iconTile a:link 		{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:75px 15px 70px 15px; position:relative; margin-left:10px; }
.iconTile a:visited 	{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:75px 15px 70px 15px; position:relative; margin-left:10px; }
.iconTile a:active 		{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:75px 15px 70px 15px; position:relative; margin-left:10px; }
.iconTile a:hover 		{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0.1); border:rgba(255, 255, 255, .4) 1px solid; border-radius: 8px; padding:150px 15px 10px 15px; position:relative; margin-left:10px; }



/*******************************************************************
                   Container: Main Content Area
*******************************************************************/

#mainBody {
	margin:0;
	width:100%;
	min-height: 100%;
	background-image:url(../img/gradientBG.svg),url(../img/gradientBG_flipped.svg);
	background-repeat: no-repeat, repeat;
	background-size:cover;
	background-attachment:fixed;
	}

#wrapper {
	min-height:calc(100%);
	height:calc(100%);
	width:100%;
	margin:0px;
	padding:0px;
}

#mainContent {
	font-family:Helvetica-Light-Custom;
	font-size:18px;
	line-height:1.3;
	min-width:500px;
	max-width:1000px;
	min-height: calc(100% - (180px));
	background-color:rgba(255, 255, 255, .8);
	text-align:center;
	margin:60px auto 60px auto;
	padding:10px;
}

#footer {
	background-color:transparent;
	height:60px;
	width:100%;
	text-align:center;
	font-size:24px;
	position:relative;
	top: calc(100%);
	margin:0px;
	padding:0px;	
}


/*******************************************************************
                   Container: Sign In
*******************************************************************/



#signInContent {
	font-family:Helvetica-Light-Custom;
	font-size:18px;
	line-height:1.3;
	min-width:500px;
	max-width:500px;
	min-height: calc(100% - (180px));
	background-color:rgba(255, 255, 255, .8);
	text-align:center;
	margin:100px auto 60px auto;
	padding:10px;
  	border-radius:3px;
}


#SignInButton
{
  	background-color: #4d7c74;
  	width:300px;
  	margin:5px auto 5px auto;
  	height:40px;
  	border-radius:3px;
  	border: none;
  	color: #fff;
  	font-weight: bold;
}
#SignInButton:hover
{
  	background-color: #466e67;
}


/*******************************************************************
                     Container: Search 
*******************************************************************/


#searchContent {
	min-width:500px;
	max-width:2000px;
	min-height:500px;
	height: calc(100% - (180px));
	text-align:center;
	margin:20px auto 60px auto;
	padding-right: 30px;
	/*Tile CSS Tags Beow */
	-webkit-column-width: 360px; /* Chrome, Safari, Opera */
	-moz-column-width: 360px; /* Firefox */  
	column-width: 360px;
	-webkit-column-gap: 44px; /* Chrome, Safari, Opera */
    -moz-column-gap: 44px; /* Firefox */
    column-gap: 44px;
}

.productContainer {
	display:inline-block;
	background-color:rgba(255, 255, 255, .1);
	width:340px;
	height:165px;
	margin:20px 0px 13px 0px;
	padding:0px;
	color:#FFF;
	font-family:Roboto-Light;
	font-size:18px; }
	/*font-size: 1vw} */

.searchImg 			{ width:110px;height:110px; float:left; margin-top:22px; margin-left:8px; border-radius:4px; }
.searchText			{ text-align:left; float:right; height:150px; width:205px; display: inline-block; }
.searchHead 		{ margin:4px 8px 0 0; padding:0; line-height: 1.8; color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.searchLineEven		{ margin:0 8px 0 4px; padding:0; font-size: 13px; line-height: 1.3; color: #333; }
.searchLineOdd		{ margin:0 8px 0 4px; padding:0; font-size: 13px; line-height: 1.3; color: #333; background-color:rgba(255, 255, 255, .2); }
.searchLineResult 	{ float:right; color:#111; font-weight: bold; margin-right: 8px; }


/* Used for portal page icon titles */
.searchTile a:link 		{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:105px 15px 60px 15px; position:relative; margin-left:10px; }
.searchTile a:visited 	{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:105px 15px 60px 15px; position:relative; margin-left:10px; }
.searchTile a:active 	{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0); border:rgba(255, 255, 255, 0) 1px solid; border-radius: 8px; padding:105px 15px 60px 15px; position:relative; margin-left:10px; }
.searchTile a:hover 	{color:#FFF; text-decoration: none; background-color:rgba(255,255,255,0.1); border:rgba(255, 255, 255, .4) 1px solid; border-radius: 8px; padding:180px 15px 0px 15px; position:relative; margin-left:10px; }


/*******************************************************************
           Default Headings, Breaks, Lists and Paragraphs
*******************************************************************/


h1 {
	margin:0;
	padding:0;
	font-size:24px;
	font-size:calc(20px + 1.55vw);
	font-family:Roboto-Thin;
}
@media screen and (min-width: 1000px) {
  h1 {
     font-size: 36px;
  }
}

h2 {
	margin:0;
	padding:0;
	font-size:18px;
	font-size:calc(12px + 1.2vw);
	font-family:Roboto-Thin;
}
@media screen and (max-width: 550px) {
  h2 {
     font-size: 18px;
  }
}
@media screen and (min-width: 1000px) {
  h2 {
     font-size: 24px;
  }
}

ul {
	margin:0;
}

li {
	line-height:1.6;
	list-style-image:url(/img/bullet.png)
}

hr {
	width: 100%;
	height: 1px;
	border: solid 0.5px;
	color: #86bad5;
	margin: 15px auto 15px auto;
	padding: 0px;
}



/*******************************************************************
                        Table formatting
*******************************************************************/

.productLabelColumn {
	width: 120px;
	padding-left:8px;
}

.productFormsColumn {
	padding-left:20px;
	height:42px;
}




/*******************************************************************
               Forms formatting and design
*******************************************************************/

input { 
	border:solid 1px #A4C4DB;
	background-image:url(../img/formbgsm.png);
	padding: 3px;
	font-family:Helvetica-Light-Custom;
	font-size:18px;
	color:#000;
}

input.icons { 
	border:none;
	background-image:none;
	padding:0px;
}

textarea {
	border:solid 1px #A4C4DB;
	background-image:url(../img/formbg.png);
	background-repeat:repeat-x;
	padding: 3px;
}

select {
	border:solid 1px #A4C4DB;
	padding: 3px;
}

.displayProduct {
	width:220px; 
	height:18px; 
	background-color:transparent; 
	background-image:none; 
	border:none;
	padding:4px 0px 4px 0px;
	font-size:14px;
	font-family:Helvetica, Arial, sans-serif;
	color:#424140;
	padding-left:2px;
	margin:0px;
}

.editProduct {
	width:220px;
	height:18px;
	margin:0;
	font-size:14px;
	font-family:Helvetica, Arial, sans-serif;
	color:#424140;
	padding-left:1px;
	margin:0px;
}

.displayClasses {
	width:237px;
	height:26px; 
	background-color:transparent; 
	background-image:none; 
	border:none;
	padding-left:0;
	font-size:12;
}

.displayStock {
	width:40px; 
	height:18px; 
	background-color:transparent; 
	background-image:none; 
	border:none;
	padding:4px 0px 4px 0px;
	font-size:14px;
	font-family:Helvetica, Arial, sans-serif;
	color:#424140;
}

.editStock {
	width:40px;
	height:18px;
	margin:0;
	font-size:14px;
	font-family:Helvetica, Arial, sans-serif;
	color:#424140;
}

.productLocked {
	margin:0;
	padding:0 0 0 4px;
	color:#999;
	font-size:12;
}

.textButton {
   border: none;
   background-color: transparent;
   padding: 0;
   text-decoration: none; /* if desired */
   color: #00c;  /* or whatever other color you want */
   overflow:visible;
   font-size:1em;
}

button { 
	border:solid 1px #A4C4DB;
	background-image:url(../img/formbgsm.png);
	padding: 3px;
}

/*******************************************************************
                  Order Listing Page Formatting
*******************************************************************/

.titleBox {
	border:2px solid #fbfbfc;
	margin:0 auto 0 auto;
	padding:0;
	width:900px;
}

.informationBox {
	margin:0 auto 12px auto; 
	padding:0;
}

.customerBox {
	width:288px; 
	border-bottom:2px solid #fbfbfc; 
	border-left:2px solid #fbfbfc; 
	text-align:left;
	background-color:#f3f3f3;
}

.statusBox {
	width:240px; 
	border-bottom:2px solid #fbfbfc;
	border-left:2px solid #fbfbfc; 
	text-align:left;
	background-color:#f8f8f8;
}

.detailsBox {
	width:358px; 
	border-bottom:2px solid #fbfbfc; 
	border-left:2px solid #fbfbfc; 
	border-right:2px solid #fbfbfc; 
	text-align:left;
	background-color:#f3f3f3;
}

.dataLine {
	margin: 10px auto 0px auto;
	line-height:1.4;	
}

.boxMargins {
	margin:0 0 8px 8px;
}

.plusExpand {
	border:none;
	margin:12px auto 0 0;
	padding:0;
	width:11px;
	height:11px;
	background-color:transparent;
	background-image:url(../img/plus.png);
}

.minusCollapse {
	border:none;
	margin:12px auto 0 0;
	padding:0;
	width:11px;
	height:11px;
	background-color:transparent;
	background-image:url(../img/minus.png);
	display:none;
}

.lineTitle {
	color:#000;
	width:88px;
	float:left;
	margin:0 auto 0 0;
	padding:0;
}


/*******************************************************************
                  Finanacial Pages Formatting
*******************************************************************/


.transactionExpand {
	border:none;
	margin:0 auto 0 auto;
	padding:0;
	width:33px;
	height:24px;
	background-color:transparent;
	background-image:url(../img/downArrow.png);
}

.transactionCollapse {
	border:none;
	margin:0 auto 0 auto;
	padding:0;
	width:33px;
	height:24px;
	background-color:transparent;
	background-image:url(../img/upArrow.png);
	display:none;
}







/*******************************************************************
                   Spreadsheet Style Data Table
*******************************************************************/


.dataLabel {
	padding:6px;
	margin:0px;
	width:160px;
	background-color:#E9E9E9;
	text-align:left;
	font-weight:bold;
}

.dataData {
	padding:6px;
	margin:0px;
	width:110px;
	background-color:#FFFFFF;
}

.dataTable {
	margin: 0px auto 0px auto;
	padding: 0;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
	width:930px;
}

.dataHeader {
	background-color:#666;
	color:#EEE;
	padding: 4px;
}

.dataEven {
	background-color:#EEE;
	color:#000;
	padding: 4px;
}

.dataOdd {
	background-color:none;
	color:#000;
	padding: 4px;
}





/*******************************************************************
                    Sales Reports Formatting
*******************************************************************/


.salesResultsLabel {
	padding:6px;
	margin:0px;
	width:160px;
	background-color:#E9E9E9;
	text-align:left;
	font-weight:bold;
}

.salesResultsData {
	padding:6px;
	margin:0px;
	width:110px;
	background-color:#FFFFFF;
}

.salesReportTable {
	margin: 0px auto 0px auto;
	padding: 0;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
	width:930px;
}

.salesReportHeader {
	background-color:#666;
	color:#EEE;
	padding: 4px;
}

.salesReportEven {
	background-color:#EEE;
	color:#000;
	padding: 4px;
}

.salesReportOdd {
	background-color:none;
	color:#000;
	padding: 4px;
}




/*******************************************************************
                  	   Account Details Page
*******************************************************************/

.accountsTitle {
	margin: 15px auto 10px auto;
	text-align:center;
}

.accountsTable {
	margin: 15px auto 10px auto;
	border: none;
	text-align: left;
	width: 800px;
}

.accountsTableHeader {
	background-color:#666;
	color:#EEE;
	padding: 4px;
}

.accountsTableActive {
	background-color:#ffffbb;
	color:#000;
	padding: 4px;
	font-weight: bold;
}


.accountsTableEven {
	background-color:#EEE;
	color:#000;
	padding: 4px;
}

.accountsTableOdd {
	background-color:none;
	color:#000;
	padding: 4px;
}





/*******************************************************************
                      Line Card Details Page
*******************************************************************/

.lineCardTitle {
	margin: 15px auto 10px auto;
	text-align:center;
}

.lineCardTable {
	margin: 15px auto 10px auto;
	border: none;
	text-align: left;
	width: 880px;
}

.lineCardTableHeader {
	background-color:#666;
	color:#EEE;
	width:100px;
	padding: 4px;
}

.lineCardTableEven {
	background-color:#EEE;
	color:#000;
	width:100px;
	padding: 4px;
}

.lineCardTableOdd {
	background-color:none;
	color:#000;
	width:100px;
	padding: 4px;
}

.displayNewBrand {
	width:280px; 
	height:18px;
}

.displayBrand {
	width:280px; 
	height:18px; 
	background-color:transparent; 
	background-image:none; 
	border:none;
	padding:4px 0px 4px 0px;
}

.editBrand {
	width:280px;
	height:18px;
	margin:0;
}

.brandLabelColumn {
	width: 60px;
	padding-left:8px;
}

.brandFormsColumn {
	padding-left:20px;
	height:42px;
}


/*******************************************************************
                      Printable Order Forms
*******************************************************************/

.fillData {
	font-size:13px;
	font-weight:600;
}

.orderNotesTitle {
	text-align:left;
	margin:12px 10px 0px 0px;
	padding:0px;
	color:#666666;
	font-weight:bold;
	font-size:16px;
}

.orderNotesDetails {
	font-family:Lucida Console, Monaco, monospace;
	font-size:13px;
	line-height:1.5;
}

.itemLine {
	border-right: 2px #DDD dashed;
	border-bottom: 1px #F9F9F9 solid;
	padding:6px 12px 6px 6px;
	text-align:right;
	font-family:"Lucida Console", Monaco, monospace;
	font-size:13px;
}

.itemLineLeft {
	border-left: 2px #DDD dashed;
	border-right: 2px #DDD dashed;
	border-bottom: 1px #F9F9F9 solid;
	padding:6px 6px 6px 12px;
	text-align:left;
	font-family:"Lucida Console", Monaco, monospace;
	font-size:13px;
}

.lastItemLine {
	border-right: 2px #DDD dashed;
	padding:6px 12px 6px 6px;
	text-align:right;
	font-family:"Lucida Console", Monaco, monospace;
	font-size:14px;
}

.lastItemLineLeft {
	border-left: 2px #DDD dashed;
	border-right: 2px #DDD dashed;
	padding:6px 6px 6px 12px;
	text-align:left;
	font-family:"Lucida Console", Monaco, monospace;
	font-size:14px;
}

/*******************************************************************
			   CSS Powered Drop Down Menu
*******************************************************************/

ul.cssMenu, ul.cssMenu ul
{
	list-style:none;
}

/*Style for 1st level menu header*/
ul.cssMenu li
{ 
	position: relative; 
	float: right;
	zoom: 1; /*Needed for IE*/
	background:none; /*background color of menu header (1st level)*/
	list-style:none; 
}
ul.cssMenu li:hover
{ 
	background: none; /*background color of menu header (1st level) on hover*/;
}
ul.cssMenu li a
{
	/*Menu link styles*/
	display: block;
	color:#424140;
	list-style:none;
}

/* Building menu items - for 2nd and more level menu items*/
ul.cssMenu ul 						
{ 
	display:none; /*initially menu item is hidden*/
	position: absolute; /*absolute positioning is important for menu to float*/
	width: 200px; 
	
	/*Formating of menu items*/
	border:1px solid #86bad5;
	padding:0px;
	background:#f3f3f3;
	color:#000;
	text-align:right;
	
	/*optional - to change position of 2nd level menu item*/
	top: 39px; 
	left: -143px; 
}
ul.cssMenu ul li
{ 
	background: #f3f3f3;
	/*border-bottom: 1px solid #DDDDDD; */
	float: none;
	list-style:none;
	padding-left:6px;
	padding-right:6px;
	line-height:1.8;
}
							  
ul.cssMenu ul li a
{ 
	width: 100%; 
	display: block; 
	color:#424140;
} 

/* Hover effect for menu*/
ul.cssMenu li:hover > ul 			
{ 
	display:block;
	background:#fff;
}