@import "reset.css";
@import "typography.css";

/****************************************************
  FOUNDATIONS: Base Containers  
****************************************************/
html {
  background: #fff;
}

body {
  text-align: center;
  background: url(../images/backgrounds/body-rpt.gif) top repeat-x;
}

#comfort-zone-wrap {
  margin: 0 auto;
  width: 976px;
  background: url(../images/backgrounds/comfort-zone-wrap.gif) center repeat-y;
}
#comfort-zone {
  margin: 0 auto;
  padding: 0 8px 0 8px; 
  width: 960px;
  overflow: hidden;
  text-align: left;
  background: url(../images/backgrounds/comfort-zone-top.gif) top no-repeat;
}

/****************************************************
  HEADER
****************************************************/
#header {
  border-bottom: 2px solid #8f9296;
  height: 140px;
  background: url(../images/backgrounds/header.jpg) no-repeat;
}
#header a {
  text-decoration: none;
}

#logo a {
  display: block;
  width: 245px;
  height: 110px;
}
#logo a span {
  visibility: hidden;
}

/****************************************************
  MAIN NAVIGATION
****************************************************/
#main-nav {
  clear: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
#main-nav li {
  float: left;
}
#main-nav li a {
  display: block;
  height: 30px;
}
#main-nav li a span {
  visibility: hidden;
}
li#nav-home {
  width: 103px;
  background: url(../images/navigation.gif) 0 0 no-repeat;
}
#page-home li#nav-home,
li#nav-home a:hover {
  background: url(../images/navigation.gif) 0 -30px no-repeat;
}
li#nav-about {
  width: 176px;
  background: url(../images/navigation.gif) -103px 0 no-repeat;
}
#page-about li#nav-about,
li#nav-about a:hover {
  background: url(../images/navigation.gif) -103px -30px no-repeat !important;
}
li#nav-driver-reviver {
  width: 244px;
  background: url(../images/navigation.gif) -279px 0 no-repeat;
}
#page-driver-reviver li#nav-driver-reviver,
li#nav-driver-reviver a:hover {
  background: url(../images/navigation.gif) -279px -30px no-repeat;
}
li#nav-bushells-tea {
  width: 161px;
  background: url(../images/navigation.gif) -523px 0 no-repeat;
}
#page-bushells-tea li#nav-bushells-tea,
li#nav-bushells-tea a:hover {
  background: url(../images/navigation.gif) -523px -30px no-repeat;
}
li#nav-tea-facts {
  width: 138px;
  background: url(../images/navigation.gif) -684px 0 no-repeat;
}
#page-tea-facts li#nav-tea-facts,
li#nav-tea-facts a:hover {
  background: url(../images/navigation.gif) -684px -30px no-repeat;
}
li#nav-tea-break {
  width: 138px;
  background: url(../images/navigation.gif) -822px 0 no-repeat;
}
#page-tea-break li#nav-tea-break,
li#nav-tea-break a:hover {
  background: url(../images/navigation.gif) -822px -30px no-repeat;
}

/****************************************************
  MAIN NAVIGATION DROPDOWNS
****************************************************/
div.dropdown {
  position: absolute;
}
div.dropdown ul {
  z-index: 999;
  margin: 0 0 0 0; 
  padding: 0 0 0 0;
  color: #86b8de;
  font-size: 11px;
  text-transform: uppercase;
  list-style: none;
  background: #112c58;
}
div.dropdown li {
  float: none;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #3b4f6f;
}
div.dropdown li a {
  display: block;
  padding: 8px 10px 7px 10px;
  text-shadow: black 1px 2px 2px;
  color: #86b8de;
}
div.dropdown li a:hover {
  color: #fff;
}


/* mug etiquette */

#rateMug{
  margin: 13px 0 0 0;
  padding: 0 10px 0 10px;
  width: 940px;
  min-height: 480px;
  height: auto !important;
  height: 480px;
}

/****************************************************
  CONTENT ZONE
****************************************************/
#content-zone {
  float: left;
  margin: 13px 0 0 0;
  padding: 0 10px 0 10px;
  width: 940px;
  min-height: 400px;
  height: auto !important;
  height: 400px;
  background: url(../images/backgrounds/content-zone.gif) right repeat-y;
}

