/* @group page-wide */

#container {
    width: 700px;
    font-family: Optima, Candara, "Trebuchet MS", sans-serif;
    letter-spacing: 0.25px;
   /* border-style: solid;
    border-color: #2f2934;
    border-width: 1px;*/
    background-color: #f9f9f9;
}

#container img {
    border: none;
}

#container h1, #container #footer{
    font-family: "Minion pro", times, "times new roman", serif;
    color: #ffffff;
    background-color: #2f2934;
    width: 100%;
    height: 55px;
    text-align: center;
    margin: 0 auto;
    padding-top: 15px;
	font-weight: normal;
}


#container ul li{
    list-style: none;
    display: inline;
}

#container ul li a{
	text-decoration: none;
	color: #000000;
}


#container .fruit_title, #container h2, #container #next_button{
    text-transform: uppercase;
}

.pub_name {
	font-style: italic;
}



/* @end */

/* @group home button */

#container #home_nav li {
	background-color: #e8e8e8;
    font-size: 8pt;
    padding: 3px 7px 3px 7px;
    border-style: solid;
    border-width: 1px;
    border-color: #999999;
    margin: 0 0 0 -6px;
    text-align: center;
    text-transform: uppercase;
}


#container #home_nav {
    position: absolute;
    top: 70px;
    left: -18px;
}

#container #home_nav li:hover {
    background-color: #999999;
    color: #ffffff;
}



/* @end */



#container h2 {
    font-size: 8pt;
    float: left;
    padding: 0 8px 0 4px;
    margin: 4px 0 0 0;
    font-weight: normal;
}

/* @group choose fruit */

#container #fruit_nav {
    display: inline;
    font-size: 8pt;
    width: 370px;
    position: absolute;
   // top: 84.5px;
    top: 85.5px;
    left: 350px;
    padding: 0 0 0 0;
    //background-color: #f0f4f5;
    height: 20px;
   /* border-style: solid;
    border-width: 1px;
    border-color: #999999;*/

}

#container #fruit_nav a {
    text-decoration: none;
    margin: 0 0 0 0;
}

#container #fruit_nav li{
    padding: 1px 4px 0px 4px;
    display: inline;
    margin: 0 -1.5px 0 -2px;
    border-style: solid;
    border-color: #f0f4f5;
    border-width: 1px;

}

#container #fruit_nav ul {
    padding: 0 0 0 0;
    margin: 4px 0 0 0;
}

#container #fruit_nav a {
    color: #ffffff;
}

#container #blueberry_nav {
    background-color: #686187;
}

#container #acai_nav {
    background-color: #2f2934;
}

#container #pom_nav {
    background-color: #e24a64;
}

#container #noni_nav {
    background-color: #cccf84;
}

#container #mangosteen_nav {
    background-color: #6d5240;
}

#container #goji_nav {
    background-color: #912a3b;
}

#container #blueberry_nav:hover, #container #pom_nav:hover, #container #noni_nav:hover, #container #mangosteen_nav:hover, #container #goji_nav:hover, #container #acai_nav:hover {
    background-color: #999999;
}



/* @end */

/* @group search popularity */

#container #triangle {
    position: absolute;
    top: 116px;
    left: 12px;
}

#container #popularity {
    position: absolute;
    color: #999999;
    font-size: 7.5pt;
    top: 104px;
    left: 25px;
}



/* @end */

/* @group explain numbers */

#container #numbers{
    position: absolute;
    top: 185px;
    left: 550px;
    font-size: 7.5pt;
}

#container #numbers a {
	color: gray;
}



#container #numbers_explain {
        position: absolute;
        top: 195px;
        left: 330px;
        font-size: 9pt;
        width: 350px;
        background: #2f2934;
        color: #ffffff;
        padding: 7px 7px 7px 7px;
        z-index: 100;
}



/* @end */

/* @group footer */

#container #footer {
    height: 50px;
    position: absolute;
    width: 700px;
    top: 516px;
}

