/* =============================================================================
My Orders Form Elements
========================================================================== */

.gridContainer form {margin:0}

.gridContainer fieldset {
	border: 0;
	margin: 0;
	padding: 0
	}

.gridContainer label {cursor:pointer}
.gridContainer legend {
	border: 0;
	*margin-left: -7px;
	padding: 0
	}

.gridContainer button,
.gridContainer input,
.gridContainer select,
.gridContainer textarea,
.gridContainer text {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	*vertical-align: middle;
	width:100%;
	padding:1em;
	border-radius:0; 
	}

.gridContainer button,
.gridContainer input {
	line-height: normal;
	*overflow: visible
	}

.gridContainer table button,
.gridContainer table input {*overflow: auto}

.gridContainer button,
.gridContainer input[type="button"],
.gridContainer input[type="reset"],
.gridContainer input[type="submit"] {
	cursor: pointer;
	-webkit-appearance:button;
	-webkit-border-radius: 0;
	border-radius: 0;
	outline-style:none;
	color:#000
}

.gridContainer button:hover,
/*.gridContainer input[type="button"]:hover,*/
.gridContainer input[type="reset"]:hover,
.gridContainer input[type="submit"]:hover,
.gridContainer button:active,
.gridContainer input[type="button"]:active,
.gridContainer input[type="reset"]:active,
.gridContainer input[type="submit"]:active,
.gridContainer button:focus,
.gridContainer input[type="button"]:focus,
.gridContainer input[type="reset"]:focus,
.gridContainer input[type="submit"]:focus,

#appFilter.active > a input {
	outline-style:none;
	color: #FFFFFF
}


.gridContainer input[type="checkbox"],
input[type="radio"] {box-sizing: border-box}

.gridContainer input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box
	}

.gridContainer input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}

.gridContainer button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0
	}

.gridContainer buttontextarea {
	overflow: auto;
	vertical-align: top;
	resize: vertical
	}

.gridContainer input:valid,
.gridContainer textarea:valid,
.gridContainer text {
	outline-style:none;
	border-radius:0!important
	}

.gridContainer input:invalid,
.gridContainer textarea:invalid {background-color:#f0dddd}


/* =============================================================================
Tables
========================================================================== */

.gridContainer table {
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
	font-size:12px
}

.gridContainer .responsive tbody tr td a,
.return-request-list-page a {
	text-decoration: underline;
	font-weight:bold
	}
.gridContainer #appFilters #appFilter a {text-decoration:none!important}


/* ===========================================================================
Author: 
========================================================================== */
.gridContainer h1,
.gridContainer h2,
.gridContainer h3,
.gridContainer p {
	font-weight:normal;
	padding:0;
	margin:0 0 1em 0;
}

.gridContainer h1 {font-size:2.0em}
.gridContainer h2 {font-size:1.8em}
.gridContainer h3 {font-size:1.5em}

.gridContainer p {clear:both}

.gridContainer .gradient {
	background: #fafafa; /* Old browsers */
	background: -moz-linear-gradient(top,  #fafafa 0%, #ffffff 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(99%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fafafa 0%,#ffffff 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fafafa 0%,#ffffff 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fafafa 0%,#ffffff 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #fafafa 0%,#ffffff 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.gridContainer #appFilters #appFilter a input {
	background-color:#fafafa;
	border:solid 1px #e2e2e2
}
.gridContainer #appFilters #appFilter a input:hover {background-color:#e2e2e2}

.gridContainer #appFilters #appFilter.active a input {
    background-color:#666;
    border: solid 1px #666
    }

.gridContainer .freddicon {
	font-family: "freddicons";
	vertical-align: top;
	display: inline-block;
	line-height: unset;
	font-weight: normal !important;
	font-style: normal !important;
	text-transform: none !important;
	font-size: 20px !important;
}
.gridContainer .freddicon.cross-fill::after {content: ""}


.gridContainer *,
.gridContainer *::before,
.gridContainer *::after {box-sizing: border-box}

.gridContainer input[type="text"] {
	height:auto;
	background-color:white
	}

.gridContainer text:focus,
.gridContainer input[type="text"] {border-radius:0}





/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }




/* Mobile Layout: 480px and below. */

.gridContainer {
	width: 100%;
	min-width:320px;
	background-color:#fff;
	padding-top: 1em;
}
.gridContainer,
.gridContainer section {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	border: 1px solid #e2e2e2;
}
.gridContainer section {
	border: none;
	width: 96.6666%;
}

.gridContainer section.topBar {
	border-bottom: solid 1px #e2e2e2!important;
	width: 100%;
	padding: 1em 1.6666%;
}
.gridContainer #appLogo {
	margin-left: 0;
	width:26.034%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.gridContainer #appLogo > a img {
	width:7.5em;
	text-align:left;
	}
.gridContainer #appTitle {
	margin-left: 3.4482%;
	width:44.034%;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.gridContainer #LoginOut {
	margin-left: 2.2727%;
	width: 20.4545%;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.gridContainer input#logout,
