<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>CSS Layout</title>

<style type="text/css">

/* Start of Reset styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
/* End of Reset styles */

/* fix IE float Div margin and Div overflow rendering errors display:inline;
div {overflow:hidden;}                                                       */


a:link,
a:visited {color: #000000; text-decoration: underline; border: 0px}
a:hover,
a:focus {color: #FF0000; text-decoration: underline; border: 0px}

a:hover {cursor: hand;}

.centeredbody {
  position: relative;
	width:810px;
	margin-left:auto;
	margin-right:auto;}

body {
  font-family: serif;
  font-size:62.5%;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  background: #CCCCCC;
}

img {
  border: 0px;
}

/* Menu Item Styling */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px; /* width of menu (don't forget to add border with below!) */
border-left: 0px solid #ffa1a3; /* thick left border of menu */
}

.slidedoormenu li a{
background: url(images/menubuttons.gif) no-repeat left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 1.4em serif;
display: block;
color: black;
width: auto;
border-bottom: 2px solid #cccccc; /* White border beneath each menu item link, to add depth */
padding: 2px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 20px;
text-decoration: none;
background-position: -2px 0;
}

.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}

.slidedoormenu li a:hover,
.slidedoormenu li a:focus,
.slidedoormenu li a:active{
background-position: -156px 0; /* Shift background image */
color: black;
}

.slidedoormenu li.selected a{
background-position: -156px 0; /* Shift background image */
color: black;
position:relative;
left:10px;}


.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}

.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}

/* Menu Item Styling */

#signinbox {position:absolute;left:10px;top:5px;color:#000000;font-size:1.2em}

