/**********************************************************************
 * Shire Styles 2019
 *
 * Program: layout20.css
 * Author: LJ Harrold
 * Purpose: Layouts for desktop, laptop, tablets
 * Date: 01/02/2019
 *
 * Sheet organization:
 *   1)  Font sizes, base HTML elements
 *   2)  Page layout containers
 *   3)  Tables
 *   4)  Content blocks in specific layout containers
 *   5)	 Links
 **********************************************************************/


/**********************************************************************
 *  1) Font sizes, base HTML elements
 *********************************************************************/
/*
* { box-sizing: border-box;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary
 {
  display: block;
}
*/


body {
	padding-top:60px;
}


/* ~~ Element/tag selectors ~~ *
h1,h2,h3,h4,h5,h6, p {
	margin-top: 0;
}
*/

/*h1 { 
    display: block;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
}

h2 {
    display: block;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
}
h3 { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

h4 { 
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
}

h5 { 
    display: block;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
}
h6 { 
    display: block;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
}
*/

a img {  /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border:none;
	}


/* HTML 5 sepecific *
header, section, article, aside, footer {display:block;}
*/
/*
#edition-container, 
.edition-container  { 
	margin:auto;
	padding:0; 
	background:inherit; 
	/*border:thick dashed black; *
	} 
*/

/* DATE LINE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#date-line{
	color:blue;
	font-size:1.2em;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	margin:auto;
}

hr {
	display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
	
    height: 1px;
    border: 0;
   border-top: 1px solid blue; 
    padding-top: 8px;
}

hr-single-line {
	display: block;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    height: 1px;
    border: 0;
	border-top: thin solid blue; 
    padding-top: 8px;
}

hr-double-line {
	display: block;
	margin:0;
	border-top: medium double blue; 
}


hr-divider { 
	display: block;
    margin-top: .5em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    height: 1px;
    border: 0;
	border-top: 1px solid #bababa; 
    padding-top: 8px;
}



/* SCREEN FORMATS */


/* ~~ Extra small devices ~~ */
@media (min-width:0) and (max-width:767px ) {
	xxbody { font-size:100%;}
	#leftColumn,#edition-line, #disclaimer, #shireMissionStatement {display:none;} /* ~~ hide on extra small screens ~~ */
	#xs-edition-nav-top  { display:inline-block; }	/* ~~ show on extra small devices ~~ */
	.hidden-xs { display:none; }
	.xxsection-text { font-size:.85em; }
	.siteWrapper  { position:relative; max-width: 100%; margin:auto;}
	}

/* ~~ small devices ~~ */
@media (min-width: 768px) and (max-width: 991px) {
	.siteWrapper  { position:relative; max-width: 100%; margin:auto;}
	#edition-container {}
	#leftColumn,#edition-line, #disclaimer, #shireMissionStatement {display:block;} /* ~~ show on small to large screens ~~ */
	#sm-edition-nav-top  { display:inline-block; }	/* ~~ show on extra small devices ~~ */
	.section-text { font-size:.85em; }
	.hidden-sm {  display: none !important;  }

	}

/* ~~ Medium to large devices ~~ */
@media (min-width: 992px) and (max-width: 1199px) {
	#leftColumn,#edition-line, #disclaimer {display:block;} /* ~~ show on medium to large screens ~~ */
	#xs-edition-nav-top, #sm-edition-nav-top { display:none; }	/* ~~ hide on small to large devices ~~ */
	.siteWrapper  { position:relative; max-width: 100%; margin:auto;}
	.section-text { font-size:.85em; }
	.hidden-md {    display: none !important;  }
	}

/* ~~ large devices ~~ */
@media (min-width: 1200px) {
	#xs-edition-nav-top, #sm-edition-nav-top  { display:none; }	/* ~~ hide on small to large devices ~~ */
	.siteWrapper { max-width:1200px; margin:auto; }
	.section-text { font-size:.85em; }
	.hidden-lg {  display: none !important;  }
	}


/*.article-blockquote { 
	display:block;  
	padding:.2em 0; 
	text-align:center;
	margin-bottom:1em;
	}
*/

/**************************************************************************
* Section divider
**************************************************************************/

