﻿
* {
	box-sizing: border-box;
}

@font-face {
    font-family: 'MyriadProRegular';
    src: url('fonts/myriadpro-regular_0-webfont.eot');
    src: url('fonts/myriadpro-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-regular_0-webfont.woff') format('woff'),
         url('fonts/myriadpro-regular_0-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-regular_0-webfont.svg#MyriadProRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MyriadProSemibold';
    src: url('fonts/myriadpro-semibold_0-webfont.eot');
    src: url('fonts/myriadpro-semibold_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-semibold_0-webfont.woff') format('woff'),
         url('fonts/myriadpro-semibold_0-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-semibold_0-webfont.svg#MyriadProSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'MyriadProBold';
    src: url('fonts/myriadpro-bold-webfont.eot');
    src: url('fonts/myriadpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-bold-webfont.woff') format('woff'),
         url('fonts/myriadpro-bold-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-bold-webfont.svg#MyriadProBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'MyriadProLight';
    src: url('fonts/myriadpro-light-webfont.eot');
    src: url('fonts/myriadpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/myriadpro-light-webfont.woff') format('woff'),
         url('fonts/myriadpro-light-webfont.ttf') format('truetype'),
         url('fonts/myriadpro-light-webfont.svg#MyriadProLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
 * Establish base formatting for elements
 */

html
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	font-variant:normal;
	font-style:normal;
	line-height:normal;
}

.page-width-guard {
	min-width: 1030px;
	max-width: 1430px;
	margin: 0 auto;
	padding: 0 15px;
}

#siteHeader {
	margin-bottom:10px;
}

#logo {
	flex: 0 0 270px; /* Don't grow, Don't shrink, Fixed at 270px */
	padding: 12px 0;
}

#logo img {
	display:block ;
}

#menu {
	flex: 1 1 0%; /* allow to grow and shrink, no basis size, distribute space equally*/
	gap: 15px;
	align-items: center;
	font-size: 14px;
	font-family: 'MyriadProRegular';
	text-align: center;
	text-transform: uppercase;
}

	#menu a {
		flex: 0 0 80px; /* Does not grow or shrink, fixed at 80px */
		text-decoration: none;
	}

		#menu a:first-child {
			margin-right: auto;
		}

/* 
 * Flexbox containers and columns
 */

/* 
	BAND (display:flex with flex-direction:row)
	Use this for horizontal strips such as sidebar+main split
*/
.layout-band {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	box-sizing: border-box;
	gap: 20px;
	width: 100%;
}

/* 
	STACK (display:flex with flex-direction:column)
	Use this for vertical content such as Form inputs
*/
.layout-stack {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	box-sizing: border-box;
	gap: 20px;
}

/* Columns */
.left-column,
.left-column-wide {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 12px;
}

.left-column {
	flex-basis: 270px;
	width: 270px; /* IE11 failsafe */
	max-width: 270px;
}

.left-column-wide {
	flex-basis: 650px;
	width: 650px; /* IE11 failsafe */
	max-width: 650px;
}

.justify-right {
	margin-left: auto;
}

.justify-left {
	margin-right: auto;
}

.right-column {
	flex: 1 1 auto; 
	width: 0; 
	min-width: 0; 
	overflow-x: auto; 
}

#titleContainer h1 {
	padding-left: 0;
}

/* End of styles for frmMenu.Master */

.hidden-logic-container {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}

