body {
		font-family: Verdana, Arial, Helvetica, Sans-serif;
		font-size: 10pt;
		background-color: #ddffdd;
		margin: 0;
		padding: 0;
}


#container{
		float: left;
		width: 100%;
}


h1 {
		font-size: 12pt;
		color: #006633;
		text-align: center;
		margin: 15px 0 5px 0;
}

h2 {
		
		font-size: 12pt;
		text-align: center;
		padding: 15px 0 0 0;
		margin: 0 0 10px 0;
		color: #006633;				
}

h4 {
		color: #993300;
		font-size: 10pt;
		text-align: left;
		margin: 20px 40px 0 40px;
		clear: left;
}



h5 {
		color: #996600;
		font-size: 10pt;
		text-align: left;
		margin: 15px 40px 0px 45px;
		clear: left;
}		


h6 {
		color: #000000;
		font-size: 10pt;
		text-align: left;
		margin: 10px 0 10px 0;
		clear: both;
}



.bold{
		font-weight: bold;
}

.b{
		font-weight: bold;
}

.i{
		font-style: italic;
}

.u{
		text-decoration: underline;
}

.indent{
		margin-left: 30px;
}

.centre{
		text-align: center;
		margin-left: 0px;
		margin-right: 0px;
}

.boldcenter{
		font-weight: bold;
		text-align: center;
}		

.medium{
		font-size: 10.5pt;
}

.small{
		font-size: 8pt;
} 

.smallest{
		font-size: 7pt;
}

.subheader{
		color: #003333;
		font-size: 11pt;		
}

.normal{
		font-weight: normal;
}

.right{
		text-align:right;
}

.clear{
		clear: both;
}

.inline{
		display: inline;	
		margin: 0;
		padding: 0;	
}


/*Main navigation bar*/

#mainnavbar{
		background-color: #000000;
		color: #ffffff;
		float: left;
		clear: both;
		height: 220px;	
		width: 920px;
		text-align: left;
		margin: 10px 0px 0px 20px;	
}

html>body #mainnavbar{
		margin: 10px 0px 0px 40px;
		height: 220px;
}


/*ESG logo*/
#logo{
		float: left;
		clear: left;
		margin: 10px 0px 0px 17.5px;
}

html>body #logo{
		margin: 10px 0px 0px 35px;		
}

/*Google search function*/
#cse-search-box {
		float: right;
		clear: right;
		padding: 0;
		margin: 20px 13.5px 0 0;
}

html>body #cse-search-box {
		margin: 20px 27px 0 0;
}		


/*Links inside the main navigation bar */
#mainnavtext{
		float: left;
		clear: both;
		width: 100%;
		margin: 0 0 10px 0;
		text-align: center;
		font-size: 10pt;
		padding: 0;  
}

html>body #mainnavtext{
		margin: 0 0 10px 0;
}

/*Color of links inside the main nav bar */
#mainnavbar a{
		color: #ffffff;
		text-decoration: none;
}

#mainnavbar a:hover{
		color: #33ff99;
		
}

/*Top image*/

#topimage { float: left;
            clear: both;
            text-align: center;
            width: 100%;
 }

#topimage img{
	      margin: 0 0 10px 0;
		border: 1px solid #333333; 
            width: 92%;
}

html>body #topimage img{
	        margin: 0 0 5px 0;
}	

/*Left hand side bar*/
#lhbar{
		background-color: #000000;
		float: left;
		clear: left;
		width: 190px;
		color: #ffffff;
		text-align: center;
		margin: 10px 0px 0px 20px;
}

html>body #lhbar{
		margin: 10px 0px 0px 40px;
}
		


#lhcontainer{
		border: 1px solid #999999;
		margin: 5px;
}

/*Left hand side bar paragraphs*/

.lhpara{
		border-bottom: 1px solid #555555; 
		font-size: 9pt;
		padding: 0px;
		margin: 5px;
		text-align: left;
}


.lhpara a{
		color: #999999;
		text-decoration: none;
		font-variant: normal;
		font-weight: bold;
}

.lhpara a:hover{
		color: #33ff99;
}


.lhpara h3{
		font-size: 11pt;
		color: #cccccc;
		font-variant: small-caps;
		text-align: center;
		margin: 15px 5px 5px 5px;
}

.lhpara h3.donate {
            text-align: center;
		margin: 10px 0 20px 0;
            width: 100%;
}

.lhpara h3.donate a {
		color: #99cc99;
		text-decoration: none;
            font-size: 10.5pt;
            background-color: #4c664c;
            padding: 5px;
            margin: 0 0 0 10px; 
            height: 20px;
            border: 3px solid #394c39;
}

