/* ==============================================================================================
   Content Container
   -----------------
   Area that holds the Gallery and the Highlights Panel.

   Container 3 is the back most layer that has a dark gray background - full width.
   Container 2 is the middle layer that creates a gutter" that has a background that matches the
      outside of the page - moved to left 12px less than Container 1 to create "gutter."
   Container 1 is the top layer that creates the left most area that has white background -
      moved to left so that "gutter" and dark gray area will show.

   Nesting is necessary to get the white (left) and the dark gray (right) to stretch down
      together.  This happens because the content that is over the white area AND the content
      that is over the dark gray area are BOTH in the same container.  The content over the dark
      gray area is simply pushed over to the right so that it appears to be in the dark gray
      container.

   Currently the border around the white area does not stretch down if the right dark gray area
   is longer because the gallery area doesn't know how high the container is.
   ============================================================================================== */
#featuresContentContainer3 {
    float: left;
    width: 100%;
    background: #474747;
    overflow: hidden;
    position: relative;
	margin-bottom: 20px;		/* Only 12px shows; Only on Container 3 since it is the outside container; */
}
#featuresContentContainer2 {
    float: left;
    width: 100%;
    background: #eae8db;
    position: relative;
    right: 224px;				/* Move from the right 224px */
}
#featuresContentContainer1 {
    float: left;
    width: 100%;
    background: #eae8db;
    position: relative;
    right: 12px;				/* Move from the right 12px greating a 12px "gutter" */
}

#featuresLeftContainer {
	float: left;
	width: 712px;
	position: relative;
	left: 236px;			/* Move from the left 236px */
	padding: 0px;
}


/* ==============================================================================================
   Gallery
   -------
   Area that holds the Slide Show/Flash Movie and features Description.
   ============================================================================================== */
#featuresGallery {
	float: left;
	width: 700px;
	position: relative;
	border: 6px solid #cccccc;
	padding: 0px;
	color: black;
	margin-bottom: 20px;
}

#featuresGallery h2 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 36px;
	font-weight: normal;
	color: black;
	margin: 0px;
	margin-top: 50px;
	padding-bottom: 6px;
}

#featuresGallery p {
	margin-top: 0px;
	margin-bottom: 16px;
	font-size:14px;
	color: black; 
	text-decoration: none;
}

#featuresGallery a {
	color: black;
	text-decoration: underline;
}

#featuresGallery a:hover {
	border-bottom: 1px double black;
}

#featuresGallery img {
	margin: 0px;
	padding: 0px;
}

/* ==============================================================================================
   Gutter
   ------
   
   ============================================================================================== */
#featuresGutter {
	float: left;
	position: relative;
	width: 12px;
}

/* ==============================================================================================
   Information Panel
   -----------------
   Area of features information;
   ============================================================================================== */
#featuresHighlights {
	float: left;
	width: 188px;
	position: relative;
	left: 248px;					/* Move from left 248px */
	border: 6px solid #474747;
	padding: 2px 12px;
	color: white;
}

#featuresHighlights h2 {
	margin-top: 0px;
	margin-bottom: 7px;
	font-size: 35px;
	font-weight: 400;
}

#featuresHighlights h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 15px;
	font-weight: 700;
}

#featuresHighlights p {
	margin-top: 0px;
	margin-bottom: 18px;
	font-size: 13px;
}

#featuresHighlights a {
	color: white;
	text-decoration: underline;
}

#featuresHighlights a:hover {
	border-bottom: 1px white double;
}


#footer {
clear: both;
}

/* ==============================================================================================
   Tabs Container
   --------------
   Container for tabs.  Do not set UL and LI items in here for UL and LI items in the content.
   This won't work because the tabs themselves are UL and LI items.
   ============================================================================================== */
#featuresTabs {
}

/* ==============================================================================================
   Tab Content
   ---------------------
   Overrides for Content Area of tabs.
   ============================================================================================== */
.tabberlive .tabbertab {
	padding: 26px 36px;				/* Top padding must be greater than 0px or there is gab between the tabs and the tab content. */
}

.tabberlive .tabbertab h2 {
	margin-top: 0px;				/* For some reason, default margin-top is greater than 0px */
	margin-bottom: 0px;
	font-size: 20px;
	font-weight: normal;
	line-height: 22px;
	color: #474747;
}

.tabberlive .tabbertab h3 {
	margin: 0px;				/* For some reason, default margin-top is greater than 0px */
	margin-bottom: 0px;
	font-size: 18px;
	font-weight: normal;
	line-height: 19px;
	color: #990000;
}

.tabberlive .tabbertab a {
	margin: 0px;				/* For some reason, default margin-top is greater than 0px */
	margin-bottom: 0px;
	font-size: 15px;
	font-weight: normal;
	line-height: 21px;
	color: #990000;
	text-decoration: underline;
}

.tabberlive .tabbertab a:hover {
	text-decoration: underline;
	border-bottom: 1px #990000 double;
}

.tabberlive .tabbertab ul {
	margin-top: 0px;				/* For some reason, default margin-top is greater than 0px */
	margin-left: 10px;				/* Need to leave 10 on margin and 10 on padding b/c IE uses one and the others use the other. */
	padding-left: 10px;
	margin-bottom: 0px;				/* For some reason, default margin-bottom is greater than 0px */
	list-style-type: square;
}

.tabberlive .tabbertab li {
	font-size: 14px;
	font-weight: normal;
	line-height: 15px;
	color: #474747;
	text-decoration: none;
}

.tabberlive .tabbertab p {
	margin-top: 2px;
	margin-bottom: 10px;
	color: #474747;
	font-size: 13px;
	font-weight: normal;
	line-height: 19px;
}

.tabberlive .tabbertab img {
	float: right;
}



/* ==============================================================================================
   Footer
   ------
   Area for other information.
   ============================================================================================== */
#featuresFooter {
	margin: 0px;
	border: 1px solid black;
	padding: 20px;
	background-color: white;
	overflow: auto;
}