/* CSS Document */

body { margin: 0px; padding: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 11px; }
h1 { font-size: 18px; font-weight: normal; color: #800000; margin: 0 10px 5px 10px; }
p { margin: 10px 0px; padding: 0px; }
ul { margin: 10px 0px 10px 40px; padding: 0px; }
#header { width: 100%; height: 143px; background: url(../images/headerBG.png) repeat-x; text-align: center; }
#body, #main { width: 840px; margin: 0px auto; text-align: left; }
#header #body #left { float: left; margin-left: -50px; }
#header #body #right { width: 261px; height: 143px; float: right; margin-right: 123px; background: url(../images/headerTees.png) no-repeat; }
#menu { position: absolute; z-index: 100; width: 840px; margin: -38px 0px 38px -420px; left: 50%; text-align: left; }
#menu a { width: 167px; height: 22px; background: url(../images/menuBG.jpg) no-repeat 0px 5px; color: #FFF; font-weight: bold; text-align: center; float: left; font-size: 11px; text-decoration: none; margin: 0px 1px 0px 0px; padding-top: 16px; }
body.home #menu a.home,
body.design-your-own #menu a.design,
body.customer-gallery #menu a.gallery,
body.product-categories #menu a.products,
body.promotions #menu a.promotions,
body.become-a-fan #menu a.fan,
#menu a:hover { width: 167px; height: 38px; background: url(../images/menuBG.png) no-repeat 0px -33px; }

#main { padding: 20px 0px; }
#main #left { width: 175px; float: left; }

#main #left #grey { width: 167px; margin: 4px; background: url(../images/greyMid.gif) repeat-x 0px 36px #adadad; color: #FFF; }
#main #left #grey form { margin: 12px; }
#main #left #grey input.text { width: 137px; }
#main #left #grey #top { width: 159px; height: 24px; background: url(../images/greyTop.gif) no-repeat -2px 0px; font-size: 14px; padding: 12px 0px 0px 12px; }
#main #left #grey #bottom { width: 171px; height: 5px; background: url(../images/greyBottom.gif) no-repeat -2px 0px; font-size: 2px; }
#main #left #grey a { display: block; width: 139px; height: 13px; color: #FFF; padding: 4px 3px 0px 20px; background: url(../images/arrow.png) no-repeat 10px 7px; text-decoration: none; }
#main #left #grey #news { margin: 12px; }
#main #left #grey a:hover, #main #left #grey a.on { background-position: 15px 7px; text-decoration: underline; }

#main #left #red { width: 167px; margin: 4px; background: url(../images/redMid.png) repeat-x 0px 36px #BF162D; color: #FFF; }
#main #left #red #news { margin: 12px; }
#main #left #red #top { width: 159px; height: 25px; background: url(../images/redTop.png) no-repeat -2px 0px; font-size: 14px; padding: 12px 0px 0px 12px; }
#main #left #red #bottom { width: 171px; height: 4px; background: url(../images/redBottom.png) no-repeat -2px 0px; font-size: 2px; }

#main #left #red a { display: block; width: 137px; font-weight: bold; color: #FFF; padding: 4px 15px; }
#main #left #red a:hover { width: 137px; color: #800000; padding: 4px 10px 4px 20px; background-color: #dadada; }

#main #left #cards { width: 160px; margin: 50px 3px 0px 4px; }

#main #middle { width: 503px; float: left; }
#main #middle #top { width: 489px; padding: 2px; height:117px; margin: 0px 5px 9px 5px; background: url(../images/middleSmall.png) no-repeat; }
#main #middle #bottom { width: 489px; padding: 2px; height:427px; margin: 0px 5px 9px 5px; background: url(../images/middleBig.png) no-repeat; }
#main #middle #full { width: 669px; padding: 2px; height:679px; margin: 0px 5px 9px 5px; background: url(../images/largeFull.gif) no-repeat; }

#main #middle #adjust-top { width: 489px; padding: 2px; height:10px; margin: 0px 5px; background: url(../images/middleSmall-top.gif) no-repeat; }
#main #middle #adjust-mid { width: 489px; padding: 0 2px; margin: 0px 5px; background: url(../images/middleSmall-mid.gif) repeat-y; }
#main #middle #adjust-bottom { width: 489px; padding: 2px; height:10px; margin: 0px 5px 9px 5px; background: url(../images/middleSmall-bottom.gif) no-repeat 0 bottom; }

#main #middle #top-bg { width: 669px; padding: 2px; height:10px; margin: 0px 5px 0px 5px; background: url(../images/largeFull-top.gif) no-repeat 0 0; }
#main #middle #middle-bg { width: 669px; padding: 2px; margin: 0px 5px 0px 5px; background: url(../images/largeFull-mid.gif) repeat-y 0 0; }
#main #middle #bottom-bg { width: 669px; padding: 2px; height:10px; margin: 0px 5px 9px 5px; background: url(../images/largeFull-bottom.gif) no-repeat 0 bottom; }

#main #right { width: 162px; float: left; }

#footer { width: 100%; height: 40px; background: url(../images/footerBG.jpg) repeat-x; color: #FFF; padding: 10px 0px; }
#footer span { color: #FF6666; }
#footer a { color: #FFF; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

.floatRight { float: right; }

/* IE 5.5 Fix */
* html #header #body #left { position: absolute; z-index: 50; left: 50%; margin-left: -470px; }
* html #header #body #right { float: left; margin-left: 220px; margin-right: 0px; }
* html #main #left #grey { overflow: hidden; }
* html #main #left #grey #top { width: 169px; height: 36px; }
* html #main #left #grey #bottom { width: 169px; }

* html #main #left #red { overflow: hidden; }
* html #main #left #red #top { width: 169px; height: 37px; }
* html #main #left #red #bottom { width: 169px; }

* html #main #middle #top { width: 493px; height: 121px; }
* html #main #middle #bottom { width: 493px; height: 431px; }
* html #main #middle #full { width: 654px; height: 683px; overflow: auto; }

* html #menu { margin: -52px 0px 38px -420px; }
* html #menu a { height: 38px; display: inline; }

.msg { color: #FF0000; font-weight: bold; font-size: 14px; }

/* Content Padding */

.fullPad {  padding: 0px 0px 0px 0px; }
.topPad {  padding: 20px 20px 20px 20px; }
.bottomPad {  padding: 20px 15px 20px 15px; }