.filtertable{padding:0px;color:#000000;}
.filtertable td{font-size:1.1em;}
.filtertable td select,
.filtertable td input{font-size:1em;}

.hb {background: url(images/horiz.gif) repeat top left;position:absolute;left:0px;bottom:-10px;height:10px;width:100%;background-position:0px -2px;}
.ht {background: url(images/horiz.gif) repeat top left;position:absolute;left:0px;top:-10px;height:10px;width:100%;background-position:0px -2px;}
.htb {background: url(images/horiz.gif) repeat top left;position:absolute;left:0px;top:-10px;height:20px;width:100%;background-position:0px -16px;}
.hbb {background: url(images/horiz.gif) repeat top left;position:absolute;left:0px;bottom:-20px;height:20px;width:100%;background-position:0px -16px;}
.hbs {background: url(images/horiz.gif) repeat top left;position:absolute;left:0px;bottom:-4px;height:4px;width:100%;background-position:0px -40px;}
.vl {background: url(images/vert.gif) repeat top left;position:absolute;left:-10px;top:0px;height:100%;width:10px;}
.vr {background: url(images/vert.gif) repeat top left;position:absolute;right:-10px;top:0px;height:100%;width:10px;}

/* cornering xxco xx=pos c=colour o=oncolour*/
.tlld, .trld, .blld, .brld,
.tlll, .trll, .blll, .brll,
.tltl, .trtl, .bltl, .brtl
{background: url('images/corners2.gif') no-repeat top left;position:absolute;
width:25px;height:25px;font-size:1px;border:0px;padding:0px;margin:0px;}

.tlld {background-position:-2px -108px;top:-5px;left:-5px;}
.trld {background-position:-31px -108px;top:-5px;right:-5px;}
.blld {background-position:-60px -108px;bottom:-5px;left:-5px;}
.brld {background-position:-89px -108px;bottom:-5px;right:-5px;}

.tlll {background-position:-118px -108px;top:-5px;left:-5px;}
.trll {background-position:-147px -108px;top:-5px;right:-5px;}
.blll {background-position:-176px -108px;bottom:-5px;left:-5px;}
.brll {background-position:-205px -108px;bottom:-5px;right:-5px;}

.tltl {background-position:-2px -26px;top:0px;left:0px;}
.trtl {background-position:-31px -26px;top:0px;right:0px;}
.bltl {background-position:-60px -26px;bottom:0px;left:0px;}
.brtl {background-position:-89px -26px;bottom:0px;right:0px;}

.titlel
{background: url('images/corners2.gif') no-repeat top left;position:absolute;
width:20px;height:40px;font-size:1px;border:0px;padding:0px;margin:0px;
background-position:-118px -26px;top:0px;left:0px;}
.titler
{background: url('images/corners2.gif') no-repeat top left;position:absolute;
width:20px;height:40px;font-size:1px;border:0px;padding:0px;margin:0px;
background-position:-142px -26px;top:0px;right:0px;}

.tl20 {background: url('images/corners2.gif') no-repeat top left;background-position:-2px -2px;}
.tr20 {background: url('images/corners2.gif') no-repeat top left;background-position:-26px -2px;}
.bl20 {background: url('images/corners2.gif') no-repeat top left;background-position:-50px -2px;}
.br20 {background: url('images/corners2.gif') no-repeat top left;background-position:-74px -2px;}

.tl20pi {background: url('images/corners2.gif') no-repeat top left;background-position:-70px -74px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}
.tl20pib {background: url('images/corners2.gif') no-repeat top left;background-position:-104px -74px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}
.tr20pi {background: url('images/corners2.gif') no-repeat top left;background-position:-36px -74px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}
.br20pi {background: url('images/corners2.gif') no-repeat top left;background-position:-2px -74px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}
.br20pib {background: url('images/corners2.gif') no-repeat top left;background-position:-194px -2px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}
.br20pis {background: url('images/corners2.gif') no-repeat top left;background-position:-138px -74px;
position:absolute;width:30px;height:30px;font-size:1px;border:0px;padding:0px;margin:0px}

.tl20{top:0px;left:0px;}
.tr20{top:0px;right:0px;}
.bl20{bottom:0px;left:0px;}
.br20{bottom:0px;right:0px;}

.tl20, .tr20, .bl20, .br20
{position:absolute;width:20px;height:20px;font-size:1px;border:0px;padding:0px;margin:0px;}

.tail20 {position:absolute;width:10px;height:20px;font-size:1px;border:0px;bottom:-20px;left:0px;
padding:0px;margin:0px;background: url('images/corners2.gif') no-repeat top left;background-position:-192px -50px;}
.tail10 {position:absolute;width:5px;height:10px;font-size:1px;border:0px;bottom:-10px;left:0px;
padding:0px;margin:0px;background: url('images/corners2.gif') no-repeat top left;background-position:-207px -50px;}
.shimup {position:absolute;width:40px;height:20px;font-size:1px;border:0px;left:270px;top:-10px;
padding:0px;margin:0px;background: url('images/corners2.gif') no-repeat top left;background-position:-172px -74px;}
.shimdn {position:absolute;width:17px;height:20px;font-size:1px;border:0px;left:0px;top:0px;
padding:0px;margin:0px;background: url('images/corners2.gif') no-repeat top left;background-position:-217px -50px;}

button,
a.button,
button.b,
a.buttonb,
button.c,
a.buttonc{
padding: 0 0 0 0;
height: 25px;
border: 0;
cursor: pointer;
text-align: center;
color: #f9f9f9;
font: bold 14px serif;
overflow: visible; /* IE value */
}

button span,
a.button span,
button.b span,
a.buttonb span,
button.c span,
a.buttonc span{
display: block;
padding: 0 15px 0 0;
height: 25px;
line-height: 23px;
white-space: nowrap;
background: url(images/button-sprite.gif) no-repeat right top;
}

button span span,
a.button span span,
button.b span span,
a.buttonb span span,
button.c span span,
a.buttonc span span{
display: block;
padding: 0 0 0 15px;
height: 25px;
line-height: 23px;
white-space: nowrap;
background: url(images/button-sprite.gif) no-repeat left -28px;
}

button.b span,
a.buttonb span{
background-position: right -110px;
}

button.b span span,
a.buttonb span span{
background-position: left -138px;
}

button.c span,
a.buttonc span{
background-position: right -220px;
}

button.c span span,
a.buttonc span span{
background-position: left -248px;
}

button::-moz-focus-inner,
button.b::-moz-focus-inner,
button.c::-moz-focus-inner /* fixing evil default firefox padding */ {
padding:0;
border:none;}

button:hover span,
button:focus span,
a.button:hover span,
a.button:focus span{
background-position: right -56px;}

button:hover span span,
button:focus span span,
a.button:hover span span,
a.button:focus span span{
background-position: left -84px;}

button.b:hover span,
button.b:focus span,
a.buttonb:hover span,
a.buttonb:focus span{
background-position: right -166px;}

button.b:hover span span,
button.b:focus span span,
a.buttonb:hover span span,
a.buttonb:focus span span{
background-position: left -194px;}

button.c:hover span,
button.c:focus span,
a.buttonc:hover span,
a.buttonc:focus span{
background-position: right -276px;}

button.c:hover span span,
button.c:focus span span,
a.buttonc:hover span span,
a.buttonc:focus span span{
background-position: left -304px;}

button:focus,
a.button:focus,
button.b:focus,
a.buttonb:focus,
button.c:focus,
a.buttonc:focus  {
margin-top: 1px;}

a.button:hover,
a.button:focus,
a.buttonb:hover,
a.buttonb:focus,
a.buttonc:hover,
a.buttonc:focus{
text-decoration: none;}

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

/* -------Title ----- */
#title {
  position: absolute;
  width: 285px;
  left: 35px;
  top: 60px;
  height: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  color: #FFFFFF;
}

