/* CSS Document */

body {
background: black;
font-size: 62.5%; /* Resets 1em to 10px */
margin: 0;
padding: 0;
font-family: verdana, arial, san-serif;
color: white;
}

#head {
position: relative;
width: 840px;
height: 60px;
background-image: url(pics/pattern.gif);
margin-right: auto;
margin-left: auto;
}

#head #name {
position: relative;
top: 0px;
left: 210px;
}

a {
color: #cc6633;
}

a:hover {
color: #cc9966;
}

#frame {
position: relative;
width: 720px;
height: 470px;
top: 30px;
border: 1px solid white;
padding: 0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}

#left {
position: relative;
width: 480px;
height: 340px;
float: left;
}

#right {
position: relative;
width: 209px;
height: 310px;
float: left;
border-left: 1px solid white;
padding: 15px;
overflow: auto;
}

#bar {
position: relative;
float: left;
background: #555;
height: 21px;
width: 100%;
border-top: 1px solid white;
border-bottom: 1px solid white;
}

#bar li {
display: inline;
}

#bar li a {
position: relative;
float: right;
border-left: 1px solid white;
height: 18px;
width: 79px;
text-align: center;
padding-top: 3px;
color: white;
text-decoration: none;
}

#bar li a:hover {
background-color: #cc6633;
}

#menu {
float: left;
}

#menu li {
position: relative;
display: inline;
float: left;
width: 170px;
color: white;
}

a.squares img {
border: 1px solid white;
margin-right: 5px;
}

a.now img {
border: 1px solid #cc6633;
}

/* Links */

a img {
border: 1px;
underline: 0px;
}

a.link span {
display: none;
position: absolute;
top: 341px;
}

a#rlink span {
right: 0px;
}

a#clink span {
left: 50%;
}

a.link:hover span {
display: block;
}

#llink {
position: absolute;
height: 90%;
width: 100%;
left: 0px;
top: 0px;
z-index: 1;
}

#rlink {
position: absolute;
height: 90%;
width: 50%;
left: 50%;
top: 0px;
z-index: 2;
}

#clink {
position: absolute;
height: 90%;
width: 33%;
left: 33%;
top: 0px;
z-index: 5;
}