/* -------[ BODY > CONTENT AREA > POPUPS ]------- */
		
/* -------[ BASE FONTS ]------- */
	
	body.popup, body.popupContainer {
		font: normal 12px/140% Arial, Helvetica, sans-serif;
		background:#fff;
		overflow:hidden !important;
		margin: 0;
		}
	
	.popupContainer h1,
	.popupContainer h2,
	.popupContainer h3, 
	.popupContainer h4,
	.popupContainer h5{
		display:block;
		font-weight:bold;		
		}

	.popupContainer h1{font-size:18px;}
	.popupContainer h2{font-size:16px;}
	.popupContainer h3{font-size:12px;}


/* -------[ BODY > CONTENT AREA > POPUPS > WELCOME POPUPS ]------- */

	#welcome1Dialog .popupInner,
	#welcome2Dialog .popupInner{
		position:relative;
		height:350px;
		}


		html.popup{
			position:relative;
			height:100%;
			position:absolute;
			top:0px;
			left:0px;
			overflow:auto;
			overflow-x:hidden;
			}

		html.welcomePopup{
			margin:0px;
			}
			
			html.welcomePopup *{
				text-align:left;
				}

			html.importExport{
	            overflow-x:auto;
	            overflow: hidden;
	            }
				
			html.popup body{
				position:relative;
				margin:0px;
				height:100%;
				}
				
				html.popup body div#popup{
					position:relative;
					height:100%;
					}

		div.popupInner .popupIframe{
			border:0px;
			height:100%;
			margin-bottom:-3px;
			}
			
			body.popup div#popup{
				position:relative;
				}
				
				body.popup div#popup h1{
					position:relative;
					margin:0 10px 0 10px;
					top:10px;
					}
				
				body.popup div#popup hr{
					margin:15px 10px 5px 10px;
					}
				
				body.popup div#popup p{
					position:relative;
					text-indent:10px;
					font-size:12px;
					margin:0 15px 10px 15px;
					line-height:1.4;
					}
					
					div#popup div#popupVideo{
						position:relative;
						float:left;
						bottom:0px;
						margin:10px;
						}
						
						div#popupVideo img{
							float:left;
							margin:0 10px 0 0;
							}
							
						div#popupVideo h1{
							text-transform:uppercase;
							top:0px !important;
							}
						
						div#popupVideo p{
							text-indent:0px !important;
							}
					div#popup #thanksFinished {
						position:absolute;
						bottom:0px;
						right:0px;
						margin:10px;
						}
			            
/* -------[ YUI POPUPS ]------- */

	div#emailClientPopup, 
	div#dashbaordClientApptDialog, 
	div#ignoreDlgContainer{
		background-color:white;
		}

	#yuipopupform{
		/* margin:10px; WAS EFFECTING IMPORT CLIENTS POPUP */ 
		}
	
		#yuipopupform table td{
			/* padding:5px; WAS EFFECTING IMPORT CLIENTS POPUP */ 
			}
			
		form#yuipopupform #popup_bodyArea{
			width:580px;
			}

		/* -------[ BODY > CONTENT AREA > POPUPS ]------- */

					.mask{
						/* SETTING A Z-INDEX HERE CAUSES PROBLEMS WITH HAVING MULTIPLE DIALOGS */
						}
					
					.yui-skin-sam .mask{
						background-color: #000;
						opacity: 0.6;
						}
					
					.popup .mask{
						background-color:transparent !important;
						}
					
					.yui-panel-container{
						/* SETTING A Z-INDEX HERE CAUSES PROBLEMS WITH HAVING MULTIPLE DIALOGS */
						/*z-index:99999999999999 !important;*/
						}
					
					.yui-panel-container *{
						}
					
					.popupDialog{
						background:#fff;
						}
					
						.popupDialog .hd{
							border-bottom:1px solid #888 !important;
							}
					
					.popupInner{
						background:#fff !important;
						overflow:hidden;
						height:300px; /* [ THIS IS THE DEFAULT HEIGHT ] */
						}
					
						.popupIframe{
							width:100%;
							height:100%;
							border: 0px;
							}
					
							html.popup{
								background:#fff;
								overflow:hidden !important;
								}
								
								html.popup body{
									margin:10px;
									}
					
						div.hd
						{
							border:1px solid #888;
							}
					
						/*.underlay{
							height: auto !important;
							}*/
									         	


