body { margin:0; padding:0;}
a {color:#17337D; font-size: 13px; } a:Hover {color:#173296;  }



/* IE8 bug forces me to make text links use a specific name, otherwise images get an underline on mouse hover that can't be stopped */
.linker a {color:#17337D; font-size: 13px; }
.linker a:Hover {color:#173296; background:#E6E6E6; }
.smallLinker a {letter-spacing: 2px; text-align: center; font-style: normal; font-size: 11px; color: #0D4895;}
.smallLinker a:Hover {color:#173296; background:#E6E6E6; }


TD { font-family: arial; font-style: normal; text-align: left; font-size: 13px; letter-spacing: 1px; color: #3D4045; line-height: 19px;}
	.list { font-family: arial; line-height:20px; font-style: normal; font-size: 14px; color: #353e30;}
	.price { font-family: arial; line-height:20px; font-style: normal; font-size: 17px; color: #353e30;}
	.side { font-family: arial; font-style: normal; font-size: 11px; color: #3D4045; line-height:15px;}
	.side2 { font-family: arial; font-weight: bold; font-style: normal; font-size: 11px; color: #3D4045; line-height:19px;}
	.side3 { font-family: arial; font-style: normal; font-weight:bold; font-size: 11px; color: #0D4895; line-height:15px;}
	.side4 { font-family: arial; font-weight: bold; font-style: normal; font-size: 11px; color: #0D4895;; line-height:19px;}
        .redWarning {font-family: arial; font-style: normal; font-size: 12px; color: #BB2222; line-height:15px;}
	.small { font-family: arial; letter-spacing: 2px; text-align: center; font-style: normal; font-size: 11px; color: #0D4895;}
	.small2 { font-family: arial; letter-spacing: 1px; text-align: left; font-style: normal; font-size: 11px; color: #0D4895;}
	.small3 { font-family: arial; text-align: right; font-style: normal; font-size: 11px; color: #0D4895;}
	.small4 { font-family: arial; letter-spacing: 2px; text-align: center; text-decoration: none; font-style: normal; font-size: 9px; color: #0D4895;}
	.small5 { font-family: arial; letter-spacing: 1px; text-align: left; font-style: normal; font-size: 12px; color: #0D4895;}
	.list2 { font-family: arial; line-height:30px; font-style: normal; font-size: 12px; color: #353e30;}
        .high { font-family: arial; font-style: normal; font-size: 11px; background-color: yellow; color: #353e30;}
        .priceNote { font-family: arial; font-style: normal; font-size: 10px; color: #353e30; line-height:16px;}
        .print { font-family: arial; font-style: normal; font-size: 11px; color: #353e30;}
	.b2 { font-family: arial; font-weight:bold; font-style: normal; font-size: 12px; color: #8C5BBD;}
	.b3 { font-family: arial; font-weight:bold; font-style: normal; font-size: 13px; color: #676767;}
        .b4 { font-family: arial; font-style: normal; font-weight: normal; font-size: 17px; color: #0D4895;}
        .biggie { font-family: arial; font-style: normal; font-weight: bold; font-size: 15px; color: #0D4895;}
        .purple {font-family: arial; font-style: normal; font-weight: normal; font-size: 12px; color: #8C42A4;}
        .purple2 {font-family: arial; font-style: normal; font-weight: normal; font-size: 12px; color: #8C42A4;}
        .phone {font-family: arial; font-style: normal; font-weight: normal; font-size: 13px; color: #0D4895; position:relative;top:8px;}
        .phoneBig {font-family: arial; font-style: normal; font-weight: normal; font-size: 14px; color: #0D4895; position:relative;top:8px;}
        .centerIT { text-align: center; vertical-align:middle;}
	.smallAddText { display: block; position: relative; font-family: arial; letter-spacing: 1px; text-align: center; text-decoration: none; font-style: normal; font-size: 11px; color: #2D3035; top: -2px;}
        .bigBlackText { font-family: arial; font-style: normal; font-weight: bold; font-size: 13px; color: #111111;}



        /* for H1, H2 tags etc - i MUST set the margin:0px; or it won't render the same in both IE and firefox */

H1 { font-family: arial; font-style: normal; font-weight: normal; letter-spacing: 2px; font-size: 14px; color: #0D4895; margin:0px; }
H2 { font-family: arial; font-style: normal; font-weight: normal; letter-spacing: 2px; font-size: 12px; color: #0D4895; margin: 0px; }
H12 { font-family: arial; font-style: normal; font-weight: normal; font-size: 16px; color: #8C42A4;}
B { font-family: arial; font-style: normal; font-weight: normal; font-size: 15px; color: #0D4895;}



/* When creating CSS menus - any padding, borders or other formatting ADDS to the WIDTH of the menu.  I must add this in when calculating width */
/* Example - I want the menus for this site to be 155 pixesls wide.  I make them 143 pixes wide.  Inside the menu is 5 pixels on each side of padding to push the text off the wall of the button.  The button has a 1 pixel border (on each side - left and right side), so we add 2 more pixels.  All together this adds up to the desired 155 pixels */
/* Menu Notes:  I had to take the WIDTH tag out of the div.menu, -- and LEAVE it in the div.menu a.   If I put a width in the div.menu it creates extra whitespace for some reason */


div.infoBox {
        position: relative;
        padding:0px;
	margin:0px;
        display: block;
        width:330px;
        height: 44px;
        background:#E9F1F9;
        background-image: url("pics/webButton.gif");background-repeat:no-repeat;
}
div.infoBox a  {vertical-align: middle; color:#2f2f2f; text-decoration:none; height: 44px; width: 330px; font-size:11px; display: block; }
div.infoBox a:hover {background:#c0d3f2;color:#001441;  background-image: url("pics/webButton.gif");background-repeat:no-repeat;}

.infoBoxText {  display: block; position: relative; top: 5px; padding-left: 58px; font-family: arial; font-weight:normal; font-style: normal; font-size: 12px; color: #2352C2; }
.infoBoxTextSmall {  display: block; position: relative; padding: 0px; top: -3px; font-family: arial; font-weight:normal; font-style: normal; font-size: 11px; color: #2f2f2f; }



div.menu {
	background:#B6C4D9;
        padding:0px;
	margin:0px;
        display: block;
        width: 143px;
}

div.menu a {
        display: block;
        background-color:#B6C4D9;
        font-size: 11px;
        line-height: 17px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #717384;
	border-left: 1px solid #717384;
	border-right: 1px solid #717384;
        border-bottom:1px solid #717384;
        padding: 3px 5px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
	margin:0px;
	width: 143px;
}

div.menu a:hover {font-weight: normal; background:#E9F1F9;color:#3B3A3D;}





div.menuGrey {
	background:#d7d8c4;
        padding:0px;
	margin:0px;
        display: block;
        width: 143px;
}

div.menuGrey a {
        display: block;
        background-color:#B6C4D9;
        font-size: 11px;
        line-height: 17px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #717384;
	border-left: 1px solid #717384;
	border-right: 1px solid #717384;
        border-bottom:1px solid #717384;
        padding: 3px 5px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
	margin:0px;
	width: 143px;
}

div.menuGrey a:hover {font-weight: normal; background:#E9F1F9;color:#3B3A3D;}








div.menuVideo {
	background:#B6C4D9;
        padding:0px;
	margin:0px;
        width: 155px;
        display: block;
        text-align: center;
}

div.menuVideo a {
        display: block;
        background-color:#B6C4D9;
        font-size: 11px;
        line-height: 17px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #717384;
	border-left: 1px solid #717384;
	border-right: 1px solid #717384;
        border-bottom:1px solid #717384;
        padding: 3px 5px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
	margin:0px;
        width: 155px;
}

div.menuVideo a:hover {font-weight: normal; background:#E9F1F9;color:#3B3A3D;}




div.menuPrevious {
	background:#B6C4D9;
        padding:0px;
	margin:0px;
        width: 155px;
        display: block;
        text-align: center;
}

div.menuPrevious a {
        display: block;
        background-color:#B6C4D9;
        font-size: 11px;
        line-height: 30px;
        height: 30px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #717384;
	border-left: 0px solid #717384;
	border-right: 0px solid #717384;
        border-bottom:0px solid #717384;
        padding: 3px 0px;
	margin:0px;
        width: 153px;
}

div.menuPrevious a:hover {font-weight: normal; background:#E9F1F9;color:#3B3A3D;}




div.menuProceed {
	background:#B6C4D9;
        padding:0px;
	margin:0px;
        width: 155px;
        display: block;
        text-align: center;
}

div.menuProceed a {
        display: block;
        background-color:#B6C4D9;
        font-size: 12px;
        font-weight:bold;
        vertical-align:middle;
        line-height: 35px;  /* Line height helps the vertical-align have something to reference to, since the DIV height itself cannot be used with vertial-align */
	color:#002648;
        text-decoration:none;
	border-top:0px solid #717384;
	border-left: 1px solid #717384;
	border-right: 1px solid #717384;
        border-bottom:1px solid #717384;
        padding: 5px 0px;
	margin:0px;
        width: 155px;
        height: 35px;
}


div.menuProceed a:hover {font-weight: bold; background:#E9F1F9;color:#3B3A3D;}





div.collectionLinks {
	background:#FFFFFF;
        padding:0px;
        margin:0px;
        display: block;
        text-align: center;
        width:250px;

}



div.collectionLinks a {
        display: block;
        background-color:#FFFFFF;
        font-size: 12px;
        vertical-align:middle;
        line-height: 25px;  /* Line height helps the vertical-align have something to reference to, since the DIV height itself cannot be used with vertial-align */
	color:#17337D;
        text-decoration:none;
	border-top:0px solid #717384;
	border-left: 0px solid #717384;
	border-right: 0px solid #717384;
        border-bottom:0px solid #717384;
        height: 185px;  /* I have to subtract the padding amount from the width - or it will push the DIV past the bottom of the table */
        padding-top: 25px;  /* I have to subtract this amoutn from the height of the DIV so it does not push past the bottom (180 height + 20 padding = desired 200px height */
        width: 250px;
        margin:0px;
}


div.collectionLinks a:hover {font-weight: normal; background:#E9F1F9;color:#173296;}












div.menuSize {
	background:#B6C4D9;
        padding-top:0px;
        padding-bottom:0px;
        padding-left:0px;
        padding-right:0px;
	margin:0px;
        width: 120px;
        display: block;
        text-align:center;
        vertical-align:middle;
}

div.menuSize a {
        display: block;
        background-color:#B6C4D9;
        font-size: 11px;
        line-height: 15px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #717384;
	border-left: 1px solid #717384;
	border-right: 1px solid #717384;
        border-bottom:1px solid #717384;
	margin:0px;
        width: 120px;
        height:35px;
        padding-top: 4px;
}

div.menuSize a:hover {font-weight: normal; background:#E9F1F9;color:#3B3A3D;}




div.menuSubmitter {
	background:#e2e2e2;
        padding:0px;
	margin:0px;
        width: 225px;
        height: 44px;
        display: block;

}

div.menuSubmitter a {
        background-image: url("pics/menuButton.gif");background-repeat:no-repeat;
        display: block;
        font-size: 14px;
        font-weight:bold;
        line-height: 17px;
        text-align:center;
	color:#3B3A3D;
        text-decoration:none;
        padding-top: 7px;

        /* padding: 3px 5px;  the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box */
	margin:0px;
        width: 225px;
        height:37px;
}

div.menuSubmitter a:hover {font-weight: bold; font-size: 14px; background:#E9F1F9;color:#3B3A3D;        background-image: url("pics/menuSubmit.gif");background-repeat:no-repeat;}









div.updateButton {
	background:#e2e2e2;
        padding:0px;
	margin:0px;
        width: 50px;
        height: 17px;
        display: block;
        text-align:center;
}

div.updateButton a {
        display: block;
        background-color:#e2e2e2;
        font-size: 11px;
        line-height: 17px;
	color:#3B3A3D;
        text-decoration:none;
	border-top:1px solid #313334;
	border-left: 1px solid #313334;
	border-right: 1px solid #313334;
        border-bottom:1px solid #313334;
        padding: 2px 1px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
	margin:0px;
        width: 50px;
        height:17px;
}

div.updateButton a:hover {font-weight: normal; font-size: 11px; background:#E9F1F9;color:#3B3A3D;}











.thumbnail{
position:relative;
z-index:0;
}
.thumbnail:hover{
background-color: #E9F1F9;
z-index: 50;
text-decoration:none;
}
.thumbnail span{ /*CSS for enlarged image*/
position:absolute;
font-size: 13px;
text-align: left;
text-decoration:none;
background-color: #E9F1F9;
padding: 20px;
left: -60px;
top: -200px;
border: 1px dashed gray;
visibility: hidden;
color: black;
width: 475px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: -60px;
top:-200px; /*position where enlarged image should offset horizontally */
background-position: 0 0; /* Add */
z-index:60;
}
















.stepOne {
text-decoration:none;
background-color: #F5F7FA;
padding: 10px 17px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
left: 0px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 470px;
z-index: 0;
}



div.stepTwo {
text-decoration:none;
background-color:  #E6EBF3;
padding: 10px 17px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
left: 0px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 470px;
z-index: 0;
}

div.stepThree {
text-decoration:none;
background-color: #D7DEEC;
padding: 10px 17px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
left: 0px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 470px;
z-index: 0;
}

div.stepFour {
text-decoration:none;
background-color: #B2C3E3;
padding: 10px 17px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
left: 0px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 470px;
z-index: 0;
}

div.stepFive {
text-decoration:none;
color: #000000;
background-color: #A1B1D1;
padding: 10px 17px;  /* the first px is for vertical padding of the text inside the box, second figure horizontal padding from left hand side of box*/
left: 0px;
border: 1px dashed gray;
color: black;
text-decoration: none;
width: 470px;
z-index: 0;
}



/* --------------------------------------------------- */
/*  CRITICALLY IMPORTANT NOTE                          */
/*                                                     */
/*  If putting a popup link inside another DIV tag,    */
/*  you  MUST NOT SET (you *must* exclude) the         */
/*  postion:relative and position:absolute from        */
/*  the first DIV (the one in which the popup will be  */
/*  nested). If you don't leave them out Explorer will */
/*  display the pop up behind the DIV layer.           */
/*                                                     */
/* --------------------------------------------------- */

.thumbRight{
position:relative;
z-index:0;
}
.thumbRight:hover{
background-color: #E9F1F9;
z-index: 50;
text-decoration:none;
}
.thumbRight span{ /*CSS for enlarged image*/
position:absolute;
font-size: 13px;
text-align: left;
background-color: #E9F1F9;
padding: 20px;
left: -280px;
top:-200px; /*position where enlarged image should offset horizontally */
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width: 740px;
}
.thumbRight:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: -280px;
top:-200px; /*position where enlarged image should offset horizontally */
background-position: 0 0; /* Add */
z-index:60;
}



.thumbBuild{
position:relative;
z-index:0;
}
.thumbBuild:hover{
background-color: #E9F1F9;
z-index: 50;
text-decoration:none;
}
.thumbBuild span{ /*CSS for enlarged image*/
position:absolute;
font-size: 13px;
text-align: left;
background-color: #E9F1F9;
padding: 20px;
left: -500px;
top:-200px; /*position where enlarged image should offset horizontally */
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width: 740px;
}
.thumbBuild:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: -500px;
top:-200px; /*position where enlarged image should offset horizontally */
background-position: 0 0; /* Add */
z-index:60;
}


.thumbLeft{
position:relative;
z-index:0;
}
.thumbLeft:hover{
background-color: #E9F1F9;
z-index: 50;
text-decoration:none;
}
.thumbLeft span{ /*CSS for enlarged image*/
position:absolute;
font-size: 13px;
text-align: left;
background-color: #E9F1F9;
padding: 20px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width: 740px;
}
.thumbLeft:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: -30px;
top:-200px; /*position where enlarged image should offset horizontally */
background-position: 0 0; /* Add */
z-index:60;
}

#header {
background-image: url(pics/smallLine.gif);
background-repeat: repeat-x;
background-position: center top;
margin: 0px;
padding: 0px;
height: 47px;
}


#content {
position: relative;
padding-left: 20px; padding-top:0px; padding-right: 20px; padding-bottom: 0px; font-family: arial; font-style: normal; text-align: left; font-size: 13px; letter-spacing: 1px; color: #3D4045; line-height: 19px;
}

#logo {
width: 100px;
position: relative;
top: +15px;
left: +15px;
}