.lhpara h3.donate a {
            margin: 5px 0 0 0;
}

.lhpara h3.donate a:hover {
            color: #ace6ac;
}

.lhpara p, .lhpara ul {
		margin: 10px 5px 15px 17px;
                padding: 0;
                line-height: 15px;
}

.lhpara p.help {
		margin: 15px 0 5px 0;
               text-align: center;
               font-style: italic;
               color: #99cc99;
}

.lhpara ul li{
		margin: 0 0 7px 0;
                list-style: circle url(http://www.esgindia.org/Images/grey.GIF) outside;
}






/*Main content*/
#content{
		color: #000000;
		float: left;
		margin: 10px 0px 0px 5px;
		width: 546px;
		padding: 17px 10px 10px 15px;
		text-align: left;
}

html>body #content{
            float: none;
            position: absolute;
		width: 519px;
            margin: 240px 0 0 235px;
            padding: 17px 10px 10px 15px;
}


p#nav{
		text-align: center;
		color: #009933;
		margin-top: -10px;
}

p#nav a{
		color: #009933;
		text-decoration: none;
		font-weight: normal;
		border: none;
}

p#nav a:hover{
		color: #003300;
		border: none;
}	

#content h3 {
		color: #003333;
		font-size: 11pt;
		margin-bottom: 20px;
		margin-top: 0;
		text-align: center;
}

#content p.clear {
		clear: both;
}


/*layout for index page*/
.topicrow{
		float: left;
}

.topicrow + .topicrow {
		border-top: 1px solid #99cc99;
}

.topicleft{
		float: left;
		width: 49.5%;
		padding: 10px 5px 10px 0;
		margin: 5px 0 10px 0;
		border-right: 1px solid #99cc99;
}

html>body .topicleft{
		width: 48.5%;
		padding-bottom: 0;
}

.topicleft img, .topicright img{
		float: left;
		margin: 5px 10px 0 0;
		border: 1px solid #003300;
}

.topicleft h2, .topicright h2{
		font-size: 11pt;
		height: 35px;
		padding-top: 0;
}

html>body .topicleft h2, .topicright h2{
		height: auto;
		min-height: 35px;
}

.topicright{
		float: right;
		width: 49.5%;
		padding: 10px 0px 10px 5px;
		margin: 5px 0 5px 0;
}

html>body .topicright{
		width: 48.5%;
		padding: 10px 0 0 5px;
}

.moretopics{	
		margin: 10px 0 10px 0;
		float: left;
                clear: both;
}

.topicrow + .moretopics {
		border-top: 1px solid #99cc99;
                padding-top: 10px;
}

.moretopics p {
                clear: both;
                float: left;
                width: 100%;
                margin: 5px 0 5px 0;
}

.moretopics img{
		float: left;
                clear: left;
		margin-right: 10px;
		border: 1px solid #003300;
}

.topicrow, .moretopics {
		text-align: left;
}


/*for a-z campaign list*/

#piclist{	
	        position: relative;
		padding: 2px 0 2px 0;
		margin-bottom: 10px;
		margin-top: 0px;

}

html>body #piclist{
		float: left;
}

#piclist p{
		margin: 15px 0 0 0;

}

html>body #piclist p{
		float: left;
}

#piclist img{
		float: left;
		clear: left;
		margin: 2px 10px 2px 0px;
		border: 1px solid #003300;
}


/*for main press page - newsrack section */

#content p.newsrack{
		font-size: 11pt;
		margin-left: 30px;
}

#content p.newsrack a{
		font-size: 10pt;
}


/*defining width for dt and dd is necessary for them to appear inline with each other*/

#content dl dt{	
		font-weight: bold;
		color: #993300;
		float: left;
		width: 75px;
		text-align: left;
		margin-left: 20px;
		margin-right: 20px;
	
		
}

html>body #content dl dt{
		margin-right: 0;
}


#content dl dd{
		margin-bottom:20px;
		clear: right;
		width: 350px;
	
}

html>body #content dl dd{
		float: left;
}


/*In order to keep the second paragraph of a dd at the same indent as the first paragraph, insert an "invisible" dt before it*/

#content .invisible{
		color:#ddffdd;
}


/* setting styles for lists in the main body */

#content ul li{
		list-style: circle url(http://www.esgindia.org/Images/bullet.GIF) outside;
		margin: 0px 0px 10px -20px;
		text-align: left;
}

#content ul li ul li{
		list-style: circle url(http://www.esgindia.org/Images/line.GIF) outside;
		margin: 0px;
}

