body { background: url(../images/tfud-bg.jpg); margin: 0; color: #444; }

#container {
  margin: 0 auto;
  width: 94%;
  font-family: 'Droid Sans', sans-serif; ;
}

#wrapper {
  margin: 0 auto 0;
  width: 98%;
  max-width: 960px;
  background: #FFF;
  padding-top: 20px;
  padding-bottom: 40px;

 
}

#ud-header { height: auto; width: 100%; background: #002664; padding-bottom: 5px; border-bottom: solid #ffd200 3px; }
.inner { max-width: 960px; margin: auto; padding: 5px 0 0 5px; overflow: hidden; }
.inner img {}

#footer { width: 100%;  background: #f4f3f1; clear: both; }

#logo { margin: auto; display: block; }

a { color: #0069aa; }
#resources a, h3 {  font-family: 'Droid Sans'; text-decoration: none; font-weight: normal; }
h3 { background: url(../images/heading-bg.png); width: 708px; height: 48px; padding-top: 13px; margin: auto; text-align: center; font-weight: normal; color: #FFF; font-size: 25px; }
h4 { margin-top: 0; }

.pink { color: #ed174f; }

#bubble { width: 655px; height: 345px; margin: auto; position: relative; z-index: 10; display: block; background: url(../images/big-bubble.gif) no-repeat; }
#bubble .text { width: 575px; padding: 50px 50px 50px 40px; display: block; margin: auto; }
#bubble .text p { line-height: 30px; }

#resources { width: 655px; margin: auto; position: relative; top: -40px; z-index: 15; }
#resources ul { width: 485px; position: relative; top: 0; left: 170px; margin: 0; padding: 0; list-style: none; }
#resources li { margin-bottom: 20px; }
#resources li a { font-size: 25px; display: block; margin-bottom: 10px; }
#resources li .resc-desc { margin-left: 30px; }

.two-col-block { width: 605px; margin: auto; overflow: auto; margin-top: 25px; }
.two-col-block .col { width: 232px; padding: 10px 35px 10px 35px; float: left; display: inline; }
.two-col-block .col.full { width: 535px; }
.two-col-block .col.full:first-child { border: none;  }
.two-col-block .col:first-child { border-right: 1px solid #e0e0e0;  }
.two-col-block + h3 { margin-top: 25px; }

#foot-note { width: 655px; margin: auto; text-align: center; border-top: 1px dashed #e0e0e0; padding-top: 10px; }

@media only screen and (max-width : 788px) {

#wrapper {
  width: 94%;
  padding: 2%;
 
}

h3 { width: 496px; height: 48px; font-size: 25px; background: url(../images/heading-bg-short.png); }

#bubble { width: 500px; }
#bubble .text { width: 420px; padding: 15px 20px 20px 20px; display: block; margin: auto; }

#resources { width: 435px; margin: auto; }
#resources ul { width: 315px; left: 120px; }
#resources li a { font-size: 18px; font-weight: bold; }
#resources li .resc-desc, #foot-note { font-size: 14px;}

.two-col-block { width: 455px; }
.two-col-block .col { width: 157px;  }

#foot-note { width: 500px; padding: 20px 0 10px 0;}



}

@media only screen and (max-width : 568px) {

.inner img { height: 44px; }

#logo { width: 80%; }

#wrapper {
  width: 94%;
  padding: 2%;
 
}

h3 { background: #6e9bc5; width: 94%; height: auto; padding: 3%;}

#bubble { width: 95%; height: auto; margin: 2.5%; background: #b6d5e8; }
#bubble .text { width: 90%; padding: 5%; text-align: center; }

#resources { width: 90%; padding: 5%; margin: 2.5% 2.5% 2.5% 2.5%; top: 0; }
#resources ul { width: 100%; left: 0; }

.two-col-block { width: 90%; padding: 0 5% 5% 5%; }
.two-col-block .col { width: 95%; padding: 2.5%; display: block; float: none; }
.two-col-block .col:first-child { border: none; }

#foot-note { width: 90%; padding: 5%; border-top: 1px dashed #e0e0e0; line-height: 20px; }

}

#footer {font-size: 12px; color: #555; font-family: 'Droid Sans', sans-serif;}
#footer a { color: #2577b6; display: inline; padding: 2px 2px 0 0;}