/**********************************************************************
	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 genearl 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; }
.cp-dashed { margin:10px 0px 10px 0px; height:1px; border-top:dashed 1px #7d7b7c; border-right:0px; border-left:0px; border-bottom:0px; }

/* Header definitions
---------------------------------------------- */
h1 { font-weight:normal; font-size:24px; line-height:26px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#990000; font-family:Arial, Helvetica, Verdana, sans-serif; }
h1 a { font-weight:normal; font-size:24px; line-height:26px; color:#990000; text-decoration:none; }
h1 a:hover { color:#e80000; text-decoration:none; }

h2 { font-weight:normal; font-size:20px; line-height:20px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#ffd100; font-family:Arial, Helvetica, Verdana, sans-serif; }
h2 a { font-weight:normal; font-size:20px; line-height:20px; color:#ffd100; text-decoration:none; font-family:Arial, Helvetica, Verdana, sans-serif; }
h2 a:hover { color:#fde888; text-decoration:none; }

h3 { font-weight:normal; font-size:18px; line-height:19px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#0183ce; font-family:Arial, Helvetica, Verdana, sans-serif; }
h3 a { font-weight:normal; font-size:18px; line-height:19px; color:#0183ce; text-decoration:none; font-family:Arial, Helvetica, Verdana, sans-serif; }
h3 a:hover { color:#ff850d; text-decoration:none; }

h4 { font-weight:bold; font-size:14px; line-height:18px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#5f453f; }
h4 a { font-weight:normal; font-size:18px; line-height:18px; color:#5f453f; text-decoration:none; }
h4 a:hover { color:#ff850d; text-decoration:none; }

h5 { font-weight:normal; font-size:14px; line-height:18px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#7bba18; }
h5 a { font-weight:normal; font-size:14px; line-height:18px; color:#7bba18; text-decoration:none; }
h5 a:hover { color:#ff850d; text-decoration:none; }

/* ------ 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
---------------------------------------------- */
.clear_both { clear:both; }

.float_left { float:left; }
.float_right { float:right; }

.pad-all { padding:10px; }
.pad-all2 { padding:15px; }
.pad-all3 { padding:5px; }

.top-pad { padding-top:10px; }
.top-pad2 { padding-top:15px; }
.top-pad3 { padding-top:20px; }
.top-bottom-pad { padding:5px 0px 5px 0px; }

.margin-all { margin:10px; }
.top-margin { margin-top:10px; }
.right-margin { margin-right: 10px; }
.bottom-margin { margin-bottom:10px; }
.left-margin { margin-left:10px; }

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

.right-content-box { width:576px; padding:25px; border:1px solid #ffffff; -webkit-border-radius:.5em; -moz-border-radius:.5em; border-radius:.5em; }

.rc-cp-icon-text { width:551px; }
.rc-cp-content { width:546px; background-color:#e1e1e1; padding:15px; }
.rc-cp-title { width:576px; }
.collapse-content { background-color:#ffffff; width:400px; padding:15px; width:516px; }


/* Text styles
---------------------------------------------- */
.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; }

.text-bold { font-weight:bold; }
.text-italic { font-style:italic; }
.text-small { font-size:12px; }
.text-small a { font-size:12px; }

.text-align-center { text-align:center; }
.text-align-right { text-align:right; }
.text-align-left { text-align:left; }

.white-text { color:#ffffff; }
.red-text { color:#990000; }
.green-text { color:#7bba18; }
.grey-text { color:#7d7b7c; }
.drkBlue-text { color:#3a5174; }
.black-text { color:#000000; }
.purple-text { color:#5f453f; }

.requiredField { color:#ff0000; }

/* Icons with text
---------------------------------------------- */
.icon1 { width:40px; }
.icon2 { width:25px; }
.icon1-text { width:140px }

/* Icons with text
---------------------------------------------- */
.blue-link { color:#0183ce; }
a.blue-link { color:#0183ce; text-decoration:none; }
a:hover.blue-link { color:#ff850d; text-decoration:none; }

/* Background colors
---------------------------------------------- */
.black-bkd { background-color:#000000; }
.ltBlue-bkd { background-color:#e5f0fc; }
.ltGreen-bkd { background-color:#e4efce; }
.ltGrey-bkd { background-color:#f5f6f7; }
.pink-bkd { background-color:#ffe4f1; }
.drkBlue-bkd { background-color:#3a5174; }
.white-bkd { background-color:#ffffff; }


/* User control styles
---------------------------------------------- */
.control_icon { width:20px; }
.control_wrapper { width:256px; }
.control_wrapper2 { width:533px; }

.control_input { width:240px; }
.control_input2 { width:200px; }
.control_input3 { width:180px; }
.control_input4 { width:520px; }
.control_input5 { width:120px; }
.control_input6 { width:100px; }
.control_input7 { width:80px; }
.control_input8 { width:60px; }
.control_input9 { width:140px; }
.control_input10 { width:400px; }
.control_input11 { width:380px; }

.control_search { width:193px; border:1px solid #ffffff; background-color:#ffffff; padding:0px; margin:0px; }

.control_pad { padding-top:15px; }

.input2length { width:20px; }
.input3length { width:30px; }
.input4length { width:40px; }


/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* ----- 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 { 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; }
.wideThumbStrokeLtGrey { padding:5px 5px 5px 5px; background-color:#d7d7d7; 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; width:626px; }
.mainbox_fade_top { float:left; width:626px; height:29px; background-image:url(images/boxFade_top.jpg); background-repeat:repeat-x; }
.mainbox_fade_bottom { float:left; width:626px; height:29px; background-image:url(images/boxFade_bottom.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; }

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* Button 
---------------------------------------------- */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	/*padding:.5em 1em .5em 1em;*/
	/*text-shadow: 0 1px 1px rgba(0,0,0,.3);*/
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
}

.button:hover { text-decoration: none; color:#ffffff; }
.button:active { position: relative; top: 1px; }

/* Button image styles
---------------------------------------------- */
.button.x-icon { padding-left:11px; }
.button.x-icon span { color:#ffffff; padding-left:15px; background:url("images/x_icon.png") no-repeat 0px; }
.button.plus-icon { padding-left:11px; }
.button.plus-icon span { color:#ffffff; padding-left:15px; background:url("images/plus_icon.png") no-repeat 0px; }

.button.search-icon { padding-left:11px; }
.button.search-icon span { color:#ffffff; padding-left:15px; background:url("images/search_btn_icon.png") no-repeat 0px; }
.button.reports-icon { padding-left:11px; }
.button.reports-icon span { color:#ffffff; padding-left:15px; background:url("images/report_btn_icon.png") no-repeat 0px; }
.button.account-icon { padding-left:11px; }
.button.account-icon span { color:#ffffff; padding-left:18px; background:url("images/house-icon-input.png") no-repeat 0px; }

div.input-plus-icon input[type="button"] { background-image:url("images/plus-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 20px; margin:0px; }
div.input-green-plus-icon input[type="button"] { background-image:url("images/green-plus-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 20px; margin:0px; }
div.input-re-open-icon input[type="button"] { background-image:url("images/white-re-open-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 20px; margin:0px; }
div.input-reminder-icon input[type="button"] { background-image:url("images/clock-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 25px; margin:0px; }
div.input-remove-icon input[type="button"] { background-image:url("images/remove-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 25px; margin:0px; }
div.input-x-icon input[type="button"] { background-image:url("images/x-icon-input.png"); background-repeat:no-repeat; background-position:center left; padding:7px 7px 5px 20px; margin:0px; }

.input-icon { color:#ffffff; font-size:14px; text-align:left; }

/* Button width styles
---------------------------------------------- */
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 12px; padding: .4em 1.5em .42em; }
.small { font-size: 11px; padding: .2em 1em .1em; }

/* Button color styles
---------------------------------------------- */

/* Orange */
.orange { color:#ffffff; border:1px solid #da7c0c; background: #f78d1d; }
.orange:hover { background: #f47c20; }
.orange:active { color: #fcd3a5; }

/* Red */
.red { color: #ffffff; border:1px solid #990000; background:#990000; }
.red:hover { border:1px solid #760000; background:#760000; }

/* Blue */
.blue { color: #ffffff; border:1px solid #4c95c5; background:#4c95c5; /*padding:5px;*/ }
.blue:hover { border:solid 1px #478cb9; background:#478cb9; }

/* Dark blue */
.drkBlue { color:#ffffff; border:1px solid #3a5174; background:#3a5174; }
.drkBlue:hover { background:#2f415d; }

/* Green */
.green { color: #ffffff; border:1px solid #7bba18; background-color:#7bba18; }
.green:hover { background-color:#6fa617; }

/* Dark grey */
.drkGrey { color:#ffffff; border:1px solid #acacac; background:#acacac; }
.drkGrey:hover { background:#959595; }

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* ------ 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; }

}