@charset "utf-8";
/* CSS Document Created by A. Follansbee 2011 */


body {
	background-image: url(graphics/greentest.jpg);      /* Background. Duh. */
	margin:0;
    padding:0;
    border:0;                   /* This removes the border around the viewport in old versions of IE */
    width:100%;
    height:100%;
	font-size:100%;             /* Change to em, perhaps? */
	font-family: "Times New Roman", Times, serif;
	text-align: center;        /* Default text alignment. Can be changed- either here or with a specific tag */
}


a:link {
	color:#660000;
}
a:hover {
	color:#660000;
	text-decoration:none;
}
a:visited {
	color:#993333;
}
a:active {
	color:#660000;	
}

text.click { font-variant: small-caps; }   /* Used for the text that says to click on the photo to order */
text.header { font-size: 2em;    /* Used for headers, mostly product names */
	font-variant: small-caps; }
text.headerlarge { font-size: 3em;    /* Used for headers, mostly product names */
	font-variant: small-caps; }
text.back { font-variant: small-caps; text-align: left; font-size: 1.25em; }    /* The back button */
text.header2 { font-variant: small-caps; text-align: center; font-size: 1.25em; }    /* When you don't want a huge header- Like for the "Click photo for larger image" heading */
text.info { font-size: 1em; }    /* Used for content text*/

.navbar_top
{
display: block;
width: 200px;
height: 153px;
background-image: url(graphics/navbar/CSSnavbar2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#navigation {
	width:200px;
}
#navigation a  {
	display:block;
	background:url(graphics/navbar/CSSnavbar2.png);
	text-indent:-9000px;
	background-repeat: no-repeat;
}
#navigation a.link1 {background-position:0px -154px; height:59px;}
#navigation a.link1:hover {background-position:-200px -154px;}
#navigation a.link2 {background-position:0px -213px; height:59px;}
#navigation a.link2:hover {background-position:-200px -213px;}
#navigation a.link3 {background-position:0px -271px; height:58px;}
#navigation a.link3:hover{background-position:-200px -271px;}
#navigation a.link4 {background-position:0px -329px; height:58px;}
#navigation a.link4:hover {background-position:-200px -329px;}
#navigation a.link5 {background-position:0px -387px; height:59px;}
#navigation a.link5:hover {background-position:-200px -387px;}
#navigation a.link6 {background-position:0px -446px; height:59px;}
#navigation a.link6:hover {background-position:-200px -446px;}
#navigation a.link7 {background-position:0px -506px; height:58px;}
#navigation a.link7:hover {background-position:-200px -506px;}
#navigation a.link8 {background-position:0px -564px; height:58px;}
#navigation a.link8:hover {background-position:-200px -564px;}
#navigation a.link9 {background-position:0px -623px; height:49px;}
#navigation a.link9:hover {background-position:-200px -623px;}


#container {          /* This is the main container that contains the nav bar and page as 2 separate divs within it */
	width:1280px;     /* Total width of the site */
	margin:auto;      /* Centers the div */
}
#content {            /* Main page content div */
	float:right;      /* Right-aligned */
	width:1080px;     /* Width of main page content div */
	background-image: url(graphics/tile_ittybitty2.jpg);     /* Defines the parchment background. Combined from the main div which has been removed */
}
#sidebar {            /* Navigation bar div */
	float:left;       /* left-aligned */
	width:200px;      /* Exact width of nav bar */
}

#Bodyheader {                       /* Where the "Click photo for larger image" goes */
	font-variant: small-caps;    /* Small caps. Does not work in some versions of IE, apparently. Do not know if there is a workaround. */
	text-align: center;          /* Aligns text center */
	font-size: 1.25em;           /* Adjusts text size */
}

#textcontainer {            /* This div gives margins to text and thumbnails */
	width:1000px;
	margin:auto;
}
div.leftthumb {             /* Use these to side by-side thumbnails */        
	float:left;                  
	width:520px;                
}
div.rightthumb {                    
	float:right;                 
	width:520px;               
}
div.rightthumbsmall {              /* For thumbnails with wrapping text */      
	float:right;                 
	width:308px;     
	margin-left: 20px;
	margin-top: 20px; 
	margin-bottom: 20px;         
}
div.leftthumbsmall {                     
	float:left;                  
	width:308px; 
	margin-right: 20px;   
	margin-top: 20px; 
	margin-bottom: 20px;             
}
div.smallthumbrow {                     
	float:left;                  
	width:308px; 
	margin-right: 25px;   
	margin-top: 25px; 
	margin-bottom: 25px;             
}

div.cheader {              /* Top of primary continuous box (the one around the main page content */
	width: 1080px;         /* Same width as the main page content */
	background-image: url(graphics/cheader.png); 
	height: 18px; 
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}

