/* Lawbore default and common styles */


/* Globals */

html {
	--main-side-gutter: 50px;
	--column-gap: 25px;
	--box-padding: 25px;
	font-size: 16px;
}

body {
	font-family: Kreon, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	color: #222;
}

a {
	text-decoration: none;
}

a:focus,
article:focus {
	outline-width: 2px;
}

a {
	color: var(--link-color);
}


a:hover {
	text-decoration: underline
}

#mobiletest {
	float: left;
}

fieldset {
	border: 0;
}

/* Exceptions to hover underline*/

#pagetabs a:hover {
	text-decoration: none;
}

#contentarea {
	margin-top: 10px;
}


/* Generic header styles*/



.invisible {
	visibility: hidden;
}

.offscreen,
.accessibility {
	position: absolute;
	left: -5000px;
	display: block !important;
	background-color: #333;
	color: #fff;
}

h1,
h2,
h3 {
	font-weight: 400;
	letter-spacing: -1px;
	color: #000;
	line-height: 1.1;
	margin-bottom: 20px;
}




#leftcol h2.cufon+p {
	padding-left: 2px;
}

h4 {
	font-weight: bold;
	margin-bottom: 5px;
}



h2,
h1.pagetitle {
	/* border-top: 2px solid var(--alt-dark-color); */
	width: 100%;
	font-family: Poppins, sans-serif;
	color: var(--alt-dark-color);
	font-size: 160%;
	/* font-weight: 200; */
	font-weight: 600;
	line-height: 1.3;
	font-size: 160%;
}

h2 .monthcaption,
h2 .sectionheader,
h1.pagetitle span {
	background-color: var(--alt-dark-color);
	color: #fff;
	padding-left: 0.3em;
	padding-right: 0.3em;
	box-decoration-break: clone; /* Praise the CSS gods. They've finally invented a way to duplicate the padding over split lines of text. No more kludges needed. */
	-webkit-box-decoration-break: clone; /* Supposedly this is required too */
}
/*
 * this was an earlier hack for the padding issue now fixed with box decoration clone
h2 .sectionheader:before,  h2 .sectionheader:after{
	content: '\00A0';
}*/

h3.section_explanation {
	font-size: 130%;
}

h4.subheader {
	margin-top: 20px;
	clear: both;
	color: var(--link-color);
	font-weight: bold;
}

.boxheader {
	width: 100%;
}

.boxheader h2 {
	margin-top:0;
}


/* Common page structure */

#intro_area {
	height: auto;
	width: 100%;
	padding-top: 25px;
	padding-left: var(--main-side-gutter);
	padding-right: var(--main-side-gutter);
	box-sizing: border-box;
	z-index: -1; /* so the background goes behind the content boxes */
	
/* 	aspect-ratio: 1600 / 1067; */
}


#intro_area #sitelogo_container {
}
#intro_area #sitelogo {
	width: auto;
	height: auto;
	max-width: 100%;
	margin-bottom: 20px;
}

#intro_area h2 {
	border-top: 0;
	display: inline-block;
	margin-bottom: 0;
	margin-top: 0.5em;
	line-height: 155%;
	/* position: relative;
	left: -0.3em; */
}
#intro_area h2 .sectionheader {
	background-color: var(--bright-bg-color);
	color: var(--alt-dark-color);
}


#skipnav {
	padding-bottom: 3px;
	font-size: 15px;
	height: 15px;
	line-height: 1;
	/*background-color: #fff;
   color: #333;*/
	/* background: rgba(0,0,0,0.1); */
	text-align: right;
	font-family: sans-serif;
}

#skipnav ul {
	list-style-type: none
}

#skipnav ul li {
	display: inline-block;
	margin-left: 3em;
}

#skipnav ul li a {
	color: #000;
	background: #eee;
	font-weight: normal;
}

#campaign_area {
	/*max-height:250px;*/
	margin-bottom: 70px;
	text-align: center;
	margin-top: 40px;
}

#campaign_area img,
img.responsive {
	max-width: 100%;
	height: auto;
}

.white-section .arrow-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #25C1D2;
	margin-left: 50%;
	position: relative;
	left: -10px;
	margin-bottom: 30px;
}

 .arrow-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff;
	margin-left: 50%;
	position: relative;
	left: -10px;
	margin-bottom: 30px;
}

#fixedwidthwrapper {
/* Think this only matters to learnmore now */
	position: relative;
	min-height: 900px;
}

.dottedrule {
	height: 6px;
	clear: both;
	background: url('/images/dashedline-pattern.png') repeat-x;
	margin-top: 10px;
	margin-bottom: 10px;
}




/* Uncomment line below to turn on helper grid 
 #fixedwidthwrapper {background: url('/images/columns.png')}  */


