﻿
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;/* space above menu */
	padding:		0;
	list-style:		none;
	
}
.sf-menu {
	line-height:	100.0;
	float: left;
	

	
}
.sf-menu ul {
	position: static;  float: left;
	z-index: 99999;
	width:			25em; /* BOX left offset of submenus need to match (see below) ---width of dropdown menus below titles   width of dropdown horizontal lines of text */
}
.sf-menu ul li {
	width:			100%; /* Box menu tabs titles & subsmenus  */
	border-left: 2px solid #FF9900;/* padding to left of submenus below title */
	padding-left: 5px;
	margin-left:8px;
	/*		
-webkit-box-shadow: -7px 7px 21px rgba(50, 50, 50, 0.0);
-moz-box-shadow:    -7px 7px 21px rgba(50, 50, 50, 0.0);*/
box-shadow:         none;

		
}
.sf-menu li:hover {
	visibility:		inherit; /* fix IE7  */

}
.sf-menu li {
	float:			left;
	position:		relative;
		
}
.sf-menu a {
	display:		block;
	position:		relative;

}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
	
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			22em; /* match ul width    width of horizontal lines of text in dropdown */
	top:			0;
	background-color:lime;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			22em; /* match ul width    width of horizontal lines of text in dropdown  */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;   /* main menu sitting on table MAIN */
	margin-bottom:	15px;
		border-bottom:	1px solid #999999;/*  bottom of main menu */
		border-right:	1px solid #999999;/*  right of main menu */
	-webkit-box-shadow: -7px 7px 21px rgba(50, 50, 50, 0.47);
-moz-box-shadow:    -9px 9px 21px rgba(50, 50, 50, 0.47);
box-shadow:         -8px 4px 21px rgba(50, 50, 50, 0.47);
}
.sf-menu ul {


 /* Box---background in title drop down menu */
 		 /* background: #FFFddd;    Box---background in drop down menu */
	padding: 0px;			/* padding to right of catagories in drop down menu */
	padding-right: 0px;
	padding-left: 0px;
	min-height: 336px;   /*** dropdown menu separation between top and bottom catagories CLOSE TO TOP ***/
	z-index: 9989;
}
.sf-menu a {
	border-left:	1px solid #999999;/*  left of main menu */
	/*background-image:	url('http://www.kneesupport.com/1menu/nav/shadow.png') no-repeat; */
	background-color: #FFFFFF;            /*  background of main menu */
	border-top:		0px solid #ffffff; /*top menus in BOX below titles*/
	padding:	7px 0px 6px 0px;   /*** margins on main part main part main part main part main part***/
	text-decoration:none;
	line-height: 26px;   /*** height of main menu on main part MAIN MENU HEIGHT OF TABS ***/



	
}
.sf-menu li.last a {

	padding-right: 0px;  /*** controls nothing maybe ***/
	}
.sf-menu a { /* visited pseudo selector so IE6 applies text colour*/

	padding-left: 10px;
	

	font-size: 14px; /* main menu label size font*/
}


.sf-menu ul a, .sf-menu ul a:visited  { /* visited pseudo selector so IE6 applies text colour*/


	 /*color:	#000033;   font */
	line-height: 12px;  /* BOX below title menu height -vertical space */
	padding: 6px;	/* menu below title in BOX */

	/*padding-left: 4px;*/
	font-size: 14px;  /* Box -controls font after leaving below   titles */

	
}

.sf-menu li { 
	border-left: 0px solid #ddd;/* padding to left of main menu SHADOW-LEFT-Bottom MAIN MENU */

	
/*-webkit-box-shadow: -7px 7px 21px rgba(50, 50, 50, 0.47);
-moz-box-shadow:    -7px 7px 21px rgba(50, 50, 50, 0.47);
box-shadow:         -2px 2px 21px rgba(50, 50, 50, 0.47);*/

}


/*** arrows **/
.sf-menu a.sf-with-ul {
	border-right: 0px solid #999999;/* right main menu border*/
	border-top: 0px #999999 solid;	/* top main menu tab border*/

	padding-bottom: 	6px;
	padding-top: 	7px;    /*** MAIN menu padding on top ***/
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}

.sf-menu li:hover, .sf-menu a:hover {
	/*background:	#15135f  url('../images/top-menu-bg.gif') left bottom no-repeat;         */
	z-index:		2295;

	background: #1BA2DA;   /*background on rollover of main menu        */
	border-right: 0px #fff solid;
	border-top: 0px #C4D9EA solid;
	border-left: 0px #FFFFFF solid;
	border-bottom: 0px #C4D9EA solid;

	outline:		0px;
	color: #333333;
}
 .sf-menu li:hover a {
	color: #FF9933;
	padding-left: 10px;
	font-size: 14px;  /* Mainmenu-rollover font */

	
	
}
 .sf-menu li:hover li a {
 	background:transparent;
 	border: 0px;
	color: #FFFddd;
}



