html {
   font-size: 16px;
}

body { 
/* background: #efe url('/css/images/greenSquares.gif'); */
   margin:       0 auto;
/* padding-top:  160px; */
   width:        1200px;
   max-width:    96vw;
   font-family:  tahoma, arial;
   font-size:    16px;
   color:        #448;
}
.container-fluid {
   max-width:1200px !important;
} 

h3, h4, h5 {
   color:  #2858C8 !important; 
} 

h1 { 
   font-size:        3rem;
   color:            #46B3E0 !important; 
/* text-shadow:      3px 3px 6px #888888; */
   width:            100%;
   margin-top:10px;
} 
h2 { 
   font-size:        2.2rem;
   color: #2294C4 !important; 
/* text-shadow:      3px 3px 6px #888888; */
} 
h3 { font-size:      2rem; padding: 1rem 0.5rem !important;  background: linear-gradient(to right, #fff, #C3E6F6);}
h4 { font-size:    1.5rem;}
h5 { font-size:    1.1rem; font-weight: 600;
   margin-top:       0rem;
   margin-bottom:  1.5rem;
}

.row {
   margin-top:       0rem;
   margin-bottom:    3rem;
   padding:          1rem 0;
   background:       #E4F4FC;
}

/*  a "row" class to make all columns in that row equal height: 
        DONT USE:    B R E A K S   R E S P O N S I V E !
===============================================================
.row-eq-height {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display:         flex;
} */

/*  Buttons:     http://jsfiddle.net/i_heart_php/jdah1cvf/
================================================== */


.landing {
   margin:            -1rem 0.5rem;
   color:             <?= $fnt ?>;
   height:            auto !important;
}
/*
.landing:hover {
	background:       <?= $col0 ?>;
}
.landing h3 {
   text-align:        left; 
   padding-left:      1rem;
   color:             <?= $fnt ?>;
} */
.sideBarButton {
   background:        <?= $BkGr ?>;
   border:            3px solid <?= $col0 ?>;
   border-radius:     5px;
   max-width:         200px;
   margin-bottom:     0.5rem;
   padding:           4px;
   /* height:            3.5rem; */
   font-size:         1.2rem; 
   color:             <?= $fnt ?>;
}
.sideBarButton a:focus, a:hover,  .sideBarButton:hover {
   background:        #fff;
   color:             <?= $col1 ?>;
   text-decoration:   none;
}
/* ============================================================ */


/*  Footer:
=============================================================== */
#footer p, #footer h4 {
   color:#666 !important;
}

/* ============================================================ */


.btn{
   margin: 4px;
   padding: 4px;
   box-shadow: 3px 3px 6px #bbb;
   font-size: 1.3rem;
}

.btn-xs{
   font-weight: 300;
}
.btn[disabled],
button[disabled],
html input[disabled] {
   cursor: default;
   color: silver;
   border-color: silver;
}


.rectShadow {
   box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
}
.irregShadow {   /* irregular edge from transparent image */
   -webkit-filter: drop-shadow(5px 5px 5px #555);
   filter:         drop-shadow(5px 5px 5px #555); 
}


/*  Avoid up/down arrows on "number" input fields:   
================================================== */
/*  webkit browsers:  */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
/*  Firefox:  */
input[type=number] {
    -moz-appearance:textfield;
}
/*  End - up/down arrows . . .    
================================================== */



/* .erg { color: #4A52D6; font-weight: 700; font-size: 1em;} */
.erg { color: #5C60FE; font-weight: 800; font-size: 1em;}

.prgNote {
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 1.6rem;
    color: #f71efe;
}

hr { border: solid #ddd; border-width: 3px 0 0; clear: both; }

a { color: #2294C4; }    /* was 66c */

a:focus, a:hover {
    color: #23527c;
    text-decoration: underline;
}





/*  Form Fields  **************************************/

/* does not make it read only, just formatting without borders: */
.readOnlyFld_L {
    border-width:         0; 
    background:           transparent;
    text-align:           left;
}

/* does not make it read only, just formatting without borders: */
.readOnlyFld_R {
    border-width:         0; 
    background:           transparent;
    text-align:           right;
}

/* Input Field - string, with borders: */
.sInputFld {
    border:               #ccc 1px inset; 
    background:           #FFF;
    text-align:           left;
}

/* Input Field - numbers, with borders: */
.nInputFld {
    border:               #ccc 1px inset; 
    background:           #FFF;
    text-align:           right;
}

/* Select Box */
.sInputSelect {
    border:               #ccc 1px inset; 
    padding:              1px;
    background:           #FFF;
    font-size:            1rem;
}

.charLen {
   font-weight: normal !important;
   color: grey;
   margin-left: 0rem;
}



/*  Separators  **************************************/
.sep10 {
	height: 10px;    border: none;
}
.sep20 {
	height: 20px;    border: none;
}
.sep30 {
	height: 30px;    border: none;
}
.sep40 {
	height: 40px;    border: none;
}
.sep50 {
	height: 50px;    border: none;
}
.sep60 {
	height: 60px;    border: none;
}
.sep70 {
	height: 70px;    border: none;
}
.sep80 {
	height: 80px;    border: none;
}
.sep90 {
	height: 90px;    border: none;
}
.sep100 {
	height: 100px;    border: none;
}



/*  Indent:    **************************************/
.indent_10 {
   margin-left:          10px;
}

.indent_20 {
   margin-left:          20px;
}

.indent_50 {
   margin-left:          50px;
}

.indent_100 {
   margin-left:          100px;
}


@media print {
   .noPrint {
      display: none !important;
   }
}


/*  Zoom Image:    **************************************/
.imgZoom {
  padding: 20px;
/*  background-color: green; */
/*  margin: 0 auto;       set margin in img! */
  transition: transform .2s;    /* Animation */
/*  width:  160px;      set w + h in <img>!  */
/*  height: 160px;      set w + h in <img>!  */
}

.imgZoom:hover {
           /* approximate real size!  */
  -ms-transform: scale(2.5); /* IE 9 */
  -webkit-transform: scale(2.5); /* Safari 3-8 */
  transform: scale(1.8); 
}

