/*
Leveller version 4 [wip]

Cross-browser cross-platform centred design developed on my latest project.

html    {height:101%}
*       {margin:0; padding:0}
body    {
          position:relative;
          text-align:center;
          width:760px;
          margin:0 auto;
          color:#000; background:#fff;
        }
body *  {
          font:100.01%/130% Verdana, Helvetica, sans-serif;
          text-align:left;
          _width:760px
        }
		
So what does what?
html {height:101%} 
Permanently displays vertical scrollbars in Firefox and Netscape. 
Prevents centred designs jumping 10 pixels when the amount of content is less than a window full. 
* {margin:0; padding:0} 
Removes margins and padding from everything. 
This means it'll need to be added to lists, blockquotes, etc. 
position relative; 
Added as a fix to prevent positioned elements staying still when resizing the browser window. 
text-align:center; 
Centres everything in the body. 
width:760px; 
States the width of the body. I hear everywhere that this doesn't work. Sorry I have to disagree, it does in this circumstance. 
margin:0 auto; 
Centres the body area. 
color:#000; background:#fff; 
Yada yada yada. 
font:100.01%/130% Verdana, Helvetica, sans-serif; 
The usual font-sizing (see leveller version 1). 
Note I still suggest that 76.1% should be considered the minimum font size for content text. 
text-align:left 
Restates left alignment for all elements inside the body. 
_width:760px 
In IE only the block level elements have the width set, as unfortunately IE v5 doesn't understand body width. 
Don't believe me? Check the centred content test page.

Tested:
PC: 
Firefox v1.07, IE v5.0, IE v5.5, IE v6.0, Opera v7.54, Opera v8.5, Netscape v6.23, Netscape v8.03. 
Mac: 
IE v5.2, Firefox v1.07, Safari v1, Opera v7.54, Opera v8.5, Mozilla v1.51, Netscape v7.2, 
Top of page
Font-sizing em versus %
Personally for time-honoured reasons I use percents. Though provided the body font-size is stated as a percent then there is no reason to not use ems (unless you're supporting ancient browsers).

		

*/			   


/*   border-style:solid; border-width:1px; border-color:black   */


* {margin:0; padding:0}	   
* img {border-width:0px}	

html{height: 101%;}			

body {text-align:center; background-color:#000000; background-image: url(images/bg_sm.jpg); background-repeat:repeat-x; font:100.01%/130% Verdana, Helvetica, sans-serif; color:#dddddd;} 


#container {width: 967px; font-size: 0.85em; height:100%; margin-right:auto; margin-left:auto; margin-top:20px; margin-bottom:0px; padding:0px 0px 50px 0px; text-align:left; vertical-align: top;}	

#header { height:300px; padding:0px; vertical-align: top; border-style:solid; border-width:1px 1px 1px 1px; border-color:#cccccc}

/* universal left menu */ 
#home .home, #bio .bio, #audio .audio, #media .media, #lessons .lessons, #contacts .contacts, #aaa .aaa a {background-color:#ff8f0b!important; color:#333333!important}

#top_menu {width: 965px; padding: 5px 5px 10px 0px; text-align:right;}

#top_menu a {font-size:0.8em; padding: 3px 4px 3px 4px; letter-spacing:0.1em; font-weight:bold}	
#top_menu a:visited {color:#ff8f0b; text-decoration:none;}
#top_menu a:link {color:#ff8f0b; text-decoration:none;}
#top_menu a:hover {color:; text-decoration:underline;}

a {color:#ff8f0b; font-weight:bold;}	
a:visited {color:#ff8f0b; text-decoration:none;}
a:link {color:#ff8f0b; text-decoration:none;}
a:hover {color:#ff8f0b; text-decoration:underline;}

h1 {font-size:2.0em; padding: 15px 0px 20px 0px; letter-spacing:1.5px; font-weight:normal}

h2 {font-size:2.0em; padding: 35px 0px 20px 0px; letter-spacing:1.5px; font-weight:normal; clear:left}

img.title_bullet {vertical-align:middle;}

h3 {font-size:1.5em; font-weight:bold; padding: 10px 0px 15px 62px; color:#33cfcc;}

h4 {font-size:1.5em; font-weight:bold; padding: 10px 0px 3px 62px; }

p {margin:0px 60px 20px 62px; text-align:justify;}

.pic_container {float:left; margin:0px 10px 0px 62px; font-size:0.8em;}

.media_pic_container {float:left; margin-left:62px}
img.media_pic {border-style:solid; border-width:1px 1px 1px 1px; border-color:#cccccc}
p.media_p {clear:left; margin:0px 20px 20px 20px}

p.align_center {text-align:center}

blockquote {font-style:italic; padding-left:30px; color:#37dfdc;}

.doc_links {font-size:0.6em}

#footer {font-size:0.65em; color:#bbbbbb; text-align:center; padding: 20px 0px 0px 0px; letter-spacing:0.5px; font-weight:normal; clear:both;}

#footer p {padding: 0px 0px 0px 3px; margin:0px; text-align:center; border-style:solid; border-width:1px 0px 0px 0px; border-color:#cccccc}

#footer a {font-weight:bold}	
#footer a:visited {color:#bbbbbb; text-decoration:none;}
#footer a:link {color:#bbbbbb; text-decoration:none;}
#footer a:hover {color:; text-decoration:underline;}