/*this stylesheet is for the navigation panel*/

/* ---------------------- */
/* Navigation Bar Buttons*/
/* ---------------------- */

.housebutton {
font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 1px;
}

/* This part is for the colors of the buttons "at rest" */

.housebutton a {
padding: 4px;
text-decoration: none;
display: block;
color: #fff; /*this is where you change the button font color*/
background-color: #101010;
border-top: 3px #808080 solid;
border-left: 3px #808080 solid;
border-bottom: 3px #404040 solid;
border-right: 3px #404040 solid;
font-size: 100%;
}

/* This part is how the buttons look, once the pointer passes over them. Note that compared to
the above "at rest" state, top/left colors SWAP with the bottom/right, to give the correct effect.
Also the background color goes a shade darker, to make it seem as if it is now below the 
level of the page, and is not getting any light on it */

.housebutton a:hover {
color: #fff; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #000;
border-top: 3px #404040 solid;
border-left: 3px #404040 solid;
border-bottom: 3px #808080 solid;
border-right: 3px #808080 solid;
font-size: 100%;
}

/* -------------------------- */
/* New Navigation Bar Buttons */
/* -------------------------- */

.navbutton {
font-weight: bold;
width: 150px;
text-align: right;
margin-bottom: 3px;
margin-right: 5px;
margin-top: 3px;
font-size: 90%;
}

/* This part is for the colors of the buttons "at rest" */

.navbutton a {
padding: 1px;
text-decoration: none;
display: block;
color: #fff; /*this is where you change the button font color*/
background-color: #000;
border-top: 1px #000 solid;
border-bottom: 1px #000 solid;
}

/* This part is how the buttons look, once the pointer passes over them. Note that compared to
the above "at rest" state, top/left colors SWAP with the bottom/right, to give the correct effect.
Also the background color goes a shade darker, to make it seem as if it is now below the 
level of the page, and is not getting any light on it */

.navbutton a:hover {
color: #fff; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #101010;
border-top: 1px #cccccc solid;
border-bottom: 1px #cccccc solid;
}

/* -------------------------- */
/*     Selection Buttons      */
/* -------------------------- */

.selectbutton {
font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 1px;
}

/* This part is for the colors of the buttons "at rest" */

.selectbutton a {
padding: 4px;
text-decoration: none;
display: block;
color: #fff; /*this is where you change the button font color*/
background-color: #606060;
border-top: 3px #d0d0d0 solid;
border-left: 3px #d0d0d0 solid;
border-bottom: 3px #000 solid;
border-right: 3px #000 solid;
}

/* This part is how the buttons look, once the pointer passes over them. Note that compared to
the above "at rest" state, top/left colors SWAP with the bottom/right, to give the correct effect.
Also the background color goes a shade darker, to make it seem as if it is now below the 
level of the page, and is not getting any light on it */

.selectbutton a:hover {
color: #fff; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #484848;
border-top: 3px #000 solid;
border-left: 3px #000 solid;
border-bottom: 3px #d0d0d0 solid;
border-right: 3px #d0d0d0 solid;
}

/* -------------------------- */
/*   Main Selection Buttons   */
/* -------------------------- */

.mainselectbutton {
width: 220px;
font-weight: bold;
text-align: center;
margin-bottom: 1px;
margin-top: 1px;
}

/* This part is for the colors of the buttons "at rest" */

.mainselectbutton a {
padding: 14px;
text-decoration: none;
display: block;
color: #fff; /*this is where you change the button font color*/
background-color: #606060;
border-top: 3px #d0d0d0 solid;
border-left: 3px #d0d0d0 solid;
border-bottom: 3px #000 solid;
border-right: 3px #000 solid;
font-size: 130%;
}

/* This part is how the buttons look, once the pointer passes over them. Note that compared to
the above "at rest" state, top/left colors SWAP with the bottom/right, to give the correct effect.
Also the background color goes a shade darker, to make it seem as if it is now below the 
level of the page, and is not getting any light on it */

.mainselectbutton a:hover {
color: #fff; /*-----this is where you change the button font color, when the button is hovered over*/
background-color: #606060;
border-top: 3px #000 solid;
border-left: 3px #000 solid;
border-bottom: 3px #d0d0d0 solid;
border-right: 3px #d0d0d0 solid;
font-size: 130%;
}