#container #footer h3 {
    font-weight: normal;
    margin: -11px 0 0 0;
    padding: 0 0 0 0;
    font-size: 12pt;
}

#container #footer p {
    font-family: Optima, Candara, "Trebuchet MS", sans-serif;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 9pt;

}

#container #footer a {
    color: white;
}

#container #footer a:hover{
    color: #999999;
}

#logo{
	position: absolute;
	top: 5px;
	left: 635px;
}

#container #footer #credits {
	font-size: 7.5pt;
	
	margin: 8px 0 0 5px;
}

#container #footer #credits-title{
	text-transform: uppercase;
}

/* @end */


/*for intro page*/

/* @group intro / choose a fruit */

#container .fruit_label {
    position: absolute;
    top: 0px;
    left: 40px;
}

#container #choose_fruit h2 {
    margin: 12px 0 0 0;
}

#container #main_intro, #container #click {
    font-size: 10.2pt;
    line-height: 17pt;
    width: 576px;
    /*margin: 15px auto;*/
    position: absolute;
    top: 80px;
    left: 70px;
}

#container #click {
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 155px;
    
}

#container #view_blueberry img, #container #view_pom img, #container #view_noni img, #container #view_acai img, #container #view_mangosteen img, #container #view_goji img{
    float: left;
}



#container #view_blueberry {
    position: absolute;
    top: 195px;
    left: 170px;
}

#container #view_pom {
    position: absolute;
    top: 195px;
    left: 340px;
}

#container #view_noni {
    position: absolute;
    top: 195px;
    left: 500px;
}

#container #view_acai {
    position: absolute;
    top: 245px;
    left: 170px;
}

#container #view_mangosteen {
    position: absolute;
    top: 245px;
    left: 340px;
}

#container #view_goji {
    position: absolute;
    top: 245px;
    left: 500px;
}



/* @end */



/*DOTS, DESCRIPTIONS AND LINES*/

#container #next_button{
	margin:  0 0 0 3px;
	color: #000000;
	font-weight: bold;
}

#container #next_button:hover{
	color: #999999;
}

/* @group goji */

/* @group goji lines */

#container #goji_line1{
    top: 254px;
    left: 245px;
    height: 188px;
}

#container #goji_line2{
    top: 288px;
    left: 290px;
    height: 150px;
}

#container #goji_line3{
    top: 323px;
    left: 600px;
    height: 109px;
}

#container #goji_line4{
    top: 295px;
    left: 696px;
    height: 142px;
}

/* @end */

/* @group goji desc */

#container #goji_desc1 {
    top: 170px;
	left: 145px;
	width: 190px;
}

#container #goji_desc2 {
    top: 190px;
	left: 190px;
	width: 205px;
        
}

#container #goji_desc3 {
    top: 225px;
	left: 500px;
    width: 195px;
        
}

#container #goji_desc4 {
    top: 225px;
	left: 480px;
    width: 210px;
        
}

/* @end */

/* @group goji dots */

#container #goji_dot1 {
    position: absolute;
	top: 440px;
    left:235px    
}

#container #goji_dot2 {
    position: absolute;
    top: 435px;
    left:280px
    
}

#container #goji_dot3 {
    position: absolute;
    top: 430px;
    left:590px
    
}

#container #goji_dot4 {
    position: absolute;
    top: 435px;
    left:685px
    
}



/* @end */

/* @end */

/* @group all descriptions */

#container #acai_desc1, #container #acai_desc2, #container #acai_desc3, #container #acai_desc4, #container #acai_desc5, #container #acai_desc6, #container #acai_desc7, #noni_desc1, #noni_desc2, #noni_desc3, #noni_desc4, #mangosteen_desc1, #mangosteen_desc2, #mangosteen_desc3, #mangosteen_desc4, #mangosteen_desc5, #goji_desc1, #goji_desc2, #goji_desc3, #goji_desc4, #goji_desc5, #pom_desc1, #pom_desc2, #pom_desc3, #pom_desc4, #pom_desc5, #pom_desc6, #pom_desc7, #pom_desc8, #pom_desc9, #pom_desc10, #pom_desc11, #blueberry_desc1, #blueberry_desc2, #blueberry_desc3, #blueberry_desc4, #blueberry_desc5, #blueberry_desc6
{
	position: absolute;
	width: 170px;
	font-size: 9pt;
	color: #000000;
	background-color: #e8e8e8;
    padding: 5px 5px 7px 7px;
    line-height: 10.5pt;
    border-style: solid;
    border-color: #dddddd;
    border-width: 1px;
        

}