#titleblurb {
  position: absolute;
  width: 240px;
  left: 340px;
  top: 35px;
  height: 60px;
  font-size: 1.3em;
}
/* ---- End of Title ----*/

/*  ----- Bread Crumb Trail ------- */
#breadcrumbtrail {
  position: absolute;
  color: #000000;
  left: 40px;
  width: 550px;
  top: -5px;
  height: 20px;
  background: transparent;
  font-size: 10px;
}

/* don't know why bread crumb trail doesn't pick up standard <a> formating? */
#breadcrumbtrail a:link,
#breadcrumbtrail a:visited {color: #000000; text-decoration: none; border: 0px}
#breadcrumbtrail a:hover,
#breadcrumbtrail a:focus {color: #000000; text-decoration: underline; border: 0px}
#breadcrumbtrail a:hover, {cursor: hand;}
/*  ----- End of Bread Crumb Trail ---- */

/*  ------  Main Area Box  ------ */
#mainarea {
  position: absolute;
  width: 620px;
  left: 180px;
  top: 10px;
  height: 520px;
  font-size: 1.2em;
  font-family: Georgia, sans-serif;
}

/*  ------  Content Box ------ */

#content {
  position: absolute;
  width: 560px;
  left: 30px;
  top: 90px;
  height: 430px;
  font-size: 1.2em;
}
/*      ----- Bottom Menu Bar ----- */
#bottommenu {
  font-size: 1em;
  color: #000000;
}

#bottommenu a {color: #000000;}
#bottommenu a:link,
#bottommenu a:visited {color: #000000; text-decoration: none; border: 0px}
#bottommenu a:hover,
#bottommenu a:focus {color: #000000; text-decoration: underline; border: 0px}
#bottommenu a:hover, {cursor: hand;}
/*  ---- End of Bottom Menu Bar ---- */

/*  ------  Shirt Details Box ------ */

.detailbox {
  position:absolute;
  width:320px;
  left:300px;
  top:10px;
  height:270px;}
.detailtext {
  font-size: 1.4em;
  color: #000000;
}

.title{font-size:1.5em;}
.littleshirt{height:10px;width:10px;}
.detailstable td{padding:2px;}

.sizedetailboxbutton {width:50px; height:50px;}
.posdetailboxbuttontext1ln {position:absolute;left:55px;top:15px;height:20px;}
.posdetailboxbuttontext2ln {position:absolute;left:55px;top:10px;height:30px;}

.btnanchor:link,
.btnanchor:visited {text-decoration:none;}
.btnanchor:hover,
.btnanchor:focus {text-decoration:underline;}
.btnanchor:hover {cursor: hand;}

