body {

background:#000 url('img/bg_gry.png') no-repeat 50% 50px;

margin:0;

padding:0;

text-align:center;

}



#container {

background:#000;

width:760px;

margin:0 auto;

text-align:left;

}



#header {

background:url('img/psp5a.jpg') no-repeat center top;

width:760px;

height:234px;

position:relative;

margin:0;

}



#menu {

width:210px;

float:left;

margin:50px 0 0 0;

}



.leftbox {

width:185px;

background:#000;

border-width:7px 1px 7px 7px;

border-color:#000 #000 #000 #000;

border-style:solid;

margin:60px 0 0 0;

padding:10px 10px 10px 0;

text-align:justify;

font:14px verdana,arial,sans-serif;

color:#fff;

}



.leftbox ul {

list-style-type:none;

margin:10px 0 10px 0;

padding:0;

}



.leftbox li, .leftbox a {

font-weight:bold;

color:#ffffff;

letter-spacing:1px;

text-align:left;

text-decoration:none;

}



.leftbox a:hover {color:#ffffff}



h4 {

font:bold 15px verdana,arial,sans-serif;

color:#fff;

display:block;

margin:0 0 15px 0;

letter-spacing:1px;

text-align:center;

}



a.item {

background:url('img/menugry.jpg') no-repeat;

max-width:210px;

height:34px;

display:block;

padding:0 0 0 10px;

font:bold 15px verdana,arial,sans-serif;

color:#fff;

text-decoration:none;

line-height:30px;

}



/*

good practice of background offset rollovers to avoid javascript preload. 

Im using max-width, BG pos. and Padding instead of margin and smaller-than 

container width, to get pop-out effect cause of a left-edge bug that makes 

the menu jump. -ubik

*/

a.item:hover {

background-position:10px -34px;

padding:0 0 0 20px;

}



#main {

background:#000;

min-height:400px;

margin:0 0 0 220px;

font:15px verdana,arial,sans-serif;

color:#fff;

text-align:left;

}



#footer {

clear:both;

height:40px;

background:#000;

margin:50px 0 0 0;

text-align:center;

padding:20px 0 10px 0;

}



#footer a {

font:bold 15px verdana,arial,sans-serif;

color:#ccc;

text-decoration:none;

letter-spacing:1px;

margin-left:20px;

}



#footer a:hover {color:#ffffff}



/* "bottomRight" is the botttom right background image of the content container */

.bottomRight {background:url('img/bottomrightgry.jpg') no-repeat right bottom}



.content {

min-height:190px;

background:url('img/topleftgry.jpg') no-repeat left top;

padding:30px 40px;

margin:20px 0 30px 0;

text-align:justify;

}



h1 {  /* position absolute - relative to the header, not document */

position:absolute;

left:20px;

bottom:20px;

margin:0;

display:inline;

font:60px georgia,times,serif;

color:#ffffff;

letter-spacing:5px;

font-variant:small-caps;

}



h2 {

font:bold italic 25px georgia,times,serif;

color:#ffffff;

display:block;

margin:15px 0 0 0;

}



h3 {

font:bold italic 25px georgia,times,serif;

color:#ffffff;

display:block;

margin:15px 0 0 0;

}



.content a {

text-decoration:none;

color:#ffffff;

font-weight:bold;

}



.content a:hover {color:#ffffff}



.content ul {list-style-type:circle}

.content li {font:bold 16px verdana,arial,sans-serif;}



p {margin-top:20px}



/* If you like my design, I only ask that you leave the footer note "design by ubik". thanks */

#footer p , #footer p a {

text-align:right;

font:11px verdana,arial;

color:#ffffff;

margin:0;

}