/*
Theme Name: Nutrisari Website
Theme URI: http://www.nutrisari.com
Description: an official website of Nutrisari
Author: Septi Yulia Sari aka. shape_tea
Author URI: http://www.stateoftheword.com/
Tags: colourful, orange, green, red, fixed width, three columns

	This theme was designed and built by shape_tea,
	whose blog you will find at http://www.stateoftheword.com/,
	This theme was specially designed for Nutrisari (http://www.nutrisari.com), 
	a brand from Nutrifood Indonesia (http://www.nutrifood.co.id).	
-------------------------------------------------------------------------*/

/*--------------- Standard Style ---------------*/

a, a:link, a:visited {
	color:#be0031;
	font-weight:normal;
	text-decoration:none;
	font-weight:bold;
}

a:hover {
	color:#D84E61;
	font-weight:normal;
	text-decoration:none;
	font-weight:bold;
}

.bgwood a, .bgwood a:link, .bgwood a:visited {
	color:#000;
	font-weight:normal;
	text-decoration:none;
	font-weight:bold;
}

.bgwood a:hover {
	color:#be0031;
	font-weight:normal;
	text-decoration:none;
	font-weight:bold;
}

a img, a:link img, a:visited img, a:hover img {
	border:none;
}

h1, h2, h3, h4, h5 {
	color:#58585a;
	font-size:100%;
	padding:0px;
	margin:0px;
	letter-spacing:0px;
	font-weight:bold;
	font-family: tahoma, "trebuchet ms", Verdana, Arial, Sans-Serif;
}

h1.logo {
	position:absolute;
	top:-45px;
	right:20px;
	z-index:1000;
}

h2 {
	font-size:160%;
	text-transform:uppercase;
	letter-spacing:-0.5px;
	color:#be0031;
	margin:5px 0px 10px 0px;
}

.section h2, *+html .section h2 {
	font-size:130%;
	padding: 10px 5px 5px 5px;
	margin:5px 10px 15px 0px;
	width:210px;
	text-align:center;
	text-transform:none;
	letter-spacing:0px;
	color:#333;
	font-weight:bold;
	letter-spacing:0px;
	line-height:18px;
        height:35px;	
}

*+html .section h2 {
	padding: 13px 5px 5px 5px;	
}

.section h2 a, .section h2 a:link, .section h2 a:visited {
	text-transform:none;
	letter-spacing:0px;
	color:#333;
}


.fullgallery h2 li {
	list-style-type:none;
}

h3 {
	font-size:130%;
	text-transform:none;
	letter-spacing:0px;
	line-height:16px;
	font-weight:bold;
	letter-spacing:0px;
	margin:0px 0px 7px 0px;
}

h4 {
	font-size:220%;
	text-transform:uppercase;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#d36412;
	letter-spacing:0px;
	line-height:20px;
	margin:0px 0px 10px 30px;
}

h5 {
	font-size:130%;
	text-transform:none;
	letter-spacing:0px;
	line-height:16px;
	margin:20px 0px 10px 0px;
	font-weight:bold;
	text-align:left;
	color:#be0031;
	float:left;
	width:100%;
}

ol {
	margin:20px 20px;
	padding:0px;
	float:left;
}

ol.quisioner {
	margin:0px 20px;
	padding:0px;
	float:left;
}

ol li {
	margin:10px 0px;
	padding:5px 0px;
	font-weight:bold;
	width:100%;
	float:left;
}

ol.quisioner li {
	margin:2px 0px;
	padding:0px 0px;
	font-weight:normal;
	width:100%;
	float:left;
}

.hand {
	cursor:pointer;
}

ul.fbicon {
	position:absolute;
	z-index:1000;
	left: 130px;
	top:50px;
        margin:0px;
        padding:0px;
        float:left;
        width:500px;
}

ul.fbicon li {
        float:left;
        margin:0px 4px;
        padding:0px;
        list-style-type:none;
}

/*--------------- all DIV container ---------------*/

