/*
Theme Name: tnt01
Theme URI: www.conormaxwell.net
Author: Conor Maxwell
Author URI: www.conormaxwell.com
Description: Small Theme for TNT Magazine
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: TNTmagazine
Text Domain: 
*/

/*
 *	 1 Jun 2026	Conor	from Devizes Eisteddfod DE90 them, much reduced
 *   2 Jun 2026 Conor	styling for TNT testpage: yearbuttonclass etc (saved in oldtntfiles 2026jun02)
 *   9 Jun 2026 Conor   simplify tnt01, remove unused stuff, tnt styles are at the end.
*/

/**
 * 1.0 - Reset everything
 */

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, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: top;  /* was baseline. Need top for footer menu */
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 100%;	/* was 62.5%  - why ? */
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

article,aside,details,figcaption,figure,footer,header,main,nav,section {
	display: block;
}

ol,ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,th,td {
	font-weight: normal;
	text-align: left;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: "";
}

blockquote,q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

a:hover,a:active {
	outline: 0;
}

a img {
	border: 0;
}



/*   my styling */

body {
	/*font: 100%/1.4 Arial, Helvetica, sans-serif;*/
	font: 100%/1.4 Open Sans, sans-serif;
	background-color: #42413C;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 
	padding-right: 0;
	padding-left: 0; 
}
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}
h3 {
	font-size: 32px;   /* was 112.5% = 18px */
	font-weight: normal;
	text-align: center;
}
p {
	font-size: 18px;  /* for now,  make it em later. was 87.5%;  /* 14px */
}
table {
	font-size: 87.5%;  /* 14px */
}
a img { 
	border: none;
}

a:link {
	color: #42413C;
	text-decoration: underline; 
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}
p:empty::before {
	content: none !important;  /* to overcome all the empty paras in WP5.7, I hope ? */
}
/* ~~ This container surrounds all other blocks ~~ */
/*     width reduced for mobiles, see below */
.container {
	width : 100%;
	max-width: 1400px;
	background-color: #FFFFFF;
	margin: 0 auto; 
	position: relative;
	overflow-x:hidden;   /* new 3march19 for entry form when move sidebars away */
}
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
	background-color: #F0F0F0;
	line-height: 1.5;
	position: relative;  /* for position of hamburger */
	text-align: center;  /* for header image when widescreen */
	height: 300px;   /* diagnostic ?? */
}
/* header-right for page name */
.header-right {
	float: right;
	margin-top: 80px;
	padding-right: 20px;
	color: #C03333;
	font-weight: bold;
}
#hamburger {   /* see phone layout for more */
	display: none;  /* initially hidden for wide screen */
	position: absolute;
	top: 20px;      /* relative to container */
	left: 20px;	
	z-index: 100;	
}
/* ~~ The top menu navigation list styles  big screen ~~ */
/* 2jan2020 - make it dropdown, previously it was one level only */
#topmenu {
	height: 48px;
	/*border-top: 1px solid #666666;
	background-color: #70CFFF; */
	border-top: 1px solid #8C2300;
	background-color: #8C2300;
	background-image: linear-gradient(#DE3D00, #8C2300);
	line-height: 32px;
}
#topmenu ul {
	list-style: none; 
	text-align: center;	 
}
/* some topmenu li items are not <a> now, if got submenu below */
/* but if no submenu then they are <a> (eg Home)  */
/* so need to cope with both */
#topmenu ul li { 
	font-weight: bold;
	font-size: 24px;
	color: #FFFFFF; /*#6E6C64; */
	padding: 6px 60px 5px 15px;  /* was 6 15 5 15 */
	display: inline-block; 
	text-decoration: none;
}
#topmenu ul li a {
	color: #FFFFFF;  /* for top single items (Home, Contact) */
}
/* sub menu items */
#topmenu ul li ul li{
	padding: 6px 15px 5px 15px; 
}
#topmenu ul li ul li a {
	color: #6E6C64;		/* sub menu items */
	font-size: 16px; 
}
#topmenu ul a:hover { 
	color: #E0E0E0;  
}
#topmenu ul li:hover { 
	color: #E0E0E0; 
}
#topmenu ul a { 
	text-decoration: none;
}
#topmenu ul li.selected, #topmenu ul li.selected a{
	color: #C03333;
	background-color: #FFFFFF;
}
/* for toplevels with a selected submenu */
#topmenu ul li.subselected{
	color: #C03333;
	background-color: #F8F8F8;
}
#topmenu ul li.subselected li a{
	color: #6E6C64;  /* submenu not selected */
}
#topmenu ul li li a:hover{
	color: #C03333;  /* submenu hover */
}
#topmenu ul li.subselected li.selected a{
	color: #C03333;
	background-color: #FFFFFF;
}
/* DROP DOWN  TOP LEVEL */
ul.dropdown                         { position: relative; z-index:10;}
ul.dropdown li:hover                { position: relative; }
/* DROPDOWN SUB MENU */
ul.submenu { width: 300px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; }
ul.submenu li 	{ font-weight: normal; background: #f6f6f6; color: #000; width: 100%;
									  border-bottom: 1px solid #ccc; text-align: left; float: left }
ul.submenu li.selected a{
	color: #C03333;
	background-color: #C8EDFF;
}								  
/* IE 6 & 7 Needs Inline Block */
ul.submenu li a	{ border-right: none; width: 100%; display: inline-block; } 

/* ~~ The footer ~~ */
footer {
	padding: 10px 0;
	background-color: #F8F8F8;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; 
}
.footerdiv {
	width: 100%;   /* was 1000, just to centre it, OK ? */
	margin: 50px auto 50px;   
}
ul.footernav {
	list-style: none; 
	border-top: 2px solid #999; 
	border-bottom: 2px solid #999;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 60px; /* to clear the cookie popup*/
	font-size: 100%;
	/* width: 95%;   /* just to centre it, OK ? */
	margin: 0 auto 0; 
}
ul.footernav li {
	display: inline-block;
	border-right: 2px solid #999999;
	margin-left: 10px;
	margin-right: 10px;
	padding-right: 20px;
}
ul.footernav a, ul.footernav a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
}
ul.footernav a:hover, ul.footernav a:active, ul.footernav a:focus { 
	color: #C03333;
}
ul.footernav li.selected a{
	color: #C03333;
	background-color: #C8EDFF;
}
/* ---------- layout -------------- */

