/* ---------- Okinawa Tea Company Styles ---------- */


/* Global Styles */

body 	{
	background:#fffbc3 url(../images/bg.gif) repeat-x;
	font:12px Arial, Helvetica, sans-serif;
	color:#fff; margin:0; padding:0;
	font-weight:bold; }

p	{ margin:0; padding:0; }

a:link, a:visited { 
	font:12px Arial, Helvetica, sans-serif;
	color:#fff; text-decoration:underline;
	font-weight:bold; }

a:hover, a:active {	
	font:12px Arial, Helvetica, sans-serif;
	color:#fff; text-decoration:none;
	font-weight:bold; }
	
#container {
	width:986px; margin:0 auto; padding:0; position:relative;
	 }

#expand-wrap {
	width:986px; background:url(../images/bg-container.gif) repeat-y;
	float:left; }

#home-wrap {
	width:986px; background:url(../images/bg-container.gif) repeat-y; }


/* Top Logo */

#top {
	background:url(../images/top.jpg) no-repeat;
	width:986px; height:82px; }

#okinawa-logo {
	position:absolute; top:0; left:38px; z-index:999; }


/* Navigation Styles */

#wrapnav {
  position: relative; top:0; left:0;
  width:730px; height:31px; z-index:99;
  background:url(../images/nav.gif) no-repeat;
  padding:0 0 0 256px;
}

#wrapsubnav {
  overflow: visible;
  position: absolute; top:113px; left:0; z-index:99;
  width: 986px;
  font:12px Arial, Helvetica, sans-serif; font-weight: bold;
}

.subnav {
  background-color: #6c1d14;
  font:12px Arial, Helvetica, sans-serif;
  color:#fff; font-weight:bold; position:relative;
  z-index:999;
}
.subnav a {
  font:12px Arial, Helvetica, sans-serif;
  color:#fff; font-weight:bold;
  display: block;
  padding: 3px 10px 3px 11px;
  text-decoration: none;
  letter-spacing: 1px;
  border: 1px solid #7d3118; border-width:1px 0 0 0;
}
.subnav a.border-clear {
  font:12px Arial, Helvetica, sans-serif;
  color:#fff; font-weight:bold;
  display: block;
  padding: 3px 10px 3px 11px;
  text-decoration: none;
  letter-spacing: 1px;
  border:0;
}

.subnav a:link, .subnav a:visited {
	text-decoration:none; }
	
.subnav a:hover, .subnav a:active {
	text-decoration:none; }

.subnav a:hover {
  color: #fbc932;
  background-color: #c5380a;
}

.navgraphic {
  position: absolute; top: 0; left: 0;
  height: 31px; }

.navlink {
  display: block;
  position: absolute; top: 6px;
  height: 34px;
  background: none;z-index:999;
}

#navlinkorigins      { left: 256px; top:0; }
#navlinkorigins,
#navlinkorigins img  { width: 66px; border:0; }

#navlinkhealth      { left: 322px; top:0; }
#navlinkhealth,
#navlinkhealth img  { width: 150px; border:0; }

#navlinktea         { left: 471px; top:0; }
#navlinktea,
#navlinktea img     { width: 88px; border:0; }

#subnavorigins {
  visibility: hidden;
  position: absolute; top: 0; left: 256px;
}

#subnavhealth {
  visibility: hidden;
  position: absolute; top: 0; left: 322px;
}

#subnavtea {
  visibility: hidden;
  position: absolute; top: 0; left: 471px;
}

#subnavcommunitea {
  visibility: hidden;
  position: absolute; top: 0; left: 559px;
}

#navlinkcommunitea        { left: 559px; top:0; }
#navlinkcommunitea,
#navlinkcommunitea img    { width:103px; border:0; }

#navlinktmail    { left: 663px; top:0; }
#navlinktmail,
#navlinktmail img  { width: 63px; border:0; }

#subnavspecials {
  visibility: hidden;
  position: absolute; top: 0; left: 421px;
}

#navlinkcontact         { left: 725px; top:0; }
#navlinkcontact,
#navlinkcontact img     { width:95px; border:0; }

#navlinkspecialtea         { left: 819px; top:0; }
#navlinkspecialtea,
#navlinkspecialtea img     { width:139px; border:0; }

#navoriginsroll,
#navhealthroll,
#navtearoll,
#navcommunitearoll,
#navcontactroll,
#navtmailroll,
#navspecialtearoll {
  visibility: hidden;
}
/* End Navigation Styles */
	
/* Content Styles */

#home-content {
	background:url(../images/bg-content.gif) no-repeat;
	width:986px; margin:0; padding:0; position:relative;
	height:805px; }

