/* UPDATED ON 01/15/2017 @ 06:08PM */

html { -webkit-text-size-adjust: 100%; }

#Page, #Menu, #Search { -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease;  transition: all 0.3s ease; }
#Page { display: block; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 2000; }

body { margin: 0px; padding: 0px; background-color: #FFFFFF; display: relative; }
div { font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 14px; color: #000000; }
form { margin: 0px; padding: 0px; }
img { width: 100%; height: auto; max-width: 100%; max-height: 100%; border: none; }

a { color: #3366CC; text-decoration: none; }
a:hover { text-decoration: underline; }

.Views { display: none; }

.Video { position: relative; padding-bottom: 56.25%; height: 0px; max-width: 100%; } /* 16:9 */	
.Video iframe { position: absolute; top: 0px;	left: 0px; width: 100%; height: 100%; }

/* DEFAULT MOBILE/SIZES ---------------------------------------------- */

.Container { display: block; max-width: 1200px; margin: 0px auto; }
.Content { padding: 10px; }
.Row { display: block; min-width: 300px; width: 100%; margin: 0px auto 15px auto; }
.Column { display: block; width: 100%; margin: 0px auto 15px auto; }

.MastheadContainer { display: block; width: 100%; margin: 0px auto 0px auto; }
.MastheadContent { }
.Masthead { display: table; min-width: 300px; width: 100%; margin: 0px auto 0px auto; border-bottom: solid 1px #ECECEC; }
#MenuButton, .Masthead .Left, .Masthead .Right, #SearchButton { display: table-cell; width: auto; height: 50px; vertical-align: middle; background-repeat: no-repeat; background-position: center center; }
#MenuButton { width: 50px; cursor: pointer; }
.Masthead .Left { text-align: center; }
.Masthead .Right { display: none; }
#SearchButton { width: 50px; cursor: pointer; }
.IconMenu { background-image: url(../Images/Icon-Menu-Gray.svg); }
.IconSearch {	background-image: url(../Images/Icon-Search-Gray.svg); }
.IconClose { background-image: url(../Images/Icon-Close-Gray.svg); }

#Menu { display: block; width: 250px; height: 100%; position: fixed; left: -250px; top: 0px; z-index: 1001; background-color: #333333; color: #FFFFFF; text-align: center; }
#Menu span { display: block; padding: 10px 2px; font-weight: bold; border-bottom: solid 1px #555555; }
#Menu span a { color: #FFFFFF; text-decoration: none; }

#Search { display: block; width: 250px; height: 100%; position: fixed; right: -250px; top: 0px; z-index: 1002; background-color: #333333; color: #FFFFFF; }
.SearchBox { display: block; width: 210px; margin: 0px auto; padding: 25px 0px 0px 0px; }
.SearchBox .TextField { display: block; width: 100%; text-align: center; margin: 0px auto 12px auto; }
.SearchBox .TextField input { width: 95%; height: 24px; padding: 5px; font-size: 14px; color: #999999; color: #666666; margin: 0px; text-align: center; }
.SearchBox .Button { display: block; width: 100px; height: 30px; text-align: center; margin: 0px auto 25px auto; cursor: pointer; background-color: #CCCCCC; background-repeat: no-repeat; background-position: center center; background-image: url(../Images/Icon-Search-Gray.svg);}
.SearchBox .Description { display: block; width: 100%; color: #8c99a9; text-align: center; }
.SearchBox .Description a { color: #CCCCCC; text-decoration: none; }

.FooterContainer { display: block; max-width: 1200px; margin: 0px auto; }
.FooterContent { padding: 10px; }
.Footer { display: display: block; min-width: 300px; width: 100%; margin: 0px auto; text-align: center; font-size: 11px; line-height: 12px; color: #999999; }

.Post { display: table; width: 100%; margin: 0px auto 10px auto; } /* container */
.Post .Pic { display: table-cell; min-width: 80px; width: 120px; vertical-align: top; padding-right: 10px; } /* image */
.Post .Pic img { }
.Post .Text { display: table-cell; width: auto; vertical-align: top; } /* text */
.Post .Text p { margin: 0px auto 10px auto; }

.MoreLink { display: block; padding: 0px; font-size: 14px; line-height: 16px; }
.MoreLink a { }

.SectionHead { margin: 0px 0px 15px 0px; font-size: 22px; line-height: 22px; }

.IndexTopStory { display: block; width: 100%; margin: 0px auto 15px auto; background-color: #000000; }
.IndexTopStory .Post { display: block; float: none; width: 100%; margin: 0px auto; position: relative; }
.IndexTopStory .Post .Pic { display: block; width: 100%; padding: 0px; margin: 0px; }
.IndexTopStory .Post .Pic img { margin-bottom: 10px;}
.IndexTopStory .Post .Text { display: block; position: absolute; left: 0px; bottom: 0px; padding: 25px 10px 10px 10px; color: #FFFFFF; margin: 0px; background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 65%); z-index: 1002; visibility: hidden; }
.IndexTopStory .Post .Text h2 { font-size: 18px; line-height: 21px; margin: 0px 0px 15px 0px; }
.IndexTopStory .Post .Text h2 a { color: #FFFFFF; text-decoration: none; }
.IndexTopStory .Post .Text h2 a:hover { color: #FFFFFF; }
.IndexTopStory .Post .Text .Info { color: #FFFFFF; }
.IndexTopStory .Post .Text .Info a { color: #FFFFFF; text-decoration: none; }
.IndexTopStory .Post .Text .Info a:hover { text-decoration: underline; }
.IndexTopStory .Post .Text .Desc { display: none; color: #FFFFFF; }

.ColLeft .IndexRecent .Post { border-bottom: solid 1px #ECECEC; }
.ColLeft .IndexRecent .Post .Pic { padding-bottom: 10px; }
.ColLeft .IndexRecent .Post .Text { padding-bottom: 10px; font-size: 14px; line-height: 16px; }
.ColLeft .IndexRecent .Post .Text .Categories { display: none; }
.ColLeft .IndexRecent .Post .Text h2 { font-size: 14px; line-height: 16px; margin: 0px 0px 10px 0px; }
.ColLeft .IndexRecent .Post .Text h2 a { color: #000000; text-decoration: none; }
.ColLeft .IndexRecent .Post .Text h2 a:hover { color: #3366CC; }
.ColLeft .IndexRecent .Post .Text .Info { font-size: 11px; line-height: 12px; }
.ColLeft .IndexRecent .Post .Text .Info a { color: #000000; }
.ColLeft .IndexRecent .Post .Text .Info a:hover { color: #3366CC; }
.ColLeft .IndexRecent .Post .Text .Desc { display: none; margin: 0px auto; }

.ColLeft .MoreLink { width: 100%; margin: 0px auto; text-align: center; font-size: 16px; line-height: 16px; outline: 1px solid #CCCCCC; outline-offset: -1px; clear: both; }
.ColLeft .MoreLink a  { text-decoration: none; padding: 15px 0px; display: block; width: 100%; }
.ColLeft .MoreLink a:hover  { background-color: #ECECEC; }

.ColRight .Featured { margin: 0px auto 30px auto; }
.ColRight .Featured .Post { border-bottom: solid 1px #ECECEC; }
.ColRight .Featured .Post:nth-child(2) { border-top: solid 1px #ECECEC; }
.ColRight .Featured .Post:nth-child(2) .Pic { padding-top: 10px; }
.ColRight .Featured .Post:nth-child(2) .Text { padding-top: 10px; }
.ColRight .Featured .Post .Pic { width: 80px; padding-bottom: 10px; }
.ColRight .Featured .Post .Text { padding-bottom: 10px; }
.ColRight .Featured .Post .Text h2 { font-size: 14px; line-height: 16px; margin: 0px 0px 10px 0px; }
.ColRight .Featured .Post .Text h2 a { color: #000000; text-decoration: none; }
.ColRight .Featured .Post .Text h2 a:hover { color: #3366CC; }
.ColRight .Featured .Post .Text .Info { font-size: 11px; line-height: 12px; margin-bottom: 0px; }
.ColRight .Featured .Post .Text .Info a { color: #000000; }
.ColRight .Featured .Post .Text .Info a:hover { color: #3366CC; }

.ColRight .AltNewsLinks { margin: 0px auto 30px auto; }
.ColRight .AltNewsLinks .Post { border-bottom: solid 1px #ECECEC; }
.ColRight .AltNewsLinks .Post .Text { padding-bottom: 10px; }
.ColRight .AltNewsLinks .Post .Text h2 { font-size: 14px; line-height: 16px; margin: 0px 0px 10px 0px; }
.ColRight .AltNewsLinks .Post .Text h2 a { text-decoration: none; }
.ColRight .AltNewsLinks .Post .Text h2 a:hover { color: #3366CC; }
.ColRight .AltNewsLinks .Post .Text .Info { font-size: 11px; line-height: 12px; margin-bottom: 0px; }
.ColRight .AltNewsLinks .Post .Text .Info a { color: #000000; }
.ColRight .AltNewsLinks .Post .Text .Info a:hover { color: #3366CC; }

/* Post Page ------------------------------------------------------------ */

.PostTitle { display: block; width: auto; margin: 0px auto 15px auto; }
.PostTitle h1 { font-size: 24px; line-height: 26px; margin: 0px; }
.PostDesc { display: block; width: 100%; margin: 0px auto 15px auto; font-size: 14px; line-height: 16px; }
.PostInfo { display: block; width: auto; margin: 0px auto 15px auto; }
.PostPic { display: block; width: auto; margin: 0px auto 15px auto; padding-bottom: 15px; border-bottom: solid 1px #ECECEC; }
.PostPic .Pic { display: block; width: auto; margin: 0px auto 5px auto; }
.PostPic .Pic img { }
.PostPic .Caption { display: block; width: 100%; margin: 0px auto; }
.PostPic .Caption p { margin-bottom: 0px; }
.PostArticle { display: block; width: 100%; margin: 0px auto 15px auto; font-size: 16px; line-height: 22px; }
.PostArticle h1 { font-size: 24px; line-height: 26px; margin: 18px auto; }
.PostArticle h2 { font-size: 22px; line-height: 24px; margin: 18px auto; }
.PostArticle h3 { font-size: 20px; line-height: 23px; margin: 18px auto; }
.PostArticle h4 { font-size: 19px; line-height: 22px; margin: 18px auto; }
.PostArticle h5 { font-size: 17px; line-height: 22px; margin: 18px auto; }
.PostArticle img { display: block; width: auto; margin-left: auto; margin-right: auto; }   
.PostTags { display: block; width: 100%; margin: 0px auto 15px auto; padding-bottom: 15px; border-bottom: solid 1px #ECECEC; }
.PostComments { display: block; width: 100%; margin: 0px auto 15px auto; padding-bottom: 15px; border-bottom: solid 1px #ECECEC; }

.ColLeft .Related { margin: 0px auto 15px auto; }

.ColLeft .Related .Post { border-bottom: solid 1px #ECECEC; }
.ColLeft .Related .Post:nth-child(1) { border-top: solid 1px #ECECEC; }
.ColLeft .Related .Post:nth-child(1) .Pic { padding-top: 10px; }
.ColLeft .Related .Post:nth-child(1) .Text { padding-top: 10px; }
.ColLeft .Related .Post .Pic { width: 80px; padding-bottom: 10px; }
.ColLeft .Related .Post .Text { padding-bottom: 10px; }
.ColLeft .Related .Post .Text h2 { font-size: 14px; line-height: 16px; margin: 0px 0px 10px 0px; }
.ColLeft .Related .Post .Text h2 a { color: #000000; text-decoration: none; }
.ColLeft .Related .Post .Text h2 a:hover { color: #3366CC; }
.ColLeft .Related .Post .Text .Info { font-size: 11px; line-height: 12px; margin-bottom: 0px; }
.ColLeft .Related .Post .Text .Info a { color: #000000; }
.ColLeft .Related .Post .Text .Info a:hover { color: #3366CC; }

/* LARGE MOBILE ========================================================================*/  

@media (min-width: 481px) {

.IndexTopStory { margin-bottom: 30px; }
.IndexTopStory .Post .Text { padding: 20px; }
.IndexTopStory .Post .Text h2 { font-size: 24px; line-height: 26px; }
.IndexTopStory .Post .Text .Info { font-size: 12px; line-height: 14px; }

.IndexColLeft .SectionHead { margin-bottom: 30px; }

.ColLeft .IndexRecent .Post { margin-bottom: 20px; }
.ColLeft .IndexRecent .Post .Pic { width: 180px; padding: 0px 20px 20px 0px; }
.ColLeft .IndexRecent .Post .Text { padding-bottom: 20px; }
.ColLeft .IndexRecent .Post .Text h2 { font-size: 18px; line-height: 21px; }
.ColLeft .IndexRecent .Post .Text .Info { font-size: 12px; line-height: 14px; }

.ColRight .Featured .Post .Text h2 { font-size: 18px; line-height: 21px; }
.ColRight .Featured .Post .Text .Info { font-size: 12px; line-height: 14px; }
.ColRight .AltNewsLinks .Post .Text h2 { font-size: 18px; line-height: 21px; }
.ColRight .AltNewsLinks .Post .Text .Info { font-size: 12px; line-height: 14px; }

.PostTitle h1 { font-size: 28px; line-height: 32px; }
.PostDesc { font-size: 16px; line-height: 18px; }
.PostInfo { font-size: 14px; line-height: 16px; }
.PostTags { font-size: 14px; line-height: 16px; }

}

@media (min-width: 641px) {

.IndexTopStory .Post .Text h2 { font-size: 32px; line-height: 34px; }
.IndexTopStory .Post .Text .Desc { display: block !important; font-size: 14px; line-height: 16px;; }

.ColLeft .IndexRecent .Post .Pic { width: 320px; padding: 0px 30px 30px 0px; margin: 0px; }
.ColLeft .IndexRecent .Post .Text { padding: 0px 0px 30px 0px; margin: 0px; }
.ColLeft .IndexRecent .Post .Text .Categories { display: block; }
.ColLeft .IndexRecent .Post .Text h2 { font-size: 24px; line-height: 26px; }
.ColLeft .IndexRecent .Post .Text .Desc { display: block; margin-bottom: 10px; }

.PostTitle h1 { font-size: 38px; line-height: 41px; }
.PostDesc { font-size: 20px; line-height: 23px; }
.PostInfo { font-size: 16px; line-height: 18px; }
.PostArticle img { margin: 0px; }

}

/* TABLET (Landscape) ====================================================================*/ 

@media (min-width: 769px) {

body { margin: 0px 0px; padding: 0px; }

#Page { position: static; }

.Container { min-width: 1024px; }
.Content { padding: 30px; }
.Row { display: table; }

.MastheadContainer { min-width: 1024px; max-width: 1200px; }
.MastheadContent { padding: 0px 30px; }
.Masthead { margin-bottom: 0px; }
#MenuButton, #SearchButton { display: none; }
.Masthead .Left { width: auto; height: auto; text-align: left; }
.Masthead .Left img { width: auto; }
.Masthead .Right { width: auto; display: table-cell; height: auto; }

.NavBarContainer { display: block; min-width: 1024px; width: 100%; max-width: 1200px; margin: 0px auto 15px auto; }
.NavBarContent { display: block; margin: 0px auto; padding: 0px 30px; }
.NavBar { display: table; width: 100%; margin: 0px auto; border-bottom: solid 1px #ECECEC; }
#Menu, #Search { display: table-cell; height: 40px; vertical-align: middle; position: static; }
#Menu { width: auto; text-align: left; background-color: #FFFFFF; }
#Menu span { display: inline; padding: 0px 15px 0px 0px; color: #999999; border-bottom: none 0px; font-size: 14px; line-height: 14px; }
#Menu span a { color: #999999; }
#Menu span a:hover { color: #999999; text-decoration: underline; }

#Search { width: 300px; text-align: right; padding: 0px; margin: 0px; background-color: #FFFFFF; }
.SearchBox { display: table; width:100%; padding: 0px; }
.SearchBox .TextField { display: table-cell; width: auto; height: 24px; background-color: #FFFFFF; vertical-align: middle; border: solid 1px #CCCCCC; border-right: none 0px; }
.SearchBox .TextField input { width: 95%; height: 20px; padding: 0px; font-size: 12px; border: none 0px; text-align: left; }
.SearchBox .Button { display: table-cell; vertical-align: middle; width: 30px; height: 24px; }
.SearchBox .Description { display: none; }

.FooterContainer { min-width: 1024px; }
.FooterContent { padding: 10px 30px 30px 30px; }

.Row:nth-last-child(1) { margin-bottom: 0px; }

.Column { display: table-cell; vertical-align: top; width: auto; }

.ColLeft { padding-right: 45px; border-right: solid 1px #ECECEC; }
.ColRight { width: 300px; padding-left: 45px; }

.ColLeft .IndexRecent .Post .Pic { width: 250px; }
.ColRight .Featured .Post .Text h2 { font-size: 14px; line-height: 16px; }
.ColRight .Featured .Post .Text h2 a { color: #000000; }
.ColRight .AltNewsLinks .Post .Text h2 { font-size: 14px; line-height: 16px; }
.ColRight .AltNewsLinks .Post .Text h2 a { color: #000000; }

.PostDesc { font-size: 15px; line-height: 17px; }
.PostInfo { font-size: 14px; line-height: 16px; }

.ColLeft .Related { display: block; width: 100%; border-bottom: solid 1px #ECECEC; }
.ColLeft. Related .Posts { display: table; width: 100%; }
.ColLeft .Related .Post { display: table-cell; width: 25%; vertical-align: top; border-bottom: none 0px; }
.ColLeft .Related .Post:nth-child(1) { border-top: none 0px; }
.ColLeft .Related .Post:nth-child(1) .Pic { padding-top: 0px; }
.ColLeft .Related .Post:nth-child(1) .Text { padding-top: 0px; }

.ColLeft .Related .Post .Pic { display: block; width: auto; padding: 0px 10px 0px 0px; margin: 0px auto 5px auto; }

.ColLeft .Related .Post .Text { display: block; width: auto; padding: 0px 10px 15px 0px; margin: 0px auto; }
.ColLeft .Related .Post .Text h2 { font-size: 12px; line-height: 14px; }
.ColLeft .Related .Post .Text .Info { }

}

/* DESKTOP =============================================================================*/  

@media (min-width: 1200px) {

.Container { min-width: 1200px; }
.Content { padding: 30px 45px 45px 45px; }

.MastheadContainer { min-width: 1200px; }
.MastheadContent { padding: 0px 45px 0px 45px; }
.Masthead { }

.NavBarContent { padding: 0px 45px; }

.FooterContainer { min-width: 1200px; }
.FooterContent { padding: 10px 45px 45px 45px; }

.IndexTopStory .Post .Text { padding: 40px; }

.ColLeft .IndexRecent .Post .Pic { width: 280px; }
.ColLeft .IndexRecent .Post .Text h2 { font-size: 28px; line-height: 32px; }

}
#user-info-area{
    width: 100%;
    padding: 15px;
    background-color: rgba(139, 195, 74, 0.39);
    margin-bottom: 20px;
    box-sizing: border-box;
}