#containerbg {
	width:900px;
	margin:0px auto;
	padding:0px;
}

#header {
	width:90%;
	margin:0px auto 0px auto;
	padding:0px;
	height:60px;
	position:relative;
}

#header ul {
	margin:0px auto 0px auto;
	padding:10px 0px;
	font-size:100%;
	font-weight:bold;
	text-align:center;
	position:absolute;
	right:0px;
}

#header ul li {
	display:inline;
	padding:0px 10px;
	border-right:#108541 solid 1px;
}

#header ul .last li {
	display:inline;
	padding:0px 10px;
	border-right:none;
}

#header ul .noborder li{
	display:inline;
	padding:0px 10px;
	border:none;
}

#header a, #header a:link, #header a:visited {
	color:#108541;
	text-decoration:none;
	font-weight:bold;
}

#header a:hover, #header a.current {
	color:#D36412;
	text-decoration:none;
}

#wrapper {
	width:90%;
	margin:0px auto 0px auto;
}

#content {
	width:100%;
	margin:20px auto 0px auto;
	padding:0px 0px 25px 0px;
	position:relative;
	float:left;
	background-image:url('images/grass.jpg');
	background-position:left bottom;
	background-repeat:no-repeat;
	background-color:#fff;
	min-height:600px;
}

#bgparallax {
	width:100%;
	height:316px;
	margin:0px;
	float:left;
}

#parallax {
	position:relative;
	overflow:hidden;
	width:809px;
	height:305px;
	margin:0px auto;
	border:none;
	background-color:transparent;
}
    
#parallax ul li {
	list-style-type:none;
}

#maincontent {
	width:100%;
	margin:0px;
	padding:0px 0px 30px 0px;
	float:left;
}

.section {
    float: left;
    font-size: 95%;
    line-height: 17px;
    margin: 5px 0px 0px 10px;
    padding: 5px 0px 10px 15px;
    text-align: left;
    width: 240px;
}

.cgreen {
    background-image:url('images/container-ns-green.png');
    background-position:center top;
    background-repeat:no-repeat;
	width:210px;
	padding-right:30px;
	height:200px;
}

.corange {
    background-image:url('images/container-ns-orange.png');
    background-position:center top;
    background-repeat:no-repeat;
	width:210px;
	padding-right:30px;
	height:200px;
}

.cdouknow, *+html .cdouknow {
    background-image:url('images/container-ns-doyouknow.png');
    background-position:center top;
    background-repeat:no-repeat;
	width:205px;
	height:160px;
	padding:80px 25px 0px 25px;
	margin:-7px 0px 0px 0px;
	font-size:110%;
	font-weight:bold;
	color:#000;
	text-align:center;
	line-height:19px;
	position:relative;
}

*+html .cdouknow {
	padding:90px 25px 0px 25px;
}

.moreknow {
	position:absolute;
	z-index:10000;
	right:30px;
	bottom:30px;
}

.section img {
	float:left;
	margin:0px 10px 10px 10px;
}

.section img.alignleft {
	float:left;
	margin:0px 15px 10px 0px;
}

.leftsidebar, .rightsidebar {
	float:left;
	margin:13px 10px 20px;
	padding:5px 0 5px 10px;
	text-align:left;
	width:17%;
}

.rightsidebar {
	width:12%;
	padding:10px 0px 5px 20px;
	margin:0px 0px 20px 5px;
}

.larger {
	width:18%;	
	margin:20px 0px 0px 40px;
	padding:0px;
	float:left;
}

.larger ul li {
	margin:7px 0px;
	color:#059742;
	line-height:18px;
	font-size:95%;
	list-style-image:url('images/small-bullet.png');
}

ul.sidebar {
	margin:0px 0px 0px 29px;
	padding:0px;
}

.rightsidebar ul {
	margin:20px 0px 0px 0px;
	padding:0px;
}

.rightsidebar ul li {
	margin:7px 0px;
	color:#059742;
	line-height:18px;
	font-size:95%;
	list-style-type:disc;
}

