@charset "UTF-8";


/*------------------------------|
|-------------------------------|
|     Style Default states      |
|       across browsers         |
|         and devices           |
|       Portrait Phones         |
|-------------------------------|
|------------------------------*/

/*Default-  basic navigation layout*/
/*Full slide out menu on phone portrait and landscape*/

/*Display Nav menu in grid layout, w 2 equal ccs across sm screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	}		

/*Default styling state of offscreen Nav container on Portrait Phones */	
.Full {     /*Menu wrapper- wraps all sliding subsections of vNav menu to act as a whole*/
	width: 300px;			/*holds double colummn of list items (vNav)*/
	height: auto;			/*encompasses all anchor links, clears footer*/
	padding-left: 30px;
	position: fixed;		/*locks element to screen (no scroll); need to set positioning values */
	top: 135px;				/*place below masthead*/
	right: -300px;			/*position off screen until click checked*/
	z-index: 2;
	background: #0F3;
	box-shadow: -3px 5px 5px rgba(0,204,102,1);				/*add shadow*/
	-o-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-ms-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-moz-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-webkit-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	transition: all 0.3s ease;			/*set transitioning*/
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	}
	
/*Show full Menu Label*/
.slNav {				/*Menu title label*/
	top: 50%;
	left: -10px;		/*move label left*/
	position: absolute;		/*detached from page flow; use with positioning values */
	z-index: 3;			/*assign to a layer*/
	transform: translateY(-50%);			/*vertically ctr Menu label*/
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: rotate(270deg);			/*rotate to read sideways*/
	font-weight: 700;				/*style font*/
	font-size: 18px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #06f;
	cursor: pointer;
	}

/*Snippet from W3C Org.  Hide checkboxes; but available for screen readers.*/
.visuallyHidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;	/*Detached from page flow; use with positioning values: top-right-box size*/
		width: 1px;
		cursor: pointer;
	}
	
/*Portrait phone sliding drawer menu bar*/
input[type="image"] {
	display: none;		/*Hide nav dot elements; element removed*/
	}

.slAText, .slPrText, .slPuText, .slCText, .slLText {
	display: none;		/*Hide sub menu titles; element removed */
	}
	
/*------------------------------|
|     Style Checked states      |
|     Nav Mobile devices        |
|------------------------------*/

