/*





This stylesheet should be used to implement the look and feel of your site. The styles for implementing the basic layout of elements within the page can be found in the layout.css file.





this stylesheet expect the following divs to be present in the HTML, in the order specified:





body



	div#all





		div#header



		div#content



		div#mainnav



		div#sidebar



		div#footer





*/







/* specify colours for all major areas of the page  */







body



{



background-color: #f3f2e5 /* body bg color */;



background-image: url(../images/site/bg.png); 



background-repeat: repeat-x ;


line-height: 1.3em;
}





div#all {



 background-color:#fff;

background-image: url(../images/site/footer.jpg); 



background-repeat: no-repeat ;

background-position: bottom left;

padding-bottom: 50px;

}





div#header



{



background-color: #fff ;



}



 div#mainnav



 {





 background-color:  #fff /* mainnav bg color */;





 }



 

 

 

 h1#homepage

 /* hide the h1 for the homepage, as it is visually redundant */

 {

 position: absolute;

 left: -9000px;

 }

 

 







/* HEADER STYLES  */



/* styles for arranging the two images in the header */  



div#header 



{



text-align: right;



}







img#logo



{



position: absolute;



top: 0px;



left: 0px;





}













/* FOOTER STYLES  */



div#footer



{

text-align: right;



font-size: 0.83em;



color: #95937b;



background-color: #fff;



}







/*

contact info dl

*/

.contact dl 

{

margin: 0px;

padding: 0px;

padding-bottom: 1em;

}





.contact dl dt

{

font-weight: bold;

padding: 0px;

padding-top: 1em;

padding-bottom: 0.3em;



}



.contact dl dd

{

margin: 0px;

padding: 0px; 

line-height: 1.7em;





}



.contact dl dd a

{

padding: 0px;

margin: 0px;

}





/* in order to position non-inline images to the center, make the text-align of div#content center, then re-align everything in div#content except non-inline images back to the left (I know, I know...)*/

div#content

{



text-align: center;

}



div#content p, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6, div#content ul, div#content img.inline, div#content ol, div#content dl

{



text-align: left;

}



/* CONTENT IMAGES  */



/* general styles for content images */

div#content img

{

padding:9px;

background-color: #fff;

border: 5px solid  #dcdcd3;

margin-bottom: 7px;



}

div#content img.badge

{

padding:0px;

background-color: transparent;

border: none;

margin-bottom: 0px;



}



/* INLINE CONTENT IMAGES  */



/* often when you place images in the page as content, you want the surrounding textual content to wrap around it. If this is the case, give the img tag a class of 'inline' so that the styles below will be applied */





/* float and pad inline images */  

.inline

{



float:left;

margin-right: 9px;

margin-bottom: 7px;



}







/* styling for code snippets divs */







code{



font-size: 1.3em;



padding: 0.3em;



}









/*headline links  - styles for displaying links as a headline with associated image beneath*/







a.headline-link



{

text-align: center;

display: block;

float: left;

margin: 1em;

font-family: lucida grande;

font-style: normal;

letter-spacing: 0.2em;

width: 194px;

background-color: #002147; 

border: 2px solid #002147;

color: #fff;

padding: 3px;

padding-bottom: 203px;

text-decoration: none;



}

/*  change the background and border colour on mouseover or focus */

a:hover.headline-link, a:focus.headline-link

	{

background-color: #6a819c;

border-color: #6a819c;

	}

/* for every headline link, give it an id and then specify an appropriate image*/

#headline-1

{

background-image: url('../images/chameleon.jpg');

background-repeat: no-repeat;

background-position: bottom left;

}





/* panels stuff */

/*style a div with a border around it. Set padding to 0px so that the h2 contained within the div can appear flush to the border of the div */

div.panel

{

background-color:white;

padding: 0px;

clear: both;

border: 2px solid #002147;

margin: 1em;

margin-top: 2.5em;

}

/* set the  border-bottom  of the  h2 within the panel div to be the same as the  border for the div 

Set the background colour of the h2 to a dark colour that's similar to the div border colour, but a bit lighter 

*/

div.panel h2

{

border-bottom: 2px solid  #002147;

color: #fff;

background-color:  #6a819c;

padding: 2px;

margin: 0px;

text-align: center;

font-size: 1.1em;

}

/* add some margin to any element that's likely to appear in the panel div - this is done individually so that the h2 within the panel div remains flush to the border */

div.panel p, div.panel img, div.panel h3, div.panel h4, div.panel table, div.panel ul, div.panel form, div.panel div

{

margin: 10px;

}

/*  a general class to apply to elemnts that you want to clear (for example, a paragrpah that ocurs before or after the floated headline links) */

.clear

{

clear: both;

}





/* book info stuff */



div.bookinfo

{



margin-bottom: 2em;

clear: both;

padding: 0.7em;

padding-bottom: 4.5em;

}



div.bookinfo img.inline

{

float: right;



margin-left: 9px;



margin-bottom: 7px;

}



div.bookinfo p

{



}





div.bookinfo h2

{

font-style: italic;

}



div.bookinfo ul

{

padding-left: 0px;

}

div.bookinfo ul li

{

list-style: none;

padding-left: 0px;

}





div.bookinfo dl.quotes dt

{

font-style: italic;



padding-bottom: 0.7em;

padding-top: 0.7em;

color: #b17a05;

}





div.bookinfo dl.quotes dd

{

color: #3b3402;

margin-left: 0px;

}





div.bookinfo dl

{

margin-bottom: 2em;

}







div.bookinfo h3

{

font-size: 0.9em;

}



span.booktitle

{

font-style: italic;

padding-right: 0.2em;

padding-left: 0em;

}



.name

{

font-style: italic;

padding-right: 0.2em;

padding-left: 0em;

}



span.email

{

margin: 0px;

padding: 0px;

color: #095163;

font-weight: bold;

letter-spacing: 0.07em;

}



div#footer span.email

{

font-size: 1.07em;

}





span.oldtitle



{

font-style: italic;

font-weight: bold;

}





ul.talks

{

padding-left: 0px;

}



ul.talks li

{

list-style: none;

letter-spacing: 0.03em;

line-height: 1.3em;

}



.nb

{

font-style: italic;



color: #95937b;



color: #3d2f0a;





}



h2.interviewQ

{

font-size: 1.15em;

letter-spacing: 0.03em;

}



p.contactinfo

{

font-size: 0.85em;

font-style: italic;

margin-top: 2px;

padding: 0px;

margin-bottom: 0px;

}



p.footnote

{

margin-top: 2em;

color: #666;

}



span.footnote 

{

font-size: 1.3em;

font-family:Georgia, Times, serif;



}



span.footnote a

{

text-decoration: none;

}





.quote

{



font-style: italic;



}





pre

{

font-family: Helvetica, Verdana, Arial, sans-serif;

line-height: 1.2em;

}



/* style to implement breater space between some paragrpahs, to denote new section in original printed form */



p.new-section

{

padding-top: 5em;



background-image: url(../images/site/new-section-separator.png); 

background-repeat: no-repeat ;

background-position: top center;



}



/* a div to contain more than one illustrative image, so the image stack together and float to the left of associated text  */

div.pics-col-left

{

float: left;

width: 215px;

}



/* a div to contain more than one illustrative image, so the image stack together and float to the right of associated text  */

div.pics-col-right

{

float: right;

width: 215px;

}