/* for 700 px photos, central from June 2016 - and used to experiment with responsive design, 2 July 2016*/



/* makes sure that the padding and border are included in the total width and height of the elements*/

* {
    box-sizing: border-box;
}




[class*="col-"] {
    	float: left;
    	padding: 0.6em;
} 

img {
    	max-width: 100%;
    	height: auto;
}


/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow */


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



 /* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 3%;}
    .col-m-2 {width: 15%;}
    .col-m-3 {width: 20%;}
    .col-m-4 {width: 40%;}
    .col-m-5 {width: 50%;}
    .col-m-6 {width: 64%;}
    .col-m-7 {width: 70%;}
    .col-m-8 {width: 80%;}
    .col-m-9 {width: 90%;}
    .col-m-10 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 3%;}
    .col-2 {width: 15%;}
    .col-3 {width: 20%;}
    .col-4 {width: 40%;}
    .col-5 {width: 50%;}
    .col-6 {width: 64%;}
    .col-7 {width: 70%;}
    .col-8 {width: 80%;}
    .col-9 {width: 90%;}
    .col-10 {width: 100%;}
}





/* ***************************************************************** */


body { 
	background-color:#DAB8F4;
	color:#54319B;
	font-family: Cambria, serif;
padding:0;
margin:0;
}

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

h1 {font-size:200%; font-weight: bold;line-height:100%;}
h2 {font-size:120%; font-weight: bold;}
h3 {font-size:110%; font-weight: bold;}
h4 {font-size:110%; font-weight: normal;}
h5 {font-size:105%; font-weight: bold;}
h6 {font-size:105%; font-weight: bold; margin-bottom:0;}


/* set the basic page links formatting */
a:link {
	text-decoration: underline;
	font-weight: normal;
	color:#54319B;
}
a:visited {
	text-decoration: underline;
	font-weight: normal;
	color:#9428DB;
}
a:hover {
	text-decoration: none;
	font-weight: normal;
	color:#ef08d6; 
}
a:active {
	text-decoration: underline;
	font-weight: normal;
	color:white;
}

a.no {text-decoration: none;}


/* for keyboard tab use to highlight links - tried leaving in main, but needs rule for each menu section too */
a:focus {
	color:white;
	background-color:black;
}

#container { 
	margin: 10px auto; 
	max-width: 900px; 
	text-align: center; 
	padding: 0;
	line-height: 135%;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
}

div, h1, h2, h3, h4, h5, h6 {padding:0;margin:0;}

.click {
    	background-color:#d6a5ef;
    	box-shadow: 0px 0px 2px 3px #7b5a9c inset;	
	padding:0.1em 0.5em;

}

a.click  {		
	text-decoration: none;
}

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


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


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