/* CSS Document */
body {background-image: url(../jpg/DirtWithStonesBkg.jpg);}

body, p, h1, h2, h3, h4, h5, h6, td
	{font: 12px/14px "Arial Rounded MT Bold", Arial, Helvetica, sans-serif; margin: 0; padding: 0;}

/*tags*/
hr {border: 1px solid #B2352C; margin: 6px 0;}

/*colors*/
.red {color: #B2352C;}
.white {color: #FFF;}
.blue {color: #0067C1;}
.brown {color: #75381D;}

/*font sizes*/
h1, h2, h3, h4, h5, h6 {padding: 6px 0;}
h1 {font-size: 36px; line-height: 36px;}
h1.super {padding: 6px 0; font-size: 72px; line-height: 72px;}
h2 {font-size: 30px; line-height: 30px;}
h2.super {padding: 6px 0; font-size: 60px; line-height: 60px;}
h3 {font-size: 22px; line-height: 22px;}
h3.super {padding: 6px 0; font-size: 44px; line-height: 44px;}
h4 {font-size: 18px; line-height: 18px;}
h4.super {padding: 6px 0; font-size: 36px; line-height: 36px;}
h5 {font-size: 16px; line-height: 16px;}
h5.super {padding: 6px 0; font-size: 32px; line-height: 32px;}
h6 {font-size: 14px; line-height: 14px;}
h6.super {padding: 6px 0; font-size: 28px; line-height: 28px;}

.f10 {font-size: 10px; line-height: 12px;}
.f12 {font-size: 12px; line-height: 14px;}
.f14 {font-size: 14px; line-height: 16px;}
.f16 {font-size: 16px; line-height: 18px;}
.f18 {font-size: 18px; line-height: 20px;}
.f20 {font-size: 20px; line-height: 22px;}

/*text justification*/
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

/*text transformation*/
.upper {text-transform: uppercase;}

/*borders*/
.b1r {border: 1px solid #B2352C;}

/*lists*/
ul.features {text-align: left;}
ul.features li {font-size: 30px; line-height: 40px; list-style-type: disc; margin-left: 200px;}

ul.featuresSm {text-align: left;}
ul.featuresSm li {font-size: 14px; line-height: 16px; list-style-type: disc;}

/*tables*/
/*table: features*/
table.features {
	width: 750px; 
	border: none;
	padding: 0; 
	margin: 50px 0 0 0;
	}
table.features th, table.features td {
	padding: 0; 
	margin: 0; 
	border-bottom: 1px solid #B2352C;
	}
table.features th {
	font: 30px "Arial Rounded MT Bold", Arial, sans-serif;
	}
table.features td {
	font: 24px "Arial Rounded MT Bold", Arial, sans-serif;
	}
.tablePrice
	{
	font: 40px "Arial Rounded MT Bold", Arial, sans-serif;
	}

/*table: liners*/
table.liners {
	width: 750px; 
	border: none;
	padding: 0; 
	margin: 0;
	}
table.liners th, table.liners td {
	padding: 0; 
	margin: 0; 
	border-bottom: 1px solid #B2352C;
	}
table.liners th {
	font: 16px "Arial Rounded MT Bold", Arial, sans-serif;
	}
table.liners td {
	font: 14px "Arial Rounded MT Bold", Arial, sans-serif;
	}

/*fake table with DIVs*/
div.tableContainer
{width: 760px;
border: none;
height: auto;
clear: both;
padding-left: 5px;
}
div.tableContainer div.rowContainer
	{
	border: 0px solid #B2352C;
	border-bottom: 1px solid #B2352C;
	height: 24px;
	clear: both;
	width: 740px;
	}
div.tableContainer div.rowContainer div.partNumHead, 
div.tableContainer div.rowContainer div.descriptHead, 
div.tableContainer div.rowContainer div.priceHead
{text-align: center; font: 18px/26px "Arial Rounded MT Bold", Arial, sans-serif; float: left;}

div.tableContainer div.rowContainer div.partNum, 
div.tableContainer div.rowContainer div.descript, 
div.tableContainer div.rowContainer div.price
{text-align: center; font: 14px/20px "Arial Rounded MT Bold", Arial, sans-serif; float: left;}

div.tableContainer div.rowContainer div.partNumHead, 
div.tableContainer div.rowContainer div.partNum
{text-align: left;}

div.tableContainer div.rowContainer div.priceHead, 
div.tableContainer div.rowContainer div.price
{text-align: right;}

div.tableContainer div.rowContainer div.partNum, 
div.tableContainer div.rowContainer div.partNumHead
	{width: 140px;}
div.tableContainer div.rowContainer div.descript, 
div.tableContainer div.rowContainer div.descriptHead
	{width: 520px;}
div.tableContainer div.rowContainer div.price, 
div.tableContainer div.rowContainer div.priceHead
	{width: 69px;}



/*widths*/
.w1 {width: 10px;}
.w2 {width: 20px;}
.w3 {width: 30px;}
.w4 {width: 40px;}
.w5 {width: 50px;}
.w6 {width: 60px;}
.w7 {width: 70px;}
.w8 {width: 80px;}
.w9 {width: 90px;}
.w10 {width: 100px;}
.w11 {width: 110px;}
.w12 {width: 120px;}
.w13 {width: 130px;}
.w14 {width: 140px;}
.w15 {width: 150px;}
.w16 {width: 160px;}
.w17 {width: 170px;}
.w18 {width: 180px;}
.w19 {width: 190px;}
.w20 {width: 200px;}
.w21 {width: 210px;}
.w22 {width: 220px;}
.w23 {width: 230px;}
.w24 {width: 240px;}
.w25 {width: 250px;}
.w26 {width: 260px;}
.w27 {width: 270px;}
.w28 {width: 280px;}
.w29 {width: 290px;}
.w30 {width: 300px;}
.w31 {width: 310px;}
.w32 {width: 320px;}
.w33 {width: 330px;}
.w34 {width: 340px;}
.w35 {width: 350px;}
.w36 {width: 360px;}
.w37 {width: 370px;}
.w38 {width: 380px;}
.w39 {width: 390px;}
.w40 {width: 400px;}
.w41 {width: 410px;}
.w42 {width: 420px;}
.w43 {width: 430px;}
.w44 {width: 440px;}
.w45 {width: 450px;}
.w46 {width: 460px;}
.w47 {width: 470px;}
.w48 {width: 480px;}
.w49 {width: 490px;}
.w50 {width: 500px;}
.w51 {width: 510px;}
.w52 {width: 520px;}
.w53 {width: 530px;}
.w54 {width: 540px;}
.w55 {width: 550px;}
.w56 {width: 560px;}
.w57 {width: 570px;}
.w58 {width: 580px;}
.w59 {width: 590px;}
.w60 {width: 600px;}
.w61 {width: 610px;}
.w62 {width: 620px;}
.w63 {width: 630px;}
.w64 {width: 640px;}
.w65 {width: 650px;}
.w66 {width: 660px;}
.w67 {width: 670px;}
.w68 {width: 680px;}
.w69 {width: 690px;}
.w70 {width: 700px;}
.w71 {width: 710px;}
.w72 {width: 720px;}
.w73 {width: 730px;}
.w74 {width: 740px;}
.w75 {width: 750px;}
.w76 {width: 760px;}
.w77 {width: 770px;}
.w78 {width: 780px;}
.w79 {width: 790px;}
.w80 {width: 800px;}
.w81 {width: 810px;}
.w82 {width: 820px;}
.w83 {width: 830px;}
.w84 {width: 840px;}
.w85 {width: 850px;}
.w86 {width: 860px;}
.w87 {width: 870px;}
.w88 {width: 880px;}
.w89 {width: 890px;}
.w90 {width: 900px;}

/*padding*/
/*padding top*/
.pt1 {padding-top: 10px;}
.pt2 {padding-top: 20px;}
.pt3 {padding-top: 30px;}
.pt4 {padding-top: 40px;}
.pt5 {padding-top: 50px;}
.pt6 {padding-top: 60px;}
.pt7 {padding-top: 70px;}
.pt8 {padding-top: 80px;}
.pt9 {padding-top: 90px;}
.pt10 {padding-top: 100px;}

/*padding right*/
.pr1 {padding-right: 10px;}
.pr2 {padding-right: 20px;}
.pr3 {padding-right: 30px;}
.pr4 {padding-right: 40px;}
.pr5 {padding-right: 50px;}
.pr6 {padding-right: 60px;}
.pr7 {padding-right: 70px;}
.pr8 {padding-right: 80px;}
.pr9 {padding-right: 90px;}
.pr10 {padding-right: 100px;}

/*padding bottom*/
.pb1 {padding-bottom: 10px;}
.pb2 {padding-bottom: 20px;}
.pb3 {padding-bottom: 30px;}
.pb4 {padding-bottom: 40px;}
.pb5 {padding-bottom: 50px;}
.pb6 {padding-bottom: 60px;}
.pb7 {padding-bottom: 70px;}
.pb8 {padding-bottom: 80px;}
.pb9 {padding-bottom: 90px;}
.pb10 {padding-bottom: 100px;}

/*padding left*/
.pl1 {padding-left: 10px;}
.pl2 {padding-left: 20px;}
.pl3 {padding-left: 30px;}
.pl4 {padding-left: 40px;}
.pl5 {padding-left: 50px;}
.pl6 {padding-left: 60px;}
.pl7 {padding-left: 70px;}
.pl8 {padding-left: 80px;}
.pl9 {padding-left: 90px;}
.pl10 {padding-left: 100px;}

/*margins*/
/*margin top*/
.mt1 {margin-top: 10px;}
.mt2 {margin-top: 20px;}
.mt3 {margin-top: 30px;}
.mtm1 {margin-top: -10px;}
.mtm2 {margin-top: -20px;}
.mtm3 {margin-top: -30px;}
.mtm4 {margin-top: -40px;}

/*margin right*/
.mr1 {margin-right: 10px;}
.mr2 {margin-right: 20px;}
.mr3 {margin-right: 30px;}
.mrm1 {margin-right: -10px;}
.mrm2 {margin-right: -20px;}
.mrm3 {margin-right: -30px;}
.mrm4 {margin-right: -40px;}

/*margin bottom*/
.mb1 {margin-bottom: 10px;}
.mb2 {margin-bottom: 20px;}
.mb3 {margin-bottom: 30px;}
.mbm1 {margin-bottom: -10px;}
.mbm2 {margin-bottom: -20px;}
.mbm3 {margin-bottom: -30px;}
.mbm4 {margin-bottom: -40px;}

/*margin left*/
.ml1 {margin-left: 10px;}
.ml2 {margin-left: 20px;}
.ml3 {margin-left: 30px;}
.mlm1 {margin-left: -10px;}
.mlm2 {margin-left: -20px;}
.mlm3 {margin-left: -30px;}
.mlm4 {margin-left: -40px;}

/*pricing*/
.superscript, .dollar
{float: left;}
.priceContainer
{font-size: 48px; width: 100px; margin-left: 90px; margin-top: 10px;
line-height: 48px;}
.superscript
{font-size: 50%; margin-top: -10px; padding-bottom: 25px;}
.dollar
{font-size: 100%;}

/*floats*/
.floatLeft {float: left;}
.floatRight {float: right;}
.clearLeft {clear: left;}
.clearRight {clear: right;}
.clearBoth {clear: both;}

/*displays*/
.block {display: block;}
.inline {display: inline;}

#mainBox
	{
	position: relative;
	top: 50px;
	left: 50px;
	width: 930px;
	background-color: #FFF;
	background-image: url(../jpg/BlueStarburstTop.jpg);
	background-repeat:no-repeat;
	border: 4px solid #B2352C;
	}
#logo
	{position: relative;
	margin: 10px 0 0 20px;
	}
#mainbox #logo img {float: left;}
#sloganBox
	{
	margin-top: 8px;
	padding: 6px 0 4px 20px;
	font: 20px Arial Rounded MT Bold, Arial, Helvetica, sans-serif;
	width: 912px;
	height: 24px;
	background-color: #B2352C;
	}

/*Hide the catalog*/
#catalog {visibility: hidden;}
#catalog a img {border: 2px solid #B2352C;}
#catalog a:hover img {border: 2px solid #FFFF00;}


/*contentHolder*/
#contentHolder
{
position: relative;
margin: 10px 0 0 130px;
height: 900px;
width: 800px;
}

/*Absolute DIVs*/
#catalog
	{position: absolute;
	top: 38px;
	left: 745px;
	width: 228px;
	height: 149px;
	}
#topPics
	{position: absolute;
	top: 58px;
	left: 342px;
	width: 392px;
	height: 130px;
	}