@import url("/css/thumb.css");

.ddlPageCount			    {font-size:12px;}

#newslist					{list-style:none; padding:0; margin:0; width:100%;}
#newslist li				{width:100%; padding:0 0 15px 0; margin:0 0 15px 0; float:left; border-bottom:1px solid #DDD;}
#newslist li.last           {padding:0; margin:0; border:0;}

#newslist li div.image .thumb-container {float:right; width:20%;}
#newslist li div.info                   {padding:0; margin:0; float:left; width:75%;}
#newslist li div.infofull               {padding:0; margin:0; float:left; width:100%;}

#newslist li h2			    {padding:0; margin:0;}
#newslist li h2 a		    {color:#000;}
#newslist li p.date		    {padding:0 0 5px 0; margin:0; font-size:10px; color:#888;}
#newslist li p.date a	    {color:#888;}
#newslist li p.preamble	    {padding:3px 0 0 0; margin:0;}
#newslist li a			    {color:#4f4f4f; text-decoration:none;}
#newslist li a:hover	    {text-decoration:none;}

div.headerfooterlinkslast   {border-top:1px solid #ddd; padding-top:10px; margin-top:15px;}

#newsimages					{list-style:none; padding:0; margin:25px 0 0 0; width:165px; float:right;}
#newsimages li {
    margin: 10px 0;
}
#newsimages .image-description {
    margin-top: 2px;
    font-size:smaller;
}
#newsimages li a		    {display:block; height:100%; width:100%; background-repeat:no-repeat; background-position:center center; border-radius:3px; -moz-border-radius:3px; text-align:center;}
#newsimages li a img        {height:100%; width:auto;}
#newsimages li a:hover img  {background:url(/gfx/webbedit/zoom-big.png) center center no-repeat;}

.singlenews									{width:75%; float:left;}
.singlenews p.date, .singlenews-long p.date	{margin:0; padding:0 0 5px 0; color:#888;}
.singlenews h1, .singlenews-long h1			{margin:0 0 10px 0; padding:0;}
.singlenews h4, .singlenews-long h4			{margin:0 0 10px 0; padding:0; color:#222;}

.singlenews-long .top,
.singlenews .top {
    text-align:center;
}
    .singlenews-long .top > span,
    .singlenews .top > span {
        
        display: block;
        /*width: fit-content;*/
    }

    .singlenews-long .top .image,
    .singlenews .top .image {
        margin: 0 auto;
    }

    .singlenews-long .top .image img, 
    .singlenews .top .image img{
        width: 100%;

        /*max-height: 55vh;*/
    }

    .singlenews-long .top .text,
    .singlenews .top .text {
        text-align: left;
    }

.singlenews .img-container,
.singlenews-long .img-container {
    position: relative;
}

.singlenews .img-container .title-text,
.singlenews-long .img-container .title-text {
    position: absolute;
    bottom: -30px;
    margin: 20px;
    float: right;
    right: 0;
    left: 0;
} 


.share-news                                 {border:1px solid #eee; background-color:#f8f8f8; padding:10px 10px 2px 10px; margin:10px 0;}
.share-news .media                          {padding-bottom:8px;}
.back-to-news-list {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    width: 75%;
    float: left;
    font-size: max(16px, 1.1vw);
}

@media screen and (max-width: 860px)
{
    #newslist li div.info                   {width:75%;}
    #newslist li div.image .thumb-container {width:135px; height:135px; padding:3px;}
    table.headerfooterlinks                 {font-size:90%;}
    
    .singlenews								{width:100%; clear:both;}
    .back-to-news-list                      {width:100%;}
    
    #newsimages {
        padding:5px 0 0 0;
        margin:0 0 5px 0;
        width:auto;
        float:none;
        text-align:center;
        clear:both;
        border-top:1px solid #ccc;
        overflow: hidden;
    }
    #newsimages li a {background-size: contain;}
    

    #newsimages li {
        padding:0;
        margin:5px;
        height:150px;
        width:150px;
        float: left;
    }
}

@media screen and (max-width: 740px)
{
    #newslist li div.info                   {width:65%;}
    #newslist li div.image .thumb-container {padding:3px;}
}

@media screen and (max-width: 620px)
{
    /*#newslist li div.info                   {width:100%;}*/
    
    table.headerfooterlinks tr td a         {font-size:90%; text-decoration:none;}
    table.headerfooterlinks tr td select    {font-size:90%;}
}

@media screen and (max-width: 500px)
{
    #newsimages li				{height:90px; width:90px;}
    #newsimages li a:hover img  {background:url(/gfx/webbedit/zoom-small.png) center center no-repeat;}

    #newslist li div.image .thumb-container {
        float: none;
        width: 100%;
        height: 50%;
    }
    #newslist li div.info {width: 100%;}
    #newslist li {padding-bottom: 35px;}
}