#container #acai_desc1 p, #container #acai_desc2 p, #container #acai_desc3 p, #container #acai_desc4 p, #container #acai_desc5 p, #container #acai_desc6 p, #acai_desc7 p, #noni_desc1 p, #noni_desc2 p, #noni_desc3 p, #noni_desc4 p, #mangosteen_desc1 p, #mangosteen_desc2 p, #mangosteen_desc3 p, #mangosteen_desc4 p, #mangosteen_desc5 p, #goji_desc1 p, #goji_desc2 p, #goji_desc3 p, #goji_desc4 p, #goji_desc5 p, #pom_desc1 p, #pom_desc2 p, #pom_desc3 p, #pom_desc4 p, #pom_desc5 p, #pom_desc6 p, #pom_desc7 p, #pom_desc8 p, #pom_desc9 p, #pom_desc10 p, #pom_desc11 p, #blueberry_desc1 p, #blueberry_desc2 p, #blueberry_desc3 p, #blueberry_desc4 p, #blueberry_desc5 p, #blueberry_desc6 p{
        margin: 0 0 0 0;
}

#container #acai_desc7, #noni_desc4, #mangosteen_desc5, #goji_desc5, #pom_desc11, #blueberry_desc6{
    width: 155px;
    top: 150px;
    left: 30px;
}



/* @end */

/* @group acai */

/* @group acai dots */

#container #acai_dot1 {
    position: absolute;
    top: 455px;
    left:88px
    
}

#container #acai_dot2 {
    position: absolute;
    top: 445px;
    left:196px
    
}

#container #acai_dot2-5{
	position: absolute;
	top: 400px;
	left: 420px;
}

#container #acai_dot3 {
    position: absolute;
    top: 202px;
    left:463px
    
}

#container #acai_dot4 {
    position: absolute;
    top: 380px;
    left:590px
    
}

#container #acai_dot5 {
    position: absolute;
    top: 410px;
    left:675px
    
}



/* @end */

/* @group acai desc */

#container #acai_desc1 {
    top: 169px;
	left: 19px;
}

#container #acai_desc2 {
    top: 215px;
	left: 110px;
	width: 195px;
        
}

#container #acai_desc3 {
    top: 165px;
	left: 225px;
    width: 218px;
        
}

#container #acai_desc4 {
    top: 160px;
	left: 130px;
    width: 280px;
        
}

#container #acai_desc5 {
    top: 235px;
	left: 480px;
	width: 215px;
        
}

#container #acai_desc6 {
    top: 220px;
	left: 500px;
	width: 190px;
        
}



/* @end */

/* @group acai lines */

#container #acai_line1, #acai_line2, #acai_line3, #acai_line4, #acai_line5, #acai_line6, #noni_line1, #noni_line2, #noni_line3, #mangosteen_line1, #mangosteen_line2, #mangosteen_line3, #mangosteen_line4, #goji_line1, #goji_line2, #goji_line3, #goji_line4, #blueberry_line1-line, #blueberry_line2, #blueberry_line3, #blueberry_line4, #blueberry_line5, #pom_line1-line, #pom_line2, #pom_line3, #pom_line4, #pom_line5, #pom_line6, #pom_line7, #pom_line8, #pom_line9, #pom_line10{
    position: absolute;
    background-color: #000000;
    width: 2px;
}

#container #acai_line1{
    top: 281px;
    left: 100px;
    height: 176px;
}