/* -------[ BODY > CONTENT AREA > POPUPS > NEW APPOINTMENT WORKFLOW (& EVERYTHING ELSE) ]------- */
					
			div#popup{
				position:relative;
				}
				
				div#popup h1{
					position:relative;
					margin:0 10px 0 10px;
					top:10px;
					}
				
				div#popup hr{
					margin:15px 10px 5px 10px;
					}
				
				div#popup p{
					position:relative;
					text-indent:10px;
					font-size:12px;
					margin:0 15px 10px 15px;
					line-height:1.4;
					}
			    label{
					font: bold 11px/140% Arial, Helvetica, sans-serif;
					}


		html.editClientInfo div#popup,
		html.photoPopup div#popup,
		html.profilePage div#popup{
			margin:10px;
			}

		div#popup form{
			position:relative;
			float:left;
			width:100%;
			height:250px;
			}
		
		table.options {
			border: none;
			}
			table.options td.label {
				border: none;
				padding: 0 10px 0 0;
				text-align: right;
				vertical-align: top;
				}
				
				table.options td.dataEntry {
					border: none;
					padding: 0 0 0 10px;
					text-align: left;
					vertical-align: top;
					}
		
		
		html.editClientInfo div#popup,
		html.profilePage div#popup{
			width:580px;
			}
			
		html.editClientInfo div#popup form,
		html.profilePage div#popup form{
			width:100%;
			}
		
			div#popup_bodyArea{
				position:relative;
				float:left;
				text-align:center;
				width:100%;
				height:100%;
				}

				div#popup_bodyArea #clientSelect{
					width:150px;
					}
				
				div#popup_bodyArea #serviceSelect{
					width:150px;
					}

				html.editClientInfo div#popup_bodyArea,
				html.profilePage div#popup_bodyArea{
					width:auto;
					}
					
					html.photoPopup div#popup_bodyArea{
						width:680px;
						}
						
						html.photoPopup div#popup_bodyArea p.notify{
							clear:both;
							margin-top:60px !important;
							}
					
					html.editClientInfo ul#addClient,
					html.profilePage ul#addClient{
						text-align:left;
						}

		    div.yuimenu .bd{
		        zoom: normal;
		    	}

				
				div#popup_bodyArea ul.popupFooterNav{
					/* THERE IS AN IE7 SPECIFIC RULE FOR THIS*/
					clear:both;
					float:left;
					width:100%;
					}
					
					ul.popupFooterNav .buttonRight {
						float: right;
						margin-right: 100px;
						}
					
					ul.popupFooterNav .buttonLeft {
						float: left;
						margin-left: 100px;
						}
				/* 
					- "FLOATLEFT" HERE IS ESSENTIALLY EXTENDING THE .floatLeft CLASS
					- THERE ARE IE7 SPECIFIC STYLESHEETS WHICH OVERRIDE THE position RULE TO static
					  TO PREVENT THE BUTTON SHIFTING BUG
					- AN ALTERNATIVE TO THIS SOLUTION WOULD REQUIRE ADDING AN ADDITIONAL CLASS TO THE popupFooterNav
					  BUTTONS AND THEN CHANGING THE TWO RULES BELOW TO APPLY TO THOSE CLASSES
					- THE REASON FOR CHOOSING THIS SOLUTION WAS THAT ADDING SAID ADDITIONAL CLASS TO REPRESENT
					  THE RULES DEFINED BELOW WAS FUNCTIONALLY UNNECESSARY SINCE THE floatRight & floatLeft CLASSES
					  WERE PRESENT IN THE APPROPRIATE AREAS AND SINCE THE RULES DEFINED BELOW ARE POSITIONING 'TWEAKS', 
					  "floatRight" & "floatLeft" STILL APPLIES RELEVANT SEMANTICS
				*/
					div#popup_bodyArea ul.popupFooterNav .floatLeft{
						position:relative !important;
						bottom:0px !important;
						margin:10px;
						}
					
					div#popup_bodyArea ul.popupFooterNav .floatRight{
						float:right !important;
						position:relative !important;
						bottom:0px !important;
						margin:10px;
						}

					.button_blank{
						display:block;
						width:85px;
						height:27px;
						color:#fff;
						font-weight:bold;
						border:0px;
						background:url(../images/button_backCancelSave.gif) -375px top no-repeat;
						}
						
						.button_blank:hover{
							background-position:-375px -27px;
							cursor:pointer;
							}
							
							.button_blank.disabled{
								background-position:-375px bottom;
								}

					.button_okClose{
						display:block;
						width:85px;
						height:27px;
						text-indent:-10000px;
						line-height:100000;
						border:0px;
						background:url(../images/button_backCancelSave.gif) -289px top no-repeat;
						}
						
						.button_okClose:hover{
							background-position:-289px -27px;
							cursor:pointer;
							}
							
							.button_okClose.disabled{
								background-position:-289px bottom;
								}

					.button_goBack{
						display:block;
						width:86px;
						height:27px;
						text-indent:-10000px;
						line-height:100000;
						border:0px;
						background:url(../images/button_backCancelSave.gif) top left no-repeat;
						}
						
						.button_goBack:hover{
							background-position:0px -27px;
							cursor:pointer;
							}
						
						.button_goBack.disabled{
							background-position:bottom left;
							}
							
							.button_goBack.disabled:hover{
								cursor:default;
								}
					
					ul.popupFooterNav .button_saveAndFinish{
						display:block;
						width:115px;
						height:27px;
						text-indent:-10000px;
						line-height:100000;
						border:0px;
						background:url(../images/button_backCancelSave.gif) -173px top no-repeat;
						}
						
						ul.popupFooterNav .button_saveAndFinish:hover{
							background-position:-173px -27px;
							cursor:pointer;
							}
						
						ul.popupFooterNav .button_saveAndFinish.disabled{
							background-position:-173px bottom;
							}
						
							ul.popupFooterNav .button_saveAndFinish.disabled:hover{
								cursor:default;
								}
					
					ul.popupFooterNav .button_saveAndContinue{
						display:block;
						width:132px;
						height:27px;
						text-indent:-10000px;
						line-height:100000;
						border:0px;
						background:url(../images/button_backCancelSave.gif) top right no-repeat;
						}
						
						ul.popupFooterNav .button_saveAndContinue:hover{
							background-position:right -27px;
							cursor:pointer;
							}
						
						ul.popupFooterNav .button_saveAndContinue.disabled{
							background-position:bottom right;
							}
							
							ul.popupFooterNav .button_saveAndContinue.disabled:hover{
								cursor:default;
								}
					
					ul.popupFooterNav .button_cancel{
						display:block;
						width:85px;
						height:27px;
						text-indent:-10000px;
						line-height:100000;
						border:0px;
						background:url(../images/button_backCancelSave.gif) -87px top no-repeat;
						}

						ul.popupFooterNav .button_cancel:hover{
							background-position:-87px -27px;
							cursor:pointer;
							}
							
						ul.popupFooterNav .button_cancel.disabled{
							background-position:-87px bottom;
							}
							
							ul.popupFooterNav .button_cancel.disabled:hover{
								cursor:default;
								}


					div.bodyArea_main #chooseDate table,
					div.bodyArea_final #haircut table,
					div.bodyArea_final #color table,
					div.bodyArea_final #straightener table,
					div.bodyArea_final #permanent table{
						margin: 0pt 30px 0pt 25px;
						font-size:12px;
						}
						
						#startMonth,
						#haircut_month-field,
						#color_month-field,
						#straightener_month-field,
						#permanent_month-field{
							margin: 0pt 5px;
							text-align:center;
							width:30px;
							}

						#startDay,						
						#haircut_day-field,
						#color_day-field,
						#straightener_day-field,
						#permanent_day-field{
							text-align:center;
							width:30px;
							margin: 0pt 5px;
							}

						#startYear,							
						#haircut_year-field,
						#color_year-field,
						#straightener_year-field,
						#permanent_year-field{
							text-align:center;
							width:30px;
							float:left;
							margin: 0pt 5px;
							}
							
						div.bodyArea_final td.dateFields_label{
							padding: 0pt 10px;
							white-space: nowrap;						
							}

						#haircut_month-label,
						#color_month-label,
						#straightener_month-label,
						#permanent_month-label{
							float:right;
							width:100%;	
							}
						
						.detailedDescription{
							text-align: right; 
							white-space: nowrap; 
							vertical-align: top;
							}
							
						textarea#haircut_Notes,
						textarea#color_Notes,
						textarea#straightener_Notes,
						#permanent_Notes{
							width:95%;
							height: 75px !important;
							}

						label#other{
							top:10px !important;
							margin:0px !important;
							}
						
						label#other,
						label#description,
						label#relaxerTiming,
						label#permTiming,
						label#permRodSize,
						label#addSvcRelaxer_notes,
						#addSvcPerm_notes{
							margin-top:5px;
							float:left;
							position:relative !important;
							display:block;
							text-align:right;
							width:130px;
							}

							label#relaxerTiming,
							label#permTiming,
							label#permRodSize{
								top:3px;
								width:125px;
								}
							
							#relaxer_timing_minutes,
							#perm_timing_minutes,
							#relaxer_timing_hours,
							#perm_timing_hours{
								float:left;
								margin:5px;
								}
							
							div#color,
							div#haircut{
								display:none;
								}
													
							label#colorFoil1,
							label#colorFoil2,
							label#colorFoil3,
							label#colorFill,
							label#colorBase,
							label#colorMidshaft,
							label#colorEnds,
							label#colorGlaze{
								display:block;
								float:left;
								width:100px;
								text-align:right;
								margin:10px 5px 5px 5px;
								}
							
							input#colorFoil1,
							input#colorFoil2,
							input#colorFoil3,
							input#colorFill,
							input#colorBase,
							input#colorMidShaft,
							input#colorEnds,
							input#colorGlaze{
								float:left;
								width:125px;
								margin:5px 0;
								}
							
							input#other,
							input#permRodSize{
								float:left;
								margin:5px 5px 5px 4px;
								}
							
							label#permRodSize{
								margin-left:3px;
								}
							
							input#permRodSize{
								margin-left:6px;
								}


	.photoFileUpload{
		position:relative;
		margin:7% 35% !important;
		height:70px;
		display:block;
		}
    
    #results {
        border: 1px solid black;
        height: 75px;
        width: 75px;
        position: relative;
        float:left;
        overflow: hidden;
        margin-left:10px;
    }
    #results_profile{
		border: 1px solid black;
        height: 66px;
        width: 88px;
        position: relative;
        float:left;
        overflow: hidden;
        margin-left:10px;
    }
    #results img {
        position: absolute;
    }
    #results_profile img{
      position: absolute;
    }

/* THESE STYLES ARE REPLICATED IN STYLE.CSS SINCE THIS CSS FILE IS NOT INCLUDED IN requestAppointment.html */
	.calcell {
	background: #fff;
	}

	.calApptReq {
	background: #c00 !important;
	}

	.calApptReq a {
	color: #fff !important;
	}
	
	.calClientDayoff {
	background: #ccc;
	color: #999 !important;
	}
	
	.calStylistDayoff a {
	background: #ccc;
	}
	
	.calAppt a {
	background: #caffc0;
	}