/*** Initial style sheet for sezzyscrafts.co.uk - 18 nov 09 ***/
/*** UPDATES:

 - Updated 02 Aug 2010 to give a centred colulmn with centred 'transBGR' img also.
 - Updated 30 & 31 Jan 2011 to include cake deco page (link) with widened images etc. Also shifted left some more.. 
 - Updated 13 Feb 2011 to add a 'marry me in somerset' logo/link and text to front page & css..
 - Updated 09 April 2011 to add in a testimonials page, & extra images...
 - Updated 21 July 2011 to add in swirl img to break up pages - initially for tuition.php, but also others - like index.php.
 - Updated 24 July to include style for birthstones.php, and also large img link to page, and also to style the newsflash area while more permanent styling is worked out. 
 - Updated 09/9/2011 inside /test/ to begin adding in new menu structures.
 - Updated 15/9/2011 to include basic purecssmenu.com menu to work from.
 - Updated 16/9/2011 to finish new menu, clean up CSS, scripts.php and includes.php and added DD fade in slideshow code to index. Also added code to selectively add vars to specific pages. 
 
 :: Add in  NF slide show
***/

 * {
	padding: 0;
	margin: 0;
	border: 0;
	z-index: 0;
}
body {
	background-color: #7FD5CD; /** Original bgr colour #C5FEE9 **/
	background-image: url(img/bgr.jpg);
	color: #000000;
	background-repeat: repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: justify;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	color: #434661;
	font-style: italic;
	font-size: 18px;
	font-weight: bold;
}
h2 {
	font-family: "Times New Roman", Times, serif;
	color: #2D2F42;
	font-style: italic;
	font-size: 16px;
}
h3 {
	font-family: "Times New Roman", Times, serif;
	color: #2D2F42;
	font-style: italic;
	font-size: 14px;
}
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0099FF;
	font-style: italic;
	font-size: 18px;
}
h5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #33CCFF;
	font-style: italic;
	font-size: 14px;
}
h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #A8EEE3;
	font-style: italic;
	font-size: 12px;
}
.h5 {
	color: #0784E9;
	font-style: italic;
	font-size: 18px;
	font-weight: bold;
}
hr {
   background-color:#999; 
   color:#999; 		
   border: none;
   height: 1px;
   width: 75%;
   margin: 6px auto 18px;
}
a {
  outline: none;
  cursor: pointer; /** To fix IE not showing a hand cursor on imgs/links in DIVs **/
}
a:link {
	color: #136BB3;
	text-decoration: none;	
}
a:hover {
	color: #5AB0EF;
	text-decoration: none;
}
a:visited {
	color: #136BB3;
	text-decoration: none;	
}
blockquote {
	position: relative;
	width: 550px;
	left: 55px;
	padding: 5px;
}
.title {
	padding-left: 4px;
	padding-top: 5px;
	font-size: 18px;
	color: #666666;	
}
.subtitle {
	color: #666666;
	font-weight: bold;
}
.list {
	left: 20px;
	position: relative;
}
/*ul, li {
	position: relative;
	left: 40px;
	padding: 8px;
}*/
sup {
	font-size: xx-small;
}
sub {
	font-size: xx-small
}

.message { /* To do - make this work in with CK editor. .message is the div class inside the nflash.php that is the source file for the ajax newsflash ticker. This class doesn't show up outside of nflash.php, so is safe to style.
CKedit is still using the original css, not ../test/style.css */
	background-color: #FF0000;
	position: relative;
	border: 1px solid #FF00FF;
}
/** Ajax ticker style **/
#ajaxtickerNF{
width: 460px;
height: 100%;
}

#ajaxtickerNF div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/

}

.someclass{ /* currently unused */
}

#ajaxticker1{
width: 174px;
height: 100%;
}

#ajaxticker1 div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/

}

.someclass{ /* currently unused */
}
/*** New Nav Style ***/

