/**
 * AQUA Portal Master Stylesheet
 *
 * @author      Rizky Syazuli <rizky@magnivate.com>
 * @version     1b
 * @see         http://www.aqua.co.id/
 * @copyright   Copyright (c) 2010, Magnivate Connect
 *
 **/

/* =basic elements */
body { color:#999; line-height:17px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; }
h1, h2, h3, h4, h5 {
  font-family:'Calibri Regular', Arial, Helvetica, sans-serif;
  -webkit-text-stroke:1px transparent;
}
h2 {
  font-size:21px;
  line-height:1;
  font-family:'Calibri Bold', Arial, Helvetica, sans-serif;
  color:#666;
}
h3 {
  font-size:16px;
  font-family:'Calibri Bold', Arial, Helvetica, sans-serif;
  margin-bottom:4px;
  color:#707070;
}
h1 a, h2 a, h3 a, h4 a, h5 a, .detail a { color:#037bb9; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .detail a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, .detail a:focus { color:#037bb9; }
p { margin:0 0 15px; }
a { color:#36b0e4; text-decoration:none; }
a:hover, a:focus { color:#36b0e4; text-decoration:underline; }
dt {
  font-size: 16px;
  font-family:'Calibri Bold', Arial, Helvetica, sans-serif;
  margin-bottom: 15px;
  padding-top: 15px;
  background: url(../img/border-h.png) repeat-x;
}

/* =navigation list */
.nav { margin:0; padding:0; list-style:none; }
.nav li { margin:0; padding:0; float:left; }
.nav a { text-decoration:none; -webkit-text-stroke:1px transparent; }
.nav abbr, .nav acronym { border:none; }

/* =headers */
.header {
  height: 44px;
  margin-bottom: 20px;
  padding-left: 54px;
  position: relative;
  background: url(../img/ico-sections.png) no-repeat;
}
.header h2 { margin: 0; padding: 3px 0 2px; }
.header p {
  font-size:11px;
  margin-bottom:10px;
  color:#b2b2b2;
}
.header .button { position: absolute; top: 50%; right: 0; margin-top: -12px; }

.article .header { height: auto; margin: 0; padding-left: 0; background: none; }
.article .header p {
  padding-left:8px;
  background:url(../img/ico-corner.png) 0 4px no-repeat;
}
.widgets { clear: both; }
.widgets div { float: left; margin-right: 10px; }
.widgets .retweet { margin-top: 1px; }

.home #highlights .header { background-position: 0 -132px; }
.home #preview .header { background-position: 0 -176px; }
.news .header { background-position: 0 -44px; }
.tvc .header { background-position: 0 -88px; }
.aquacare .header { background-position: 0 -352px; }
.goodnessofnature .header { background-position: 0 -396px; }
.faq #highlights .header { background-position: 0 -220px; }
.faq #archive .header { background-position: 0 -308px; }
.inquiry .header { background-position: 0 -264px; }
.search .header { background-position: 0 -440px; }

/* =category header */
.detail {
  height: 33px;
  margin-bottom:18px;
  position: relative;
  clear: both;
  background: url(../img/ico-categories.png) no-repeat;
}
.detail span {
  float:left;
  line-height:31px;
  margin-left: 39px;
  background:url(../img/bg-label.png) 100% -31px no-repeat;
}
.detail span a {
  font-size:14px;
  font-family:'Calibri Bold', Arial, Helvetica, sans-serif;
  line-height:31px;
  display:block;
  margin-right: 15px;
  padding-left: 13px;
  background:url(../img/bg-label.png) no-repeat;
}
.detail a.btn-archive { position: absolute; top: 4px; right: 4px; float:none; }

.span-6 .detail span a { width:628px; }
.span-3 .detail span a { width:268px; }
.span-2 .detail span a { width:148px; }

.pregnancy .detail { }
.lactating-moms .detail { background-position: 0 -33px; }
.kids .detail { background-position: 0 -66px; }
.adults .detail { background-position: 0 -99px; }
.general .detail { background-position: 0 -132px; }
.consumer .detail { background-position: 0 -165px; }
.business .detail { background-position: 0 -198px; }

/* =tabs */
.tabs-nav {
  margin:0;
  padding:0;
  width:235px;
  height:36px;
  position:absolute;
  top:-36px;
  left:-12px;
  list-style:none;
}
.tabs-nav:after { content:""; display:block; clear:both; }
.tabs-nav li { font-size:15px; float:left; margin-right:-5px; }
.tabs-nav li:last-child { margin-right:0; }
.tabs-nav li.last { margin-right:0; }
.tabs-nav a {
  font-weight:bold;
  text-decoration:none;
  text-shadow:0 -1px 1px rgba(0,0,0,.3);
  text-align:center;
  text-indent:-10px;
  /*line-height:36px;*/
  display:block;
  height: 62px;
  /*height:1%;*/
  width:115px;
  overflow:hidden;
  background:url(../img/bg-tab-off.png) no-repeat;
  outline:none;
  color:#fff;
  padding-top: 10px;
}
.tabs-nav a.selected { background-image:url(../img/bg-tab-on.png); color:#037bb9; }

/* =misc */
img.holder, .holder img {
  display:block;
  border-radius:8px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
}
.img-med { display:block; padding-bottom:18px; background:url(../img/bg-shadow-med.png) 50% 100% no-repeat; }
.img-small { display:block; padding-bottom:12px; background:url(../img/bg-shadow-small.png) 50% 100% no-repeat; }
.img-thumb { display:block; padding-bottom:7px; background:url(../img/bg-shadow-thumb.png) 50% 100% no-repeat; }
hr.clear { display: block; margin: 0 0 18px; background:url(../img/border-h.png) bottom repeat-x; }

/* =header */
#header { width: 100%; background:#037bb9 url(../img/banner-inside.jpg) 50% 0 no-repeat; }
#header .container { position:relative; /*z-index: 4; background:#eee;*/ height:260px; }
#header .span-6 { margin-top:60px; }

/* =banner */
.banner { position:absolute; z-index:2; width:100%; left: 0; height:496px; overflow:hidden; }
.banner object { position:absolute; left:50%; width: 2000px; margin-left:-1000px; }

/* =droplet animation */
.js #drop {
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  height:700px;
  width:100%;
  /*background-color: rgba(11,111,190,.9);
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5);
  -moz-box-shadow: -5px 1px 5px rgba(0,0,0,.5);*/
  background: url(../img/bg-droplet.png) 50% 100% no-repeat;
}

.home #header #drop { height: 700px; }

/* =logo */
#logo { /*width:178px;*/ position:relative; z-index:8; }
#logo h1 { margin:0; }
#logo h1 a {
  text-indent:-9999px;
  display:block;
  width:178px;
  height:170px;
  overflow:hidden;
  background:url(../img/logo-aqua.png) no-repeat;
}
#logo p { font-size:11px; text-shadow:0 1px 1px rgba(0,0,0,.3); padding-left: 13px; color:#fff; }

/* =header nav */
#header .nav { float:right; margin-bottom:10px; position:relative; z-index: 10; clear:both; }
#header .nav * { color:#fff; }
#header .nav li {
  font-size: 15px;
  font-family: 'Calibri Bold', Arial, Helvetica, sans-serif;
  /*position:relative;*/
}
#header .nav li em { font-family: 'Calibri Bold Italic', Arial, Helvetica, sans-serif; }
#header .nav a {
  line-height:32px;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  position:relative;
  z-index:10;
  height: 1%;
  display:block;
  padding:0 10px 0 11px;
  outline:none;
  color:#fff;
}

/* =lava lamp slider */
#header .nav li.pointer {
  width:20px;
  height:32px;
  position:absolute;
  z-index:8;
  background:url(../img/btn-nav.png) 100% -32px no-repeat;
}
#header .nav li.pointer span {
  display:block;
  height:32px;
  margin-right:20px;
  background:url(../img/btn-nav.png) no-repeat;
}

