/*The following are general styles for the whole site. I use ems for font sizes because it allows users to resize the fonts with their browsers.*/

body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	background-color: #F0F0F0;
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #808080;*/
	/*color: #5D7323;*/
}


.pictureItem
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #622E6F;
	text-decoration: none;
	width: 140px;
	white-space: normal;
	text-align: center;
	vertical-align: top;
}

.pictureName
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #5D7323;
	text-decoration: none;
	width: 140px;
	white-space: normal;
	text-align: center;
}
a:link
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #5D7323;
	text-decoration: none;
}
a:visited
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #5D7323;
}
a:hover
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #AAD03D;
	text-decoration: none;
}
a:active
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #5D7323;
}

p
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 2.4em;
	margin-top: 0px;
}
h1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD03D;
	padding-bottom: 5px;
	margin-bottom: 0px;
}
h2
{
	color: #999999;
	font-size: 1.8em;
	margin: 0px;
	padding: 0px;
}
h3
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E93E91;
	margin: 0px;
	padding: 0px;
	width: auto;
}

/*I use the following class in the navigation and possibly elsewhere inside nested and floated divs. It forces divs that are wrapped around them to not collapse. I'm still trying to get my head around why this works.*/
.clear
{
	clear: both;
}

/*The following ids are for the banner. bannerline is specifically for the outer div to dynamically draw a horizontal line. I separated this from the banner background so the colour could be easily changed depending on the season. I've tried to make as much of the styles dependent on css than on graphics to facilitate future colour changes. Sue and Simon want the colour scheme to change each season.*/


#banner
{
	padding: 0px;
	background-image: url(../images/banner_bg3_05.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 754px;
}


#bannerline
{
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #E93E91;
	background-image: url(../images/hg_design1_03.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	width: auto;
	margin: auto;
	text-align: center;
}

/*defines the search forms styles in the banner*/

#bannerline #banner form
{
	height: 20px;
	width: 754px;
	text-align: right;
	padding-top: 30px;
}

#formContainer
{
	height: 116px;
	width: 754px;
}
.formField
{
	border: 1px solid #8E854E;
	background-color: #FFFFFF;
	height: 15px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-bottom: 4px;
}

/*this is the container div for the navigation.*/

#navContainer
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	text-align: center;
}

/*The following navigation styles are for the top horizontal navigation which is consistent site-wide. It uses a modified unordered list, and another within the "catalogue" li for the drop-down.*/

.navigation
{
	text-align: center;
	font-size: 11px;
}


.navigation a:link, .navigation a:visited
{
	display: block;
	text-decoration: none;
	color: #5D7323;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #F0F0F0;
	position: relative;
}


.navigation a:hover
{
	text-decoration: none;
	background-color: #F7D529;
	color: #5D7323;
	border: 1px solid #5D7323;
}
.navigation a:active
{
	color: #5D7323;
}

/*this is just to push the first item of the navigation to the right 10 pixels.*/
#homePageLink a
{
	margin-left: 10px;
}

/*this is to make there no margin or padding to the right of the last link on the navigation. Not sure if this has any effect.*/
#loginPageLink li
{
	margin-right: 100px;
	padding-right: 0px;
}


/*These next "container" rules define styles for the main content area. Within the main container div is a table. Sometimes the table is given a specific id like on the news page where I needed to define specific styles for it's content that I did not want to be reflected on other content tables on other pages.*/

/*----*/


.mainContainer
{
	vertical-align: top;
	display: block; /*height: 500px;*/
	width: 754px;
	margin: auto;
}

/*all images within the content container will have a 4 pixel grey border.*/

#container img
{
	border: 2px solid #999999;
}
.imgServer
{
	border-bottom-style: solid;
	border-width: 10px;
	border-color: #999999;
}
k /*These .catImageUnit and Group and Main styles are for the catalogue and subcatalog pages. I grouped columns of images together in "Groups" and also the individual images and their text into "Units" to better group and control them.*/ .catImageGroup
{
	clear: both;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #622E6F;
	margin-bottom: 15px;
}

.catImageUnit
{
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 0px;
	width: 124px;
	float: left;
	clear: right;
}


/*Main - this one is specifically for the main catalogue page.*/
.catImageUnitMain
{
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	width: 154px;
	float: left;
	clear: none;
}

/*h2 headers in the container needed special styling.*/
#container h2
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #622E6F;
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-size: 1.6em;
}

/*defining the spacing of paragraph tags specifically for the image units.*/
#container .catImageGroup .catImageUnit p
{
	text-align: center;
	margin-top: 5px;
	padding-bottom: 10px;
}
#container .catImageGroup .catImageUnitMain p
{
	text-align: center;
	margin-top: 5px;
	padding-bottom: 10px;
}
.catImageGroup p
{
	line-height: 1em;
}