ul.pureCssMenu ul{display:none;}
ul.pureCssMenu li:hover>ul{display:block;}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu, ul.pureCssMenu ul {
    background-color: #E6FFF4;
    border: 1px solid #ccc;
    list-style: none outside none;
    margin: 0;
    padding: 5px 5px 10px;
}
ul.pureCssMenum {
	/* sub menu/TL menu bgr colour - not used*/
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
	left: 7px;
    position: relative;
}
ul.pureCssMenu ul{
	width:192.75px;
}
ul.pureCssMenu li {
    display: block;
    font-size: 0;
    margin: 4px 5.25px 0;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#EBFAF4;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 13px Verdana;
	color: #444444;
	text-decoration:none;	
}
ul, il {
    left: 40px;
    padding: 8px;
    position: relative;
}

ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:5;
	height:16;
	display: inline-block;
	background-color:#AAAAAA;
	background-image:none;
}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#7FD5CD;
	/*border-color:#665500;
	border-style:solid;*/
	font:normal 13px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#7FD5CD;
	font:normal 13px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:11px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}


/*** Added temporarily to help with NF styling***/
.newsBox {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
.newsflash {
	background-color: #B6DDE9;
	float: left;
	height: 100%;
	padding: 5px;
	position: relative;
	width: 480px;
}
.nfBorder {
    border-left: 1px solid #F5FFF8;
	border-bottom: 1px solid #F5FFF8;
    float: left;
	min-height: 90px;
    padding: 5px;
    position: relative;
}
.NFlogo {
    background-image: url("img/newsflash.png");
    float: right;
    height: 106px;
    left: 148px;
    margin-bottom: 15px;
    position: absolute;
    top: -6px;
    width: 336px;
    z-index: -1;
}
#ajaxticker {
	padding: 12px 0 8px 0;
}

/*** images in text ***/

.birthStonesLink {
    background-image: url("img/BirthstoneLink.jpg");
    background-repeat: no-repeat;
    float: left;
    height: 240px;
    position: relative;
    text-align: left;
    width: 239px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.sectionSwirl { /* Image to give a sub heading type appearance, to break up pages/text. */
    background-image: url("img/sectionFlowerSwirl.png");
    background-repeat: no-repeat;
    height: 104px;
    padding-top: 20px;
    position: relative;
    text-indent: 35px;
    top: 50px;
    width: 375px;

}

.wholeSale {
	background-image: url(img/WholesaleCrate.png);
	background-repeat: no-repeat;
	height: 248px;
	width: 237px;
	position: relative;
	float: left;
}

.imgSpace {
	margin: 15px;	/* Place img DIVS inside <DIV class="imgSpace"></DIV> to give space around them without resorting to margin or padding*/
    color: #999999;
    font-size: 10px;
    text-align: left;
}
.cakeSpace {
	margin: 15px;	/* Place img DIVS inside <DIV class="imgSpace"></DIV> to give space around them without resorting to margin or padding*/
    color: #999999;
    font-size: 10px;
	clear: left;
	text-align: center;
}
.imgSpace p {
	text-align: center;
}
.thumbs {
	position: relative;
	float: left;
	padding: 0 25px 25px 0;
	left: 20px; 
}
.thumbsR {
	position: relative;
	float: right;
	left: 10px;
	
}
.brideModel {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/tiara_bride.jpg);
	background-repeat: no-repeat;
	height: 230px;
	width: 172px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.sarahModel {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/sarah_model.jpg);
	background-repeat: no-repeat;
	height: 216px;
	width: 162px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.bryonyModel {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/bryony_sml.jpg);
	background-repeat: no-repeat;
	height: 247px;
	width: 193px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.pearlModel {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/pearl_sml.jpg);
	background-repeat: no-repeat;
	height: 192px;
	width: 144px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.returns {
	position: relative;
	width: 75%;
	left: 12%;
	

}
.fb {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/b.jpg);
	background-repeat: no-repeat;
	height: 50px;
	width: 50px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.yt {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/youtube.jpg);
	background-repeat: no-repeat;
	height: 92px;
	width: 92px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.swgSML {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/swg/guildLogoSML.gif);
	background-repeat: no-repeat;
	height: 85px;
	width: 141px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.swgLRG {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/swg/guildLogoLRG.jpg);
	background-repeat: no-repeat;
	height: 142px;
	width: 236px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.invitesml {
	position: relative;
	background-image: url(img/invite_thumb.jpg);
	background-repeat: no-repeat;
	height: 127px;
	width: 184px;
}

.party1 {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/party1.jpg);
	background-repeat: no-repeat;
	height: 158px;
	width: 211px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.party2 {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/party2.jpg);
	background-repeat: no-repeat;
	height: 211px;
	width: 158px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.party3 {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/party3.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 267px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.room1Sml {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/room1Small.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 267px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.room2Sml {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/room2Small.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 267px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.room1Lrg {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/room1Large.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 267px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.room2Lrg {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/room2Large.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 267px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}


.birthstone {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/birthstone_amber.jpg);
	background-repeat: no-repeat;
	height: 247px;
	width: 176px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
} /* <div class="imgSpace"><div class="birthstone"></div></div> */

.BirthstoneRing {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/BirthstoneRing.png);
	background-repeat: no-repeat;
	height: 323px;
	width: 322px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.PearlClam {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/PearlClam.png);
	background-repeat: no-repeat;
	height: 222px;
	width: 214px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.amythist {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/amythest.png);
	background-repeat: no-repeat;
	height: 223px;
	width: 175px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}


.sarahBio {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/sarahBIOphoto.JPG);
	background-repeat: no-repeat;
	height: 233px;
	width: 155px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}


.looseBeads {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/looseBeads.JPG);
	background-repeat: no-repeat;
	height: 158px;
	width: 210px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.beadsOnWire {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/beadsOnWire.JPG);
	background-repeat: no-repeat;
	height: 157px;
	width: 210px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.smlBracelet {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/smlBracelet.JPG);
	background-repeat: no-repeat;
	height: 123px;
	width: 165px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.cake {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/cakeDecoration.png);
	background-repeat: no-repeat;
	height: 436px;
	width: 312px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}
.cake1 {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/cakeDecoGroup.JPG);
	background-repeat: no-repeat;
	height: 276px;
	width: 368px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
}

