body {
  background: #D8E4FB; /* OLD SITE D8E8F8 -  BACKGROUND FOR NEW*/
}




  .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;
  }
 

/* padding for anchor bookmark to jump up page a little */
.jump {
      padding-top: 70px;
  }

 

/* other styling */

/* BUTTONS  */

.btn-info-top {
  color: #000;  /* fff WHITE */
  background-color: #6699FF; /* 5bc0de LIGHTEST BLUE */
  border-color: #3366CC; /*  46b8da MID BLUE */
}
.btn-info-top:focus,
.btn-info-top.focus {
  color: #fff; /* fff WHITE */
  background-color: #003399; /* 31b0d5  DARKEST BLUE */
  border-color: #3366CC; /* 1b6d85 DARK BLUE */
}
.btn-info-top:hover {
  color: #fff;  /* fff WHITE */
  background-color: #003399;  /* 31b0d5 DARKEST BLUE */
  border-color: #3366CC;  /* 269abc JUST UNDER DARKEST BLUE*/
}
.btn-info-top:active,
.btn-info-top.active,
.open > .dropdown-toggle.btn-info-top {
  color: #fff;  /* fff WHITE */ 
  background-color: #003399;  /* 31b0d5 DARKEST BLUE */
  border-color: #3366CC;  /* 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: #3366CC;  /* 269abc JUST UNDER DARKEST BLUE*/
  border-color: #003399;  /* 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: #6699FF; /* 5bc0de LLIGHTEST BLUE */
  border-color: #3366CC; /* 46b8da MID BLUE */
}
.btn-info-top .badge {
  color: #6699FF;  /* 5bc0de LIGHTEST BLUE*/
  background-color: #fff; /* fff WHITE */
}


/* NEXT AND PREVIOUS ON PATTERNS */
 

.pagerpat li > a, 
.pagerpat li > span {
   text-decoration: none !important;
 color: #000;  /* fff WHITE */
  background-color: #6699FF; /* fff */
  border: 1px solid #3366CC;  /* ddd */
}

.pagerpat li > a:hover,
.pagerpat li > a:focus {
  text-decoration: none;
    color: #fff;  /* fff WHITE */
background-color: #003399; /* EEE */
}

/* TEXT ON HOME PAGE LOGO */
.homelogo {font-size:14px;    
 font-weight: bold;
	}





/* TEXT ON HOME PAGE BELOW NAV */
.hometext {font-size:24px; text-align:center; padding: 5px 20px 5px 20px;
	}
/* FOOTPAD STUFF ON NEW */ 
.footpad       { 
	padding: 5px;  
	font-size:10px; 
	text-align:center; 
	 margin: 0 50px 0 25px; 

	}
.footpad a { 
	color: #003399; 
	text-decoration: underline; 
}
.footpad a:link { 
	color: #003399; 
	text-decoration: underline; 
}
.footpad a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}

/* BELOW USED */
.social {
  width: 32px;
  height: 32px;
 margin: 10px 0 10px 0;
}
.social-inner {
   float: right;
  width: 32px;
  height: 32px;
}

/* ABOVE USED  */

.floatright {
  float: right;
}


/* border on uncollapsed sizes only */  

@media only screen and (min-width : 768px) {
.blockcolour {
	background-color:#c1d6ff;  /* c1d6ff  */
	margin: 0;
	border: 1px solid #003399;	 
	}
}
@media only screen and (max-width : 767px) {
.blockcolour {
	background-color:#c1d6ff;   /* c1d6ff  */
	border-top: 1px solid #003399;	 
	border-bottom: 1px solid #003399;	 

	}
}

/* style for visa cards */
.visa-card {
 margin: 5px;
}


.homealantext { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px; 
	}

.homealantext a { 
	color: #003399; 
	text-decoration: underline; 
}

.homealantext a:link { 
	color: #003399; 
	text-decoration: underline; 
}
.homealantext a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}	


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


.patterntext { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 10px 0 5px;
	}
.patterntext a { 
	color: #003399; 
	text-decoration: underline; 
}

.patterntext a:link { 
	color: #003399; 
	text-decoration: underline; 
}

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

/* not really needed as same as above */
.sublimepatterntext { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 10px 0 5px; 
	}
.sublimepatterntext a { 
	color: #003399; 
	text-decoration: underline; 
}