.btndetail,
.btnnext,
.btnprev,
.btncomplete,
.btnwatch,
.btnswap,
.btnupdate,
.btnmyshirts,
.btnaddshirt,
.btnfeedback,
.btnprofile
{background: url('images/userbuttons.gif') no-repeat top left;
text-decoration:none;}

.btndetail{background-position:0px -100px;}
#detailbuttonbg:hover a div.btndetail,
#detailbuttonbg a:focus div.btndetail,
#detailbuttonbg:active a div.btndetail{background-position:-50px -100px;}

.btnprev{background-position:0px -150px;}
#browsebuttonbg:hover a div.btnprev,
#browsebuttonbg a:focus div.btnprev,
.leftbuttonlocation a:hover img,
.leftbuttonlocation a:focus img,
#browsebuttonbg:active a div.btnprev,
.leftbuttonlocation a:active img
{background-position:-50px -150px;}

.btnnext{background-position:0px -250px;}
.btnnext:hover,
.btnnext:focus,
.btnnext:active
{background-position:-50px -250px;}

.btncomplete{background-position:0px -350px;}
.btncomplete:hover,
.btncomplete:focus,
.btncomplete:active
{background-position:-50px -350px;}

.btnwatch{background-position:0px -200px;}
#watchbuttonbg:hover a div.btnwatch,
#watchbuttonbg a:focus div.btnwatch,
#watchbuttonbg:active a div.btnwatch{background-position:-50px -200px;}

.btnswap{background-position:0px -50px;}
#swapbuttonbg:hover a div.btnswap,
#swapbuttonbg a:focus div.btnswap,
#swapbuttonbg:active a div.btnswap{background-position:-50px -50px;}

.btnupdate{background-position:0px 0px;}
#updatebuttonbg:hover a div.btnupdate,
#updatebuttonbg a:focus div.btnupdate,
#updatebuttonbg:active a div.btnupdate{background-position:-50px 0px;}

.btnfeedback{background-position:0px -300px;}
#feedbackbuttonbg:hover a div.btnfeedback,
#feedbackbuttonbg a:focus div.btnfeedback,
#feedbackbuttonbg:active a div.btnfeedback{background-position:-50px -300px;}

.btnmyshirts{background-position:0px -400px;}
#myshirtsbuttonbg:hover a div.btnmyshirts,
#myshirtsbuttonbg a:focus div.btnmyshirts,
#myshirtsbuttonbg:active a div.btnmyshirts{background-position:-50px -400px;}

.btnaddshirt{background-position:0px -450px;}
#addshirtbuttonbg:hover a div.btnaddshirt,
#addshirtbuttonbg a:focus div.btnaddshirt,
#addshirtbuttonbg:active a div.btnaddshirt{background-position:-50px -450px;}

.btnprofile{background-position:0px -500px;}
#profilebuttonbg:hover a div.btnprofile,
#profilebuttonbg a:focus div.btnprofile,
#profilebuttonbg:active a div.btnprofile{background-position:-50px -500px;}

.sizeinfo{height:15px;width:10px;}
.btninfo img{background: url('images/userbuttons.gif') no-repeat top left;
background-position:0px -550px;height:15px;width:10px;}
.btninfo:hover img,
.btninfo:focus img,
.btninfo:active img{background-position:0px -565px;}

.btnplus img{background: url('images/userbuttons.gif') no-repeat top left;
background-position:0px -580px;height:15px;width:10px;}
.btnplus:hover img,
.btnplus:focus img,
.btnplus:active img{background-position:0px -595px;}

.sizeprevnext{height:134px;width:26px;}
.btnprevpage img{background: url('images/prevnext.gif') no-repeat top left;
background-position:-78px 0px;}
.btnprevpage:hover img,
.btnprevpage:focus img,
.btnprevpage:active img{background-position:-52px 0px;}

.btnnextpage img{background: url('images/prevnext.gif') no-repeat top left;
background-position:0px 0px;}
.btnnextpage:hover img,
.btnnextpage:focus img,
.btnnextpage:active img{background-position:-26px 0px;}

.littleshirt{background: url('images/userbuttons.gif') no-repeat top left;
background-position:0px -610px;height:10px;width:10px;}