/* =small utility nav */
#header .nav-small { clear:none; width: auto; padding: 0; }
#header .nav-small li {
  font-family: Arial, Helvetica, sans-serif;
  font-size:10px;
  text-transform:uppercase;
}
#header .nav-small a { line-height:21px; padding:0 8px; }
#header .nav-small li.pointer { height:21px; background:url(../img/btn-nav-small.png) 100% -21px no-repeat; }
#header .nav-small li.pointer span {
  height:21px;
  margin-right:15px;
  background-image:url(../img/btn-nav-small.png);
}

/* =quicklinks */
#nav-quicklinks {
  background: url(../img/border-v-white.png) 100% 50% repeat-y;
  margin-right: 5px;
  padding-right: 5px;
}
#nav-quicklinks a:hover, #nav-quicklinks a:focus { text-decoration: underline; }
#nav-quicklinks .btn-home a {
  padding-left: 15px;
  background: url(../img/nav/btn-home.png) 0 50% no-repeat;
}

/* =sub-menu */
#header .nav li div {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: right;
  width:380px;
  padding:10px 40px 40px;
  position:absolute;
  z-index:9;
  top:32px;
  right: -30px;
  display:none;
}
#header .nav li:hover div, #header .nav li:focus div,
#header .nav li.hover div { display:block; }
#header .nav h2 { font-weight:normal; line-height:1; margin-bottom:9px; }
#header .nav ul {
  padding:15px 0 0;
  background: url(../img/border-h-white.png) top repeat-x;
}
#header .nav ul li {
  float: none;
  display: inline;
  margin-right: 9px;
  padding-right: 8px;
  background: url(../img/border-v-white.png) 100% 0 repeat-y;
}
#header .nav ul li.last { background: none; margin: 0; padding: 0; }
#header .nav ul li:last-child { background: none; margin: 0; padding: 0; }
#header .nav ul a {
  display: inline-block;
  font-weight:normal;
  line-height:20px;
  padding: 0;
  background: url(../img/ico-nav.png) no-repeat;
}
#header .nav ul a:hover { text-decoration:underline; }
#header .nav .btn-waterandyou div { left: -30px; text-align: left; }
#header .nav .btn-nature div { width: 735px; }
#header .nav .btn-nature div p { width: 450px; display:inline-block; }

