/* Minification failed. Returning unminified contents.
(137,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-color'
(140,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-hover-color'
(143,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-active-color'
(652,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-color'
(655,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-hover-color'
(658,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-hover-color'
(691,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-color'
(694,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-hover-color'
(697,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-hover-color'
(698,32): run-time error CSS1039: Token not allowed after unary operator: '-hub-link-background-color'
(1711,29): run-time error CSS1034: Expected closing parenthesis, found ','
(1711,29): run-time error CSS1042: Expected function, found ','
(1711,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(1822,19): run-time error CSS1034: Expected closing parenthesis, found ','
(1822,19): run-time error CSS1042: Expected function, found ','
(1822,24): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(1826,20): run-time error CSS1034: Expected closing parenthesis, found ','
(1826,20): run-time error CSS1042: Expected function, found ','
(1826,25): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(2036,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2038,25): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bottom-bg-color'
(2039,19): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2040,46): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2040,85): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bottom-bg-color'
(2043,46): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-hover-color'
(2043,91): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bottom-bg-hover-color'
(2046,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2047,46): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-hover-color'
(2047,91): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bottom-bg-hover-color'
(2055,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2064,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color__inverted'
(2065,19): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color__inverted'
(2069,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color__inverted'
(2072,19): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-hover-color__inverted'
(2076,19): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-hover-color__inverted'
(2111,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2112,19): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2385,25): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2386,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2391,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2394,14): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2395,25): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-text-color'
(2396,25): run-time error CSS1039: Token not allowed after unary operator: '-hub-button-bg-color'
(2918,28): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-color'
(3069,28): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-color'
(3070,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3077,28): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-color'
(3078,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3081,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3288,25): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3292,28): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-rbga-color'
(3293,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3301,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3302,35): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-hover-color'
(3333,17): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-text-color'
(3388,28): run-time error CSS1039: Token not allowed after unary operator: '-hub-menu-bg-rbga-color'
(3455,32): run-time error CSS1034: Expected closing parenthesis, found ','
(3455,32): run-time error CSS1042: Expected function, found ','
(3455,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
/*
credit goes to http://mattwilcox.net/ 

BASE.CSS
attempts to set all layout attributes to the absolute basics, so that inbuilt 
browser formatting won't produce un-expected results (i.e. incosistant padding 
values on across different browsers wont catch you out, because we set them 
all here)
*/
/* REMOVE PADDING AND MARGIN VALUES */
*, html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dd, dt, img,
blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form,
input, textarea, fieldset
{margin: 0; padding: 0;}

/* SET BASE FONT ATTRUBUTES */
html, body, button {
	/*font: 12px/1em  tahoma, Arial, "Arial Unicode MS", Myriad, Helvetica, Verdana, "Trebuchet MS", Sans-serif;*/	
	font-family:  'Roboto',tahoma, Arial, "Arial Unicode MS", Myriad, Helvetica, Verdana, "Trebuchet MS", Sans-serif;
    font-size: 0.875rem;

	/*font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
	font-size: 12px;*/
	line-height: 1.375rem;
	color:#000;
	font-weight: normal;
	font-style: normal;
}
/* SORT OUT HEADER FORMATTING AND SIZES */
h1, h2, h3, h4, h5 {font-weight: bold;}
h1 {font-size: 1.75em;line-height: 1.15em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.1em;}
h5 {font-size: 1em;}
h6 {font-size: 1em;}

/* HARMONIZE LINKS, KILL BORDER ON IMG LINKS */
a {text-decoration: underline;}
a:link, a:visited {color: #0000ff; /*background-color:Transparent;*/}
a:hover {color: #3333ff; /*background-color:Transparent;*/}
a:active {color: #ffffff; /*background-color:Transparent;*/}
a img, a:link img, a:visited img {border: none;}

/* REMOVE BROWSERS DEFAULT TABLE BORDERS */
table {border-collapse: collapse;}

/* REMOVE AUTOMATIC TOP/BOTTOM MARGINS ON NESTED LISTS */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul, dl ol, dl dir, dl menu, dl dl
{margin-top: 0; margin-bottom: 0;}

/* HARMONISE LIST-BULLET TYPE */
ul, ol, dl, menu, dir {
  display: block;
  list-style-type: disc;
}

img{
	border: 0;
}

/* kill deprecated tags - while font is dead the others live on
b,i,font{
	background-color: Black;
	color: Aqua;
	font-size: 2em;
	font-weight: bold;	
}*/
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    /*overflow-x: hidden; */
}
html {
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
   
}

body {
    color:#333333;
}

h1{
	margin: 5px 0px 5px 0px;
	overflow:hidden;

}

h1.headerTitle{
    margin:0;
    position:absolute;
}
h1.headerTitle a{
    color:inherit;
    text-decoration:none;
    display:block;
}
/*
h2.siteDescription {
    display:none;
}*/
/* Moved from hub style sheet*/
h1.headerTitle, h2.siteDescription{text-indent: -99999px;}

h3
{
	color:#222222;
	margin: 20px 0px 2px 0px;
	padding-bottom:2px;
}
h3.page-header
{
font-family: 'Cutive Mono', monospace;
    font-size: calc(100% + 2vw);
    font-weight: 600;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 40px;
}

h4
{
	color:#222222;
	margin: 10px 0px 2px 0px;
}


a:link, a:visited {
    color: var(--hub-link-color,#222222);
}
a:hover {
    color: var(--hub-link-hover-color,#293B0F);
}
a:active {
    color: var(--hub-link-active-color,#293B0F);
}


header, footer, hgroup,
nav, section {
    display: block;
}

.hidden {
    visibility:hidden;
}

/* Main Content */
#MainContent{
    overflow-x:hidden;

}
/*header
{
	
}*/
header .content-wrapper
{
	background-color:transparent;
    position: relative;
	background-repeat: no-repeat;
   
}
#TopNav {
    display:flex;
    position: fixed;
    padding-top:5px;
    padding-right:10px;
    top:0;
    right:0;
    z-index:101;
}
#TopNav>div{
   
}

.cart {
    height:38px;
    width:38px;
    margin-left:3px;
    z-index:101;
}
.cart-text {
    font-size:0.7em;
    padding-left:0.1em;
    margin-top:-0.2em;
}
.account {
    height:38px;
    width:38px;
    margin-left:3px;
    z-index:101;
}
.signout{
    margin-left:auto;
    height:38px;
    width:38px;
    z-index:101;
}
.backtotop{
    display: none; /*Hidden by default */
    position: fixed; /* Fixed/sticky position */
    cursor: pointer; /* Add a mouse pointer on hover */
    bottom:10px;
    right:10px;
    height:38px;
    width:38px;
    z-index:101;
}
.circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  line-height:0;
  padding: 50% 0;
  border-radius: 50%;
  
  /* Just making it pretty*/
  /* shadow */
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
          box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
  text-shadow: 0 4px 0 rgba(0, 0, 0, .1);
  /* default colors */
  background: #888888;
  color: white;

  /*font-family: Helvetica, Arial Black, sans;*/
  font-size: 23px;
  text-align: center;
}
/* Overrides the automatic line height of the Font Awesome library*/
.circle .fas {
    line-height:0 !important;
}
#LoginInformation{
    text-align:left;
    vertical-align:middle;
    
    min-height: 20px;
    padding: 10px 5px 5px 5px;
    
}

#LoginInformation a{
    font-weight:bold;
}
#LoginInformation a:link, #LoginInformation a:visited, #LoginInformation a:hover, #LoginInformation a:active{
    font-size:13px;
}
/*
.cartInfo, .cartInfoFull
{
	background-image:url("images/cart.png");
    background-repeat:no-repeat;
}
.cartInfo{
    background-position: 0px -168px;
}
.cartInfoFull{
    background-position:0px -258px;
}
*/
.shop-callout {
    font-weight:800;
}
.pageMessage {
	position:fixed;
	width:400px;
	min-height:45px;
	top:0px;
	margin: auto; /* Will not center vertically and won't work in IE6/7. */
    left: 0;
    right: 0;
	padding:6px;
	/*margin-top:100px;
	background-image:url("images/whiteTrans70.png");*/
	background:rgb(255,255,255);
	background:rgba(255,255,255,.90);
		
	border:1px solid #bbbbbb;
	border-top:none;
    -webkit-border-radius: 0px 0px 4px 4px;
	border-radius:  0px 0px 4px 4px; 
	z-index:1001;
}

.siteDescription{
	padding:3px;
	color: #aaaaaa;
}

#PageLoadMessage .alert{
	border-color: #ff8888;
	background:rgb(255,255,255);
	background:rgba(255,255,255,.90);
}
#PageLoadMessage .good{
	border-color: #638824;
	background:rgb(255,255,255);
	background:rgba(255,255,255,.90);
}
.alert{ color:Red; }
.good{color: Green;}

.changed
{
	text-decoration:line-through;
}
.newValue{color:Red;}

nav
{
    /*Switch to flexbox*/
    display: flex;
    
    background-color:#666666;
    /*border-top:2px solid #c0c0c0;
    border-bottom:2px solid #c0c0c0;*/
    color:#ffffff;
    width: 100%;
    z-index:100; 
}