#section-announcements::before { content:"Family Announcments:"; }
#section-articles::before { 	content:"Articles & Stories:"; }
#section-awards::before { 		content:"Awards & Achievements:"; }
#section-covid19::before { 		content:"Coronavius Information:"; }
#section-notices::before { 		content:"Information & Notices:"; }
#section-groups::before { 		content:"Groups, Organisations & Societies:";}		/* ~~ Max heading length without causing a new line in the section heading ~~ */
#section-churches::before { 	content:"News from Shirehampton Churches:";}
#section-events::before { 		content:"Events, Views & Reviews:"; }
#section-features::before { 	content:"Features:"; }
#section-health::before { 		content:"Health & Welfare:";}
#section-gardening::before { 	content:"Gardeners Spot:"; }
#section-letters::before { 		content:"Letters to the Editor:"; }
#section-obituaries::before { 	content:"Obituaries:"; }
#section-schools::before { 		content:"Schools & Education:"; }
#section-sports::before { 		content:"Sports & Sports Clubs:"; }
#section-shirenews::before { 	content:"Shire Committee:"; }
#section-localgov::before { 	content:"Local Government Information:"; }
#section-video::before { 		content:"Video Clips:"; }
#section-climate::before { 		content:"Climate & Environment:"; }


section[id]::before {		/* any section tag with an id ~~ */
	display:block;
	/*margin-top:-85px;*/
	height:25px;
	position:relative;
	padding:.2em 0 .3em .3em;
	margin-right:0;
	margin-top:25px;
	margin-bottom:25px;
	margin-left:1px;
	top:0;
	font-size:1em;
 }
 
h1[id]:before  {			/* ~~ any h1 tag with an id ~~ */
	display:block;
	content:" ";
	height:85px;
	margin-top:-85px;
}


/*#newspaper-banner {
	font-family:"Times New Roman", Times, serif;
	font-size:3.8rem;
	font-weight:600;
	text-align:center;
}

#newspaper-banner > small {
	font-size: 2rem;
	font-family: inherit;
}

#newspaper-index {
	padding:.25rem;
}

#content-index {
	padding: .25rem;
}

#newspaper-content {
	padding:.25rem;
}
*/	


/**************************************************************************
* Images
**************************************************************************/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
* Max width for jpegs 750px
*
* 1024px / 12 * 9 columns = 768px less borders and such.
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 

/* ALL image columns ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
div[class^="img-"],div[class*=" img-"] {
	display:block;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}
*/

/* Image sizes  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
figcaption { margin:.4em; }
*/
		
/* Image alignment *
div.image-left { text-align:left; }
div.image-right { text-align:right; }
div.image-center { text-align:center; }
*/

/**************************************************************************************
 * 2) Grid layout
 *************************************************************************************/

/*.gutterUnder { margin-bottom: 15px; border-bottom-color:grey; border-bottom-style:solid; border-bottom-width:1px; }
.gutter { margin: 0 5px 0 0; }
*/
/* reset box model */
/*.row, .col { box-sizing:border-box;}
.row:before, .row:after { content:" "; display:	table;}
.row:after { content:""; clear:both; display:block; }
*/


/*
[class*="col-"] {		/* ~~ Grid column position ~~ *
	/*position:relative;*
	float:left;
	/* padding:0; *
	}
*/	
	
	
	
/*	xx.col + xx.col {  /* ~~ Add gutter ~~ *
[class*="col-"] + [class*="col-"] {
		/*margin-left:1.6%;*
	}
*/
	
/* Column widths 12 column max *
.col-1 {
    width: 6.86666666667%;
}

.col-2 {
    width: 15.3333333333%;
}

.col-3 {
    width: 23.8%;
}

.col-4 {
    width: 32.2666666667%;
}

.col-5 {
    width: 40.7333333333%;
}

.col-6 {
    width: 49.2%;
}

.col-7 {
    width: 57.6666666667%;
}

.col-8 {
    width: 66.1333333333%;
}
*/
/*
.col-9 {
		
	
/*    width: 74.6%;*
    width: 75%;
}
*/

/*
.col-10 {
    width: 83.0666666667%;
}
*/
/*
.col-11 {
    width: 91.5333333333%;
}
*/

/*
.col-12 {
    width: 100%;
}



/*
.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}
*/


/* Mobile phone optimization, no gutter *
@media only screen and (max-width: 550px) {
    .col-1, 
    .col-2, 
    .col-3, 
    .col-4, 
    .col-5, 
    .col-6, 
    .col-7, 
    .col-8, 
    .col-9, 
    .col-10, 
    .col-11, 
    .col-12 {
        width: auto;
        float: none;
    }

    .col + .col {
        margin-left: 0px;
    }
}
*/

/*
*.ad-text { font-weight:bold; margin:1px; /*  border:thin solid black; * max-width:120px; }
*/

/**********************************************************************************************************
* Site layout 
**********************************************************************************************************/
/*
.xxsite-wrapper {
	padding: 0;
	margin: auto;
	/*background-color: green;
	border:thick dotted black; *
}

.xxsite-footer  { 
	font-size:.85em;
	text-align:center;
	padding:.8em;
	background-color: transparent;
	/*border: thin solid black;*
	}
	

.xxxrow {
  margin-right: -15px;
  margin-left: -15px;
}
*/