/* =sub-menu icons */
#header .nav .btn-adults a { background-position: 0 0; padding-left: 15px; }
#header .nav .btn-aksi a { background-position: 0 -24px; padding-left: 21px; }
#header .nav .btn-campaign a { background-position: 0 -46px; padding-left: 34px; }
#header .nav .btn-dns a { background-position: 0 -68px; padding-left: 24px; }
#header .nav .btn-gift a { background-position: 0 -91px; padding-left: 26px; }
#header .nav .btn-kids a { background-position: 0 -115px; padding-left: 21px; }
#header .nav .btn-lactating a { background-position: 0 -139px; padding-left: 21px; }
#header .nav .btn-newslist a { background-position: 0 -162px; padding-left: 21px; }
#header .nav .btn-pregnancy a { background-position: 0 -185px; padding-left: 18px; }
#header .nav .btn-preservation a { background-position: 0 -207px; padding-left: 23px; }
#header .nav .btn-products a { background-position: 0 -231px; padding-left: 25px; }
#header .nav .btn-selection a { background-position: 0 -254px; padding-left: 26px; }
#header .nav .btn-sus a { background-position: 0 -276px; padding-left: 26px; }
#header .nav .btn-tvc a { background-position: 0 -301px; padding-left: 21px; }
#header .nav .btn-younature a { background-position: 0 -324px; padding-left: 26px; }

#header .btn-health li a { background-image:url('../img/ico-nav-health.png'); }
#header .nav .btn-general a { background-position: 0 0; padding-left: 25px; } 
#header .nav .btn-organs a { background-position: 0 -24px; padding-left: 18px; } 
#header .nav .btn-scientific a { background-position: 0 -47px; padding-left: 20px; } 


/* =primary content */
#content {
  margin:-7px 0 0;
  padding-top:7px;
  position:relative;
  z-index: 2;
  background:url(../img/bg-body.png) repeat-x;
}
#content .container { background:url(../img/border-side.gif) 707px 0 repeat-y; }
#content .span-6 { margin-bottom: 30px; }

