/*T R B L*/

/*
logogrey #808080
OLD green #99CCCC
NEW green #669999

 gaps between blocks/panels:30px
 padding within	a white panel: 20px
*/

/*NB FOR CLEARFIX
this is prob a better method: http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats
i.e. set overflow:auto in the container div, i.e. mainbody
see also http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
*/

/*NB set position:relative; in order to abs-posn other things inside it*/

/*NB you can have transparent form fields.... background-color:transparent; */

/*===================================================================*/
/* RESET */ 
/*===================================================================*/

/*shmd reset jan2011 based on http://meyerweb.com/eric/thoughts/2011/01/10/reset-2-0b2-paring-down/ */
html, body, div, span, h1, h2, h3, a, img, b, i, ol, ul, li, fieldset, form, label, table, tr, td, hr {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}


/*===================================================================*/
/* SCROLLBAR ALIGNMENT FIX */ 
/*===================================================================*/

html { /*force the browser to allow space for the scrollbar on short pages so that the centre-alignment of the site doesn't change from page to page - this solution is the best (see http://www.phwinfo.com/forum/macromedia-dreamweaver/351587-vertical-scroll-bar-creating-centered-layout-issue.html)*/
/*NB if a site is fixed-height then no need for this fix*/
height: 102%;
}

/*===================================================================*/
/* TYPOGRAPHY*/ 
/*===================================================================*/

body {
background-color:#FFFFFF;
color:#000000;
/*font-family : Verdana,Arial,Helvetica,Geneva,sans-serif;*/
/*Arial/Helvetica are 'narrow' sans fonts, compared to 'wide' Verdana*/
font-family : Verdana, Geneva, sans-serif;
font-size:11px;
line-height: 140%; /*increases legibility*/
}

/*===================================================================*/
/* FRAMEWORK */ 
/*===================================================================*/

#frame {
width:940px; /*without setting this, the centre-ing below fails*/
margin: 0px auto; /*centre the frame on the page*/
margin-top:20px; /*push it down a bit*/
z-index:10; /*prob not needed*/
}

/*logonav is rel posnd, then (inside logonav) logo posn is abs at top0 left0, and nav posn is abs at right0 bottom0*/

#logonav {
width:940px;
height:75px;
margin-bottom:30px;
position:relative;
}

#logo {
width:239px;
height:75px;
position:absolute;
top:0px;
left:0px;
}

#nav {
/*width:566px;*/
height:26px;
position:absolute;
right:0px;
bottom:0px;
}


#nav img {
float:left;
margin-left:10px;
}



#searchsubscribe {
/*width:????px;
height:???px;*/
height:26px;
position:absolute;
right:0px;
top:0px;
}




#main {
width:940px;
margin-bottom:30px; /* FAILED ATTEMPT TO LEAVE SPACE AT END OF PAGE */
}


/*HOMEPAGE PANELS : col1,col2,col3(col3upper,col3lower) */
#col1, #col2, #col3 {float:left;}

#col1, #col2 {margin-right:30px;}

#col3upper {
height:158px; /*ie 200 inc 42 padborder*/
margin-bottom:30px;
}

#col3lower {
height:193px; /*ie 235 inc 42 padborder*/
}

/*NB col widths are ex padding/border, so eg a 465h col with 20pad and 1border is actually 423h ie 42px less ???*/
#col1 {width:403px; height:423px;}
#col2 {width:123px; height:423px;}
#col3 {width:270px; height:423px;}





.whitepanel {
background-color:white;
padding:20px;
border:1px solid #669999;
}

img.panelpic {
float:right;
/*margin:0px 0px 20px 20px;*/ margin:0px 0px 0px 20px; /*T R B L*/
}


.text434w {
width:434px;
}

.pics434w {
width:434px;
float:right;
}

img.mainpic {
float:right;
}


img.rowpic {
float:left;
margin:0px 0px 0px 20px; /*T R B L*/
}

img.first {
margin:0px;
}



/*===================================================================*/
/* OTHER STYLING */
/*===================================================================*/


b {
font-weight:bold;
font-size:12px;
color:#669999;
}

.bulletpoint {
color:#669999;
}



.fix { /* clearfix to fix the problem caused by floated content no longer being contained by its parent*/
clear:both;
/*NB this is prob a better method: http://blogs.sitepoint.com/2005/02/26/simple-clearing-of-floats
i.e. set overflow:auto in the container div, i.e. mainbody */
}

.sharepricestyle {
font-weight:bold;
color:#669999;
font-size:20px;
}

.sharetime {
/*color:#669999;*/
margin-top:10px;
}


/*===================================================================*/
/* HYPERLINKS*/
/*===================================================================*/

/*
OLD green #99CCCC
NEW green #669999
*/


/*pentagram-inspired links*/
#main a, #main a:link, #main a:visited {
color : #000000;
text-decoration:none;
border-bottom : 1px dotted #669999;
}

#main a:hover, #main a:focus, #main a:active {
color : #669999;
text-decoration:none;
border-bottom : 1px dotted #669999;
}

#main a.imagelink, #main a.imagelink:link, #main a.imagelink:visited,
#main a.imagelink:hover, #main a.imagelink:focus, #main a.imagelink:active {
border:none;
}
/*end of pentagram-inspired links*/


/*===================================================================*/
/* FORM ELEMENTS*/
/*===================================================================*/

form {
display: inline; /*make search/subscribe appear on the same line*/
}

#search {
float:right;
}


#subscribe {
float:right;
margin-right:30px;
}


#searchbutton {
width:67px;
height:26px;
margin-left:5px;
}

#joinmailinglistbutton {
width:138px;
height:26px;
margin-left:5px;
}

#joinmailinglistbox, #searchbox, #cuyhhj-cuyhhj {
padding:2px;
width:150px;
border:1px solid #669999;

background-color:#808080;color:white;
background-color:black;color:white;

height:20px; /*20+2+1+2+1=26*/

float:left; /*successful attempt to nudge these form fields upwards*/
}


/*===================================================================*/
/* DROPDOWN MENUS*/
/*===================================================================*/

#aboutdropdown {
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
z-index:102; /*on top of nav*/
width:193px;
/*height:70px;*/
position:absolute;
margin-left:507px; /*have used this method cos I cant get posn:abs and left: top: to work*/
margin-top:75px; /*have used this method cos I cant get posn:abs and left: top: to work*/
}

#operationsdropdown {
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
z-index:102; /*on top of nav*/
width:183px;
/*height:70px;*/
position:absolute;
margin-left:581px; /*have used this method cos I cant get posn:abs and left: top: to work*/
margin-top:75px; /*have used this method cos I cant get posn:abs and left: top: to work*/
}

#investorcentredropdown {
display:none; /*so that it doesn't flash up when page loads, i.e. before it can be faded out*/
z-index:102; /*on top of nav*/
width:209px;
/*height:98px;*/
position:absolute;
margin-left:694px; /*have used this method cos I cant get posn:abs and left: top: to work*/
margin-top:75px; /*have used this method cos I cant get posn:abs and left: top: to work*/
}


#aboutdropdown a, #operationsdropdown a, #investorcentredropdown a { /*FOR OLLA this fixed the IE(6) gap between buttons*/
display:block;
}

#aboutdropdown img, #operationsdropdown img, #investorcentredropdown img {
margin-top:5px;
}