/* For mobile phones: */
[class*="col-"],#navigation ul li {
    width: 100%;
	margin:0 auto;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1,#navigation ul li {width: 33.33%;}
    .col-m-2 {width: 66.66%;}
    .col-m-3 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1,#navigation ul li {width: 33.33%;}
    .col-2 {width: 66.66%;}
    .col-3 {width: 100%;}
}

/* For desktop: */
    .col-1 {width: 33.33%;}
    .col-2 {width: 66.66%;}
    .col-3 {width: 100%;}

* {margin:0;padding:0; box-sizing: border-box;}

img {
    	max-width: 100%;
    	height: auto;
	box-sizing: content-box;
	margin:2px 0;	
}

.row::after {
    content: "";
    clear: both;
    display: block;
}


body { 
	font-family: Cambria, serif;
	text-align: center; 
     	padding:0.2% 2% 3% 2%;
	margin: 0;
} 

/* set the basic page links formatting */
a:link {
	text-decoration: underline;
	font-weight: normal;
}
a:visited {
	text-decoration: underline;
	font-weight: normal;
}
a:hover {
	text-decoration: none;
	font-weight: normal;
}
a:active {
	text-decoration: underline;
	font-weight: normal;
}

acronym, abbr, span.caps {
	cursor: help;
     border-bottom: dotted 1px;
}


/* set the page main area */
#container { 
	margin-left: auto; 
	margin-right: auto; 
	max-width: 950px; 
	text-align: left; 
	padding: 1%;
	line-height: 135%;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	box-sizing: border-box;
}

/* spotty pages in Feb 13 require this */
#containerout {
	margin-left: auto; 
	margin-right: auto; 
	max-width: 920px; 
	padding: 0 1%;
}

hr {
	height: 2px;
	border: none;
}

sup {
	font-size: 60%;
}

h1, h2, h3, h4, h5 {text-align:center;}

h1 {font-size:180%; font-weight: bold; line-height: 110%;}
h2 {font-size: 130%; font-weight: normal; padding:0.25em 0;}
h3 {font-size:120%; font-weight: bold; padding:0.25em 0;}
h4 {font-size:110%; font-weight: normal; padding:0.25em 0;}
h5 {font-size:105%; font-weight: bold; margin-bottom:0;}

/* Page heading - Week beginning ...*/
#top {
	margin: 0.75em 0.5em;
	text-align: center;
	font-size: 180%;
	line-height: 105%;
}

.day {
	padding: 0.8em;
	text-align: center;
	font-size: 150%;
	line-height: 105%;
}

/* for day headings - holidays etc. */
.daysub {
	font-size: 80%; 
	padding-top: 0.2em;
}


.asterisk {
	font-size:90%;
	margin-bottom:1em;
}

.later {
	text-align: right;
	font-size: 90%;
	padding: 0px 5px 0 5px;	
	margin: -40px 0 20px 0;
	font-style: italic;
}

/* 15Nov14 - need to sort out why I did -40px above.  This is an "I'm tired ..." stopgap. */
.laterb {
	text-align: right;
	font-size: 90%;
	padding: 0px 5px 0 5px;	
	margin: 40px 0 20px 0;
	font-style: italic;
}


#copy, #pub {
	text-align: center;
	font-size: 75%;
	padding: 30px 5px 0 5px;
}


#copy:after  {
	content:"\00A9  All Content Copyright Ruth Renner 2001-2018";		/* NEW */
}

#pub:before  {
	content:"Page first published ";		/* NEW September 2017*/
}



/* Definition list dl, dt, dd, for use in Glossary.  */
dt {
	font-weight: bold;
	margin-top: 1em;
}


#navcontainer ul {
	list-style-type: none;
	font-weight: bold;
	font-size: 110%;
	text-align: center;
	margin-top: 0.5em;
}

#navcontainer ul li {
	display: inline-block;
	padding: 0px 5px;
	margin: 0.2em 0;
}

#navcontainer ul li a {
	padding: 0px 5px;
	margin: 0px -5px;
	text-decoration: none;
	white-space: nowrap;
}

#navcontainer ul li a:hover {
	padding: 0px 5px;
	margin: 0px -5px;
}

#footer {
	clear:both;
}

#navigation ul {
	list-style-type: none;
	font-size: 102%;
	text-align: center;
	margin: 6px auto;
	padding: 5px 2px;
 	box-sizing: border-box;
}

#navigation ul li {
	display: inline-block;
	padding:0;
	margin: 0.2em 0;
}


#navigation.float-right, #navigation ul li.right  { 
	float: right; 
}

#navigation.float-left, #navigation ul li.left { 
	float: left; 
}

#navigation ul li a {
	text-decoration: none;
	padding: 0px 5px 2px 5px;
}
	
#navigation ul li a:hover {
	padding: 0px 5px 2px 5px;
}


.wide {
clear: both;
padding: 1% 0;
}

.nar {
clear: both;
}


/*  Sits in any paragraph, makes it always at least 8em wide, so when a screen is narrowed, the words don't end up being singly straggled.  */

p:before {
  content: "";
  width: 8em;
  display: block;
  overflow: hidden;
}

p {
margin: 0.5em 1.5% 0.5em 1.5%;
text-indent: .4em;
}

p.l {
margin-top: 30%;
}

p.big, p.b {
margin-top: 20%;
}

p.med, p.m {
margin-top: 15%;
}

p.sm, p.s {
margin-top: 6%;
}

p.xs, p.x {
margin-top: 3%;
}

.c {text-align: center;}

.float-right { 
float: right; 
margin: 0 1.5%;
}

.float-left { 
float: left; 
margin: 0 1.5%;
}

.cow {padding-left:1.5em;}

.cow li {
	list-style-image:url('../p2013-2/cow.gif');
	margin-bottom: 10px;
}

table {
	border-collapse: collapse;
	font-size: 100%;
/*	width: 90%; */
	margin-left: auto;
	margin-right: auto;
}

table, th {
	padding: 0.2em;
	text-align: center;
}

td {
	padding: 3px;
	text-align: left;
}

/* forms */

input[type=text], select {
    width: 50%;
    padding: 0.5em;
    margin: 1em 0;
    display: inline-block;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 50%;
    height: 3em;
    padding: 0.5em;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
    resize: both;
    display: block;
}

input[type=submit], input[type=reset] {
    border-radius:0.25em;
    padding: 2px;
    font-weight: bold;
    margin: 4px 2px;
    cursor: pointer;
}

/* *******  Photos by other people ********* */

.Rog, .Wm, .DB, .Jude, .Peter {
font-size: 75%;
margin-top: 0px;
text-align: center;
font-weight: bold;
font-style: italic;
}

.Rog:after {
content: "Photo by Roger Allen"
}

.Wm:after {
content: "Photo by William Tailby"
}

.Jude:after {
content: "Photo by Jude Renner"
}

.Peter:after {
content: "Photo by Peter Niepel"
}

.DB:after {
content: "Photo by David Brydon"
}


/*
div, a {border: 1px solid blue;} h1, h2, h3, h4, h5, ul {border: 1px solid pink;} p, table td, col {border: 1px dashed purple;} img, ul li {border: 2px solid red;} 
*/