.cake2 {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/CakeButterflies.JPG);
	background-repeat: no-repeat;	
	height: 154px;
	width: 205px;
	right: 5px; /* Change left/right space to opposite of float to maintain text gap */
}

.cake3 {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/CakeCrystalDrgnFly.JPG);
	background-repeat: no-repeat;
	height: 154px;
	width: 205px;
	left: 45px; /* Change left/right space to opposite of float to maintain text gap */
}

.cake4 {
	position: relative;
	text-align: left;
	background-image: url(img/CakeDragnFly.JPG);
	background-repeat: no-repeat;
	height: 154px;
	width: 205px;
	left: 505px; /* Change left/right space to opposite of float to maintain text gap */
}

.mmis {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(http://www.marrymeinsomerset.co.uk/member_badge.png);
	background-repeat: no-repeat;
	height: 76px;
	width: 110px;
	right: 10px; /* Change left/right space to opposite of float to maintain text gap */
	border: 0px;
}

.garterIso {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/garterCharm.png);
	background-repeat: no-repeat;
	height: 348px;
	width: 139px;
	left: 10px; /* Change left/right space to opposite of float to maintain text gap */
	border: 0px;
	padding: 0 10px 0 5px;
}
.garterGroupBlk {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/GarterCharmsKBGR.jpg);
	background-repeat: no-repeat;
	height: 225px;
	width: 300px;
	border: 0px;
	padding: 0 10px 0 5px;
}
.garterSmall {
    background-image: url("img/GarterSetSml.jpg");
    background-repeat: no-repeat;
    border: 0 none;
    height: 184px;
    left: 22px;
    padding: 0 10px 0 5px;
    position: relative;
    width: 138px;
}
.AngelSml {
    background-image: url(img/AngelSml.jpg);
    background-repeat: no-repeat;
    border: 0 none;
    height: 184px;
    left: 22px;
    padding: 0 10px 0 5px;
    position: relative;
    width: 138px;
}
.angelMed {
	position: relative;
	float: left;
	text-align: left;
	background-image: url(img/AngelCharmMed.JPG);
	background-repeat: no-repeat;
	height: 250px;
	width: 300px;
	border: 0px;
	padding: 0 10px 0 5px;
}
.angelGroup {
	position: relative;
	text-align: left;
	background-image: url(img/AngelCollection.jpg);
	background-repeat: no-repeat;
	height: 356px;
	width: 561px;
	border: 0px;
	padding: 0 10px 0 5px;
	left: 12%;
}
.tiara {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/Tiara.png);
	background-repeat: no-repeat;
	height: 176px;
	width: 324px;
	border: 0px;
	padding: 5px;
}
.tiara2 {
	position: relative;
	float: right;
	text-align: left;
	background-image: url(img/tiara2.png);
	background-repeat: no-repeat;
	height: 140px;
	width: 210px;
	border: 0px;
	/*padding: 0 5px 0 5px;*/
	left: 10px;
}
.tiara3 {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/tiara3.png);
	background-repeat: no-repeat;
	height: 200px;
	width: 250px;
	border: 0px;
	padding: 5px;
