body {
color: #fff;
background-color: #000;
font-family: serif;
font-size: 12px;
margin: 0;
letter-spacing: 0.1em;
}

img {
border: 0;
}

.left {
float: left;
}

.right {
float:right;
}

.block {
display: block;
}

#container {
width: 900px;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}

#banner {
position: relative;
height: 40px;
padding: 30px;
background-color: #1f1f1f;
font-size: 6px;
line-height: 6px;
}



/*-------------------------------
        navigation 
-------------------------------*/

#nav {
position: absolute;
left: 290px;
top: 38px;
}

#nav a {
display: block;
height: 12px;
margin-bottom: 5px;
}

#nav a:hover {
background-position: 0 -12px;
}

#nav a.selected {
background-position: 0 -12px;
}

a.portfolio {
width: 71px;
background-image: url(images/portfolio.gif);
}

a.about {
position: absolute;
top: 0px;
left: 75px;
width: 38px;
background-image: url(images/about.gif);
}

a.email {
width: 176px;
background-image: url(images/email.gif);
}



img.arrow_port {
position: absolute;
top: 7px;
left: 320px;
}



/*-------------------------------
       sub navigation
-------------------------------*/
#subNav {
position: absolute;
left: 520px;
top: 33px;
}

#subNav a {
display: block;
height: 21px;
margin-bottom: 5px;
}

#subNav a:hover {
background-position: 0 -21px;
}

#subNav a.selected {
background-position: 0 -42px;
}


/*------------------------------
The following are for the top
line of portfolio links.
To add more links, copy the 
format of these.
------------------------------*/
a.beauty {
float: left;
width: 60px;
background-image: url(images/beauty.gif);
}

a.fashion {
float: left;
width: 68px;
background-image: url(images/fashion.gif);
}

a.flora {
float: left;
width: 40px;
background-image: url(images/flora.gif);
}

/*---------------------------
    editorial links
---------------------------*/

#editorials {
clear: both;
position: absolute;
top: 17px;
width: 320px; 
}

#editorials2 {
clear: both;
position: absolute;
top: 34px;
left: 74px;
width: 246px;
}

a.inBloom {
float: left;
width: 69px;
background-image: url(images/inBloom.gif);
}

a.outIn {
float: left;
width: 110px;
background-image: url(images/outsideInside.gif);
}

a.colours {
float: left;
width: 55px;
background-image: url(images/colours.gif);
}

a.fluid {
float: left;
width: 46px;
background-image: url(images/fluid.gif);
}

a.noted {
float: left;
width: 47px;
background-image: url(images/noted.gif);
}

/*-------------------------------
     main section
-------------------------------*/
#main {
position: relative;
background-color: #2f2f2f;
height: 510px;
width: 900px;
overflow: auto;
}

#main2 {
padding-left: 10px;
}

table.photo {
margin: 0;
padding: 0;
}

table.photo td{
padding: 20px 10px 0 0;
margin: 0;
vertical-align: top;
}


/*-------------------------------
     about page 
-------------------------------*/
#bio {
width: 485px;
padding-top: 100px;
margin-left: auto;
margin-right: auto;
font-size: 6px;
line-height: 6px;
}

#bio a {
display: block;
height: 12px;
}

#bio a:hover {
background-position: 0 -12px;
}

a.email_bio {
width: 176px;
background-image: url(images/email_bio.gif);
position: relative;
top: -15px;
left: 293px;
}



/*-------------------------------
     footer 
-------------------------------*/

#footer {
text-align: right;
padding: 10px 0;
color: #333;
}