/*
 *  Base Responsive CSS rules
 *
 *
 *
 */

/* SIMPLE CONTAINERS - Class: grid
 * Simple Responsive Containers - Used for Basic grid layout only
 * NO padding or margin rules for these
 * Height is assumed to be fluid with top alignment(s)
 * 'Names' based on width percentages, 100 == 100%, 050 == 50%, and so on,
 * so gid-033 is a 33% column useful for three column layouts where internal
 * spacing is controlled by children class(es).
 *
 * Complex Containers - Class: box
 * Built in margins and padding
 * Height is assumed to be fluid
 * 'Names' based on width percentages, 100 == 100%, 050 == 50%, and so on,
 * so box-033 is a 33% column useful for three column layouts
 * NOTE: gutters are provided for by the class
 *
 * Rules DO NOT provide for tabular displays of more than 4 columns, rc.css does
 */

/*html {
    -webkit-text-size-adjust: 100%;
}*/

/* Limit on actual display (text) area */
.main-width-constraint, .main-width-constraint-noedge {
	/*position: relative;
	float: none;*/
	/*display: inline-block;*/
	margin: 0px auto !important;
	padding: 0px !important;
	width: 62.5em !important;     /* 1000/16 = 62.5 */
}

.constraint-extend {
	width: 80em !important;
	max-width: 95vw;
}

.main-width-constraint {
	border:  1px solid #eaeaea;
	border-top: none;
	border-bottom: none;
}

/* Menu 'stuff' */
body {
    padding: 155px /*193px*/ 0 0 0;
    margin: 0 !important;
    font-size: 16px !important;
}

.short-menu {
    padding-top: 115px /*153px*/;
}

p { max-width: 100% !important; }

#menu_container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  background: #fff;
  z-index: 1000;
  margin: 0px !important;
  padding: 0px !important;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px #ccc;
}

/*
.shim { display: inline-block; height: .01em; color: transparent;}
.shim:before { content: '.'; }
*/

.anchor {
	display: block;
	height: 155px /*193px*/;
	margin-top: -155px /*-193px*/;
	color: transparent;
    pointer-events: none;
	/*	visibility: hidden;*/
}

.short-menu .anchor {
	height: 115px /*153px*/;
	margin-top: -115px /*-153px*/;
}

.anchor:before { content: '.'; }

.logo-line-text {
  margin: 1.5em 4em .5em 0;
  float: right;
  font-size: 1em;
}

/*
  SIMPLE, ALL percentages with NO gutters at all.
  These grid objects should go right to edge of their parent.
  Use boxes to provide needed white space, etc. within grid classes.
  These base definitions do NOT define minimum widths!
  The assumption is that media queries below will address needed break points to prevent silliness....
*/

.grid-100, .grid-090, .grid-050, .grid-075, .grid-025, .grid-020, .grid-016, .grid-033, .grid-066, .grid-045, .grid-040, .grid-014, .grid-085, .grid-060, .grid-010,
.grid-full,.grid-almost-h,.grid-half,.grid-three-quarter,.grid-one-quarter,.grid-one-fifth,.grid-one-sixth,.grid-one-third,.grid-two-third, .grid-two-fifth, .grid-one-seventh, .grid-three-fifth
{
	display: inline-block;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}

.grid-100, .grid-full          { width: 100%;     }
.grid-090							 { width: 90%;      }
.grid-010							 { width: 10%;      }
.grid-050, .grid-half          { width: 50%;      }
.grid-045, .grid-almost-half   { width: 45%;      }
.grid-075, .grid-three-quarter { width: 75%;      }
.grid-025, .grid-one-quarter   { width: 25%;      }
.grid-020, .grid-one-fifth		 { width: 20%;  	  }
.grid-016, .grid-one-sixth		 { width: 16.666%;  }
.grid-033, .grid-one-third     { width: 33.333333%;  }  /*  300/16 = */
.grid-066, .grid-two-third     { width: 66.666%;  }
.grid-040, .grid-two-fifth     { width: 40%;  	  }
.grid-060, .grid-three-fifth   { width: 60%;  	  }
.grid-014, .grid-one-seventh   { width: 14%;  	  }
.grid-085     						 { width: 85%;      }

/* CONTENT DISPLAY BOXES */

.box-100,
.box-050,
.box-033,
.box-045,
.box-066,
.box-025,
.box-075,
.box-016,
.box-060,
.box-040,
.box-030,
.box-020,
.box-095,
.box-005,
.box-085,
.box-010,
.box-055,
.box-035 {
	vertical-align: top;
	display: inline-block;
	margin: .25em 1% .25em 1%; /* margin: 0 2% 0 2%; padding: .5em 0 .5em 0 */
}

