/********** FUNCTIONAL CLASSES **********/
.clear {
  clear: both;
}
/********** END FUNCTIONAL CLASSES **********/
/********** CENTERED PAGE CONTAINER **********/
/* 
The left and right margins are set to auto to center the page.
The width of 980px is close to the maximum width allowable at 1024x768 when a horizontal scrollbar is 
on the screen. The padding-bottom is to create some spacing above the footer.
*/
#centeredpagecontainer {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
}
/********** END CENTERED PAGE CONTAINER **********/
/*
Within #centeredpagecontainer, the 970px width is filled by #leftsidebarcontainer (210px floated left)
and #rightheaderandcontentwrapper(mcs/wbc) (760px floated right). After those two elements, we use
a div.clear to clear the floats.
*/
/********** LEFT SIDEBAR **********/
/*
#leftsidebarcontainer is a fixed width sidebar that extends from the top of the page all the way down
to the footer.
*/
#leftsidebarcontainer {
  width: 190px;
  float: left;
}
/********** END LEFT SIDEBAR **********/
/********** HEADER AND CONTENT WRAPPERS **********/
/*
#rightheaderandcontentwrapper(mcs/wbc) is a container used so we can get the #contentandrightsidebarwrapper
div placed at the top of the HTML. We use padding-top and position:relative to leave space so that 
the #header, which will appear later in the HTML source code, can go at the top.
*/
#rightheaderandcontentwrappermcs {
  float: right;
  width: 788px;
  position: relative;
  padding-top: 155px;
}
#rightheaderandcontentwrapperwbc {
  float: right;
  width: 788px;
  position: relative;
  padding-top: 175px;
}
#rightcontentwrappernoheader {
  float: right;
  width: 788px;
  padding-top: 10px;
}
/*
#contentandrightsidebarwrapper is needed only so that the content area and the optional right
sidebar within the content area can be treated as a single block rendering below the #header.
*/
#contentandrightsidebarwrapper {
  width: 788px;
}
/********** END HEADER AND CONTENT WRAPPERS **********/
/********** HEADER **********/
/*
Since the containing element #rightheaderandcontentwrapper(mcs/wbc) uses position:relative, for the header
we use position:absolute to place the header at the top left corner of #rightheaderandcontentwrapper(mcs/wbc).
The height given to #header should match the padding-top value used for #rightheaderandcontentwrapper(mcs/wbc).
*/
#headercontainermcs {
  width: 788px;
  position: absolute;
  top: 0;
  left: 0;
  height: 155px;
}
#headercontainerwbc {
  width: 788px;
  position: absolute;
  top: 0;
  left: 0;
  height: 165px;
}
/********** END HEADER **********/
/********** CONTENT CONTAINER WITH SIDEBAR OPTIONS **********/
/*
There are three options for the high-level structure of the content area:
Option 1: Content area all by itself.
Option 2: Content area with fixed width sidebar on the right.
*/
/*
Nothing special needed for Option 1.
*/
#content {
  padding: 0 20px 10px 10px;
}
/*
For option 2, we want to reduce the width of #content and float it left
to accommodate a fixed width sidebar on the right of the content area, 
running from the bottom of the header to the top of the footer.
*/
#content.withsidebar {
  width: 588px;
  float: left;
}
/*
For option 2, the sidebar uses this ID. It's fixed width and floated to
the right.
*/
#rightsidebar {
  width: 190px;
  float: right;
  min-height: 150px;
  background-color: green;
}
/********** END CONTENT CONTAINER WITH SIDEBAR OPTIONS **********/
/********** Super Search **********/
.ui-autocomplete {
  max-height: 510px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}
/********** End Super Search **********/