﻿#tfi #mid{}
#tfi #mid .mid-cnt{width: 80%; padding: 0 10%;min-height:500px}

#tfi #mid .mid-cnt #main {overflow: hidden; padding-bottom: 40px;}

/*----- General Content Format -----*/
#tfi #mid .mid-cnt img{display:inline-block;max-width:100%;}
#tfi #mid .mid-cnt #main a{color:#ff6b00;    text-decoration: underline;transition:all 0.25s;}
#tfi #mid .mid-cnt #main a:hover{color:#111111;     text-decoration: underline;transition:all 0.25s;}
#tfi #mid .mid-cnt #main ul, 
#tfi #mid .mid-cnt #main ol { margin:15px 0;  padding: 0 0 0 40px; }
#tfi #mid .mid-cnt #main ul li, 
#tfi #mid .mid-cnt #main ol li { margin: 0px 0 0 0px; padding: 0px 0 0 0px; line-height: 175%; }
#tfi #mid .mid-cnt #main h2 {border-bottom: 1px solid #111111; padding-bottom: 10px;margin-bottom:20px;font-weight:bold;}
#tfi #mid .mid-cnt #main p {margin: 10px 0 10px 0;}

/*----- Breadcrumb -----*/
#tfi #mid .mid-cnt #breadcrumb {padding: 23px 0px;}
#tfi #mid .mid-cnt #breadcrumb ul {font-size: 14px; padding:0; margin:0;}
#tfi #mid .mid-cnt #breadcrumb ul li {list-style:none; display: inline-block;margin-right:12px;}
#tfi #mid .mid-cnt #breadcrumb ul li:first-child {margin-left:0px;}
#tfi #mid .mid-cnt #breadcrumb ul li:before {content: ">"; padding: 0 12px 0 0;}
#tfi #mid .mid-cnt #breadcrumb ul li:first-child:before{content:""; display:none;}
#tfi #mid .mid-cnt #breadcrumb ul li:last-child{font-weight: 700;}
#tfi #mid .mid-cnt #breadcrumb ul li a {color: #111111; text-decoration: none;transition:color 0.25s;}
#tfi #mid .mid-cnt #breadcrumb ul li a:hover {color: #ff6b00; text-decoration: underline;transition:color 0.25s;}



/*----- side navigation -----*/
#tfi #mid .mid-cnt #subpanel {width:30%;min-width:300px; float:left;overflow:auto;}
#tfi #mid .mid-cnt #subpanel ul {padding: 0; margin: 0; padding: 80px 20px 20px 0px;}
#tfi #mid .mid-cnt #subpanel ul li {list-style:none; display: block;} 
#tfi #mid .mid-cnt #subpanel ul li a {color: #111111; display: inline-block; border-bottom: 2px solid transparent; text-decoration: none; padding: 12px 4px 4px 4px;transition:color 0.25s, border 0.25s;}
#tfi #mid .mid-cnt #subpanel ul li a.active {color: #ff6b00; border-bottom: 2px solid #ff6b00;transition:color 0.25s, border 0.25s;}
#tfi #mid .mid-cnt #subpanel ul li a:hover {color: #ff6b00; border-bottom: 2px solid #ff6b00;transition:color 0.25s, border 0.25s;}
#tfi #mid .mid-cnt #subpanel ul ul {padding: 0 20px; margin: 0;}



/*----- accordion -----*/
#tfi #mid .mid-cnt .prog { }
#tfi #mid .mid-cnt .prog h4 {color: #ff6a00; display: block;cursor:pointer;padding: 0px 0 7px 0;  margin: 7px 0 10px; border-bottom: solid 1px #cbcbcb; background-repeat: no-repeat; background-position: right 12px top 6px;}