input[type=text],
input[type=button],
input[type=submit],
label,
select,
textarea
{
	font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

input[type=submit],input[type=button] { display:inline-block;*display:inline;*zoom:1; padding:2px 10px; }

input[type=text],input[type=password],textarea { border:1px solid #ccc; padding:3px; }

input[type=text]:focus,input[type=password]:focus,textarea:focus {border-color:#666;}

fieldset { display:block;}
legend	{ margin:0 10px; padding: 0 5px; }
textarea { resize:none; }
ul li {display:inline-block;*display:inline;*zoom:1;}

/*
 * Modal classes used to always override other settings
 */
.hidden { display: none; }
.invisible {display:none !important;}
.number, .date, .currency { text-align: right !important; }
.center { margin-left:auto !important; margin-right:auto !important; }
.modalBackground { background-color:Gray !important; opacity:0.7 !important; }
.emphasis { font-weight:bold !important;}
.clear { clear:both; }
.left { float:left; }
.right { float:right; }

/*
 * h1 is used for titles of each subpage, and of popups
 */
h1 
{
  width: auto;
	font-family:MyriadProSemiBold;
  font-weight: bold;
  font-size: 24px;
	display:inline-block;*display:inline;*zoom:1;
	text-align:left;
	vertical-align:top;
	text-transform:uppercase;
	padding:5px 0 15px 10px;
}

/*
 * h2 is used for subheadings 
 */
h2
{
	font-family:MyriadProSemiBold;
  font-size: 16px;
  font-weight:700;
	text-align:center;
	margin-bottom:15px;
	*margin-bottom:14px;
}		
  
/*
 * h3 is used for highlighted banners  
 */
h3
{
	padding-top:4px;
	padding-bottom:4px;
	margin:5px auto 0px auto;
	font-weight: bold;
	font-size: 20px;
	text-align:center;
	vertical-align:bottom;
	position:relative;
	z-index:2;
}

input[type=submit].button,
input[type=button].button, a.button {
    border-radius: 5px;
    border: none;
    text-align: center;
    padding: 5px 15px;
    background-repeat: no-repeat;
    background-position: 5px;
    text-decoration: none;
    width: 160px;
/*    position: relative;*/
    z-index: 150;
}

input[type=submit]:hover.button,
input[type=button]:hover.button, a:hover.button {
    cursor: pointer;
}

/*
 * .dialogTitle is the title at the top of each dialog
 */

div.dialogTitle h1
{
	padding-top:15px;
}

/*
 *	Default styles for widgets
 */

.widgetTitle 
{
	border-radius: 2px;
	position: relative;
	z-index: 100;
	behavior: url(Assets/Scripts/PIE.htc);
	margin-bottom: -2px;
	vertical-align: top;
	text-align: left;
}

.widgetBody 
{
	width: auto;
	border-radius: 0 0 2px 2px;
	z-index: 100;
	position: relative;
	behavior: url(Assets/Scripts/PIE.htc);
}

/*
 * Styles for the cart panel on the right end
 * of the Title Container
 */

	.cartWidget .widgetTitle {
		margin-top: 8px;
	}

div.cartWidget
{
	flex: 0 0 230px;
}

div.cartWidget .widgetTitle
{
	padding:5px 0 5px 10px;
}

div.cartWidget a, div.cartWidget span, div.cartWidget input[type=image]
{
	margin-right:6px;
	vertical-align:middle;
	text-decoration:none;
}

div.dialogBody
{
	overflow:hidden;
	padding:10px 15px 0 15px;
}

.progressBox 
{
	padding-left: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 12px;
	behavior: url(Assets/Scripts/PIE.htc);
}

.dialog
{
	padding-bottom:6px;
}

/* definitions for *'d messages */
div.finePrint
{
	clear:both;
	font-size:9px;
	margin:10px auto;
}

div.fineprint span
{
	vertical-align:super;
}

/*
 * Header above search/order grids
 */

	.gridHeader
	{
		font-size:0px;
		border-bottom-style:solid;
		border-bottom-width: 3px;  
		text-align:left;
		padding-bottom:1px;
		font-weight:bold; 
		line-height:13px;
	}

	.gridHeader div
	{
		font-size:12px; 
		text-align:left;
		display:inline-block; 
		vertical-align:bottom;
	}

	.gridHeader div span
	{
		vertical-align:bottom;
		font-size:9px;
	}

/*
 * Footer below search/order grids
 */

	.gridFooter
	{
		padding-top:4px; 
		border-top-style:solid;
		border-top-width: 3px;  
		overflow:hidden;
	}

	.gridMessages
	{
		float:left;
		width:74%;
	}

	.gridCount
	{
		float:right;
		width:25%;
		text-align:right;
	}

	.gridMessages>span, .gridCount
	{
		display:block;
		font-size:11px;
		vertical-align:top;
		line-height:14px;
	}

  div.incentivewrapper
  {
	width: 95%;
    overflow-x:hidden;
    margin: 20px auto 0px auto;
  }

  #customAlert {
      display: none;
      position: fixed;
      z-index: 20001;
      width: 300px;
  }
  
  #customAlert p {
      font-size: 16px;
  }
  
  #customAlert input[type=button] {
      width: auto;
      min-width: 80px;
  }

  #idFooter {
      text-align: right;
      width: auto;
      margin: 0 auto;
      padding: 10px 10px 0 0;
  }

.preserve-breaks {
    white-space: pre-line;
}