/*Link colors*/
nav a{
    display:block;
    padding: 8px 17px 12px 17px;
    font-weight:400;
    /*font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;*/
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

nav a:link, nav a:visited, nav a:hover, nav a:active{
    color:#ffffff;
    /*background-color:inherit;*/
    text-decoration: none;
    font-size:13px;
    
}
nav a:hover{
    background-color:#dddddd;
}

/* keep menu from under button*/
/*#menu {
    max-width:870px;
}*/
nav ul{

    flex: 1;
    display:flex;
    flex-wrap: wrap;
	justify-content: flex-start;
    /*display:block;
    height:34px;*/
    list-style: none outside none;
    margin: 0;
    padding: 5px 0 0 0;
    overflow:visible;
    /*background-color:inherit;*/
    /*z-index:10001;*/

    /*min-width: 960px;*/
    max-width: 960px;
    margin: auto;
}
nav li{
    /*background-color:inherit;*/
    /*z-index:10001;*/
    position: relative;
}
nav ul li{
    flex: 0 1 auto;
	margin: 0;
	padding: 0;
	position: relative;
	transition: all linear 0.1s;
}

nav li ul {
    display:none;
    position:absolute;
    top: 100%;
    z-index:101;
    height:100%;
}
#AccountTopMenu {
    display:none;
    position:absolute;
    top:0px;
    right:0px;
    width:225px;
    z-index:101;
     -webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .1);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .1);
}
#AccountTopMenu ul{
    margin-top:40px;
    width:100%;
    display:flex;
    flex-direction:column;
}
#AccountTopMenu ul li{
	margin: 0;
	padding: 0;
    width:100%;
}

.submenu li {
    float: none;
    white-space:nowrap;
}
/*CSS action*/
nav li:hover ul
{
    display: block;
}

/*this is the default state for the button */
.nav-toggle {
        display:none;
}


#ExpandMenu {
    display:none;
    float:right;
    height:34px;
    width:80px;
}
/*
nav form{ display:inline;}
nav fieldset
{
    display:block;
    position:relative;
    float:right;
    background-color:#ffffff;
    border:1px solid #dddddd;
    width:250px;
    margin:3px 1px 3px 5px;
    padding:0;
    height:27px;
    white-space:nowrap;
    overflow:hidden;
    
    /*vertical-align:middle;*/
/*
}
nav label
{
    position:absolute;
    color:#aaaaaa;
    padding:7px 2px 4px 8px;
    font-weight:bold;
    display:none;
}
nav input
{
    color:#777777;
    padding:0px 3px 3px 6px;
    margin: 0;
    font-weight:bold;
    border:1px solid transparent;
    width:210px;
}
nav button
{
    font-size:12px;
    border:none;
    background-color:transparent;
    height:25px;
    width: 25px;
    margin: 2px 0px 2px 2px;
    background-image:url("images/search.png");
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
}
nav button>span{
    margin-left:-20000px;    
}
*/
#MainContent .content-wrapper{
    background-color:#ffffff;
    min-height:500px;
}
#MainContent .content-padding{
    padding-top:15px;
    padding-bottom: 60px;
    max-width: 960px;
margin: auto;
}

#MainContent p, #MainContent h1, #MainContent h2{
	padding: 0px 0px 10px 0px;
}
#MainContent p
{
	line-height:1.75em;
}

#MainContent ol
{
	list-style-type:decimal !important;	
	padding: 0px 0px 10px 20px;
}
footer {
    clear: both;
    background-color:transparent;
    /*font-size: .8em;*/
    min-height:150px;
    margin:auto;
}
footer .content-wrapper {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content:space-between;
    max-width: 960px;
    margin: auto;
}
footer .footerContainer{
	min-height:90px;
	padding:20px 20px 20px 20px;
    max-width:400px;
    min-width:300px;
}
footer .footerContact{
	
}
footer .footerlinks{
	width:200px;
}
footer .lululogo{
	width:200px;
    display: none;
}
footer .lululogo a
{
	display:block;
	overflow:hidden;
	width:200px;
	height:120px;
	background-image:url("images/LulusSmaller.png");
    background-repeat:no-repeat;
    /*background-position:center;*/
    text-indent:-9999px;
}


footer .fab{
    font-size:32px;
}
.social img{
	width:32px;
	height:32px;
}
/*
footer a{
	color:#ffffff;
	padding:0px 10px 5px 10px;
	font-size:16px;
	font-weight:bold;
}*/

				


.content-wrapper{

   /*width:960px;
	
    min-width:960px;
    max-width:1240px;
	*/
    margin:auto;   
}

/* special sitewide things */
.rightMenu{
	float:right;
    width:240px; /*Full size only*/
}
.rightMenu ul, #AdminMenu ul{
	list-style: none;	
}
.rightMenu li, #AdminMenu li{
	list-style: none;	
}
.rightMenu a, #AdminMenu a{
	display:block;
	font-size: 16px;
	/*font-weight:bold;*/
	padding:5px 5px 5px 5px;	
}
.rightMenu span.smallLink a
{
	font-size: 12px !important;
	padding:1px 1px 1px 0px;	
}
.rightMenu p{
	font-size: 12px !important;
	padding:0px 1px 5px 5px !important;	
}

