body {
	font-family: "Raleway"," Verdana", "Arial", Helvetica, sans-serif;
	background-repeat: no-repeat;
	background-color: #a8c1bd;
	margin: 10px;
	padding: 10px;
	color: #000;
	
	/*background-image: url(../Background.jpg);*/
}

.ParagraphText {
    display: block; /* keep original display */
    font-family: "Raleway"," Verdana", "Arial", Helvetica, sans-serif;
    color: black;
    font-size: 14px;
    font-style: normal;
    line-height: 130%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.35);
    padding: 20px;
    margin: 20px auto; /* centers the paragraph block horizontally */
    width: 80%;       /* keeps block from being too wide */
    text-align: left; /* text inside remains left-aligned */
    height: auto;
}


a:hover {
	color: #CC3333;
	text-decoration: none;
}
a:active {
	
	color: #660000;
	text-decoration: none;
}
a:link {
	color: #660000;
	text-decoration: none;
}
a:visited {
	color:  #660000;
	text-decoration: none;
}
a {
	font-weight: bold;
}
.SmallLink {font-size: 9px;}
	.container {
	width: 100%;
	max-width: 900px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 300px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	 	margin: 10px; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}


.content {
	padding: 10px;
	font-family: "Raleway"," Verdana", "Arial", Helvetica, sans-serif;
	height: auto;
	
}

.PageTitle {
	font-family: "Raleway"," Verdana", "Arial", Helvetica, sans-serif;
	font-size: 30px;
	font-style: bold;
	color: white;
	line-height: 70%;
  text-shadow: 1px 1px 2px #333;
	}

 .imgLeft {
float:left;
padding: 10px;
}
 .imgRight {
float:right;
padding: 10px;
}

a:hover {
	color: #CC3333;
}

.imgTut{
	width:100%;
	height:auto;}

 .column, columnImage, .columntext {
  float: left;
  width: 46%;
 padding: 5px;
 
}
 .column2 {
  float: left;
  width: 95%;
 padding: 10px;
 
}

 /* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.circle, .circleRed,.circleBlue, .circleRedsm,.circleBluesm {
  display: inline-flex;          /* centers content */
  align-items: center;
  justify-content: center;
  background-color: black;
  color: white;
  width: 16px;                  /* circle size */
  height: 16px;
  border-radius: 50%;           /* makes it circular */
  font-weight: bold;
  font-size: 0.7rem;
}
.circleRed {
background-color: red;
	width: 22px;                  /* circle size */
  height: 22px;
	font-size: 0.9rem;
}
.circleBlue {
background-color: blue;
	width: 22px;                  /* circle size */
  height: 22px;
	font-size: 0.9rem;

}
.circleRedsm {
background-color: red;
	width: 16px;                  /* circle size */
  height: 16px;
	font-size: 0.7rem;
}
.circleBluesm {
background-color: blue;
	width: 16px;                  /* circle size */
  height: 16px;
	font-size: 0.7rem;

}

p {
	margin-bottom: 5px;}
	
	 .column img {
  display: block;               /* make it block-level */
  margin: 0.2em auto;             /* centers it horizontally */
  text-align: center;           /* harmless but redundant, for clarity */
  max-width: 100%;              /* optional: keeps images responsive */
  height: auto;
}


.float-left {
  float: left;
  margin: 0 1em 0.5em 0;
  
}
.float-right {
  float: right;
  margin: 0 1em 0.5em 0;
  
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column, .columnImage, .columnText, .column2 {
 width: 100%;
  }
 
}



.Icons {border-radius: 7px;
border: 2px solid #343440; }
 img.Icons:hover {
	
border: 2px solid #990000; }


.ParagraphText {height: 95%;}

.content, .ParagraphText {
	 padding: 20px;
	 top: 10px;}