.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul a:focus, .sf-menu ul a:hover, .sf-menu ul a:active {
	background: #FAD3A0;    /*backgrnd on hover over expanded menu #C8C8C8   */

	outline:		0;
}


/*===========PLACEMENT AND STYLES FOR SPAN WRAP DROPDOWN===========*/





/*===========border around dropdown area knee STRAP------------------------------------------------------------ KNEE STRAPS====================================================================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap2 {

	/*background:	url('images/shadowpf.png') no-repeat right bottom; */
	padding: 0 0px 0px 0;


}
.sf-shadow ul.sf-shadow-off {
 
}
.sf-menu li span.ulwrap2 { 

	position:	absolute;
	top:		-999em;
	display: none;
	width: auto;



	float: left;
}
.sf-menu li span.ulwrap2 span.outline {
	
	

	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 555px;
	position: static;

	border-left: 0px solid #ffffff;
		border-top: 0px solid #000000;   
		border-right: 0px solid #C4D9EA;
		border-bottom: 0px solid #C4D9EA;
}

.sf-menu li:hover span.ulwrap2,
.sf-menu li.sfHover span.ulwrap2 {



	top: 20px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
}

.sf-menu li:hover span.ulwrap2.right,
.sf-menu li.sfHover span.ulwrap2.right {


	top: 0px;
	right: 0px;
	left: auto;
	display: block;
}


/*=========== around dropdown area PATELLA-STABILIZER--knee supports ==========================*/

/*** shadows for all but IE6 ***/
.sf-menu span.ulwrapknee {



		/*background:	url('images/shadowpf.png') no-repeat right bottom; */
		padding: 0 0px 0px 0;


}
.sf-shadow ul.sf-shadow-off {
	 
	

}
.sf-menu li span.ulwrapknee { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrapknee span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 555px;
	position: static;
	border-left: 0px solid #ffffff;
		border-top: 0px solid #C4D9EA;   
		border-right: 0px solid #C4D9EA;
		border-bottom: 0px solid #C4D9EA;    
	   /*=	
-webkit-box-shadow: -22px 7px 21px rgba(50, 50, 50, 0.47);
-moz-box-shadow:    -22px 7px 21px rgba(50, 50, 50, 0.47);
box-shadow:         -15px 7px 21px rgba(50, 50, 50, 0.47);

		==*/


}

.sf-menu li:hover span.ulwrapknee,
.sf-menu li.sfHover span.ulwrapknee {

	top: -19px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrapknee.right,
.sf-menu li.sfHover span.ulwrapknee.right {

	top: 9px;
	right: 0px;
	left: auto;
	display: block;
}


/*=========== around dropdown area knee  ==============================*/



/*===========border around dropdown area  Patella-Femoral PATTELLA- FEMORAL====================================================================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap-ss {

	/*background:	url('images/shadowpf.png') no-repeat right bottom; */
	padding: 0px 0px 0px 0px;


}
.sf-menu li span.ulwrap-ss { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		9995;
	float: left;
}
.sf-menu li span.ulwrap-ss span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 555px;
	position: static;
	border-left: 0px solid #ffffff;
		border-top: 0px solid #C4D9EA;   
		border-right: 0px solid #C4D9EA;
		border-bottom: 0px solid #C4D9EA;   
		/* 
	-webkit-box-shadow: -23px -7px 21px rgba(50, 50, 50, 0.47);
-moz-box-shadow:    -23px 7px 21px rgba(50, 50, 50, 0.47);
box-shadow:         -14px 7px 21px rgba(50, 50, 50, 0.67); */



}

.sf-menu li:hover span.ulwrap-ss,
.sf-menu li.sfHover span.ulwrap-ss {

	top: -58px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrap-ss.right,
.sf-menu li.sfHover span.ulwrap-ss.right {

	top: 128px;
	right: 0px;
	left: auto;
	display: block;
}


/*===========end of Patella FEMORAL supports dropdown menu =======================*/

/*===========border around dropdown area KNEE TENDONITIS===================CONDITIONS=================================================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap-back {

	/*background:	url('images/shadow2.png') no-repeat right bottom;*/
	padding: 0px 0px 0px 0px; /* top, bottom, rt, left*/


}
.sf-shadow ul.sf-shadow-off {
	 /*background: transparent;  =*/

}
.sf-menu li span.ulwrap-back { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrap-back span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 351px;
	position: static;
	border-left: 0px solid #ffffff;
		border-top: 0px solid #C4D9EA;   
		border-right: 0px solid #C4D9EA;
		border-bottom: 0px solid #C4D9EA;    
	

}

