.affix {
      top: 0;
      width: 100%; 
     z-index: 10;
  }


/* padding top is where the main body jumps to when nav sticks so padding+nav */
  .affix + .container-fluid {
      padding-top: 70px;
  }
  

  
/* border on uncollapsed sizes only */  
@media only screen and (min-width : 768px) {
	.border-box {
		background: #FFE5FF;
		border: #000000 solid 1px;
		z-index: 1500;
		/* padding: 10px; */
		margin: 10px;
	}
}

@media only screen and (max-width : 767px) {
	.border-box {
		background: #FFE5FF;
		border: none;
		padding-top: 10px;

	}
} 
 
 
 
/* for main pages only  */ 	

.bodymaintext { 
	font-family: inherit; 
	margin: 20px 10px 20px 10px;  
	}

.bodymaintext a { 
	color: #B70089; 
	text-decoration: underline; 
}

.bodymaintext a:link { 
	color: #93006F; 
	text-decoration: underline; 
}

.bodymaintext a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}
 
 
 .yarninfo	{
	margin: 15px; 	

}  
 
 
/* for main body for product pages - usually used after row  */ 	



.bodytext { 
	font-family: inherit; 
	font-size: 16px; 
	margin: 20px 10px 20px 10px;  
	}

.bodytext a { 
	color: #B70089; 
	text-decoration: underline; 
}

.bodytext a:link { 
	color: #93006F; 
	text-decoration: underline; 
}

.bodytext a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}
/*.bodytext p {*/ 
/*	margin: 10px 5px 10px 5px; */  
/*}*/ 

 for main index only  */ 
	
.bodyindex { 
	font-family: inherit; 
	}

.bodyindex a { 
	color: #B70089; 
	text-decoration: underline; 
}

.bodyindex a:link { 
	color: #93006F; 
	text-decoration: underline; 
}

.bodyindex a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}

.cbpics	{
		border:1px solid #000; 
	}
.cbpics2	{
		border:1px solid #000; 
		margin: 20px 0 5px 0;  
	}
.cbpics3	{
		border:1px solid #000; 
		margin: 10px 20px 10px 5px;  
	}
	
	

 


.tablemain 
		{ text-align: center; background-color:#FFCCFF; border: 1px solid black;} 
.tablemain thead
		{ text-align: center; color: #FFFFFF; background-color:#B70089;} /* CCCCFF change to color: #FFFFFF; when everything done */
.tablemain th
		{ text-align: center;}
.tablemain caption
		{ text-align: center; color: black; }	
.tablemain td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}	
	
	
	
	
	
.colheadsize { text-align: center; color: #000; background-color:#DB83C9;} /* for size header in tables */
		

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid black; vertical-align: middle;
}
	

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: #CCCCFF; 
 }
/* something to do with sorting of tables - making top row change colour on hover and sort*/
table.list th:hover {
    background-color: #DB83C9; /* 92b7ff */
    color: #B70089; 
}


