/* General Styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, /* sup, */ tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
/* overflow:hidden; */
}

html {
	font-size: 13pt;
}

#allscreen {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}

.blank-side {
  flex:1 1 auto;
  display: none;
}
 
#side-ad2 {
	display:none;
	margin-top:100px;
}

#side-ad1 {
	display:none;
	margin-top:calc(133vh) ;
}

#main {
    flex:0 0 auto;
	background-color: #fff;
}

body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; /* */
background-color: #ffffff;
color: #1a1a1a;
min-width: 320px;
margin: 0;
}

a {
	text-decoration: none;
	color: #1a1a1a;
}

a:hover, a h1:hover, a h2:hover {
	/*
	text-decoration:underline;
	*/
	color: #03cdff;
}

h1, h2, h3 {
color: #3c3e51;
font-family: 'Roboto Slab', sans-serif; /* */
line-height: 1.2;
display: inline-block;
}

.topheader {
background: url(images/header_bg.jpg); /* */
/* background-color: #3c3e51; */
overflow: auto;
width: 100%;
}

#logo {
float: left;
margin: 12px 4px 12px 18px;
}

#logos {
float: left;
margin-bottom: 14px;
margin-top: 14px;
}

#logos1 {
	margin-left:16px;
}

#logos2 {
	margin-left:32px;
}

#tagline {
float: left;
color: #03cdff;
letter-spacing:1px;
margin: 16px 20px 0px 6px;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
border-left: 1px;
border-color: #03cdff;
border-style: solid;
padding-left: 8px;
line-height: 1.15;
font-size: 13px; /* 15px; */
letter-spacing: 4px;
display:none;
}

#topmenu {
background-color: #03cdff;
overflow: auto; /* */
/* width: 100%; /* */
padding: 4px 4px 4px 18px;
font-family: 'Roboto Slab', sans-serif; 
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
line-height: 1rem;
}

#topmenu ul {
    list-style-type:none;
    margin:0;
    padding:0;
 /*   position: absolute; */
}
#topmenu li {
    display:inline-block;
    float: left; /* */
    margin-right: 1rem;
}

#topmenu li a {
	color:white;
}

#topmenu #topmenu_sports,
#topmenu #topmenu_life,
#topmenu #topmenu_local,
#topmenu #topmenu_opinion {
display: none;	
}

#topmenu #moremenu {
	display: inline-block;
	font-size: 1.5rem;
	margin-top: -2px;
}

#page-wrapper {
/* min-width:1000px; */
margin-top: 1.5rem;
}

/* These are for when headline titles are partly cyan coloured */
.title_highlight {
color:#03cdff;
}

/*
.title_highlight:hover {
color:#3c3e51;
}
*/

#footer-btm {
clear: both;
width: auto;
}

.copyright {
margin-top: 3rem;
/* font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; */
color: #aaa;
font-size: 14px;
}

/* comments stuff common to all */
.comments, .blank-comments {
position:relative;
font-family: 'Roboto Slab', sans-serif; 
/* background: url(images/comments30a.png) no-repeat;  */
background-repeat: no-repeat;
background-size: 18px;
background-position: right top;
color: #03cdff !important;
font-size: 0.7rem;
text-align: left;
font-weight: 700;
float:right;
}

.comments {
background-image: url(images/comments30a.png); 
}

.blank-comments {
background-image: url(images/comments30d.png); 
}

.comments2, .blank-comments2:hover {
color: #03cdff;
font-size: 12px;
}

.blank-comments2 {
color: #8a8a8a;
font-size: 12px;
}





#article-right .article-right-ad, #article-right .article-right-ad2 {
/* margin: 1.2rem 20px 1.2rem 18px; SSS */
margin: 0 20px 1.2rem 18px;
}


#article-right .content h1, .main-section .separator a {
background-color: #03cdff;
color: white;
letter-spacing:1px;
margin-bottom: 10px;
margin-top: 4px;
padding: 4px 8px 4px 8px;
line-height: 1.1;
display: inline-block;
width: 100%;
}

#article-right .content a h1:hover {
	color: black;
}

#article-right .content ol {
list-style: none;
}

#article-right .content ol li {
text-decoration: none;
counter-increment: li;
vertical-align: text-top;
}

#article-right .content ol li .top_number {
display: inline-block;
vertical-align: text-top;
width:32px;
background-color: #03cdff;
color: white;
text-align: center;
font-family: 'Roboto Slab', sans-serif;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 10px;
}