.male{background: url('images/userbuttons.gif') no-repeat top left;
background-position:-10px -590px;height:40px;width:30px;}

.female{background: url('images/userbuttons.gif') no-repeat top left;
background-position:-10px -550px;height:40px;width:30px;}

.feedbacksize {height:40px;width:40px;}
.feedbackg{background: url('images/userbuttons.gif') no-repeat top left;
background-position:-40px -550px;}
.feedbackn{background: url('images/userbuttons.gif') no-repeat top left;
background-position:-40px -590px;}
.feedbackb{background: url('images/userbuttons.gif') no-repeat top left;
background-position:-40px -630px;}

.tabsize {height:40px;width:130px;}
.tab img{background: url('images/tabs.gif') no-repeat top left;
background-position:-130px 0px;}
.tab:hover img,
.tab:focus img,
.tab:active img{background-position:0px 0px;}

.tabsel img{background: url('images/tabs.gif') no-repeat top left;
background-position:0px 0px;}


.rightbuttonlocation{
  position: absolute;
  left: 490px;
  top: 330px;
  height: 75px;
  width: 50px;
}

.leftbuttonlocation{
  position: absolute;
  left: 0px;
  top: 330px;
  height: 75px;
  width: 50px;
}

.navbuttontext {
  position:absolute;
  left:0px;
  top:55px;
  width:100%;
  text-align:center;
}
/*  ---- End of Shirt Details Box ---- */


/*  ------  Shirt List Box ------ */
.shirtlistbacksmall { position: absolute; width: 110px; height: 110px;}
.shirtlistshirtareasmall { position: absolute; width: 120px; height: 120px;}

.shirtlistshirtarea { position: absolute; width: 140px; height: 140px;}
.shirtlistback { position: absolute; width: 130px; height: 130px;}

.shirtbtnshadow {position:absolute;top:6px;left:6px;height:102px;width:102px;}
.shirtbtnimg {position:absolute;top:2px;left:2px;height:102px;width:102px;}
/*  ---- End of Shirt List Box ---- */

/*  ---- Shirts popup box ---- */
.popuptext {font-size: 1.4em;}
/*    ------ Scroll Text -------*/
.numshirtarea
{position:absolute;
width:170px;
left:450px;
top:520px;
height:16px;
color:#000000;
font-size:1.2em;}

/*  ---- shirt pic definitions ---- */
#shirt-type{background: url('images/shirttype-sprite.gif') no-repeat top left;
background-position:0px -100px;height:100px;width:100px;}
#shirt-type-sleaves{background: url('images/shirttype-sprite.gif') no-repeat top left;
background-position:-100px 0px;height:100px;width:100px;}

.stars{background: url('images/userbuttons.gif') no-repeat top left;
background-position:0px -630px;position:relative;top:-10px;height:10px;width:10px;}
/*  ---- class definitions --- */

td.heading {font-weight: bold;}
td.center {text-align: center;}

.colourwhite {background: #EEEEEE;}
.colourmenu {background: #CCCCCC;}
.colourbg {background: #EEEEEE;}
.colourslight {background: #003333;}
.colourmed {background:  #006666;}
.colourstrong {background: #339999;}
.colourhilite {background: #99FFFF;}
.colourgrayed {background: #333333;}

.fill {height:100%;width:100%;}

.textdull {color:#555555}
.textmsg {color:#FF0000}

.fullarea {position:absolute;left:0px;top:0px;height:100%;width:100%;}


.detailsscrollbox {
background:#FFFFFF;
color:#000000;
padding:4px;
border:1px solid #000000
overflow:auto;
text-align:left;}

.faqheader {font-size:1.6em;width:50%;text-decoration:underline;}
.faqlinks {line-height:1.3em;padding-left:10px;vertical-align:text-top;}
.faqlinks a:link,
.faqlinks a:visited {text-decoration:none;}
.faqlinks a:hover,
.faqlinks a:focus {text-decoration:underline;}
.faqlinks a:hover {cursor: hand;}


.centre {text-align: center;}
.right {text-align: right;}

</style>


</head>

<body>
</body>
</html>

