body{
	background-color:#FFF;
	font-family : Arial,Helvetica,Sans-serif;
	padding: 0;
	}
	/*
	div{border: solid;
	border-width:1px;}
	*/
h4{
	margin-bottom: 0.2em;
	}
hr{
	margin-bottom: 1em;
	}
header{
	text-align:right;
	}
footer{
	height: 200px;
	}
.plainCenter{
	font-family : Arial,Helvetica,Sans-serif;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 0.5em;
	}
.htmlCenter{
	font-family : Arial,Helvetica,Sans-serif;
	font-size: 0.8em;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	border-color:#aaa;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 12px;
	box-shadow: 4px 4px 4px 1px #444444;
	width: 90%;
	margin: 0 auto;
	max-width: 760px;
	}
.htmlGalleryImage{
	width: 23%;
	}
.container{
	width: 100%;
	margin: 0 auto;
	}

.catimg{
	width: 98%;
	height: auto;
	max-width: 340px;
	margin: 0 auto;
    display:block;
	border-radius: 12px;
	box-shadow: 4px 4px 4px 1px #444444;
	padding:0;
	}

.category{
	width: 23%;
 	float:left;
	background-color:#fd9;
	border-radius: 12px;
	border-style: solid;
	border-width: 1px;
	border-color:#aaa;
	margin: 0.25%;
	padding-left:0.25%;
	padding-right:0.25%;
	padding-top:0;
	}

a.contact{
	width: 5em;
 	float: right;
	color: #4f8;
	background-color: #272;
	border-radius: 22px 0 22px 0;
	border-style: solid;
	border-width: 1px;
	border-color: #0f0;
	margin-left: 5%;
	margin-right: 5%;
	font-family : Arial,Helvetica,Sans-serif;
	text-align: center;
	padding:4px;
	box-shadow: 4px 4px 4px 1px #555555;
	}
a.contact:hover{
	background-color: #4f8;
	color: #060;
	border-color: #000;
}
a.contact:active{
	background-color: #3f3;
}
a.linkButton{
	line-height: 3em;
	background-color: #151;
	color: #8fa;
	border-style: solid;
	border-width: 1px;
	border-color:#0d0;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	border-radius: 42px 0 42px 0;
	box-shadow: 3px 3px 3px 1px #444;
	}
a.linkButton:hover{
	background-color: #4f8;
	color: #060;
	border-color: #000;
}
a.linkButton:active{
	background-color: #3f3;
}	
a.smallLinkButton{
	font-size: 0.8em;
	background-color: #030;
	color: #8fa;
	border-style: solid;
	border-width: 1px;
	border-color:#0b0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
	border-radius: 22px 0 22px 0;
	box-shadow: 2px 2px 2px 1px #666;
	}
a.smallLinkButton:hover{
	background-color: #4f8;
	color: #060;
	border-color: #000;
}
a.smallLinkButton:active{
	background-color: #3f3;
}		
.informationContainer{
	width: 90%;
	margin: 0 auto;
	max-width: 880px;
	}

.information{
	width: 100%;
	background-color:#ffa;
	border-radius: 22px;
	border-style: solid;
	border-width: 1px;
	border-color:#999;
	margin: 0 auto;
	padding-left:0.25%;
	padding-right:0.25%;
	padding-top:1%;
	}

.infoTitle{
	font-family:"Times New Roman", Times, serif;
	font-size: 1.8em;
	font-style:italic;
	text-align: center;
	padding-top: 1em;
	}

.infoBanner{
	width: 98%;
	height: auto;
	max-width: 750px;
	margin: 0 auto;
    display:block;
	border-radius: 12px;
	box-shadow: 4px 4px 4px 1px #444444;
	}
.infoBlock{
	width: 96%;
	height: auto;
	max-width: 760px;
	margin: 0 auto;
	}
.infoLeftImage{
	width: 40%;
	height: auto;
	max-width: 340px;
	float: left;
	margin: 12px;
	border-radius: 12px;
	box-shadow: 4px 4px 4px 1px #444444;
	}
.infoRightImage{
	width: 40%;
	height: auto;
	max-width: 340px;
	float: right;
	margin: 8px;
	border-radius: 12px;
	box-shadow: 4px 4px 4px 1px #444444;
	}
/*low resolution, 600px and below */
@media only screen and (max-width: 600px){
  /* some CSS here */
	.container{
		width: 100%;
	}
	.informationContainer{
		width: 100%;
	}
	.category{
		width: 100%;
	}
	.catimg{
		max-width: 400px;
	}
	.logo{
		width: 100%;
	}
	header{
		margin-right: 0px;
	}
	a.contact{
		margin-left: 0.5%;
		margin-right: 0.5%;
		font-weight: normal;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.htmlCenter{
		width: 100%;
	}
	.htmlGalleryImage{
		width: 45%;
	}
}

/*medium resoultion, 601px to 1023px */
@media only screen and (min-width: 601px){
  /* some CSS here */
	.container{
		width: 90%;
	}
	.catimg{
		max-width: 400px;
	}
	.category{
		width: 48%;
	}
	.logo{
		width: 70%;
		max-width: 600px;
	}
}

/*high resolution, 1024px and above */
@media only screen and (min-width: 1024px){
  /* some CSS here */
	.container{
		width: 80%;
	}
	.category{
		width: 48%;
	}
	.logo{
		width: 65%;
		max-width: 600px;
	}
}

/*high resolution, 1200px and above */
@media only screen and (min-width: 1200px){
  /* some CSS here */
	.container{
		width: 95%;
		max-width: 1460px;
	}
	.category{
		width: 23%;
	}
	.logo{
		max-width: 600px;
	}
}
@media only screen and (min-width: 1800px){
  /* some CSS here */
	.container{
		width: 85%;
		max-width: 1460px;
	}
	.category{
		width: 23%;
	}
	.logo{
		max-width: 600px;
	}
}
@-viewport {width : device-width;}