.tableupdate /* for main table on updates page */
		{ text-align: left; width: 100%; background-color:#EEEEEE; border-collapse: collapse; border: 1px solid black;} 
.tableupdate td { padding: 25px !important;  
 	}	
.tableupdate a { 
	color: #B70089; 
		font-weight: 600;

	text-decoration: underline;
}

.tableupdate a:link { 
	color: #B70089; 
		font-weight: 600;

	text-decoration: underline;
}

.tableupdate a:hover { 
	color: #93006F; 
	font-weight: 600;
	text-decoration: underline;
}
	
	

.tableupdateinner /* for pink inner table on updates page */
		{ text-align: left; width: 100%; background-color:#F5CEFF; border-collapse: collapse; border: 2px solid; border-color: #AEAEFF } 
.tableupdateinner td { padding: 25px; 
 	}	
 	
.tableupdateinner td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}	


.tableupdateinner2 /* for blue inner table on updates page */
		{ text-align: left; width: 100%; background-color:#ccccff; border-collapse: collapse; border: 2px solid; border-color: #AEAEFF } 
.tableupdateinner2 td { padding: 25px; 
 	}	
 	
	

.tableupdateinner3 /* for kits inner table on updates page */
		{ text-align: left; width: 100%; background-color:#FFFFCC; border-collapse: collapse; border: 2px solid; border-color: #B1D8B1} 
.tableupdateinner3 td { padding: 25px; 
 	}	
 	
.tableupdateinner3 td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}	





/* modal pictures */
.modalcol {
	background-color:#FFE5FF; text-align: right;
}	
.modalcol img {
	   border:1px solid #000; 
}
.modalwhite img {
	   border:1px solid #000; 
}
.modalwhite {
	text-align: right;
}	

/* remove space between buttons on terms page */
.no-gutter-button > [class*='col-'] {
    /* padding-right:0; */
    /* padding-left:0; */
    padding:7px;
   
}

/* removes the padding so on product pages the two columns at top with a picture lines up with heading */

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/* dark section at top of crafty knits */

.subyarn {
	background-color:#B70089; 
	color: #FFFFFF; /* CCCCFF change to color: #FFFFFF; when everything done */
	margin: 0;
	padding: 20px 20px 10px 20px; 
 	border: 1px solid #000;

	}
/*  crafty knits only */
.yarncol {
	background-color:#FFCCFF;   /* c1d6ff  */
	margin: 0;
}	
	
.yarnblock {
	background-color:#FFCCFF;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #000;
	min-height: 255px;
 
	}
	
	.yarnblockbase {
	background-color:#CCCCFF;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #000;
 
	}

.yarnblockempty {
	background-color:#FFCCFF;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #000;
	 min-height: 255px;
 
	}

.yarnpic	{
		margin-top: 25px; 
		margin-bottom: 30px;
		border:1px solid #000; 
}
.yarntext	{
	margin-top: 20px; 	
	margin-bottom: 5px; 
	margin-left: 15px; 
	margin-right: 15px; 
    text-align: center;
}



.handpicture {
 cursor: pointer;
}


/* other styling */


.tableyarn   { border:2px solid #DDDDDD; text-align: center; width: 90%; background-color:#FFF; margin: auto; }
.tableyarn td  { padding:10px; width:33%; vertical-align: top;  }
.tableyarn th  { border:1px solid #DDDDDD; text-align: center; background-color:#F5F5F5; }
.tableyarn p {margin-top: 5px; margin-bottom: 5px; }

.tablecreate {  }
.tablecreate td  { padding:10px; height:80px; }
.tablecreate p {margin-top: 5px; margin-bottom: 5px; }



.footpad       { 
	padding: 15px; 
	font-size:10px; 
	text-align:center; 
	}
	
.footpad a { 
	color: #B70089; 
	text-decoration: underline; 
}

.footpad a:link { 
	color: #B70089; 
	text-decoration: underline; 
}

.footpad a:hover { 
	color: #93006F; 
	text-decoration: underline; 
}
	
.othertext	{
	margin: 20px; 
}

.othertext a { 
	color: #B70089; 
	text-decoration: underline; 
}

.othertext a:link { 
	color: #B70089; 
	text-decoration: underline; 
}
.othertext a:hover { 
	color: #93006F; 
	text-decoration: underline; 
}
	
.survey-bg   { 
	background-color: #FFFFFF; 
	width:100%; 
	max-width:700px;
}
	
.survey-q   { 
	display: block; 
	padding: 5px; 
	background-color:#D8E8F8; 
	width:100%; 
	max-width:700px;
}
	
.surveyanswer  { 
	color: #0000FF; 
	font-style: italic;
}	

.divlink a { 
	text-decoration: none; 
	color: #000000;
}

.divlink img { 
   border:1px solid #000;
}

.divlink a:link { 
	text-decoration: none; 
	color: #000000; 
}
.divlink a:hover { 
	text-decoration: none; 
	color: #000000; 
}	
	
.media-padding { 
	padding: 15px;  
}

.textnew { 
	color: red; 
	}
	
.textupper { 
	text-transform: uppercase; 
	}
		
.textupperbold { 
	text-transform: uppercase; 
	  font-weight: bold;
	}
	
	
.infonew {
	 margin: 50px 0 0 10px; /* for picture for NEWEST ITEMS */
	   font-size: 16px;
  font-weight: bold;
  /* color: #B70089;   fff */
     background-color: #B70089;
}

.infonewbtn {
	margin: 0 0 -14px 0; /*  22px 0 0 10px; */
	   font-size: 16px;
  font-weight: bold;
  /* color: #99CC99;   fff */
     background-color: #B70089;
}



.tx10x { 
	font-family: inherit; 
	font-size: 10px; 
	}

.tx20 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 18px;
}
.tx22 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 20px;
}

.socialmain {
  width: 32px;
  height: 32px;
  float:none; 
   margin: 8px 0 8px 0;
}

.social {
  width: 32px;
  height: 32px;
 margin: 25px 0 10px 0;
}
.social-inner {
  width: 32px;
  height: 32px;
 /* margin: 25px 0px 10px 0; */
}

.headtext {
 /* margin-left:30px;  */
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}

.headtext a { 
	color: #B70089; 
	text-decoration: underline;
}

.headtext a:link { 
	color: #B70089; 
	text-decoration: underline;
}

.headtext a:hover { 
	color: #93006F; 
	text-decoration: underline;
}


.headingstext { 
	font-family: inherit; 
	font-size: 18px; 
	font-weight: 600;
	text-transform: uppercase;
	  }




.tx18 { 
	font-family: inherit; 
	font-size: 18px; 
	font-weight: 600;
	  }

.tx16 { 
	font-family: inherit; 
	font-size: 16px; 
	font-weight: 600;
	  }




.headtextinner {
 margin-left:15px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}
.headtextinner a { 
	color: #B70089; 
	text-decoration: underline; 
}

.headtextinner a:link { 
	color: #B70089; 
	text-decoration: underline; 
}

.headtextinner a:hover { 
	color: #93006F; 
	text-decoration: underline;
}

.infotext {
/* margin-left:30px; */
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}

.infotext a { 
	color: #B70089; 
	text-decoration: underline 
}

.infotext a:link { 
	color: #B70089; 
	text-decoration: underline 
}

.infotext a:hover { 
	color: #93006F; 
	text-decoration: underline 
}

.infotextx {
 margin-left:30px; 
 margin-right:50px; 
 margin-top:10px; 
 margin-bottom:0;
}

.infolink a { 
	color: #B70089; 
	text-decoration: underline 
}

.infolink a:link { 
	color: #B70089; 
	text-decoration: underline 
}

.infolink a:hover { 
	color: #93006F; 
	text-decoration: underline 
}

a.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}


.pink-line { 
	height: 6px; 
	background-color: #B70089; 
	margin: 12px;
}

.pink-line-sm  { 
	height: 2px; 
	background-color: #B70089; 
	margin: 12px;
}
.pink-line-smid {
	background-color: #B70089; 
	width: 100%;
	height: 2px;
	margin: 12px 0 12px 0;
}
.pink-line-smidlg {
	background-color: #B70089; 
	width: 100%;
	height: 6px;
	margin: 12px 0 12px 0;
}




#topage {
  position: fixed;
  z-index: 999;
  position: fixed; 
  right: 10px;
  bottom: 20px;  
}