div.cbody {                /* Repeating body of the continuous box (the one around the main page content */
	width: 1040px;         /* Width of main page content minus left and right padding */
	padding-left: 20px;    /* Determines where text and images will begin within the box - must clear the graphic border */
	padding-right: 20px;   /* Determines where text and images will end in the box - must clear the graphics border */
	background-image: url(graphics/cbody.png);
	/* overflow: hidden;   Hides text that spills from the div. Ideally, the text should NOT spill - keep/discard? */
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}
div.cfooter {              /* Bottom of the primary continuous box (the one around the main page content */
	width: 1080px;         /* Same width as the main page content */
	background-image: url(graphics/cfooter.png); 
	height: 19px; 
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}

div.pcontainer {                /* Individual product div */
	width: 900px;
	/* overflow: hidden;   Hides text that spills over. Ideally, text should NOT spill over the div. Keep/discard? */
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2*/
	background-image: url(graphics/tile_ittybitty_pale.jpg);       /* Background images for the individual product divs */
}

div.pheader {              /* Top of the continuous box around the product div */
width: 900px;              /* Defined width - Arbitrary */
background-image: url(graphics/pframetop.png); 
height: 21px;
margin-left: auto;         /* Centers, part 1 */
margin-right: auto;        /* Centers, part 2 */
}
div.pbody {                /* Repeating body of continuous box around product div */
width: 850px;              /* Defined width minus left and right padding */
padding-left: 25px;        /* Left padding - must clear graphic border */
padding-right: 25px;       /* Right padding - must clear graphic border */
background-image: url(graphics/pframebody.png); 
margin-left: auto;         /* Centers, part 1 */
margin-right: auto;        /* Centers, part 2 */
}
div.pfooter {              /* Bottom of continuous box around product */
width: 900px;              /* Defined width - Arbitrary */
background-image: url(graphics/pframebottom.png); 
height: 21px; 
margin-left: auto;         /* Centers, part 1 */
margin-right: auto;        /* Centers, part 2 */
}

div.miniheader {           /* Product item heading - name of product and price */
	width: 850;            /* Defined width must match repeating body graphic border width */
	text-align: left;      /* Aligns text left */
}
div.minicontent {          /* Product description goes here */
	float: left;           
	width: 470px;          /* Defined width of product description. Must take width of product div and thumbnail into account */
	text-align: left;      /* Aligns text left */
	padding: 15px;         /* Gives a reasonable distance from the edge of the graphic border */
}
div.minisidebar {          /* Thumbnail and thumbnail frame go here */
	float: right;          
	width: 350px;          /* Defined width must take width of product description and total product div width into account */
}
div.minifooter {           /* Ordering instructions go here */
	text-align: right;     /* Aligns the text to the right. Alternatively, can be moved to the minisidebar div to center it under the thumbnail */
	clear:both;            /* Need to look up what this one does */
}

div.theader {              /* Top of the frame surrounding the thumbnail images */
	width: 308px;          /* Defined width - NOT the width of the thumbnails */
	background-image: url(graphics/thumbframetop.png); 
	height: 4px;
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}
div.tbody {                /* Repeating body of the continuous frame that surrounds the thumbnail images */
	width: 300px;          /* Width of the frame minus left and right padding - THIS is the width the thumbnails must be */
	padding-left: 4px;     /* Clears the left side of the frame */
	padding-right: 4px;    /* Clears the right side of the frame */
	background-image: url(graphics/thumbframebody.png); 
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}
div.tfooter {              /* Bottom of the continuous frame that surrounds the thumbnail images */
	width: 308px;          /* Defined width - NOT the width of the thumbnails */
	background-image: url(graphics/thumbframebottom.png); 
	height: 4px; 
	margin-left: auto;     /* Centers, part 1 */
	margin-right: auto;    /* Centers, part 2 */
}
div.largetheader {
	width: 508px;
	background-image: url)graphics/largethumbframetop.png);
	height: 4px;
	margin-left: auto;
	margin-right: auto;
}
div.largetbody {
	width: 500px;
	padding-left: 4px;
	padding-right: 4px;
	background-image: url(graphics/largethumbframebody.png);
	margin-left: auto;
	margin-right: auto;
}
div.largetfooter {
	width: 508px;
	background-image: url(graphics/largethumbframefooter.png);
	height: 4px;
	margin-left: auto;
	margin-right: auto;
}

div.harnessframetop {
	width: 440;
	background-image: url(graphics/harnessframetop.png);
	height: 20px;
}

div.harnessframebody {
	width: 400px;
	padding-left: 20px;
	padding-right: 20px;
	background-image: url(graphics/harnessframebody.png);
	height: 20px;
}

div.harnessframebottom {
	width: 440px;
	background-image: url(graphics/harnessframebottom.png);
	height: 20px;
}