/* Generic text etc. styles */

.editlink {
	color: blue;
}

.centered,
.center,
.centre {
	text-align: center
}

.widelines {
	line-height: 200%
}

.spaced {
	margin-bottom: 0.5em;
	text-align: left
}

.indented,
.indent {
	padding-left: 15px
}

.error {
	color: red
}

.rightaligned,
.rightalign {
	text-align: right;
}

.fourcolourbullet {
	margin-right: 0.5em;
	position: relative;
	top: 2px
}

.smallcaps {
	font-variant: small-caps;
	letter-spacing: 0.18em;
	font-weight: normal
}

.justify {
	text-align: justify
}

.hidden {
	display: none
}

.nowrap {
	white-space: nowrap;
}

.clear {
	clear: both
}

.margintop {
	margin-top: 12px
}

.unbold {
	font-weight: 300;
}

.tip {
	color: #333;
	font-size: 15px;
	opacity: 0.7;
}


/* Tag styles for directory */


span.tag {
	vertical-align: top;
	font-size: 0.8rem;
	line-height: 1;
	padding: 1px 2px 1px 2px;
	margin: 1px 10px 0 5px;
	color: #fff;
	display: inline-block;
}

span.tag img {
	height: 1.2em;
	width: auto;
}

span.new {
	background-color: #35489B;
}


span.noleftgap {
	margin-left: 0
}

.imagelink {
	border: 0
}

a.imagelink:hover {
	background: transparent;
	border-bottom: 0
}


/*.boxcaption {font-size:14pt; font-weight:bold; color:#fff}
noscript {color:#fff}*/

.rssiconright {
	border: 0;
	margin-left: 10px;
}

.rssiconright a {
	border: 0;
	padding: 3px
}

.fileicon {
	height: 1em;
	width: auto;
	margin-right: 0.2em;
}

.newsitem li {
	margin-left: 20px
}

.newsitem ul {
	margin-bottom: 6px
}


/* RSS feed widget styles */

.rssfeed ul {
	list-style-type: none;
	padding-left: 0;
}

.rssfeed ul li {
	/* padding-top: 5px;
	padding-bottom: 5px;*/
	border-bottom: 1px dotted #dddddd;
}


.rssfeed ul li a {
	display: block;
	padding: 5px 0;
	font-weight: 400;
}

 .rssfeed ul li {
	border-bottom: 1px dotted #a1e5eb;
}

.rssfeed ul li h4 {
	font-weight: 300
}

.rssfeed ul li a:hover {
	background-color: #eee;
}

 .rssfeed ul li a:hover {
	background-color: rgba(0, 0, 0, 0.05);
	box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.05);
}

.rssfeed ul li a:hover {
	text-decoration: none;
}

/* Make  linked feed items not blue 
.zrssfeed .rssBody ul li a {
	color: #222;
}

.zrssfeed .rssBody ul li a:hover {
	color:#25C1D2;
}
*/

p.rss-ftr {
	padding-top: 18px;
	line-height: 1.2;
}


/* Flickr box stuff */

ul.thumbs {
	margin: 0;
	padding: 0;
	overflow: hidden;
	margin-bottom: 8px;
}

ul.thumbs li {
	list-style: none;
	float: left;
	padding: 10px 10px 0 0;
}


ul.thumbs li img {
	display: block;
}

ul.thumbs li a img {
	border: none;
}

/* Internal subsite navigation */

#internalnavigation ul {
	padding:0;
	list-style-type: none; 
	border-radius: 10px;
	width: fit-content;
	background: linear-gradient(	110deg,	#002a32ff 0%, #002a3290 100%	 )
}

#internalnavigation > ul > li {
	display: inline-block;
	margin:0;
	margin-right: 2em;
	padding: 1em;
	color: #fff;
}

#internalnavigation.mega-menu > ul > li {
	display: inherit;
	padding: inherit;
}

#internalnavigation a {
	padding: 2px 3px;
	color: #fff;
	font-weight: 400;
}
#internalnavigation .current a, #internalnavigation span.current{
   background-color: #fff4;
	padding: 2px 3px;
   border-radius: 4px;
   width: max-content;
}



/* New JQuery pop-out newsbox styles... */

.newsitem {
	/*font-weight: 300; */
	border-bottom: 1px dotted #DDDDDD;
}

.newsbody {
	margin-left: 10px;
	margin-top: 0.1em;
	margin-bottom: 0.5em;
	display: block
}

.newsbody2 {
	position: absolute;
	margin: auto;
	margin-top: 5px;
	z-index: 10000;
	font-weight: 300;
	background: url('/images/subtopic bg.svg');
	background-size: cover;
}

.morelink a {
	color: #fff;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #25C1D2;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

}