/*--*/

/*catCol1 is the left column of the catalogue (not on the main catalogue page) and subcatalog pages.*/
.rightCol
{
	padding-top: 5px;
	padding-left: 15px;
}
#catCol1
{
	width: 155px;
	padding-top: 5px;
	padding-right: 15px;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #AAD03D;
}
#container #catCol1 img
{
	padding-left: 0px;
}
#container #catCol1 h1
{
	font-size: 1.5em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD03D;
	padding-bottom: 5px;
	margin-bottom: 0px;
}
#container #catCol1 ul
{
	list-style-type: none;
	display: block;
	padding-left: 0px;
	line-height: 2em;
	margin-left: 0px;
	margin-top: 0px;
}
#container #catCol1 li
{
	margin-left: 0px;
	padding-left: 0px;
}

/*The follwing .currentPage is used to define the style of the sub nav item that has been currently selected and is being viewed by the user.*/

.currentPage a
{
	color: #808080;
	font-weight: bolder;
	font-size: 1.1em;
}

/*this style is for the one or two sentence description below the selected subcategory in the left catCol1.*/
.subDescription
{
	line-height: 1.4em;
	font-size: 1.0em;
}

/*rightCol is for the right column of images on the home page.*/

#container #rightCol p
{
	font-size: 1.0em;
	margin-top: 5px;
	text-align: center;
}

/*Any image within #container that is also a link will have it's border turn pink on hover to denote that it is clickable.*/

#container a:hover img
{
	border: 2px solid #AAD03D;
}

.homeNews
{
	background-color: #F7D529;
	border: 2px solid #AAD03D;
	padding: 7px;
	text-align: center;
	margin-top: 15px;
	width: 574px;
	font-size: 16px;
	color: #5D7323;
}
.categoryLink
{
	background-color: #622E6F;
	border: 2px solid #8E854E;
	text-align: center;
	vertical-align: middle;
	color: White;
	
	padding: 3px;
	padding-top: 7px;
	font-weight: bold;
}



/*this defines the style of text in the home page news box under the main picture.*/
#container #homeNews
{
	font-size: 1.6em;
	color: #FFFFFF;
}


/*defining table styles in the main content.*/


.containertabletd
{
	padding: 10px;
	vertical-align: top;
}



/*defining styles for the table that appears within the main content table. Specifically the product page and the contact us form.*/
.containertabletable
{
	font-size: 10px;
	border-collapse: collapse;
	margin-bottom: 0px;
	width: 100%;
}
.container tabletableth
{
	padding: 5px 0px;
	text-align: left;
}

.container tabletabletr.firsttd
{
	border-top: 2px solid #622E6F;
}

.containertabletabletd
{
	border-bottom: 1px solid #622E6F;
	padding: 4px 0px;
}




/*this adds a bit of space below each news item paragraph*/
#container #news p
{
	padding-bottom: 10px;
}
/*styles the pictures that go with the news story.*/
.newsItemPic
{
	float: right;
	margin-left: 10px;
}
/*this is the style for the datestamp underneath each headline in the news section.*/
.dateStamp
{
	padding: 0px;
	margin: 0px;
}


/*this applies to the small navigation underneath the list of items on all the catalogue pages except for the product page. */
#container #prodNav
{
	font-weight: bold;
}

/*000*/

/*This is a special banner styles for the banner on the glass/helderr collection sub-catalog page.*/
#specialBanner
{
	background-color: #622E6F;
	border: 2px solid #8E854E;
	padding: 0px;
	text-align: center;
	margin-top: 0px;
}
#container #specialBanner h2
{
	color: #F0F0F0;
	font-size: 1.8em;
	margin: 4px;
	padding: 0px;
}
#container #specialBanner p
{
	color: #F0F0F0;
	margin: 2px;
	padding: 0px;
}
#container #specialBanner a
{
	color: #F0F0F0;
}
#container #specialBanner a:hover
{
	color: #E93E91;
}
/*11*/


/*these are the breadcrumb nav styles.*/
.breadCrumb1
{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #AAD03D;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-bottom: 0px;
	font-size: 10px;
	margin-bottom: 15px;
}