.box-100 { width: 96.000%; padding: 1% 0 1% 0;}
.box-045 { width: 44%;   }
.box-050 { width: 48.5%;    }   /*  (100 - (marg*2))/2 = 48.5%      400 / 16 = 25em     */
.box-033 { width: 31.333%;  }  /*  (100 - (marg*4)/3 = 31.33       300 / 16 = 18.75em  */
.box-066 { width: 65.667%;  }  /* 100 - 31.333 - (marg*2) = 65.667 600/16 = 35.9375em */
.box-025 { width: 22.75%;   }  /* (100 - (marg*6))/4 =  22.75%     200/16 = 12.5em */
.box-075 { width: 71.25%;   }  /* 100 - 22.75 - (marg*2) = 74.25   700/16 = 43.75em   */
.box-016 { width: 13.666%;  }  /* (100 - (marg*6))/6 =  9.0%     200/16 = 12.5em */
.box-005 { width: 5%;     }
.box-020 { width: 18%;    }  /* (100 - (marg*5))/5 =  3.0%     200/16 = 12.5em */
.box-060 { width: 57.6%;  }
.box-040 { width: 38%;  }
.box-030 { width: 28%;  }  /*  (100 - (marg*4)/3.33 = 28.1 */
.box-095 { width: 91.2%;  }
.box-085 { width: 81.6%;  }
.box-010 { width: 10%;  }
.box-055 { width: 54%;  }
.box-035 { width: 34%;  }

/* FIXME */
.image-full {}
.image-two-third {}
.image-three-quarter {}
.image-half {}
.image-third {}
.image-quarter {}
.image-fifth {}
.image-sixth { }

.row-spacer-1em, .row-spacer-2em {
	vertical-align: top;
	display: inline-block;
}

.scroll-to {
   width: 100%;
   height: .5em;
}

.auto-height { height: auto !important; }

.row-spacer-025em, .vspace-025em,
.row-spacer-050em, .vspace-050em,
.row-spacer-075em, .vspace-075em {
   width: 100%;
   margin: 0 !important;
   padding: 0 !important;
   /*display: inline-block;*/
   /*overflow: hidden;*/
}

.row-spacer-025em, .vspace-025em { line-height: .25em !important; vertical-align: top;}
.row-spacer-050em, .vspace-050em { height: 0.5em  !important; }
.row-spacer-075em, .vspace-075em { height: 1em !important; }

.row-spacer-1em, .vspace-1em,
.row-spacer-2em, .vspace-2em,
.row-spacer-3em, .vspace-3em,
.row-spacer-3em, .vspace-4em,
.row-spacer-3em, .vspace-5em,
.row-spacer-3em, .vspace-6em,
.row-spacer-3em, .vspace-7em,
.row-spacer-3em, .vspace-8em {
	width: 100%;
	vertical-align: top;
	display: inline-block;
	height: 1em;
	color: transparent !important;
	/*color: #e0dede;*/  /* testing usage */
}

/*.row-spacer-025em:before, .vspace-025em:before,
.row-spacer-050em:before, .vspace-050em:before,
.row-spacer-075em:before, .vspace-075em:before,*/

.row-spacer-1em:before, .vspace-1em:before,
.row-spacer-2em:before, .vspace-2em:before,
.row-spacer-3em:before, .vspace-3em:before,
.row-spacer-3em:before, .vspace-4em,
.row-spacer-3em:before, .vspace-5em:before,
.row-spacer-3em:before, .vspace-6em:before,
.row-spacer-3em:before, .vspace-7em:before,
.row-spacer-3em:before, .vspace-8em:before { content: '..'; }

.row-spacer-1em, .vspace-1em { height: 1em; }
.row-spacer-2em, .vspace-2em { height: 2em; }
.row-spacer-3em, .vspace-3em { height: 3em; }
.row-spacer-2em, .vspace-4em { height: 4em; }
.row-spacer-3em, .vspace-5em { height: 5em; }
.row-spacer-2em, .vspace-6em { height: 6em; }
.row-spacer-3em, .vspace-7em { height: 7em; }
.row-spacer-3em, .vspace-8em { height: 8em; }

