@charset "utf-8";

/* ============================================
   MHP777.com main.css:
     - General and/or common selectors. 
   ============================================ */

html {
	/* Force page min-width */
	min-width: 320px;
	}

body {
	/* Override bootstrap.css body settings */
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* (bts def: "Helvetica Neue", Helvetica, Arial, sans-serif) */
	font-size: 16px; /* (bts def: 14px) */
	background-color: #F9F9F9; /* (bts def: #fff) */
	}

#pageWrapper {
	/* Override bootstrap.css padding settings and force min-width */
	padding-left: 0px; /* (bts def on .container and .container-fluid: 15px) */
	padding-right: 0px; /* (bts def on .container and .container-fluid: 15px) */
	}

#footer {
	padding-bottom: 10px;
	}

.relative-position {
	/* Set element to have a relative position, to allow sub-elements to be absolute */
	position: relative;
	}
	
.inline-block {
	/* Set inline block to allow centering a block with left-justified text */
	/*    See: http://stackoverflow.com/questions/1269589/css-center-block-but-align-contents-to-the-left */
	display: inline-block
	}

/* ---------------------------------------------
   Margin and padding control
   --------------------------------------------- */

.margin-T_0 {
	margin-top: 0px;
	}
.margin-T_5 {
	margin-top: 5px;
	}
.margin-T_10 {
	margin-top: 10px;
	}
.margin-T_15 {
	margin-top: 15px;
	}
.margin-T_20 {
	margin-top: 20px;
	}

.margin-B_0 {
	margin-bottom: 0px;
	}
.margin-B_5 {
	margin-bottom: 5px;
	}
.margin-B_10 {
	margin-bottom: 10px;
	}
.margin-B_15 {
	margin-bottom: 15px;
	}
.margin-B_20 {
	margin-bottom: 20px;
	}
.linksWellText{
	margin-bottom: 20px;
	}
@media (min-width: 768px) {
	.linksWellText {
		margin-bottom: 0px;
		}
}

.margin-L_-15 {
	/* Used, for example, when navbar menu is visible (NOT collapsed into pancake icon).
	     - Shift 15px to the left.
	     - Compensates one padding level for bootstrap default padding forced by both
	       .navbar-collapse AND .container-fluid (15px EACH). */
	margin-left: -15px;
	}
.margin-L_12p5p {
	margin-left: 12.5%;
	}

.margin-LR_0 {
	margin-left: 0px;
	margin-right: 0px;
	}
.margin-LR_15 {
	margin-left: 15px;
	margin-right: 15px;
	}

.padding_0 {
	padding: 0px;
	}
.padding_10 {
	padding: 10px;
	}
.padding_15 {
	padding: 15px;
	}

.padding-L_0 {
	padding-left: 0px;
	}
.padding-LR_5 {
	padding-left: 5px;
	padding-right: 5px;
	}
.padding-LR_15 {
	padding-left: 15px;
	padding-right: 15px;
	}

.padding-LR_1p {
	padding-left: 1%;
	padding-right: 1%;
	}
.padding-LR_2p {
	padding-left: 2%;
	padding-right: 2%;
	}
.padding-LR_3p {
	padding-left: 3%;
	padding-right: 3%;
	}
.padding-LR_4p {
	padding-left: 4%;
	padding-right: 4%;
	}
.padding-LR_5p {
	padding-left: 5%;
	padding-right: 5%;
	}

.padding-TB_15 {
	padding-top: 15px;
	padding-bottom: 15px;
	}

/* ---------------------------------------------
   Selectors for clickable anchors (links) DISGUISED AS CONTENT-LINK BUTTONS:
     - These "buttons" are styled anchors using the .button class.
     - CF examples:
         a) http://www.w3schools.com/css/css3_buttons.asp,
              http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
         b) bootstrap.css (.btn)
     - Button colors are controlled in colorschemes.css.
	 - Contrary to bootstrap .btn and .btn-default classes, the .button class
	     MUST follow .active in the HTML if using that class.
   --------------------------------------------- */

.content-link a.button,
.content-link a:focus.button,
.content-link a:hover.button,
.content-link a.active.button,
.content-link a:focus.active.button,
.content-link a:hover.active.button,
.content-link a.disabled.button,
.content-link a:focus.disabled.button,
.content-link a:hover.disabled.button {
	/* CF examples:
	     a) http://www.w3schools.com/css/css3_buttons.asp,
		      http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
		 b) bootstrap.css (.btn) */
	display: inline-block; /* a,b: inline-block */
	cursor: pointer; /* a,b: pointer */

	padding: 6px 12px; /* a: 15px 32px | b: 6px 12px */
	margin-bottom: 0; /* a: margin: 4px 2px | b: 0 */

	/* a: background-color: #4CAF50; */
	/* a: color: white; */
	text-decoration: none; /* a: none | b(hover): none */
	font-size: inherit; /* a: 16px | b: 14px */
	font-weight: normal; /* b: normal */
	line-height: 1.25; /* b: 1.42857143 */
	text-align: center; /* a,b: center */
	white-space: normal; /* b: nowrap */
	vertical-align: middle; /* b: middle */

	-ms-touch-action: manipulation; /* b: manipulation */
	    touch-action: manipulation; /* b: manipulation */
	-webkit-user-select: none; /* b: none */
	   -moz-user-select: none; /* b: none */
	    -ms-user-select: none; /* b: none */
	        user-select: none; /* b: none */

	background-image: none; /* b: none */
	border: 1px solid transparent; /* a: none | b: 1px solid transparent */
	border-radius: 25px; /* (b: 4px) */

	width: 100%;
	max-width: 75%;
	}