#content ol li{
		margin-bottom: 10px;
}

#content .nospace li{
		margin-bottom:0px;
		padding: 0;
}

#content .indent li{
		margin-left: 30px;
		margin-bottom: 5px;
}

html>body #content .indent li{
		margin-left: -10px;
}

/* .txtleft and .txtright are useful for floating bits of text in blocks next to each other - such as signatures at the end of a document. After using .txtleft or .txtright the next element needs to be cleared before it will appear below that text - it should be put in the class .clear */

#content .txtleft{
		float: left;
		text-align: center;
		margin: 0px 10px 20px 10px;
                width: 46%;
}

#content .txtright{
		float: right;
		text-align: center;
		margin: 0px 10px 20px 10px;
                width: 46%;
}	
	

.floatright{
		float: right;
		margin: 5px 0px 5px 10px;
		
}

.floatleft{
		float: left;
		margin: 5px 15px 5px 0;
}

img.floatright, img.floatleft, .imageleftcaption img, .imagerightcaption img, .centre img{
		border: 1px solid #003300;
		padding: 0px;
}

/*note: in order to keep the caption the same width as the image for .imageleftcaption and .imagerightcaption below, the width has to be defined each time, since it varies - put it within the <span> tag, as in <span class="imageleftcaption" style="width:100px;">*/


.imageleftcaption p, .imagerightcaption p{
		padding: 0;
		margin: 10px 5px 5px 5px;
		color: #003333;
		font-size: 8pt;
		text-align: center;
}


.imageleftcaption{
		float: left;
		margin: 5px 10px 0px 0px;
}

.imagerightcaption{
		float: right;
		margin: 5px 0px 0px 10px;
}

.clear .imageleftcaption, .clear .imagerightcaption {
		margin-bottom: 10px;
}


.border{
		border-top: 1px solid #99cc99;
		margin-top: 30px;
		padding-top: 20px;
}



#content .green{
		background-color: #99cc99;
		border: 1px solid #006633; 
		color: #006633;
		font-size: 11pt;
		font-variant: small-caps;
		font-weight: bold;
		text-align: center;
		margin-top: 30px;
		margin-left: 20px;
		margin-bottom: 20px;
		padding: 4px;
		min-width: 100px;
}



/* setting styles for links in the main body */
#content a{
		text-decoration: none;
		border-bottom: 1px dotted #99cc99;
		color: #009933;
}


#content a:hover{
		border-bottom: 1px solid #99cc99;
		color: #006633;
}


#content .green a{
		color: #006633;
}

#content .green a:hover{
		color: #003333;
}

#content dl dt a, #content dl dt a:hover{
		color: #993300;
		border: none;
}

#content ul.a{
		list-style-type: lower-alpha;
}

#content h2 a{
		color: #006633;
		border: none;
}

#content h2 a:hover{
		color: #003333;
}

/* setting headers so they look the same as links */

#content h1 a, #content h1 a:hover{
		color: #006633;
}

#content h3 a, #content h3 a:hover{
		color: #003333;
}

#content h4 a, #content h4 a:hover{
		color: #993300;
}


#content h5 a, #content h5 a:hover{
		color: #996600;
}

#content h6 a, #content h6 a:hover{
		color: #000000;
}

#content h1 a, #content h1 a:hover, #content h2 a, #content h2 a:hover, #content h3 a, #content h3 a:hover, #content h4 a, #content h4 a:hover, #content h5 a, #content h5 a:hover, #content h6 a, #content h6 a:hover, #content .green a, #content .green a:hover {
		font-weight: bold;
		border: none;
}

#content img a, #content img a:hover{
		border: none;
}

#content img a {
		border: 1px solid #003300;
}

#content img a:hover {
		border: 1px solid #006633;
}

/* inline elements that look like headers */

#content .h4, #content .h4 a, #content .h5 a:hover {
		color: #993300;
}


#content .h5, #content .h5 a, #content .h4 a:hover {
		color: #996600;
}

#content .h4,  #content .h4 a, #content .h4 a:hover, #content .h5, #content .h5 a, #content .h5 a:hover {
		font-weight: bold;
		border: none;
}




#content table{
		font-size: 10pt;
}

#content table.normal{
		width: 95%;
		text-align: center;
		margin: 10px;
		border-top: 1px solid #006633;
		border-bottom: 1px solid #006633;
		padding: 2px 0 2px 0;
}

#content table.normal tr.header td{
		border-bottom: 1px solid #006633;
		padding: 5px 0 5px 0;
		font-weight: bold;
		color: #003333;
		width: 50%;
}


