/*
CONTENTS - LAYOUT.CSS
-----------------------------------------
1. CORE LAYOUT
2. HEADER
3. LEFT NAV / SIDEBAR
4. MAIN CONTENT
5. FOOTER
6. MODALS
7. LOGIN
8. MEDIA QUERIES
9. HIGH RESOLUTION IMAGERY
10. PRINT FORMATTING
*/


/* 1. CORE LAYOUT
----------------------------------------------------------------------------------------*/


#animationWrapper {
  display: block;
  left: 0;
  margin: 0;
  overflow: visible;
  position: relative;
}
.mainContent { 
	float: left;
	margin: 40px 50px 50px 50px;
	padding: 0;
}
.fullWidth {
  clear: right;
  float: none;
  margin: 8px 37px 20px;
  overflow: hidden;
  padding: 0;
  width: auto;
}
.contentRight { 
  clear: right;
  float: right;
  margin: 12px 25px 20px 0;
  padding: 0;
  width: 79%;
  width: 79%;
  width: calc(100% - 270px);
}
.mainContent #main {
  display: block;
  margin: 0;
  position: relative;
}
/* 
#expandcollapse {
  background-color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 25px;
  overflow: hidden;
  width: 28px;
  z-index: 2;
  position: absolute;
  top: 6px;
  left: 4px;

  position: fixed;
  top: 169px;
  left: 19px;
}
*/
#expandcollapse { /* Original */
  background-color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 25px;
  overflow: hidden;
  width: 28px;
  position: absolute;
  top: 6px;
  left: 4px;
  z-index: 1000;
}
.FOM_orderDetails #expandcollapse.expandcollapseFixed { /* Used for JS scroll to fixed test in OrderCentral_FOM-Orders.html */
    left: 16px;
    position: fixed;
    top: 130px;
}
#expandcollapse { /* Used for no JS */
  position: fixed;
  top: 130px; /* old: 169px */
  left: 16px;
}
.contentRight #expandcollapse {
  left: -24px;
  top: 0;
}
.expanded { left: -240px !important; } /*-54px  */
#expandcollapse a#expandcollapselink {
  display: block;
  font-size: 1.8em;
  color: #fff;
  background-color: #000;
  position: relative;
}
#expandcollapse a#expandcollapselink span {
  font-size: 0.7em;
  left: 29px;
  position: absolute;
  top: 2px;
  white-space: nowrap;
}

/* 2. HEADER
----------------------------------------------------------------------------------------*/

