/*********************************************************
	OVERALL SITE HTML DISPLAY RULES

	These styles are used to define the default layout
	rules we apply to elements in every page.  Some examples
	of these rules would be:

	--Background color to use on every page
	--All links are not underlined
	--All pages have 0 pixel page margins in the web browser
**********************************************************/

html{
	margin: 0;
	padding: 0;
	text-align:center;}

body{
	margin:0;
	padding: 0;
	text-align:center;
	background-image:url(../images/common/color-bkg.png);
	background-repeat:repeat; }

a:link, a:visited, a:hover{
	text-decoration: none;
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #3399FF;}

img{border: none 0px;}




/********************************************************
	MAIN PAGE COMPONENT STYLES

	These styles are used to dimension and position major
	components of all pages in a standardized layout
********************************************************/



#pageContainer{
	width:771px;
	margin-left:auto;
	margin-right:auto;
	xborder: solid 1px #00FF00;}

#pageHeader{
	float:left;
	clear:both;
	margin-left:0px;
	margin-top:0px;
	width:100%;
	xborder: solid 1px #00FF00;}

#pageContent{
	float:left;
	clear:both;
	width:100%;
	height:100%;
	margin-top:0px;
	background-image:url(../images/common/home-bkg-mid.png);
	xbackground-repeat:no-repeat;
	background-position:0px 0px;
	xborder: solid 1px #0000FF;}

#pageSideNavigation{
	position:relative;
	float:left;
	width:140px;
	height:100%;
	margin-top:0px;
	margin-left:0px;
	xborder:solid 1px black;}

#pageMainBody{
	float:left;
	width:623px;
	height:100%;
	margin-top:0px;
	margin-left:0px;
	xborder:solid 1px black;}

#pageFooter{
	float:left;
	clear:both;
	width:100%;
	margin-left:0px;
	background-image: url(../images/common/footer-bkg.png);
	background-repeat: no-repeat;
	xborder: solid 1px #FF0000;}



/********************************************************
	HEADER COMPONENT STYLES

	These styles are used to dimension and position
	elements in the header.  It also defines the font size,
	color, and family to use for various elements
********************************************************/


#headerTopBorder{float:left; clear:both; width:100%; height:6px; line-height:6px; font-size:6px; background-color:#3399FF;}
#companyPhoneNumber{float:left; margin-top:13px; }
#downloadableForms{float:left; margin-top:13px; padding-left:335px;}
#companyEmail{float:left; margin-top:13px; margin-left:26px; }
#mapsAndDirections{float:left; margin-top:13px; margin-left:24px; }

#bannerGraphic{float:left; clear:both;width:771px;height:168px;}
#bannerGraphic IMG{float:left;}

#navigationBar{ float:left; clear:both; height:32px; width:771px; margin-top:1px; background-image:url(../images/common/nav-bkg.png); }
.navigationLink{ float:left; margin-top:8px; }



/********************************************************
	FOOTER COMPONENT STYLES

	These styles are used to dimension and position
	elements in the footer.  It also defines the font size,
	color, and family to use for various elements
********************************************************/

#copyrightStatement{float:right; clear:both; width:540px; margin-right:15px; padding-top:10px; text-align:right;}
#lucidIndustriesStatement{float:right; clear:both;width:350px; margin-right:15px; padding-top:10px; text-align:right;}



/********************************************************
	SIDE NAVIGATION COMPONENT STYLES

	These styles are used to dimension and position
	elements in the side navigation.  It also defines the
	font size, color, and family to use for various elements
********************************************************/

#introductoryNavigationSection{ float:left; clear:both; width:140px; }
#introductoryNavigationSection .sectionHeader{ float:left; clear:both; background-image:url(../images/common/ln-topCap.png); background-repeat:no-repeat; height:7px; width:140px; line-height:1px; font-size:1px; }
#introductoryNavigationSection .sectionContents{ float:left; clear:both; background-image:url(../images/common/ln-topPattern.png); background-repeat:repeat-y; padding-left:9px; padding-right:9px; vertical-align:top; line-height:14px;}
#introductoryNavigationSection .sectionFooter{ float:left; clear:both; background-image:url(../images/common/ln-bottomCap.png); background-repeat:no-repeat; height:6px; width:140px; line-height:1px; font-size:1px; }
.sectionLink{ float:left; clear:both; width:122px; text-align:right; padding-bottom:10px; margin-bottom:10px; border-bottom:dashed 1px #999999; }

#sideNavigationEndCap{ float:left; clear:both; height:100%; vertical-align:bottom; background-image:url(../images/common/ln-pattern.png); background-repeat:repeat-y; }
#sideNavigationSpacer{ float:left; clear:both; height:1px; width:140px; line-height:1px; font-size:1px; }

#stoneNavigationContainer{
	position:absolute;
	top:0px;
	left:0px;
	float:left;
	clear:both;
	xborder:solid 1px red;}

