/* Web styles for Old House Journal Magazine website */

/* colors
orange        b14a25
dark purple   3c3a4a
med dark prpl 4c485d
med purple    7a7696
light purple  d3d2e3
beige         ece8e5
*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,700i');

* { outline-color: #d3d2e3; }

a, a:visited {
  color: #b14a25;
  text-decoration: none;
}

a:active, a:hover {
  color: #000000;
  text-decoration: underline;
}

body {
  background: #ffffff url('custcare_bg.gif') repeat;
  color: #000000;
  font-family: 'Open Sans',sans-serif;
  font-size: 11pt !important;
  line-height: 1.7 !important;
}

dt { text-transform: uppercase; }

h1, h2, h3, h4, h5, h6 {
  font-family: freight-sans-pro,sans-serif;
  font-weight: bold;
}

h1 { font-size: 30pt; }
h2 { font-size: 28pt; }
h3 { font-size: 18pt; }
h4 { font-size: 15pt; }
h5 { font-size: 13pt; }
h6 { font-size: 11pt; }

hr.dotted { background: none; border-top: 1px dashed;}
hr.double-top { border: none; background: transparent url('hr-double-top-bkgd.png') repeat-x; height: 7px; }
hr.double-bottom { border: none; background: transparent url('hr-double-bottom-bkgd.png') repeat-x; height: 7px; }
hr.pre { border-top: 1px solid #000000; margin-top: 0; margin-bottom: 0; padding-top: 0; width: 15px; width: 1rem; }

summary { cursor: text !important; list-style: none !important; }

/* Subscriptions Header */
.newsletter input[type='text'] { border: 1px solid; color: #ffffff; font-size: 90%; padding: 1px 20px; text-align: center; }
.newsletter input[type='text']::placeholder { color: #ffffff; }
.newsletter input[type='submit'] { border: none; font-weight: bold; padding: 1px 10px; }
#subscriptions-bar-controls ul li { font-weight: bold; padding: 5px 20px; }
#subscriptions-bar-controls ul li:hover { background-color: #676480; }
#subscriptions-bar-controls a:hover { text-decoration: none; }
#subscriptions-bar-social ul.social-list li { padding: 0 15px 0 0; }
#subscriptions-tray hr { background-color: #ffffff; }
#subscriptions-tray ul li { font-size: 10pt; list-style-type: square; padding: 3px; }
#subscriptions-tray ul.social-list li { padding: 10px 10px 5px 10px; }
#subscriptions-tray .issues { box-shadow: 1px 1px 8px 0 #000000; height: 180px; position: absolute; top: 0; left: 0;}
#subscriptions-tray .issue2 { top: 30px; left: 85px; }

/* Main Menu Header */
#main-menu nav .dropdown-menu { box-shadow: 2px 2px 2px 0 #4c485d; }
#main-menu nav .dropdown-item { font-size: 90%; }
#main-menu nav .dropdown-item:hover { background-color: transparent; color: #ffffff; text-decoration: underline; }
#main-menu nav .dropdown-toggle::after { border: 0; content: ''; margin-left: 0; vertical-align: 0; }
#main-menu nav .show .dropdown-toggle .fa-angle-down { transform: rotate(-180deg); }
#main-menu nav .nav-item.show::after { content: ''; border: 7px solid transparent; border-top: 0; border-bottom: 10px solid #3c3a4a; position: absolute; bottom: -2px; }
#main-menu nav .nav-item.show > a { color: #b14a25; }
#main-menu ul.social-list li { padding: 0 15px 0 0; }
.search input[type='text'] { border: none; border-bottom: 1px solid #3c3a4a; border-radius: 0; outline: none; }
.search input[type='text']::placeholder { color: #000000; text-transform: uppercase; }
.search label { position: relative; right: 20px; }

/* Side Menu Header */
#side-menu { border-left: 1px solid #3c3a4a; box-shadow: -1px 0 5px 0 #333333; overflow-y: auto; right: 0; top: 0; z-index: 100; transition: transform 0.25s ease 0s; }
#side-menu.collapsing { transform: translateX(105%); }
#side-menu nav div.nav-item { border-top: 1px solid #d3d2e3; clear: both; padding-top: 15px; padding-top: 0.5rem; }
#side-menu nav div.nav-item:last-child { border-bottom: 1px solid #d3d2e3; }
#side-menu .subcategory { clear:both; font-size: 90%; text-transform: uppercase; }
#side-menu .subcategory a.nav-link { padding-top: 0; padding-bottom: 15px; padding-bottom: 0.5rem; }
#side-menu .subscribe-link img { margin-top: -30px; position: absolute; transform: rotate(-5deg); }
#side-menu .search label { position: absolute; right: 15%; }
#side-menu .newsletter input[type='text']::placeholder { color: #000000; }

/* Slideover Offer */
/*#subscriptions-slideover { left: -55px; left: -3.5rem; top: 28rem; }*/
#subscriptions-slideover { height: 200px; left: -4rem; top: 50%; z-index: 100;}
#subscriptions-slideover-control { left: -5px; top: 0; transform: rotate(-90deg) translate(50%, -50%); width: 200px; z-index: 101;}
#subscriptions-slideover-offer { left: 95px; height: 200px; top: -184px; width: 310px; transition: transform 0.25s ease 0s; }
#subscriptions-slideover-offer.collapsing { transform: translateX(-105%); }

/* Footer */
footer, footer a { font-size: 90%; }
footer #get-social ul li { padding: 10px 25px; }
footer #contact-info ul li:after { content: '|'; padding: 0 10px 0 12px; }
footer #contact-info ul li:last-child:after { content: ''; }


.step-bullet {
	height:32px !important; line-height:1; width:32px !important;
}
/* General Use Classes &  Bootstrap Overrides */
.bg-accent { background-color: #a9002b !important; color: #ffffff !important; } /* orange */
.bg-beige { background-color: #ece8e5 !important; } /* beige */
.bg-dark { background-color: #3c3a4a !important; color: #ffffff; } /* dark purple*/
.bg-dark a { color: #ffffff; }
.bg-medium { background-color: #4c485d !important; color: #ffffff; } /* medium-dark purple */
.bg-medium a { color: #ffffff; }
.bg-light { background-color: #d3d2e3 !important; color: #3c3a4a; } /* violet */
.bg-white { background-color: #ffffff !important; } /* white */

.border-beige { border-color: #ece8e5 !important;} /* beige */
.border-dark { border-color: #3c3a4a !important; } /* dark purple */
.border-medium { border-color: #7a7696 !important; } /* medium purple*/
.border-light { border-color: #d3d2e3 !important; } /* violet */
.border-white { border-color: #ffffff !important; } /* white */

.breadcrumb-item+.breadcrumb-item::before { color: #b14a25; content: '>'; padding: 0 4px; padding: 0 0.25rem; }

button, .button { border: 0; cursor: pointer; font-style: italic; padding: 3px 15px; padding: 0.25rem 1.5rem; position: relative; }
button:active, .button:active { left: 2px; top: 2px; }
button.bg-accent { font-style: normal; font-weight: bold; text-transform: uppercase; padding: 1px 10px; padding: 0.1rem 1rem; }
button.bg-accent:hover { background-color: #692913 !important; }
button.bg-dark:hover { background-color: #b14a25 !important; }
button.bg-dark.fancy:hover { background-color: #676480 !important; }
button.bg-white:hover { background-color: #dedbd8 !important; }
button.fancy, .button.fancy { font-style: normal; margin-bottom: 15px; margin-bottom: 1rem; padding: 8px; padding: 0.5rem; width: 100%; }
button.fancy > h5, .button.fancy > h5 { border: 1px solid; margin: 0; padding: 15px 4px; padding: 1rem 0.25rem; width: 100%; }

.contents-inline > * { display: inline; }

.font-normal { font-family: ''Open Sans'', sans-serif; }

.form-group label { font-size: 90%; text-transform: uppercase; }
.form-group label.required { font-weight: bold; }
.form-group label.required::after { content: '*'; }

.hover-accent-bg:hover { background-color: #692913 !important; }
.hover-accent-text:hover, a.hover-accent-text:hover { color: #b14a25 !important; text-decoration: none !important; }
.hover-dark-bg:hover, a.hover-dark-bg:hover { color: #ffffff; background-color: #3c3a4a !important; }
.hover-dark-text:hover, a.hover-dark-text:hover { color: #3c3a4a !important; text-decoration: none !important; }
.hover-no-underline:hover, a.hover-no-underline:hover { text-decoration: none !important; }

.offset-half-1 { margin-left: 12.5%; }
.offset-half-2 { margin-left: 25%; }
.offset-half-3 { margin-left: 37.5%; }

.solid-1 { border: 1px solid; }
.solid-2 { border: 2px solid; }
.solid-3 { border: 3px solid; }

.text-accent, .text-accent a, a.text-accent { color: #b14a25; } /* orange */
.text-dark { color: #3c3a4a !important; } /* dark purple */
.text-light { color: #d3d2e3 !important; } /* violet */
.text-white { color: #ffffff !important; } /* white */

/* Down arrow animation for toggles */
.fa-angle-down { transition: transform 0.25s ease 0s; }
a[data-toggle='collapse'] .fa-angle-down { transform: rotate(-180deg); }
a[data-toggle='collapse'].collapsed .fa-angle-down { transform: rotate(0deg); }



/* ##########  ENGAGE STYLES  ########## */

/* overrides */
#custcare a, #custcare a:visited { outline: 0; text-decoration: underline; color: #3c3a4a; }
#custcare a { outline: 0; text-decoration: underline; color: #3c3a4a; }
#custcare a:active, #custcare a:hover { color: #b14a25; text-decoration: none;}
#custcare .container { padding: 15px 0; }
#custcare .form-control, #custcare .custom-select { border-radius: 0; }
footer #get-social ul li { padding: 10px 15px; }
footer .row { margin-right: 0; margin-left: 0; }
#get-social h2 { font-size: 2rem; }

/* general customer care styles */
#custcare .acct-info dd { margin-bottom: 0; line-height: 18px; }
#custcare section.currAcctInfo { margin-top: 0; }
#custcare section { margin-top: 50px; }
#custcare section.btmSection { margin-top: 0; }
#custcare #submit { margin-top: 15px; }
#custcare section.btmSection .col-md-6 { margin: 15px 0; }
#custcare .red { color: #f00; }
#custcare .amtDue { margin: 10px 0; }

/* gifts */
.donees { background-color: #D3D2E3; }
.donees .btn-eCard { font-style: normal; margin-bottom: 15px; margin-bottom: 1rem; padding: 8px; padding: 0.5rem; width: 100%; }
.donees .btn-eCard > h5 { border: 1px solid; margin: 0; padding: 15px 4px; padding: 1rem 0.25rem; width: 100%; }

/* welcome */
#welcome { margin-bottom: 15px; }
#welcome hr { width: 4%; border-top: 1px solid rgba(0,0,0,1); margin-top: .5rem; }
#welcome .btn-logout:hover { width: 110px; line-height:16px; background-color: #e6e6e6; border-color: #97969e; border-radius: 0; font-size: 16px; color: #3c3a4a; font-style: normal; }
#welcome .btn-logout { width: 110px; line-height: 16px; background-color: #fff; border-color: #97969e; border-radius: 0; font-size: 16px; color: #3c3a4a; font-style: normal; }

/* buttons */
#custcare button h6 { margin-bottom: .15rem; }
#custcare section.btmSection .col-md-6.intlSub button { padding-right: 1.5rem; padding-left: 1.5rem; }

/* columns */
#leftCol { }
#rightCol { padding: 25px 35px; }

/* left nav */
#left-nav-int, #left-nav-ext { margin-bottom: 25px; }
.left-nav h4 { display: inline; font-family: ''Open Sans'', sans-serif; margin: 0; }
#custcare .left-nav .nav-link, #custcare .left-nav .nav-link1 { padding: 0; color: #3c3a4a; text-decoration: none; }
#custcare .left-nav .nav-link.active, #custcare .left-nav .nav-link1.active { text-decoration: underline; }
.left-nav .fa-angle-right { display: none; }
.left-nav .fa-angle-right.active { display: inline; color: #b14a25; float: left; margin: 3px 2px 0 -10px; }
.left-nav nav { border-bottom: 1px solid #a09eaf; padding: 8px 12px 8px 27px; }
.left-nav #nav1 { border-top: 1px solid #a09eaf; }*/
.left-nav .subcategory { padding: 0 0 0 12px; }
.left-nav .subnav { color: #3c3a4a; }
.nav-item-group { padding-top: 0; line-height: 26px; }

/* current issue */
#current-issue { text-align: center; margin: 0 auto; }
#current-issue p { font-size: 16px; font-weight: bold; margin-bottom: .25rem; }

/* contact */
#contact address { font-size: 12px; font-weight: normal; margin-top: .5rem; }
#contact img { max-width: 60%; }

/* remove spinner from number input fields */
input[type='number'] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

header { background-color: #a9002b; }
header img { max-width: 330px; width: 100%; }


@media (min-width: 576px) {
/* buttons */
#custcare section.btmSection .col-md-6.intlSub button { padding-right: .5rem; padding-left: .5rem; }
}

@media (min-width: 768px) {
/* overrides */
#custcare .container { padding: 35px 70px 65px; }
#welcome { margin-bottom: 0; }
/* general customer care styles */
#custcare section.btmSection { margin-top: 50px; }
#custcare section.btmSection .col-md-6 { margin: 0; }
/* columns */
#leftCol { border-right: 1px dashed #d3d2e3; }
#rightCol { padding: 0 0 0 25px; }
/* left nav */
#left-nav-int, #left-nav-ext { margin-bottom: 0; }
.left-nav nav { border-bottom: none; padding: 10px 0 0 0; }
.left-nav #nav1 { border-top: none; }
.left-nav .subcategory { padding: 0; }
.nav-item-group { padding-top: 10px; line-height: 20px; }
}

@media (min-width: 992px) {
/* overrides */
footer #get-social ul li { padding: 10px 25px; }
footer .row { margin-right: -15px; margin-left: -15px; }
#get-social h2 { font-size: 28pt; }
/* buttons */
#custcare section.btmSection .col-md-6.intlSub button { padding-right: 1.5rem; padding-left: 1.5rem; }
}

@media (min-width: 1200px) {
}
#input-button {
	width: auto !important;
	border:none !important;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 1px 10px;
	padding: 0.6rem 2rem;
	cursor: pointer;
}
#input-button:hover {
  background-color: #692913 !important;
}


@charset "UTF-8";
/* CSS Document */