#inside-content {
	background:url(../images/bg-content.gif) no-repeat;
	width:968px; margin:0; padding:26px 0 0 18px; float:left; }

	/* Homepage Main Content and Graphics */

	#sip-share {
		background:url(../images/bg-sip-share.jpg) no-repeat;
		width:226px; height:146px; margin:0; padding:0;
		float:left; position:absolute; top:73px; left:28px; }
		#sip-share p {
			margin:0; padding:0; position:absolute;
			top:113px; left:13px; }
		#sip-share-go {
	position:absolute;
	top:85px;
	left:162px;
}
		
	#t-mail {
		background:url(../images/bg-tmail.jpg) no-repeat;
		width:234px; height:158px; margin:0; padding:0;
		position:absolute; top:228px; left:28px; }
		
		#t-mail-more {
			position:absolute;
			top:115px;
			left:7px; }

    	#tea-slideshow {
        position: absolute; top: 20px; left: 262px; z-index: 0;
        margin: 0;
        padding: 0;
        padding-top: 8px;
        width: 386px;
        height: 370px;
        color: #D25823;
    		background: url(../images/movie-background.gif) no-repeat;
      }

      #tea-slideshow h1 {
        margin: 0;
        padding: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }

      #tea-slideshow ul {
        margin: 0 auto;
        padding: 0;
        width: 320px;
        height: 240px;
        list-style: none;
        overflow: hidden;
      }

      #tea-slideshow li {
        visibility: hidden;
        margin: 0;
        padding: 0;
      }

      #tea-slideshow li:first-child {
        visibility: visible;
      }

      #tea-slideshow footer {
        padding: 16px 32px;
        font-size: 11px;
        text-align: center;
      }

      @keyframes slide-in {
        from {
          opacity: 0.0;
        }
        to {
          opacity: 1.0;
        }
      }

      @keyframes slide-out {
        from {
          opacity: 1.0;
        }
        to {
          opacity: 0.0;
        }
      }

      #tea-slideshow ul {
        animation: 0.8s linear slide-in;
      }

      #tea-slideshow ul.slide-out {
        animation: 0.8s linear slide-out;
      }

      #tea-talk {
        position: absolute; top: 390px; left: 28px;
        margin: 0;
        padding: 0;
        width: 611px;
        height: 239px;
        background-image: url('/images/bg_teatalk_footer.jpg');
        background-position: bottom left;
        background-repeat: no-repeat;
      }

      #tea-talk header {
        width: 610px;
        height: 40px;
        background-image: url('/images/bg_teatalk_header.jpg');
        background-repeat: no-repeat;
      }

      #tea-talk h1 {
        margin: 0 0 0 16px;
        padding: 0;
        color: #CB4819;
        font-size: 16px;
        line-height: 40px;
      }

      #tea-talk ul {
        display: flex;
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
      }

      #tea-talk ul li {
        flex: 0 0 calc((100% - 20px) / 4);
        margin: 0 0 0 6px;
        padding: 0;
      }

      #tea-talk ul li:first-child {
        margin-left: 0;
      }


	#serenitea {
		background:url(../images/bg-serenitea.jpg) no-repeat;
		width:300px; height:163px; margin:0; padding:0;
		position:absolute; top:641px; left:28px; }
		#serenitea p {
			position:absolute; top:50px; left:14px; width:110px; }
		#go-serenitea {
			position:absolute; top:133px; left:14px; }
			
	#health-longevity {
		background:url(../images/bg-health-longevity.jpg) no-repeat;
		margin:0; padding:0; width:300px; height:163px; position:absolute;
		top:641px; left:340px; }
		#health-longevity p {
			position:absolute; top:50px; left:14px; width:110px; }
		#go-health-longevity {
			position:absolute; top:133px; left:14px; }

	#okinawa-longevity {
		background:url(../images/bg-okinawa-longevity.jpg) no-repeat;
		margin:0; padding:0; width:300px; height:163px; position:absolute;
		top:30px; left:656px; }
		#okinawa-longevity p {
			position:absolute; top:38px; left:76px; }
		#go-okinawa-longevity {
			position:absolute; top:110px; left:237px; }
			
	#ads {
		width:300px; height:250px; position:absolute;
		top:205px; left:656px; }
		
	#tea-houses {
		background:url(../images/bg-tea-houses.jpg) no-repeat;
		margin:0; padding:0; width:300px; height:162px; position:absolute;
		top:467px; left:656px; }
		#tea-houses p {
			position:absolute; top:38px; left:14px; color:#000; width:170px; }
		#go-tea-houses {
			position:absolute; top:130px; left:125px; }
			
		#tea-houses select {
			width:115px; height:20px; position:absolute;
			top:121px; left:14px; }

	#power-tea {
		background:url(../images/bg-power-tea.jpg) no-repeat;
		margin:0; padding:0; width:300px; height:163px; position:absolute;
		top:641px; left:656px; }
		#power-tea p {
			position:absolute; top:50px; left:14px; width:110px; }
		#go-power-tea {
			position:absolute; top:133px; left:14px; }
	
	/* End Homepage Main Content */
	
/* Terms and Conditions */

body#terms {
	background:#fef4ec url(../images/bg-terms.jpg) no-repeat;
	padding:140px 0 0 0; }
	
body#terms p {
	width:600px; margin:5px 20px 5px 20px; color:#000; font-weight:normal; }
	
	#terms-hdr {
		position:absolute; margin:0; padding:0;
		top:0; left:0; width:647px; height:145px;
		overflow:hidden; }
		
	#terms-conditions {
		position:absolute; margin:0; padding:0;
		top:140px; left:0; width:647px; height:425px;
		overflow:scroll; }

body#terms h2 {
	font-size:14px; color:#000; margin:0 0 5px 18px; padding:0; }

body#terms a { color:#c5390b; }

body#terms ul li { color:#000; font-weight:normal; }

/* Footer Styles */

#footer {
	background:url(../images/bg-footer.gif) no-repeat;
	width:986px; margin:0 auto; padding:35px 0 10px 0; text-align:center; }
	#footer p {
		color:#84825d; margin:0; padding:0; }
	#footer a:link, #footer a:visited { color:#84825d; text-decoration:underline; }
	#footer a:hover, #footer a:active { color:#84825d; text-decoration:none; }

/* Classes */
.clear { clear:both; }
.position { position:absolute; }
.red-txt { font:12px Arial, Helvetica, sans-serif; color:#c63a0c; font-weight:bold; }
.red-txt a:link, .red-txt a:visited { font:12px Arial, Helvetica, sans-serif; color:#4aa2d5; font-weight:bold; text-decoration:underline; }
.red-txt a:hover, .red-txt a:active { font:12px Arial, Helvetica, sans-serif; color:#4aa2d5; font-weight:bold; text-decoration:none; }
.orange_txt { color:#C73D0F; }