/** layout.css
 * Custom and Standardized CSS for laying out websites.  Include after reset.css, and before elements.css.
 * Features:
 * Body: sets background color of whole web page
 * Container divs: custom divs for the template page
 * Container classes: wrapper for the actual content of the web page.  Sets width of design.  Based on variable version of 960 Grid System (http://960.gs). Amy changed to 910 width.
 * 	container_12 is a 12 column grid.  Could alternatively use container_16 or container_24, in which case the grid dimensions would need to be adjusted.
 * Grid classes: boxes of specified column widths--e.g. grid_2 is a box 2 columns wide
 * Prefix and suffix classes: add to total width of box by the specified number of columns, without changing width of content.  
 * 	In any row, the grid + prefix + suffix must add to the total number of columns in the container (12, 16 or 24), as adjusted for push and pull.
 * Push and pull classes: move a box left or right by specified number of columns without changing the actual total width of the element.
 * The container is treated as a class so you can have more than one per page (e.g. header, content, and footer areas with different backgrounds, but all containers)
 * The widths of the grid boxes are set in terms of the container--the width of a grid_2 in a container_12 is different from a grid_2 in a container_16, etc.
 */
@charset "utf-8";
body {
	background: #EAEAE9; /* was #FFFFFF; */
	margin: 0;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the container selector */
	width:100%;
}

/* Container divs
----------------------------------------------------------------------------------------------------*/
#wrapper {
	background-image:url(../images/wrapper-background2.gif);
	background-repeat:repeat-y;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding:0px;
	width: 910px;
}
#header {
	background-color:#FFFFFF;
	width:900px; /*was 100% switched from to 880 which is 910 minus 30 (10 padding, plus 5 margin on each side */
	margin:  0px 5px; /* 5px on each side allows for blue border lines to show up on either side */
	padding: 0px; 
	float:left;  /*has to float to "contain" logoSide, below, which floats right*/
}

#header #logo {
	padding: 12px 10px 12px 10px;
	margin-left:0px;
	margin-right:0px; 
}
#header #logoSide {
	float:right;
	width:191px;
	padding: 12px 0px 12px 0px; 
	margin:0;
	/*margin: 12px;*/
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(../images/helpline-yellow-background3.gif); 
	background-repeat:no-repeat;
	background-position:center;
}
#header #logoSide a {
	font-size:smaller;
}
#header #logoSide a:hover {
	color:white;
}

div#header div.ToolsSearch {
	float:right;
	font-family: "Trebuchet MS";
	font-size: 11px;
	margin: 44px 10px 10px 0px;
	font-weight:bold;
	color:#0048B2;
}
div.ToolsSearch a {
	text-decoration:none;
}
#headerToolsMap, #headerSearch {
	text-align:right;
}
#breadcrumbDiv {
  width: 100%; 
  background-color:#0048B2; 
  height:11px;
  padding:12px;
  margin-top:90px;
  margin-left:5px;
  margin-right:5px;
}
div#breadcrumbDiv {
width:876px;
}
#loginbox {
	color:#0048B2;
}
#loginbox a {
	text-decoration:none;
	color:#0048B2;
	font-weight: bold;
	font-family: "Trebuchet MS"; 
	font-size: 11px; 
	line-height: 11pt;
}
#referral p {
	font-family: "Trebuchet MS";
	font-size: 9.75pt;
	text-align:center;
	font-weight:bold;
	color:#0048B2; 
	margin: 0 0 0 0;
	white-space: normal;
	line-height:125%; 
}
#header #logoMain {
width:350px;
float:left;
}
#header .tagline {
text-align:center;
margin-bottom:0;
font-style:italic;s
padding-top:8px;
font-size:1.2em;
}
#content {
	float:left;
	width:100%;
}
#content.withSidebar {
	background-color: white;
	position:relative; 
	right:220px;
}
#contentInner {
	float:left;
	padding:6px 6px 0px 6px; 
	margin:6px 6px 0px 6px;
	width:693px;
}

body.home #contentInner {
	float:left;
	padding:0px; /* full width on home page for collage */
	margin:0px; /* full width on home page for collage */
	width:705px; /* On home page, use full width of ContentInner.withSidebar so that the photo collage fills the whole page */
}

#contentInner.withSidebar {
	overflow:hidden;
	position:relative;
	width: 681px;
	left:220px;
	background-color:#FFFFFF;
}

body.home #contentInner.withSidebar {
	overflow:hidden;
	position:relative;
	width: 705px; /* On home page, use Full Width of ContentInner.withSidebar so that the photo collage fills the whole page */
	left:220px; 
	background-color:#FFFFFF;
}

#sidebar {
	background-color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.9em;
	line-height:1.3;
	float:left;
	width:156px;
	padding:6px; 
	overflow:hidden;
	position:relative;
	left:232px; 
	margin:6px; 
}
#sideBack {
	background-color:#FFFFFF;
	background-image: url(../images/sideback-background.gif); 
	background-repeat:repeat-y;
	float:left;
	overflow:hidden;
	width:900px; 
	margin:0 5px;
}

#disclaimer {
	text-align:left;
	margin: 0px -12px; 
	padding: 0px;
	background-color:#FFF5CD;/* if revert to white, need to state explicitly to override footer color */
	}

div#disclaimer p { 
	font-style:italic;
	font-family: "Trebuchet MS"; 
	font-size: 11px; 
	color: #484848;
	margin:12px 12px 0px 12px;
	padding:12px;
}

#footer {
	clear:both;
	margin:0 5px;
	width:900px; 
	font-family: "Trebuchet MS";
	font-size:11px; /* originally .8em; */
	border-top:#00265A 1px solid;
	border-bottom:solid #000000 1px;
}
#footer p {
margin-bottom:0;	
	font-family: "Trebuchet MS";
	font-size:11px; 
	color:#484848;
	line-height:12px;
	padding:6px;
}
#disclaimer p sup, 
#footer p sup { 
font-size:11px;
}
#footer a {
text-decoration:none;
}
#footerInner {
	text-align: left;
	background-color: #FFFFFF;
	padding:10px;
}
div.footer-socialmedia {
float:right;
padding: 12px 12px;
}
h4.footer-socialmedia {
font-family: "Trebuchet MS"; font-size: 11px; color: #484848;
}

/* see menu.css for menuDiv */

/* showTowns styles
-------------------------------------------------------------------------- */
#townAnchors {
  border:1px solid black;
	padding:5px;
	background:#FFF6E7;
}
.townanchor {
  float: right;
}

div.ro.vcard {
	clear: both;
	float: left;
	width:100%;
	margin-bottom: 1em;
}
div.contact {
	float: left;
	width: 33%;
	overflow: hidden;
}
div.profile {
	float: left;
	width: 64%;
	margin-left: 1%;
}
.vcard p {
	margin:0;
}

/* Debugging Classes
 ------------------------------------------------------------------------- */
.bug {
	float: left;
	margin: 0em 0.5em;
	text-align:left;
}
div.bug {
	border: thin dashed black;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/*METHOD 1: THE OLD FASHIONED WAY OF CLEARING FLOATS, which requires adding an extra, empty div*/
/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/*METHOD 2:  clears floats without adding extraneous div's. 
 * When applied to parent element, also solves problem of child element breaking through border of grandparent.
 * IE doesn't require fixing the problem, because it does it "wrong" (ie the way you want) to begin with, 
 * so the fixes below are aimed at modern browsers */

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}