@charset "UTF-8";
/* CSS Document */

a:visited { color: #33331A; }
a:hover { color: #000000; }
a:active { color: #33331A; }
a:link { color: #33331A; }

body,td,th {
	margin: auto;
	font-family: "Baskerville", "Palatino Linotype", "Palatino", "Times New Roman", serif;
	color: #666633;
}

p {
background-image:url(images/texture-parchment-paper.jpg);
color: #000000;
	font-size: 1.3em;
	margin:auto;
	}
		
img {
	max-width: 100%;
	width: auto ;
	height: auto ; 
	}	/* no display:block; can't center - ?*/
	
.indent {text-indent: 4%;}

.blackbold {
	color: #000000;
	font-weight: bold;
}
.black { color: #000000 }
.green { color: #666633 }
.red   { color: #660000 }
.white { color: #FFFFFF }

/*
.small { font-size: small }
.medium { font-size: medium }
*/
.center { text-align: center; }
.left { text-align: left;
margin-left: 1%; }
.right { text-align: right; }

.italics { font-style: italic; }
.bold { font-weight: bold }

.grid-biggerpad18 {
  padding: 0% 15% 0% 15%;
}
.grid-biggerpad5 {
  padding: 0% 3% 0% 3%;
}
.grid-after {
  clear:both;
}


.divborder {
	border: double thick grey;
	padding: 2%;
	margin: 3%;
	}
.divborderround { 
border:thin solid;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-color:#e13a4d;
}



h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 0.8rem; }
h6 { font-size: 0.7rem; }

/*
h1,h2,h3,h4,h5,h6 {
	criteria----
}   
*/

@-ms-viewport { width: device-width ; }
@viewport { width: device-width ; }

@media only screen and (max-width: 840px) {

.grid-biggerpad18 {
  padding: 0 0 0 0;
}
}

/*
	p { margin: 2% 0 1% 0;}
.grid-biggerpad5 {
  padding: 10% 0 1% 0;
}
*/



@charset "UTF-8";
/* CSS Document */

/*
part of responstive grid system
[doesn't it need viewport for tablet size?
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)',   // 768px
lg: 'screen and (min-width: 64em)',   // 1024px
xl: 'screen and (min-width: 80em)'    // 1280px
  }]	*/

/*  SECTIONS  
=============================== */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  
=============================== */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
   transform: scale(1)   /*   zoom:1; For IE 6/7 (trigger hasLayout)  - 2020 newer change to transform */
}

/*  GRID COLUMN SETUP   
===================== */

.col {
	background: ;
	display: block; 
	float:left;
	margin: 0% 0 0% 0%;
	text-align:center;
}

.col:first-child { margin-left: 10px; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.body { margin: 2% 0 1% 0;
	}
	.col { margin: 2% 0 1% 0%;
	}
}

@charset "UTF-8";
/* CSS Document */

/*  GRID OF TWO   
============================ */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 48.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 840px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}

@charset "UTF-8";
/* CSS Document */

/*  GRID OF FOUR   =========================== */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 840px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}