.rightsidebar ul a, .rightsidebar ul a:link, .rightsidebar ul a:visited {
	font-weight:normal;
}

.rightsidebar ul a:hover {
	font-weight:normal;
}


ul.sidebar li {
	margin:8px 0px;
	padding:0px;
	list-style-image:url('images/bullet.png');
	color:#108541;
}

ul.sidebar li ul {
	margin:5px 0px 0px 25px;
	padding:0px;
}

ul.sidebar li strong {
	color:#BE0031;
	font-weight:bold;
}

ul.sub li {
	margin:3px 0px;
	padding:0px;
	list-style-image:url('images/small-bullet.png');
	color:#7ca23b;
}

ul.sub li a, ul.sub li a:link, ul.sub li a:visited {
	font-weight:normal;
}

ul.sub li a:hover {
	font-weight:normal;
}

ul.sub li strong a, ul.sub li strong a:link, ul.sub li strong a:visited {
	font-weight:bold;
}

ul.sub li strong a:hover {
	font-weight:bold;
}

.post-content {
	border-left:2px solid #F0E780;
	border-right:2px solid #F0E780;
	float:left;
	margin:15px 0 20px;
	padding:0px 10px 45px 20px;
	text-align:left;
	width:58%;
}

.single-content {
	border-bottom:#ccc dotted 1px;
	float:left;
	margin:5px 20px;
	padding:10px;
	text-align:left;
        width:90%;
}

.fullrightborder {
	border-left:none;
	width:72%;
}

.full {
	border-right:none;
	width:72%;
}

.fullgallery {
	border:none;
	width:90%;
	float:left;
	margin:10px 0 5px;
	padding:0px 10px 5px 40px;
	text-align:left;
}

. {
	border-bottom:none;
	margin:5px;
}

.noline {
	border:none;
}

.post-content ul, .post-content ol {
	margin:0px 20px;
	padding:0px;
}

.post-content ul li, .post-content ol li {
	margin:10px 0px;
	padding:0px;
	font-weight:normal;
}

.post-content ul li strong, .post-content ol li strong {
	color:#2b7d17;
}

.language {
	position:absolute;
	z-index:500;
	top:50px;
	left:120px;
	color:#108541;
}

.language a, .language a:link, .language a:visited {
	color:#108541;
	text-decoration:none;
}

.language a:hover {
	color:#34a03e;
	text-decoration:none;
}

.bgwood {
    background-image:url('images/doyouknow/NutriSari-DoYouKnow-wooden.png');
	background-position:left top;
	background-repeat:no-repeat;
	width:565px;
	height:220px;
	margin-top:-10px;
}

.bgwood ul {
	float:left;
	margin:70px 40px 30px 60px;
	padding:10px 0px;
}

.bgwood ul li {
    float: left;
    font-weight: bold;
    list-style-type: none;
    margin: 0 2px;
    padding: 0 2px;
    text-align: center;
}

#footer {
	width:100%;
	padding:10px 0px;
	margin:0px auto;
	text-align:center;
	color:#108541;
	float:left;
}

.aligncenter {
	margin:5px auto;
	float:none;
	text-align:center;
}

.alignleft {
	margin:10px 15px 10px 0px;
	float:left;
}

img.imgleft {
	margin:15px 15px 10px 0px;
	float:left;
}

.alignright {
	margin:5px 0px 5px 15px;
	float:right;
}

.alignnone{
	margin:5px 7px;
}

.single-content img {
	background-color:#f1f1f1;
	padding:5px;
	border:#f5f5f5 solid 1px;
}

ul.mainlink {
	width:90%;
	margin:0px auto;
	padding:0px;
}

ul.mainlink li  {
	float:left;
	list-style-type:none;
	text-align:center;
	margin:10px 20px 25px 20px;
	padding:0px;
	color:#be0031;
}

.icon {
	margin:15px auto 20px auto;
	float:left;
	text-align:center;
}

ul.gallery {
	margin:5px;
	padding:0px;
	width:100%;
}