#article-right .content ol li a {
text-decoration: none;
display: inline-block;
padding-left: 10px;
padding-bottom: 10px;
vertical-align: text-top;
color: #1a1a1a;
width: calc(100% - 32px);
font-size:1rem;
}


/*

#article-right .content h2 {
font-size: 0.9rem;
display:inline;
line-height:1.3;
}

#article-right .content h2 img {
	margin-left: 4px;
	width: 16px;
	height: 16px;
}

#article-right .content h3 {
font-size: 0.9rem;
display:block;
line-height:1.3;
text-align:right;
}

#article-right .content h3 sup {
font-size: 1.8rem;
color: #03cdff;
vertical-align: -0.1rem;
}

#article-right .content .article-container {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 0.8rem;
background-color:#f4f4f6; 
margin: 2px 0px 22px 0px;
padding-bottom: 10px; 
display:block; 
}

#article-right .content .article-container .text-container {
padding: 10px 10px 0px 12px;
}

#article-right .content a:visited, #article-right .content a {
color: #1a1a1a;
}

#article-right .content .article-container p {
margin: 4px 12px 0px 12px;
}

#article-right .comments {
font-family: 'Roboto Slab', sans-serif;
background: url(images/comments30a.png) no-repeat; 
background-size: 65%;
color: #03cdff; 
font-size: 0.8rem;
min-width:20px;
height:22px;
font-weight: 700;
display: inline-block;
padding-left:20px;
margin-top:-3px;
margin-left: 4px;
}

#article-right .comments:hover {
background: url(images/comments30c.png) no-repeat;
background-size: 65%;
	background-color: #03cdff;
color:white;
}
*/

/* START OF EXPERIMENT */

/* Comments copied from front.css - perhaps move both to styl.css */

#article-right .pic:hover .blank-comments2 { color: #03cdff; }


#article-right:last-child { 
	margin-right: 0px;
}

#article-right .pic {
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px 0;
  padding-top: 56.25%;
  position: relative;
background: url(images/header_bg.jpg);
/*  background-color:#03cdff; /* */
}

#article-right .pic img.feature {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

#article-right h2 {
padding:0;
font-size: 1rem;
display: inline;
}

#article-right .pic .meta {
position: absolute;
top:0;
left: 0px;
background-color: rgba(0,0,0,0.5);
}

#article-right .meta {
position: absolute;
top: 0;
left: -16px;
}

#article-right .trending {
    position: absolute;
    top: 0;
    left: calc(100% - 20px);
}


#article-right .meta3 {
align-items: center;
display:flex; 
margin-top: 0.4rem;
height: 20px;
margin-left: 12px;
}

#article-right .outlet {
	margin-right: 10px;
}

#article-right p {
	font-size: 0.8rem;
	margin-top: 0.3rem;
}

#article-right .content .article-container {
/*
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 0.8rem;
*/
background-color:#f4f4f6; 
margin: 2px 0px 24px 0px;
padding-bottom: 10px; 
display:block; 
}

#article-right .content .article-container p {
margin: 4px 12px 0px 12px;
}

#article-right .content .article-container .text-container {
padding: 10px 10px 0px 12px;
}

#article-right .pic .comments, .half-lead .pic .blank-comments {
margin-top:-1rem; /* */
top: 0rem;
margin-right:0.1rem;
padding: 0 1px 1px 1px;
position: relative;
float: right;
background-color: rgba(0,0,0,0.5);
}

#article-right .pic .trending, .half-lead .pic .trending {
    position: absolute;
    top: 0;
    left: calc(100% - 20px);
    background-color: rgba(0,0,0,0.5);
}

#article-right .pic .comments {
min-width:30px;
}

#article-right .pic .blank-comments {
min-width:20px;
}

#article-right .comments, .half-lead .blank-comments {
display: inline-block;
float:none;
}

.article-container a h2:hover {
color:#03cdff;
}

.article-container:hover > .meta3 a .blank-comments2 {
color: #03cdff;
}

.article-container:hover > .pic a .blank-comments {
background-image: url(images/comments30a.png); 
}

.article-container:hover > a h2 {
color: #03cdff;
}

#article-right h2 a {
color: #3c3e51;
}


/* END OF EXPERIMENT */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
/*	margin-left: 10px; /* */
/*	margin-right: 10px; /* */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Events */