/* Make Navigation Toggle on Desktop Hover */ 
@media only screen and (min-width : 768px) {
	.dropdown:hover .dropdown-menu {
		display: block;
    }
}

/* INDICATORS ON SLIDE SHOWS */

/* carousel carousel-indicators colour */

.carousel-indicators {
  bottom:-50px;
}

.carousel-inner {
   margin-bottom:50px;
}


/*.carousel-control.left, .carousel-control.right {*/
/*    background-image: none*/
/*}*/

 .carousel-indicators-pink li {
 margin: 30px 0 0 0;
   background-color: #CCCCFF;

 }
 .carousel-indicators-pink li.active, .carousel-indicators-pink li:hover {
  margin: 30px 0 0 0;
   background-color: #93006F;
 }



/* new breadcrumb colours */


.breadcrumb-new {
	background-color: #FFE5FF; 
	border: 0px; 
	border-radius: 0px; 
	display: block;
}
.breadcrumb-new li {
	font-size: 12px;
}
.breadcrumb-new a {
	color: #B70089; 
	text-decoration: underline;
}
.breadcrumb-new a:hover {
	color: #93006F;
}
.breadcrumb-new >.active {
	color: #000;
}
/* :before.breadcrumb-new>li+li {color: #000;) content: "\232A\00a0"; } NO IDEA WHAT THIS IS FOR*/
.breadcrumb-new>li+li:before {color: #B70089; content: "\007C\00a0";}  /* between text */

.breadcrumb li {
    margin-right: 1px;
}

/* BUTTONS for top plus most buttons except tables which uses this in even row and top2 for odd */

.btn-info-top {
  color: #FFFFFF;  /* fff WHITE */
  background-color: #B70089; /* 5bc0de LIGHTEST BLUE */
  border-color: #93006F; /*  46b8da MID BLUE */
}
.btn-info-top:focus,
.btn-info-top.focus {
  color: #000; /* fff WHITE */
  background-color: #CCCCFF; /* 31b0d5  DARKEST BLUE */
  border-color: #93006F; /* 1b6d85 DARK BLUE */
}
.btn-info-top:hover {
  color: #000;  /* fff WHITE */
  background-color: #CCCCFF;  /* 31b0d5 DARKEST BLUE */
  border-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
}
.btn-info-top:active,
.btn-info-top.active,
.open > .dropdown-toggle.btn-info-top {
  color: #000;  /* fff WHITE */ 
  background-color: #CCCCFF;  /* 31b0d5 DARKEST BLUE */
  border-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
}
.btn-info-top:active:hover,
.btn-info-top.active:hover,
.open > .dropdown-toggle.btn-info-top:hover,
.btn-info-top:active:focus,
.btn-info-top.active:focus,
.open > .dropdown-toggle.btn-info-top:focus,
.btn-info-top:active.focus,
.btn-info-top.active.focus,
.open > .dropdown-toggle.btn-info-top.focus {
  color: #fff;  /* fff WHITE */
  background-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
  border-color: #CCCCFF;  /* 1b6d85 DARK BLUE */
}
.btn-info-top:active,
.btn-info-top.active,
.open > .dropdown-toggle.btn-info-top {
  background-image: none;
}
.btn-info-top.disabled,
.btn-info-top[disabled],
fieldset[disabled] .btn-info-top,
.btn-info-top.disabled:hover,
.btn-info-top[disabled]:hover,
fieldset[disabled] .btn-info-top:hover,
.btn-info-top.disabled:focus,
.btn-info-top[disabled]:focus,
fieldset[disabled] .btn-info-top:focus,
.btn-info-top.disabled.focus,
.btn-info-top[disabled].focus,
fieldset[disabled] .btn-info-top.focus,
.btn-info-top.disabled:active,
.btn-info-top[disabled]:active,
fieldset[disabled] .btn-info-top:active,
.btn-info-top.disabled.active,
.btn-info-top[disabled].active,
fieldset[disabled] .btn-info-top.active {
  background-color: #B70089; /* 5bc0de LLIGHTEST BLUE */
  border-color: #93006F; /* 46b8da MID BLUE */
}
.btn-info-top .badge {
  color: #B70089;  /* 5bc0de LIGHTEST BLUE*/
  background-color: #fff; /* fff WHITE */
}



/* BUTTONS for tables odd rows changes the background on hover to pink instead of blue */

.btn-info-top2 {
  color: #FFFFFF;  /* fff WHITE */
  background-color: #B70089; /* 5bc0de LIGHTEST BLUE */
  border-color: #93006F; /*  46b8da MID BLUE */
}
.btn-info-top2:focus,
.btn-info-top2.focus {
  color: #000; /* fff WHITE */
  background-color: #FFCCFF; /* 31b0d5  DARKEST BLUE */
  border-color: #93006F; /* 1b6d85 DARK BLUE */
}
.btn-info-top2:hover {
  color: #000;  /* fff WHITE */
  background-color: #FFCCFF;  /* 31b0d5 DARKEST BLUE */
  border-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
}
.btn-info-top2:active,
.btn-info-top2.active,
.open > .dropdown-toggle.btn-info-top2 {
  color: #000;  /* fff WHITE */ 
  background-color: #FFCCFF;  /* 31b0d5 DARKEST BLUE */
  border-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
}
.btn-info-top2:active:hover,
.btn-info-top2.active:hover,
.open > .dropdown-toggle.btn-info-top2:hover,
.btn-info-top2:active:focus,
.btn-info-top2.active:focus,
.open > .dropdown-toggle.btn-info-top2:focus,
.btn-info-top2:active.focus,
.btn-info-top2.active.focus,
.open > .dropdown-toggle.btn-info-top2.focus {
  color: #fff;  /* fff WHITE */
  background-color: #93006F;  /* 269abc JUST UNDER DARKEST BLUE*/
  border-color: #FFCCFF;  /* 1b6d85 DARK BLUE */
}
.btn-info-top2:active,
.btn-info-top2.active,
.open > .dropdown-toggle.btn-info-top2 {
  background-image: none;
}
.btn-info-top2.disabled,
.btn-info-top2[disabled],
fieldset[disabled] .btn-info-top2,
.btn-info-top2.disabled:hover,
.btn-info-top2[disabled]:hover,
fieldset[disabled] .btn-info-top2:hover,
.btn-info-top2.disabled:focus,
.btn-info-top2[disabled]:focus,
fieldset[disabled] .btn-info-top2:focus,
.btn-info-top2.disabled.focus,
.btn-info-top2[disabled].focus,
fieldset[disabled] .btn-info-top2.focus,
.btn-info-top2.disabled:active,
.btn-info-top2[disabled]:active,
fieldset[disabled] .btn-info-top2:active,
.btn-info-top2.disabled.active,
.btn-info-top2[disabled].active,
fieldset[disabled] .btn-info-top2.active {
  background-color: #B70089; /* 5bc0de LLIGHTEST BLUE */
  border-color: #93006F; /* 46b8da MID BLUE */
}
.btn-info-top2 .badge {
  color: #B70089;  /* 5bc0de LIGHTEST BLUE*/
  background-color: #fff; /* fff WHITE */
}


.alert-success2 {
color: #93006F;
background-color: #FFCCFF;
border-color: #CCCCFF;
}
.alert-success2 hr {
border-top-color: #CCCCFF;
}
.alert-success2 .alert-link {
color: #93006F;
}

.glyphicon-ok:before {
  content: "\e013";
}





.navbar-inverse {
  background-color: #B70089;  /* B70089 navbar main background including button */
  border-color: #CCCCFF;  /* 080808 border above navbar */
}
.navbar-inverse .navbar-brand {
  color: #fff;  /* fff text colour of brand on bar*/
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #000;  /* CCCCFF text hover colour on brand*/
  background-color: transparent;  /* transparent hover bg colour brand*/
}
.navbar-inverse .navbar-nav > li > a {
  color: #FFF;     /* fff text colour of links in nav bar and dropdowns*/
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #000;  /* B70089 colour of text of links on hover*/
  background-color: #CCCCFF;  /* transparent background on hover on nav and drop*/
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #B70089;  /*  fff doesnt seem to change anything */
  background-color: #93006F; /* CCCCFF 080808 doesnt seem to change anything*/
}
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #B70089;  /* fff doesnt seem to do anything*/
    background-color: #93006F;  /* 080808 almost black doesnt seem to do anything */
  }