.sideNavigationItem{ float:left; clear:both; }

.sideNavigationController{ float:left; clear:both; }

.sideSubNavigation{
	float:left;
	clear:both;
	display:none;
	background-color:#AED4FB;}

.sideSubNavigationItem:link,.sideSubNavigationItem:visited{
	float:right;
	clear:both;
	text-align:right;
	width:120px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:dashed 1px #999999;}

.sideSubNavigationItem:hover{
	float:right;
	clear:both;
	text-align:right;
	width:120px;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#FFFFFF;
	border-bottom:dashed 1px #333333;}



/*********************************************************
		Special BEHAVIOUR based classes
*********************************************************/

IMG.rolloverImage{}

IMG.galleryImage{
	border: solid 1px #FFFFFF;
	padding: 1px;
	cursor:pointer;}

DIV.tab{}
DIV.tabSelected{}

DIV.tabPage{display:none;}
DIV.tabPageSelected{display:block;}

DIV.backgroundColorSelection{
	float:left;
	height:5px;
	width:5px;
	padding:0px;
	margin-right:1px;
	font-size:0px;
	line-height:0px;
	cursor:pointer;}


/*********************************************************
	Generic block image item presentation classes
*********************************************************/

.containerTitle{
	float:left;
	clear:both;
	width:100%;
	padding-bottom:15px;}


#largeLabeledImagesContainer{
	float:left;
	width:598px;
	text-align:left;
	vertical-align:top;
	margin-top:30px;
	margin-bottom:10px;
	padding-left:25px;
	xborder:solid 1px black;}

#largeLabeledImagesContainer .item{
	float: left;
	width:160px;
	height:300px;
	text-align:center;
	padding-left:1px;
	padding-right:15px;
	margin-bottom:15px;
	border-right:dashed 1px #BDBDBD;
	xborder:solid 1px Red;}


#largeLabeledImagesContainer .item .title{
	float:left;
	clear:both;
	width:100%;
	padding:5px;
	display:block;
	font-family: Arial,Helvetica,Verdana;
	font-size:9pt;
	color: #333333;
	text-align:center;}

#largeLabeledImagesContainer .item .image{
	width:160px;
	height:auto;
	margin-bottom:20px;
	text-align:center;}

#largeLabeledImagesContainer .item .image IMG{}



#smallLabeledImagesContainer{
	float:left;
	width:320px;
	text-align:center;
	margin-bottom:10px;
	xborder:solid 1px black;}

#smallLabeledImagesContainer .item{
	float:left;
	width:110px;
	text-align:center;
	padding:1px;
	border:solid 1px #FFFFFF;}

#smallLabeledImagesContainer .item .title{display:none;}
#smallLabeledImagesContaine .item .image{
	float:left;
	clear:both;
	width:100%;}
#smallLabeledImagesContaine .item .image IMG{}



/*********************************************************
	Generic block text presentation classes
*********************************************************/


