/**********************************************************************
	Filename: imagine.css
	Project:  Imagine Salon & Spa
	Date:  2/27/2009
**********************************************************************/

/* ------ BODY TAG DEFINITIONS ------ */
html, body { margin:0px auto; height:100%; text-align:center; background-color:#000000; background-image:url(images/paintBkd.gif); background-repeat:no-repeat; background-position:center top; }

/* ------ ASSIGN FONT AND COLOR TO THE GENERAL STYLES ------ */
font, th, td, p, span, div, textarea, a { font-family:Arial, Helvetica, Verdana, sans-serif; font-size:14px; line-height:20px; }
a { font-weight:normal; font-style:normal; text-decoration:underline; color:#ffd100; }
a:hover { text-decoration:none; }
a img { border:none; }
ul { margin-top:5px; }
li { margin-bottom:5px; }
hr { margin:15px 0px 15px 0px; height:1px; border-top:1px solid #ffffff; border-right:0px; border-left:0px; border-bottom:0px; }

/* ------ PAGE DEFINITIONS ------ */
#wrapper { text-align:center; min-height:100%; height:auto !important; height:100%; margin:0px auto -70px auto; /* the bottom margin is the negative value of the footer's height */ }
#page { position:relative; width:980px; margin:0px auto; text-align:center; }
#logoURL { position:absolute; top:152px; left:40px; z-index:100; }
#header { }

#topNav { color:#ffffff; }
#topNavLinks { text-align:center; }
#topNavLinks a { color:#ffffff; text-decoration:none; font-weight:normal; }
#topNavLinks a:hover { color:#ffd100; text-decoration:none; font-weight:normal; }

#content { color:#ffffff; }
#leftSide { width:332px; float:left; }
#rightSide { width:648px; float:right; }
#rightSidePad { padding:15px 10px 10px 10px; text-align:left; }

#footer { width:980px; margin:0px auto; height:70px; color:#ffffff; text-align:center; }
#footerNavFade { width:980px; height:30px; background-image:url(images/hrFade_nav.jpg); background-repeat:no-repeat; background-position:center; }
#footerContent { }

#printLogo { display:none; }
#printContact { display:none; }

/* ------ CLASS DEFINITIONS ------ */

.intro { font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; line-height:28px; }
.intro span  { font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; line-height:28px; }
.intro a { font-size:18px; font-family:Georgia, 'Times New Roman', Times, serif; line-height:28px; font-weight:normal; font-style:normal; text-decoration:underline; color:#ffd100; }
.intro a:hover { text-decoration:none; }

.navFadeLine { width:980px; height:1px; background-image:url(images/hrFade_nav.jpg); background-repeat:no-repeat; background-position:center; padding:10px 0px 10px 0px; }

/* ----- Left Nav Classes --------- */
.leftBoxOutline { float:left; padding:15px 15px 0px 15px; }
.leftBoxOutlineStroke { float:left; border:1px solid #ffffff; }
.leftNav {  float:left; text-align:left; width:300px; }
.leftNavPicFloat { float:left; width:42px; }
.leftNavPic { padding-left:20px; }
.leftNavTextFloat { float:right; width:258px; }
.leftNavText { text-align:left; padding-left:20px; }
.leftNavText a { color:#ffffff; text-decoration:none; }
.leftNavText a:hover { color:#ffd100; text-decoration:none; }
.leftNavFadeLine { float:left; width:300px; background-image:url(images/hrFade_leftNav.jpg); background-repeat:no-repeat; background-position:center; padding:10px 0px 10px 0px; }

.boxFadeTop { float:left; width:299px; height:29px; background-image:url(images/boxFade_top.jpg); background-repeat:repeat-x; }
.boxFadeBottom { float:left; width:299px; height:29px; background-image:url(images/boxFade_bottom.jpg); background-repeat:repeat-x; }

.adBox { text-align:left; }
.adBoxTitle { font-size:12px; text-align:center; color:#ffffff; }
.adBoxPic { text-align:center; }

.promoPrice { float:left; width:85px; }
.price { padding:5px 10px 5px 5px; font-size:30px; color:#990000; text-align:right; }
.promoText { float:right; width:215px; }

.promoDealTitle { padding:5px 5px 5px 25px; font-size:24px; color:#990000; text-align:left; line-height:24px; }
.promoDealText { padding:5px 5px 5px 25px; text-align:left; }
.promoBanner { height:45px; width:300px; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; text-align:center; background-image:url(images/promoBanner.jpg); background-repeat:no-repeat; margin-bottom:15px; }
.promoBannerText { font-size:24px; padding-top:15px; }

.callout_fade_top { float:left; width:260px; height:29px; background-image:url(images/boxFade_top.jpg); background-repeat:repeat-x; }
.callout_fade_bottom { float:left; width:260px; height:29px; background-image:url(images/boxFade_bottom.jpg); background-repeat:repeat-x; }
.callout_box_right { float:right; border:1px solid #ffffff; width:260px; margin:0px 0px 10px 10px; }
.callout_text_pad { padding:25px 25px 15px 25px; }

/* ---- Content Section Classes ---- */
.contentSection { text-align:left; }
.contentSectionThumb { text-align:left; }
.contentSectionTitle { text-align:left; padding-left:20px; }
.contentSectionFadeLine { width:628px; height:1px; background-image:url(images/hrFade_content.jpg); background-repeat:no-repeat; background-position:center; padding:10px 0px 40px 0px; }
.contentSectionPadding { padding-left:20px; }

.pageTopPad{ padding-top:20px; }

/* ----- Right Content --------- */
.contentRight { width:358px; float:right; text-align:left; }
.titlePad { padding:0px 0px 20px 0px; }
.contentTitleRed { font-size:24px; color:#990000; line-height:28px; }
.contentTitleWhite { font-size:24px; color:#ffffff; line-height:28px; }
.contentTitleWhite2 { font-size:18px; color:#ffffff; line-height:20px; }
.contentTitleYellow { font-size:24px; color:#ffd100; line-height:28px; }
.contentTitleYellow2 { font-size:18px; color:#ffd100; line-height:28px; }

.yellow_text { color:#ffd100; }

.li_red_star { list-style-image:url(images/red_star.jpg); }

.contentCallOut { color:#990000; font-weight:bold; }

.thumbNail { float:left; width:144px; }
.thumbPad { padding:0px 20px 0px 0px; width:124px; }
.thumbStroke { padding:5px 5px 5px 5px; background-color:#ffffff; width:114px; }
.thumbContent { float:right; text-align:left; width:477px; }
.thumbText { padding:10px 0px 0px 0px; }

.wideImage { float:left; width:280px; text-align:center; }
.wideImageText { float:right; width:347px; }

.moreLink { padding:5px 0px 0px 0px; }
.redFootnote { font-size:12px; color:#990000;  }

.contentTable { padding-top:20px; padding-bottom:20px; }
.row1 { background-color:#ebebeb; color:#000000; }
.row2 { background-color:#cccccc; color:#000000; }
.rowHeader { background-color:#990000; color:#ffffff; }
.rowFooter { background-color:#000000; color:#ffffff; }

/* ------ Image Styles ------ */
.imageLeft { width:270px; float:left; text-align:center; }
.imageLeftPad { padding:0px 0px 0px 0px; }

.imageLeftSquare { width:270px; float:left; text-align:left; }
.imageLeftPadSquare { padding:0px 0px 0px 40px; }
.imageLeftPadSquareLong { padding:0px 0px 10px 0px; }
.imageLeftBorder { padding:5px 5px 5px 5px; background-color:#ffffff; width:178px; }
.imageLeftBorderLong { padding:5px 5px 5px 5px; background-color:#ffffff; width:250px; }

.imageRightSquare { float:right; text-align:right; }
.imageRightPadSquare { padding:0px 0px 20px 20px; }

.img_textwrap_wide { float:left; width:275px; }
.img_textwrap_wide_right { float:right; width:275px; }

.galleryThumbPad { padding:0px 10px 20px 20px; width:160px; }
.galleryThumbStroke { padding:5px 5px 5px 5px; background-color:#ffffff; width:150px; }

.staffThumbStroke { padding:5px 5px 5px 5px; background-color:#ffffff; width:160px; }
.wideThumbStroke { padding:5px 5px 5px 5px; background-color:#ffffff; width:180px; color:#000000; font-size:12px; }

.wideThumbText { width:190px; padding:15px 0px 15px 0px; }

.threePic_Wrapper { float:left; margin-top:30px; width:618px; }
.threePic_Left_Wrapper { float:left; width:210px; }
.threePic_Left_Pad { padding-left:20px; }
.threePic_Double_Wrapper { float:right; width:408px; }
.threePic_Middle_Wrapper { float:left; width:198px; }
.threePic_Middle_Pad { padding-left:4px;  }
.threePic_Right_Wrapper { float:right; width:210px; }
.threePic_Bottom_Title { background-color:#ffffff; text-align:center; color:#000000; font-size:18px; padding:5px 0px 0px 0px; }

.threePic_Wide_Wrapper { float:left; margin-top:30px; width:627px; }
.threePic_Wide_Left_Wrapper { float:left; width:219px; }
.threePic_Wide_Double_Wrapper { float:right; width:407px; }
.threePic_Wide_Middle_Wrapper { float:left; width:218x; }
.threePic_Wide_Right_Wrapper { float:right; width:189px; }

.mainbox_border { float:left; border:1px solid #ffffff; }
.mainbox_fade_top { float:left; width:626px; height:29px; background-image:url(images/boxFade_top.jpg); background-repeat:repeat-x; }
.mainbox_width { float:left; width:625px; }
.mainbox_padding { padding:0px 15px 0px 15px; }
.mainbox_left { float:left; width:198px; text-align:left; }
.mainbox_left_padding { padding-right:10px; }
.mainbox_right { float:right; width:395px; border-left:1px solid #ffffff; }

.printButton { padding-bottom:15px; }

/* Class definition for the sticky footer */
.push { height:70px; }

/* ------ LightBox JS v2.04 ------ */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* ------ Home Page Navigation Links ------ */

/* ------ Secondary Page Navigation Links ------ */


/* ------ PRINTER FRIENDLY CSS ------ */
@media print 
{
	html, body { margin:0px auto; height:100%; text-align:center; }
	
	/* ------ ASSIGN FONT AND COLOR TO THE GENERAL STYLES ------ */
	font, th, td, p, span, div, textarea, a { font-family:Arial, Helvetica, Verdana, sans-serif; font-size:14px; line-height:20px; }
	a { font-weight:normal; font-style:normal; text-decoration:underline; color:#ffd100; }
	a:hover { text-decoration:none; }
	a img { border:none; }
	ul { margin-top:5px; }
	li { margin-bottom:5px; }
	hr { margin:15px 0px 15px 0px; height:1px; border-top:1px solid #000000; border-right:0px; border-left:0px; border-bottom:0px; }
	
	/* ------ PAGE DEFINITIONS ------ */
	#wrapper { text-align:center; min-height:100%; height:auto !important; height:100%; margin:0px auto -70px auto; /* the bottom margin is the negative value of the footer's height */ }
	#page { position:relative; width:auto; margin:0px auto; text-align:center; }
	#logoURL { }
	#header { display:none; }
	
	#topNav { display:none; }
	#topNavLinks { display:none; }
	
	#content { color:#000000; }
	#leftSide { display:none; }
	#rightSide { width:auto; float:right; }
	#rightSidePad { padding:15px 10px 10px 10px; text-align:left; }
	
	#footer { display:none; }
	
	#printLogo { display:block; padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid #000000; }
	#printContact { display:block; margin-bottom:20px; }
	
	
	.callout_box_right { float:right; border:1px solid #000000; width:260px; margin:0px 0px 10px 10px; }

}