@import "global.css";

/* Setup for Fixed Width Centered
-------------------------------------------------
(Some standard rules here for a fixed-width design 
that is centered in the window.  Set text-align:center 
on the body tag.  For the wrapper, which encloses all 
content that is to be centered, two things are required:
  - give it a set width (770px)
	- set margin to: 0 auto
Addditionally, you may want to set text-align:left, so 
all the text isn't in the middle.)

Also, the main font is specified here.  The font size
is set to 62.5%, allowing you to later (like in #content) 
specify the font in 'em' units, but have them correspond to 
approximate 'px' values.  For example, 1.3em will correspond to
13px.  This allows fonts to be resized by the user 
in all browsers (specifying in 'px' prevents this)
================================================*/
body {
  font-family:Times New Roman;
  font-size:62.5%;
  text-align:center;
  background:#333 url(../images/hatch.png) repeat top left;
}
.wrapper {
  margin:0 auto;
  width:770px;
  text-align:left;
  padding:1px;
  border:0px #000 solid;
}

/* Header
-----------------------------------------------*/
#header {
  background:black;
  border-top:1px black solid;
  position:relative;
  padding-top:20px;
	height:1%;
}

/* Title and Tagline
-------------------------------------------------
(this is an H1 and H2, replaced by an image, 
but remaining in code for accessibility/rankings)
================================================*/
#header #title {
  text-indent:-9999px;
  background:transparent url(../images/logo.png) no-repeat top left;
  height:70px;
  margin:0;
  margin-left:10px;
}
#header #tagline {
  text-indent:-9999px;
  margin:0;
}

/* Contact List
-------------------------------------------------
(this is the list of phone numbers/emails at top
================================================*/
#header #contact-list {
	position:absolute;
	right:10px;
	bottom:10px;
	margin:0;
}
#header #contact-list li {
  font-size:1.6em;
  list-style:none;
  line-height:1.3em;
  color:#fff;
	text-align:right;
	font-weight:bold;
}

#header #caption-national {
	position:absolute;
	color:white;
	z-index:10;
	margin:0;
	padding:3px;
	width:240px;
	font-size:2em;
	font-family:Times New Roman, Georgia, serif;
	left: 303px;
	top: 26px;
}

.caption-national.center {
  position:center;
  text-align:center;
  left:0;
  bottom:0;

}

#header #mailto {
  font-size:.90em;
  list-style:none;
  line-height:1.3em;
  color:#fff;
	text-align:right;
	font-weight:bold;
}
#header #mailto:hover {
  text-decoration:underline;
}
/* Utility Navigation (un)
-------------------------------------------------
(this are the links at the top right.
================================================*/
#header #un {
  margin:0;
  padding:0;
  list-style:none;
  position:absolute;
  right:0;
  top:0;
}
#header #un li {
  display:inline;
  float:left;
  border-right:1px white solid;
}
#header #un li a {
  background:#eee;
  color:#333;
  text-decoration:none;
  padding:2px 15px;
  font-size:1.1em;
  display:block;  
}
#header #un li a:hover {
  background:#3d3d3d;
	color:white;
}

/* Primary Nav and Container (pn)
-------------------------------------------------
(this is the primary nav list, and a container
for it)
================================================*/
.pn-container {
  background:#3d3d3d;
}

/* This helps certain browsers clear a float, causing
   the background of pn-container to extend the entire
	 width */
.pn-container:after {
  content: "."; 
  display: block; 
  line-height: 1px; 
  font-size: 1px;
  color: transparent; 
  clear: both; 
} 

.pn {
  margin:0;
  padding:0;
  list-style:none;
  display:block;
  width:100%;
}
.pn li {
  float:left;
}
.pn li a {
  color:white;
  background:#3d3d3d url(../images/pn-bg-grad.png) repeat-x top left;
  text-decoration:none;
  font-size:1.1em;
  display:block;
  padding:10px 14px 10px 14px;
  border-right:2px white solid;
  font-weight:bold;
}

