* { margin:0; padding:0; }
.noprint {}
.printonly { display:none; }
html { xheight: 100vh; background-color: rgba(35,121,165,1);  xbackground: url("//www.johncook3.com/pinnaclem/assets/background.jpg"); xbackground-repeat: no-repeat; xbackground-size:cover; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: rgb(34,41,45);  }
h1, h2, h3, h4, h5, h6 { font-family: Cambria, Arial, Helvetica, sans-serif; margin:0 0 1rem 0;  }
p { margin:0 0 1rem 0; line-height: 1.25rem; }
p.tagline { font-family: Georgia, Cambria, serif; }

.container { width: 98vw; max-width: 1280px; margin:10px auto 3rem auto; box-sizing: border-box; box-shadow: 0 12px 48px rgba(0,0,0,.3); border-radius: 8px; background-color: rgba(255,255,255,1); }
.container-fluid { background-color:rgba(255,255,255,1); width: 98vw; margin:10px auto 0 auto; box-sizing: border-box; box-shadow: 0 12px 48px rgba(0,0,0,.3); border-radius: 8px }
.row { }
  .row ul, .row ol { margin: 0 0 1rem 16px; padding: 0 0 0 0; line-height:1.5rem }
  .row ul li, .row ol li { margin: 0 0 0 16px; padding: 0 0 0 0; line-height:1.5rem }

.grid { display: grid; grid-gap: 4px; }
.grid1 { grid-template-columns: 1fr; }
.grid2 { grid-template-columns: 1fr 1fr; }
.gridframe { grid-template-columns: 1fr 2fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; }
.col { }

.p10 { padding: 10px; }
.px10 { padding-left: 10px; padding-right: 10px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.pt10 { padding-top: 10px; }
.pl10 { padding-left: 10px; }
.pr10 { padding-right: 10px; }
.pb10 { padding-bottom: 10px; }

.m10 { margin: 10px; }
.mx10 { margin-left: 10px; margin-right: 10px; }
.my10 { margin-top: 10px; margin-bottom: 10px; }
.mt10 { margin-top: 10px; }
.ml10 { margin-left: 10px; }
.mr10 { margin-right: 10px; }
.mb10 { margin-bottom: 10px; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-lg { font-size: 1.5rem; line-height: 1.75rem; }

.pull-left { float:left }
.pull-right { float:right }

.img-responsive { width:100%; height:auto; }
.img-header { width: 100%; height:auto; max-width: 400px; }


.header h1 { color: rgba(46,159,217,1) }

.bg-gray { background-color: rgba(210,217,220,1); border-radius:8px }
.rounded { border-radius: 8px; }
.shadowed { box-shadow: 2px 4px 12px rgba(0,0,0,0.5) }

.form-group { margin-bottom:1rem }
.form-group label { display:block; }
.form-control { border:solid 2px rgba(46,159,217,1); font-size: 1.5rem }

.nav {}
.nav ul { list-style:none; overflow: hidden;}
.nav ul li { display: block; float:left; margin:0 4px 4px 0; }
.nav ul li.active a { background-color:rgb(34,41,45); }
.nav ul li a { display:block; color:rgba(255,255,255,1); background-color:rgba(46,159,217,1); text-decoration:none; line-height: 2rem; padding:8px 20px; font-weight:700; }
.nav ul li a:active, .nav ul li a:hover { background-color:rgba(217,102,46,1); }

button { font-size: 1rem; border:none; color:rgba(255,255,255,1); background-color:rgba(46,159,217,1); line-height: 2rem; padding:8px 20px; font-weight:700; }
button:active, button:hover { background-color:rgba(217,102,46,1); }

.page-main {}
.app-body { xborder-top:solid 4px rgba(35,121,165,1); }
.app-foot { background-color: rgba(46,159,217,1); color:rgba(255,255,255,1); border-radius: 0 0 8px 8px; }

.btn { display:inline-block; padding:10px 20px; text-decoration:none; border-radius:4px; box-shadow:1px 1px 0 rgba(0,0,0,0.2); text-align:center; cursor:default; font-weight:700 }
.btn-block { display:block }
.btn-primary { background-color: rgba(46,159,217,1); color:rgba(255,255,255,1); }
.btn-primary:active,.btn-primary:hover { background-color: rgba(217,102,46,1); color:rgba(255,255,255,1); }


@media screen and (max-width: 640px) {
  .grid1, .gridframe, .grid3, .grid-lbar, .grid-rbar, .grid-3wide {
    grid-template-columns: 1fr;
  }

  .nav {}
  .nav ul { }
  .nav ul li { margin:0 8px 8px 0;  }
  .nav ul li.active a { background-color:rgb(34,41,45); }
  .nav ul li a { display:block; color:rgba(255,255,255,1); background-color:rgba(46,159,217,1); text-decoration:none; line-height: 2rem; padding:8px 12px; font-weight:700; }
  .nav ul li a:active, .nav ul li a:hover { background-color:rgba(217,102,46,1); }

  .img-header { max-width: 200px }
}