/* N/A for now -sjm ALL BASED ON 1000px and 1em == 16px */
.col-spacer-1em, .hspace-1em,
.col-spacer-2em, .hspace-2em,
.col-spacer-3em, .hspace-3em,
.col-spacer-4em, .hspace-4em,
.col-spacer-5em, .hspace-5em {
  content: ' ';
  width: 1em;
  height: 1em;
  color: #e0dede;   /* testing usage */
  vertical-align: top;
  display: inline-block;
}
.col-spacer-2em, .hspace-2em { width: 2em; }
.col-spacer-3em, .hspace-3em { width: 3em; }
.col-spacer-4em, .hspace-4em { width: 4em; }
.col-spacer-5em, .hspace-5em { width: 5em; }

.content-block {  /* treat as a single colum, which it IS relative to it's parent */
	vertical-align: top;
	display: inline-block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.col-50pct, .col-60pct, .col-70pct, .col-80pct, .col-90pct .col-100pct {
	vertical-align: top;
	display: inline-block;
}

.col-50pct { width: 50%; }
.col-60pct { width: 60%; }
.col-70pct { width: 70%; }
.col-80pct { width: 80%; }
.col-90pct { width: 90%; }
.col-100pct { width: 100%; }

/* meant for use in content-blocks above so the blocks will expand to fill their parents using padding rules below */

.hpad-1em, .hpad-2em, .hpad-3em, .hpad-4em, .hpad-5em {
	vertical-align: top;
	display: inline-block;
	/*background: pink;*/
}

.hpad-1em { width: 96.8%;   padding-left: 1.6% !important; padding-right: 1.6% !important; }
.hpad-2em { width: 93.6%;   padding-left: 3.2% !important; padding-right: 3.2% !important; }
.hpad-3em { width: 90.4%;   padding-left: 4.8% !important; padding-right: 4.8% !important; }
.hpad-4em { width: 87.2%;   padding-left: 6.4% !important; padding-right: 6.4% !important; }
.hpad-5em { width: 84%;     padding-left: 8%   !important; padding-right: 8%   !important; }

.height-1em   { height: 1em !important; }
.height-1-5em   { height: 1.5em !important; }
.height-2em   { height: 2em !important; }
.height-2-5em   { height: 2.5em !important; }

/*.pad-0-1 { padding-right: 1em; padding-left: 1em;}
.pad-0-2 { padding-right: 2em; padding-left: 2em;}
.pad-2-2 { padding: 2em 2em;}
.pad-2-4 { padding: 2em 4em; }*/

.pad-column-sides { padding-right: 1.25em; padding-left: 1.25em;}

.first { margin-left: 0px !important }
.last  { margin-right: 0px !important; }

.image-left {
  float: left;
  margin-top: 1em;
  margin-right: 1.25em;
  margin-bottom: 1em;
}

.image-right {
  float: right;
  margin-top: 1em;
  margin-left: 1.25em;
  margin-bottom: 1em;
}

.media-center {} /* Hack to force centered content at reduced sizes */

.no-margin { margin: 0px !important; }

.margin-top-1 { margin-top: 1em; }
.margin-right-1 { margin-right: 1em; }
.margin-bottom-1 { margin-bottom: 1em; }
.margin-left-1 { margin-left: 1em; }

.margin-top-auto { margin-top: auto; }

.clear { clear: both; }

.inline { display: inline-block; }
.block { display: block; }

.auto-width { width: auto; }

.mobile-show { display: none; }
.mobile-show-block { display: none; }

/* AND our media query nonsense for the above grid/box setups... */

/*@media (min-width:20em) { *//* smartphones, iPhone, portrait 480x320 phones */
/*@media (min-width:30.063em) { *//* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
/*@media (min-width:40.063em) { *//* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
/*@media (min-width:60.063em) { *//* tablet, landscape iPad, lo-res laptops ands desktops */
/*@media (min-width:64.063em) {*/ /* big landscape tablets, laptops, and desktops */
/*@media (min-width:80.063em) { *//* hi-res laptops and desktops */

/*
Hiddens - everything <= to size is hidden.
Note that the 'Width' in the rule name is the MAXIMUM size for media queries....
SO, if something is 673px, we use mobile-hide-640 to hide that 'thing' from 640 or less screens....
*/
.mobile-hide-288,  .mobile-hide-18em,
.mobile-hide-320,  .mobile-hide-20em,
.mobile-hide-480,  .mobile-hide-30em,
.mobile-hide-640,  .mobile-hide-40em,
.mobile-hide-800,  .mobile-hide-50em,
.mobile-hide-1100, .mobile-hide-68em { display: inline-block; }

/*
AND then, wee need something to toggle on messages in most cases when the hides above are active
So... these are paired with the above and in the example above we'd use mobile-show-640 to display messages or
alternate content
*/
.mobile-show-288,  .mobile-show-18em,
.mobile-show-320,  .mobile-show-20em,
.mobile-show-480,  .mobile-show-30em,
.mobile-show-640,  .mobile-show-40em,
.mobile-show-800,  .mobile-show-50em,
.mobile-show-1100, .mobile-show-68em { display: none; }

@media  only screen and (min-width: 16em) and (max-width: 20em)  {  /* 100% = 320 px */

	.mobile-hide-1100,.mobile-hide-68em  { display: none !important; }
	.mobile-hide-800, .mobile-hide-50em  { display: none !important; }
	.mobile-hide-640, .mobile-hide-40em  { display: none !important; }
	.mobile-hide-480, .mobile-hide-30em  { display: none !important; }
	.mobile-hide-320, .mobile-hide-20em  { display: none !important; }

	.mobile-show-1100,.mobile-show-68em  { display: inline-block !important; }
	.mobile-show-800, .mobile-show-50em  { display: inline-block !important; }
	.mobile-show-640, .mobile-show-40em  { display: inline-block !important; }
	.mobile-show-480, .mobile-show-30em  { display: inline-block !important; }
	.mobile-show-320, .mobile-show-20em  { display: inline-block !important; }

  /* Grids have NO spacing be it margins OR padding, so... ) */
	.grid-100, .grid-090, .grid-075, .grid-066, .grid-050, .grid-033, .grid-025, .grid-040, .grid-016, .grid-060 {
		max-width: 100%;
		min-width: 80% !important;
	}

	.box-020 { width: 47% !important; }

	.row-spacer-1em, .vspace-1em,
	.row-spacer-2em, .vspace-2em,
	.row-spacer-3em, .vspace-3em {
		content: '&nbsp;';
		width: 100%;
		height: .5em;
		color: #e0dede;
	}
	.row-spacer-2em, .vspace-2em { height: 1em; }
	.row-spacer-3em, .vspace-3em { height: 1.5em; }
	.vspace-4em { height: 2em; }

} /* endo @media  (max-width: 20em } */

@media  only screen and  (min-width: 20.001em) and (max-width: 30em) {  /* 321 - 480 */

	.mobile-hide-1100,.mobile-hide-68em  { display: none !important; }
	.mobile-hide-800, .mobile-hide-50em  { display: none !important; }
	.mobile-hide-640, .mobile-hide-40em  { display: none !important; }
	.mobile-hide-480, .mobile-hide-30em  { display: none !important; }

	.mobile-show-1100,.mobile-show-68em  { display: inline-block !important; }
	.mobile-show-800, .mobile-show-50em  { display: inline-block !important; }
	.mobile-show-640, .mobile-show-40em  { display: inline-block !important; }
	.mobile-show-480, .mobile-show-30em  { display: inline-block !important; }

	.grid-100, .grid-090, .grid-075, .grid-066, .grid-050, .grid-033, .grid-025, .grid-040, .grid-060 {
		max-width: 100%;
		min-width: 18em !important;
	}

	.box-025 { border-right: 1px solid #d8d6d6; }

	.box-020 { width: 47% !important; }

	.row-spacer-1em, .vspace-1em,
	.row-spacer-2em, .vspace-2em,
	.row-spacer-3em, .vspace-3em {
		content: '&nbsp;';
		width: 100%;
		height: .5em;
		color: #e0dede;
	}
	.row-spacer-2em, .vspace-2em { height: 1em; }
	.row-spacer-3em, .vspace-3em { height: 1.5em; }
	.vspace-4em { height: 2em; }

} /* endo (min-width:20.01em) and  (max-width:30em) */

@media   only screen and (min-width: 30.001em) and (max-width: 40em) {  /* 480 - 640 */

	.mobile-hide-1100,.mobile-hide-68em  { display: none !important; }
	.mobile-hide-800, .mobile-hide-50em  { display: none !important; }
	.mobile-hide-640, .mobile-hide-40em  { display: none !important; }

	.mobile-show-1100,.mobile-show-68em  { display: inline-block !important; }
	.mobile-show-800, .mobile-show-50em  { display: inline-block !important; }
	.mobile-show-640, .mobile-show-40em  { display: inline-block !important; }

	.grid-100, .grid-090, .grid-075, .grid-066, .grid-050, .grid-033, .grid-025, .grid-040, .grid-060 {
		max-width: 100%;
		min-width: 20em !important;
	}

	.box-020 { width: 32%; }

	.row-spacer-1em, .vspace-1em,
	.row-spacer-2em, .vspace-2em,
	.row-spacer-3em, .vspace-3em {
		content: '&nbsp;';
		width: 100%;
		height: .5em;
		color: #e0dede;
	}
	.row-spacer-2em, .vspace-2em { height: 1em; }
	.row-spacer-3em, .vspace-3em { height: 1.5em; }
	.vspace-4em { height: 2em; }

}

@media  only screen and (min-width: 40.001em) and (max-width: 50em) {  /* 640 - 800 */

	.mobile-hide-1100,.mobile-hide-68em  { display: none !important; }
	.mobile-hide-800, .mobile-hide-50em  { display: none !important; }

	.mobile-show-1100,.mobile-show-68em  { display: inline-block !important; }
	.mobile-show-800, .mobile-show-50em  { display: inline-block !important; }

	.grid-100, .grid-090, .grid-075, .grid-066, .grid-050, .grid-033, .grid-025, .grid-040, .grid-060 {
		max-width: 100%;
		min-width: 20em !important;
	}

	.box-020 { width: 33%; }

	.row-spacer-1em, .vspace-1em,
	.row-spacer-2em, .vspace-2em,
	.row-spacer-3em, .vspace-3em {
		content: '&nbsp;';
		width: 100%;
		height: .5em;
		color: #e0dede;
	}
	.row-spacer-2em, .vspace-2em { height: 1em; }
	.row-spacer-3em, .vspace-3em { height: 1.5em; }
	.vspace-4em { height: 2em; }

}

@media  only screen and (min-width: 50.001em ) and (max-width: 68.75em) { /* 800 - 1100 */

	.mobile-hide-1100,.mobile-hide-68em  { display: none !important; }

	.mobile-show-1100,.mobile-show-68em  { display: inline-block !important; }

	.grid-100,.grid-090,.grid-075,.grid-066,.grid-050,.grid-033,.grid-025,.grid-040,.grid-016,.grid-014,.grid-085,.grid-060 {
		max-width: 100%;
		/*min-width: 20em !important;*/
	}

	/* FIXME */
	/* .box-100 { width: 97.000%  !important;}
	.box-050 { width: 48.5%;    }
	.box-033 { width: 31.333%;  }
	.box-066 { width: 65.667%;  }
	.box-025 { width: 22.75%;   }
	.box-075 { width: 71.25%;   }
	.box-016 { width: 13.666%;  }
	.box-020 { width: 17%;      }  */

	/* .row-spacer-1em, .vspace-1em,
	.row-spacer-2em, .vspace-2em,
	.row-spacer-3em, .vspace-3em {
		content: '&nbsp;';
		width: 100%;
		height: .5em;
		color: #e0dede;
	}
	.row-spacer-2em, .vspace-2em { height: 1em; }
	.row-spacer-3em, .vspace-3em { height: 1.5em; }
	.vspace-4em { height: 2em; } */

}

@media  only screen and (max-width: 69em) {

	.mobile-hide       { display: none !important; }
	.mobile-hide-image { display: none !important; }

	.mobile-show { display: inline-block; }
	.mobile-show-block { display: block; }

	body {
		background: none !important;
		padding: 0px !important;
	}

	#menu_container {
		position: relative !important;
	}

	.main-width-constraint, .main-width-constraint-noedge { max-width: 94% !important;  border: none !important;}
	.media-max-width { max-width: 94% !important; }

	.logo-line-text {
		margin: .75em 3% .75em 0 !important;
		background: #7F7700; /* TESTING */
		font-size: .9em;
	}

	/* based on our default content width constraint of 320px */
	.box-100,
	.box-050,
	.box-033,
	.box-066,
	.box-060,
	.box-045,
	.box-040,
	.box-030,
	.box-025,
	.box-075,
	.box-095,
	.box-005,
	.box-085,
	.box-010,
	.box-016,
	.box-055,
    .box-035 {
		width: 97.000%  !important; /* margin: 0 2% 0 2%; padding: .5em 0 .5em 0 */
	}

	.ballpark-table .box-020 { width: 97% !important; }

	.first { margin: .25em 1.5% .25em 1.5% !important; }
	.last  { margin: .25em 1.5% .25em 1.5% !important; }
	.text-right, .text-left { text-align: center !important; }

	.resp-center { text-align: center; }
	.media-center { text-align: center; }

	/*.shim { display: inline-block; height: 6.7em; }*/
	/*.anchor {
		display: inline-block;
		top: 0px !important;
		font-size: .001em;
		height: .001em !important;  /* Remember: #menu_container above is NOW inline,so....
	}*/

}