﻿        	body{
				/* background-image: url(../images/guide.jpg); */
				/* background-repeat:no-repeat;	*/
				background-color:#000000;
        		font-family:Arial; 
        		font-size:12px;
				position:relative;
        	}
			
			#debugSection {
				display:block;
				float:right;
				position:relative;
			}
			
			#leftText {
				position:absolute;
				top:80px;
				left:60px;
				background-image: url(../images/leftText.jpg);
				background-repeat:no-repeat;		
				width:287px;
				height:400px;
			}
			
			#dynamicSection{
				position:absolute;
				top:25px;
				left:370px;
				background-image: url(../images/frameBackground.jpg); 
				background-repeat:no-repeat;	
				width:580px;
				height:470px;
			}
			.backBtn {
				position:absolute;
				top:9px;
				left:5px;
				background-image: url(../images/backBackground.jpg);
				background-repeat:no-repeat;		
				width:87px;
				height:37px;
				text-align:center;
				padding-top:15px;
				cursor: pointer !important;
			}
			
			
			.stepProgress{
				display:block;
        		position:absolute;
        		top:1px;
				left:480px;
				padding: 18px 0 0 15px;
				font-size:12px;
				width:97px;
				height:43px;
				background-image: url(../images/stepsBackground.jpg);
				background-repeat:no-repeat;
			}
			
			.stepHeaderOne, .stepHeaderTwo, .stepHeaderThree, .stepHeaderFour {
				display:block;
				float:left;
				position:relative;
				margin:70px 0 0 25px;
				width:357px;
				height:43px;
				background-repeat:no-repeat;
			}
			
			.stepHeaderOne {
				background-image: url(../images/step1.jpg);
			}
			
			.stepHeaderTwo {
				background-image: url(../images/step2.jpg);
			}			
			
			.stepHeaderThree {
				background-image: url(../images/step3.jpg);
				margin:45px 0 0 25px;
			}	
			
			.stepHeaderFour {
				background-image: url(../images/step4.jpg);
				margin:45px 0 0 25px;
			}		
			
			.directions {
				display:block;
				float:left;
				position:relative;
				width:450px;
				margin:0 0 0 76px;
			}
			#step1,#step2,#step3,#step4  {
				display:none;
        		position:relative;
        		float:left;
			}
			#step1 {
				display:block;
			}
			#videoBackgrounds {
				display:block;
				float:left;
				position:relative;
				margin:20px 0 0 46px;
				width:493px;
				height:181px;				
			}
			#fredButton, #robButton{
				display:block;
				float:left;
				position:relative;
				width:114px;
				height:32px;	
				background-repeat:no-repeat;
				cursor: pointer !important;
				
			}
			#fredButton{
				margin:3px 0 0 110px;
				clear:both;
			}
			
			#robButton{
				margin:3px 0 0 130px;
			}
			
			#fredButton.buttonOff{
				background-image: url(../images/fredOff.jpg) !important;
			}		
			#fredButton.buttonOn{
				background-image: url(../images/fredOn.jpg) !important;
			}	
			
			#robButton.buttonOff{
				background-image: url(../images/robOff.jpg) !important;
			}		
			#robButton.buttonOn{
				background-image: url(../images/robOn.jpg) !important;
			}
			
			#videos {
				display:block;
				float:left;
				position:relative;
				outline:none;
			}
			
        	#login{
				display:block;
        		position:relative;
        		float:left;
        		padding:7px;
        		margin:10px 0 0 20px;
				width:600px;
        	}  	
        	
			#clients {
				font-size:12px;
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin:5px 10px 0 0;
			}
						
			.serviceOff {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				width:121px;
				height:44px;
				cursor: pointer !important;
			}
			.serviceOn {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				width:121px;
				height:44px;
				background-image: url(../images/selectedOutline.jpg);
				background-repeat:no-repeat;
				cursor: pointer !important;
			}			
			.clientName {
				display:block;
        		position:relative;
        		float:left;
				margin:15px 10px 10px 10px;
			}
			
			.aimIconLarge {
				display:block;
        		position:relative;
        		float:left;
				background-image: url(../images/aimIconLarge.png);
				background-repeat:no-repeat;
				width:26px;
				height:26px;
				margin:8px 5px 5px 20px;
			}
			
			.msnIconLarge {
				display:block;
        		position:relative;
        		float:left;
				background-image: url(../images/msnIconLarge.png);
				background-repeat:no-repeat;
				width:31px;
				height:30px;
				margin:6px 3px 3px 17px;
			}
			
			.yahooIconLarge {
				display:block;
        		position:relative;
        		float:left;
				background-image: url(../images/yahooIconLarge.png);
				background-repeat:no-repeat;
				width:32px;
				height:21px;
				margin:11px 2px 7px 17px;
			}
			
			.gmailIconLarge {
				display:block;
        		position:relative;
        		float:left;
				background-image: url(../images/gmailIconLarge.png);
				background-repeat:no-repeat;
				width:32px;
				height:27px;
				margin:8px 2px 4px 17px;
			}
			
			#loginForm {
				display:block;
        		position:relative;
        		float:left;
				margin:10px 0 0 66px;
			}
			
			#messengerLogo {
				clear:both;
				display:block;
        		position:relative;
        		float:left !important;
				margin:0 4px 2px 2px !important;
				padding:0 !important;
			}
			
			#username {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin:12px 0 0 0;
				padding:0;
			}				
			
			#userNameHeader, #passwordHeader {
				font-size:12px;
				margin-left:2px;
				margin-bottom:3px;
        		float:left;
			}
			
			#userNameInput, #passwordInput {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin-bottom:2px;
			}		
			
			#username_txt, #password_txt {
				padding-top:4px;
				font-size:16px;
				width:310px;
				height:25px;
			}

			#password {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin:12px 0 0 0;
				padding:0;
			}

			#loginButton {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin:15px 0 0 -1px;
				padding:0;
				width:98px;
				height:29px;
				cursor: pointer !important;
			}
			
			#loginButton.buttonOff{
				background-image: url(../images/loginOff.jpg) !important;
			}		
			#loginButton.buttonOn{
				background-image: url(../images/loginOn.jpg) !important;
			}
			
			#disclaimerCopy {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin:25px 0 0 0;
				padding:0;
				width:250px;
			}	
			
			#statusMessage {
				clear:both;
				display:block;
        		position:relative;
        		float:left;
				margin-top:100px;
				padding:0;
			}	
			
			#callId {
				display:none;
			}
			
			#tokBoxContacts {
				display:block;
        		position:relative;
        		float:left;
        		padding:10px;
        		margin:10px;
        	}  
			
			#messengerLogin {
				display:none;
			}
			
			#step3LeftSide{
				display:block;
        		position:relative;
        		float:left;
			}
			#loadingContacts {
				top:125px;
				left:12px;
        		position:absolute;
				width:164px;
				height:51px;
				background-image: url(../images/loading.jpg);
				background-repeat: no-repeat;
        	} 
			#messengerContacts {
				display:block;
        		position:relative;
        		float:left;
        		margin:10px 0 0 40px;
				width:211px;
				height:341px;
				background-image: url(../images/buddyBackground.jpg);
				background-repeat: no-repeat;
        	}  	
			
			#contactsHeader {
				float:left;
				font-weight: bold;
				margin:13px 0 5px 13px;
			}
			#contactsHeader.empty {
				font-weight: bold;
				width:150px;
				margin:50px 0 5px 20px;
			}
			
			#contactList {
				float:left;
				height:298px;
				width:185px;
				margin:0 0 5px 13px;
				overflow-x: hidden; 
				overflow-y: scroll;
			}
			
			#contactList .contactItem {
				position:relative;
				float:left;
			}
			
			#contactList .contactOff {
				position:relative;
				float:left;
				font-size:11px;
				font-weight:bold;
				width:168px;
				height:22px;
				margin:0;
				padding:0;
				display:block;
				color:#000000;
				text-decoration:none;
				border-top: thin solid #eaeded;
				background-color:#FFFFFF;
				cursor: pointer !important;
			}
			
			#contactList .contactOn {
				position:relative;
				float:left;
				font-size:11px;
				font-weight:bold;
				width:168px;
				height:22px;
				margin:0;
				padding:0;
				display:block;
				text-decoration:none;
				border-top: thin solid #eaeded;
				color:#FFFFFF !important;
				background-color:#6bc4e5 !important;
				cursor: pointer !important;

			}

			#contactList .name {
				position:relative;
				float:left;
				font-size:11px;
				font-weight:bold;
				margin:4px 0 3px 5px;
				padding:0;
			}
			
			.aimIconSmall {
				float:right;
				width:14px;
				height:14px;
				margin:4px 10px 4px 9px;
				padding:0;
				background-image: url(../images/aimIconSmall.png);
				background-repeat: no-repeat;
			}		
			
			.msnIconSmall {
				float:right;
				width:14px;
				height:14px;
				margin:4px 10px 4px 9px;
				padding:0;
				background-image: url(../images/msnIconSmall.png);
				background-repeat: no-repeat;
			}				
			
			.yahooIconSmall {
				float:right;
				width:21px;
				height:14px;
				margin:4px 5px 4px 5px;
				padding:0;
				background-image: url(../images/yahooIconSmall.png);
				background-repeat: no-repeat;
			}
			
			.gmailIconSmall {
				float:right;
				width:17px;
				height:14px;
				margin:4px 9px 4px 7px;
				padding:0;
				background-image: url(../images/gmailIconSmall.png);
				background-repeat: no-repeat;
			}
			
			#step3RightSide{
				display:block;
        		position:relative;
        		float:left;
				margin:0 0 0 0;
			}
			
			#videoImage {
				clear:both;
				display:block;
				float:left;
				position:relative;
				width:220px;
				height:170px;
				margin:15px 0 0 40px;
			}
			
			#videoImage.Fred {
				background-image: url(../images/Fred.jpg);
				background-repeat: no-repeat;
			}
			
			#videoImage.Rob {
				background-image: url(../images/Rob.jpg);
				background-repeat: no-repeat;
			}
			
			#videoText {
				clear:both;
				display:block;
				float:left;
				position:relative;
				width:260px;
				padding:0 20px 0 20px;
				text-align:center;
				margin:10px 0 0 0;
			}
			#sendAlertButton {
				clear:both;
				display:block;
				float:left;
				position:relative;
				width:216px;
				height:36px;	
				margin:18px 0 0 42px;
				background-repeat:no-repeat;
				cursor: pointer !important;
			}
			
			#sendAlertButton.buttonOff{
				background-image: url(../images/alertButtonOff.jpg) !important;
			}	
			
			#sendAlertButton.buttonOn{
				background-image: url(../images/alertButtonOn.jpg) !important;
			}	
			#step4LeftSide{
				display:block;
        		position:relative;
        		float:left;
			}
			#chatHeader {
				clear:left;
				float:left;
				margin:5px 0 0 50px;
			}
			#chatWindow {
				clear:left;
				display:block;
        		position:relative;
        		float:left;
        		margin:0 0 0 40px;
				width:215px;
				height:341px;
				background-image: url(../images/chatWindow.jpg);
				background-repeat: no-repeat;
        	}  	
			#chatHistory {
				clear:left;
				float:left;
				height:263px;
				width:185px;
				margin:10px 0 5px 15px;
				overflow-x: hidden; 
				overflow-y: scroll;
				font-family:Arial; 
        		font-size:11px;
			}			
			
			#chatHistory .yourself {
				color:#6bc4e5;
				font-weight:bold;
			}	
			
			#chatHistory .yourfriend {
				color:#fe0002;
				font-weight:bold;
			}	
			
			#message {
				margin:2px 0 0 11px;
				height:51px;
				width:187px;
				border-style:none;
				overflow-x: hidden; 
				overflow-y: none;
        		font-family:Arial; 
        		font-size:12px;
			}
			#step4RightSide{
				width:255px;
				display:block;
        		position:relative;
        		float:left;
				margin:0 0 0 30px;
			}
			
			#success {
				margin:20px 0 0 0;
			}
			#startOverButton {
				clear:both;
				display:block;
				float:left;
				position:relative;
				width:147px;
				height:37px;	
				margin:18px 0 0 0;
				background-repeat:no-repeat;
				cursor: pointer !important;
			}
			
			#startOverButton.buttonOff{
				background-image: url(../images/startAgainOff.jpg) !important;
			}	
			
			#startOverButton.buttonOn{
				background-image: url(../images/startAgainOver.jpg) !important;
			}	
			
			#messageComposer {
				display:none;
        		position:relative;
        		float:right;
        		padding:10px;
        		margin:10px;
        		border: thin solid #B7CBE3;
			}
			
			#messagesReceived {
				float:right;
				width:400px;
				display:none;
        		position:relative;
        		padding:10px;
        		margin:10px;
        		border: thin solid #B7CBE3;
			}
			
			#messagesHeader {
				font-weight: bold;
				margin-bottom:5px;
			}
			
			.message {
				clear:both;
			}