.sf-menu li:hover span.ulwrap-back,
.sf-menu li.sfHover span.ulwrap-back {

	top:-98px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrap-back.right,
.sf-menu li.sfHover span.ulwrap-back.right {

	top: 28px;
	right: 0px;
	left: auto;
	display: block;
}


/*===========end of tendonitis supports dropdown menu =======================*/



/*===========border around dropdown area  KNEE PADS     KNEE PADS support====================================================================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap-wrist {

	/*background:	url('images/shadow2.png') no-repeat right bottom;*/
	padding: 0 8px 9px 0;


}
.sf-shadow ul.sf-shadow-off {
	 /*background: transparent;  =*/

}
.sf-menu li span.ulwrap-wrist { 

	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrap-wrist span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/

	display: inline-block;
	width: 555px;
	position: static;
   
}

.sf-menu li:hover span.ulwrap-wrist,
.sf-menu li.sfHover span.ulwrap-wrist {

	top:-136px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrap-wrist.right,
.sf-menu li.sfHover span.ulwrap-wrist.right {

	top: 28px;
	right: 0px;
	left: auto;
	display: block;
}


/*===========end of wrist supports dropdown menu =======================*/

/*===========border around dropdown area  HINGED KNEE support================================================HINGED====================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap-elbow {

	padding: 0 0px 0px 0;

}


.sf-menu li span.ulwrap-elbow { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrap-elbow span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 555px;
	position: static;
	border-left: 0px solid #ffffff;
		border-top: 0px solid #C4D9EA;   
		border-right: 0px solid #C4D9EA;
		border-bottom: 0px solid #C4D9EA;    
	

}

.sf-menu li:hover span.ulwrap-elbow,
.sf-menu li.sfHover span.ulwrap-elbow {

	top: -175px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrap-elbow.right,
.sf-menu li.sfHover span.ulwrap-elbow.right {

	top: 28px;
	right: 0px;
	left: auto;
	display: block;
}


/*===========end of elbow supports dropdown menu =======================*/

/*===========border around dropdown area SPECIALTY support====================================================================================================================================*/


/*** shadows for all but IE6 ***/
.sf-menu span.ulwrap-cold {

	/*background:	url('images/shadow2.png') no-repeat right bottom;*/
	padding: 0 0px 0px 0;


}
.sf-shadow ul.sf-shadow-off {
	 /*background: transparent;  =*/

}
.sf-menu li span.ulwrap-cold { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrap-cold span.outline {
	
	
	border: 0px solid #C4D9EA;
	
  
             /*===========border around dropdown area==========*/
	display: inline-block;
	width: 442px;
	position: static;
   
	

}

.sf-menu li:hover span.ulwrap-cold,
.sf-menu li.sfHover span.ulwrap-cold {

	top:-209px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrap-cold.right,
.sf-menu li.sfHover span.ulwrap-cold.right {

	top: 28px;
	right: 0px;
	left: auto;
	display: block;
}


/*===========end of cold supports dropdown menu =======================*/



/*===========dropdown Bottom wrap COLD THERAPY supports up ====----------------------------COLD======*/



/*** shadows for all but IE6 ***/
.sf-menu span.ulwrapup {

	/*background:	url('images/shadow2.png') no-repeat right bottom; */
	padding: 0 0px 0px 0;


}
.sf-shadow ul.sf-shadow-off {
	 /*background: transparent;  =*/

}
.sf-menu li span.ulwrapup { 
	position:		absolute;
	top:			-999em;
	display: none;
	width: auto;
	/*===========   border-top: 2px solid #15135f;  ==========*/


	z-index:		295;
	float: left;
}
.sf-menu li span.ulwrapup span.outline {
	
	

	
  
             /*===========border around dropdown area BOTTTOM WRAP==========*/
	display: inline-block;
	width: 646px;
	position: static;
  
	

}

.sf-menu li:hover span.ulwrapup,
.sf-menu li.sfHover span.ulwrapup {

	top: -253px;
	left: 181px;   /*===========position right of box==========*/
	display: block;
		}
.sf-menu li:hover span.ulwrapup.right,
.sf-menu li.sfHover span.ulwrapup.right {

	top: 28px;
	right: 0px;
	left: auto;
	display: block;
}



/*===========dropdown area  up           ============================================*/
span.promowrap {
	width: 100%;
	position: relative;
	float: left;

}

/*uncomment this for enabled corners and then update your images to match*/
/*corners below*/

span.promowrap img.promo-prod-1 {


	position: absolute;
	bottom: 0px;
	right:0;
}

.sf-menu .title {

	line-height: 18px;  /*** controls space below title ***/
	margin-bottom: 6px;  /*** controls space below title ***/
	padding: 0px; 
	color: #333;  /* controls color when leaving for titles*/
	font-size:16px;
	/*text-decoration: none;   controls for titles only in dropdown*/
	border-bottom: 0px solid #fffddd; /* controls border below titles in dropdown*/
	z-index: 9998;

}
.sf-menu li:hover .title {
	/*background: #ffffff;*/
		background:transparent;

	z-index: 9999;
	color: #000000; /* font in title*/
	border-left:10px;
}

/*** controls nothing maybe NOTHING ***/



/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	157px;   /*main menu width */
	z-index:  122;

}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	left:	169px; /* match ul width */
	top:	0;
	z-index:  992;
}