/**********************************************************************************************************
* Page layout
**********************************************************************************************************/


/* Jumbotron */
div.jumbotron {
	font-family: -apple-system, BlinkMacSystemFont, helvetica, sans-serif;
	background-color: #eee;
	border-radius: 6px;
}

div.jumbotron h1, div.jumbotron .h1,
div.jumbotron h2, div.jumbotron .h2,
div.jumbotron h3, div.jumbotron .h3,
div.jumbotron p, div.jumbotron a

 {
	font-family: -apple-system, BlinkMacSystemFont, helvetica, sans-serif;
	text-align:center;
}

div.jumbotron p {
  margin-bottom: 15px;
  font-size: 1.25em;
}

div.jumbotron a {
	font-size:.95em;
}


div.jumbotron-christmas {
	background-image:url(../_assets/stock_images/body_bground.png);
}

div.jumbotron-papers {
	background-image:url(../_assets/stock_images/count_papers.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	color:  #000;
}

div.jumbotron-tapestry {
	background-image:url(../_assets/stock_images/tapestry.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	color: #FFFF80;
/*	opacity:0.5; 
	filter: alpha(opacity=50); /* For IE8 and earlier */

}


@media screen and (min-width: 768px) {
  div.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  div.jumbotron h1,
  div.jumbotron .h1 {
    font-size: 63px;
  }
}

#edition-content, .edition-content { 
	width: 100%;
	margin:auto;
	padding:.6rem;
	background-color:inherit;
	/*border:thin solid orange; */
	}

/*.page-footer  { /* Contains disclaimers and copyright notice *
	background-color: transparent;
	}
*/

/*#nav-left {
	margin:0;
	padding:2px;
	border:thick solid black; 
}
*/

/*#leftColumn, .leftColumn {
	margin:.1rem;
	padding:.5rem ;
	border-right:thin solid black; 
}
*/



.anchor { display:block; height:80px; margin-top:-80px; visibility:hidden;}

/*.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera *
    -moz-column-count: 3; /* Firefox *
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera *
    -moz-column-gap: 40px; /* Firefox *
    column-gap: 40px;

    -webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera *
    -moz-column-rule: 4px outset #ff00ff; /* Firefox *
    column-rule: 4px outset #ff00ff;
}
*/





/**********************************************************************************************************
* Lists 
**********************************************************************************************************/
/*
ul, ol, dl {
	padding:0;
	margin:0;
	list-style-position:inside; /* ~~ postion bullets inside div ~~*/
}
*/


/*********************************************************************
* BOXES - Basic box layout
*********************************************************************/
.box {  /* ~~ Box ~~ */
	display:block;
	margin: .5em 0;
	padding:0;
	border-radius:4px;
	border-style: solid; 
	border-color: transparent; 
	border-width: .1em;
	}

	.box-headline { 
		padding:.2em 1em;
		}
	
	.box-heading {  /* ~~ wrapper for box heading ~~ */
		padding: 10px 15px;
		border-radius: 4px 4px  0 0;
		}

	.box-heading h1 {  /* ~~ Headline ~~ */
		display:block;
		padding-left:0;
		-webkit-margin-before:.5em;;
		-webkit-margin-after:0;
		margin-top:0.2em;
		margin-bottom:0;
		}
	.box-body { padding:5px; }
	.box-text { padding:.3em; margin:0;}
	
/*********************************************************************
* BOXES - Article layout
*********************************************************************/

/*.article {  /* ~~ Article ~~ *
	display:block;
	margin: .5em 0;
	padding:0;
	border-radius:4px;
	border-style: solid; 
	border-color: transparent; 
	border-width: .1em;
	}
	
	
	.article-headline { 
		padding:.2em 1em;
		}
	
	.article-heading-group {  /* ~~ wrapper for article headings ~~ *
		padding: 10px 15px;
		}

	.article-heading-group h1 {  /* ~~ Headline ~~ *
		display:block;
		padding-left:0;
		-webkit-margin-before:.5em;;
		-webkit-margin-after:0;
		margin-top:0.2em;
		margin-bottom:0;
		}
*/	