#container #acai_line2{
    top: 285px;
    left: 210px;
    height: 162px;
}

#container #acai_line3{
    top: 249px;
    left: 432px;
    height: 153px;
}

#container #acai_line4{
    top: 215px;
    left: 423px;
    height: 2px;
    width: 44px;
}

#container #acai_line5{
    top: 346px;
    left: 603px;
    height: 37px;
    
}

#container #acai_line6{
    top: 276px;
    left: 688px;
    height: 137px;
    
}

/* @end */



/* @end */

/* @group noni */

/* @group noni dots */

#container #noni_dot1 {
    position: absolute;
    top: 400px;
    left:125px
    
}

#container #noni_dot2 {
    position: absolute;
    top: 407px;
    left:220px
    
}

#container #noni_dot3 {
    position: absolute;
    top: 433px;
    left:590px
    
}



/* @end */

/* @group noni lines */

#container #noni_line1{
    top: 253px;
    left: 135px;
    height: 149px;
}

#container #noni_line2{
    top: 296px;
    left: 230px;
    height: 113px;
}

#container #noni_line3{
    top: 309px;
    left: 602px;
    height: 126px;
}

/* @end */

/* @group noni desc */

#container #noni_desc1 {
    top: 169px;
	left: 30px;
}

#container #noni_desc2 {
    top: 170px;
	left: 130px;
	width: 205px;
        
}

#container #noni_desc3 {
    top: 225px;
	left: 485px;
    width: 215px;
        
}



/* @end */

/* @end */

/* @group mangosteen */

/* @group mangosteen lines */

#container #mangosteen_line1{
    top: 296px;
    left: 230px;
    height: 150px;
}

#container #mangosteen_line2{
    top: 246px;
    left: 351px;
    height: 202px;
}

#container #mangosteen_line3{
    top: 323px;
    left: 600px;
    height: 131px;
}

#container #mangosteen_line4{
    top: 323px;
    left: 666px;
    height: 131px;
}

/* @end */

/* @group mangosteen desc */

#container #mangosteen_desc1 {
    top: 170px;
	left: 130px;
	width: 200px;
}

#container #mangosteen_desc2 {
    top: 190px;
	left: 250px;
	width: 190px;
        
}

#container #mangosteen_desc3 {
    top: 225px;
	left: 500px;
    width: 190px;
        
}

#container #mangosteen_desc4 {
    top: 225px;
	left: 492px;
    width: 200px;
        
}

/* @end */

/* @group mangosteen dots */

#container #mangosteen_dot1 {
    position: absolute;
	top: 445px;
    left:220px    
}

#container #mangosteen_dot2 {
    position: absolute;
    top: 447px;
    left:340px
    
}

#container #mangosteen_dot3 {
    position: absolute;
    top: 453px;
    left:590px
    
}

#container #mangosteen_dot4 {
    position: absolute;
    top: 453px;
    left:655px
    
}


/* @end */



/* @end */

/* @group blueberry */

/* @group blueberry lines */

#container #blueberry_line1-circ{
	position: absolute;
    top: 275px;
    left: 41px;
}

#container #blueberry_line1-line{
	position: absolute;
    top: 257px;
    left: 60px;
    height: 21px;
}

#container #blueberry_line2{
    top: 279px;
    left: 103px;
    height: 110px;
}

#container #blueberry_line3{
    top: 262px;
    left: 375px;
    height: 120px;
}

#container #blueberry_line4{
    top: 220px;
    left: 451px;
    height: 167px;
}

#container #blueberry_line5{
    top: 291px;
    left: 695px;
    height: 41px;
    
}


/* @end */

/* @group blueberry desc */

#container #blueberry_desc1 {
    top: 215px;
	left: 19px;
}

#container #blueberry_desc2 {
    top: 195px;
	left: 20px;
	width: 190px;
        
}

#container #blueberry_desc3 {
    top: 165px;
	left: 200px;
    width: 230px;
        
}

#container #blueberry_desc4 {
    top: 150px;
	left: 225px;
    width: 230px;
        
}

