/* Custom size input */
.input-xs {
  height: 22px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
  border-radius: 3px;
}


/*CSS Document*/

input.generictextbox {
    display:inline !important;
    width: 150px;
    float:left;
    margin-right:3px;
}

textarea.generictextarea {
    width:240px;
}

input.shrinkbutton{
    margin-right: -2px;
}

 
/* you can use this on the row class when the margin bleed into the one left of it*/
.fixmargin {
    margin-left:0;
}
 
/*moved the no-gutter stuff out of the max 767 section think it makes more sense not dynamic*/
/* http://www.bootply.com/109530# slight modifications will remove gutter only when when xs column definer takes over 
    you must designate the row to be no-gutter if you want this to work, loggedin.aspx shows how to do this  */
/*Remove gutter, add this code to a div that has been defined as a row for bootstrap*/
/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
}
/* remove right padding from first column */
.row.no-gutter [class*='col-']:first-child {
    padding-right:0;
    padding-left:0;
}
/* remove left padding from first column */
.row.no-gutter [class*='col-']:last-child {
    padding-left:0;
    padding-right:0;
}

/* todo remove later
.AspNetDisabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
*/

/* collectadditem control */

.imgclass {
    border-radius: 5px;
    background-clip: padding-box;
    min-height: 100px;
    background-image: url(../img/generic.png);
    background-repeat: no-repeat;
    background-position: center;
    min-width: 100px;
    border: 2px solid #ccc;
}

/* collect page */
.pagenumber {
    padding: 20px 0px;
    font-size:smaller;
    display:table;
    margin:0 auto;
}

.givclass {
    width: 100%;
}

/* Message.aspx page*/

div.MESSAGE_SENDER
{
    background-color:#CCFFCC;
    text-align:center;
    margin:0px auto;
    padding:15px;
}

div.MESSAGE_RECEIVER
{
    background-color:#F5F5F5;
    text-align:center;
    margin:0px auto;
    padding:15px;
}


/* to color the bootstrap icons if user is maintainer/custodian/collector*/
.green {
    color:forestgreen;
}

.btn-key {
    color: #fff;
    background-color: #336699;
    border-color: #000066;
    cursor: default;
}

.btn-key:hover {
    color: #fff;
}

div.collectcount {
    font-size:14px;
}

div.collecttextsave {
    margin-top:20px;
}

img.collectimgthumb {
    /*max-height:150px;
    width:auto;*/
    max-height:45px;
    height:auto;
    width: auto;
    max-width: 45px;
}

div.collectgrade {
   border-bottom:solid 1px grey;
   font-size:11px;
}

div.collectcombo {
    width:300px;
}

div.collectwell {
    margin-bottom:0px;
}

/* end collect page */

h1 {
    margin:0px !important;
}

h3 {
    font-size: 17px;
}

.checkboxlimitheight input {
   height:13px; 
}

.checkbox {
    border:0px solid red;
    text-align:right;
    margin-right:0px;
}

.checkbox > label{
    padding-left:0px;
}

.center {
    text-align:center;
}

.container {
    width: 100%;
    text-align:left;
    margin:0 auto;
}

.container_maxwidth {
    width: inherit;
    text-align:inherit;
    margin:inherit;
    max-width:1100px;
    padding: 1% 3% 1% 3%;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
}

.circleglyph:hover
{
    background: lightgreen;
    cursor: pointer;
}

/* not using this one any more todo remove later*/
.circleglyph {
    width: 23px;
    height: 23px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: lightblue;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    padding-top:4px;
    padding-left:1px;
    text-decoration:none !important;
}
/* not using this one any more todo remove later*/

.circleglyph2 {

  width: 23px;
  height: 23px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  padding-top:3px;
  padding-left:3px;
  border: 2px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.6);  
  cursor: pointer;
}

.mainsiteblue
{
    background: #005189;
}

.mainsitebluetext
{
    color: #005189;
}


/*http://getbootstrap.com/examples/sticky-footer-navbar/*/
.footer {
    position:absolute;
    bottom:0;
    height:85px;
    background-color:#f5f5f5;
    text-align:center;
    /*border:1px solid black;*/
    width:100%;
}

html {
    position:relative;
    min-height:100%;
}

body {
    margin-bottom:85px;
}

.buttonspace {
    margin-bottom: 2px;
}

.mb10 {
    margin-bottom: 10px;
}