/* photo gallery page */
/* and also some styling (eg Start Slideshow) in wp-content/ngg_styles/nggallery.css */
#col234photo {
	float: left;
	width: 73%;   /* 744, - 15px on either side */
	margin-top: 0px; /* was 166px; /* was 124 */
	margin-right: 10px;
	margin-left: 10px;
	padding-top: 15px;
}
/* to allow text on photo gallery page, looking bit like album 'boxes' eg for link */
p.boxed-para {
	border: 1px solid #C03333;
	margin: 10px 0;
	padding: 10px;
}
p span.oldred {
	color: #C03333;  /* old red */
	font-weight:bold;
}

ul.nav {
	list-style: none; 
	border-top: 1px solid #666; 
	margin-bottom: 15px; 
}
ul.nav li {
	border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; 
	text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	color: #C03333;
}
ul.nav li.selected a{
	color: #C03333;
	background-color: #C8EDFF;
}

/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt {  /* The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*HTML5 support - Sets new HTML5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
	display: block;
}
/* Central column styles, rounded borders and padding to cope with them */
section {
	border : 1px #8C2300 solid;
	border-radius: 20px;
	margin-bottom: 30px;
	overflow: hidden;
}
section h3 {
	margin-bottom: 0;
	padding: 10px;

}
section h4 {
	margin-bottom: 0;
	padding: 10px;
}
section h5 {
	margin-bottom: 0;
	padding: 10px;
}
section p {
	margin-bottom: 0;
	padding: 10px;
}
section table {
	margin-left: 10px;
	padding-bottom: 10px;
}
.bluebkgd {
	/*  blue
	background-color: #66CCFF;
	background-image: linear-gradient(#C8EDFF, #66CCFF);
	*/
	/* new maroon */
	background-color: #8C2300;
	background-image: linear-gradient(#DE3D00, #8C2300);
	color: white;
}
.ulinebkgd {
	/* used for Info headers ? (not maroon) */
	border-bottom: 2px solid #CCCCCC;
}
/*  TNT styles ----------------- */
#containerdiv {
	width: 80%;
	margin: 0 auto;
}
.yearbuttonclass {
	border : 1px #8C2300 solid;
	border-radius: 5px;
	padding: 5px;
	margin: 10px;
	cursor: pointer;
}