.sublimepatterntext a:link { 
	color: #003399; 
	text-decoration: underline; 
}

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



	
.bodytext { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 40px 20px 20px; 
	}

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

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

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

 
 
 
 
 
.patternthumb { 
	font-family: inherit; 
	font-size: 14px; 
	/* margin: 20px 40px 20px 20px; */
	padding: 10px; 
	background-color:#A8C4FB;   /* c1d6ff  */
	border-style: solid;
	border-color: #003399;
    border-width: 1px 2px 1px 2px;
	}
.patternthumb p { 
	margin: 10px 0 10px 0; 
} 
.patternthumb a { 
	color: #003399; 
	text-decoration: underline; 
}

.patternthumb a:link { 
	color: #003399; 
	text-decoration: underline; 
}

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

.yarnblock {
	background-color:#A8C4FB;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #003399;
	min-height: 210px;
 
	}
.yarnblocktest {
	background-color:#A8C4FB;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #003399;
	 /*min-height: 210px; */
 
	}
.yarnblockempty {
	background-color:#A8C4FB;   /* c1d6ff  */
	margin: 0;
	border: 1px solid #003399;
	 min-height: 217px;
 
	}
	
.subyarnblock {
	background-color:#A8C4FB;   /* c1d6ff  */
	 margin: 0;
	 /*padding: 20px 10px 0 5px; */

	border-top: 1px solid #003399;
	border-left: 1px solid #003399;
	border-right: 1px solid #003399;
	min-height: 210px;
 
	}
.subyarn {
	background-color:#6699FF; 
	margin: 0;
	padding: 20px 20px 10px 20px; 
 	border: 1px solid #003399;

	}
.yarncol {
	background-color:#A8C4FB;   /* c1d6ff  */
	margin: 0;
 
	}

.yarntext	{
	margin-top: 20px; 	
	margin-bottom: 5px; 
	margin-left: 15px; 
	margin-right: 15px; 
    text-align: center;
}


.yarninfo	{
	margin: 15px; 	

}

.yarnpic	{
	margin-top: 20px; 
}
.yarnpictop	{
	margin-top: 25px; 
}

.yarnpicbot	{
		margin-bottom: 25px; 
}
.yarnpicboth	{
		margin-top: 25px; 
		margin-bottom: 30px; 
}

.yarnprice { 
	font-family: inherit; 
    font-weight: bold;
	font-size: 18px; 
	}
	 
.patternprice { 
	font-family: inherit; 
    font-weight: bold;
	font-size: 30px; 
	/* margin: 20px 0 0 0; */
	}
	
.patternpricesm { 
	font-family: inherit; 
    font-weight: bold;
	font-size: 20px; 
	}

a.patternlink:link, a.patternthumb:visited  {
    display: inline-block;
    color: #000;  /* 0000FF*/ 
    background-color: #6699FF;  /* 98D0FF*/ 
  border: 1px solid #3366CC;  /* ddd */
  border-radius: 10px;
    width: 120px;
    text-align: center;
    padding: 4px;
    margin: 30px 0 20px 0;
    text-decoration: none;
}

a.patternlink:hover, a.patternthumb:active {
    background-color: #003399;  /* D0F0FF */  
        color: #fff;
}

a.patterndet, a.patternthumb:visited {
    display: inline-block;
    color: #000;  /* 0000FF*/ 
    background-color: #6699FF;  /* 98D0FF*/ 
  border: 1px solid #3366CC;  /* ddd */
  border-radius: 10px;
    width: 120px;
    text-align: center;
    padding: 4px;
    margin: 30px 0 20px 0;
    text-decoration: none;
}

a.patterndet:hover, a.patternthumb:active {
    background-color: #003399;  /* D0F0FF */  
        color: #fff;
            text-decoration: none;

}
 

/* carousel carousel-indicators colour */

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

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


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

 .carousel-indicators-blue li {
 margin: 30px 0 0 0;
   background-color: #6699ff;

 }
 .carousel-indicators-blue li.active, .carousel-indicators-blue li:hover {
  margin: 30px 0 0 0;
   background-color: #003399;
 }

.bodytextcb { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 40px 20px 20px; 
	}

.bodytextcb a { 
	color: #800080; 
	text-decoration: underline; 
}

.bodytextcb a:link { 
	color: #800080; 
	text-decoration: underline; 
}
.bodytextcb a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}	

.bodytextck { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 40px 20px 20px; 
	}

.bodytextck a { 
	color: #008000; 
	text-decoration: underline; 
}