ul.gallery li {
	margin:0px;
	padding:0px;
	float:left;
	list-style-type:none;
}

.single-content img, .single-content a img, .single-content a:link img, .single-content a:visited img {
	background-color:#f1f1f1;
	padding:5px;
	border:#f5f5f5 solid 1px;
}

.single-content a:hover img {
	background-color:#F0D54F;
	padding:5px;
	border:#f5f5f5 solid 1px;
}

ul.gallery li img, ul.gallery li a img, ul.gallery li a:link img, ul.gallery li a:visited img {
	background-color:#f1f1f1;
	padding:5px;
	border:#f5f5f5 solid 1px;
}

ul.gallery li a:hover img {
	background-color:#F0D54F;
	padding:5px;
	border:#f5f5f5 solid 1px;
}

.quiz {
	margin:0px 30px;
	padding:0px 20px;
	width:110%;
}

.quiz h2 {
	margin:10px 15px 15px 15px;
}

.thxcontact {
	width:80%;
	margin:10px auto;
	padding:20px 0px;
	text-align:center;
}

.thxkuis {
	width:80%;
	margin:10px auto;
	padding:20px 0px;
	text-align:center;
background-color:#f2c900;
border:#faebaa dashed 3px;
}

ul.contact {
	margin:5px 15px 50px 15px;
	padding:0px 0px 20px 0px;
	width:80%;
	float:left;
}

ul.contact li, ul.contact li.title, ul.contact li.action {
	list-style-type:none;
	margin:6px 0px;
	padding:0px;
	width:40%;
	float:left;
}

ul.contact li {
	width:58%;
}

ul.contact li.action {
	width:100%;
}


.smallfield {
	width:80px;
	padding:3px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#666;
}


.nofield {
	width:20px;
	padding:3px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#666;
}

.field {
	width:250px;
	padding:3px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#666;
}

textarea {
	width:250px;
	height:80px;
	padding:3px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-size:100%;
	color:#666;
}

.asterisk {
	color:#be0031;
}

.notes {
	margin:20px auto 0px 15px;
	float:left;
}

.post-content .thxcontact {
	margin:10px 0px 20px 0px;
	padding:8px;
	background-color:#fdf5cd;
	text-align:center;
	color:#111;
}

.post-content .thxcontact strong {
	color:#009843;
}

.gmbr {
float:left;
position:relative;
padding-bottom:30px;
}

.gmbr .text {
position:absolute;
bottom:1px;
left:8px;
width:211px;
height:30px;
background-color:#f1f1f1;
color:#555;
font-size:90%;
letter-spacing:0px;
line-height:13px;
text-align:center;
padding-bottom:5px;
}

.btnpuzzle {
	background-image:url('images/button-kuis.png');
	background-position:left top;
	background-repeat:no-repeat;
        width:182px;
        height:25px;
        letter-spacing:-0.3px;
        text-align:center;
        color:#222;
}

#js-on {
	display:none;
}

body#bgparallax #js-off {
	display:none;
}

body#bgparallax #js-on {
	display:block;
}


.subproduct {
	float:left;
	width:100%;
	margin: 20px 0px;
	position:relative;
}

.subproduct ul {
	float:left;
}

.subproduct ul li {
	float:left;
	margin: 0px 0px;
	padding: 0px 0px;
	list-style-type:none;
	position:relative;
}

.pcarousel {
	margin: 0px 0px 0px 29px;
	padding: 0px 0px 0px 0px;
}

.prev {
	position:absolute;
	top:110px;
	left:-10px;
	z-index:0;
        width:45px;
        height:30px;
        border:none;
	background-color:transparent; 
	background-image:url('images/prev.png');
        background-position: left top;
        background-repeat:no-repeat;
        cursor:pointer;
}

.next {
	position:absolute;
	top:110px;
	right:-25px;
	z-index:0;
        width:45px;
        height:30px;
        border:none;
	background-color:transparent;
	background-image:url('images/next.png');
        background-position: right top;
        background-repeat:no-repeat;
        cursor:pointer;
}