#container #blueberry_desc5 {
    top: 235px;
	left: 485px;
	width: 210px;
        
}




/* @end */

/* @group blueberry dots */

#container #blueberry_dot2 {
    position: absolute;
    top: 388px;
    left:93px
    
}

#container #blueberry_dot3 {
    position: absolute;
    top: 380px;
    left:365px
    
}

#container #blueberry_dot4 {
    position: absolute;
    top: 385px;
    left:440px
    
}

#container #blueberry_dot5 {
    position: absolute;
    top: 330px;
    left:685px
    
}

/* @end */



/* @end */

/* @group pomegranate */

/* @group pom lines */

#container #pom_line1-circ{
	position: absolute;
    top: 425px;
    left: 82px;
}

#container #pom_line1-line{
	position: absolute;
    top: 285px;
    left: 97px;
    height: 142px;
}

#container #pom_line2{
    top: 313px;
    left: 197px;
    height: 109px;
}

#container #pom_line3{
    top: 285px;
    left: 247px;
    height: 151px;
}

#container #pom_line4{
    top: 257px;
    left: 281px;
    height: 162px;
}

#container #pom_line5{
    top: 271px;
    left: 396px;
    height: 165px;
    
}

#container #pom_line6{
	position: absolute;
    top: 313px;
    left: 560px;
    height: 89px;
}

#container #pom_line7{
    top: 299px;
    left: 572px;
    height: 131px;
}

#container #pom_line8{
    top: 327px;
    left: 622px;
    height: 103px;
}

#container #pom_line9{
    top: 299px;
    left: 646px;
    height: 98px;
}

#container #pom_line10{
    top: 281px;
    left: 691px;
    height: 155px;
    
}


/* @end */

/* @group pom desc */

#container #pom_desc1 {
    top: 229px;
	left: 19px;
}

#container #pom_desc2 {
    top: 215px;
	left: 110px;
	width: 190px;
        
}

#container #pom_desc3 {
    top: 215px;
	left: 130px;
    width: 218px;
        
}

#container #pom_desc4 {
    top: 215px;
	left: 163px;
    width: 230px;
        
}

#container #pom_desc5 {
    top: 215px;
	left: 230px;
	width: 210px;
        
}

#container #pom_desc6 {
    top: 215px;
	left: 470px;
	width: 215px;
        
}

#container #pom_desc7 {
    top: 215px;
	left: 470px;
	width: 210px;
}

#container #pom_desc8 {
   	top: 215px;
	left: 410px;
	width: 280px;    
}

#container #pom_desc9 {
    top: 215px;
	left: 470px;
    width: 218px;
        
}

#container #pom_desc10 {
    top: 225px;
	left: 460px;
    width: 230px;
        
}



/* @end */

/* @group pom dots */


#container #pom_dot2 {
    position: absolute;
    top: 420px;
    left:185px
    
}

#container #pom_dot3 {
    position: absolute;
    top: 435px;
    left:235px
    
}

#container #pom_dot4 {
    position: absolute;
    top: 417px;
    left:270px
    
}

#container #pom_dot5 {
    position: absolute;
    top: 435px;
    left:385px
    
}

#container #pom_dot6 {
    position: absolute;
    top: 400px;
    left:548px
    
}

#container #pom_dot7 {
    position: absolute;
    top: 428px;
    left:560px
    
}

#container #pom_dot8 {
    position: absolute;
    top: 428px;
    left:610px
    
}

#container #pom_dot9 {
    position: absolute;
    top: 395px;
    left:635px
    
}

#container #pom_dot10 {
    position: absolute;
    top: 435px;
    left:680px
    
}

/* @end */



/* @end */

.transparent {
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        width: 100%; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=90);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.90;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.90;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.90;
}

.tooltip {
	display:none;
	background:#2f2934;
	font-size:12px;
	font-family: Optima, Candara, "Trebuchet MS", sans-serif;
	width:175px;
	padding: 3px 5px 4px 10px;
	color:#fff;	
}
}