.bodytextck a:link { 
	color: #008000; 
	text-decoration: underline; 
}
.bodytextck a:hover { 
	color: #FF0000; 
	text-decoration: underline; 
}	
	

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

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

.holiday { 
	font-family: inherit; 
	font-size: 18px; 
	font-weight: 600;
	color: red;
	font-style: italic;
	  }

.dianne { font-family: Times New Roman; 
				color: #0000ff;
				text-decoration: underline;
					font-style: italic; 
               	font-weight: bold;
       }
.ky { font-family: Times New Roman; 
               	font-weight: bold;
       }

/* TABLE STYLING */
.tableinfo 
		{ text-align: center; background-color:#A8C4FB;} /* A8C4FB */
.tableinfo thead
		{ text-align: center; background-color:#6699FF;} /* 6699FF */
.tableinfo th
		{ text-align: center; }
.tableinfo caption
		{ text-align: center; color: #000000; }		
	
	
.tablehabi 
		{ text-align: center; background-color:#A8C4FB;} 
.tablehabi thead
		{ text-align: center; background-color:#6699FF;} 
.tablehabi th
		{ text-align: center; }
.tablehabi caption
		{ text-align: center; color: #000000; }		
	
		
.tablebook 
		{ text-align: center; background-color:#A8C4FB;} /* A8C4FB */
.tablebook p 
		{ margin: 5px; } 
.tablebook thead
		{ text-align: center; padding: 5px; background-color:#6699FF;} /* 6699FF */
.tablebook th
		{ text-align: center; padding: 5px; } 
.tablebook td
		{ text-align: center; padding: 5px; } 
.tablebook caption
		{ text-align: center; color: #000000;}

.tablebasic 
		{ text-align: center; border:1px solid #000000; background-color:#D8E4FB; font-size: 12px;} /* F0F0F0 */
.tablebasic th
		{ text-align: right; border:1px solid #000000; padding: 5px;}
.tablebasic td
		{ text-align: center; border:1px solid #000000; padding: 5px;}
.tablebasic caption
		{ text-align: left; font-weight: bold; font-size: 14px;}


.slideshowtext { text-align: center; margin: 50px; }


.preorder { 
	font-family: inherit; 
	font-size: 14px; 
	padding: 10px; 
	}
	
.preorder p { 
	margin: 10px 0 10px 0; 
} 


 		
table.list th:hover {
    background-color: #003399; /* 92b7ff */
    color: #FFF; 
}

.scarfinfo 
		{ background-color:#A8C4FB;} /* A8C4FB */
.scarfinfo thead
		{ background-color:#6699FF;}  /* 6699FF */


/* old 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; }
/* old styling */
.tablecreate {  }
.tablecreate td  { padding:10px; height:80px; }
.tablecreate p {margin-top: 5px; margin-bottom: 5px; }



/* old styling */	
.othertext	{
	margin: 20px; 
}

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

.othertext a:link { 
	color: #000099; 
	text-decoration: underline; 
}
.othertext a:hover { 
	color: #99CC99; 
	text-decoration: underline; 
}
	/* ABOVE ALL old styling */
	
	/* old styling BUT MAY BE USED ON SURVEY PAGES */
.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;
}	
/* ABOVEold styling BUT MAY BE USED ON SURVEY PAGES */

/* BELOW USED ON NEW FOR MAIN BOXES ON HOME */


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

.divlinkmain a:link { 
	text-decoration: none; 
	color: #000000; 
}
.divlinkmain a:hover { 
	text-decoration: none; 
	color: #000000; 
}	

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

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


/* ABOVE USED ON NEW FOR MAIN BOXES ON HOME */

/* BELOW USED ON page for contacts */

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

}

.divlinkc a:link { 
	text-decoration: none; 
		color: #000000;

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

}	

/* above USED ON page for contacts */



.feed-col {
   /* border-left: 1px solid #003399;*/
   	background-color: #A8C4FB;  /* c1d6ff  */
min-height: 650px;
}



.textnew { 
	color: red; 
	}
	
/* BELOW OLD SITE BUT MAY BE NEEDED */

.tx20 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 20px;
}
.tx22 { 
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
	font-size: 22px;
}
/* ABOVE OLD SITE BUT MAY BE NEEDED */



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

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

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

.headtext a:hover { 
	color: #99CC99; 
	text-decoration: underline;
}

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

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

.headtextinner a:hover { 
	color: #99CC99; 
	text-decoration: underline;
}



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

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

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

.infotext a:hover { 
	color: #99CC99; 
	text-decoration: underline 
}

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

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

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

.infolink a:hover { 
	color: #99CC99; 
	text-decoration: underline 
}

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



/* ABOVE NOT USED */


/* BELOW MAY BE USED */
.blue-line  { height: 6px; 
	background-color: #003399; 
	margin: 12px;
}
.blue-line-sm  { 
	height: 2px; 
	background-color: #003399; 
	margin: 12px;
}

.blue-line-smid {
	background-color: #003399; 
	width: 100%;
	height: 2px;
	margin: 12px 0 12px 0;

}
.blue-line-smidlg {
	background-color: #003399; 
	width: 100%;
	height: 6px;
	margin: 12px 0 12px 0;

}


/* BELOW USED */
#topage {
  position: fixed;
  z-index: 999;
  position: fixed; 
  right: 5px;
  bottom: 60px;  
}


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

/* faq colour changes */
.panel-default > .panel-heading {
background:#6699FF;  /* 92b7ff */
}
.panel-default > .panel-collapse {
background:#A8C4FB;   /* c1d6ff  */
}


 .faqtext { 
	font-family: inherit; 
	font-size: 14px; 
	margin: 20px 40px 20px 20px; 
	}

.faqtext a { 
	color: #003399; 
	 text-decoration: underline; 
}

.faqtext a:link { 
	color: #003399; 
	 text-decoration: underline; 
}

.faqtext a:hover { 
	color: #ff0000; 
	text-decoration: underline;
}	




/* new breadcrumb colours */


.breadcrumb-new {
	background-color: #d8e4fb; 
	border: 0px; 
	border-radius: 0px; 
	display: block;
}
.breadcrumb-new li {
	font-size: 12px;
}
.breadcrumb-new a {
	color: #003399; 
	text-decoration: underline;
}
.breadcrumb-new a:hover {
	color: #ff0000;
}
.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: #003399; content: "\003E\00a0";}  /* between text */

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


/* ABOVE USED */



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

.navbar-inverse {
  background-color: #6699FF;  /* 000099 navbar main background including button */
  border-color: #3366CC;  /* 6699FF LIGHT BLUE 59B5FF border above navbar */
}
.navbar-inverse .navbar-brand {
  color: #000; font-size: 14px; /* BLACK text colour of brand on bar*/
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #FFF; font-size: 14px;  /* WHITE text hover colour on brand */
  background-color: #003399;  /* DARK BLUE 0000FF transparent hover bg colour brand*/
}
.navbar-inverse .navbar-nav > li > a {
  color: #000;     /* BLACK text colour of links in nav bar and dropdowns*/
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #FFF;  /* WHITE colour of text of links on hover*/
  background-color: #003399;  /* DARK BLUE 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: #00FFFF;  /*  changed to bright cyan to see what it does --- fff doesnt seem to change anything */
  background-color: #00FF00; /* changed to bright cyan to see what it does --- DARK BLUE 99cc99 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: #FFF;  /* text on mobile drop down active  */
    background-color: #3366cc;  /* background on mobile drop down active */
  }


.navbar-inverse .navbar-toggle {
  /* border-color: #99cc99; */
  border: #003399 solid 2px; /* DARK BLUE 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: #003399;  /* DARK BLUE changes the colour on hover of button */
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #6699FF;  /* 6699FF DARK BLUE 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: #FFF;  /* WHITE colour of text when link active */
  background-color: #3366CC;  /* MID BLUE when clicked on hover */
}
/* for small screens */
@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #000;  /* BLACK 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: #FFF;  /* WHITE hover colour of links in dropdown on small screen*/
    background-color: #003399;  /* 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: #6699FF; /*  LIGHT BLUE 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: #FF0000; /* doesnt seem to do anything */
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 2.1;  /* 1.42857143 */
  color: #000; /* BLACK text colour */
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #FFF; /* WHITE text colour on hover*/
  text-decoration: none;
  background-color: #003399;  /*  DARK BLUE background on hover */
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff; /* BLACK changed to white */
  text-decoration: none;  
  background-color: #3366CC;  /* 3366CC MID BLUE */
  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); */
/* } */


.handpicture {
 cursor: pointer;
}


/* BELOW FOR ENLARGING PICTURE ON PATTERN THUMB */

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:10px 0 0 -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: -30px; /*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"); */
/* } */