#tfi #mid .mid-cnt .prog.hide h4{background-image: url('../img/ico-down.png');}
#tfi #mid .mid-cnt .prog.open h4{background-image: url('../img/ico-up.png');}
#tfi #mid .mid-cnt .prog.hide p{display:none;}
#tfi #mid .mid-cnt .prog p{margin:0px 0 0px 0;padding: 0px 0 30px 0;border-bottom: solid 1px #cbcbcb;}
#tfi #mid .mid-cnt .prog:last-child p{border-bottom:0px;}

 
/*----- Who We Are -----*/
/*--*/
#tfi #mid .mid-cnt #main .contact-info { }
#tfi #mid .mid-cnt #main .contact-info td {padding: 12px 0;  }
#tfi #mid .mid-cnt #main .contact-info td img{display:inline-block;}
/*--*/
#tfi #mid .mid-cnt #main .highlight {background-color: #ebebeb; display: inline-block; border-radius: 10px; padding: 20px 20px; font-size: 0px;}
#tfi #mid .mid-cnt #main .highlight img {display: inline-block; vertical-align: top;  max-width: 46%;}
#tfi #mid .mid-cnt #main .highlight div {display: inline-block; width: 50%; padding: 0 0 0 3%; font-size: 15px;}
#tfi #mid .mid-cnt #main .highlight .quote {text-align: justify; font-style: italic;}
/*--*/
#tfi #mid .mid-cnt #main .bod {display: inline-block; width: 30%; padding: 10px 10px; vertical-align: top; text-align: center;}
#tfi #mid .mid-cnt #main .bod .bod-desc {padding: 0px 10px 20px 10px; text-align: center;}
#tfi #mid .mid-cnt #main .bod .bod-desc p {margin:0px}
#tfi #mid .mid-cnt #main .bod .bod-desc p:nth-child(2) {margin-bottom:5px; line-height: 135%;}
#tfi #mid .mid-cnt #main .bod h6 {line-height: 120%; font-size: 80%; font-weight: normal; padding: 0; margin: 0;}
#tfi #mid .mid-cnt #main .bod img {width: 200px; text-align: right;}


/*----- Grants -----*/
#tfi #mid .mid-cnt #main .grants-table { width: 100%; font-size: 0; }
#tfi #mid .mid-cnt #main .grants-table table { width: 30%; display: inline-block; text-align: left; vertical-align: top; font-size: 14px; }
#tfi #mid .mid-cnt #main .grants-table table { padding: 0 1.5%; }
#tfi #mid .mid-cnt #main .grants-table table h4 { text-align: center; }
#tfi #mid .mid-cnt #main .grants-table table p { text-align: justify; }
#tfi #mid .mid-cnt #main .grants-table table td { width: 30%; }
#tfi #mid .mid-cnt #main .grants-box { }
#tfi #mid .mid-cnt #main .grants-box .grants-item { display: inline-block; width: 44.75%; vertical-align: top; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-left { margin-right: 4.5%; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right { margin-left: 5%; position: relative }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { position: absolute; top: 126px; left: 4px; font-size: 17px; font-weight: 800; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { position: absolute; top: 185px; right: 3px; font-size: 17px; font-weight: 800; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { position: absolute; bottom: 80px; left: 0; font-size: 17px; font-weight: 800; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { position: absolute; bottom: 1px; right: 111px; font-size: 17px; font-weight: 800; }
#tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-lbl { display: none; }
#tfi #mid .mid-cnt #main .grants-box .grants-item h4 { text-align: left; }
#tfi #mid .mid-cnt #main .outreach-box { vertical-align: top; width: 27.5%; display: inline-block; text-align: left; border-left-width: 3px; border-left-style: solid; padding-left: 15px; margin-bottom: 60px; }
#tfi #mid .mid-cnt #main .outreach-box.center { margin: 0 auto 60px; display: block; }
#tfi #mid .mid-cnt #main .outreach-box.left { margin-right: 5%; }
#tfi #mid .mid-cnt #main .outreach-box.right { margin-left: 5%; }
#tfi #mid .mid-cnt #main .outreach-box h2 { border: 0; margin: 0; padding: 0; }
#tfi #mid .mid-cnt #main .outreach-box h3 { border: 0; margin: 0; line-height: 125%; }
#tfi #mid .mid-cnt #main .outreach-box .fig-big { font-size: 50px; font-weight: bold; line-height: 100%; }
#tfi #mid .mid-cnt #main .outreach-box span.desc { border-top: 1px solid #000; display: inline-block; font-style: italic; font-weight: 600; line-height: 125%; padding: 10px 0 0; margin: 5px 0 0; font-size: 15px; }