.informationSection{
	float:left;
	width:100%;
	padding-top:10px;
	border-bottom:dashed 1px #333333;}

.informationSection .title{
	float:left;
	clear:both;
	width:100%;
	padding-bottom:5px;}

.informationSection .description{
	float:left;
	clear:both;
	width:100%;
	padding-bottom:10px;}

.informationSection .bulletPoints{
	float:left;
	clear:both;
	width:100%;
	padding-bottom:10px;}


.bulletPoints ol{
	margin-top:0px;
	margin-bottom:0px;
	list-style-type:decimal;}

.bulletPoints ol li{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #333333;}



/*********************************************************
		General classes and styles
*********************************************************/

.lgGreyHeader{
	font-family: Arial,Helvetica,Verdana;
	font-size: 10pt;
	color: #333333;
	width:100%;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;}

.smGreyHeader{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #333333;
	width:100%;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;}

.greyParagraph{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #333333;
	width:100%;
	text-align:left;
	padding-top:10px;
	padding-bottom:10px;}

.greyText{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #333333;
	width:100%;
	text-align:left;}

.greyTextQuote{
	font-family: Arial, Helvetica, Verdana;
	font-size: 8pt;
	color: #333333;
	width:100%;
	font-style: italic;
	text-align:left;}

.lightGreySubText{
	font-family: Arial,Helvetica,Verdana;
	font-size: 7pt;
	color: #999999;}

.blackText{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #000000;
	text-align:left;
	width:100%;}

.blueParagraph{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #3399FF;
	padding-top:10px;
	padding-bottom:10px;
	text-align:left;
	width:100%;}

.blueText{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #3399FF;
	text-align:left;
	width:100%;}

.greyMidText{
	font-family: Arial,Helvetica,Verdana;
	font-size: 8pt;
	color: #999999;
	text-align:left;
	width:100%;}

.blueTextQuote{
	font-family: Arial, Helvetica, Verdana;
	font-size: 8pt;
	color: #3399FF;
	font-style: italic;
	text-align:left;
	width:100%;}h1 {
	font-family: Arial, Helvetica, Verdana;
	font-size: 9pt;
	color: #333333;
	width:100%;
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
	font-weight: bold;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 0px;
}

/*********************************************************
		Form classes and styles
*********************************************************/

#pageForm {
	font-family: Arial, Helvetica, Verdana;
	font-size: 8pt;
	color: #333;
	text-align:left;
	padding: 10px;
}

#pageFormBorder {
	width: 100%;
	height: 5px;
	background-image: url(../images/dot-rule.gif);
	background-repeat: repeat-x;
	background-color: #FFF;
}

#pageFormRight {
	width: 100%;
}

.pageFormNotice {
	color: #666;
	font-weight: bold;
	text-transform:capitalize;
}

.pageFormHighlight1 {
	color: #3399FF;
}

.pageFormHighlight2 {
	color: #0036C8;
	font-weight: bold;
}

#pageFormStep01 {
	padding: 0;
	width: 100%;
}

.pageFormGroupHighlight {
	width: 100%;
	color: #3399FF;
	padding: 10px 0 10px 0;
	font-weight: bold;
	text-transform:capitalize;
	clear:both;
}

.pageFormStep01Option {
	width: 31px;
	float:left;
	padding:o; margin: 0;
}

.pageFormStep01Option .image {

}

.break {
	padding:10px 0 10px 0;
 	clear: both;
}

.breakSm {
	padding:3px 0 3px 0;
 	clear: both;
}

.pageFormStep02Option {
	width: 150px;
	float:left;
	padding:o; margin: 0;
}

.pageFormStep02Option input {
	height: 40px;
}

.pageFormRequired {
	color:#FE0200;
	font-weight: bold;
}

#pageFormStep03Left {
	width: 150px;
	height: 35px;
	float: left;
}

#pageFormStep03Right {
	clear: right;
}

#pageFormStep04Left {
	width: 275px;
	float: left;
}

#submitFormStep04Right {
	float: right;
	text-align: right;
	margin-right: 22px;
}

#ageFormStep04Right {
	width: 50%;
}

#submitFormStep04Hover {
	width: 56px;
    height: 11px;
    background-image: url(../images/submit.png);
    text-decoration: none;
    margin: 10px -13px 28px 0;
}

#submitFormStep04Hover:hover {
	background-position: 56px 0;
}

#printFormStep04Hover {
	width: 104px;
    height: 11px;
    background-image: url(../images/print.gif);
    text-decoration: none;
    margin: 10px 30px 28px 0;
}

#printFormStep04Hover:hover {
	background-position: 104px 0;
}

.TextArea{
    width: 314px;
	height: 217px;
    padding: 1px;
}

#leftColInvite {
	text-align: left;
	float: left;
}

#leftColGranite {
	text-align: left;
	float: left;
}

#rightColInvite {
	width: 234px;
	float: right;
	text-align: right;
}

#rightColEdgePrev {
	width: 236px;
	height: 219px;
	float: right;
	text-align: center;
}

#rightColGranitePrev {
	width: 236px;
	float: right;
	text-align: center;
}

#inviteFooter {
	clear: both;
}