.statusLinks li, .socialLinks li, .globalNav [role="menubar"].subMenu li { border-color: #bcbdbf; }
.socialLinks, .statusLinks {
	height: 30px;
	z-index: 150;
	margin: 0;
	-webkit-backface-visibility: hidden;
	margin: 0 0 0 -9px;
}
.socialLinks li, .statusLinks li {
	height: 100%;
	float: left;
	padding: 0;
	border-right-style: solid;
	border-right-width: 1px;
	display: block;
	width: 30px;
}
.socialLinks li {	width: 30px; }
.statusLinks li {	width: auto; }
.socialLinks li:last-child, .statusLinks li:last-child { border-right:none; }
.socialLinks li a {
	position: relative;
	display: block;
	float:left;
	width: 30px;
	margin: 0;
	outline: none;
	padding: 0;
	min-height: 30px;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
	text-align: center;
	font-size: .9em;
	line-height: 32px;
	color: #808585;
	z-index: 2;
}
.statusLinks li a {
  background-color: #fff;
  color: #808585;
  display: block;
  float: left;
  font-size: 0.75em;
  font-weight: bold;
  height: 100%;
  line-height: 32px;
  margin: 0;
  min-height: 30px;
  outline: medium none;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
  width: auto;
  z-index: 2;
}
.socialLinks li a:hover, .statusLinks li a:hover { text-decoration: none; }
a.topLink { display: none; }
a.iconRss:hover { color: #fff; background-color: #ffa133; }
a.iconFacebook:hover { color: #fff; background-color: #37589b; }
a.iconTwitter:hover { color: #fff; background-color: #46d4fe; }
a.iconMail:hover { color: #fff; background-color: #9fae37; }
a.iconLinkedin:hover { color: #fff; background-color: #419cca; }
a.iconSearch:hover { color: #fff; background-color: #222222; }

.globalNav [role="menubar"].socialLinks, .globalNav [role="menubar"].statusLinks {
	float: left;
	width: 40%;
}
.globalNav [role="menubar"].subMenu { height: 30px; }
.globalNav [role="menubar"].subMenu a { 
	padding: 10px 0;
	font-weight: bold;
	font-size: .75em;
  color: #808585;  
}
.globalNav [role="menubar"].subMenu a:hover {
	text-decoration: underline;
	color: #4d4d4f;
}
.globalNav [role="menubar"].subMenu ul { 
	float: right;
	width: 40%;
	margin: 4px 16px 0 0;
	text-align: right;
}
.globalNav [role="menubar"].subMenu li { 
	position: relative;
	display: inline-block;
	padding: 0 10px;
	border-right-style: solid;
	border-right-width: 1px;
	line-height: 10px;
}
.globalNav [role="menubar"].subMenu li:last-child { border-right: none; }
[role="navigation"].siteNav { 
	float: left;
	width: 100%;
	border-bottom: solid 1px #b7b7b7; 
	position: relative;
}
[role="navigation"].siteNav nav {
	float: right;
	margin-right: 15px;
	width: auto;
	position: relative;
}
img.mainLogo { width: 296px; }
[role="navigation"].siteNav img { 
	float: left;
	margin: 0 0 10px 12px;
}
.siteNav [role="menubar"] a {
	height: 38px;
	margin: 0;
	padding: 0 10px;
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	color: #4d4d4f;
	line-height: 40px;
}
[role="navigation"].siteNav a.active { color: #0179bf; }
[role="navigation"].siteNav a:hover { color: #0179bf; }
[role="navigation"].siteNav a.iconHome { padding: 0 12px; }
[role="navigation"].siteNav h1 { 
	float: left;
	height: 68px;
	margin: 15px 0 0 25px;
	border-right: solid 1px #f0f0f0;
	line-height: 24px;
	padding: 0 20px 0 0;
}
[role="navigation"].siteNav h1 a {
	height: inherit;
	padding: 0;
	font-size: 0.8em;
	color: #1376Bd;
	text-transform: uppercase;
	line-height: 16px;
}
.siteNav[role="navigation"] h1 span {
  display: block;
  margin: 6px 0 0;
}
[role="navigation"].siteNav ul { 
	width: 100%; 
	text-align: right;
}
[role="navigation"].siteNav li { 
	display: inline-block; 
	height: 38px;
  margin-top: 24px;
  line-height: 40px;
}
[role="navigation"].actions {	margin: 8px 26px 0 16px; }
[role="navigation"].actions a {	margin-left: 5px; }
.subMenubar {
	clear: both;
	background: #FDFDFD; /* older browser */
 	background: -webkit-linear-gradient(#FDFDFD, #F8F8F8); /* webkit */
	background: -o-linear-gradient(#FDFDFD, #F8F8F8); /* opera */
	background: -moz-linear-gradient(#FDFDFD, #F8F8F8); /* firefox */
	background: linear-gradient(to bottom, #FDFDFD, #F8F8F8);
}
[role="navigation"].breadcrumb { 
  float: left;
  padding: 7px 0;
  position: relative;
  width: 100%;
}
[role="navigation"].breadcrumb ol { 
  float: left;
  padding: 0 0 0 37px; /* 25px */
}
[role="navigation"].breadcrumb a { color: #bcbdc0; }
[role="navigation"].breadcrumb a:hover { text-decoration: underline; }
[role="navigation"].breadcrumb li {
	display: inline-block;
	color: #bcbdc0; 
	font-size: 0.85em;
}
[role="navigation"].breadcrumb li:after { 
	content: ">"; 
	padding: 0 4px 0 10px; 
}
[role="navigation"].breadcrumb li:last-child:after { content: ""; }
[role="navigation"].breadcrumb #pageTools { 
  float: right;
  padding: 0 25px 0 0;
}
#pageTools a#decreaseFontsize { 
	font-size: 11px;
	cursor: pointer;
	margin: 0;
  text-align: center;
  vertical-align: middle;
  width: 22px;
  display: inline-block;
  height: 20px;
}
#pageTools a#increaseFontsize { 
  cursor: pointer;
  font-size: 16px;
  margin: 0 7px 0 0;
  text-align: center;
  vertical-align: middle;
  width: 22px;
  display: inline-block;
  height: 20px;
}
#pageTools a#expandcollapseall { 
	font-size: 18px;
	cursor: pointer;
	margin: 0;
  text-align: center;
  vertical-align: middle;
  width: 22px;
  display: inline-block;
  height: 20px;
}
#pageTools a:hover { 
  text-decoration: none;
}


/* 3. LEFT NAV / SIDEBAR
----------------------------------------------------------------------------------------*/
#sidebar { 
	display: none; /* Sidebar collapsed by default */
  margin-left: -215px;
}
[role="navigation"].sidebar {
	float: left;
	clear: left;
	height: 100%;
	margin: 6px 24px 20px 15px; /* 40px 24px 20px 15px */
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}
.sidebar nav { 
	position: relative; /* fixed */
	width: 200px; /* 13% */
}
.sidebar nav a { 
	color: #808285; 
}
.sidebar nav a.active { 
	color: #1376bd;
}
.sidebar nav a:hover { color: #333; }
.sidebar nav a.active:before { /* Adds > to left of active selection: */
	content: '\e808';
	margin: 0 0 0 -10px;
	padding: 0 6px 0 0; 
  font-family: "fontello";
}
.sidebar nav h3 {
  margin: 0;
  font-size: 1.2em;
}
.sidebar nav ul[role="menu"] { 
	width: 100%; 
	padding: 6px 10px 8px;
	margin: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.sidebar nav ul li ul { margin: 0 0 0 12px; }
.sidebar nav ul li { margin: 1px 0 0 0; }
.sidebar nav ul li:first-child { margin: 0; }
.sidebar nav ul li ul li { 
	margin: 0;
	font-size: .9em; 
}
.sidebar nav ul li ul li ul li { 
	margin: 0;
	font-size: .8em; 
}
.sidebar nav .left_nav_box { 
	border: solid 1px #bcbdbf;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 10px;
  padding: 6px 0 5px 8px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: visible;
  background-color: #fff;
  /* min-height: 100%; */
  /* height: calc(100vh - 330px); */
  /* max-height: 100%; */
}
.sidebar nav .bhn-filter { margin: 7px 0 0 4px; }
.sidebar nav .bhn-filter-component-container input[type="text"] { margin: 0; }

.sidebar nav .bhn-filter-radio-wrapper ul li {
    font-size: 0.8em;
    line-height: 1.5em;
    margin: 1px 0 0;
}


/* Custom scrollbar for left nav - webkit only */
/*
#view::-webkit-scrollbar {
    width: 12px;
}
#view::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#view::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200,200,200,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
*/

/* 4. MAIN CONTENT
----------------------------------------------------------------------------------------*/
.mainContent #main .filter {
  display: block;
  margin: 0;
  position: relative;
  width: 100%;
}
.mainContent #main .actions .breadcrumb p {
  display: inline-block;
  margin: 0;
  padding: 0 5px 0 0;
  color: #bcbdc0; 
}
.mainContent #main .breadcrumb ol {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.mainContent .breadcrumb { 
	width: 100%;
	/* border-bottom: 1px solid #f0f0f0; */
}
.mainContent .breadcrumb a { color: #bcbdc0; }
.mainContent .breadcrumb a:hover { text-decoration: underline; }
.mainContent .breadcrumb li {
	display: inline-block;
	color: #bcbdc0; 
	font-size: 0.85em;
}
.mainContent .breadcrumb li:after { 
	content: ">"; 
	padding: 0 4px 0 10px; 
}
.mainContent .breadcrumb li:last-child:after { content: ""; }
#userWelcome {
 	font-size: 0.75em;
	font-weight: bold;
	color: #808585;
}
.borderBox {
  border: 1px solid #888;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display: block;
  height: auto;
  margin: 15px 0;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
.borderBox .content {
  display: block;
  height: auto;
  margin: 0 15px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.childrows { 
	display: inline-block;
  margin: 10px;
	/* width: 1000px; */
}
.contentBlock {
  display: block;
  height: auto;
  margin: 0 15px;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.contentBlock p {
  margin: 2px 0;
}
.contentBlock span:first-child {
    display: inline-block;
    font-weight: bold;
    margin: 0 15px 0 0;
    width: 200px;
}
.contentBlock span:first-child:after {
    content: ": ";
}

/* 5. FOOTER
----------------------------------------------------------------------------------------*/



/* 6. MODALS
----------------------------------------------------------------------------------------*/
.modalContent {
	overflow: auto; /* prevents div margins from extending out past the parent */
	display:none;
	max-width: 750px;
}
.modalContent h3 {
  margin: 0;
  padding: 12px;
  font-size: 1.4em;
  border-bottom: 1px solid #b7b7b7;
	background: #FDFDFD; /* older browser */
 	background: -webkit-linear-gradient(#FDFDFD, #F8F8F8); /* webkit */
	background: -o-linear-gradient(#FDFDFD, #F8F8F8); /* opera */
	background: -moz-linear-gradient(#FDFDFD, #F8F8F8); /* firefox */
	background: linear-gradient(to bottom, #FDFDFD, #F8F8F8);
}
h3.modalHeader {
	border-bottom: #6e6e6e solid 1px; 
	padding-bottom:10px;
}
.modalContent .message {
  margin: 0 12px;
  overflow: hidden;
}
.modalContent .actions {
  margin: 5px 12px;
  overflow: hidden;
  padding: 0 0 10px;
}
#simplemodal-container p {
  line-height: 1.3em;
  margin: 10px 0;
}
#simplemodal-overlay { background-color: #000; }
#simplemodal-container {
  overflow: hidden;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 8px;
  border-radius: 8px;
	box-shadow: 3px 3px 3px #5F5F5F;
  max-width: 750px;
  min-width: 375px;
  width: auto !important; /* fix iPad portrait */
}
#simplemodal-container a.modalCloseImg {
  display: inline; 
  position: absolute;
  height: 29px;
  width: 25px;
  z-index: 3200;
  cursor: pointer;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  font-size: 1.5em;
  right: 15px;
  top: 11px;
}
#simplemodal-container a.modalCloseImg:before {
  content: '\e824';
  display: inline-block;
  width: auto; /* 1em */
  margin-right: .2em;
  margin-left: .2em;
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
}

/* 7. LOGIN
----------------------------------------------------------------------------------------*/
#loginBoxWrapper {
	margin: 20px auto 0;
	width: 506px;
}
#loginBox {
	border: solid 3px #e2e2e2;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 3px 3px 3px #e2e2e2;
}
#loginHealthCheckLink {
    margin-top: 5px;
    font-size: 0.75em;
    color: #808585;
    float: right;
}
#loginHealthCheckLink:hover {
    text-decoration: underline;
}
#loginForm { margin: 40px 72px 40px 72px; }
#loginForm .loginError { color: #d22525; }
#loginForm .loginMessage { color: #31b513; }
#loginForm .loginRow { margin: 10px 10px 10px 0; }
#loginForm .firstCol {
	display: inline-block;
	width: 120px;
}
#loginForm label.error { margin-left: 124px; } /* align the errors with the inputs */
#loginForm input[type="text"], #loginForm input[type="password"] {	width: 200px; }
#rememberUserIdContainer {
	display: inline-block;
	width: 220px;
	vertical-align: text-top;
}
#rememberUserIdLabel {
	font-size: 0.75em;
	vertical-align: text-bottom;
}
#loginActions {
	font-size: 0.75em;
	text-align: center;
}
#loginActions span:hover {
	text-decoration: underline;
	cursor: pointer;
}


/* 8. MEDIA QUERIES
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 1070px) {
  /* TEMP size indicator. Uncomment the line below to show size indicator.
		body { color: red; }*/
  .siteNav [role="menubar"] a { padding: 0 9px; }
}