/* =ticker twitter */
#ticker { position:relative; padding:10px 0; margin:0 0 20px; border-bottom:1px solid #d7d7d7; }
#ticker h3, #ticker ul { float:left; margin:0 25px 0 0; }
#ticker h3 {
  text-indent:-9999px;
  width:20px;
  height:26px;
  background:url(../img/ico-twitter.png) 0 3px no-repeat;
}
#ticker ul { width:530px; padding:0; list-style:none; }
#ticker li { font-style:italic; /*padding:4px 0;*/ }
#ticker .btn-more {
  line-height:26px;
  float:right;
  padding-left:17px;
  background:url(../img/ico-arrow-right.png) 0 6px no-repeat;
}

/* =highlights */
#highlights {
  padding-bottom:20px;
  background:url(../img/border-h.png) bottom repeat-x;
}
#highlights h3 { font-size:22px; margin-bottom:13px; }
#highlights .detail { /*position:relative; margin-top:-16px;*/ }

/* =thumbnail cols */
#preview .span-2, #preview .column, #archive .span-2 {
  margin-right:0;
  padding-right:25px;
  background:url(../img/border-v.png) 227px 65px no-repeat;
}
#preview .last, #preview .last, #archive .last { padding-right:0; }

/* =content thumbnails - slider */
#preview .column {
  width: 127px;
  padding-right: 15px;
  padding-bottom: 10px;
  background-position: 134px 18px;
}
#preview .last { padding-right: 0; }

#preview { padding:20px 0; }
#preview ul { list-style:none; margin:0; padding:0; position: relative; }
#preview .header p { margin-bottom:15px; }
#preview .span-2 { padding-bottom:8px; background-position:227px 45px; }
#preview .span-2 p, #preview .column p {
  line-height:31px;
  position:absolute;
  z-index: 10;
  bottom:-45px;
  left:15px;
  display:none;
}
#preview .span-2:hover p, #preview .column:hover p { display:block; }
#preview .span-2 p span, #preview .column p span { font-size:11px; color:#b2b2b2; }
#preview .btn-archive { /*top:-5px;*/ }

/* =content thumbnail - grid */
#archive { /*padding-top:20px; background:url(../img/border-h.png) repeat-x;*/ }
#archive .header { /*height:62px;*/ }
#archive .span-2 {
  padding-bottom:20px;
  padding-top:20px;
  /*padding-right:25px;
  height:335px;
  position:relative;
  background:url(../img/border-v.png) 227px 45px no-repeat;*/
}
#archive .top { padding-top:0; background-position:227px 45px; }
#archive .button { /*position:absolute; bottom:0;*/ }

/* =content - list */
.list .header {
  /*margin-bottom: 0;
  padding-bottom: 10px;
  background:url(../img/border-h.png) bottom repeat-x;*/
}
.list .article {
  padding:20px 0 5px;
  margin-bottom:1px;
  background:url(../img/border-h.png) top repeat-x;
}
.list .article.even { /*background-color:#eae9e9;*/ }
.list .article.first { }
.list .article h3 { font-size:17px; margin-bottom:7px; }

/* =entry */
#entry h3 { font-size:22px; margin-bottom:13px; }
#entry .paging { float:left; width:667px; }
#entry .btn-archive { margin-top:27px; }
#entry .detail .btn-archive { margin-top:0; }
#entry .article .header { float:left; }

/* =sidebar */
#aside { position:relative; padding-top:6px; }
#aside h2 { margin:0; }
#aside .section {
  /*margin-left:-12px;*/
  padding:20px 0;
  background:url(../img/border-h.png) bottom repeat-x;
}
#aside  .button { float: left; }

#member { /*display:none;*/ }

/* =campaign box */
#campaign-box { /*margin-right:-100px; padding-right:100px;*/ }
#campaign-box ul { list-style:none; margin:0; padding:0; }
.js #campaign-box .article { /*float:left; width:215px; margin-right:25px;*/ }
.js #campaign-box .header { /*height:63px;*/ }