div.newstitle {
	padding-top: 5px;
	padding-bottom: 5px;
}

.newsbody2 a {
	color: #222C3B;
}

/*
 * This became too widely applied.
 * Suggest if it's needed then apply on a per hubbox basis, instead of default
 * 
div.newsitem:first-child .newstitle {
	padding-top: 0;
}
*/

.floatingbox {
	background: white;
	box-shadow: 0 0 10px rgba(56, 138, 177, 1);
	-moz-box-shadow: 0 0 10px rgba(56, 138, 177, 1);
	-webkit-box-shadow: 0 0 10px rgba(56, 138, 177, 1);
}

div.newstext {
	padding: 15px;
	box-sizing: border-box;
}

.floatingbox div.newstitle {
	padding-left: 4px;
	background-color: #222C3B;
	color: #fff;
}

.floatingbox a.storylink {
	display: block;
	border-bottom: none;
	margin: 0;
	padding-right: 22px;
}

.floatingbox a.storylink:hover {
	text-decoration: none
}


.poster {
	display: block;
	font-size: 80%;
	font-weight: normal;
	padding: 0;
	margin-top: 1em;
	padding-left: 0px;
	padding-top: 2px;
	border-top: 1px solid var(--alt-dark-color);
	font-family: Poppins, sans-serif;
}


.floatingbox .downtriangle {
	display: none;
}


.accessibility_page .hubbox ul {
	list-style-type: revert !important;
	padding-left: revert !important;
}


/* Cufon headers etc */

h2.sectiontitle {
	margin-top: 7px;
	font-size: 32px;
	margin-bottom: 21px;
	color: #222C3B;
	letter-spacing: -5%;
}

h3.subtitle {
	margin-top: 10px;
	font-size: 21px;
}

h3.subtitle+p {
	margin-top: 5px;
}

p+h3.subtitle {
	margin-top: 20px;
}

.widehrule {
	border-bottom: 1px dotted #a1e5eb;
	height: 0px;
}

.gap_below {
	margin-bottom: 20px
}


/* Twitter */

.tweetthis {
	float: right;
	height: 26px;
	padding-top: 2px
}

/*
.twitter_feed a:hover {
   text-decoration: none;
   background-color: #eee;
}*/

ul.twitter_feed {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 19px;
	line-height: 1.4;
}

li.twitter_tweet {
	margin-bottom: 20px;
	/*margin-bottom: 10px;
	border-bottom: 1px dotted #fff;
	padding-bottom: 6px;*/
}

.twitter_tweet .twitter_icon {
	float: right;
	width: 19px;
	height: 19px;
}

.twitter_tweet a.twitter_media {
	display: block;
	/* width: 200px; */
}

.twitter_tweet .twitter_avatar {
	position: static;
	top: auto;
	left: auto;
	float: left;
	margin-right: 8px;
	width: 32px;
	height: 32px;
}

.twitter_tweet .twitter_avatar img {
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.twitter_tweet .twitter_name {
	font-weight: bold;
}

.twitter_tweet a.twitter_media {
	margin-top: 5px;
}

.twitter_tweet a.twitter_media img {
	max-width: 12em;

}

.twitter_tweet .twitter_retweet img.twitter_retweet_icon {
	padding-right: 25px;
	height: 19px;
	float: left;
}

.twitter_tweet .twitter_retweet {
	margin-bottom: 5px;
}

.twitter_tweet .twitter_screenname {
	display: block;
}

.white-section .twitter_screenname,
.white-section .twitter_retweet,
.white-section .twitter_datestamp {
	color: #000;
}

.twitter_tweet .twitter_body {
	margin-top: 5px;
}

ul.twitter_actions {
	list-style-type: none;
	padding: 0;
	margin: 0;
	line-height: 19px;
	margin-top: 5px;
}

ul.twitter_actions li {
	display: inline-block;
	margin-right: 0.7em;
}

.twitter_tweet .twitter_datestamp {
	float: right;
}

.twitter_tweet .twitter_footer {
	border-bottom: 1px dotted #dddddd;
	padding-bottom: 5px;
}

 .twitter_tweet .twitter_footer {
	border-bottom: 1px dotted #a1e5eb;

}



/* MOTD BOX - play nice with nav */

.ui-widget-overlay.ui-front {
	z-index: 1005 !important;
}


/* 404 page */

#fourohfour {
	text-align: center;
}

#fourohfour h3 {
	max-width: 25em;
	margin-left: auto;
	margin-right: auto;
}

#fourohfour h3 a {
	text-decoration: underline;
}

#fourohfour h3 a:focus, #fourohfour h3 a:hover {
	color: var(--main-bg-color);
	background-color: var(--link-color);
}

/* mega menu styles */