html,
body {
    margin:0;
    padding:0;
    height:100%;
}
html{ font-family: Helvetica, Arial, sans-serif; font-size: 14px; }
a{ color: #11335d; }

#page-container {
    min-height:100%;
    position:relative;
}

#header {}
#body {
    /* Height of the footer */
    padding-bottom:20px;
}

/* Custom Styles */
body{ background: #FFFFFF url(https://www.givetoqueens.ca/assets/images/tricolour-background.png) no-repeat 50% 70px; }
#body-wrapper{ box-shadow: 0px 1px 4px 4px rgba(0,0,0,0.1); padding: 0px 8px; background: #ffffff; padding-bottom: 350px; }

/*******************************************************************************
  HELPERS
*******************************************************************************/
.text-right{ text-align: right; }
.text-left{ text-align: left; }
.text-center{ text-align: center; }

/*******************************************************************************
  HEADER
*******************************************************************************/
#header{ padding-top: 8px; }
#header #navigation{ border-bottom: 2px solid #e8e8e8; }
#header #navigation .header-navigation{ text-align: right; font-family: 'Open Sans'; font-weight: bold; }
#header #navigation .header-navigation a { background: url(../images/nav-arrow.png) 0% 0% no-repeat; padding-left: 16px; color: #000000; }
#header #navigation .header-navigation a:hover{ color: #0645AD ;}

#sub-header { padding-top: 16px; }

/*******************************************************************************
  FOOTER
*******************************************************************************/

#footer a{ color: #FFFFFF ;}

#footer{ font-size: 10px; padding: 10px 0px 0px; background-color: #554f4f; height: 350px; position: absolute; bottom: 0px; width: 100%; color: #FFFFFF; }
#footer .footer-bar{ border-top: 1px solid #FFFFFF;}
#footer .menu { list-style-type: none; margin: 0px; padding: 0px; font-size: 12px; text-align: center; margin-top: 8px; }
#footer .menu li{ float: left; width: 85px; border-left: 1px solid #FFFFFF; padding-left: 8px; }
#footer .menu li.first{ border: none; }
#footer .menu li > a{ display: block;}

/*******************************************************************************
  NAVIGATION
*******************************************************************************/
.top{
    font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", Helvetica;, Arial, sans-serif;
  background: #302f2e;
    background: -moz-linear-gradient(top,#686868 25%,#302f2e 75%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(25%,#686868),color-stop(75%,#302f2e));
    background: -webkit-linear-gradient(top,#686868 25%,#302f2e 75%);
    background: -o-linear-gradient(top,#686868 25%,#302f2e 75%);
    background: -ms-linear-gradient(top,#686868 25%,#302f2e 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#686868',endColorstr='#302f2e',GradientType=0);
 }
.top .btn-top-navigation { color: #FFFFFF; }
  .top .btn-top-navigation:hover{ color: #EEBD31; }
.top .btn-top-navigation-selected { color: #EEBD31; }

.page-navigation{ width: 100%; }
.page-navigation tr{ background-color: #FFFFFF; }
.page-navigation tr:nth-child(odd){ background-color: #FAFAFA }
.page-navigation tr:hover{ background-color: #F1F1F1; }
.page-navigation td { padding: 4px 8px; }

.navigation{ list-style-type: none; padding: 0px; padding-left: 4px; margin: 0px; font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important; }
.navigation li{ padding: 2px 4px; background-color: #FFFFFF; border-left: 3px solid #FFFFFF; border-bottom: 1px dashed #CFCFCF; transition: background-color 0.5s ease; transition: border 0.5s ease; }
.navigation li:hover{ background-color: #F5F8FF; border-left: 3px solid #81A9FF; }
.navigation li a{ display: block; }
.navigation.navigation-donate{
    margin-top: 16px;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 20px;
    background-color: #82b440;
    padding: 0px;
    border-radius: 5px;
    transition: all 0.2s ease;
    border: 1px solid #6f9a37;
    border-width: 1px 1px 3px;
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    -moz-box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
    border-style: solid;
    position: relative;
   }
  .navigation.navigation-donate:hover{ background-color: #7aa93c; }
  .navigation.navigation-donate:active{ top: 1px; background-color: #7aa93c; }
  .navigation.navigation-donate a{ display: block; color: #FFFFFF; line-height: 50px; margin-bottom: 0px; }

  .btn-group>.btn{ border-radius: 0px; }

/*******************************************************************************
  STICKERS
*******************************************************************************/
.stickers .sticker{ height: 420px; padding-top: 16px; transition: background-color 0.3s ease; box-shadow: 0 0 1px rgba(0, 0, 0, 0); }
.stickers .sticker:hover{ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); }
.stickers .sticker-image{ text-align: center; }
.stickers .sticker-image > img{ text-align: center; }
.stickers .sticker-title{ color: #9d1939; font-size: 14px; font-weight: bold; padding-top: 5px; }
.stickers .sticker-summary{ padding: 5px 0px 0px; height: 150px; }
.stickers .sticker-learn {
  float: left; color: #9d1939; font-size: 16px; font-weight: bold; margin-top: 4px;
}

.stickers .sticker-donate {
    margin-top: 8px;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
    background-color: #9b1838;
    padding: 0px 15px;
    transition: all 0.2s ease;
    min-height: 30px;
    line-height: 29px;
  }
  .stickers .sticker-donate:hover{ background-color: #b11d40; }
  .stickers .sticker-donate:active{ background-color: #9b1838 }
  .stickers .sticker-donate a{ display: block; color: #FFFFFF; margin-bottom: 0px; }


.stickers .sticker-image-hover{ position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.0);
}

.stickers .sticker-image-hover:hover{ position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7) url(../images/magnify-80.png) no-repeat 50% 50%;
}


/*******************************************************************************
  TABLES
*******************************************************************************/
.table-show-allocations { width: 100%; }
.table-show-allocations tbody tr{ border-bottom: 1px solid #DDDDDD; }
.table-show-allocations tbody tr td{ border-left: 3px solid #FFFFFF; padding-left: 8px; padding-top: 4px; padding-bottom: 4px; transition: all 0.2s ease; }
.table-show-allocations tbody tr td:hover{ background-color: #F5F8FF; border-left: 3px solid #81A9FF; }

/*******************************************************************************
  CHECKOUT
*******************************************************************************/
#checkout label{ font-weight: normal; }
#checkout .header{ font-size: 18px;
margin-bottom: 16px;
background-color: #11335d;
color: #ffffff;
padding: 4px 16px; }
#checkout .project .title{ font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 8px; margin-bottom: 8px; }
#checkout .allocation{ transition: background-color 0.3s ease; margin-top: 4px; }
  #checkout .allocation:hover{ background-color: rgba(200, 200, 200, 0.05); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25); }
  #checkout .allocation .name{ }
  #checkout .allocation .description{ font-style: italic; }
#checkout .panel{ margin: 0px; margin-bottom: 8px; background-color: #FAFAFA; border: 1px solid #F0F0F0; }

/* CONTACT PANELS */
#checkout #contact .contact-panel{ margin: 0px; margin-bottom: 8px; background-color: #FAFAFA; border: 1px solid #F0F0F0; }
  #checkout #contact .contact-panel .contact-header{ font-size: 18px; background-color: #11335d; color: #ffffff; padding: 0px 16px; }
  #checkout #contact .contact-panel .contact-content{ padding: 8px; }

/* SUMMARY */
#checkout .summary-header{ background-color: #11335d;
color: #ffffff;
padding: 4px 8px; }
#checkout .summary-table{ width: 100%; font-size: 12px; }
#checkout .summary-table tbody tr{ background-color: #FFFFFF; border-bottom: 1px solid #CCCCCC; }
#checkout #summary-table tbody tr:nth-child(even){ background-color: #FAFAFA; }

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #11335d;
background-color: #efdf83;
border: 3px solid #eebd31;
}

/*******************************************************************************
  MESSAGES
*******************************************************************************/
.callout { margin: 20px 0; padding: 20px; border-left: 3px solid #eee; }
  .callout h4 { margin-top: 0px; margin-bottom: 5px; }
.callout-danger { background-color: #CA201B;
    border-color: #550301;
    color: #FFF;
    font-weight: bold; }
  .callout-danger h4{ color: #FFFFFF;
      font-weight: bold; }
.callout-warning { background-color: #fcf8f2; border-color: #f0ad4e; }
  .callout-warning h4{ color: #f0ad4e; }
.callout-success { background-color: #dff0d8; border-color: #BFE1B2; }
  .callout-success h4{ color: #5bc0de; }
.callout-info { background-color: #f4f8fa; border-color: #5bc0de; }
  .callout-info h4{ color: #5bc0de; }
.callout-allocation { margin: 0px; padding: 10px; border-left: 3px solid #eee; background-color: #f4f8fa; border-color: #5bc0de; font-size: 10px; }

/*******************************************************************************
  ALERTS
*******************************************************************************/
.alert-red{ color: #CA201B; font-weight: bold; border-left: 3px solid #CA201B; margin: 20px 0; padding: 10px; }
.alert-red strong{ color: #00000; }

/*******************************************************************************
  BUTTONS
*******************************************************************************/
.btn-olg{ text-align: center; font-weight: bold; color: #FFFFFF; font-size: 20px; padding: 5px 15px; border-radius: 5px; transition: all 0.2s ease; border-width: 1px 1px 3px; border-style: solid; }
a.btn-olg{ color: #FFFFFF; }
  a.btn-olg:hover{ text-decoration: underline; }
.btn-olg-block{ display: block; }

.btn-olg-green{ background-color: #82b440; border-color: #6f9a37; -webkit-box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; -moz-box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; }
  .btn-olg-green:hover{ background-color: #75A239; }
  .btn-olg-green:active{ background-color: #7aa93c; }

.btn-olg--blue{ background-color: #408FB4; border-color: #377E9A; -webkit-box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; -moz-box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; box-shadow: 0 -1px 0 rgba(111, 154, 55,0.1) inset; }
  .btn-olg--blue:hover{ background-color: #3A82A3; }
  .btn-olg--blue:active{ top: 1px; background-color: #256988; }

.btn-olg-red{ background-color: #9b1838; }
  .btn-olg-red:hover{ background-color: #b11d40; }

/*******************************************************************************
  SIDEBAR
*******************************************************************************/
.sidebar-giving-table tfoot tr { border-top: 1px dashed#CECECE; }

/*******************************************************************************
  FORMS
*******************************************************************************/
form label { margin-top: 8px; }
.form-info{ padding: 4px 8px; color: #666; background-color: #F4FDFF; border: 1px solid #DCE6EB; font-size: 10px; transition: all 0.2s ease; }
.help-popup{ border-bottom: 1px dotted #C0C0C0; cursor: help; color: #FFFFFF; }

/*******************************************************************************
  bs-wizard
  http://bootsnipp.com/snippets/featured/form-process-steps
*******************************************************************************/
.bs-wizard {}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #990033; font-size: 16px; margin-bottom: 5px; font-weight: bold; }
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #003366; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }

/*******************************************************************************
  BOOTSTRAP OVERRIDE
*******************************************************************************/
#checkout .panel-noborder{ border: none; }
#checkout .panel{ border-color: #CCCCCC; }
.panel-info > .panel-heading{ color: #FFFFFF; background-color: #11335d;}
.panel-info > .panel-heading-alt{ color: #FFFFFF; background-color: #4A7EBE; }
#checkout .panel-info > .panel-heading{ border: none; }

/*******************************************************************************
  SMARTCALL
*******************************************************************************/
#smartcall h4.red{ color: #990033; }



@media screen and (min-width: 680px) {
    #body-wrapper {
        padding-bottom: 200px;
    }
    #footer {
        height: 200px;
    }
}