.pn li.last a {
  border-right-width:0;
}

.pn li a:active {
  background:#f00;
	color:white;
}

/* Active Page Highlight and hover style
-------------------------------------------------
(Each tab can logically be considered a section, as
subpages could appear and be categorized under a tab.
We apply a class to the <body> tag (e.g. "section-done").
The <li> tags in the primary nav have an 'id' attribute 
that corresponds to the sections (e.g. "pn-done"). To
make the correct tab highlight on any page where the 
<body>'s class is specified, we use the code below to
change the background and foreground colors of the link 
in the tab.)
================================================*/
body.section-yes #pn-yes a, 
body.section-yes2 #pn-yes2 a, 
body.section-future #pn-future a,
body.section-done #pn-done a,
body.section-notdone #pn-notdone a, 
body.section-questions #pn-questions a,
body.section-photos #pn-photos a,
body.section-specs #pn-specs a{
  background:#333;
  color:white;
}
.pn li a:hover {
  background:#333;
  color:white;
}

/* Masthead and Caption
-------------------------------------------------
(this controls the size and appearance of 
the image and the text.
Regardless of the size of the image used, the 
height is specified here (e.g. 200px).  Because of 
the overflow:hidden rule, anything beyond 200px is 
simply "cropped".  On subpages, the masthead can 
be given a class of "thin", limiting the height to
100px.

.caption applies the rules for the caption text, and 
classes of .capleft and .capright handle the positioning 
and text alignment.
================================================*/
#masthead {
  margin-top:1px;
  text-align:center;
  height:200px;
  overflow:hidden;
	border-bottom:1px #000 solid;
	position:relative;
}
#masthead.thin {
  height:100px;
}

#masthead .captionright {
	position:absolute;
	color:white;
	z-index:10;
	background:transparent url(../images/grid-trans.png) repeat left top;
	margin:0;
	padding:3px;
	width:250px;
	font-size:2.3em;
	font-family:Times New Roman, Georgia, serif;
	font-style:italic;
}

#masthead .caption {
  position:absolute;
  color:white;
  z-index:10;
  background:transparent url(../images/grid-trans.png) repeat left top;
  margin:0;
  padding:3px;
  width:200px;
  font-size:2.3em;
	font-family:Times New Roman, Georgia, serif;
	font-style:italic;
}
.caption.capleft {
  position:left;
  text-align:left;
  left:0;
  bottom:0;

}
.caption.capright {
  right:0;
  bottom:0;
	text-align:center;
}

/* Main Content Container
-------------------------------------------------
Content goes here.  Font size specified here for
the "guts" of the page.
================================================*/
#content {
  font-size:1.3em;
  background:white;
	padding:10px;
}

/* Footer and Footer Navigation
-----------------------------------------------*/
#footer {
  background:#3d3d3d;
  clear:both;
}

.fn-container {
  background:#000;
}

.fn {
  margin:0;
  padding:0;
  list-style:none;
  text-align:center;
  padding:5px 0;
}
.fn li {
  display:inline;
}

.fn li a {
  color:white;
  text-decoration:none;
  font-size:1.2em;
  padding:0 3px;
  border-right:1px white solid;
  font-weight:bold;
}
.fn li.last a {
  border-right-width:0;
}
.fn li a:hover {
  text-decoration:underline;
}

/* General Tag Styles
-----------------------------------------------*/
br.cleaner {
  clear:left;
	height:1px;
	display:block;
}
img {
  border:1px #FFFFFFF solid;
}

img.letmebreath {
  margin:0 8px 10px;S
}

img.thick {
  border:8px black solid;
}

h1, h2, h3 {
  font-family:Times New Roman, Georgia, serif;
	font-weight:normal;
}
h1 {
  font-size:1.8em;
}
h2 {
  font-size:1.4em;
}