/* =facebook box */
#facebook p a {
  text-indent:-9999px;
  display:block;
  width:126px;
  height:47px;
  overflow:hidden;
  background:url(../img/btn-facebook.jpg) no-repeat;
}

/* =sticky footer */
#content { margin-bottom: 299px; }
.js #content { margin-bottom: 44px; }

/* =footer */
#footer {
  width:100%;
  height:299px;
  margin-top: -299px;
  overflow: hidden;
  position:fixed;
  left: 0;
  bottom:0;
  z-index:10;
  background:url(../img/bg-footer.jpg) repeat-x;
}
#footer * { color:#fff; }
#footer h4 {
  font-size:15px;
  font-family:'Calibri Bold', Arial, Helvetica, sans-serif;
  line-height:44px;
  text-shadow:0 -1px 1px rgba(0,0,0,.4);
  margin-bottom:25px;
}
#footer h4 span { padding-right:19px; background:url(../img/ico-arrow.png) 100% -17px no-repeat; }
#footer h4 span.open { background-position: 100% 2px; }
#footer .container { position:relative; }
.js #footer { height:44px; margin-top: -44px; }
.js #footer h4 span { cursor:pointer; }

/* =social box */
#social { font-size:13px; }
#social h5 {
  line-height:18px;
  text-indent:-9999px;
  margin-bottom:10px;
  background:url(../img/logo-fb-twitter.png) no-repeat;
}
#social .span-2 { width:214px; border-right:1px solid #fff; }
#social .last { border:none; }
#social .last h5 { background-position:0 -18px; }
#social .button { padding:0 23px; }

/* =nav footer */
#footer .links { float: left; }
#footer .nav { margin:0 0 7px; }
#footer .nav li {
  font-size:11px;
  line-height:1;
  padding:0 12px;
  background: url(../img/border-v-white.png) 100% 0 repeat-y;
}
#footer .nav li.first { padding-left:0; }
#footer .nav li:first-child { padding-left:0; }
#footer .nav li.last { padding-right:0; background: none; }
#footer .nav li:last-child { padding-right:0; background: none; }
#footer .nav a { font-weight:bold; text-transform:uppercase; text-shadow:0 1px 1px rgba(0,0,0,.5); }

.danone {
  float: left;
  width: 54px;
  margin: 0 13px 0 0;
  background: url(../img/border-v-white.png) 100% 0 repeat-y;
}
.danone a {
  text-indent: -9999px;
  display: block;
  width: 39px;
  height: 47px;
  overflow: hidden;
  background: url(../img/logo-danone.png) no-repeat;
}
.copyright { font-size:11px; text-shadow:0 1px 1px rgba(0,0,0,.4); }

/* =home page */
.home #header { background: none; }
.home #header .container { height: 496px; }
.home #preview .jcarousel-nav { float: none; width: auto; clear: both; }

/* =water & you page */
.waterandyou.archive_index #archive .span-2 { background-position:227px 115px; }

/* =faq page */
.faq #archive { padding-top:20px; }
.faq #archive ul { list-style:none; margin:0; padding:0; background:url(../img/border-h.png) top repeat-x; }
.faq #archive li { padding:10px 0; background:url(../img/border-h.png) bottom repeat-x; }
.faq #archive li a { font-weight:bold; color:#666; }
.faq #archive .span-2 { padding-top:0; background:none; }

.faq.archive_list #archive { padding-top:0; }
.faq.archive_list #archive .article.first { /*padding-top:10px;*/ }

/*.faq.archive_list #archive .article {
  padding:25px 0 10px;
  margin-bottom:1px;
  background:url(../img/border-h.png) bottom repeat-x;
}
.faq.archive_list #archive .article.even { }
.faq.archive_list #archive .article.first { padding-top:10px; }
.faq.archive_list #archive .article h3 { font-size:17px; margin-bottom:7px; }
.faq.archive_list #archive { padding-top:0; }*/