.navbar-inverse .navbar-toggle {
  /* border-color: #CCCCFF; */
  border: #ffffcc solid 2px; /* changes colour of border around menu button /*
 /* background-color: #FF0000;  adding this made hover on button stop working but then didn't but leave off*/ 
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #93006F;  /* CCCCFF changes the colour on hover of button */
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #CCCCFF;  /* 101010 almost black line between nav and drop on mob*/
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #CCCCFF;  /* fff colour of text when link active */
  background-color: #93006F;  /* when clicked on hover - colour sucess */
}
/* for small screens */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;  /* ffffcc 9d9d9d on small screen - colour of links in dropdown */
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #000;  /* fff hover colour of links in dropdown on small screen*/
    background-color: #CCCCFF;  /* transparent - background colour on hover */
  }
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #B70089; /* fff change dropdown background colour */
  /* -webkit-background-clip: padding-box; */
          background-clip: padding-box;
  border: #ccc 1px solid;
  border: rgba(0, 0, 0, .15) solid 1px;
  border-radius: 4px;
  /* -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); */
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #B70089; /* fff change dropdown background colour */
  /* -webkit-background-clip: padding-box; */
          background-clip: padding-box;
  border: #ccc 1px solid;
  border: rgba(0, 0, 0, .15) solid 1px;
  border-radius: 4px;
  /* -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); */
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 2.1;  /* 1.42857143 */
  color: #fff; /* 333 text colour */
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #000; /* 262626 text colour on hover*/
  text-decoration: none;
  background-color: #CCCCFF;  /* f5f5f5 background on hover */
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #B70089; /* fff */
  text-decoration: none;  
  background-color: #93006F;  /* 337ab7 */
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;  /* 777 */
}
/* .dropdown-menu > .disabled > a:hover, */
/* .dropdown-menu > .disabled > a:focus {*/
/*   text-decoration: none; */
/*  cursor: not-allowed; */
/*  background-color: transparent; */ /* transparent */
/*  background-image: none; */
/*  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
/* } */

ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin-left:0;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
margin:20px 0 20px -40px; /* first number is top - second number is side - third is bottom - forth is other side */
}
ul.enlarge img{
background-color:#000000; /* colour around the image  */
padding: 0;   /* space around the image */
}
ul.enlarge span{
position:absolute;
left: -9999px;
background-color:#000000;
padding: 0;
color: #000000; 
}
ul.enlarge li:hover{
z-index: 9;
cursor:pointer;
}
ul.enlarge span img{
padding:1px;
background:#000000;
}
ul.enlarge li:hover span{ 
top: -50px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 0; /*distance from the left of the thumbnail to the left of the popup image*/
}
/* ul.enlarge img, ul.enlarge span{ */
/* behavior: url("../pie/PIE.htc"); */
/* } */