ul.subprod {
    float: right;
    margin: 80px 20px 50px 0;
    padding: 0;
    width: 145px;
}

ul.subprod li {
margin:7px 0px;
padding:3px 0px;
color:#009438;
font-size:95%;
}

/*-------------------- Easy Slider -------------------*/

#slider {
	background-position:1px bottom;
	background-repeat:no-repeat;
	margin:0px auto;
	padding:0px 0px 0px 0px;
	position:relative;
	text-align:center;
	width:220px;
	top:0px;
	margin-left:0px;
	float:left;
}

#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	}
	
#slider2{margin-top:1em;}

#slider li, #slider2 li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 
	width:210px;
	overflow:hidden; 
	height:200px;
	}	

ul.video {
        margin:10px 0px 20px -5px;
        padding:0px;
        width:100%;
        float:left;
}

ul.video li {
        margin:0px;
        width:25%;
        float:left;
        text-align:center;
}

ul.video li img {
        border:#ddd solid 3px;
        text-align:left;
        cursor:pointer;
}

#playheritage, #playbalance, #playpome, #playjoshua {
        display:none;
        float:left;
        width:350px;
        text-align:center;
        margin:5px 200px 10px 200px;
        border:5px solid #DDDDDD;
}

#playheritage {
        display:block;
}

/*-------------------- Tooltips -------------------*/

#NT_copy {
background-color: #333333;
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
font-family: "Trebuchet MS";
width: 300px;
left: 0;
top: 0;
padding: 4px;
position: absolute;
text-align: left;
z-index: 20;
-moz-border-radius: 0 10px 10px 10px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=87);
-moz-opacity: .87;
-khtml-opacity: .87;
opacity: .87;
}

div.htmltooltip {
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: #272727;
border: 10px solid black;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}

.tooltip{
	-moz-border-radius:9px 9px 9px 9px;
background-color:#FCFCFC;
border:2px solid #FF6600;
color:#555555;
display:none;
font-size:100%;
font-weight:normal;
height:auto;
letter-spacing:0;
line-height:14px;
opacity:0.9;
padding:5px 15px;
position:absolute;
width:100px;
z-index:500;
}

a.link{

}

a.link div.tooltip strong{
	font-size:90%;
	font-weight:normal;
}

.tooltip ul {
margin:0px 10px 10px 15px;
float:left;
}

.tooltip ul li {
list-style-type:disc;
margin:2px 0px;
float:left;
width:100%;
}

.tooltip strong {
font-weight:bold;
}

ul.fiveholder {
	margin:10px auto 80px 130px;
	width:85%;
}

.findwrap {
	width:100%;
	margin-left:-60px;
	float:left;
}

.findout {
	float:left;
}

.findout ul {
	width: 330px;
	float:left;
	margin:25px 0px 25px 0px;
	padding:0px;
}

.findout ul li {
	float:left;
	margin:0px;
	padding:0px;
	width:53px;
	height:45px;
	list-style-type:none;
	list-style-image:none;
}

.findout ul li a img, .findout ul li a:link img {
	border:#FF9900 solid 1px;
	cursor:pointer;
}

.findout ul li a img:hover {
	border:#FF0000 solid 1px;
	cursor:pointer;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
}

.findout ul li a img.choosen {
	border:#FF0000 solid 1px;
	cursor:pointer;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

/*-------------------- IE Hacks -------------------*/

*+html body {
        background-color:#F2C900;
}

*+html h5 {
	font-size:130%;
	text-transform:none;
	letter-spacing:0px;
	line-height:16px;
	margin:20px 0px 10px -190px;
	font-weight:bold;
	text-align:left;
	color:#be0031;
	float:left;
	width:100%;
}

*+html .icon {
	margin:0px auto 30px auto;
	text-align:center;
}

*+html #maincontent {
	width:100%;
	margin:0px;
	padding:0px 0px 35px 0px;
	float:left;
}

