/* CSS Document */

/* HTML Elements */
body {
font-family: Trebuchet MS, Arial, Verdana;
font-size: 90%;
color: #000;
background:#ccc;
text-align:center;
padding: 0;
margin: 0;
}
a {
color: #096aa7;
text-decoration: none;
font-weight: bold;
}

a:hover {
color: #036; 
text-decoration: underline;
}
h2 {color: #263354; font-weight: bold; font-size: 200%;}
h3 {color: #263354; font-weight: bold; font-size: 150%;}

#hidden{
display: none;
}

.hidden {
display: none;
}

#container
{
margin: 0 auto;
width: 780px;
text-align: left;
background: #fff
}

#header 
{
background: url("/assets/images/header.jpg") no-repeat;
height: 120px;
margin-bottom: 10px;
}

#left_content
{
float: left; 
width: 200px;
margin: 0;
padding: 0;
}

#navigation
{
padding: 0;
margin-bottom: 10px;
}

#nav
{
margin: 0;
padding: 0;
font-size: 120%;
text-align: center;
}

#nav ul {
margin: 0;
padding: 10px 0 0 30px;
list-style: none;
text-align: center;

}

#nav li {
float: left;
width: 180px;
}

#nav a {
margin: 2px;
padding: 10px 0 0 0;
height: 40px;
display: block;
background: url(../images/nav_bg.gif) no-repeat;
}

#nav a:hover {
margin: 2px;
display: block;
text-decoration:none;
background: url(../images/nav_bg_over.gif) no-repeat;
}

#nav img {vertical-align:middle; border: none;}
#nav span {padding: 10px;}
#right_content
{
width: 550px;
float:right;
padding: 0 0 10px 0;
margin: 0;
}

#right_content h2 {padding: 0 0 10px 0; margin: 0;color: #263354; font-weight: bold; font-size: 200%;}


#main_content
{
clear: both;
padding: 10px 20px 0px 20px;
margin: 0;
}

#main_content h2 {padding: 5px 0 5px 0; margin: 0;color: #263354; font-weight: bold; font-size: 200%;}
#main_content h3 {padding: 0; margin: 5px 0 5px 0;}

.h2home {
background: url("../images/h2/home.gif") no-repeat center left;
height: 20px;
}

h2 span {
display:none;
}

#footer
{
clear: both;
background: url("../images/footer.gif") no-repeat #039;
height: 100px;
margin-top: 20px;
padding: 5px 0 20px 20px;
color: #fff;
font-size: 80%;
}

#footer p{padding: 5px 0 5px 0}

#footer img {
float: left;
margin-top: 4px;
margin-right: 10px;
}

#footer a {
color: #fff;
text-decoration: underline
}

#footer a:hover {
color: #fff;
text-decoration: none
}

.products table
{
border: 1px solid #999;
margin:0 0 5px 0; 
padding:0px;
border-collapse: collapse; 
width: 100%;
font-size: 90%;
}

.products thead {
background: #999;

}

.products td  {
padding: 5px;
text-align: center;
}

.products th {
padding: 5px; 
color: #fff; 
text-align: center;
}

.products th span {font-size: 80%}
.products .pname {text-align: left;font-size: 90%;border-right: 1px solid #999;}
.products .pname h3{text-transform:uppercase; padding: 0; margin: 0;}
.products .pname p{padding: 0; margin: 0;}
.products .uname {width: 230px; text-align: left;font-size: 80%;border-right: 1px solid #999;}
.products .uname h3{text-transform:uppercase; padding: 0; margin: 0;}
.products .uname p{padding: 0; margin: 0;}
.products .pref {width: 20px;}
.products .aref {width: 20px;border-right: 1px solid #999;}
.products .ainfo {text-align: left; border-right: 1px solid #999;}
.products .psize {width: 60px;}
.products .pqty {width: 30px;}
.products .pcap {width: 200px; font-size: 80%}
.products .ucap {width: 200px; font-size: 90%}
.products .pweight {width: 80px;}
.products .psel {width: 30px; color: #fff}
.products .psel img {border: none;}
.sizes caption, .colour caption, .products caption
{
font-size: 180%;
font-weight: bold;
margin-bottom: 10px;
}

.sizes
{
text-align: center;
}

.sizes table
{
border: 1px solid #999;
margin:0 0 5px 0; 
padding:0px;
border-collapse: collapse; 
font-size: 90%;
}

.sizes thead {
background: #999;
}

.sizes td  {
padding: 5px;
text-align: center;
}

.sizes th {
padding: 5px; 
color: #fff; 
text-align: center;
}

.sizes span {
font-size: 70%
}

.colour table
{
border: 1px solid #999;
margin:0 0 5px 0; 
padding:0px;
border-collapse: collapse; 
font-size: 90%;
width: 100%;
}

.colour td  {
padding: 5px;

text-align: center;
}

.colour img {
border: none;

}

fieldset {border: 1px solid #999;padding: 10px;}
legend {color: #000; padding: 5px; font-size: 120%; font-weight: bold;}

label {text-transform:uppercase; color: #333; font-weight: bold;}
form p { font-size: 90%; }
form {}

/* SITE CONFIG AREA */

#status_ok {margin: 20px 0 20px 0; border: 1px solid #b0d2b7;background: #3C0; width: 500px;padding: 0; font-size: 90%;}
#status_error {margin: 20px 0 20px 0; border: 1px solid #b0d2b7;background: #F30; width: 500px;padding: 0; font-size: 90%;}
#status_error h2, #status_error h3, #status_error p, #status_ok h2, #status_ok h3, #status_ok p{padding: 5px;}
#admin table {border: 1px solid #999; font-size: 100%; margin:0; padding:0px;border-collapse: collapse; width: 500px;}
#admin thead {background: #999;}
#admin td  {padding: 5px;}
#admin th {padding: 5px; color: #fff; text-align: left;}
.row1 {background: #FFF; border: 1px solid #999;}
.row2 {background: #EDEDED; border-left: 1px solid #999; border-right: 1px solid #999;}
.row3 {background: #CCC; border-top: 1px solid #999; font-style:italic;}
.delete, .error, .logout {color: #F00;}
.remain {font-size: 80%; color: #666}
.btt {text-align: left; color: #fff}

.float_left {width: 35%; float:left; font-size: 180%; text-align: center; margin: 30px; padding: 20px;border: 1px solid #ccc; }
.float_right {width: 35%; float:right; font-size: 180%; text-align: center; margin: 30px; padding: 20px; border: 1px solid #ccc;}
#right {text-align: right; width: 540px;}
.visitorinfo {font-size: 80%; color: #666; width: 150px; padding-top: 20px;}
.date {font-size: 90%; color: #666;}
.img_left {float: left}
.img_center { text-align:center}
.clear { clear:both}
.biglink {font-size: 120%;text-decoration: underline; text-transform:uppercase;}
.bigtext {font-size: 120%;}
#printpage{background:url("../images/print_icon.gif") no-repeat;margin:0;padding:2px 0 10px 30px}
#b2t{background:url("../images/top_icon.gif") no-repeat;margin:0;padding:2px 0 10px 30px}
.visres {font-weight: bold; font-size: 110%; width: 70%; border: 1px solid #ccc; background: #ededed; padding: 10px; }

/* THUMBNAIL ROLLOVER */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ededed;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 0px; /*position where enlarged image should offset horizontally */

}