/*----- Newsroom -----*/
#tfi #mid .mid-cnt #main .news-year {padding:0px;margin:0 0 25px;}
#tfi #mid .mid-cnt #main .news-year ul {font-size: 14px; padding:0; margin:0;}
#tfi #mid .mid-cnt #main .news-year ul li {list-style:none; display: inline-block;margin-right:12px;}
#tfi #mid .mid-cnt #main .news-year ul li:first-child {margin-left:0px;}
#tfi #mid .mid-cnt #main .news-year ul li:before {content: "|"; padding: 0 12px 0 0;}
#tfi #mid .mid-cnt #main .news-year ul li:first-child:before{content:""; display:none;}
#tfi #mid .mid-cnt #main .news-year ul li label {color: #111111; text-decoration: none;transition:color 0.25s;cursor:pointer;}
#tfi #mid .mid-cnt #main .news-year ul li label:hover {color: #ff6b00; text-decoration: underline;transition:color 0.25s;}
#tfi #mid .mid-cnt #main .news-year ul li label.active {color: #ff6b00; text-decoration: underline;transition:color 0.25s;}
#tfi #mid .mid-cnt #main .news-block{margin-bottom:50px;}
#tfi #mid .mid-cnt #main .news-block h4{font-size:15px;}
#tfi #mid .mid-cnt #main .news-block p.title{font-weight:600;margin-bottom:10px;}
#tfi #mid .mid-cnt #main .news-block p.title a{text-decoration:none;}
#tfi #mid .mid-cnt #main .news-block p.content{display:none}
/*--*/
#tfi #mid .mid-cnt #main .annual-reports .news-block{display:inline-block;vertical-align:top;}
#tfi #mid .mid-cnt #main .annual-reports .news-block.two{width:50%;vertical-align:top;}
#tfi #mid .mid-cnt #main .annual-reports .news-block.two p{margin:10px 0 5px;}
#tfi #mid .mid-cnt #main .annual-reports .news-block.two h4{margin:35px 0 0px;}
#tfi #mid .mid-cnt #main .annual-reports .news-block.two h4:first-child{margin:0px 0 0px;}
#tfi #mid .mid-cnt #main .annual-reports .news-block.one{width:40%;margin-right:5%}
#tfi #mid .mid-cnt #main .annual-reports .news-block.one img{width:300px;max-width:100%;}
/*--*/
#tfi #mid .mid-cnt #main .tab-content{display:none}
#tfi #mid .mid-cnt #main input[type=radio][name=tabs]{display:none;}
#tfi #mid .mid-cnt #main input[type=radio][name=tabs]:checked + .tab-content{display:block;}
#tfi #mid .mid-cnt #main input[type=radio][name=tabs].checked + .tab-content{display:block;}

@media screen and (max-width: 1336px) {


  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 120px; left: 4px; font-size: 17px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 175px; right: 3px; font-size: 17px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 80px; left: 0; font-size: 17px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 1px; right: 111px; font-size: 17px; }
}

@media screen and (max-width: 1280px) {

  #tfi #mid .mid-cnt #main .bod { width: 45%; }

  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 115px; left: 4px; font-size: 14px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 165px; right: 4px; font-size: 14px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 70px; left: 0; font-size: 14px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 95px; font-size: 14px; }
}


@media screen and (max-width: 1152px) {

  #tfi #mid .mid-cnt #subpanel { width: 100%; float: none; }
  #tfi #mid .mid-cnt #subpanel ul { padding: 20px 0px; text-align: center; font-size: 0px; }
  #tfi #mid .mid-cnt #subpanel ul li { display: inline-block; margin-left: 25px; font-size: 15px; }
  #tfi #mid .mid-cnt #subpanel ul li:before { content: "|"; padding: 0 25px 0 0; }
  #tfi #mid .mid-cnt #subpanel ul li:first-child { margin-left: 0px; }
  #tfi #mid .mid-cnt #subpanel ul li:first-child:before { content: ""; display: none; }

  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 110px; left: 4px; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 154px; right: 4px; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 60px; left: 0; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 86px; font-size: 12px; }
  #tfi #mid .mid-cnt #main .outreach-box { margin: 0 2% 60px !important; display: inline-block !important; width: 40%; }
}

@media screen and (max-width: 1024px) {
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 105px; left: 4px; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 145px; right: 4px; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 55px; left: 0; font-size: 12px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 75px; font-size: 12px; }
}




@media screen and (max-width: 960px) {
  #tfi #mid .mid-cnt #main .grants-box .grants-item { width: 90%; margin-left: 0 !important; margin-right: 0 !important; }
  #tfi #mid .mid-cnt #subpanel ul li { margin-left: 5px; }
  #tfi #mid .mid-cnt #subpanel ul li:before { content: "|"; padding: 0 5px 0 0; }
  #tfi #mid .mid-cnt #main .grants-table table { width: 60%; text-align: left }

  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 145px; left: 4px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 225px; right: 40px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 115px; left: 0; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 185px; font-size: 15px; }

  #tfi #mid .mid-cnt #main .outreach-box { margin: 0 auto 60px !important; display: block !important; width: 50%; }
}

@media screen and (max-width: 860px) {
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 140px; left: 4px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 215px; right: 45px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 110px; left: 0; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 180px; font-size: 15px; }
}

@media screen and (max-width: 800px) {
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-oth { top: 135px; left: 4px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sea { top: 205px; right: 30px; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-sa { bottom: 100px; left: 0; font-size: 15px; }
  #tfi #mid .mid-cnt #main .grants-box .grants-item.grants-right .geo-na { bottom: 0px; right: 160px; font-size: 15px; }
}
	
