.navbar {
  z-index: 1000;
  position: relative;
  top: 0
}

.navbar-toggle-custom {position:absolute;left:0;margin-left:1em;}


a.navbar-toggle-custom:link {color: white}
a.navbar-toggle-custom:visited {color: white}
a.navbar-toggle-custom:hover {color: white}
a.navbar-toggle-custom:active {color: white}


.navbar-custom {
  color:white;
  font-weight:bold;
  border-radius:0;
  border:none;
  background-color:#0d3c5b;
  //background: -webkit-linear-gradient(#EF7D69, #0d3c5b); /* For Safari 5.1 to 6.0 */
  //background: -o-linear-gradient(#EF7D69, #0d3c5b); /* For Opera 11.1 to 12.0 */
  //background: -moz-linear-gradient(#EF7D69, #0d3c5b); /* For Firefox 3.6 to 15 */
  //background: linear-gradient(#EF7D69, #0d3c5b); /* Standard syntax (must be last) */
}

.navbar-custom .navbar-nav > li > a {
  color:white;
  z-index:1002;
}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
  color: white;
  font-weight:bold;
  background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:focus, .navbar-custom .navbar-nav > li > a:hover {
  color: #b8982f;
}

.navbar-custom .navbar-toggle .icon-bar {
  background-color: white;
}

/* center nav options when it is not collapsed for phone version.
   in and collapsing selectors are used to keep horizontal
   scrollbar away when nav is collapsed (in) or collapsing */
.phonetablet :not(.in):not(.collapsing) > .navbar-nav-custom {
  width: 700px;
  display:block;
  float:none;
  margin:auto;
}


.navbar-custom .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: transparent;
}


.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
.navbar-toggle {padding:0px;border:none;}
.navbar-toggle:hover {background-color:transparent;}

.grad1 {
  background-color:#0d3c5b;
  //background: -webkit-linear-gradient(#EF7D69, #0d3c5b); /* For Safari 5.1 to 6.0 */
  //background: -o-linear-gradient(#EF7D69, #0d3c5b); /* For Opera 11.1 to 12.0 */
  //background: -moz-linear-gradient(#EF7D69, #0d3c5b); /* For Firefox 3.6 to 15 */
  //background: linear-gradient(#EF7D69, #0d3c5b); /* Standard syntax (must be last) */
  background-repeat:no-repeat;
}

.affix {
  top: 0;
  width:100%;
  z-index: 2000;
}

* {
  box-sizing: border-box;
}

html {
  font-family: "Lucida Sans", sans-serif;
}
body {
  position: relative;
  margin: auto;
//  background-color: #C2EBFF; /*#A3E0FF #85D6FF #66CCFF #A8E5EC #81E0FF */
//  background: -webkit-linear-gradient(#81E0FF, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5) #F9F0C5; /* For Safari 5.1 to 6.0 */
//  background: -o-linear-gradient(#81E0FF, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5) #F9F0C5; /* For Opera 11.1 to 12.0 */
//  background: -moz-linear-gradient(#81E0FF, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5) #F9F0C5; /* For Firefox 3.6 to 15 */
//  background: linear-gradient(#81E0FF, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5, #F9F0C5) #F9F0C5; /* Standard syntax (must be last) */
//  background-repeat:no-repeat;
}

.main {
  background-color:white;
}
.container {
  margin:auto;
}
.row:after {
  content: "";
  clear: both;
  display: block;
}
.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}
#top {
  height: 155px;
  font-family: 'Oswald', sans-serif;
  font-size: .8em; /*for phones. overridden by media query. */
}
#need {
  position:relative;
  top: 0px;
  margin: auto;
  height: 130px;
  z-index: 1001;
  text-align: center;
  width: 18em;
}
#need:after {
  content: "";
  clear: both;
  display: block;

}
#girl {
  position:absolute;
  left:10px;
  top:0px;
}
#boy {
  position:absolute;
  right:10px;
  top:0px;
}