.gridContainer input#backButton {padding:0.5em}

.gridContainer #appFilters #appFilter input {border-right:none}
.gridContainer #appFilters #appFilter:last-child input {border-right: 1px solid #e2e2e2}

.gridContainer #appFilter {
	float: left;
	margin-left: 0;
	width: 25%;
	display: block;
}
.gridContainer #appSearchBar {border: solid 1px #e2e2e2}
.gridContainer #appSearchBar input {border:none!important}

.gridContainer #appClearFilters,
.gridContainer #appSearchText,
.gridContainer #appSearchButton {
	float: left;
	margin-left: 0px;
	display: block;
}
.gridContainer #appClearFilters {
	width:5%;
	border-right: solid 1px #e2e2e2
}
.gridContainer #appClearFilters input {background: #fafafa}

.gridContainer #appSearchText 	{width:75%}
.gridContainer #appSearchButton {width:20%}

.gridContainer section article.salesOrderMeta {
	text-align: left;
	line-height: 1.8em;
	border: 1px solid #e2e2e2;
	padding-top:1em;
	margin-bottom:1em;
}
.gridContainer section article {
	  float: left;
	  width: 100%;
	  margin-bottom: 1em;
}

.gridContainer section article.salesOrderMeta > div > p {padding:0 1em}

.gridContainer #staffProfile {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 31.0344%;
	display: block;
}
.gridContainer #staffProfile img {width:100%}

.gridContainer section article.salesOrderMeta .salesInvoiceMeta-2col {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 48.2758%;
	display: block;
}
.gridContainer section article.salesOrderMeta .salesInvoiceMeta-12col {
	clear: both;
	float: left;
	width: 99.933%;
	padding-left: 1.0333%;
	padding-right: 1.0333%;
	display: block;
}

.gridContainer #salesOrderMeta1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 48.2758%;
	display: block;
}
.gridContainer #salesOrderMeta2 {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 48.2758%;
	display: block;
}
.gridContainer #shipToCode {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.gridContainer #staffMeta {
	clear: none;
	float: left;
	margin-left: 3.4482%;
	width: 48.2758%;
	display: block;
}
.gridContainer #staffMeta p {padding:0;}

.gridContainer #salesOrdersTableWrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	border: 1px solid #e2e2e2;
}
.gridContainer #salesOrdersTableWrapper.hasDetails {}
.gridContainer #toggleSalesOrderTable {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


.gridContainer button,
.gridContainer input,
.gridContainer select,
.gridContainer textarea {padding:0.5em;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	/*font-size:100%;*/
}
.gridContainer .section {
	width: 90.9333%;
	padding-left: 1.0333%;
	padding-right: 1.0333%;
}
.gridContainer #appLogo {width:23.455%}

.gridContainer #appTitle {width:44.034%}
.gridContainer #LoginOut {width:25.455%}
.gridContainer #appSearchButton {width: 20%}
.gridContainer section article.salesOrderMeta > div > p {padding:0 0 1em 0}
.gridContainer #staffProfile {
	clear: none;
	float: left;
	margin-left: 2.2727%;
	width: 17.455%;
	display: block;
}
.gridContainer #salesOrderMeta1 {
	clear: none;
	float: left;
	margin-left: 2.2727%;
	width: 21.455%;
	display: block;
}
.gridContainer #salesOrderMeta2 {
	clear: none;
	float: left;
	margin-left: 2.2727%;
	width: 25.455%;
	display: block;
}
.gridContainer #shipToCode {
	clear: none;
	float: left;
	margin-left: 2.2727%;
	width: 65.909%;
	display: block;
}
.gridContainer #staffMeta {
	clear: none;
	float: left;
	margin-left: 2.2727%;
	width: 25.455%;
	display: block;
}
.gridContainer #salesOrdersTableWrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.gridContainer #toggleSalesOrderTable {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.gridContainer button,
.gridContainer input,
.gridContainer select,
.gridContainer textarea {padding:1em;}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 768px) {

.gridContainer {margin-top:1em}
.gridContainer .section {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
}
.gridContainer #appLogo {
	margin-left: 0;
	width: 14.254%;
}
.gridContainer #appTitle {
	margin-left: 1.6949%;
	width: 66.1016%;
}
.gridContainer #LoginOut {
	margin-left: 1.6949%;
	width: 15.2542%;
}

.gridContainer #staffProfile {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width:10.254%;
	display: block;
}
.gridContainer #salesOrderMeta1 {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
}
.gridContainer #salesOrderMeta2 {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
}
.gridContainer #shipToCode {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 49.1525%;
	display: block;
}
.gridContainer #staffMeta {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
}
.gridContainer #salesOrdersTableWrapper {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.gridContainer #toggleSalesOrderTable {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}


/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

.gridContainer #staffProfile {
	width: 15.2542%;/*(Too big on iPad)*/
}

}