@charset "utf-8";

/* NOTE the background colors are from background images; this was so I wouldn't have to worry about web-safe colors. Ignore any background colors you see here. */

body {
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	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 */
	color: #58462C;  /* main beige color, overriden by internal css in other-color templates. */
	font-family: Times New Roman, Times, serif;
		background-image: url(bkgrnd.jpg)
}


/*MAJOR DIV STYLES */
.lefthdr { float: left; width: 15%;}
  /* lh side of title banner */
.righthdr { float: right; width: 15%;}
  /* rh side of title banner */
.oneColLiqCtrHdr #container {
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/* border: 1px solid #000000; */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(bkgrnd.jpg)
}
.oneColLiqCtrHdr #header {
	background: #DDDDDD;
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	background-image: url(bkgrnd.jpg);
}
.oneColLiqCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	/* padding: 10px 0;  using padding instead of margin will allow you to keep the element away from the edges of the div */
} 
.leftcol {
  float: left;
  width: 48%; /* used for double-column parts of pg */
    /* Note: it seems if you use padding or margin for a div property, it puts the padding or margin around the outside the div, or at least shifts the borders. That can mess up your page layout. But see div.toc below, which go inside these major divs. */
}
/*.rightcol {     Firefox will stick 2 leftcols side by side, but IE puts the 2nd leftcol below it. So here's a rightcol to combat it. However it's still puttig it below the left col, just to the right.  */
  float: right;
  /* width: 50%;  used for double-column parts of pg...BUT I had to comment it out to get the right column to stick to the left in IE */
    /* Note: it seems if you use padding or margin for a div property, it puts the padding or margin around the outside the div, or at least shifts the borders. That can mess up your page layout. But see div.toc below, which go inside these major divs. */
}
.oneColLiqCtrHdr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
	background-image: url(bkgrnd.jpg);
}
.oneColLiqCtrHdr #TOC {
	padding: 0 10%; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
	background-image: url(bkgrnd.jpg);
}
.oneColLiqCtrHdr #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#DDDDDD;
		background-image: url(bkgrnd.jpg)
} 


/* SUB DIV STYLES; go inside major div styles, to set margins */
div.contents {margin-left: 15%; margin-right: 15%;}
  /* main contents default pp style, use with div */
div.contentshalfcol {margin-left: 10%; margin-right: 10%;}
  /* half-col contents default pp style, use with div */
div.contactinfo {margin-left: 35%; margin-right: 35%;}
  /* use for constraining border width around contact info on index pg */
  
  
 /* CLEARING DIV POSITIONS when you have columns */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
  

/* LOCATION-SPECIFIC selectors (IDs) that include font styles (doesn't have to be location-specific in order to work, but since they will only be used there anyway, I may as well make them like this. Some were automatically css-formatted by DW. */
.oneColLiqCtrHdr #container #header h1.hdr {
	font-variant: small-caps;
	text-align:center;
	letter-spacing: .3cm;
}
.oneColLiqCtrHdr #container #header p.pgtitle {
	font-size: medium;
	font-style: italic;
	font-size: 150%;
	text-align:center;
}
.oneColLiqCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-variant: small-caps;
	text-align: center;
}


/* FONT STYLES not incl'd in above IDs */
h4.section {font-style: italic; text-align: center; letter-spacing: 0.3cm; font-weight: bold;}
  /* italics sub-subheading Updates, Contents, Discl, years on Update pg>) */
.topic {font-weight: bold; margin-top: 1.5cm;}
  /* main contents topic headings/questions pp style, incl top margin */
.res {margin-top: 1cm;}
  /* pp style for resources pg */
.upds {font-style: italic;}
  /* pp style for front pg Updates half-column */
p.double {border-style: double; } 
  /* double border around text */

  
/* TABLE OF CONTENTS STYLES */
ul.toc {list-style-type: circle}
  /* unordered list for table of contents */
div.toc {margin-left: 10%; margin-right: 10%;}
  /* div just for table of contents listing, encases it in R & L margins */
p.toctopics {font-variant: small-caps; font-weight: bold; margin-top: 1.5cm;}
  /* topic headers in toc, also for Images_int section headings */


/* DIVIDING LINES. Note they won't show up centered in DW. Color is overridden via int css for other colors. */
hr.long {height: 5px; width: 60%; color: #58462C; background-color: #58462C; text-align: center}
hr.short {height: 5px; width: 20%; color: #58462C; background-color: #58462C; text-align: center}