@media screen and (max-width: 1175px) {
  .mainContent #main.leftNavExpanded .actions .actionInputBlock.largeInputBlock .bottom {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 5px;
  }
  .leftNavExpanded .actionInputBlock ul { margin: 0 !important; }
  .leftNavExpanded .actionInputBlock li {
    float: left;
    padding: 0 5px;
    width: auto;
  }
  .leftNavExpanded .actionInputBlock { height: auto !important; }
  .leftNavExpanded .actionInputBlock.smallInputBlock { width: 44%; }
  .leftNavExpanded .actionInputBlock:last-child { margin: 10px 0 0 0 !important; }
}

@media screen and (max-width: 1024px) {
	img.mainLogo { width: 25%; }
	[role="navigation"].siteNav h1 { margin: 1% 0 0 25px; font-size: 1.8em; border-right: medium none; }
	.siteNav[role="navigation"] h1 span { display: inline; }
	[role="navigation"].siteNav nav {
    bottom: 0;
    position: absolute;
    right: 0;
  }
  #expandcollapse, .FOM_orderDetails #expandcollapse.expandcollapseFixed {
      left: 15px;
      top: 117px;
  }
}

@media screen and (max-width: 960px) {
  .mainContent #main .actions .actionInputBlock.largeInputBlock .bottom {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 5px;
  }
  .actionInputBlock ul { margin: 0 !important; }
  .actionInputBlock li {
    float: left;
    padding: 0 5px;
    width: auto;
  }
  .actionInputBlock { height: auto !important; }
  .actionInputBlock.smallInputBlock { width: 45%; }
  .actionInputBlock:last-child { margin: 10px 0 0 0 !important; }
  #expandcollapse, .FOM_orderDetails #expandcollapse.expandcollapseFixed {
    left: 13px;
    top: 115px;
  }
}

@media screen and (max-width: 790px) {
  #expandcollapse, .FOM_orderDetails #expandcollapse.expandcollapseFixed {
    left: 9px;
    top: 114px;
  }
}
/* screens 768px
----------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  #expandcollapse, .FOM_orderDetails #expandcollapse.expandcollapseFixed {
    left: 6px;
    top: 114px;
  }
}

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

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

/* 9. HIGH RESOLUTION IMAGERY 
----------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	/* check out http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/ for more info */
}


/* 10. PRINT FORMATTING
----------------------------------------------------------------------------------------*/ 
@media print {
  /* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }*/
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* 11. QA TESTING STATIC TEMPLATES
----------------------------------------------------------------------------------------*/ 
.staticTemplateIndex .inputBlock {
    max-width: 400px;
    width: 45%;
}
.staticTemplateIndex .inputBlock ul {
    padding: 0;
}