#need > #jyjf {
  position: relative;
  top: 80%; /*for phones. overridden by media query. */
}
#need > #jyjf > h1 {
  letter-spacing: 0.2em;
  font-family: 'Old Standard TT', serif;
  font-size: 110%;
  color: #b8982f;
  margin:0;
  text-align:center;
}
#need > #jyjf > h2 {
  letter-spacing: .6em;
  font-family: 'Oswald', sans-serif;
  font-size: 70%;
  color: #0d3c5b;
  font-weight:bold;
  margin:0;
  text-align:center;
}

#logo, #logo2 {
  //width:205px;
  //width:420px;
  width:100%;
  margin-bottom:5px;
}

@media only screen and (min-width: 530px) {
  #top {
    font-size: 2em;
  }
  #need > #jyjf {
    top: 60%;
  }

  .btn-donate {
    width:90%;
  }
}

#top > hr {
  margin:.1em;
  border-width: 3px;
  border-color: #2D518D;
}

.menu {
 display:none;  /*for phones. overridden by media query. */
}

.menu ul {
  padding-left: 22px;
}
.menu li {
  padding: 0px;
  margin-bottom: 7px;
  color: #2D518D;/*#81E0FF;*/
  letter-spacing: 0.2em;
}

.menu ul {
   list-style: none;
   white-space:nowrap;
}

.menu ul li:before {
  font-family: 'FontAwesome';
  content: '\f140'; /*from &#xf069 */
  margin:0 3px 0 -22px;
}

.menu li a:link {color: #0d3c5b;}
.menu li a:visited {color: #0d3c5b;}
.menu li a:hover {color: #0d3c5b;}
.menu li a:active {color: #0d3c5b;}

.menu li:hover {
  font-weight: bold;
  cursor: pointer;
}

#img-sld {
  position: relative;
  top: 0;
}
#img-sld div {
  position: absolute;
  right: 0;
  top: 60%;
  background: #82E0FF; /*ie8*/
  background: rgba(130, 224, 255, 0.8);
  padding: 1em;
  font-weight:bold;
  display:none; /*for phones. overridden by media query. */
}
#img-sld div h1 {
  color: #b8982f;
}

@media only screen and (min-width: 516px) {
  #img-sld div {
    display:block;
  }
  #img-sld div h1 {
    display:block;
  }
}

aside, .aside {
  color: #0d3c5b;
  text-align: center;
  font-size: 14px;
  border:.2em solid #0d3c5b;
  margin-bottom:.5em;
  padding:0;
  background-color:white;
  
}
aside img, .aside img {
  width:100%;
  margin:0;
}

.aside-donate {
  text-align:center;
  color: #0d3c5b;
  padding:.5em;
  //background-color:#32C0CD;
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
  margin-bottom:.5em;
}
.aside-donate h1 {
  color: #b8982f;
  margin-bottom:0;

}
.aside-donate h2 {
  margin-top:0;
  letter-spacing: .6em;
  font-family: 'Oswald', sans-serif;
  color: #0d3c5b;
  font-weight:bold;
  font-size: 110%;
}