*+html ul.sidebar {
	margin-left: 0px;
	padding-left: 20px;
	width:100%;
}

*+html ul.sidebar li {
	padding-left:10px;
}

*+html ul.mainlink {
	width:90%;
	margin:0px auto 50px auto;
	padding:0px;
}

*+html ul.mainlink li  {
	list-style-type:none;
	text-align:center;
	margin:0px 8px 25px 8px;
	padding:0px;
	color:#be0031;
	float:left;
	width:30%;
}

*+html .larger {
	float:left;
	margin:20px 0 0 40px;
	padding:0;
	width:16%;
}

*+html .larger  ul.sidebar {
	margin:0px 0px 0px -25px;
	padding:0px 0px 0px 20px;
}

*+html .larger  ul.sidebar li {
	padding:0px 0px 0px 3px;
	width:100%;
}

*+html .larger  ul.sub {
	margin-top:0px;
	margin-left:-30px;
	padding-left:25px;
}

*+html .larger  ul.sub li {
	padding:0px 0px 0px 5px;
}

*+html #pagecontent {
	padding-bottom:50px;
	margin-bottom:50px;
}

*+html ul.gallery li img, *+html ul.gallery a li img, *+html ul.gallery a:link li img, *+html 

ul.gallery a:visited li img {
	background-color:#f1f1f1;
	padding:5px;
	border:#f5f5f5 solid 1px;
	cursor:pointer;
}

*+html .notes {
	margin:20px auto 50px 15px;
	float:none;
	width:95%;
}

*+html #bgparallax {
	width:100%;
	height:316px;
	margin:0px;
	float:left;
}

*+html #parallax {
	position:relative;
	overflow:hidden;
	width:809px;
	height:305px;
	margin:0px auto;
	border:none;
	background-color:transparent;
}

*+html .prev {
	position:absolute;
	top:110px;
	left:-10px;
	z-index:0;
        width:30px;
}

*+html .next {
	position:absolute;
	top:110px;
	right:-25px;
	z-index:0;
        width:30px;
}

*+html div.htmltooltip {
position: absolute; /*leave this and next 3 values alone*/
z-index: 1000;
left: -1000px;
top: -1000px;
background: #272727;
border: 10px solid black;
color: white;
padding: 3px;
width: 250px; /*width of tooltip*/
}

*+html .tooltip{
	border:2px solid #FF6600;
	background-color: #fcfcfc;
	width:200px;
	height:auto;
	padding:0px 15px 0px 15px;
	display:none;
	position:absolute;
	-moz-border-radius:9px;
	color: #555;
	z-index:500;
	font-size:90%;
	font-weight:normal;
	line-height:14px;
	letter-spacing:0px;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
}

*+html .subproduct {
	float:left;
	width:100%;
	margin: 20px 0px;
	position:relative;
}

*+html .subproduct ul {
	float:left;
}

*+html .subproduct ul li {
	float:left;
	margin: 0px 0px;
	padding: 0px 0px;
	list-style-type:none;
	position:relative;
}

*+html .pcarousel {
	margin: 0px 0px 0px 25px;
	padding: 0px 0px 0px 0px;
}

*+html .prev {
	position:absolute;
	top:110px;
	left:-10px;
	z-index:0;
}

*+html .next {
	position:absolute;
	top:110px;
	right:-25px;
	z-index:0;
}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {
background-position:left -232px;
font-size:10px;
line-height:10px;
position:relative;
top:-6px;
}

.fb_share_count  {
background:none repeat scroll 0 0 #B0B9EC;
color:#333333;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
margin-top:-10px;
position:relative;
text-align:center;
top:-6px;
}

.pagenumber {
    float: right;
    margin: 0px 2px 80px 0;
    width: 72%;
}

.clock {
    position:absolute;
    z-index:100000;
    width:200px;
height:100px;
background-color:transparent;
right:25px;
top:50px;
        zoom: 1;
        filter: alpha(opacity=80);
        opacity: 0.8;

}

.share {
    margin-top:10px;
}