/****************************************************
  CONTENT ZONE: MAIN CONTENT
****************************************************/
#main-content {
  float: left;
  width: 620px;
  overflow: hidden;
}

#main-content div.content-box {
  padding: 16px 2px 16px 18px;
  background: url(../images/backgrounds/content-box-gradiant.gif) top center no-repeat;
}

#main-content div.content-box p {
  width:340px;
}

/****************************************************
  CONTENT ZONE: SIDEBAR
****************************************************/
#sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

#sidebar .tout {
  width:300px;
  height:120px;
  margin: 0 0 10px 0;
}


#sidebar .tout a {
  width:300px;
  height:120px;
  display:block;
  background: no-repeat url(../images/touts/tout_arrow.gif) 17px 92px;
}

#sidebar .tout a:hover,
#sidebar .tout a:focus {
  background-position:20px 92px!important;
}

#tout-driver_reviver
{
  background: no-repeat url(../images/touts/driver_reviver-tout.jpg);
}

#tout-tea_break
{
  background: no-repeat url(../images/touts/tea_break-tout.jpg);
}

#tout-tea_test
{
  background: no-repeat url(../images/touts/tea_test-tout.jpg);
}

div.tout span { display:none;}


/****************************************************
  FOOTER
****************************************************/
#footer-wrap {
  margin: 0 auto;
  width: 976px;
  background: url(../images/backgrounds/comfort-zone-wrap.gif) center repeat-y;
}
#footer {
  margin: 0 auto;
  padding: 10px 8px 25px 8px; 
  width: 960px;
  overflow: hidden;
  background: url(../images/backgrounds/footer-btm.gif) bottom no-repeat;
}

#footerDiv
{
  background: repeat-x url(../images/div_h.gif) top;
  height:1px;
}

#quick-links {
  float: left;
/*  border-top: 1px dashed #c2dbee;*/

  
  padding: 30px 0 0 10px;
  width: 950px;
  background: url(../images/backgrounds/footer-quick-links.gif) top center no-repeat;
}

#quick-links div {
  float: left;
  display:inline;
  margin: 0 19px 0 19px;
}

#quick-links h4 {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #6ea3cc;
  text-decoration: none;
}
#quick-links p {
  font-size: 12px;
  color: #6ea3cc;
}
#quick-links ul {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
}
#quick-links ul li {
  margin-bottom: 2px;
}
#quick-links a {
  color: #86b8de;
}
#quick-links h4 a {
  color: #6ea3cc;
  font-weight: bold;
  text-decoration: none;
}
#quick-links a:hover,
#quick-links h4 a:hover {
  color: #112C58;
  text-decoration: none !important;
}

#quick-links div.about {
  width: 87px;
}
#quick-links div.driver-reviver {
  width: 152px;
}
#quick-links div.bushells-tea {
  width: 122px;
}
#quick-links div.tea-facts {
  width: 152px;
}
#quick-links div.tea-break {
  width: 97px;
}
#quick-links div.blurb {
  width: 170px;
}

#legal-info {
 clear: left;
 display: block;
 padding: 20px 20px 0 20px;
 color: #8896ac;
}
#legal-info a {
  color: #8896ac;
}
#legal-info a:hover {
  color: #fff;
}
#legal-info p, #legal-info ul {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 11px !important;
}
#legal-info ul li {
  display: inline;
  font-size: 11px;
  list-style: none;
}

#legal-info p.questions {
  float: left;
}
#legal-info ul.legal-nav {
  margin: 0 0 0 155px;
  float: left;
}
#legal-info ul.legal-nav a {
  text-decoration: none;
}
#legal-info ul.legal-nav li {
  padding: 0 10px 0 10px;
  background: url(../images/backgrounds/divider-footer-legal-nav.gif) right no-repeat;
}
#legal-info ul.legal-nav li.last {
  background: none;
}
#legal-info p.copyright {
  float: right;
}

/****************************************************
  MISC CLASSES
****************************************************/
.clear { 
  clear: both; 
}

img.main-pic {
  float: right; 
  margin-top: -5px; 
  padding-left: 10px; 
  padding-bottom: 10px;
}

.video-box {
  margin-bottom: 10px;
  padding-bottom: 10px;
  background: repeat-x url(../images/div_h.gif) bottom;
}
.video {
  width: 300px;
  height: 250px;
  background: #c2dbee; /* temporary background color please remove */
}