body{ 
	margin: 0;
	padding: 0;
	background-color: mediumpurple;
	background-image: url('http://artbyshelton.com/img/cmn/bg.jpg');
	background-size: 100%;
	background-repeat: repeat;
	border-bottom: 3em solid #000;	
	font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, 'Lucida Grande','Lucida Sans','Lucida Sans Unicode', Verdana, sans-serif;
	color: #000;
}

/* responsive type */
@media (min-width:100px) and (max-width:299.9px)
{	h1   { font-size: 120%; }
	h2   { font-size: 95%;  }
	body { font-size: 85%;  }
}

@media (min-width:300px) and (max-width:699.9px)
{	h1   { font-size: 130%; }
	h2   { font-size: 120%; }
	body { font-size: 100%; }
}

@media (min-width:700 px) and (max-width: 999.9px)
{	h1   { font-size: 140%; }
	h2   { font-size: 120%; }
	body { font-size: 120%; }
}

@media (min-width: 1000px)
{	h1   { font-size: 150%; }
	h2   { font-size: 115%; }
	body { font-size: 125%; }
}
/* END responsive type */

#header {
	margin: 0; 
        padding: 0.5em 0;
	border: 15px solid #000;
	border-bottom: 10px solid #FFF; 
	width: 100%;
}

#wrapper { 
display: inline;
clear:both;
width: 100%;
margin: 2em 2.5% 0 2.5%;
}

#col1 {
float: left;
width: 27%;
min-width: 14em;
margin: 0 0 1em 5%;
}
	
#col2 {
float: left;
width: 27%;
min-width: 14em;
margin: 0 0 1em 5%;
}
	
#col3 {
float: left;
width: 27%;
min-width: 14em;
margin: 0 0 1em 5%;
}

#footer {
	clear:both;
	margin: 0; 
        padding-bottom: 0.5em;
	border: 10px solid #000;
	border-bottom: 5px solid #FFF; 
	width: 100%;
}

h2 { 	margin: 0; color: #000; font-weight:bold;}

a { 	color: #FFF; font-weight: bold; text-decoration: none;}

h2:hover, h2:focus, a:hover, a:focus li { 
	color: #FFF; 
	background-color: #000; 
	border-bottom: 6px dotted red;
	font-size: 105%;
}

h2:hover, h2:focus  { font-size: 120%; color:red;}

h1 { 	margin: 0; padding: 0 0 0 1em; font-weight:bold; font-size:240%; }

ul {	clear: both; list-style: none; margin: 0 0 0 -1em; padding-bottom: 1em; line-height: 1.3;}

li {	line-height: 1.3; }