.aside-blue {
  padding:1em 0.5em;
  //background-color: #32C0CD; /*52C9E1;*/
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
  color: white;
}
.aside-blue h1 {
  color: #b8982f;
}
.aside-blue a:link {color: #0d3c5b}
.aside-blue a:visited {color: #0d3c5b}
.aside-blue a:hover {color: #0d3c5b}
.aside-blue a:active {color: #0d3c5b}

.aside-green {
  padding:1em;
  color: #0d3c5b;
  //background-color:#C9E5CC;
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
}

.save-the-date {
  position:relative;
  color:black;
  text-align:left;
  padding: 1em 1em 1em 3em;
}

.save-the-date .date {
  position:absolute;
  top:.2em;
  left:-1em;
  padding:1em;
  //background-color: #0d3c5b;
  background-color:white;
  color:#0d3c5b;
  font-size:.8em;
  font-weight:bold;
  text-align:center;
}

.aside-yellow {
  padding:1em;
  color: #0d3c5b;
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
}

.aside-red {
  padding:.5em;
  color: #0d3c5b;
  //background-color:#0d3c5b;
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
}
.aside-red h1 {
  //color: #2D518D;
  color:#b8982f;
}


aside a:link {text-decoration: underline;color: #b8982f;}
aside a:visited {text-decoration: underline;color: #b8982f;}
aside a:hover {text-decoration: underline;color: #b8982f;}
aside a:active {text-decoration: underline;color: #b8982f;}

.aside-red a:link {color: #0d3c5b}
.aside-red a:visited {color: #0d3c5b}
.aside-red a:hover {color: #0d3c5b}
.aside-red a:active {color: #0d3c5b}

footer {
  background-color: #b8982f;
  color: white;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

h1 {
  color: #b8982f;
  font-family: 'Old Standard TT', serif;
  font-size: 1.5em;
}
h2 {
  color: #0d3c5b;
  font-weight:bold;
  font-size:1em;
}
h3 {
  color: #0d3c5b;
  font-size:.85em;
}

aside > h1, .aside > h1 {
  font-size: 1.5em;
  margin-top:0;
}

a:link {color: #2D518D;}
a:visited {color: #2D518D;}
a:hover {color: #2D518D;}
a:active {color: #2D518D;}

a.btn-donate3:link {color: white}
a.btn-donate3:visited {color: white}
a.btn-donate3:hover {color: white}
a.btn-donate3:active {color: white}

.btn-donate3 {
  width:153px;
  background: -webkit-linear-gradient(#0093B9, #00C3EA); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#0093B9, #00C3EA); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#0093B9, #00C3EA); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#0093B9, #00C3EA); /* Standard syntax (must be last) */
  background-color:#0093B9; /*ie8*/
}

a.btn-donate2:link {color: white}
a.btn-donate2:visited {color: white}
a.btn-donate2:hover {color: white}
a.btn-donate2:active {color: white}

.btn-donate2 {
  width:120px;
  background: -webkit-linear-gradient(#EF7D69, #0d3c5b); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#EF7D69, #0d3c5b); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#EF7D69, #0d3c5b); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#EF7D69, #0d3c5b); /* Standard syntax (must be last) */
  background-color:#32C0CD; /*ie8*/
}

a.btn-donate1:link {color: white}
a.btn-donate1:visited {color: white}
a.btn-donate1:hover {color: white}
a.btn-donate1:active {color: white}

.btn-donate1 {
  width:100%;
  padding:1em 0.5em;
  margin-bottom:.5em;
  background: -webkit-linear-gradient(#EF7D69, #0d3c5b); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#EF7D69, #0d3c5b); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#EF7D69, #0d3c5b); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#EF7D69, #0d3c5b); /* Standard syntax (must be last) */
  border-color: transparent;
  background-color:#0d3c5b; /*ie8*/
}
.main {
  margin:0 1em 1em 1em; /*for phones. overridden by media query. */
  border:1px solid white; /* fix for ie missing padding at top for phones*/
}


@media only screen and (min-width: 768px) {
  .menu {
    display:inline;
  }
  .main {
    margin:auto;
    margin-bottom: 1em;
    min-height:750px;
  }
}

em.grey {
  font-style:normal;
  color:grey;
}

.thinborder {border:1px solid grey;padding:5px;}
table.paypaleventinput td {padding:5px;}

.paypalevent .paypaleventinput {width:100%;text-align:left;color: #2D518D}
.paypalevent .paypaleventinput input, .paypalevent .paypaleventinput select {color:black}
.paypalevent h1 {color: #2D518D}
.paypalevent h2 {font-family: 'Slabo 27px', serif; color:#0093B9; font-weight:bold;font-size:130%;margin-bottom:0}
.paypalevent h2 span {color:black; font-family: 'Homemade Apple', cursive;font-size:80%}
.paypalevent h3 {font-family: 'Slabo 27px', serif; color:black;margin-top:0;margin-bottom:0px}
/* .paypaleventinput input {margin-bottom:.5em} */

.aside-purple {
  padding:1em 0.5em;
  //background-color: #DFBCFA; /*# 97B3DF;*/
  background-color:white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.12);
  color: #0d3c5b;
}

.phonetablet {
  display:block;
}

.desktop {
  display:none;
}

@media only screen and (min-width: 768px) {
  .phonetablet {
    display:none;
  }

  .desktop {
    display:block;
  }
}

.headerrow {
    font-size: 0;
}
.headerrow > * {
    float: none;
    display: inline-block;
    font-size: 14px;
}
.headerrow p:last-child {
    margin-bottom: 0;
}
.headerrow .col-sm-2, .headerrow .col-sm-10 {
    vertical-align: bottom;
}

#facebook-phonetablet {
  margin:20px 0px 20px 0px;
}
#facebook {
  float:right;
  margin:20px 0px 20px 20px;
}



div.sponlevels {
  overflow-x:scroll;
  }
table.sponlevels {
  border-collapse: collapse;
  width: 100%;
  //table-layout: fixed;
}
  
  table.sponlevels th, td {
  text-align: left;
  padding: 8px;
  background-color:#0A3C5B;
  border: 3px solid white;
}

table.sponlevels th {
  color: white;
  font-weight:bold;
  //font-size:1em;
  text-align:center;
}

table.sponlevels tr.header th {
  vertical-align: bottom;
}

table.sponlevels img{
    width: 100%;    
}

table.sponlevels td.check { text-align:center;font-size:3em}


/*

#goal h2,
#goal1 h2,
#goal2 h2,
#goal3 h2 {
  margin-bottom:0;
}



#progress-container,
#progress-container1,
#progress-container2,
#progress-container3 {
  margin:auto;
  min-width:120px;
  max-width:250px;
  width:90%;
  padding-top:10px;
  font-weight:bold;
color: black;
}

#goal .thermometer,
#goal1 .thermometer,
#goal2 .thermometer,
#goal3 .thermometer {
position:absolute;
bottom:0px;
height:153px;
width:100%;
//background-image:url('thermometer.png');
//background-image:url('thermometer_jaguar.png');
background-image:url('thermometer_paw.png');
background-repeat:no-repeat;
padding:0;
margin:0;
background-position:left bottom;

}

#goal .thermometer #progress,
#goal1 .thermometer #progress1,
#goal2 .thermometer #progress2,
#goal3 .thermometer #progress3 {
  width:100%;
  position:absolute;
  bottom:0px;
  //background-image:url('thermometer-fill.png');
  //background-image:url('thermometer_jaguar-fill.png');
  background-image:url('thermometer_paw-fill.png');
  background-repeat:no-repeat;
  margin:0;
  background-color:transparent;
  background-position:left bottom;
  box-shadow:none;
  border-radius:0;

}
#goal #thermometer-container,
#goal1 #thermometer-container1,
#goal2 #thermometer-container2,
#goal3 #thermometer-container3 {
  position:relative;
  height:153px;
  margin-bottom:1em
}
#goal .thermometer #progress .progressamt-container,
#goal1 .thermometer #progress1 .progressamt-container,
#goal2 .thermometer #progress2 .progressamt-container,
#goal3 .thermometer #progress3 .progressamt-container,
#goalline2, #goalline3 {
  border-top:2px solid black;
  font-weight:bold;
  width:100%;
  float:right;
}

#goal .thermometer #progress #progressamt,
#goal1 .thermometer #progress1 #progressamt1,
#goal2 .thermometer #progress2 #progressamt2,
#goal3 .thermometer #progress3 #progressamt3,
#goalamt2, #goalamt3 {
  text-align:right;
}
*/
