/* Planit CSS
Author: Syed|Maxim Group
Date:
 */

html,body{
margin:0;
padding:0;
font-family: Helvetica;
font-size:12px;
line-height:20px;
}

/* WRAPPER */
#wrapper{
width:974px;

}


/* Header BIG image */
#wrapper #header-image{
height:169px;
background-image: url(../images/generic.jpg);
/*background-color:#CBE00D;*/
background-repeat:no-repeat;
}

#wrapper #header-intek{
height:169px;
background-image: url(../images/intek.jpg);
/*background-color:#CBE00D;*/
background-repeat:no-repeat;
}

#wrapper #header-marine{
height:169px;
background-image: url(../images/marine.jpg);
/*background-color:#CBE00D;*/
background-repeat:no-repeat;
}

#wrapper #header-bluewinghonda{
height:169px;
background-image: url(../images/bluewinghonda.jpg);
/*background-color:#CBE00D;*/
background-repeat:no-repeat;
}

#wrapper #header-powerproducts{
height:169px;
background-image: url(../images/powerproducts.jpg);
/*background-color:#CBE00D;*/
background-repeat:no-repeat;
}


/* LOGO */
#logo{
padding:20px 0 0 148px

}


/* Top Navigation */
#mainnav { width: 840px; height:36px; position:absolute; margin:24px 0 0 10px  }
#mainnav #nav { margin: 0; padding: 0; }
#mainnav #nav li { display: inline; }
#mainnav #nav li a { float: left; width: 120px; height: 0; padding-top: 36px; overflow: hidden; }
#mainnav #nav li a,

#mainnav #nav li a  { background-image: url(../images/menux.png); background-repeat: no-repeat; }

/* Buttons */
#mainnav #nav li#home a { background-position: 0 0; }
#mainnav #nav li#home-on a { background-position: 0 -74px; }
#mainnav #nav li#policy a { background-position: -120px 0; }
#mainnav #nav li#policy-on a { background-position: -120px -74px; }
#mainnav #nav li#actions a { background-position: -240px 0; }
#mainnav #nav li#actions-on a { background-position: -240px -74px; }
#mainnav #nav li#stories a { background-position: -360px 0; }
#mainnav #nav li#stories-on a { background-position: -360px -74px; }
#mainnav #nav li#news a { background-position: -480px 0; }
#mainnav #nav li#news-on a { background-position: -480px -74px; }
#mainnav #nav li#links a { background-position: -600px 0; }
#mainnav #nav li#links-on a { background-position: -600px -74px; }
#mainnav #nav li#partners a { background-position: -720px 0; }
#mainnav #nav li#partners-on a { background-position: -720px -74px; }

/* Over states */
#mainnav #nav li#home a:hover { background-position: 0 -37px; }

#mainnav #nav li#policy a:hover { background-position: -120px -37px; }

#mainnav #nav li#actions a:hover { background-position: -240px -37px; }
#mainnav #nav li#stories a:hover { background-position: -360px -37px; }
#mainnav #nav li#news a:hover { background-position: -480px -37px; }
#mainnav #nav li#links a:hover { background-position: -600px -37px; }
#mainnav #nav li#partners a:hover { background-position: -720px -37px; }

/* Pressed states */
#mainnav #nav li#home a:active { background-position: 0 -74px; }
#mainnav #nav li#policy a:active { background-position: -120px -74px; }
#mainnav #nav li#actions a:active { background-position: -240px -74px; }
#mainnav #nav li#stories a:active { background-position: -360px -74px; }
#mainnav #nav li#news a:active { background-position: -480px -74px; }
#mainnav #nav li#links a:active { background-position: -600px -74px; }
#mainnav #nav li#partners a:active { background-position: -720px -74px; }

#content {
width:974px;
}

/* LEFT BLOCK*/
#content #leftblock{
padding-top:52px;
margin-left:20px;
_margin-left:10px;
width:102px;
height:300px;
float:left;
/*border:1px solid #ccc;*/
}


#leftblock #navlist{
padding-left: 0;
margin-left: 0;
}

#leftblock #navlist li{
list-style: none;
margin: 0;
padding: 0.25em;
border-bottom: 1px solid gray;
}

#leftblock #navlist li.end{
border-bottom-style:none;
}

#leftblock #navlist li a { text-decoration: none; color:#000 }
#leftblock #navlist li.on a { text-decoration: none; color:#24690e }


/* CENTER BLOCK */
#content #centerblock{
float:left;
padding-top:10px;
margin-left:20px;
width:460px;
}