/*Portrait Mobile nav */
input:checked ~ .Full {				/*On click Full menu eases on screen, with child nav menus*/
	transform: translateX(-295px);				/*Move left*/
	-o-transform: translateX(-295px);
	-ms-transform: translateX(-295px);
	-moz-transform: translateX(-295px);
	-webkit-transform: translateX(-295px);
	transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
	
/*------------------------------|
|     Style Nav list items      |
|     Nav Mobile devices        |
|------------------------------*/

/*Style unordered Lists */		
.vNav.About, .vNav.Prod,  .vNav.Purch, .vNav.Collab, .vNav.Lic {
	list-style-type: none;			/*Remove bullets from unordered list*/
	padding: 0;						/*Reset padding*/
	margin: 0;							/*and margins*/
	z-index: 4;
	}
	
/*Style list item anchor links; Display li anchor links in block format; style items w-in ind containers */
ul.vNav li a {
	margin: 0;					/*Reset margins */
	display: inline-block;	/*on container; can apply ht wdth values; no line break; not take up full w of pg */
	text-decoration: none;		/*Remove underline*/
	width: 151px;				/*to accommodate each of two ccs across */
	height: auto;				/*auto ht to accommodate longer item text*/
	border: 1px solid #0F0;			/*Add border*/
	border-radius: 5px;					/*with rounded corners */
	background-color: #3C0;
	background-image: linear-gradient(#9Fc, #0f3, #3c3);
	padding: 10px 0;			/*Top pad to V align text in container */
	text-align: center;			/*Horiz ctr text in container */
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;		/*Style font*/
	font-size: 10px;
	color: #06F;
	z-index: 6;
	}
	
/*On item anchor hover, style button in white on red */
ul.vNav li a:hover {
	background-color: #F03;
	background-image: linear-gradient(#f33, #f00, #c06);
	color: white;
	}



/*-------------------------------|
|--------------------------------|
|     Style Nav Bar              |
|     Sm Phone screens Land      |
|          Overall               |
|--------------------------------|
|-------------------------------*/
/*one column layout for small phone landscape orientation; with 500px container and two or three column menu list drawer*/
/*Full slide out menu on phone landscape and portrait*/

@media screen and (max-width: 833px) and (min-width: 415px) and (max-height: 414px) { /*landscape phones*/

/*Display Nav menu in grid layout, w 2 equal ccs across sm screen*/
.vNav {				/*menu list items*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	}		
	
/*Default styling state of offscreen Nav container on Landscape Phones */
.Full {          /*Menu wrapper- wraps all sliding subsections of vNav menu to act as a whole */
	width: 330px;			/*Holds double column of list items (VNav) */
	height: auto;			/*encompasses all anchor links and clears footer */
	padding-left: 35px;
	position: fixed;		/*locks element to screen (no scroll); need to set position values */
	top: 100px;				/*place belowm asthead */
	right: -335px;			/*Position off screen until click checked */
	z-index: 2;
	background: #0F3;
	box-shadow: -3px 5px 5px rgba(0,204,102,1);			/*add shadow*/
	-o-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-ms-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-moz-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-webkit-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	transition: all 0.3s ease;				/*Set transitioning */
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	}

/*Show full Menu Label */
.slNav {			/*Menu title label */
	top: 50%;
	left: -10px;		/*Move left */
	position: absolute;	/*Detached from page flow; use with positioning values */
	z-index: 3;			/*assign to a layer */
	transform: translateY(-50%);			/*Vertically center Menu label*/
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: rotate(270deg);			/*Rotate to read sideways */
	font-weight: 700;			/*Style font */
	font-size: 16px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #06f;
	cursor: pointer;
	}

/*Snippet from W3C Org.  Hide checkboxes; but available for screen readers. */
.visuallyHidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;	/*Detached from page flow; Use with positioning values: top-right-box size */
		width: 1px;
		cursor: pointer;
	}
	
/*Landscape phone sliding drawer menu bar*/
input[type="image"] {
	display: none;		/*Hide nav dot elements; element removed */
	}

.slAText, .slPrText, .slPuText, .slCText, .slLText {
	display: none;		/*Hide sub menu titles; element removed */
	}
	
/*------------------------------|
|     Style Checked states      |
|     Nav Mobile devices        |
|------------------------------*/

/*Landscape Mobile nav */
input:checked ~ .Full {				/*On click Full menu eases on screen, with child nav menus */
	transform: translateX(-330px);			/*Move left */
	-o-transform: translateX(-330px);
	-ms-transform: translateX(-330px);
	-moz-transform: translateX(-330px);
	-webkit-transform: translateX(-330px);
	transition: all 0.3s ease;				/*Set transitioning */
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	}
	
/*------------------------------|
|     Style Nav list items      |
|   Landscape Mobile devices    |
|------------------------------*/

/*Style unordered lists */		
.vNav.About, .vNav.Prod, .vNav.Purch,  .vNav.Collab, .vNav.Lic {
	list-style-type: none;		/*Remove bullets */
	margin: 0;				/*Reset margins */
	padding: 0;
	z-index: 4;
	}
	
/*Style list item anchor links; Display li ancor links in block format; Style items w-in ind containers */
ul.vNav li a {
	margin: 0;				/*Rest margins */
	display: inline-block;	/*on container; can apply ht wdth values; no line break; not take up full w of pg */
	text-decoration: none;		/*Remove underline */
	width: 165px;			/*to accommodate each of two ccs across */
	height: auto;			/*Auto ht to accommodate longer item text */
	border: 1px solid #0F0;		/*Add border */
	border-radius: 5px;				/*with rounded corners */
	background-color: #3C0;
	background-image: linear-gradient(#9Fc, #0f3, #3c3);
	padding: 7px 0;			/*Top pad to V align text in container */
	text-align: center;		/*Horiz ctr text in container */
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;		/*Style font */
	font-size: 11px;
	color: #06F;
	z-index: 6;
	}
	
/*On item anchor hover, style button in white on red*/
ul.vNav li a:hover {
	background-color: #F03;
	background-image: linear-gradient(#f33, #f00, #c06);
	color: white;
	}
}

/*------------------------------|
|         Tweaks:               |
|     Style Default states      |
|     Nav Mobile 4              |
|------------------------------*/

@media screen and (max-width: 480px) and (min-width: 415px) and (max-height: 320px) {		/*landscape phone 4*/
.Full {
	top: 90px;	
	}
}

/*------------------------------|
|     Style Default states      |
|     Nav Mobile 5              |
|------------------------------*/

@media screen and (max-width: 568px) and (min-width: 481px) and (max-height: 320px) {		/*landscape phone 5*/
.Full {
	top: 90px;	
	}
}

/*------------------------------|
|     Style Default states      |
|     Nav Mobile 6-7-8          |
|------------------------------*/

@media screen and  (max-width: 667px) and (min-width: 569px) and (max-height: 375px) {		/*landscape phone 6-7-8*/
.Full {
	top: 115px;	
	}
}

/*------------------------------|
|     Style Default states      |
|     Nav Mobile 8 plus         |
|------------------------------*/

@media screen and (max-width: 740px) and (min-width: 668px) and (max-height: 414px) {		/*landscape phone 8 plus*/
.Full {
	top: 120px;	
	}
}

/*------------------------------|
|     Style Default states      |
|     Nav Mobile 10             |
|------------------------------*/

@media screen and (max-width: 833px) and (min-width: 741px) and (max-height: 375px) {		/*landscape phone 10*/
.Full {
	top: 120px;	
	}
}


/*-------------------------------|
|--------------------------------|
|     Style Nav Bar              |
|     Medium Pad screens P       |
|  Pad mini- Pad- Pro 10in       |
|--------------------------------|
|-------------------------------*/
/*one and half to two column layout for pad portrait; with dots to open close category drawers of li*/
/*Sectional slide out menu with decorative dots, hover over and section title appears on pad portrait views*/

@media screen and (max-width: 834px) and (min-width: 768px) and (min-height: 415px) and (max-height: 1112px) { /*pad portrait*/	
	
.rtNav {		/*Container  Holds a subsection of a vNav's list of items; there are five subsections */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	}
	
.vNav {		/*List items   a Section of an unordered list of menu item links; there are five separate sections */
	display: grid;
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	}

/*Default state of offscreen Nav container on Portrait Pads; Styles include width holds double column, height encompasses all button links and clears footer, fix its position, add box shadow, place off-screen, place below masthead, set transitioning*/	
.slMenu .Full {			/*Holds checkbox for Full sliding menu */
	top: 280px;    /*positions menu container from top of viewport*/
	}
	
.Full {					/*Holds all subsections of the menu */
	width: 405px;			/*Holds double column of list item vNav */
	height: 50px;				/*Ht enough to cover height of Menu title */
	padding-left: 80px;
	position: fixed;	/*Locks element position on screen (no scroll); Need to set positioning values */
	right: -415px;			/*Position off screen until click checked */
	z-index: 2;
	background: #0F3;
	transition: all 0.3s ease;			/*Set transitioning */
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	}	

/*------------------------------|
|     Style Full Nav list       |
|   Portrait Tablet devices     |
|------------------------------*/

/*Align each sliding subsection from Full menu title */		
.Full > .slSectn .rtNav {
	position: absolute;		/*Detached from page flow; use with positioning values: top-right-box size */
	}
.Full > .slSectn .rtNav.About {
	top: -15px;
	}
.Full > .slSectn .rtNav.Prod {
	top: 61px;
	}
.Full > .slSectn .rtNav.Purch {
	top: 99px;
	}
.Full > .slSectn .rtNav.Collab {
	top: 137px;
	}
.Full > .slSectn .rtNav.Lic {
	top: 213px;
	}

	
/*Show full Menu label; Vertically center menu label, assign to a layer, move it left, style font, set text color*/
.slNav {
	position: relative;		/*Placed relative to current; leaves hole where had been */
	display: inline-block;		/*on container; can apply ht wdth values; no line break; not take up full w of pg */
	top: 25px;
	left:-75px;  	/*positions menu label*/
	z-index: 3;
	transform: translateY(-50%);		/*Vertically center Menu label in title bar */
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	font-weight: 700;			/*Style font */
	font-size: 20px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #06f;
	cursor: pointer;
	}

/*Style dot graphics */
input[type="image"] {
	display: inline-block;		/*Show nav dot elements; on container; can apply ht wdth values; no line break; not take up full w of pg */
	}
	
/*Snippet from W3C Org site; Hide checkboxes visually; but available for screen reader */
.visuallyHidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;		/*Detached from page flow; use with positioining values: top-right- box size */
		width: 1px;
		cursor: pointer;
	}
	
/*Hide section headings until hovered over */
.slAText, .slPrText, .slPuText, .slCText, .slLText {
	visibility: hidden;
	}

/*Show sub section headings on Hover*/
.About label:hover .slAText, .Prod label:hover .slPrText, .Purch label:hover .slPuText, .Collab label:hover .slCText, .Lic label:hover .slLText {
	visibility: visible;
	}
		
/*Style subsection menu text labels */
span.slAText, span.slPrText, span.slPuText, span.slCText, span.slLText {
	display: inline-block;    /*can apply ht wdth values; also effects Menu label above, but left rule moves it to right*/
	width: 225px;
	text-align: end;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #06F;
	background-color: #0F3;
	box-shadow: -3px 5px 5px rgba(0,204,102,1);		/*add shadow */
	-o-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-ms-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-moz-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-webkit-box-shadow: -3px 5px 5px rgba(0,204,102,1);
}

/*Default state of offsreen Nav containers on Portrait Tablets; Styles include width to hold double column list items, height encompasses double row button links, and clears footer, position is relative, add box shadow, place off-screen, place below masthead, set transitioning*/	
.rtNav  {        		/*Sub Menu containers */
	width: 400px;		/*to accommodate two ccs across screen */
	height: auto;
	padding-left: 80px;
	position: fixed;		/*Locks element position to screen (no scroll); Need to set positioning values */
	right: 5px;		/*Position off screen */
	z-index: 2;
	background: #0F3;
	box-shadow: -3px 5px 5px rgba(0,204,102,1);		/*add shadow */
	-o-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-ms-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-moz-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	-webkit-box-shadow: -3px 5px 5px rgba(0,204,102,1);
	transition: all 0.3s ease;		/*Set transitioning */
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	}
	
.vNav {				/*Menu items */
	transform: translateX(410px);		/*Position off screen to right */
	-o-transform: translateX(410px);
	-ms-transform: translateX(410px);
	-moz-transform: translateX(410px);
	-webkit-transform: translateX(410px);
	transition: all 0.3s ease;			/*Set transitioning */
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;	
	}
	
/*Align static default state of each sub menu text to left of sub menu container although hidden, assign to a layer */
.slAText, .slPrText, .slPuText, .slCText, .slLText {
	top: 39%;
	right: 500px;
	position: absolute;		/*Detached from page flow; Use with positioning values: top-right- box size */
	z-index: 5;
	cursor: pointer;	
	}

/*Tweak each sub menu to align with graphic dot*/
.slAText {
	top: 45%;
	}

.slPrText {
	top: 6%;
	}

.slPuText {
	top: 30%;
 	}

.slCText {
	top: 32%;
	}

.slLText {
	top: -9%;
	}


/*Style container menu dot graphic; Vertically center menu dot, move it leftwise, assign to a layer */ 
.rtNav.About > input[type=image].moveImg, .rtNav.Prod > input[type=image].moveImg, .rtNav.Purch > input[type=image].moveImg, .rtNav.Collab > input[type=image].moveImg, .rtNav.Lic > input[type=image].moveImg {
	top: 50%;
	left: 10px;
	position: absolute;		/*Detached from page flow; Use with positioning values: top-right-box size */
	z-index: 8;
	transform: translateY(-50%);			/*Align dot element vertically in containers */
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: rotate(270deg);			/*Rotate element sideways */
	}
	
/*Tweak each dot image to form an outward arc */
.rtNav.About > input[type=image].moveImg {
	top: 55%;
	left: 35px;
	}

.rtNav.Prod > input[type=image].moveImg {
	top: 20%;
	left: 20px;
	}

.rtNav.Purch > input[type=image].moveImg {
	left: 9px;
	}

.rtNav.Collab > input[type=image].moveImg {
	top: 40%;
	left: 20px;
	}

.rtNav.Lic > input[type=image].moveImg {
	top: 11%;
	left: 35px;
	}

/*------------------------------|
|     Style Checked states      |
|   Nav Portrait Pad devices    |
|------------------------------*/

/*Portrait Pad nav */
/*Portrait Pad nav */
input:checked ~ .Full  {	/*On click Full menu opens to on screen (all subsections open) */
	transform: translateX(-410px);		/*Move left */
	-o-transform: translateX(-410px);
	-ms-transform: translateX(-410px);
	-moz-transform: translateX(-410px);
	-webkit-transform: translateX(-410px);
}
	
input:checked ~ .rtNav {	/*On separate clicks, each sub menu opens to on screen*/
	transform: translateX(-410px);	/*Move left */
	-o-transform: translateX(-410px);
	-ms-transform: translateX(-410px);
	-moz-transform: translateX(-410px);
	-webkit-transform: translateX(-410px);
} 


/*------------------------------|
|     Style Nav list items      |
|     Portrait Pad devices      |
|------------------------------*/

ul.vNav {
	display: contents;	/*Makes container disappear; child elms r childrn of next level up; Show list items to style them */
	list-style-type: none;		/*Remove bullets */
	padding: 0;				/*Reset margins and padding*/
	margin: 0;
	z-index: 4;
	}
	


/*Style list items; Display li in block format; style items w-in ind containers */
ul.vNav li a {
	margin: 0;				/*Rest margins */
	display: inline-block;	/*on container; can apply ht wdth values; no line break; not take up full w of pg */
	text-decoration: none;	/*Remove underline */
	width: 205px;			/*to accommodate two ccs across */
	height: auto;			/*accommodates longer text items */
	border: 1px solid #0F0;		/*Add border */
	border-radius: 5px;				/*with rounded corners */
	background-color: #3C0;
	background-image: linear-gradient(#9Fc, #0f3, #3c3);
	padding: 10px 0;			/*Top pad to vertically align text in containers */
	text-align: center;			/*Horix ctr text in containers */
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;		/*Style font */
	font-size: 14px;
	color: #06F;
	z-index: 6;
	}

/*On item anchor hover, style button in white on red */
ul.vNav li a:hover {
	background-color: #F03;
	background-image: linear-gradient(#f33, #f00, #c06);
	color: white;
	}
}


/*------------------------------|
|-------------------------------|
|     Style Nav Bar             |
|     Larger screens-           |
|    Laptops, desktops	        |
|   Medium Pad screens Land     |
|     Pro 12in Portrait         |
|      Presentation TV          |
|-------------------------------|
|------------------------------*/

/* two column layout for padL and desktop laptop; full li as animated dot nav bar*/
/*Original animated dot menu, hover over and menu item titles appear on larger widths screens*/
@media screen and (min-width: 835px) and (min-height: 720px), screen and (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {  /*pad landscape, desktop, laptop, and TV presentation screens*/
	
/*Display Nav menu in grid layout, w one ccs across menu */
.rtNav {    /*release subsection containers */
	display: initial;		/*reset to css default */
	position: static;	/*Reset to css default; normal html source flow; doesn't obey positioning values; follows box model rules */
	}
	
.Full > .slSectn .rtNav {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"navtree";
	}

ul.vNav {				/*Show all menu list items */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"menu";
	}
	
/*Reset Menu wrapper of all sliding subsections */
.Full {
	margin: 0;		/*Rest margins */
	padding: 0;
	width: 0;		/*Hide Full Menu */
	height: 0;
	position: static;	/*Reset position to css default; box model rules*/
	background: none;
	z-index: 2;
	}
	
/*Snippet from W3C Org site; Hide checkboxes visually; but available for screen reader */
.visuallyHidden {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;		/*Detached from page flow; use with positioning values: top-right-box size */
		width: 1px;
		cursor: pointer;
	}
	
/*Style sliding drawer menu bar*/
input[type="image"] {
	display: none;		/*Hide dot elements; element removed */
	}

.slNav, .slAText, .slPrText, .slPuText, .slCText, .slLText {
	position: static;	/*Reset position to css default; doesn't obey positioning values; follows box model rules */
	display: none;		/*Hide sub menu titles; element removed */
	}
	
/*Reset menu to original navigation list with decorative sparkled dots*/
.vNav.About, .vNav.Prod, .vNav.Purch,  .vNav.Collab, .vNav.Lic {
	margin: 0;			/*Reset margins */
	padding: 0;
	list-style-type: none;	/*No bullets */
	z-index: 8;
	}
	
ul.vNav li a {
	margin: 0;
	padding: 0;
	display: inline-block;		/*on container; can apply ht wdth values; no line break; doesn't take full w of pg */
	text-decoration: none;	/*Remove underline */
	width: 220px;		/*to accommodate full text */
	height: 30px;
	text-align: left;	/*Align text left */
	line-height: 30px;	/*Set same as container ht to V ctr text in container */
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;		/*Style font */
	font-size: 14px;
	color: #FFF;
	background: none;
	border: 0px;
	}
	
ul.vNav li a.home {
	margin-left: 18px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem1.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.about {
	margin-left: 9px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem2.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.comps {
	margin-left: 0px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem3.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.reqs {
	margin-left: 9px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem4.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.scores {
	margin-left: 18px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem5.png);
	background-repeat: no-repeat;	
	background-position: left center;
	}
ul.vNav li a.mp3 {
	margin-left: 27px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem6.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.buyS {
	margin-left: 36px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem7.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.buyM {
	margin-left: 45px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem8.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.SrbQ {
	margin-left: 36px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem9.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.SrbE {
	margin-left: 27px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem10.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.IG {
	margin-left: 18px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem1.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.audition {
	margin-left: 9px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem2.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.brand {
	margin-left: 0px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem3.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
ul.vNav li a.buyL {
	margin-left: 9px;
	padding-left: 20px;
	background-image: url(../Images/NavBarElem4.png);
	background-repeat: no-repeat;
	background-position: left center;
	}
	
ul.vNav li a:hover {
	visibility: visible;
	background-color: #FFF;
	color: #0C6;
	}
	
@-webkit-keyframes sparkle {
	from {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	-ms-transform: scale(1,0);
	}
	50% {
	transform: scale(1.125);
	-webkit-transform: scale(1.125);
	-moz-transform: scale(1.125);
	-o-transform: scale(1.125);
	-ms-transform: scale(1.125);
	}
	to {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	-ms-transform: scale(1.0);
	}
}

@keyframes sparkle {
	from {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	-ms-transform: scale(1,0);
	}
	50% {
	transform: scale(1.125);
	-webkit-transform: scale(1.125);
	-moz-transform: scale(1.125);
	-o-transform: scale(1.125);
	-ms-transform: scale(1.125);
	}
	to {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-o-transform: scale(1.0);
	-ms-transform: scale(1.0);
	}
}

ul.vNav li a.home, a.about, a.scores, a.buyS, a.mp3, a.buyM, a.SrbQ, a.SrbE, a.IG, a.audition, a.brand, a.buyL, a.comps, a.reqs {
	animation-name: sparkle;
	animation-duration: 2s;
	animation-iteration-count: 2;
	-webkit-animation-name: sparkle;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 2;
	-moz-animation-name: sparkle;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 2;
	-o-animation-name: sparkle;
	-o-animation-duration: 2s;
	-o-animation-iteration-count: 2;
	-ms-animation-name: sparkle;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: 2;
	text-align: left;
	}
}

/*  Special Tweak for ipads*/
@media screen and (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {

ul.vNav li a {any-pointer: coarse;}

ul.vNav li a:visited {
	visibility: visible;
	background-color: #FFF;
	color: #0C6;
	}
}