/* ---------------------------------------------
   Input Buttons:
     - Ex. Contact page: Submit, Clear Fields, Reload Page
     - Does not apply to content-link buttons (no -input- tag)
     - Seems to work w max-width, so leave alone for now
     - xsButtonCenter centers groups of buttons in a div w max-width 479px
   --------------------------------------------- */
input[class="button"] {
	padding: 6px 12px; /* (Same as main menu items) */
	border-radius: 25px; /* (Same as main menu items) */
	font-weight: bold; /* (Same as main menu items) */
	margin-bottom: 10px;
	}
@media (max-width: 479px) {
	input[class="button"] {
		width: 90%;
		}
		
	.xsButtonCenter {
		text-align: center;
		}
}

/* ---------------------------------------------
   Font control
   --------------------------------------------- */

.bold {
	font-weight: bold;
	}

.download-button-text {
	font-weight: bold;
	}

.subFooterLink {
	font-size: 85%;
	}

.smFooter {
	font-size: 75%;
	}

@media (min-width: 768px) {
	.smContentLink {
		/* Reduce font size on (for example) home page content links during
		     initial viewport expansion beyond pancake icon viewport sizes */
		font-size: 80%;
		}
}

/* ---------------------------------------------
   Normal button shape (override bootstrap.css)
   --------------------------------------------- */

.btn {
	/* Override default button shape */
	width: 100%;
	max-width: 75%;
	border-radius: 25px; /* (bts def: 4px) */
	font-size: inherit; /* (bts def: 14px) */
	white-space: normal; /* (bts def: nowrap) */
	}

/* ---------------------------------------------
   Text block version-width control
   --------------------------------------------- */

@media (min-width: 1px) {
	/* In very narrow viewports, hide mid-narrow and wide text blocks */
	.version320 {
		display: block;
		}
	.version480 {
		display: none;
		}
	.version640  {
		display: none;
		}
}

@media (min-width: 480px) {
	/* In mid-narrow viewports, hide narrow and wide text blocks */
	.version320 {
		display: none;
		}
	.version480 {
		display: block;
		}
	.version640 {
		display: none;
		}
}

@media (min-width: 640px) {
	/* In all other viewports, hide narrow and mid-narrow text blocks */
	.version320  {
		display: none;
		}
	.version480  {
		display: none;
		}
	.version640 {
		display: block;
		}
}

/* ---------------------------------------------
   Comments block
   --------------------------------------------- */

.commentsHeader {
	letter-spacing: 0.08em;
	font-size: 1.2em;
	font-weight: bold;
	}

/* ---------------------------------------------
   Contact page
   --------------------------------------------- */

.formInputBox {
	border-radius: 5px;
	margin-top: 3px;
	font-size: 110%;
	}
.formTextarea {
	font-size: 100%;
	resize: none;
	}

.cursor_pointer {
	cursor: pointer;
	}

.formError {
	margin: 0 0 10px 0;
	padding: 0;
	color: Red;
	font-size: smaller;
	font-weight: bold;
	min-height: 20px;
	}

.formLabelWidth {
	width: 100%;
	}
.formTextWidth {
	width: 100%;
	}
.formTextareaWidth {
	width: 100%;
	}
.formDDLWidth {
	width: 50%;
	}
.formErrorWidth {
	width: 100%;
	}

/* ---------------------------------------------
   Popovers (override BTS settings in CSS and JS)
   --------------------------------------------- */

.popover {
	font-family: inherit;
	font-size: 90%;
	max-width: 75%;
	}
.popover-title {
	font-weight: bold;
	}

/* ---------------------------------------------
   Caret characters on BTS collapsible panels and non-menu buttons:
     - CF http://www.w3schools.com/charsets/ref_utf_geometrics.asp
	 - CF http://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value
   --------------------------------------------- */

.panel-caret .panel-toggle:after {
	font-size: 75%;
	vertical-align: text-bottom;
	}
.panel-caret .panel-toggle:not(.collapsed):after {
	content: "\0020\0020\25BC"; /* Unicode-8 space x2, "Black down-pointing triangle" */
	margin-right: 0px;
	}
.panel-caret .panel-toggle.collapsed:after {
	content: "\0020\0020\25BA"; /* Unicode-8 space x2, "Black right-pointing pointer" */
	margin-right: 0px;
	}

.up-caret {
	font-size: 75%;
	vertical-align: text-top;
	}

/* ---------------------------------------------
   Force-wait on banner animation until page loads
     - <body> gets class .preload
     - In main.js, remove that class on page load
     - See https://css-tricks.com/transitions-only-after-page-load/
   --------------------------------------------- */
.preload * {
	animation: none !important;
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-ms-animation: none !important;
	-o-animation: none !important;
	}
	
/* ---------------------------------------------
   Paging list control
   --------------------------------------------- */

.paging-ul {
	padding: 0;
	margin-bottom: 0;
	}

.paging-ul > li {
	float: left;
	list-style: none;
	}

.paging-ul > li > a {
	padding: 15px;
	border-radius: 8px;
	}