/*	.article-body { padding:15px; }
	
		.article-body p { padding: .5em; margin:0;}
		.article-body ul, .article-body ol, .article-body dl { padding: .8em; margin:0;}

		.article-body h1 { 
			display: block;
			margin-top: 0.67em;
			margin-bottom: 0.67em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.article-body h2 {
			display: block;
			margin-top: 0.83em;
			margin-bottom: 0.83em;
			margin-left: 0;
			margin-right: 0;
		}
		.article-body h3 { 
			display: block;
			margin-top: 1em;
			margin-bottom: 1em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.article-body h4 { 
			display: block;
			margin-top: .33em;
			margin-bottom: .3em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.article-body h5 { 
			display: block;
			margin-top: .5em;
			margin-bottom: 0.5em;
			margin-left: 0;
			margin-right: 0;
		}
		.article-body h6 { 
			display: block;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			margin-left: 0;
			margin-right: 0;
		}
	.article-footer {
		border-top:1px dotted #CCC; 
		padding:10px 15px; 
		margin:0; 
		background-color: #f5f5f5;
		}

*.article-byline { /* ~~ article author ~~ *
	padding-left:0; 
	margin:0;
	margin-bottom:.5em
	}  
	
*/

/* Letters ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.letter {  /* ~~ Article ~~ */
	display:block;
	margin: .5em 0;
	padding:0;
	border-radius:4px;
	border-style: solid; 
	border-color: transparent; 
	border-width: .1em;
	}
	
	
	.letter-headline { 
		padding:.2em 1em;
		}
	
	.letter-heading-group {  /* ~~ wrapper for letter headings ~~ */
		padding: 10px 15px;
		}

	.letter-heading-group h1 {  /* ~~ Headline ~~ */
		display:block;
		padding-left:0;
		-webkit-margin-before:.5em;;
		-webkit-margin-after:0;
		margin-top:0.2em;
		margin-bottom:0;
		}
	
	.letter-body { padding:15px; }
	
		.letter-body p { padding: .5em; margin:0;}
		.letter-body ul, .letter-body ol, .letter-body dl { padding: .8em; margin:0;}

		.letter-body h1 { 
			display: block;
			margin-top: 0.67em;
			margin-bottom: 0.67em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.letter-body h2 {
			display: block;
			margin-top: 0.83em;
			margin-bottom: 0.83em;
			margin-left: 0;
			margin-right: 0;
		}
		.letter-body h3 { 
			display: block;
			margin-top: 1em;
			margin-bottom: 1em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.letter-body h4 { 
			display: block;
			margin-top: .33em;
			margin-bottom: .3em;
			margin-left: 0;
			margin-right: 0;
		}
		
		.letter-body h5 { 
			display: block;
			margin-top: .5em;
			margin-bottom: 0.5em;
			margin-left: 0;
			margin-right: 0;
		}
		.letter-body h6 { 
			display: block;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			margin-left: 0;
			margin-right: 0;
		}
	.letter-footer {
		border-top:1px dotted #CCC; 
		padding:10px 15px; 
		margin:0; 
		background-color: #f5f5f5;
		}


/*

.article-body ul li { padding-bottom:.5em; }

/************************************************************************************************
* Links
************************************************************************************************/

/* Default */
a, a:visited, a:active { outline:0; padding:0;}
a:hover { cursor: pointer; }


/*.contactDetails {
	text-align:left; 
	font-style:italic; 
	}
*/

/* ARTICLE TYPE - Feature - an article that concentrates on a particular subject *
.article-feature > .article-body { border-left-style:solid; border-left-color:#ddd;}		
*/


/* LETTERS to the editor ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/* Letter TAGS *
letter-subject { padding-left:1em;  }
letter-writer:before {content:" - ";}
*/



/*******************************************************************************************
* 3) Tables
*******************************************************************************************/

xx.table { margin: 0 120px 0 120px; overflow-x:auto;}

/*.table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ddd;
    text-align: left;
    padding: 8px;
}

th {
    padding-top: 3px;
    padding-bottom: 3px;
}

*/



/*****************************************
* fixed button bottom of display
*****************************************/
#pagetop-btn {
	position:fixed;
	bottom:4px;
	right:5px;
	background-color:black;
	text-decoration:none;
	z-index:100;
	font-weight:bold;
	display: inline-block; 
	padding: 4px 16px;
	height: 25px;
	width:120px;
}


#pagetop-btn:before {
  border-bottom: 10px solid black;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -10px;
  width: 0;
}

a#pagetop-btn {color:white; font-size:.95em; }

/* ELEMENTS FOR SHIRE MASTHEAD *
table#masthead { border-style: double; border-color:#FFFFFF; width: 100%; text-align: center; background-color: #6498fd; margin-bottom:5px; }
#shire_text{ font-family:"Times New Roman", Times, serif ;text-outline:#247C93; font-weight:bold; font-size: 2.2em; color: #FFF;text-align:center;text-decoration:none; }
#shire_url { font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size: .8em; color: #FFF; text-align:center; text-decoration:none}

*/