/* =tvc & aqua care page */
.tvc #entry .header { float:none; padding:10px 0 0; }
.tvc #entry .header h3 { font-size:15px; float:left; margin:0; }
.tvc #entry .header p { float:right; margin:0; }
.tvc .campaign object { display: block; margin: 0 auto; }
.tvc .campaign .article {
  background: #999;
  padding: 30px 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.campaign { padding-bottom: 21px; background:url(../img/border-h.png) bottom repeat-x; }
.campaign .header {
  float: none;
  /*padding-bottom:0.5em;
  margin-bottom: 0;*/
  /*background:url(../img/border-h.png) bottom repeat-x;*/
}
.campaign .widgets { padding: 0 0 10px; }
.campaign .article .header { float: left; padding: 0; background: none; }
.campaign .article .header h3 { font-size: 22px; margin-bottom:4px; }
.campaign .article h4 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #037ab8;
}
.campaign .article p { /*clear:both;*/ }
.campaign .article .button { float:right; }

.tvc #entry .article,
.aquacare #entry .article { padding-bottom:23px; background:url(../img/border-h.png) bottom repeat-x; }
.aquacare #preview .jcarousel-nav { float: none; width: auto; clear: both; }

/* =goodness of nature */
.goodnessofnature .sub-nav { margin-bottom: 30px; padding-left:0px }
.goodnessofnature .sub-nav li {
  padding-right: 8px;
  margin-right: 8px;
  background: url(../img/border-v.png) right no-repeat;
  list-style: none;
  float: left;
}
.goodnessofnature .sub-nav li:last-child { background: none; }
.goodnessofnature .sub-nav li.last { background: none; }
.goodnessofnature .sub-nav li a {
  display: block;
  padding: 0 0 0 23px;
  line-height: 20px;
  font-weight: bold;
  background: url(../img/ico-gon.png) no-repeat;
  color: #b2b2b2;
}
.goodnessofnature li a.current { color: #3394c6; }
.goodnessofnature li.btn-gift a { background-position: 0 0; }
.goodnessofnature li.btn-gift a.current { background-position: 0 -24px; }
.goodnessofnature li.btn-preservation a { background-position: 0 -48px; }
.goodnessofnature li.btn-preservation a.current { background-position: 0 -71px; }
.goodnessofnature li.btn-products a { background-position: 0 -94px; }
.goodnessofnature li.btn-products a.current { background-position: 0 -119px; }
.goodnessofnature li.btn-selection a { background-position: 0 -144px; }
.goodnessofnature li.btn-selection a.current { background-position: 0 -164px; }
.goodnessofnature li.btn-younature a { background-position: 0 -184px; }
.goodnessofnature li.btn-younature a.current { background-position: 0 -207px; }

.goodnessofnature .campaign .article h4 { margin-top: 20px; }

/* = water & health */
.waterandhealth .header { background-position:0 -483px; }

.waterandhealth .detail { background-image:url('../img/ico-categories-health.png'); }
.qna .detail { background-position:0 -38px; }
.general-health .detail { background-position:0 0; }
.scientific-articles .detail { background-position:0 -76px; }

/* =search result */
.search .list { margin-bottom: 18px; padding-bottom: 20px; background: url(../img/border-h.png) bottom repeat-x; } 
.search .list ul { list-style: none; margin: 0; padding: 0; background: url(../img/border-h.png) top repeat-x; }
.search .list .span-2 { margin-right: 0; padding-right: 25px; background: url(../img/border-v.png) 227px 65px no-repeat; }
.search .list .last { padding-right: 0; }
.search .span-6 .section { /*padding-top: 15px; background: url(../img/border-h.png) top repeat-x;*/ }
.search p.more { padding-top: 20px; margin: 0; clear: both; background: url(../img/border-h.png) top repeat-x; }
.search-result {
  font-size: 11px;
  line-height: 1.15;
  height: 31px;
  padding: 2px 0 0 43px;
  margin-bottom: 18px;
  background: url(../img/ico-sections-small.png) no-repeat;
}
.search-result span { font-size: 16px; font-family:'Calibri Bold', Arial, Helvetica, sans-serif; display: block; }

#news .search-result { background-position: 0 -33px; }
#aquacare .search-result { background-position: 0 -264px; }
#faq .search-result { background-position: 0 -231px; }
#tvc .search-result { background-position: 0 -66px; }
.member-box {
	margin-top: 25px;
}