.boxWithMenu {
	padding: 10px 10px 10px 10px;
	width:240px;
    /*background-color:#E0E0E0;*/
    margin:0px 0px 20px 0px;
    border:1px solid #0c3d7f;
    -webkit-border-radius: 4px 4px 4px 4px;
	border-radius:  4px 4px 4px 4px;
	min-height:250px;
}
.menuForbox
{
	/*padding: 80px 10px 10px 10px;
	margin:0px 0px 20px 0px;
	width:240px;*/
   /* border:1px solid #0c3d7f;
    -webkit-border-radius: 0px 4px 4px 0px;
	border-radius:  0px 4px 4px 0px;*/
}
/* tab looking menu*/
    .pageTopTabs{
		min-height:35px;
	}
	.pageTopTabs ul{
		display:block;
		list-style: none outside none;
		margin: 0;
		padding: 0;
	}
    .pageTopTabs li {
        float: left;
        margin: 0px 5px 0px 0px;
        position: relative;
        border: 1px solid var(--hub-link-color, #CCC);
    }
    .pageTopTabs li:hover {
        border: 1px solid var(--hub-link-hover-color, #DDD);
    }
    .pageTopTabs li.activeLink {
        border: 1px solid var(--hub-link-hover-color, #DDD);
    }
	
	.pageTopTabs a{
		display:block;
		padding: 10px 10px 10px 10px;
		font-family: tahoma,Arial,"Arial Unicode MS",Myriad,Helvetica,Verdana,"Trebuchet MS",Sans-serif;
		font-weight:bold;
		text-decoration: none;
		font-size:13px;
	}
    /*.pageTopTabs a:hover {
        color: var(--hub-link-hover-color, #CCCCCC);
    }
    .pageTopTabs li.activeLink a {
        color: var(--hub-link-hover-color, #CCCCCC);
    }*/

    /* tab looking menu flex*/
    .nav-tabs{
		min-height:35px;
	}
	.nav-tabs ul{
		display:block;
		list-style: none outside none;
		margin: 0;
		padding: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
	}
    .nav-tabs li {
        margin: 0px 5px 0px 0px;
        border: 1px solid var(--hub-link-color, #CCC);
    }
    .nav-tabs li:hover {
        border: 1px solid var(--hub-link-hover-color, #DDD);
    }
    .nav-tabs li.active-link {
        border: 1px solid var(--hub-link-hover-color, #DDD);
        background-color: var(--hub-link-background-color, #eee);
    }
	
	.nav-tabs a{
		display:block;
		padding: 10px 10px 10px 10px;
		font-family: tahoma,Arial,"Arial Unicode MS",Myriad,Helvetica,Verdana,"Trebuchet MS",Sans-serif;
		font-weight:bold;
		text-decoration: none;
		font-size:13px;
	}
	


.threeQuarter{width:639px}

ul.contentList{
	margin: 0px 0px 0px 15px;
}/*
ul.contentList li{
	
}*/

div.menuFormContainer{
	padding-left:5px !important;
}
div.menuFormContainer .formRow {
    min-height:50px !important;
    /*white-space:nowrap;*/
}

/* picture stuff*/

.clickablePic{
	cursor:pointer;
}
.noPictureSearch{
	height:100px;
	width:100px;
	border: 1px solid #dddddd;
}
/* silly clearBoth class*/
.clearBoth{
	clear:both;	
}
.clearLeft{
	clear:left;	
}
.pagebreak { display:none;}







h3.pinned {
    padding-left: 20px;
    background-image: url("/Content/images/thumbtack.png");
    background-repeat: no-repeat;
    background-position: left top;
}
	h3.notPinned
	{
		margin-left:20px;
	}
	
.nowrap
{
white-space:nowrap;
}
		
		
	

    #MapOptions
    {
	margin-top:20px;
	}
	
/* Item area */
/* this is the item picture slider */
.item-picture-slider {
    position: relative;
    overflow: hidden;
    height: 280px;
    width: 280px;
    margin: auto;
    background-color: #eee;
}
.item-picture-slider-small {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 200px;
    margin: auto;
    background-color: #eee;
}

.item-picture-slider-img--static {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover; /*contain*/
    z-index: 1;
}
.item-picture-slider-img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover; /*contain*/
    /*display: none;*/
    opacity: 0;
    /* top: -400px;*/
    transition: opacity 1s ease;
}

.item-picture-slider-img--active {
   /* display: inline-block;*/
    z-index: 1;
    opacity: 1;
    transition: opacity 1s ease;
    /*top: 0px;*/
}

.item-picture-slider-nav {
    padding: 0px;
    position: absolute;
    top: 50%;
    left:10px;
    right:10px;
    transform: translate3d(0, -50%, 0);
    z-index: 10;
}
.item-picture-slider:hover .item-picture-slider-nav {
    z-index: 10;
}

.item-picture-slider-nav--prev {
    cursor: pointer;
    float: left;
}

.item-picture-slider-nav--prev::after {
    border-top: 2px solid #FFF;
    border-left: 2px solid #FFF;
    border-radius: 1px;
    content: "";
    display: block;
    height: 20px;
    transform: rotate(-45deg);
    width: 20px;
}

.item-picture-slider-nav--next {
    cursor: pointer;
    float: right;
}

.item-picture-slider-nav--next::before {
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    border-radius: 1px;
    content: "";
    display: block;
    height: 20px;
    transform: rotate(45deg);
    width: 20px;
}

    /* page stuff */
    .pageContent {
        width: 560px
    }

        .pageContent img {
            margin: 10px;
        }


    /* news stories for the front*/

    /*
    this is used on the frontpage to break content out of the width

*/
    .breakout {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

        .breakout h3 {
            font-size: 3rem;
            line-height: 3rem;
            text-align: center;
            padding-bottom: 3rem;
        }

    .article {
        display: flex;
        flex-flow: row nowrap;
        align-content: center;
        /*min-height: 120px;*/
    }

    .frontpage p {
        max-height: 350px;
        position: relative;
        overflow: hidden;
    }

    .breakout .read-more {
        position: absolute;
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        vertical-align: bottom;
        margin: 0 0 0 0;
        padding: 30px 0 5px 0;
        background-image: linear-gradient(transparent 0%, white 90%);
    }

    .breakout p {
        font-size: 1rem;
        flex-basis: 50%;
        height: 100%;
        margin: auto;
        /*min-height:200px;*/
    }


    .breakout:nth-child(odd) .article {
        flex-direction: row-reverse;
    }

    .breakout:nth-child(even) .pic-single {
        margin: 0 3rem 0 0;
    }

    .breakout:nth-child(odd) .pic-single {
        margin: 0 0 0 3rem;
    }

    .blog-small {
        padding: 2rem;
        border-style: dashed;
        border-color: rgba(0, 0, 0, .1);
        margin: 1rem 0 1rem 0;
    }

        .blog-small h3 {
            font-size: 1.5rem;
            line-height: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .blog-small p {
            min-height: 100px;
            position: relative;
            padding: 0px 0px 30px 0px !important;
        }
    /*
.article-pics img{
        border-radius:  4px 4px 4px 4px;
}*/

    .article-pics {
        width: 50%;
        height: 100%;
    }

    .pic-single {
        width: calc(100% - 3rem);
        /*height:calc(100% - 3rem);*/
    }

    .pics-sliced {
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        padding-bottom: 15px;
        /* overflow-x: scroll;
  overflow-y: hidden;*/
    }

    .pic-sliced img {
        object-fit: cover;
        height: 225px;
        width: 225px;
    }

   
/*
	Fieldset definitions
*/
fieldset 
{
    padding: 10px 10px 10px 10px;
    /*background-color:#E0E0E0;*/
    margin:0px 0px 20px 0px;
    border:1px solid #dddddd;
    -webkit-border-radius: 2px 2px 2px 2px;
	border-radius:  2px 2px 2px 2px;
	position:relative;/* let's keep things in here*/
    padding-top:20px;
	background:rgb(256,256,256);
	background:rgba(256,256,256,.25);
}

legend
{
	padding: 1px 5px 1px 5px;
	background-color:#ffffff;
	font-weight:bold;
	font-size:1.3em;
	color: #538301;
	margin-left:8px

}


fieldset.oneField
{
	width:213px
}
/*fieldset.oneField legend {
	width:224px
}*/
fieldset.twoField
{
	width:426px
}
fieldset.twoField legend {
	/*width:437px*/
}

fieldset.threeField
{
	width:639px
}

div.threeField{
	max-width:639px	
}

/* single field wide column*/
div.rightInnerColumn{
	width:180px;
	overflow:hidden;
	float:right;
	padding-top:10px;
}

fieldset.rightInnerColumn{
	width:180px;
	overflow:hidden;
	float:right;
	padding-top:10px;
}
fieldset.rightInnerColumn legend, div.rightInnerColumn legend{
	font-size:1.1em;
}
fieldset.rightInnerColumn li, div.rightInnerColumn li{
	list-style:none;
}
fieldset.rightInnerColumn input, div.rightInnerColumn input{
	margin: 2px 4px 2px 0px;
}



/*div for left side*/
div.leftInnerColumn
{
	float:left;
	width: 426px;
}

legend a{
	/*margin-left:100px;
	float:right;*/
	position:absolute;
	padding:0px 6px 0px 6px;
	background-color:#ffffff !important;
	text-decoration:none;
	font-size:12px;
	border:1px solid #dddddd;
}
fieldset.threeField legend a{
	right:10px;
}
fieldset.twoField legend a{
	margin-left:210px;
}

a.additionalHelp{
	margin-left:5px;
	/*position:inherit !important;
	right:inherit !important;*/
	display:block;
	/*float:left;*/
}

/*
	Row and label field wrapper definitions
*/
.formRow {
    display:block;
    clear:both;
    overflow:hidden;
    min-height:25px;
    /*white-space:nowrap;*/
}
.fullRow {
	padding: 0px 0px 0px 10px;
	display: block;
	min-height: 25px;
	max-width:95%;
}
.fieldLabelPair{
    margin: 6px 0px 0px 0px;
    float:left;
}
.fieldLabelPair label {
    display:block;
    white-space:nowrap;
    margin: 0px 0px 2px 0px;
}
.multiselect-dropdown {
	min-width:400px;
	width:contain;
}
.multiselect-dropdown label {
	display: inline !important;
}

.textLabelPair label {
	display: block;
	margin: 0px 0px 2px 0px;
}
.textLabelPair textarea {
	height:6em;    
}
.validationMessage{
    display:block;
    /*overflow:hidden;
    white-space:nowrap;*/
    min-height:3em;
}

/*
	label definitions
*/
label{
	color:#555555;
	font-weight:bold;
	font-size:13px;
}
/* used with validation */
label>span.conditional, .conditional{
    /*color:Blue; 
    font-weight:bold; */
    display:none;  
}
/* used with validation conditional  */
label>span.alert{
    color:Red;    
}


/*
	input and select list definitions
*/
input, select, textarea{
    border: 1px solid #888888;
    
}
input:disabled , input.disabled, select:disabled, select.disabled, textarea:disabled, textarea.disabled {
	background-color:#eeeeee;
	color:#eeeeee;
}
/****
    each field label set is created to have standard sizes and layout characteristics 
*/
.nosizeField {
	margin: 0px 10px 0px 10px;
}
.nosizeField input,
.nosizeField select {
	padding: 3px 2px 3px 2px;
}

.reallySmallField
{
	margin:0px 10px 0px 10px;
    width:50px;
 }
 .reallySmallField>span
{
	 line-height:17px;
	 display:block;
 }
.reallySmallField input[type="text"],
.reallySmallField input[type="date"],
.reallySmallField input[type="password"],
.reallySmallField textarea {
	width: 44px;
	padding: 3px 2px 3px 2px;
}


 
.smallField
{
	margin:0px 10px 0px 10px;
    width:82px;
 }
.smallField input[type="text"],
.smallField input[type="date"],
.smallField input[type="password"],
.smallField input[type="number"],
.smallField textarea {
	width: 76px;
	padding: 3px 2px 3px 2px;
}

.smallishField
{
	margin:0px 10px 0px 10px;
    width:122px;
 }
.smallishField input[type="text"],
.smallishField input[type="date"],
.smallishField input[type="password"],
.smallishField input[type="number"],
.smallishField textarea {
	width: 116px;
	padding: 3px 2px 3px 2px;
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
	.smallishField select {
		width: 125px;
		padding: 3px 2px 3px 2px;
	}
	html > /**/ body
	.smallishField select { /* for other browsers */
		width: 122px;
		padding: 3px 2px 3px 2px;
	}


.mediumField {
    margin:0px 10px 0px 10px;
    width:192px;
    /*overflow:hidden;   */    
}
.mediumField input[type="text"],
.mediumField input[type="date"],
.mediumField input[type="password"],
.mediumField input[type="number"],
.mediumField textarea {
	width: 186px;
	padding: 3px 2px 3px 2px;
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.mediumField select {
    width:195px;         
}
	html > /**/ body
	.mediumField select { /* for other browsers */
		width: 192px;
		padding: 3px 2px 3px 2px;
	}


.dateField{
    margin:0px 10px 0px 10px;
    width:192px;
}
.dateField input[type="text"], .dateField input[type="date"] {
	width: 186px;
	padding: 3px 2px 3px 2px;
}
/*
.dateLargeLabelFieldLabelSet{
    margin:0px 10px 0px 10px;
    width:264px;
}
.dateLargeLabelFieldLabelSet input[type="text"]{
    width:168px;
    padding: 3px 2px 3px 2px;
}

.optionFieldLabelSet
{
	margin:0px 10px 0px 10px;
    width:406px;
}
*/

/* 
    Large field  
*/
.largeField {
    margin:0px 10px 0px 10px;
    padding:0;
    overflow:hidden;
    min-width:400px;
}
/*
.largeTextField {
    margin:0px 10px 5px 10px;
    padding:0;
    width:404px;
}*/
.largeFieldSpacer{
	margin:0px 10px 0px 10px;
    padding:0;
    width:404px;
}
.largeField input[type="text"], 
.largeField input[type="password"]{
    width:400px;
    padding: 3px 2px 3px 2px;       
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.largeField select {
    width:408px;         
}
html > /**/ body 
.largeField select { /* for other browsers */
    width: 406px;
}

.largeField textarea {
	width:400px;    
}

/* 
    3/4s of the screen wide 
*/
.largerField {
    margin:0px 10px 0px 10px;
    padding:0;
   /* overflow:hidden;*/
    min-width:610px;
}
.largerField input[type="text"], 
.largerField input[type="password"]{
    width:610px;
    padding: 3px 2px 3px 2px;       
}
/* stupid browser tricks - nothing displays a select and input the same*/
/* for IE */
.largerField select {
    width:618px;         
}
html > /**/ body 
.largerField select { /* for other browsers */
    width: 616px;
}

.largerField textarea {
width:610px;    
}
.tallField textarea 
{
	height:21em;
}

.checkBoxLabelSetSingleLine{
	margin: 0px 10px 0px 10px;
    min-height:40px;
}
.checkBoxLabelSet{
	margin: 6px 10px 0px 10px;
    min-height:40px;
}
.checkBoxLabelSet .checkbox{
    border: 1px solid #CCCCCC;
    color: green;
    font-size: 1.2em;
    float:left;
    margin: 20px 0px 0px 0px;
}
.checkBoxLabelSetSingleLine .checkbox{
    border: 1px solid #CCCCCC;
    color: green;
    font-size: 1.2em;
    float:left;
    margin: 5px 0px 10px 0px;
}
/*.formContainer .checkBoxLabelSet{
    padding-top:24px;
    height:20px;
}*/
.checkBoxLabelSet label
{
    display:block;
    /*width:165px; take this out for now*/
    float:left;
    margin: 16px 0px 0px 6px;
    cursor: pointer;
    white-space:nowrap;
    overflow:visible;
}
 .checkBoxLabelSetSingleLine label
{
    display:block;
    /*width:165px; take this out for now*/
    float:left;
    margin: 3px 0px 0px 6px;
    cursor: pointer;
    white-space:nowrap;
    overflow:visible;
}

fieldset.check-boxes legend, div.check-boxes legend{
	font-size:1.1em;
}
fieldset.check-boxes li, div.check-boxes li{
	list-style:none;
}
fieldset.check-boxes input, div.check-boxes input{
	margin: 2px 4px 2px 0px;
}

ul.radioList
{
	list-style:none;
	padding-top:0px;
}
ul.radioList input
{
	display:inline !important;
	width:25px;
	margin-top:5px;
	float:none;
}
ul.radioList label
{
	display:inline !important;

	float:none;
}
/* container for holding select buttons over list */
.selectAllHolder{
	padding:0px 2px 6px 0px;
	/*text-align:center;*/
}
.selectAllHolder .littleButton{
	margin: 0px 8px 0px 0px;
}
/*  little all purpose button for mid form stuff*/
.littleButton{
	padding:2px 4px 2px 4px;
	background-color:#ffffff !important;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
	border:1px solid #dddddd;
	cursor:pointer;
	color:#555555;
}
.littleButton:hover{
	color:#222222;
}



.buttonWrapper
{
	text-align:right;
	padding: 5px 12px 5px 5px;
}

.paypalButton{
	background-image: url(images/btn_xpressCheckout.gif);
	background-repeat:no-repeat;
	background-position:0px 5px;
	text-indent:-99999;
	color:transparent;
	font-size:0;
	overflow:hidden;
	height:30px;
	width:145px;
	border: none;
	background-color:transparent;
}
.paypalButton:hover{
	background-position:1px 6px;
}

/* white */
.actionButtonW 
{
	padding:4px;
	border-radius: 4px;
	color: #606060;
	border: solid 1px #dddddd !important;
	background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%); /* W3C */
}
.actionButtonW:hover {
    background: linear-gradient(to bottom, #ffffff 0%,#dcdcdc 100%);
}
.actionButtonW:active {
	color: #999;
    background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
}
a.actionButtonW{
	color: #606060 !important;
	text-decoration: none !important;
}

/* white */
.actionButtonRed {
	padding: 4px;
	border-radius: 4px;
	color: #db2626;
	border: solid 1px #db2626 !important;
	background: #ffffff;
	background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%); /* W3C */
}

.actionButtonRed:hover {
	background: linear-gradient(to bottom, #ffffff 0%,#dcdcdc 100%);
}

.actionButtonRed:active {
	color: #db2626;
	background: linear-gradient(to bottom, #ededed 0%,#ffffff 100%);
}

a.actionButtonRed {
	color: #db2626 !important;
	text-decoration: none !important;
}
/* green */
.actionButton 
{
	padding:4px;
	border-radius: 4px;
	color: #e8f0de;
	border: solid 1px #538312;
    background: linear-gradient(to bottom, #719d4c 0%,#445e22 100%); /* W3C */
    /* little 3d yo!*/
     /*-webkit-box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .1);*/
    /* box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .1);
    text-shadow: 0 4px 0 rgba(0, 0, 0, .1);*/
}
.actionButton:hover {
	background: linear-gradient(to bottom, #6b9d28 0%,#436b0c 100%); /* W3C */
}
.actionButton:active {
	color: #a9c08c;
	background: linear-gradient(to bottom, #445e22 0%,#719d4c 100%); /* W3C */
}
/*for adding this look to links*/
a.actionButton{
	color: #e8f0de;
	text-decoration: none !important;
}

.actionButton:disabled{
	/*background-color:#debf74;*/
	color:#444444;
}

/* additional button styles */





.menuButton 
{
	padding:4px;
	border-radius: 4px;
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;/* Old browsers */
    background: linear-gradient(to bottom, #719d4c 0%,#445e22 100%); /* W3C */
}
.menuButton:hover {
	background: linear-gradient(to bottom, #6b9d28 0%,#436b0c 100%); /* W3C */
}
.menuButton:active {
	color: #a9c08c;
	background: linear-gradient(to bottom, #445e22 0%,#719d4c 100%); /* W3C */
}


.deleteButton span{
	background-image:url("images/actionbuttonIcons.png");
    background-repeat:no-repeat;
    padding:4px 4px 4px 25px;
}

.labelBehindField label{
    position:absolute;
    color:#aaaaaa;
    padding:7px 4px 4px 8px;
    font-weight:bold;
}

.labelBehindField input{
    color:#777777;
    padding:6px;
    margin: 0;
    font-weight:bold;
    border:1px solid transparent;
}

/****
* Error Message section
*/
.field-validation-error{
	color:#ff0000;	
}
.field-validation-valid{
	display:none;	
}
.input-validation-error{
	border:1px solid #ff0000;
	background-color:#ffeeee;
}

/**
	Funny phone Us validation messages
*/
.phoneUSValidationMessage{
	height:2.5em;
	padding-left:10px;
	color:#ff0000;
}

.phoneUS .validationMessage{
	display:none;	
}
/* display stuiff for form data only used in the two display templates*/
.phoneModel{
	line-height:1.5em;
	padding-bottom:10px;
	clear:left;
}
.phoneModel .phoneNumber{
	display:block;
	float: left;
	width:110px;
}
.phoneModel .extension{
	display:block;
	float: left;
	width:110px;
}
.phoneModel .mobile{
	display:block;
	float: left;
	width:90px;
}
.phoneModel .canText{
	display:block;
	float: left;
	width:90px;
}

.checkTrue{
	color:Green;
}
.checkFalse{
	color:Red;
}
/* image holder ffor picture upload */
.uploadPictureWrapper div.uploadPictureHolder{
	width:156px;
	min-height:200px;
	float:left;
	text-align:center;
}
.uploadPictureWrapper a{
	display:block;
}
.uploadPictureWrapper div.pictureMessage
{
	clear:both;
}

/* categories for questions*/
.js .requiredForCategories
{
	display:none;	
}


/* shopping form */
.shoppingBar {
	border: 1px solid #538301;
	/*min-height: 60px;
	margin-bottom: 5px;*/
	padding: 3px;
	
}
div.shoppingBar:nth-of-type(even) {
	background-color: rgb(0,0,0,0.05);
}
.shoppingBar-wide {
	display: flex;
	justify-content: space-between;
}
.shoppingBar-stacked {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
td.shoppingBar {
	text-align: right !important;
	vertical-align:bottom;
	border:none;
}
.shoppingBar h3
{
	border:none !important;
	margin:8px 4px 8px 4px;
	width:400px;
}
/*.shoppingBar .form-wrapper {
	display: flex;
	flex-wrap:nowrap;
}*/
.shoppingBar form {
	display: inline;
	padding-top: 5px;
}
.shoppingBar fieldset {
	border: none;
	display: block;
	/*float: right;*/
	height: 27px;
	margin: 3px 1px 3px 5px;
	overflow: hidden;
	padding: 0;
	position: relative;
	white-space: nowrap;
	/*width: 150px;*/
}
.shoppingBar .itemDescription {
	border: none;
	display: block;
	overflow: hidden;
	padding: 0;
	white-space: nowrap;
}
.shoppingBar-wide .itemDescription {
	min-width: 150px;
}
.shoppingBar-stacked .itemDescription {
	width: 95%;
}
.shoppingBar-stacked-stock {
	width:35%;
}
.shoppingBar-stacked-form {
	width: 60%;
	display: flex;
	justify-content: flex-end;
}
.shoppingBar input {
	border: 1px solid #dddddd;
	font-size: 1.2rem;
	color: #777777;
	/*font-weight: bold;*/
	margin: 0;
	padding: 0 3px 3px 6px;
	width: 2.6em;
	height: 1.6em;
	/*line-height: 1em;*/
	text-align: right;
	border-radius: 4px;
}
.shoppingBar button {
	/*background-color: transparent;
		background-image: url("images/search.png");
		background-position: center center;
		background-repeat: no-repeat;*/
	border: 1px solid #dddddd;
	cursor: pointer;
	/*padding:0 !important;*/
	font-size: 1.2rem;
	overflow: hidden;
	max-width: 90vw;
	/*height: 25px;
	margin: 2px 0 2px 2px;*/
	/*width: 25px;
		overflow:hidden;*/
}
.shoppingBar-button {
	border: 1px solid #dddddd;
	cursor: pointer;
	padding: 0 !important;
	font-size: 1.2rem;
	overflow: hidden;
}
.shoppingBar-button-remove {
	margin-left:2px;
}
.shoppingBar-button-icon-cart {
	font-size: 1.4rem;
	top: 0px;
	left: -8px;
}
.shoppingBar-button-icon-remove {
	font-size: 1rem;
	top:-7px;
	left:8px;
	color:rgb(200,0,0,0.80);
}
.shoppingBar-button-alert {

	color: rgb(200,0,0,0.80);
}
.shoppingBar-button-icon-pen {
	font-size: 1rem;
	top: -8px;
	left: 7px;
	color: #606060;
}
.shoppingBar-bottom-link {
	width: 100%;
	display: block;
}
a.linkButton {
	/*display:block;*/
	color: #ffffff;
	cursor: pointer;
	font-size: 13px;
	height: 18px;
	margin: 5px 0 2px 2px;
	max-width: 150px;
	overflow: hidden;
	text-align: center;
	padding: 5px 6px 5px 6px;
}
	
	.shoppingButtonWrapper{
		text-align:center;
		clear:left;
	}
	
	/* price definition page*/
	.priceEntryForm .formRow:nth-child(odd){
		background-color:#eeeeee;
		/*border: 1px solid #dddddd;*/
		margin-bottom:10px;
	}

	.priceEntryForm .formRow{}
	
	.radioButtonList{
		list-style: none;
		margin:none;
		padding:none;
	}
	
	.radioButtonList li{
		padding:4px 0px 3px 3px;
	}
	
	.radioButtonList label{
		display:inline;
	}
	
/**
* Search For styles
*/

/*legend{
	padding: 1px 5px 1px 5px;
	border:1px solid #556E88;
	background-color:#0c3d7f;
	color: #ffffff;
	width:865px;
	margin: -1px -12px 10px -12px;
	/*position:relative;*/
	/*background-image:url(images/topBar_bg.png) !important;
	background-repeat:repeat-x;
	font-weight:bold;
	font-size:1.1em;*/
	/*background-repeat:no-repeat;
	background-position: 0px center !important;
}
*/
.collapsibleSection{
	
}
fieldset.collapsibleSection{
	padding-bottom:0;
	padding-top:0;
}
fieldset.collapsibleSection legend{
	padding: 1px 5px 1px 5px;
	border:1px solid #dddddd;
	/*background-color:#0c3d7f;
	color: #ffffff;*/
	width:650px;
	margin: -1px -12px 10px -12px;
	/*background-image:url("images/icon_arrows.png");*/
	cursor:pointer;
}
fieldset.collapsibleSection legend>span.open, span.open{
	font-size:10px;
	display:block;
	float:right;
	padding:3px 0px 0px 20px;
	
}
span.open::before {
	content: "\f077";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: 5px;
}
fieldset.collapsibleSection legend>span.closed, span.closed
{
	font-size:10px;
	display:block;
	float:right;
	padding:3px 0px 0px 20px;
	
}
span.closed::before {
	content: "\f078";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right:5px;
}

fieldset.collapsibleSection > div {
	margin-top: 10px;
}

/*
 * New Form Styles... should I fix the old to get the same results?
 * Things I hate about the old... the grid sizing is too tight
*/

.form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.form-row_nowrap {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.form-block {
    margin:10px;
}

.form-label {
    display: block;
    font-size:1rem;
}

.form-text {
    font-size:1rem;
}
.form-input {
    display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	/*background-image: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;*/
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position
	background-position: right .7em top 50%, 0 0;*/
	/* icon size, then gradient
	background-size: .65em auto, 100%; */


}
/* Hover style */
.form-input:hover {
	border-color: #888;
}
.form-input:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}


/* hub */
.form-button {
	display: block;
	font-size: 1.2rem;
	font-family: sans-serif;
	font-weight: 700;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	border-radius: .5em;
	color: var(--hub-button-text-color, #fff);
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border: solid 1px var(--hub-button-bottom-bg-color,#dddddd);
	background: var(--hub-button-bg-color,#ffffff);
	background: linear-gradient(to bottom, var(--hub-button-bg-color,#ffffff) 0%, var(--hub-button-bottom-bg-color, #ededed) 100%); /* W3C */
}
.form-button:hover {
	background: linear-gradient(to bottom, var(--hub-button-bg-hover-color,#ffffff) 0%, var(--hub-button-bottom-bg-hover-color, #ededed) 100%); 
}
.form-button:active {
	color: var(--hub-button-text-color, #fff);
	background: linear-gradient(to bottom, var(--hub-button-bg-hover-color,#ffffff) 0%, var(--hub-button-bottom-bg-hover-color, #ededed) 100%);
}
a.form-button {
	text-decoration: none !important;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	text-align: center;
	color: var(--hub-button-text-color, #fff) !important; /* needs to be important to over ride visited behavior */
}
/*
	--hub-button-bg-color__inverted:|InvertedButtonColor|;
	--hub-button-bg-hover-color__inverted:|InvertedButtonHoverColor|;
	--hub-button-bottom-bg-color__inverted:|InvertedButtonBottomColor|;
	--hub-button-bottom-bg-hover-color__inverted:|InvertedButtonBottomHoverColor|;
*/
.form-button__inverted {
	color: var(--hub-button-text-color__inverted, #333);
	background: var(--hub-button-bg-color__inverted, #fff);
}

a.form-button__inverted {
	color: var(--hub-button-text-color__inverted, #333) !important; /* needs to be important to over ride visited behavior */
}
.form-button__inverted:hover {
	background: var(--hub-button-bg-hover-color__inverted, #fff);
}

.form-button__inverted:active {
	background: var(--hub-button-bg-hover-color__inverted, #fff);
}
.form-button__small {
	font-size: 1rem;
	line-height: 1.2;
	padding: .6em;
}
.form-button__delete {
	text-decoration: none !important;
}
.form-button__delete::after {
	content: "\f057";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 5px;
	padding: 2px;
	border-radius: 50%;
	color: red;
	background-color: white;
}

.form-icon {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 0;
	line-height: 0;
	padding: 50% 0;
	border-radius: 50%;
	/* Just making it pretty*/
	/* shadow */
	-webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
	text-shadow: 0 4px 0 rgba(0, 0, 0, .1);
	/* default colors */
	color: var(--hub-button-text-color, #fff);
	background: var(--hub-button-bg-color,#888888);
	font-size: 23px;
	text-align: center;
}
/* Overrides the automatic line height of the Font Awesome library*/
.form-icon .fas {
    line-height:0 !important;
}

.form-block-40w {
    width:40px;
}
.form-block-50w {
    width:50px;
}
.form-block-75w {
    width:75px;
}
.form-block-100w {
    width:100px;
}
.form-block-125w {
    width:125px;
}
.form-block-150w {
    width:150px;
}
.form-block-175w {
    width:175px;
}
.form-block-200w {
    width:200px;
}
.form-block-250w {
    width:250px;
}
.form-block-300w {
    width:300px;
}
.form-block-350w {
    width:350px;
}

/* https://github.com/filamentgroup/select-css/blob/master/src/select-css.css */
/* class applies to select element itself, not a wrapper element */
.select-css {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23c0c0c0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')/*, linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)*/;
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
}
/* Focus style */
.select-css:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}

/* Set options to normal weight */
.select-css option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.select-css:disabled:hover, .select-css[aria-disabled=true] {
	border-color: #aaa;
}
/*End CSS styling*/
/* widths to line up with form sizes*/
table.twoField
{
	width:448px
}
table.threeField {
    width: 661px;
}
/* Table grid look */
table.tabular{
	/*border: 1px solid #083873;*/
	margin: 10px 0px 10px 0px;
	background-color:#ffffff;
	/*padding: 5px 5px 5px 5px;*/
}

/* borders for table */
table.tabular{
	border: 0px solid #cccccc;	
}

table.tabular>tbody>tr>td{
	border-bottom: 1px solid #dddddd;
	border-left: 1px solid #ffffff;
}
table.tabular>tbody>tr:nth-child(odd)>td{
	background-color:#eeeeee;
	border-left: 1px solid #eeeeee;
}

table.tabular thead{
	background-color:#0c3d7f !important;
	color: #ffffff;
}

table.tabular th{
	font-weight:bold;
	/*background-color:#0c3d7f !important;
	border:1px solid #083873;*/
	white-space: nowrap;
	/*background-image:url(images/topBar_bg.png) !important;*/
	padding: 2px 3px 3px 3px;
	text-align: left;
	
	background: #104584;/* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#104584), to(#083873)); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #104584,  #083873);/* FF3.6+ */
	background: -o-linear-gradient(top, #104584 0%,#083873 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #104584 0%,#083873 100%); /* IE10+ */
    background: linear-gradient(to bottom, #104584 0%,#083873 100%); /* W3C */
}

.tableSubheader td{
	font-weight:bold;
	/*background-color:#0c3d7f !important;
	border:1px solid #083873;*/
	white-space: nowrap;
	/*background-image:url(images/topBar_bg.png) !important;*/
	padding: 2px 3px 3px 3px;
	text-align: left;
	
	background: #ffb47d;/* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffc091), to(#ffb47d)); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #ffc091,  #ffb47d);/* FF3.6+ */
	background: -o-linear-gradient(top, #ffc091 0%,#ffb47d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffc091 0%,#ffb47d 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffc091 0%,#ffb47d 100%); /* W3C */
}

table.tabular th a.sortable{
	color:#ffffff;
	text-decoration:none;
	display:block;
	padding-left:10px;
	background-image:url("images/icon_sortArrows.png");
	background-repeat:no-repeat;
}
table.tabular th a.desc{
	background-position: 0px -57px;
}
table.tabular th a.asc{
	background-position: 0px -33px;
}
table.tabular td{
	padding: 2px 2px 2px 2px;
	vertical-align: top;
	text-align: left;
	background-color:transparent;
}

table.tabular tfoot{
	background-color:#E0E0E0 !important;
	/*background-image:url(images/topBar_bg.png) !important;
	background-repeat:repeat-x;*/
	color: #000000;
}
table.tabular tfoot td{
	background-color:#E0E0E0 !important;
	/*background-image:url(images/topBar_bg.png) !important;
	background-repeat:repeat-x;*/
	color: #000000;
	vertical-align:bottom;
}

.tableSubFooter, .tableSubFooter td{
	
	color: #000000;
	background-color:#E0E0E0;
	background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#E3E3E3)); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #E0E0E0,  #E3E3E3);/* FF3.6+ */
	background: -o-linear-gradient(top, #E0E0E0 0%,#E3E3E3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #E0E0E0 0%,#E3E3E3 100%); /* IE10+ */
    background: linear-gradient(to bottom, #E0E0E0 0%,#E3E3E3 100%); /* W3C */
}

table.fullWidth{
	width:100%;	
}

/*
table.lined tfoot, table.sortable tfoot{
	font-weight:bold;
	background: #B2CED7 url(styleImages/bg_table_header.png) repeat-x center bottom;
	border-bottom: 0;
}
tr.pageControl {
	background: #B2CED7 url(styleImages/bg_table_header.png) center bottom;
}
*/

th.action, td.action{
	width:75px;
	white-space:nowrap;
}

th.number, th.currency{text-align:right !important;}
td.number{text-align:right !important; white-space:nowrap;}
td.currency{text-align:right !important; width:80px;}

td.negative{text-align:right !important; color:Red !important; }
th.date, td.date{width:75px;}
th.small, td.small{width:75px;}
th.medium, td.medium{width:120px;}
td.bigNumber{min-width:100px;}
tr.even{}
tr.odd, td.odd, th.odd{background-color:#e5eff1 !important;}


/* Paging section - this is to replace the older junky one */
.paging-numbers {
	white-space:nowrap;
}
.paging-link {
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
	text-align: center;
	vertical-align: middle;
	background-color: var(--hub-button-bg-color);
	color: var(--hub-button-text-color);
	border-radius: .25rem;
}
a.paging-link {
	text-decoration: none;
	color: var(--hub-button-text-color) !important;
}
.paging-link-current {
	color: var(--hub-button-bg-color);
	background-color: var(--hub-button-text-color);
	border: 1px solid var(--hub-button-bg-color);
}
@media only screen and (max-width: 500px) {
	.paging-link-sm-hide {
		display:none;
	}
}
	/* All this paging junk needs to be deleted once it is all out of the pages */
	/* paging arrow styles*/
	.pagingTextWrapper {
		display: block;
		overflow: hidden;
		float: left;
		font-size: 12px;
		/*line-height:26px;*/
	}

	strong.pagingTextWrapper {
		padding: 0px 3px 0px 3px;
	}

	.pagingControlWrapper {
		display: block;
		overflow: hidden;
		float: right;
		font-size: 12px;
	}

		.pagingControlWrapper a.pagingNumber {
			min-width: 12px;
			height: 14px;
			border: 1px solid #a4abb2;
			margin: 1px 1px 0px 1px;
			display: block;
			overflow: hidden;
			float: left;
			font-size: 12px;
			text-align: center;
			vertical-align: middle;
			padding: 0px 1px 0px 1px;
			text-decoration: none;
			color: #404040;
			background-color: transparent;
			background-image: url(images/icon_PagingButtons.png) !important;
			background-position: left -80px;
		}

			.pagingControlWrapper a.pagingNumber:hover {
				background-position: center -80px;
			}

		.pagingControlWrapper .pagingLink {
			width: 18px;
			height: 14px;
			border: 1px solid #a4abb2;
			margin: 1px 1px 0px 1px;
			background-image: url(images/icon_PagingButtons.png) !important;
			display: block;
			overflow: hidden;
			float: left;
		}

			.pagingControlWrapper .pagingLink span {
				margin-left: -100px;
			}

		.pagingControlWrapper a.pagingFirst {
			background-position: center top;
		}

			.pagingControlWrapper a.pagingFirst:hover {
				background-position: right top;
			}

		.pagingControlWrapper span.pagingFirst {
			background-position: left top;
		}

		.pagingControlWrapper a.pagingBack {
			background-position: center -20px;
		}

			.pagingControlWrapper a.pagingBack:hover {
				background-position: right -20px;
			}

		.pagingControlWrapper span.pagingBack {
			background-position: left -20px;
		}

		.pagingControlWrapper a.pagingNext {
			background-position: center -40px;
		}

			.pagingControlWrapper a.pagingNext:hover {
				background-position: right -40px;
			}

		.pagingControlWrapper span.pagingNext {
			background-position: left -40px;
		}

		.pagingControlWrapper a.pagingLast {
			background-position: center -60px;
		}

			.pagingControlWrapper a.pagingLast:hover {
				background-position: right -60px;
			}

		.pagingControlWrapper span.pagingLast {
			background-position: left -60px;
		}

/* this is hidden until things get small*/
.small-show {
    display:none;
}


@media only screen and (max-width: 960px) {
    /*.content-wrapper, nav, footer {
        width: calc(100% - 20px)!important;
        margin: 0;
        padding:0 !important;
    }*/
    header {
        width: 100% !important;
    }
    .content-padding {
        padding-right:1rem !important;
        padding-left:1rem !important;
    }
    
    #ExpandMenu {
        display:none;
    }
    .nav-toggle {
       
        /*style stuff*/
        background-color:transparent;
        border-width:1px;
        border-style: solid;
        border-color: #dddddd;
        border-radius: 4px;
        padding: 9px 10px;
        /*margin-top:-36px;
        margin-bottom:3px;*/

        /* position stuff */
         display:block;
        position:fixed;
        top:5px;
        left:10px;

        cursor:pointer;
        z-index:101;
    }

    .nav-toggle:focus {
      outline: 0;
    }
    .nav-toggle .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
      /*border:1px solid #dddddd;*/
      background-color: transparent;
    }
    .nav-toggle .icon-bar + .icon-bar {
      margin-top: 4px;
    }

    nav
    {
        overflow:visible;
        height:auto !important;
        margin:auto;
        
        border:none;
         /* position stuff */
         display:block;
        position:fixed;
        top:0px;
        left:0px;
        z-index:100;
        /*min-height: 40px;*/

    }
    nav ul{
        margin-top:40px;
        height:auto;
    }
    nav ul li{
        float:none;
        position:static;
        display:block;
    }

    
    nav li ul {
        margin-top:0px;
        display:block;
        position:static;
        height:auto;
        padding-left:10px;
    }
    /* Redefine this for mobile */
    #AccountTopMenu {
        left:auto;
        right:0px;
        width:225px !important;
    }

    .submenu li {
        display:block;
        float:none;
        height:auto;
    }
    /*
        , h2.siteDescription
   
    h1.headerTitle {
        text-indent: 0px;
        position:absolute;
         left:70px;
         top:10px;
    } */
    #menu {
    display:none;
    }
    .sideBarStories {
        display:none;
    }

    .mainStories {
        width:90% !important;
       margin:auto;
    }

  
    img { max-width: 100%; }

    /*admin menu goes her too menuForbox*/
    .rightMenu {
        display:none;
    } 
    footer .footerContainer{
        max-width:350px;
        min-width:200px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 500px) {
    .callout-subtitle {
        font-size: 1.2rem !important;
    }
    .callout-title {
        font-size: 2rem !important;
    }
}

@media only screen and (max-width: 700px) {
    html,body
    {
        /*Why was this set to hidden on x overflow?  Is this causinging the Iphone issues*/
        /*overflow-x: hidden;*/
        /*position:fixed;*/
    }
    header .content-wrapper
    {
	    /*position: relative;*/
        /*background-image:none !important;
	    height:120px !important;*/
    }
    .breakout h3 {
        font-size:2.5rem;
        line-height:2.5rem;
        padding-bottom:2.5rem;
    }
    
    fieldset, .threeField {
        padding-right:0 !important;
        padding-left:0 !important;
        margin-right:0 !important;
        margin-left:0 !important;
        width:100% !important;
        border-left:none;
        border-right:none;
    }
    .leftInnerColumn, .rightInnerColumn {
        float: none;
        width: 100% !important;
    }
    .largerField {
         width:97% !important;
        max-width:97% !important;
        min-width: 200px !important;
        margin: 0 !important;
        padding-right:0 !important;
        padding-left:0 !important;
    }
    .largerField input[type="text"], 
    .largerField input[type="password"],
    .largerField select,
    .largerField textarea 
    {
        width:100% !important;
        max-width:100% !important;
        min-width: 200px !important;
    }
    
}

@media only screen and (max-width: 600px) {
    
    .footerContainer {
        height:auto !important;
    }
     footer .middle {
        width:100% !important;
        padding:0 !important;
        min-height:30px !important;
        clear:both;
        text-align:left !important;
    }
   
    /*.mainStories, .pageContent {
        width:96% !important;
    }*/
    
    .article {
      flex-flow: column nowrap;
    }
    
    .breakout h3 {
        font-size:2rem;
        line-height:2rem;
        padding-bottom:2rem;
    }

    .breakout:nth-child(odd) .article {
        flex-direction:column;
    }
    .breakout:nth-child(even) .pic-single {
         margin:0 0 0 0;
    }
    .breakout:nth-child(odd) .pic-single {
         margin:0 0 0 0;
    }

    .article-pics {
        width:100%;
        height:100%;
        text-align:center;
    }

    .storyPics {
        float:none !important; 
        width:100%;
        margin: 0px 10px 10px 0px; 
        white-space:nowrap;
        overflow:hidden;
    }
   
    #LoginLinks {
        display:none;
    }
}

@media only screen and (max-width: 500px) {
    .callouts {
        justify-content: center;
        flex-direction: column;
    }

    .callout {
        width: 100% !important;
        position: relative;
    }

    .callout-1 {
        order: 1 !important;
        margin-bottom: 10px;
    }

    .callout-2 {
        order: 2;
        margin-bottom: 10px;
    }

    .callout-3 {
        order: 3;
    }

    .callout-titles {
        position: absolute;
        display: block;
        width: 100%;
        margin-top: -85px;
        padding-bottom: 10px;
        background-color: rgba(255, 255, 255, .8);
    }

    .small-hide {
        display: none;
    }

    .small-show {
        display: block;
    }
    /* these don't work in pop-ups so skip when on the phone*/
    a.additionalHelp {
        display: none !important;
    }

    .form-row-sm_right {
        justify-content: flex-end;
    }

    .form-block {
        margin: 0;
        padding: .5rem;
    }

    .form-block-50w {
        width: 50%;
    }

    .form-block-75w {
        width: 50%;
    }

    .form-block-100w {
        width: 50%;
    }

    .form-block-125w {
        width: 50%;
    }

    .form-block-150w {
        width: 50%;
    }

    .form-block-175w {
        width: 50%;
    }

    .form-block-200w {
        width: 100%;
    }

    .form-block-250w {
        width: 100%;
    }

    .form-block-300w {
        width: 100%;
    }

    .form-block-350w {
        width: 100%;
    }

    .twoField {
        width: initial;
        max-width: 100%;
    }
}
@media only screen and (max-width: 450px) {
    .fullRow {
        padding: 0 !important;
    }
   .largeField {
         width:97% !important;
        max-width:97% !important;
        min-width: 200px !important;
        margin: 0 !important;
        padding-right:0 !important;
        padding-left:0 !important;
    }
    .largeField input[type="text"], 
    .largeField input[type="password"],
    .largeField select,
    .largeField textarea 
    {
        width:100% !important;
        max-width:100% !important;
        min-width: 200px !important;
    }
   
    
    .mediumField {
         width:97% !important;
        max-width:97% !important;
        min-width: 200px !important;
        margin: 0 !important;
        padding-right:0 !important;
        padding-left:0 !important;
    }
    .mediumField input[type="text"], 
    .mediumField input[type="password"],
    .mediumField select,
    .mediumField textarea 
    {
        width:100% !important;
        max-width:100% !important;
        min-width: 200px !important;
    }
    .pageMessage {
        width: 100%;
    }
}
/*
*   Item card for laying out the Inventory management pages
*   potentially could be used for shopping
*/
.item-card {
    display: grid;
    margin: 0 0 1rem 0;
    border: 1px solid var(--hub-menu-bg-color);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, .05);
}

.item-card-wide-wrapper {
    clear: inline-start;
    margin-top: 1rem;
}

.item-card-manage {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "itemname itemname itemname"
        "picture category category"
        "picture description description"
        "picture history history"
        "picture approvalprocess approvalprocess"
        "picture prices prices"
        "pictures delete edit";
}

.item-card-submitted {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "itemname itemname farm"
        "picture category prices"
        "picture taxrate prices"
        "picture history prices"
        "picture description description"
        "picture reject approve";
}

.item-card-rejected {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "itemname itemname farm"
        "picture category prices"
        "picture taxrate prices"
        "picture history prices"
        "picture description description"
        "picture delete approve";
}

.item-card-accepted {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "itemname itemname farm"
        "picture category prices"
        "picture taxrate prices"
        "picture history prices"
        "picture description description"
        "picture delete reject";
}

.item-card-audit {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "itemname itemname"
        "picture category"
        "picture taxrate"
        "picture tags"
        "picture description"
        "picture audit";
}

@media only screen and (max-width: 500px) {
    .item-card-manage {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "itemname itemname"
            "picture picture"
            "category category"
            "description description"
            "history history"
            "approvalprocess approvalprocess"
            "prices prices"
            "pictures pictures"
            "delete edit";
    }
    /*.item-card-manageinventory {
        display:block;   
    }
    .item-card-manageinventory__link {
        display:none;
    }*/
    .item-card-submitted {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "itemname itemname"
            "farm farm"
            "picture picture"
            "category prices"
            "taxrate prices"
            "history prices"
            "description description"
            "reject approve";
    }

    .item-card-rejected {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "itemname itemname"
            "farm farm"
            "picture picture"
            "category prices"
            "taxrate prices"
            "history prices"
            "description description"
            "delete approve";
    }

    .item-card-accepted {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "itemname itemname"
            "farm farm"
            "picture picture"
            "category prices"
            "taxrate prices"
            "history prices"
            "description description"
            "delete reject";
    }

    .item-card-audit {
        grid-template-columns: 1fr;
        grid-template-areas:
            "itemname"
            "picture"
            "category"
            "taxrate"
            "tags"
            "description"
            "audit";
    }

    .item-card-picture {
        margin: auto !important;
    }
}

.item-card-picture {
    grid-area: picture;
    margin:.5rem auto;
}

.item-card-name {
    grid-area: itemname;
    margin: 0;
    padding: .25rem;
    background-color: var(--hub-menu-bg-color);
    color: var(--hub-menu-text-color);
}

.item-card-farm {
    grid-area: farm;
    margin: 0;
    padding: .25rem;
    background-color: var(--hub-menu-bg-color);
    color: var(--hub-menu-text-color);
}
.item-card-farm a {
    color: var(--hub-menu-text-color) !important;
    font-weight:700;
}

.item-card-category {
    margin: .25rem;
    grid-area: category;
}

.item-card-prices {
    margin: .25rem;
    grid-area: prices;
}

.item-card-tags {
    margin: .25rem;
    grid-area: tags;
}

.item-card-taxrate {
    margin: .25rem;
    grid-area: taxrate;
}

.item-card-history {
    margin: .25rem;
    grid-area: history;
}
.item-card-approvalprocess {
    margin: .25rem;
    grid-area: approvalprocess;
}
.item-card-description {
    margin: .25rem;
    grid-area: description;
}

.item-card-comment {
    margin: .25rem;
    grid-area: comment;
}

.item-card-reject {
    grid-area: reject;
    margin: .25rem;
    padding: .5rem;
}

.item-card-approve {
    grid-area: approve;
    margin: .25rem;
    padding: .5rem;
}

.item-card-delete {
    grid-area: delete;
    margin: .25rem;
    padding: .5rem;
}

.item-card-edit {
    grid-area: edit;
    margin: .25rem;
    padding: .5rem;
}
.item-card-manageinventory {
    grid-area: manageinventory;
    margin: .25rem;
    padding: .5rem;
    display:none;
}
.item-card-pictures {
    grid-area: pictures;
    margin: .25rem;
    padding: .5rem;
}
.item-card-auditview {
    grid-area: audit;
    margin: .25rem;
}

.item-card-header {
    margin: .25rem !important;
}

.item-card-row {
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
}

/* Item maintenance form */
.hubsubmission-container {
    border:1px solid #eeeeee;
    margin-bottom:.25rem;
}
.hubsubmission-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: .25rem .5rem; 
    background-color: #eeeeee;
}

.hubsubmission-header h3 {
    margin: 0 !important;
}

.hubsubmission-row {
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
}
.hubsubmission-notes {
    padding:0 .5rem;
}
/*
*   Adding a seperate stylesheet for this, because it is comp[lex.  may integrate into main sheet later.
*
*/

.inventory-edit {
    
}

/* Generic form elements I will incorperate back */
.form-radio-list ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(0, 1fr));
    margin-top: 5px;
    margin-left: 3px;
}

.form-checkbox-list ul {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px, 1fr));
}

.form-checkbox-list li, .form-radio-list li{
    list-style-type: none;
    max-width: 170px;
    min-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-checkbox-list label, .form-radio-list label {
    margin-left: .25em;
}

@media only screen and (max-width: 400px) {
    .form-checkbox-list ul, .form-radio-list ul {
        grid-template-columns: repeat(auto-fit,minmax(130px, 1fr));
    }
}
/* Shopping stuff */

/* Search form */

.shoppingSearchBar {
    min-height: 28px;
}
/*#SearchTerms{
        display:none;
    }*/

.shopping-toggle-btn {
    display: inline-block;
    background-color: transparent !important;
    border: 0px solid transparent;
    padding: 9px 10px;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -4px;
    cursor: pointer;
    min-width: 120px;
}

.shopping-toggle-btn:focus, .shopping-toggle-btn:hover {
    /*transform: scale(1.01);*/
    outline-offset: -5px;
    outline-width: 2px;
}

.shopping-control-sticky {
    z-index: 1000;
    /*background-color: var(--hub-menu-bg-rbga-color);
    right: 0;
    left: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);*/
}
.shopping-control-sticky__fixed {
    position: fixed;
    top: 45px;
   
}

.shopping-control-active:focus {
    outline: none;
}

.shopping-toggle-btn {
    outline-color: var(--hub-menu-text-color) !important;
}

.shopping-control-wrapper {
    background-color: var(--hub-menu-bg-rbga-color);
    color: var(--hub-menu-text-color);
    display: flex;
    justify-content: space-between;
    padding-top: 1px;
    width: 960px;
}

.shopping-control-wrapper a, shopping-control-wrapper a:hover, shopping-control-wrapper a:visited {
    color: var(--hub-menu-text-color) !important;
    border-bottom: 2px solid var(--hub-menu-bg-hover-color) !important;
}



.shopping-search-terms {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
    padding: 10px 5px 10px 5px;
    background-color: #fff;
   /* width: 960px;*/
}

.shopping-search-cancel {
    display: none;
}

.shopping-link {
    font-size: 12px;
    text-decoration: none;
    padding: 0 5px 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/**/
.shopping-toggle-btn {
    color: var(--hub-menu-text-color);
    padding: 10px 10px 10px 10px;
    font-size: 16px;
    position: sticky;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100px;
    max-width: 200px;
    cursor: pointer;
    margin: 0 2px 0 2px;
    border-radius: 4px 4px 0 0;
}

.shopping-toggle-btn__active {
    background: #ffffff !important;
    color: #000000 !important;
    margin-top: auto;
    margin-bottom: -2px;
    outline: none;
}

.shopping-bullet-left {
    display: inline-flex;
}

.shopping-bullet-shadow {
    border-radius: 40px 10px 10px 40px;
    /*text-shadow: 0 4px 0 rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);*/
}

.shopping-bullet-noshadow {
    border-radius: 20px 5px 0px 0px;
}

.shopping-bullet-right {
    display: inline-flex;
}

.shopping-bullet-right-shadow {
    border-radius: 10px 40px 40px 10px;
    /*text-shadow: 0 4px 0 rgba(0, 0, 0, .1);
        -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
        box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);*/
}

.shopping-bullet-right-noshadow {
    border-radius: 5px 20px 0px 0px;
}

.shopping-control-under {
    background-color: #fff;
    border: 2px solid var(--hub-menu-bg-rbga-color) !important;
   /* width: 960px;*/
}
/* Need to leave the shop open.  */
#PickUpLocationFormShoppingPage {
    display: none;
}

.shopping-bar-right {
    background: #cccccc;
    display: flex;
    justify-content: flex-end;
}

.shopping-menu-buttons {
    /*position: relative;*/
    display: inline-block;
    width: 100%;
    height: 0;
    line-height: 0;
    padding: 50% 0;
    border-radius: 50% 20% 20% 50%;
    /* Just making it pretty*/
    /* shadow */
    -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1);
    text-shadow: 0 4px 0 rgba(0, 0, 0, .1);
    /* default colors */
    background: #888888;
    color: white;
    /*font-family: Helvetica, Arial Black, sans;*/
    font-size: 23px;
    /* text-align: center;*/
}






.input-search {
    border-radius: 4px 4px 4px 4px;
    font-size: 14px;
    padding: 0 9px 0 10px;
    height: 35px;
}
/* Shopping area*/
.itemBox {
    border: 1px solid #dddddd;
    width: 280px;
    padding: 0px 0px 0px 0px;
    float: left;
    height: 505px;
    overflow: hidden;
    position: relative;
    margin: 10px 10px 0px 10px;
    border-radius: 6px 6px 6px 6px;
}

.item-box-title {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    margin: 0 0 5px 0;
    text-align: center;
    background-color: rgb(0,0,0,0.05);
}

.item-box-title--a {
    text-decoration: none;
}

.viewItem {
    border: 1px solid #dddddd;
    min-width: 300px;
    max-width: 500px;
    padding: 5px;
    background-color: white;
    margin: auto;
    border-radius: 6px 6px 6px 6px;
}

    .viewItem .mfp-close {
        float: right;
        position: relative;
    }

.itemBox h4 {
    color: #000000;
    font-size: 14px;
    padding: 0px 5px 0px 5px !important;
}

.itemBox p {
    padding: 0px 5px 0px 5px !important;
}

.noPictureBoxSearch {
    width: 197px;
    height: 150px;
    background-image: url("/Content/images/NoPic.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.bottomBar {
    /*position:absolute;*/
    position: relative;
    padding-top: 0px;
    /*top:320px;*/
    /*bottom:0px;*/
    height: 170px;
    /*width:100%;
	background-image:url("/Content/images/whiteFade.png");
	background-repeat:repeat-x;*/
}

.bottomBar-overflow {
    overflow-y: scroll;
}

.bottomBar .fullDetailsLink {
    text-align: center;
    padding: 0px 0px 0px 0px;
    bottom: 1px;
    left: -2px;
    position: absolute;
    width: 100%;
    background-color: #eee;
}

.bottomBar .shoppingBar {
    border: none;
    /*min-height:60px;
		margin-bottom:5px;
		padding: 3px;
		width:100%;*/
}


/* lose the first shopping bar here */
@media only screen and (max-width: 960px) {
    .shopping-control-under-hidden {
        display: none;
    }
    .shopping-control-wrapper {
        width: unset;
    }
    .shopping-control-sticky {
        right: 0;
        left: 0;
        
    }
    .shopping-control-sticky__fixed{
        top:0px;
    }
}
/*This whole item box is a hot mess - switch to flex */
@media only screen and (max-width: 934px) and (min-width: 801px) {
    .itemBox {
        margin: 10px 50px 0px 50px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 760px) {

    .itemBox {
        margin: 10px 40px 0px 40px;
    }
}

@media only screen and (max-width: 759px) and (min-width: 740px) {
    .itemBox {
        margin: 10px 30px 0px 30px;
    }
}
@media only screen and (max-width: 600px) {
    #ShoppingBoxes {
        margin: auto;
    }

    #ShoppingBoxes .itemBox {
        float: none;
        margin: auto;
    }
}
@media only screen and (max-width: 500px) {
    /* shopping experience */
    .itemBox {
        height: fit-content !important;
        margin-bottom: .5rem !important;
    }

    .bottomBar {
        height: fit-content !important;
    }

    .fullDetailsLink {
        position: relative !important;
    }
    
    .shopping-search-cancel {
        display: flex;
        align-items: flex-end;
    }
}



/* Search loading animation */

#SearchLoader {
    display: none;
}

@keyframes loader {
    50% {
        filter: blur(2px);
        transform: translateY(-5px);
        opacity: 0.5;
    }
}

.loader {
    width: 100px;
    height: 35px;
    margin: -7px auto 0 auto;
    position: relative;
}

.loader > div {
    height: 15px;
    width: 15px;
    background-color: #222;
    float: left;
    margin: 0 5px 0 0;
    animation: loader 0.7s infinite;
    opacity: 0.5;
    border-radius: 10%;
}

.loader > div:nth-child(1) {
    animation-delay: 0.1s;
}

.loader > div:nth-child(2) {
    animation-delay: 0.2s;
}

.loader > div:nth-child(3) {
    animation-delay: 0.3s;
}

.loader > div:nth-child(4) {
    animation-delay: 0.4s;
}

.loader > div:nth-child(5) {
    animation-delay: 0.5s;
}

/**
* Copyright (c) 2011, Joe Cummins
* All rights reserved.
* 
* Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* 
*     Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
*     Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
*     Neither the name of the <ORGANIZATION> nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
* 
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* jQuery tooltip Plugin 1.1.1
*/
/*
* Additional note from Joe:	I am under contract to produce a web system for Lulus.  This set of tool tips
*					already existed in my code library.  I'm releasing under the BSD-3 license so I can retain copyright
*					and provide Lulus and anyone looking at this file the right to use it.
*/

/* Tooltip Area for use with the jquery.tooltip.js file*/
.tooltip-base{
	font-size:11px;
	line-height:1.2em;
	padding:4px;
	position:absolute;
	text-align:left;
	width:150px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px 4px 4px 4px;
	-moz-box-shadow:2px 2px 6px #333333;
	-webkit-box-shadow:2px 2px 6px #333333;
	box-shadow:2px 2px 6px #333333;
	z-index:1002;
}
.tooltip-base a{
	color:Navy !important;
	font-weight:normal;
}
.tooltip-base h4{
	padding:0;
	margin:0;
}

.tooltip-arrow{
	border-style: solid;
	border-width: 8px;
	height:0;
	width:0;
	position:absolute;
}

.tooltip-arrow-border{
	border-style: solid;
	border-width: 8px;
	height:0;
	width:0;
	position:absolute;
}
.tooltip-loading{
	background-image:url(images/round_loader.gif);
	background-repeat:no-repeat;
	background-position:center center;
	min-height:90px;
}
/* colors */
.tooltip-standard{
	color:#000000;
	background-color:#f7faff;
	border:1px solid #bbbbbb;
}
.tooltip-standard .tooltip-arrow{
	border-color: #f7faff;
}
.tooltip-standard .tooltip-arrow-border{
	border-color: #dddddd;
}

.tooltip-error{
	/*color:#000000;
	background-color:#fff3a5;
	border:1px solid #bd1800;*/
	border: 1px solid #cd0a0a; /*background: #fef1ec url(custom-blue-theme/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;*/ color: #cd0a0a;
}
.tooltip-error .tooltip-arrow{
	/*border-color: #fff3a5;*/
	border-color: #fef1ec;
}
.tooltip-error .tooltip-arrow-border{
	/*border-color: #bd1800;*/
	border-color: #cd0a0a;
}

.tooltip-warning{
	color:#000000;
	background-color:#fff3a5;
	border:1px solid #ffd329;
	
}

.tooltip-warning .tooltip-arrow{
	border-color: #fff3a5;
}
.tooltip-warning .tooltip-arrow-border{
	border-color: #ffd329;
}


.tooltip-above>.tooltip-arrow{
	bottom:-16px;
	left:10px;
	border-right-color:transparent;
	border-bottom-color:transparent;
	border-left-color:transparent;
}
.tooltip-above>.tooltip-arrow-border{
	bottom:-17px;
	left:10px;
	border-right-color:transparent;
	border-bottom-color:transparent;
	border-left-color:transparent;
}

.tooltip-below .tooltip-arrow{
	top:-16px;
	left:10px;
	border-right-color:transparent;
	border-top-color:transparent;
	border-left-color:transparent;
}

.tooltip-below .tooltip-arrow-border{
	top:-17px;
	left:10px;
	border-right-color:transparent;
	border-top-color:transparent;
	border-left-color:transparent;
}

.tooltip-right .tooltip-arrow{
	top:10px;
	left:-16px;
	border-bottom-color:transparent;
	border-top-color:transparent;
	border-left-color:transparent;
}

.tooltip-right .tooltip-arrow-border{
	top:10px;
	left:-17px;
	border-bottom-color:transparent;
	border-top-color:transparent;
	border-left-color:transparent;
}

.tooltip-left .tooltip-arrow{
	top:10px;
	right:-15px;
	border-bottom-color:transparent;
	border-top-color:transparent;
	border-right-color:transparent;
}

.tooltip-left .tooltip-arrow-border{
	top:10px;
	right:-17px;
	border-bottom-color:transparent;
	border-top-color:transparent;
	border-right-color:transparent;
}

.tooltip-base .closeButton{
	width:16px !important;
	min-width:16px;
	height:16px;
	min-height:16px;
	background-image:url(images/icon_close.png) !important;
	background-color:transparent!important;
	background-repeat:no-repeat;
	background-position: left top !important;
	border: none !important;
	color:transparent;
	font-size:0;
	overflow:hidden;
	position:absolute;
	left:100%;
	top:-8px;
	margin-left:-8px;
}
.tooltip-base .closeButton:hover{
	background-position:left bottom !important;
	background-image:url(images/icon_close.png) !important;
}
/* Tooltip Area End */

.helpButton{
	width:16px;
	height:16px;
	border:none;
	background-image:url(images/icon_help.png) !important;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:top center !important;
	color:transparent;
	font-size:0;
	overflow:hidden;
	/**position:absolute;
	left:100%;
	top:1px;
	margin-left:-16px;*/
}
.infoButton{
	width:16px;
	height:16px;
	border:none;
	background-image:url(images/icon_info.png) !important;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:top left !important;
	color:transparent;
	font-size:0;
	overflow:hidden;
	position:relative;
	top: -4px;
	cursor:pointer;
}