#content table.list td{
		padding: 0 10px 0 5px;
}

#content table.list tr.header td{
		padding: 30px 0 10px 0;
		font-weight: bold;
}

#content table.list tr.footer td{
		padding: 15px 0 5px 0;
}

#content table.box td, th{
		border: 1px solid #99cc99;
		padding: 2px 5px 2px 7px;
}

#content table.box{
		border-collapse: collapse;
		border: 2px solid #003333;
}

#content table.box th{
		font-weight: bold;
		color: #003333;
		text-align: center;
		border-bottom: 2px solid #003333; 
}

#content table.box .rowhead{
		color: #003333;
		border-right: 1px solid #003333;
}

.imagegallery{
		padding: 0;
		margin: 20px 10px 2px 30px;
		color: #003333;
		text-align: center;
		width: 200px;
		float: left;
}
		

/*Image Gallery*/

#imagegallery{
                width: 460px;
		margin: 5px 0 10px 20px;
		text-align: left;
		padding: 10px 0 10px 20px;
		color: #003300;

}

html>body #imagegallery{
		width: 440px;
}


#imagegallery p{
		margin: 0 0 15px 10px;
		min-height: 30px;
}



#placeholderimage {
		margin: 0 0 20px 5px;		
		text-align: center;
}



#placeholder {
		padding: 0;
		margin: 0;
		border: 1px solid #003300;
		

}




/* -- Formatting map on contact us page -- */

#content .contact-map {
                float: left;
                width: 100%; 
                text-align: center;
                border-top: 1px solid #99cc99;
                padding-top: 20px;
                margin: 20px 0px 20px 0px;
}

#content .contact-map iframe {
                border: 1px solid #99cc99;
}

#content .contact-map small a{
		text-decoration: none;
		border-bottom: 1px dotted #99cc99;
		color: #009933;
}


#content .contact-map small a:hover{
		border-bottom: 1px solid #99cc99;
		color: #006633;
}





/* -- Clearing all elements to keep floats from changing the layout --- */

#content p, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6, #content .topicrow, #content .green { 
                clear: both; }


#content p + p {
                clear: none; }



/*Navigation at the bottom of the page*/

#bottomnav{
		margin: 15px 0 5px 0;
		padding: 7px 0 7px 0;
		text-align: center;
		border: 1px solid #99cc99;
		border-right: none;
		border-left: none;
		color: #009933;
		width: 500px;
		float: left;
	
}


#bottomnav a{
		color: #006633;
		text-decoration: none;
		font-weight: normal;
		border: none;
}

#bottomnav a:hover{
		color: #009933;
		border: none;
}	

#esgblurb{
		text-align:center;
		font-style:italic;
		font-size: 9pt;		
		color: #003333;
		padding: 0px;
		margin-bottom: 30px;
		float: left;
}



/*Right hand side bar*/


#rhbar{
		float: left;
		margin: 10px 0 0 4px;
		width: 175px;
		padding: 0;
		text-align: center;
		
}

html>body #rhbar {
            float: none;
		position: absolute;
            margin: 240px 0 0 783px;
}



/*Right hand side bar paragraphs*/

#rhcontainer{
		float: left;
		background-color: #99cc99;
		padding: 5px 0 0 0;
            margin-bottom: 20px;
		border: 1px solid #006633; 
}


#rhcontainer a{
		color: #006633;
		font-weight: bold;
		text-decoration: none;
}

#rhcontainer a:hover{
		color: #003333;
		
}

#rhcontainer a.youarehere{
		color: #003333;
		
}

.rhpara{
	
		border: 1px solid #006633; 
		font-size: 9pt;
		padding: 10px;
		margin: 0 2.5px 5px 2.5px;
		color: #003333;
		text-align: left;
		width: 165px;
		float: left;
}


html>body .rhpara{
		width: 145px;
		margin: 0 4px 5px 4px;
}



.rhpara h3{
		font-size: 11pt;
		font-variant: small-caps;
		text-align: center;
		margin: 0;
}

.rhpara p{
		margin: 10px 0 10px 0px;
}

.rhpara ul{
		margin-top: 10px;
		margin-bottom: 10px;
}

.rhpara ul li{
		margin-left: -25px;
		margin-bottom: 5px;
}

#googleanalytics{
		margin-bottom: 50px;
}

/* colours being used: 

greens:  #003333, #006633, #009933, #ccffcc, #99cc99, #ddffdd, #003300, #33ff99
browns:  #996600, #993300
greys:   #555555, #999999, #cccccc

*/