/*	right: 5px;*/
}
.tiara4 {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/FlutterbyF.png);
	background-repeat: no-repeat;
	height: 230px;
	width: 345px;
	border: 0px;
	padding: 5px;
	left: 15px;
	top: 5px;
}
.tiara5 {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/PinwheelSTiara.png);
	background-repeat: no-repeat;
	height: 230px;
	width: 345px;
	border: 0px;
	padding: 5px;
	left: 15px;
	top: 5px;
}
.tiara6 {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/BubblesSideTiara.png);
	background-repeat: no-repeat;
	height: 230px;
	width: 345px;
	border: 0px;
	padding: 5px;
	left: 15px;
	top: 5px;
}
.tiara7 {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/risingBubbles.png);
	background-repeat: no-repeat;
	height: 230px;
	width: 345px;
	border: 0px;
	padding: 5px;
	left: 15px;
	top: 5px;
}
.everydayNecklace {
    background-image: url("img/pearlCrystalPendant.png");
    background-repeat: no-repeat;
    border: 0 none;
    float: right;
    height: 317px;
    left: 10px;
    padding: 4px;
    position: relative;
    text-align: left;
    top: 5px;
    width: 290px;
}
.everydayEarrings {
	position: relative;
	float: left;
	text-align: right;
	background-image: url(img/herringboneEarrings.png);
	background-repeat: no-repeat;
	height: 187px;
	width: 195px;
	border: 0px;
	padding: 5px;
}

/** Image links on index **/

#indexLinks {
	position: relative;
	width: 100%;
	float: left;
	height: 211px;
    padding: 0 0 10px 6px;
}

#weddingLink {
	position: relative;
	background-image: url(img/index1.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
	margin-right: 5px;
}
a:hover #weddingLink  {
	position: relative;
	background-image: url(img/index1Hover.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
	margin-right: 5px;
}
#jewelleryLink {
	position: relative;
	background-image: url(img/index2.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
	margin-right: 5px;
}
a:hover #jewelleryLink  {
	position: relative;
	background-image: url(img/index2Hover.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
	margin-right: 5px;
}
#consultationLink {
	position: relative;
	background-image: url(img/index3.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
}
a:hover #consultationLink  {
	position: relative;
	background-image: url(img/index3Hover.jpg);
	background-repeat: no-repeat;
	width: 239px;
	height: 240px;
	float: left;
}



/******  DIVs   ******/
#wrapper {
	position: relative;
	width: 955px;
	margin: 0 auto 25px auto;	
	height: 100%;
	left: 8px;
}

.topbar {
	position: absolute;
	width: 884px;
	height: 317px;
	top: 0px;
	left: -8px;
	background: url('img/header_img_1.png') top left no-repeat;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
}
#container {
	position: absolute;
	top: 317px;
	background: url(img/content_mid.png) top left repeat-y;
	width: 750px;
	z-index: -1;
}
.containerTop {
	background-image: url(img/content_top.png);
	background-repeat: no-repeat;
}
.containerBot {
	width: 750px;
	height: 17px;
	left: -8px;
	top: 7px;
	position: relative;
	background-image: url(img/content_bot.png);
	background-repeat: no-repeat;
}
#navcontainer {
	display: block;
    height: 33px;
    left: 9px;
    position: relative;
    top: 270px;
    width: 747px;
}
#navlist li{
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	position: relative;
	left: 15px;
}
#ajaxContent {
	position: relative;
	left: 8px;
	top: 2px;
	width: 730px;
	height: 100%;
}