#article-right .pic2 {
  width: 100%;
  overflow: hidden;
  margin: 0 0 10px 0;
  /* */
  padding-top: 13.33%;
  /* */
  position: relative;
/* background: url(images/header_bg.jpg); */
/*  background-color:#03cdff; /* */
}

#article-right .pic2 img.feature {
  position: absolute;
/* */
  top: 50%;
  left: 50%;
  /* */
  width: 100%;
  height: auto;
/* */
  transform: translate(-50%, -50%);
  /* */
}


h2.month {
	clear:both;
	display: block;
	float:left;
	margin: 1rem 0;
/*	width:100%; */
}

.event_container {
	float: left;
	font-family: 'Roboto Slab', sans-serif; 
	/* background: url(images/eventsbg4.png); /* */
	margin-bottom: 1rem;
	width: 100%;
}

.event_left {
	float:left;
	width: 2rem;
	margin-right: 0.5rem;
/*	height: 4rem; */
}
.event_date {
	float:left;
	display: inline-block;
/*	color: rgba(0,0,0,0.8); /* #3c3e51;  */
	/* color: #3c3e51; */
/*	color: black; */
/*	border: 3px solid #3c3e51; */
	border: 3px solid #3c3e51 /* rgba(0,0,0,0.8) */;
	padding: 0.1rem 0.2rem;
	font-size: 1rem;
	width: 2rem;
	height: 1.7rem;
	text-align: center;
	font-weight: 700;
	letter-spacing:1px; /* */
	background-color: white;
} 

.event_rest {
	display: block;
	float:right;
	width: calc(100% - 2.5rem);
/*	background: url(images/back-305.jpg); */
}

.event_day {
	font-weight: 700;
	letter-spacing:1px; /* */
	display: inline-block;
/* 	display: block; */
/*	position: relative; */
/*	width: 26px; 
	height: 12px; */
	width: 100%;
	color: #ffffff;
	background-color: #3c3e51 /* #1a1a1a */;
	margin: 0px;
	/*
	border-style: solid;
	border-color: #3c3e51 /* #1a1a1a */;
	/* border-width: 1px; */
/*	text-transform: uppercase; */
	padding: 2px 0;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
}

.meta2, .meta2_r {
position: absolute;
top:0;
left: 0px;
}

.meta2_r {
left: calc(100% - 34px);
}

.event_cat {
	display: inline-block;
	float:right;
	width: 2rem;
	height: 2rem;
	color: #ffffff;
	background-color: #3c3e51 /* #1a1a1a */;
	margin: 0px;
	border-style: solid;
	border-color: #3c3e51 /* #1a1a1a */;
	border-width: 1px;
/*	text-transform: uppercase; */
	padding-top: 0.4rem;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
	/* margin-right: 0.5rem; */
/*	margin-bottom: 0.3rem; */
}

.event_town {
	display: inline-block;
/*	color: rgba(0,0,0,0.8); /* #3c3e51;  */
	/* color: #3c3e51; */
/*	color: black; */
/*	border: 3px solid #3c3e51; */
/*	border: 3px solid #3c3e51 /* rgba(0,0,0,0.8) */;
/*	padding: 0.1rem 0.2rem; */
	padding: 3px 0.4rem;
	font-size: 0.7rem;
/*	height: 2rem; */
	text-align: center;
	font-weight: 700;
	vertical-align: top; /* */
/*	color: #3c3e51 /* #1a1a1a */;
	color: #ffffff;
	background-color: #3c3e51 /* #1a1a1a */;
	margin-bottom: 0.4rem;
/*	letter-spacing:1px; /* */
} 

@media only screen and (max-width: 540px) {
   #topmenu #topmenu_mostread :after {
	   content: "TOP 5";
   }
}

@media only screen and (min-width: 540px) {
  #tagline {
	display: inherit;
  }
   #logo {
	   margin: 18px 4px 14px 18px;
   }
   #logos {
	   margin-top: 24px;
	   margin-bottom: 24px;
   }
   #topmenu #topmenu_headlines,
   #topmenu #topmenu_whatson,
   #topmenu #topmenu_mostread,
   #topmenu #topmenu_news,
   #topmenu #topmenu_sports,
   #topmenu #topmenu_life,
   #topmenu #topmenu_local,
   #topmenu #topmenu_opinion {
	display: inline-block;	
	}
	#topmenu #moremenu {
	display: none;	
	}
   #topmenu #topmenu_mostread :after {
	   content: "MOST READ";
   }
}