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

/* This is where you would change default body type */
body {
	font-size: 16px;
	font-size: 1.142857143rem;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	color: #000000;
	width: 600px;
	margin:25px auto;
}

h1 {
	 padding: 0;
	 margin:0;
  }
  
h2 {
	  color: #ffffff;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 16px;
	  font-weight:bold;
	  font-style:italic;
	  line-height: 1.2; 
	  background-color: #4b2e83; 
	  padding: 5px;
	  margin-left: -10px;
  }
  
  h3 {
	  color: #000000;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 15px;
	  font-weight:bold;
	 /* line-height: 1.2;*/ 
	  }
	  
h4 {
	  color: #4b2e83;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 15px;
	  font-weight:bold;
	  line-height: .5; 
	  }
  
  p {
	  color: #000000;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 12px;
	  line-height: 1.5;
  }
  
  .uwpurple {color: #4b2e83;
  font-weight:bold;}
  
  .extraTopSpace {margin-top: 15px;}
  
.quote {
	font-style:italic;
	/*font-size: 15px;
	line-height:1.75;*/
	font-size: 12px;}
	
.quote2 {
	font-style:italic;
	font-size: 14px;
	font-weight:bold;
	line-height:1.75;}
	  
.share {
	margin-top: 20px;}
  
  ul { margin-top:-10px;}
  
  li {
	  font-size: 12px;
	  line-height: 1.5;
  }
			
a:link
	{
	color: #4b2e83;
	text-decoration:underline;
	}
	
#container {
    background-color: #d6d6d6;
    padding:0 14px;
    width: 100%;
	/*border-style: solid;
    border-width: 1px;*/
	overflow: auto;
}

#masthead {
	width: 100%;
	background-image: 		 url(http://haringcenter.org/publications/HaringCenterToday/nov2016/images/hcTodayHeaders10.2016.jpg);
	background-repeat:no-repeat;
	margin-top: 15px;
}

#header-left {
	text-align:center;
	width: 35%;
	padding: 5px 0px 0px 10px;
	}
	
#header-left p{
	line-height: 0;
	padding: 0;
	}

#tagline {
	width: 100%;
	padding: .5px 0px;
	background-color: #7862A2;
}
#tagline p{
	font-family:'Open Sans', arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 17px;
	line-height: 0;
	font-style:italic;
	text-align: center;
	padding-bottom: 5px;
	padding-top: 3px;
}

#main {
	float: left;
	width: 100%;
	background-color:#FFF;
	overflow: auto;
	}
	
#head1 {
	float: left;
	width: 69%;
	margin-right:4%;
	}
	
#head2 {
	float: left;
	width: 45%;
	margin-right:2%;
	}
	
#backToHC {
	float: left;
	text-align:center;
	width: 25%;
	margin-right: 2%;
	/*padding: 0 10px;*/
	background-color: #444444:
	}
	
.backToHC {
	color: #ffffff;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 16px;
	  font-weight:bold;
	  font-style:italic;
	  line-height: 1.2; 
	  padding: 5px;
	  margin-left: 0px;
	background-color: #444444;
	}
	
#backToHC a{
	color: #ffffff;
	text-decoration:none;
	}	
	
#backToHome {
	float: left;
	text-align:center;
	width: 25%;
	/*margin-right: 1%;*/
	/*padding: 0 10px;*/
	background-color: #85754d:
	}
	
#backToHome a{
	color: #ffffff;
	text-decoration:none;
	}
	
.backToHome {
	color: #ffffff;
	  font-family: 'Open Sans', arial, helvetica, sans-serif;
	  font-size: 16px;
	  font-weight:bold;
	  font-style:italic;
	  line-height: 1.2; 
	  background-color: #85754d; 
	  padding: 5px;
	  margin-left: 0px;
	}
	
#primary {
	float: left;
	width: 60%;
	margin: 1% 3% 3% 3%;
}

#primaryFull {
	float: left;
	width: 96%;
	margin: 1% 3% 3% 3%;
}

#secondary {
	float: left;
	/*background-color:#e4e0ed;*/
	width: 31%;
/*	padding:  0px 10px 10px 10px;*/
	margin-top: 3%;}
	
.events {
	float: left;
	/*background-color:#c9c1da;*/
	background-color:#f2f0d6;
	/*width: 28%;*/
	padding:  0px 5px 10px 10px;
	/*margin-top: 3%;*/
	margin-bottom: 15px;}
	
.events h2 {
	color: #000000;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight:bold;
	padding: 0px 10px;
	margin-top: 5px;
	background-color:#f2f0d6;
	}
	
.events h3 {
	color: #000000;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	}	
	
#pduTrainings {
	float: left;
	background-color:#e4e0ed;
	/*width: 28%;*/
	padding:  0px 5px 10px 10px;
	/*margin-top: 3%;*/
	margin-bottom: 15px;}
	
#pduTrainings h2 {
	color: #000000;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight:bold;
	padding: 0px 10px;
	margin-top: 5px;
	background-color:#e4e0ed;
	}
	
#pduTrainings h3 {
	color: #000000;
	font-family: 'Open Sans', arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	}
	
#footer {
	float: left;
	width: 100%;
	background-color:#FFF;
	overflow: auto;
	margin-bottom:20px;
	}
	
#footer-left {
	float: left;
	width: 30%;
	margin-left: 3%}
	
#footer-center {
	float: left;
	width: 33%;
	margin-top:20px;
	margin-bottom:15px;
	}
	
#footer-right {
	float: left;
	width: 33%;
	margin-top:20px;}
	
img { border: 0; margin: 0; padding: 0;}

img.alignright { float: right; margin: 0 10px 10px 10px;

 }

img.alignleft { float: left; margin: 5px 15px 5px 0; }	

img.aligncenter { float: left; margin: 5px 15px 15px 0; }	


.facts {
    background-color: #edeaf2;
    padding: 0 2% 0 2%;
    float: left;
    width: 30%;
	margin-right: 15px;
	margin-bottom: 10px;
}


.facts ul {margin-top:-10px;}
.facts li { font-family: "Open Sans",arial,helvetica,sans-serif;
    font-size: 14px;
    line-height: 1.75;
	margin-left: -15px;}

.quoteLeft {
    background-color: #edeaf2;
    padding: 0 2% 0 2%;
    float: left;
    width: 30%;
	margin-right: 15px;
}

.quoteRight {
    background-color: #edeaf2;
    padding: 0 2% 0 2%;
    float: right;
    width: 30%;
	margin-left: 15px;
	margin-right: 5px;
}


	
@media only screen and (max-device-width: 480px) {
#primary {
	width: 96%;
	margin-right: 3%;
	margin-left: 3%;
}
#secondary {
	width: 96%;
	margin-right: 3%;
	margin-left: 3%;}
	
.events {
	width: 96%;
	background-color:#f2f0d6;
	}

#pduTrainings {
	width: 96%;
	background-color:#e4e0ed;
	}
	
.quoteRight {
    margin-bottom: 5px;
}
#footer-left {
	float: left;
	width: 44%;
	margin-right: 3%;
	margin-left: 3%;}

#footer-center {
	float: left;
	width: 44%;
	margin-right:;
	margin-left: 3%;}
	
#footer-right {
	float: left;
	width: 44%;
	margin-right: 3%;
	margin-left: 3%;}
	}