#rightPane {
	position: absolute;
	top: 259px;
	left: 760px;
	width: 200px;
	background: url(img/rh_col_mid.png) top left repeat-y;
	z-index: -1;
	}
.rightTop {
	background-image: url(img/rh_col_top.png);
	background-repeat: no-repeat;
	position: relative;
	width: 200px;
	top: -5px;
}
.rightBot {
	background-image: url(img/rh_col_bot.png);
	background-repeat: no-repeat;
	position: relative;
	width: 200px;
	height: 21px;
	top: 20px;
}
.rightContent {
	position: relative;
	left: 8px;
	top: 10px;
	width: 184px;
	height: 100%;
}
.welcome {
	position: relative;
	background-image: url(img/weclome.png);
	background-repeat: no-repeat;
	top: 0px;
	left: -10px;
	width: 225px;
	height: 98px;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
}
.sarahPic {
	position: relative;
	background-image: url(img/sarah_pic.png);
	background-repeat: no-repeat;
	left: 0px;
	width: 109px;
	height: 136px;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
}
.sarahSig {
	position: relative;
	background-image: url(img/sarah_flower.png);
	background-repeat: no-repeat;
	top: -55px;
	left: 40px;
	width: 154px;
	height: 75px;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
}
.sarahAbout {
	position: relative;
	float: left;
	background-image: url(img/sarahLargeB.png);
	background-repeat: no-repeat;
	left: 5px;
	padding: 5px;
	width: 350px;
	height: 280px;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
}

.transBGRtext {
	position: fixed;
	margin: 0 auto 0 auto;
	left: -1.5%;
	top: 5px;
	width: 1306px;
	_width: 100%;
	min-height: 599px;
	_height: 599px;
	background-image: url(img/trans_bgr_text.png);
	background-repeat: repeat;
	behavior: url("/sezzyscrafts/SezzyPHP/iepngfix.htc");
	z-index: -1;

}

.testimony {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #666666;
	position: relative;
	padding: 15px 15px 25px 15px;
	width: 75%;
	left: 10%;
	border-bottom: 1px #B8E1F5 solid;
}

/***** Contact form styling *******/


#text {
	top: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	position: relative;
	width: 325px;
	left: 12%;
	text-align: center;
}

#form {
	background-color:#EAF0FD;
	width: 750px;
	left: 20px;
	position: relative;
	text-align: justify;
	top: 10px;
}

#formtext {
	left: 55px;
	position: relative;
	width: 525px;
	top: 10px;
	color: #FFFFFF;
}

#title {
	position: relative;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	top: 15px;
	left: 130px;
	width: 500px;
}

#pad{
	padding-right: 5px;
	padding-left: 5px;
}


#formquest2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000099;
	background-color: #FCFCFC;

}

#formquest3 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000099;
	background-color: #FCFCFC;
	left: 150px;
}


#Q_hilite_top{
	background-color:#F2F7FF;
	width: 725px;
	left: 4px;
	position: relative;
}

#Q_hilite{
	background-color:#DDE6F4;
	width: 725px;
	left: 12px;
	position: relative;


}

.space {
	position: relative;
	width: 100%;
	height: 5px;

}
.medspace {
	position: relative;
	width: 100%;
	height: 25px;

}
.bigspace {
	position: relative;
	width: 100%;
	height: 50px;

}

.boxstyle {
	background-color: #C4DBEE;
	border: 1px solid #666666;
}

/*********  DHTML Tooltip CSS ***********/

#dhtmltooltip{
	position: absolute;
	left: -300px;
	width: 150px;
	border: 1px solid black;
	padding: 2px;
	background-color: lightyellow;
	visibility: hidden;
	z-index: 100;
	/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
/********** Classes **********/


.required {
	color: #FF0000;
}