/*
    1.  z-index, position, float, box properties
    2.  height and width
    3.  margin, padding, border
    4.  background
    5.  font, text
*/

#top {
    background-image: url(../../img/sidebar/yellow/stars.gif);
    background-repeat: repeat-x;
    position: fixed;
    height: 40px;
    width: 100%;
    max-width: 960px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    border-bottom-right-radius: 20px;
    border-left: 2px solid #000;
    background-color: #ffce00;
    box-shadow: 0 5px 10px #888888;
}
#top p {
    padding: 10px 10px 0 0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: right;
}
#sidebar {
    float: left;
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 130px;
    margin-top: 40px;
    margin-right: 10px;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    border-bottom-right-radius: 10px;
    background-color: #ffce00;
}
#sidebar a, #home a {
    display: block;
    width: 100%;
    height: 100%;
}
#top a {
    color: blue;
}
#top a:hover {
    color: darkred;
}
#home {
    background-image: url(../../img/sidebar/yellow/top_logo.gif);
    height: 40px;
    width: 130px;
    padding-bottom: 10px;
}
#sb1 {
    background-image: url(../../img/sidebar/yellow/sb1.gif);
    height: 54px;
    width: 130px;
}
#sb1:hover {
    background-image: url(../../img/sidebar/yellow/sb1o.gif);
}
#sb2 {
    background-image: url(../../img/sidebar/yellow/sb2.gif);
    height: 50px;
    width: 130px;
}
#sb2:hover {
    background-image: url(../../img/sidebar/yellow/sb2o.gif);
}
#sb3 {
    background-image: url(../../img/sidebar/yellow/sb3.gif);
    height: 30px;
    width: 130px;
}
#sb3:hover {
    background-image: url(../../img/sidebar/yellow/sb3o.gif);
}
#sb4 {
    background-image: url(../../img/sidebar/yellow/sb4.gif);
    height: 30px;
    width: 130px;
}
#sb4:hover {
    background-image: url(../../img/sidebar/yellow/sb4o.gif);
}
#sb5 {
    background-image: url(../../img/sidebar/yellow/sb5.gif);
    height: 30px;
    width: 130px;
}
#sb5:hover {
    background-image: url(../../img/sidebar/yellow/sb5o.gif);
}
#sb6 {
    background-image: url(../../img/sidebar/yellow/sb6.gif);
    height: 30px;
    width: 130px;
}
#sb6:hover {
    background-image: url(../../img/sidebar/yellow/sb6o.gif);
}
#sb7 {
    background-image: url(../../img/sidebar/yellow/sb7.gif);
    height: 30px;
    width: 130px;
}
#sb7:hover {
    background-image: url(../../img/sidebar/yellow/sb7o.gif);
}
#sb8 {
    background-image: url(../../img/sidebar/yellow/sb8.gif);
    height: 30px;
    width: 130px;
}
#sb8:hover {
    background-image: url(../../img/sidebar/yellow/sb8o.gif);
}
#sb9 {
    background-image: url(../../img/sidebar/yellow/sb9.gif);
    height: 30px;
    width: 130px;
}
#sb9:hover {
    background-image: url(../../img/sidebar/yellow/sb9o.gif);
}
#sb10 {
    background-image: url(../../img/sidebar/yellow/sb10.gif);
    height: 30px;
    width: 130px;
}
#sb10:hover {
    background-image: url(../../img/sidebar/yellow/sb10o.gif);
}
#extra {
    background-color: #FFCE00;
    padding-top: 1px;
    text-align: center;
}
#extra a {
    font-weight: normal;
}
#extra input, #extra button {
    height: 25px;
    margin-top: 5px;
}
#extra input {
    width: 80px;
    padding: 2px;
    border: 1px solid #888;
}
#extra button {
    padding: 0;
}
#clock {
    background-color: #f7ff5f;
    height: 18px;
    width: 115px;
    margin: 15px auto;
    border: 1px solid #000;
    text-align: center;
}
#sbbtm {
    width: 130px;
    height: 19px;
    background-color: #FFCE00;
}