#content h3{font-size:10px; line-height:12px; margin:0 }


#content #centerblock-twocol{
float:left;
padding-top:10px;
margin-left:20px;
width:460px;
}



#content #centerblock h1{
margin:0;
padding:0;
font-size:18px;
line-height:10px;
font-weight:normal;
}


#content #rightblock{
float:left;
padding-top:17px;
/*width:70px;*/
margin-left:20px;
/*padding-top:50px;*/
}



#content p.intro{
font-size:20px;
color:#24690e;
line-height:25px;
margin:0 0 10px 0;
}


#content p{
line-height:25px;
margin:0 0 10px 0;
}

#content  .black{
color:#000;

}


/* CONTENT NAV */
#content #breadcrumb {
padding-top:20px;
padding-left:140px;
color: #666;
text-transform: lowercase;

}


/* Arrow */

.arrow {_margin-top:10px}



/* FOOTER */
#footer{
clear:both;
margin-top:20px;
}


/* REMOVE BORDER WHEN CLICKED ON IMAGE */
a img, img { border: 0; }



p h1,h2{
margin:0;
padding:0;
font-size:11px;
}

h2.gtitle{ color:#24690e}
h2.btitle{ color:#000}

 ul, ol, dl {
              position: relative;  }




ul.box{
list-style-type:square; margin-left:1.2em;
}

ul.box li{
line-height:25px;
margin-bottom:8px;
}



ul.arrow, ul.arrow li {
    margin:0;
    padding: 0;
    list-style: none;
}

ul.gap, ul.gap li {
    margin-left:-1.3em;
    padding: 0;
    list-style: none;
}

ul.arrow li {
    background-image: url(../images/arrow.gif); /* Replace bullet.gif with your img */
    background-position: left center; /* Position bullet */
    background-repeat: no-repeat;
	margin-bottom:0.5em;
    padding-left: 10px; /* Add padding so text doesn't cover bullet img */
}




/* LINKS */
a:link{text-decoration:none; color:#24690e}
a:hover{ text-decoration:underline; color:#24690e}
a:visited{text-decoration:none; color:#24690e}


a.bc:link{text-decoration:none; color:#000; text-decoration:underline}
a.bc:hover{ text-decoration:underline; color:#24690e}
a.bc:visited{text-decoration:none; color:#000;text-decoration:underline}

a.blackb:link{text-decoration:none; color:#000; text-decoration:underline; font-weight:bold}
a.blackb:hover{ text-decoration:underline; color:#24690e;font-weight:bold}
a.blackb:visited{text-decoration:none; color:#000;text-decoration:underline;font-weight:bold}



/* GREEN BOLD TEXT */
.green-bold{font-weight:bold;color:#24690e}

/* GREEN NORMAL TEXT */
.green-normal{color:#24690e}

/* wrapping text around images */
.caption { margin: 5px 0 0 5px; padding: 5px 0 0 5px; }
.right { float: right; }
.left { float: left; }


blockquote {
font-weight:bolder;
margin:0 0 10px 0;
color:#24690E;
}

/* IMAGE MAP */

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:100px; height:423px; background:url(../images/logos.gif) no-repeat; position:relative; margin:-20px auto; float:left; }

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #honda {left:0px; top:10px; z-index:20;  height:75px; width:90px; line-height:50px}
#imap #honda-power {left:0px; top:90px; z-index:20; height:50px; width:90px;}
#imap #intek {left:0px; top:158px; z-index:20; height:50px; width:90px;}
#imap #honda-marine {left:0px; top:216px; z-index:20; height:50px; width:90px;}
#imap #fyran {left:0px; top:286px; z-index:20; height:50px; width:90px;}



/* style the <dd><a> links physical size and the background image for the hover */
#imap a#hondac, #imap a#honda-powerc, #imap a#intekc, #imap a#honda-marinec, #imap a#yanmarc, #imap a#fyranc {display:block; width:120px; height:55px;text-decoration: none; }

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;text-decoration: none;}

/* move the link background image to position 0 0 when hovered */
#imap a#hondac:hover, #imap a#honda-powerc:hover, #imap a#intekc:hover, #imap a#honda-marinec:hover, #imap a#yanmarc:hover, #imap a#fyranc:hover {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:223px; height:108px;  display:block; background-image: url(../images/pop.gif); color:#000;
padding:5px 10px 10px 10px; text-decoration: none; font-size:11px; background-repeat:no-repeat; font:Helvetica; line-height:14px;}

/* move the span text to a common position at the bottom of the image map */
#imap a#hondac:hover span {left:-240px; top:0px; }
#imap a#honda-powerc:hover span {left:-240px; top:10px;}
#imap a#intekc:hover span {left:-240px; top:2px;}
#imap a#honda-marinec:hover span {left:-240px; top:9px;}
#imap a#yanmarc:hover span {left:-240px; top:4px;}
#imap a#fyranc:hover span {left:-240px; top:0px;}

/* INTEK NEWS */
h4{margin:0 0 2px 0; color:#24690e; font-weight: bold; padding:0; font-size:12px}
h4 span{color:#000; font-size:12px}
p.last{border-bottom:1px solid #ccc; padding-bottom:10px; }

/* HORIZONAL BREADCRUMB */

#subnav li{
margin:0;
padding:0;
}

#subnav li,ul{
margin:0;
padding:0;
}


#subnav li{
display: inline;
padding-right: 10px;
margin:0;
}



/* IMAGES IN ACTIONS PAGE */

.partnership{margin-top:205px; #margin-top:225px; }
.power-consumption{margin-top:340px; #margin-top:365px}
.packaging {margin-top:90px;#margin-top:105px}
.corporate {margin-top:40px;#margin-top:60px}
.tree-planting {margin-top:510px;#margin-top:535px}

#content #rightblockx{
float:left;
padding-top:17px;
margin-left:20px;

/*padding-top:50px;*/
}
#image-holderx{ margin:0; text-align:center; margin-left:10px;border:1px solid #ccc; z-index:-1; float:left; overflow:hidden }

#image-holder{ position:absolute; margin-right:120px; text-align:center; margin-left:10px }
/* DIVIDER */
.divider{border-bottom:1px solid #ccc;   margin:10px 0 10px 0;  width:580px; clear:left }

.hline{border-bottom:1px solid #ccc;  padding:0; margin:120px;  width:580px }

.partnershipx{
float:left; 
margin:-380px 0 0 490px;
#margin:-5px 0 0 40px;
 clear:right
 }

.power-consumptionx{
float:left; 
margin:-130px 0 0 490px;
#margin:-5px 0 0 40px;
 clear:right
}

.packagingx{
float:left; 
margin:-80px 0 0 490px;
#margin:-5px 0 0 40px;
 clear:right
}

.corporatex{
float:left; 
margin:0 0 0 490px;
#margin:-5px 0 0 40px;
 clear:right
}

.tree-plantingx{
float:left; 
margin:0 0 0 490px;
#margin:-5px 0 0 40px;
 clear:right
}

#actions-page{
float: left;float:left;
padding-top:10px;
margin-left:20px;
}

#actions-page img{margin-left:40px; margin-top:0}
#actions-page .hline{
margin:20px 0 15px 0;
#margin: -10px 0 15px 0 ; 
_margin: -10px 0 15px 0 ; 
clear:both
}

#actions-page .hack{
margin-bottom:20px;
_margin-bottom:10px;
#margin-bottom:-10px;

}



#actions-page ul{
list-style: square outside;  margin-left:1.2em;
}

#actions-page li{
line-height:25px;
margin-bottom:8px;

}
/*
#actions-page li { color: #C00; }
#actions-page li span { color: #000; }
*/

.tble {padding:0;font-family: Helvetica;font-size:12px;}
.tble1 td{ height:20px;  width:140px;}
.tble td{ height:20px;  width:103px;}
.tble .header{
background:#006900;
padding:0 0 0 5px;
color:#fff;
font-weight:bold;
}
.tble .c1{background-color:#c3e100;padding:0 0 0 5px;}
.tble .c2{ background-color:#e2ef80;padding:0 0 0 5px;}

.tble1 .header{background:#006900;padding:0 0 0 5px;color:#fff;font-weight:bold;}
.tble1 .c1{background-color:#c3e100;padding:0 0 0 5px;}
.tble1 .c2{ background-color:#e2ef80;padding:0 0 0 5px;}

/* CUSTOM BULLET LIST */

#navlist-bg
{
margin-left: 0;
padding-left: 0;

list-style: none;

}

#navlist-bg li 
{
padding-left: 10px;

background-image: url(../images/dash.gif) ;
background-repeat: no-repeat;
background-position: 0 .9em;
width: 100%; overflow: hidden;
}
/* table footnote */
.table_note{color:#006900; margin-top:5px; margin-bottom:10px}