.mt20 {
    margin-top:20px;
}

.mt10 {
    margin-top:10px;
}

.mt5 {
    margin-top:5px;
}

.noborder, div .noborder{
    border:none;
}

.bold {
    font-weight:bold;
}

.r_32px {
    width:32px;
    max-width:32px;
    outline:none;
}


/* Custom styling for the adminmaintaingrades page */
label.labeltext {
    font-size : x-small;
}


/* Custom Styling for Registration page */
/* Credit to bootsnipp.com for the css for the color graph */
.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}


/* Custom Styling for index page */
.box_minicontent
{
    background: #f9f9f9;
    padding: 3% 2%;
    float: left;
    width: 31%;
    margin-right: 2%;
    box-shadow: 1px 1px 5px -1px rgba(143,143,143,1);
}

/* Custom Styling to NavBar
====================================
*/

    /* start - this is a fix for the nav bar drop down to fix the formatting on the items*/
    .dropdown-menu > div > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

    .dropdown-menu > li > span > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }
    /* end - this is a fix for the nav bar drop down to fix the formatting on the items*/

    .dropdown-menu {
        text-align:center;
    }

    .navbar-collapse .navbar-nav > li > a {
        /* color : red */
    }

    /* this is the color of the HOME button text, and background color */
    .navbar-collapse .navbar-nav > .active > a,
    .navbar-collapse .navbar-nav > .active > a:hover,
    .navbar-collapse .navbar-nav > .active > a:focus {
        background-color : #005189;
        /* color : red */
    }

    /* this is the color of the Help button when it's clicked, and background color */
    .navbar-inverse .navbar-nav > .open > a,
    .navbar-inverse .navbar-nav > .open > a:hover,
    .navbar-inverse .navbar-nav > .open > a:focus {
        background-color : #005189;
        /* color : red */
    }

    /* the button on the right when the navbar is in collapsed mode*/
    .navbar-toggle   {
        background-color : #005189 !important;
    }

    /* the button on the right when the navbar is in collapsed mode when you hover or click*/
    .navbar-toggle:active, .navbar-toggle:hover  {
        background-color : grey !important;
    }

    .active {
        /*  background-color:#222 */
        color:#005189;
    }

    /*change this to change the color of the navbar*/
    .navbar-outer-wrapper {
        /*  background-color:#222 */
        background-color:#005189;
    }

    /*change this to change the color of the navbar*/
    .navbar-inverse {
        /*  background-color:#222 */
        background-color:#005189;
    }

    .navbar-wrapper {
        background-color:transparent;
        position: static;
        top:0;
        right:0;
        left:0;
        z-index:20;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* image frame for the navbar wrapper, oddly enough you need the frame and the helper class to
        properly align an image jsfiddle.net/kizu/4RPFa/4570/
    */
    .navbar-wrapper .frame {
        height:23px;
        width:160px;
        border: 0px solid red;
        white-space:nowrap;
        text-align:center;
        margin: 1em 0;
    }

    .navbar-wrapper .helper {
        display:inline-block;
        height:100%;
        vertical-align:middle;
    }

    .navbar-wrapper img {
        vertical-align:middle;
    }


    /* > means direct decendent of the first one */
    .navbar-wrapper > .container {
        width:100%;
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-wrapper .navbar {
        padding-right:5px;
        padding-left:5px;
    }

    .navbar-wrapper .navbar .container {
        width:auto;
    }

    .logon-input-form {
        border:0px solid red;
        float:right;
        position:relative;
        top: 7px;
        right: 1px;
        height:40px;
        padding-right:1px;
        display:flex;
    }

    .right-inner-addon {
        /*border:1px solid white;*/
        padding-top:2px;
        padding-right:2px;
        display:inline-block;
        position:relative;
    }

    .right-inner-addon input {
        height:32px;
        width:129px;
        padding-right:30px;
        margin:0px;
    }

    .right-inner-addon input[type=submit] {
        width:70px;
    }

    .right-inner-addon i {
        position: absolute;
        right: 0px;
        padding: 10px 12px;
        pointer-events: none;
    }

    .right-inner-addon button {
                height : 32px;
                padding:1px 12px;
    }

     .right-inner-label {
        /*border:1px solid white;*/
        padding-top:10px;
        padding-right:2px;
        display:inline-block;
        position:relative;
        color:#9d9d9d;
    }

     .right-inner-label > a
     {
         color:lightgray;
     }

     .right-inner-label a
     {
         text-decoration:none;
     }

     .right-inner-label span {
        height:auto;
        width:150px;
        padding-right:40px;
        margin:0px;
        top:50%;    
    }

     .right-inner-label i {
        position: absolute;
        right: 0px;
        padding: 10px 12px;
        pointer-events: none;
    }

/* Custom Styling to adminmaintaincollections
====================================
*/ 
div.shadebackground {
    background-color : lightgrey;
}


 /* Custom Styling to DisplayMessage
====================================
*/ 

 .displaymessage-wrapper{

 }

 .displaymessage-span {
        text-align:center;
        display:inline-block;
        width:100%;
 }

.displaymessage-wrapper > .container {
        width:99%;
        padding-top: 51px;
        padding-right: 0;

        text-align:center;
}


.col-sm-6 .hideimageonsmall {
    display:block;
}

/* Responsive CSS
====================================
*/

/* This one is to allow the image to dissappear when it goes to phone size */
@media screen and (max-width:750px){

    .col-sm-6 .hideimageonsmall {display:none;}
    .logo { width:165px; }
}

@media (min-width:767px) {

    .box_minicontent {
        height:170px;
    }

    .navbar-wrapper {
        margin-top:0px;
    }

    .container {
        padding-right:10px;
        padding-left:10px;
    }

    .navbar-wrapper .navbar {
        padding-right:0;
        padding-left:0;
    }

    .navbar-wrapper .navbar  {
        border-radius:0px;
    }

    .displaymessage-wrapper > .container {
        width:99%;
        padding-top: 51px;
        padding-right: 0;
        padding-left: 52px;
        text-align:center;
    }
}



@media (max-width:767px){
    /* collect add item control */
    .imgclass {
        min-width: 50px;
    }

    /* collect page */
    input.shrinkbutton{
        width:45px;
        padding-right: 0px;
        padding-left: 0px;
    }

    .givclass {
        width: 155px;
    }

    .btn-key {
       padding-right: 6px !important;
       padding-left: 6px !important;
    }

    .btn-md-resize {
            padding: 6px 10px;
            font-size: 12px;
            line-height: 1.42857143;
            margin-right: -2px;
    }

    div.collectcount {
        font-size:12px;
    }

    img.collectimgthumb {
        max-width: 45px;
        max-height:45px;
    }

    div.collectwell {
        margin-bottom:-11px;
    }

    div.collecttextsave {
        margin-top:3px;
    }

    div.collectcombo {
        width:203px;
    }

    /* collect page */

    .container {
        padding: 0;
    }
    
    /* used on index page*/
    .box_minicontent
    {
        background: #f9f9f9;
        padding: 3% 2%;
        float: left;
        width: 99%;
        margin-left: 2px;
        box-shadow: 1px 1px 5px -1px rgba(143,143,143,1);
    }

    .mainsitebluetext
    {
        margin:0.4em;
    }

    h1, h3 {
        text-align:center;
    }

    h1 {
        font-size:28px;
    }

    /* used on index page*/

    .navbar-wrapper .frame {
        height:45px;
    }

    .navbar-wrapper img {
        height:45px;
    }

    .logon-input-form {
        clear:left;
        float:left;
        display:inline-block;
    }

    .right-inner-addon {
        clear:left;
        float:left;
    }

    .navbar-collapse {
        height:500px;
    }

    .right-inner-addon input[type=submit] {
        width:70px;
    }

    .right-inner-addon input[type=text] {
        width:112px;
    }


    
}

/* This is for the floating buttons on the collect page http://www.bootply.com/93706*/

@media (max-width:767px) {
    .div-floating-right {
        width:50px;
        float:right;
    }
}

@media (min-width: 768px) {
  .div-floating-right  {
        width:100px;
        float:right;
  }
}

@media (max-width:767px) {
    .btn-floating-right {
        width:50px;
        padding-left:0;
        padding-right:0;
        position:fixed;
    }



}

@media (min-width: 768px) {
  .btn-floating-right  {
        width:100px;
        position:fixed;
  }
}

/* This is for the floating buttons on the collect page*/

/* Generic Dynamic CSS */

@media (max-width:767px) {
    input.generictextbox {
        width: 85px;
    }
    textarea.generictextarea {
        width: 180px;
    }
}