.topLine
{
	background-color: #F0F0F0;
	height: 1px;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #AAD03D;
}
/*the following are styles for the footer section of the pages, including a footerline div that draws a horizontal line across the bottom similar to the bannerline for the top navigation.*/
#footer
{
	height: 50px;
	width: 754px;
	text-align: left;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#footerline
{
	background-image: url(../images/hg_design1_16.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #E93E91;
}
#footerline #footer ul
{
	display: inline;
	list-style-type: none;
}
#footerline #footer li
{
	display: inline;
	padding-right: 10px;
}

/*--*/

/*these are special styles for the phone number and mail link at the bottom of the page. They are just to display a little icon of a phone and letter to the left of the words.*/
#phone
{
	background-image: url(../images/icons1_03.gif);
	background-repeat: no-repeat;
	padding-left: 14px;
	background-position: left center;
}
#mail a
{
	background-image: url(../images/icons1_05.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 18px;
}

/*some styles for the contact info on the contact us page. I made them a list.*/
#contactUs ul
{
	list-style-type: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 2em;
	font-size: 10px;
}
/*a style for the table on the contact page to define the width of the first column of the contact form.*/
#container #contactUs #contactFormTable #col1
{
	width: 29%;
}


/*for the product page I needed to define a bottom line that was the same width as the content.*/
#bottomRule
{
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #622E6F;
}
/*this is a style for the "return to category" link under the product title. It includes the rendering of a little arrow.*/
#returnLink
{
	background-image: url(../images/arrow1_03.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 10px;
	margin-top: 5px;
}
/*style for the product description.*/
#productDesc
{
	font-size: 1.3em;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

/*style for the previous product link under the desc*/
#prevProductLink
{
	background-image: url(../images/arrow1_04.gif);
	background-repeat: no-repeat;
	background-position: left center;
	text-align: left;
	margin-bottom: 10px;
	float: left;
	padding-left: 10px;
}
/*style for the next product link under the desc*/
#nextProductLink
{
	background-image: url(../images/arrow1_03.gif);
	background-repeat: no-repeat;
	background-position: right center;
	text-align: right;
	padding-right: 10px;
	margin-bottom: 10px;
	float: right;
}
/*these are styles for the map on the contact us page.*/
.mapImage
{
	float: right;
	margin-left: 10px;
}
.mapImage a:hover
{
	border: 2px solid #E93E91;
}

#container #contactUs #sitemap li
{
	list-style-type: none;
	margin-left: 20px;
}

.pageTitle
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
	font-size: 1.8em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD03D;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.pageSubTitle
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
	border-bottom-style: none;
	padding-bottom: 1px;
	color: #999999;
	font-size: 1.4em;
}

.gridHeader
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
	border-bottom-style: none;
	padding-bottom: 1px;
	color: #999999;
	font-size: 1.2em;
}

.gridRow
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 0px;
	border-bottom-style: none;
	padding-bottom: 1px;
	color: #999999;
	font-size: 1.0em;
}


.menuItemStyle
{
	text-align: left;
	font-size: 0.9em;
}

.adminMenu
{
	font-size: 1.0em;
	display: inline;
	vertical-align: text-bottom;
	padding: 0;
	margin: 0;
}
.adminItemMenu
{
	font-size: 1.0em;
	text-align: left;
}

select
{
	background-color: #F0F0F0;
	border-style: none;
	border-width: 0px;
}

.failedMsg
{
	color: red;
	text-align: left;
}
.successMsg
{
	color: Green;
	text-align: left;
}
.editButton
{
	border-bottom-style: solid;
	border-width: 1px;
}

.categoryName
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	
}
.welcomeParagraph
{
	font-size: 1.1em;
	line-height: 1.5em;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #AAD03D;
	padding-bottom: 10px;
	width: 598px;
}

.noticeDesc
{
	font-size: 1.1em;
	line-height: 1.5em;
}
.noticeDesc2
{
	font-size: 1.3em;
	line-height: 1.9em;
	text-align: left;
	padding-top:10px;
}

.contentText
{
	font-size: 1.3em;
	line-height: 2.2em;
}
input
{
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
option
{
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
select
{
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.productDesc
{
	font-size: 1.3em;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}

.mainViewTable
{
	width: 754px;
	height: 400px;
}





.whiteLink:link
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color:#5D7323;
	text-decoration: none;
	font-weight:bold;
}
.whiteLink:visited
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #5D7323;
	text-decoration: none;
	font-weight:bold;
}
.whiteLink:hover
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	text-decoration: none;
	font-weight:bold;
}
.whiteLink:active
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #5D7323;
	font-weight:bold;
}

#ctl00_ContentPlaceHolder1_BottomDiv
{
	display: block; 
	text-align: center; 
	vertical-align: middle;
                        width: 100%; 
						border-top: solid 1px #622E6F
	
}

li 
{
list-style-position: inside; 
list-style-type: square; 
color: #622E6F;

}