@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap'); 
font-family: 'Abril Fatface' , 
*/


@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;700&display=swap');

:root {
  --blue: #00aeef;
}

html, body{width:100%; height: 100%}
body{
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	margin:0px;
	padding:0px;
	background-color:#efefef;
}
a{color:#000; text-decoration:none}
a:hover{opacity:0.8}
img{border:0px; max-width: 100%}
div{box-sizing: border-box}
h1, h2, h3{font-family: 'Bai Jamjuree', sans-serif; font-weight:700}
h1{font-size:32px}
h2{font-size:22px}
h3{font-size:18px; padding:0px; margin:0px}

input, textarea, select{padding:6px; border:1px solid #cccccc}
textarea{font-family: 'Open Sans', sans-serif;}

#content p a{color:var(--blue); text-decoration: underline}

.errorlist{list-style: none; padding: 15px; margin: 20px 0; color: red; background-color: lavenderblush; border:1px solid red; border-radius:3px}
.errorlist li{padding: 0px; margin: 10px 0}

#top{position: fixed; bottom:60px; right:-40px; font-size:40px; cursor: pointer; opacity:0.4; transition:all 500ms ease; z-index: 1000; color: #9099a7;}
#top:hover{opacity: 1}
#top.show{right:20px !important}

.hamburger{width:30px; cursor:pointer; margin: 0 10px}
.hamburger:hover{opacity: 1}
.hamburger hr{border:2px solid #ccc; border-radius:4px; margin: 4px 0}

#floater{position:fixed; top:-100px; left:0px; width:100%; background-color: #000; color:#FFFFFF; z-index: 1000; box-shadow:0 1px 10px #000; transition:all 800ms ease}
#floater a{color: #fff}
#floatinner{display: flex; vertical-align: middle; align-items: center; margin: 0 auto; max-width:1200px}
#floatinner > div{flex-grow:1}
#floatinner > div:first-of-type{padding-top: 3px}
#floatinner > div:last-of-type{text-align: right}
#floatinner > div img{height: 40px; margin: 4px; display: inline-block}
#floater.show{top:0px}

#progbar{background-color: #666; transition:all 100ms ease}
#progbar > div{background-color: #27aae3; width:1%; height:6px}

.blackbar{background-color: #000}
#topbar{display:flex; background-color: #000; color:#fff; vertical-align: middle; align-items: center; font-size:14px; font-family: 'Bai Jamjuree', sans-serif; font-weight:normal; max-width: 1200px; margin: 0 auto; padding: 8px 0}
#topbar > div{width:50%; flex-grow:1}
#topbar > div:first-of-type{padding-left: 5px}
#topbar > div:last-of-type{text-align: right; padding-right: 5px}
#topbar a{color: #fff}

#container{max-width:1200px;margin:0 auto;}

#masthead{display:flex; margin: 0 auto; max-width: 1200px; vertical-align: middle; align-items: center; background-color: #fff}
#masthead > div{flex-grow: 1}
#masthead > div:first-of-type img{max-width: 210px; display: inline-block; margin: 5px}
#masthead > div:first-of-type{width:200px; max-width:200px}
#masthead > div:nth-of-type(2){ text-align: right; padding: 0 30px 0 0; font-size:20px}
#masthead #searchterm{width:100% !important; max-width: 400px; border:2px solid #000}
#masthead > div:nth-of-type(3){ text-align: center; max-width: 120px; background-color: #000; color:#fff !important; padding:4px 20px; font-weight: 700; border-radius:2px}
#masthead > div:nth-of-type(3) a{color: #fff}
#masthead > div:last-of-type{text-align: right}

.socials{max-width:110px; font-size:20px; padding: 0 10px 0 0}
.socials i{margin: 0 0 0 10px; color: #666}
.socials a:nth-of-type(1) i{color: #4267b2}
.socials a:nth-of-type(3) i{color: orange}
.socials a:nth-of-type(2) i{color: rgb(29, 161, 242)}

.greybar{background: rgb(2,0,36);background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(109,143,150,1) 100%); padding: 10px 0 6px}

#upperAdverts{margin:0 auto; max-width: 1200px; text-align: center}
#upperAdverts img{max-width: 728px; width:100%; height:auto}

#topBanners{display: flex}
#topBanners > div{flex-grow:1; border:2px dotted red}
#topBanners > div:first-of-type{}
#topBanners > div:last-of-type{text-align: right}

#doublebanner{margin-bottom:10px;}
#doublebanner img{margin-bottom:10px}

#mainnav.nav{display:flex; flex-wrap: nowrap; max-width: 1200px; margin: 0 auto; text-transform: uppercase; font-size:14px; background-color: #fff}
#mainnav.nav > div{flex-grow:1; padding:0 3px 0 0; background-color: #fff}
#mainnav.nav a{display:block; width:100%; text-align: center; background-color: #000; color: #fff; padding:6px 0; font-weight:700} 
#mainnav.nav > div:last-of-type{padding-right:0px}
#mainnav.nav a:hover{} 

#mobnavbutton{width:50px; height: 50px; border:3px solid #000}
#mobnavbutton > div{border:3px solid #000; margin: 5px 0}

#mobnav{position: fixed; top:55px; right:20px; z-index: 1010; transition:all 300ms ease; background: #fff; display:none; width:200px}
#mobnav.nav{flex-wrap: nowrap; flex-direction: column}
#mobnav.nav > div{}
#mobnav.nav a{text-align: left; padding: 8px 30px; display: block; padding: 5px 15px; border-bottom:1px solid #efefef}
#mobnav.nav > div:last-of-type a{border:0px}
#mobnav.active{right:0px; display:block}

#thedate{ float:right; padding-top:6px; padding-right:10px}

#content{background-color: #fff; padding: 30px; line-height: 1.5rem; position: relative; font-size:18px; min-height: 500px}

#footer{background-color: #000; color: #ccc; padding: 20px; font-size:0.8rem; margin: 30px 0 0}
#footer a{color: #fff}
#footer a:hover{opacity:0.8}

.footerflex{display:flex; align-items: stretch; max-width: 1200px; margin: 0px auto 20px}
.footerflex > div{flex-grow:1}
.footerflex > div:last-of-type{text-align: right; max-width:120px; text-align: right}

.footermenu{padding: 30px 0 0}
.footermenu a{ display: inline-block; padding-right:15px; margin-left: 15px; border-right:1px solid #333}
.footermenu a:first-of-type{margin: 0px}
.footermenu a:last-of-type{border: 0px}
.footersocials{padding: 0px margin:0px}

#banner{ text-align:center; margin-bottom:10px}
#mpu{margin-bottom:10px; text-align:center}


.hashtag{background-color:#000; color: #fff; position: absolute; top:12px; left:12px; z-index: 10; text-transform: uppercase; font-size:12px; font-weight:700; padding: 1px 5px; transition:all #300ms ease}
.hashtag:hover{opacity: 1; color: #ccc}
#tagcloud .hashtag{position: relative; top:inherit; left: inherit}

.share{clear:both; padding: 10px 0; background-color: #efefef; margin: 30px 0; border-radius:4px}

.hashtags{display:flex; margin: 0 0 30px; flex-wrap: wrap}
.hashtags > .hashtag{position: relative; margin: 0 5px 5px 0}
.hashtags a{color: #fff}
#content .hashtags{margin:0px}

.newscols{}
.newscols > div{}
.newscols > div:first-of-type{padding-right: 20px}
.newscols > div:last-of-type{max-width:330px; min-width:330px; text-align:center; background-color: #efefef; padding: 15px 0}
.newscols > div:last-of-type img{margin-bottom: 15px}

#searchbox{}
#searchbox input{}

#advsearchform{margin: 0 0 40px}
#advsearchform > div{padding: 5px 15px; border-radius:2px; background-color: #efefef; margin: 4px 0}
#advsearchform .button{margin: 10px 0 0; padding: 10px 30px}
#advsearchform input[type=text]{width:100%; max-width: 400px; padding: 5px !important}
#advsearchform label{font-weight:700; padding-right: 15px}

.searchformflex{display:flex}
.searchformflex > div{flex-grow: 1}
.searchformflex > div:first-of-type{max-width:135px; font-weight:700}

.button{display:inline-block; padding:6px 15px; border:0px;  border-radius:2px; background-color:#00aeef; color:#FFFFFF !important; font-size:14px; font-weight:700; cursor:pointer; text-transform: uppercase; text-decoration: none !important}
.button:hover{ text-decoration:none !important; background-color:#666666 !important; text-decoration: none}

#loginbox{}
#loginbox th{text-align:right}
#loginbox td{ padding:2px; font-size:11px}
#loginbox input{ width:96%}
.registerlinks{font-size:10px; text-align:center; padding:0px}

.advert:hover{opacity:1}

/* Legacy */
.red{color:#990000}
.floatright{float:right; margin-left:10px; margin-bottom:5px; border:3px solid #E6E6E6}
.floatright img{border:1px solid #0066CC}
.floatleft{float:left; margin-right:15px; margin-bottom:100px}

.lowerAdFlex{margin: 40px 0}
.lowerAdFlex > div{flex-flow: 1; width:50%}
.lowerAdFlex > div:last-of-type{text-align: right}

.menusection{
	width:134px;
	padding:3px; 
	margin-left:auto; 
	margin-right:auto; 
	background-color:#FFFFFF;
	text-align:left;
}

.datefield{color:#999999; font-size:10px}
.smallplain{font-size:10px}
.small{font-size:12px}
.medium{font-size:14px}
.large{font-size:18px}
.grey{color:#999999}

.share{
	font-size:x-small;
	text-align:center;
	padding:30px
}

.share .delicious a{background: url('/image_gen/delicious.gif') no-repeat left center;}
.share .digg a{background: url('/image_gen/digg.gif') no-repeat left center;}
.share .technorati a{background: url('/image_gen/technorati_icon.gif') no-repeat left center;}
.share .blinklist a{background: url('/image_gen/blinklist.gif') no-repeat left center;}
.share .furl a{background: url('/image_gen/furl.gif') no-repeat left center;}
.share .reddit a{background: url('/image_gen/reddit.gif') no-repeat left center;}
.share .newsvine a{background: url('/image_gen/newsvine.gif') no-repeat left center;}
.share .slashdot a{background: url('/image_gen/slashdot.gif') no-repeat left center;}
.share .emailfriend a{background: url('/image_gen/icon_email.gif') no-repeat left center;}
.share .printable a{background: url('/image_gen/icon_print.gif') no-repeat left center;}
.share .pdf a{background: url('/images/icon_pdf.gif') no-repeat left center;}
.share .scrollup a{background: url('/image_gen/icon_up.gif') no-repeat left center;}
.share .scrollup{
	border: none;
}
.share ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	margin-left:100px;
}
.share li{
	display: block;
	float: left;
	padding: 0 5px;
	margin: 2px 0;
	border-right: 1px solid #CCCCCC;
	font-size:x-small;
}
.share li a{
	display: block;
	line-height: 16px;
	padding: 0 0 0 20px;
}
.floatimage{float:right; margin-left:15px; margin-bottom:15px}
.floatimage img{border:1px solid #999999; box-shadow: 2px 2px 3px #ccc;}

.flex{display:flex}
.flex > div{flex-grow:1}

.mainHeadline{margin: 0 0 20px}
.mainHeadline > div:last-of-type{width:100%; max-width:320px; background: rgb(2,0,36);background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(109,143,150,1) 100%); padding: 10px 30px 0}
.mainHeadline > div:last-of-type #mpu{margin: 0px}

.newslist{display:flex; flex-wrap:wrap; column-gap: 10px}
.newslist > div{max-width:24%}
.newsListItem{position:relative}
.newsListItem .pad{padding:0 15px 30px}
.newsListItem h2{}
.newsthumb{display: block; width:99%; max-width: 99%; padding-bottom: 56%; background-color: #efefef; transition:all 300ms ease; background-size: cover; background-position: center}
.newsthumb:hover{opacity:1; filter: grayscale(100%)}

.sectionlist{display:flex; flex-wrap:wrap; column-gap: 10px}
.sectionlist > div{flex-basis:30%; flex-grow: 1}

#leaderboardBottom{text-align: center; padding: 30px 0 0}
#leaderboardBottom img{width:100%; max-width: 728px; height: auto}

.fullimage{padding-bottom:56%; background-size: cover; background-position: top center; position: relative; margin: 0 0 30px; background-color: #efefef}

.mainstory{padding-bottom: 56%; width:100%; max-width: 100%; background-size: cover; background-position: center; position: relative; background-color: #efefef}
.mainstory > div{position:absolute; bottom:0px; left:50px; width:50%; background-color: rgba(255,255,255,0.9); padding: 30px}

.pubdate{color: #9099a7; text-transform: uppercase; font-size:12px; padding: 10px 0 0}

.listItemsSmall{display:flex; flex-wrap: wrap}
.listItemsSmall > div{border:1px solid #ccc; padding: 12px; margin: 0 5px 15px 0px;  background-color: #fff; flex-grow:1; flex-basis:18%}
.listItemsSmall h3{padding: 15px 0}

.whitebox{background-color:#fff; padding: 15px; margin: 20px 0; box-sizing: content-box}

.mostreadlist{display:flex; flex-wrap: wrap}
.mostreadlist > div{border:1px solid #ccc; padding: 12px; margin: 0 5px 15px 0px;  background-color: #fff; flex-grow:1; flex-basis: 25%}
.mostreadlist h3{padding: 15px 0}

.newsheadline{position:absolute; left:90px; bottom: 0px; background-color: rgba(255,255,255,0.9); padding: 30px; max-width: 400px}
.newsheadline h1{line-height: 1.1em; padding: 0px; margin: 0px; font-size:40px}
.imageCaption{background-color: rgba(255,255,255,0.5); padding:4px 15px; position: absolute; bottom:0px; right:0px}

.author{color:#9099a7; text-transform: uppercase; padding: 15px 0 0; font-size:0.8rem}

#breadcrumbs{clear:both; margin-bottom:20px; color:#666; font-size:14px}

.formtable th{ text-align:right; font-size:11px; padding-right:10px}

.pagelinks{clear:both; padding-bottom:40px; font-size:12px}
.pagelinks a{padding-left:8px; padding-right:8px; display:block; min-width:5px; margin:2px; float:left; border:1px solid silver; border-radius:2px}
.pagelinks a:hover{opacity: 1; background-color: #efefef}
.pagelinks .small{color: #666; text-transform: uppercase}
.pagelinks .active{background-color: #000; color: #fff}
.pagelinks .active:hover{opacity: 1}

.infotable{}
.infotable th, .infotable td{ text-align:left; padding:4px 10px 4px 5px; border-bottom:1px dotted #ebebeb}

.pollCols{display:flex; align-items: center}
.pollCols > div{flex-grow:1}
.pollCols > div:first-of-type{padding-right:20px}
.pollCols > div:last-of-type{max-width:310px; text-align: right}

.pollflex{margin: 0 0 5px; background-color: #efefef; border-radius:3px; padding: 10px}
.pollflex > div{display:flex; align-items: center}
.pollflex > div > div:first-of-type{padding-right: 10px}
.pollflex input[type=radio]{width:22px; height: 22px}
.pollQ{color: var(--blue); padding-bottom: 20px}

.pollbar{background-color: var(--blue); border-radius:2px; color: #fff; font-weight:700; padding: 4px; margin: 0 0 15px}
.pollbar > div{}

.pollqh{padding: 3px 0px; margin: 3px 0}

.credit{font-size:10px; padding-top: 40px; text-align: center}
.credit a{color: #333 !important}

.twitflex{display: flex; justify-content: space-between; align-items:stretch}
.twitflex > div{width:100%}
.twitflex > div:last-of-type{max-width:400px; padding: 0px 0 0 15px; max-height: 1600px; overflow: auto; margin-top: 20px}

#feedbox{height:700px; overflow:auto; padding:15px 0 15px 15px}

@media (max-width: 1200px) {
	#col_right{padding-left: 10px}
}
@media (max-width: 1000px) {
	#mainnav.nav{display:none}
	.blackbar{display:none}
	#masthead{display: none}
	#floater{top:0px}
	#content{padding-top: 30px}
	#searchbox{display:none}
	.mostreadlist > div{flex-basis: 30%}
	.sectionlist > div{flex-basis:50% !important}
	.greybar{ background: none; padding-top: 70px}
	.twitflex{flex-direction: column}
	.twitflex > div{max-width:100% !important; padding: 0px}
	.twitflex > div:last-of-type{max-height: 600px}
}
@media (max-width: 800px) {
	.mainHeadline{flex-direction:column}
	.mainHeadline > div{max-width:100%; min-width: 100%; width:100%}
	.mainHeadline > div:last-of-type{text-align: center}
	.mainstory{padding: 20px}
	.mainstory > div{position: relative; margin: 0px; width:100%; top:inherit; left: inherit; background-color: rgba(255,255,255,0.5);}
	.newslist > div{max-width: 50%; width:50%}
	
	.newscols{flex-direction: column; margin-bottom: 30px}
	.newscols > div{min-width:100% !important; max-width:100% !important}
	
	
	.newsheadline{padding-left: 0px}
	.newsheadline h1{font-size:30px}
	.newsheadline{top:auto; bottom:-200px; left:0px; width:100%; max-width: 100%; min-width: 100%}
	.fullimage{margin-bottom: 200px}
	.imageCaption{display: none}
	
	.lowerAdFlex{flex-direction: column}
	.lowerAdFlex > div{width:100%; padding: 10px; text-align: center !important}

	.footerflex{flex-direction: column}
	.footerflex > div{width:100%; max-width:100%; min-width:100%; text-align: left !important; padding: 0px}
	.footerflex > div:last-of-type{padding: 20px 0 0}
	.footersocials{padding:0px; margin:0px; max-width:inherit}
	.footersocials i{margin:0 15px 0 0}
	.footersocials a{}
	
	.listItemsSmall > div{flex-basis:30%; max-width:30%}
	.listItemsSmall h3{padding: 15px 0}
	.pollCols{flex-direction: column}
	.pollCols > div{width:100%; max-width:100%; padding: 0 0 20px}
} 
@media (max-width: 600px) {
	.searchformflex{flex-direction: column}
	.searchformflex > div{width:100%; max-width:100%; padding-bottom: 10px}

	.newslist > div{max-width: 100%; width:100%}
	.sectionlist{flex-direction: column}
	.sectionlist > div{max-width: 100%; width:100%}
	.mostreadlist > div{flex-basis: 47%}
	.listItemsSmall > div{flex-basis:48%; max-width:50%}
	
	.footermenu a{display: block; padding: 0px; margin: 0px}
	.footermenu a::before{content: '• '}
}