@charset "utf-8";
#TimeWallContainer{
	background:#F4FAED; 
}
#TimeWallFAQ{
	background:#F4FAED; color:#5E6F61; padding:5px; font-size:11px;
}
#FAQTitle{
	color:#5E6F61; font-weight:bold;
}
#FAQNavigate{
	float:right; margin-right:10px;
}
#FAQNavigate div{
	float:left; margin-left:10px;
}
.TimeWallFAQButtons{
	float: left;
}

#TimeWall{					/* NOTE! Border will affect positioning of zoom buttons. Border not to be used in css files*/
	position:relative;  margin: 0px auto;	overflow:hidden;	
}
#TimeWall #Anchor{
	position:absolute; z-index:2;
}

#TimeWall #TimeWallLogoOpen{position: absolute; left:245px; top:5px; font-size:16px; color:#5E6F61; vertical-align: top; font-weight:bold; z-index:4;}
#TimeWall #TimeWallLogoClose{position: absolute; left:44px; top:5px; font-size:16px; color:#5E6F61; vertical-align: top; font-weight:bold; z-index:4;}
#TimeWall #CustomiseLink{ cursor:pointer; font-size:11px; font-weight:normal; margin-left:5px;	}
#TimeWall #TotalEventsDisplayOpen{position:absolute; top:23px; left:246px;color:#5E6F61; font-size:11px;  z-index:3;}
#TimeWall #TotalEventsDisplayClose{position:absolute; top:23px; left:45px;color:#5E6F61; font-size:11px;  z-index:3;}

#TimeWall #MaxEventDisplay{position:absolute;bottom:30px; right:15px; color:#F4FAED;  font-size:11px;  z-index:3;}
#TimeWall #TimeWallLoadingImage{
	position:absolute; right:0px; z-index:4; visibility: hidden; display:none;
}
#TimeWall #TimeWallBackground{
	position:absolute; z-index:0;
}
#TimeWall #ZoomMsgClose{
	position:absolute; text-align:center;top:10px; font-weight:bold; width:960px; left:0px;
}
#TimeWall #ZoomMsgOpen{
	position:absolute; text-align:center;top:10px; font-weight:bold; width:720px; left:240px;
}
#TimeWall #LeftPanel{
	position: absolute; z-index: 10; width:240px; 
}
#TimeWall #Panel{position:relative;width:197px; background:#F4FAED; cursor:default; padding:2px; height:496px; overflow-y: auto; overflow-x:hidden; }
#TimeWall #Panel.open{border-right:2px solid #C1CCB5;}
#TimeWall #Panel.close{border-right:0px;}

#TimeWall #Panel #EventResults{
	margin-top:10px;
}
#TimeWall #Panel #EventsWithinWindowTxt{
	margin-top:10px; 
}
#TimeWall #Panel #WindowDateRange, #OtherRange{
	font-size:11px; margin-top:20px; font-weight:bold;
}
#TimeWall #Panel .previewContainer{
	margin-top:20px; color:#5E6F61;
}
#TimeWall #Panel .previewDt{
	float:right; margin-right:2px; padding-left:5px; font-size:9px; font-weight:bold;
}

#TimeWall #Panel .previewContent{
	margin-top:5px;
}
#TimeWall #Panel .labelsSentence{
	clear:left; padding-top:5px;
}
#TimeWall #Panel #PanelBottom{
	margin-top:20px; float:right; margin-right:20px;
}
#TimeWall .panelButtons{
	cursor:pointer; position:relative; left:2px; top:2px;
}

/* Terminating Band Classes */
#TimeWall #TerminatingBand{
	position:absolute; height:500px;  width:720px;  background-color:#5E6F61; z-index:2;  border-left:2px solid #FFFFFF;
	filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3;
}
#TimeWall #TerminatingBand div{
	position: absolute;  top:40px;	/*height - 12px;*/ 	padding-left: 2px; color: #FFFFFF; font-weight:bold; 		
}
/* Scroll Controls classes */
#TimeWall #ScrollControls{
	position:relative; z-Index:4; top:48px;
}
#TimeWall #ScrollLeftOpen{position:absolute; cursor:pointer; left:245px;}
#TimeWall #ScrollLeftClose{position:absolute; cursor:pointer; left:45px;}
#TimeWall #ScrollRightOpen{position:absolute; cursor:pointer; left:285px;}
#TimeWall #ScrollRightClose{position:absolute; cursor:pointer; left:85px;}

/* Zoom Controls classes */
#TimeWall #ZoomControlsOpen{position:relative; z-Index:4; left:245px;}
#TimeWall #ZoomControlsClose{position:relative; z-Index:4; left:44px;}
#TimeWall #ZoomInBtn{top:72px; position:absolute;}
#TimeWall #ZoomOutBtn{top:229px; position:absolute;}
#TimeWall #ZoomBarContainer{position:absolute;top:88px;margin-left:2px;}
#TimeWall #ZoomBarContainer div{position:absolute; cursor:pointer;}

#TimeWall #ActivateZoomBtn{
	position:absolute; top: 20px; right:120px; cursor:pointer;  z-Index:4;
}
/*Add Event classes*/
#TimeWall #AddEventArrow{
	position:absolute; top:5px; right:125px;  z-Index:4;
}
#TimeWall #AddEventButton{
	position:absolute; top:5px; right:38px; cursor:pointer;  z-Index:4;
}
#TimeWall #Gridbackground{
	position:absolute; top:474px; left:0px; z-Index:2; width:720px; background:#DDDFD1; height:26px; border:1px solid #C1CCB5;
}
/* MajorDisplay classes */
#TimeWall #MajorDisplayClose{
	position:relative; top:440px; left:45px; z-Index:2; display:none; visibility:hidden;
}
#TimeWall #MajorDisplayOpen{
	position:relative; top:440px; left:245px; z-Index:2; display:none; visibility:hidden;
}
#TimeWall #MajorDisplayTxt{
	position:absolute; left:0px; padding-left:8px; width:30px; top:2px; font-size:11px; line-height:12px;
}
#TimeWall #MajorDisplayImg{
	position:absolute; left:0px;
}
/*grid classes defining the timewall grid */
.grid {
	position:absolute;  border:0px solid;  height:500px;  width:80px; color: #5E6F61;
}
.grid div{
	position: absolute; top:487px;	font-size:11px; /*height - 14px;*/border-left: 1px solid #819284;padding-left: 2px;
}
.grid div.major{
	top:475px; font-size:10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:bold;
}
.grid div.event{
	border-left: 0px solid; cursor: pointer; 
}
.grid div.eventBg{
	position:absolute; top:0px; padding:0px;  height:52px; width:70px; 
	/*filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;*/
} 
.grid div.eventBg_Multiple{
	position:absolute; top:0px; padding:0px;  height:48px; width:65px; 
	/*filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;*/
}

.grid div.eventBg_Multiple2{
	margin-left:7px; margin-top:6px; position:absolute; top:0px; padding:0px;  height:48px; width:65px; 
	/*filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;*/
}

.grid div #eventIcon{
	position:absolute; top:0px; border: 0px; padding:4px; 	
}
.grid div #eventIcon_Multiple{
	margin-left:7px; margin-top:6px; position:absolute; top:0px; border: 0px;  padding:2px;
}
.grid div #eventIcon_Words_Multiple{
	margin-left:7px; margin-top:6px; width:65px; height:48px; position:absolute; top:0px; border: 0px;  padding:2px; 	
}
.grid div #eventTxt_Multiple{
	font-family:Arial; color:#000000;	 
	margin-top:2px; padding-top:2px;
	position:absolute; top:0px; padding-left:0px; border:0px; width:65px; height:46px; font-size:10px; overflow:hidden;
}


.grid div #eventIcon_Words{
	position:absolute; top:0px; border: 0px; padding:4px; 	
}
.grid div #eventTxt{
	font-family:Arial; color:#000000;
	margin-top:4px; 
	position:absolute; top:0px; border:0px; padding:3px; width:64px; height:46px; font-size:10px; overflow:hidden;
}
.grid div.eventCount{
	position:absolute; top:0px; width:25px; color: #FFFFFF; left: 0px; border-left: 0px solid; z-index:2; margin-left:2px;
}
/* Balloon Summary classes */
#SummaryBalloon{
	 position:absolute; z-Index:4;visibility:hidden; display:none; cursor:default;
}
#SummaryBalloon .balloonBackground{
	position:absolute;
}
#SummaryBalloon .balloonPointer{
	position:absolute;
}
#SummaryBalloonContent{
	position:absolute; width:575px;  margin-left:10px; margin-top:5px;
}

/* Summary Balloon Header classes */
#SummaryBalloonHeader{
	width:500px;  text-align:left;padding-left:5px; 
}

#SummaryBalloonHeader #SummaryBalloonMood{
	padding-bottom:5px;
}

#SummaryBalloonHeader #SummaryBalloonMood #MoodDescription{
	margin-right:3px; font-weight:bold;
}
#SummaryBalloonHeader .navigationBar{
	float:right;  width:200px; text-align:right;
}
/* Summary Balloon Content classes */
#SummaryBalloonContentMainDiv {
	  clear:left;  height:330px; overflow-y:auto; overflow-x:hidden;
} 

.SummaryBalloonContentTbl .eventDescription{
	padding-left:20px; margin-top:5px; padding-right:10px;
}

.SummaryBalloonContentTbl .eventTitle{
	font-weight:bold;
}
.SummaryBalloonContentTbl .labelsSentence{
	margin-top:5px;
}
.SummaryBalloonContentTbl .LinkContainer{
	text-align:right; margin-right:10px; margin-top:5px;
}
.SummaryBalloonContentTbl .eventEditDate{
	margin-left:10px; color:#A8B6B9; font-size:10px;
}
.SummaryBalloonContentTbl .eventPrivacy{
	font-size:10px; color:#A8B6B9; float:left; margin-left:20px;
}

/* Detailed Balloon  Class*/
#DetailedBalloon{
	position:absolute; z-Index:4;  cursor:default; line-height:18px; font-size:12px; visibility:hidden; display:none; 
}
#DetailedBalloon .balloonBackground{
	position:absolute; 
}
#DetailedBalloon .balloonPointer{
	position:absolute;
}
#DetailedBalloon #DetailedBalloonContent{
	position:absolute;top:0px; left:10px; width:610px;  margin-top:5px; 
}
/* Detailed Balloon Header Class*/

#DetailedBalloonHeader #EventTitle{
	font-weight:bold;
}
#DetailedBalloonHeader #EditDate{
	margin-left:10px; font-weight:normal; font-size:10px; font-style:italic; color:#A8B6B9;
}

#DetailedBalloonHeader #EventOptions{
	float:right; margin-right:5px;
}
#DetailedBalloonHeader #EventOptions a{
	margin-left:5px; font-size:11px; float:left;
}

#DetailedBalloonHeader .Buttons{
	float:right; margin-right:5px; cursor:pointer;
}
#DetailedBalloonHeader #PrevNextBtnContainer{
	clear:right; float:right; margin-right:5px;
}

#DetailedBalloonHeader #Privacy{
	font-size:10px;  float:left; margin-right:10px;
}
#DetailedBalloonHeader #PrevBtn{
	cursor:pointer; float:left; margin-right:10px; margin-top:2px;
}
#DetailedBalloonHeader #NextBtn{
	cursor:pointer; float:left; margin-top:2px;
}



/* Detailed Balloon Main Div classes*/
#DetailedBalloonMainDiv{
	clear:left; margin-left:5px; overflow:auto; height:410px; margin-top:10px; position:relative;
}
#DetailedBalloonMainDiv #CreatorVersion,#InviterVersion{
	font-weight:bold; color:#5E6F61;
}
#DetailedBalloonMainDiv #CreatorDate,#InviterDate{
	margin-left:5px; font-weight:normal; font-size:10px; font-style:italic;
}
#DetailedBalloonMainDiv #CreatorPicControl,#InviterPicControl{
	float:left; margin-right:10px; text-decoration:none;	
}
#DetailedBalloonMainDiv #CreatorPic,#InviterPic{
	float:left; padding-right:5px;
}
#DetailedBalloonMainDiv #CreatorMood,#InviterMood{
	margin-bottom:5px; font-style:italic;
}
#DetailedBalloonMainDiv #Tabs div{
	margin-right:10px; padding: 0px 5px 0px 5px; color:#A8B6B9;  float:left;
	border-left: 2px solid #A8B6B9; border-top: 2px solid #A8B6B9; 
	border-right: 2px solid #A8B6B9; cursor:pointer; height:20px; z-index:6;
}
#DetailedBalloonMainDiv #Tabs .selected{
	font-weight:normal; background: #A8B6B9; color:#FFFFFF;
}
#DetailedBalloonMainDiv #Tabs .mouseover{
	font-weight:normal; background: #F4FAED; color:#A8B6B9;
}
#DetailedBalloonMainDiv .DetailedBalloonTabContainer{
	border: 2px solid #A8B6B9;  width:450px;  clear:left; vertical-align:top; min-height:200px; height:auto !important; height:200px;
}

#DetailedBalloonMainDiv #ParticipantPreviewListHeader,#GroupListHeader{
	margin-top:15px; font-size:11px; clear:left;
}
#DetailedBalloonMainDiv .labelsPlaceHolder{
	font-size:11px;padding-right:5px;
}
#DetailedBalloonMainDiv #PictureNavigation,#ParticipantNavigation,#VideoNavigation{
	width:450px;
}
#DetailedBalloonMainDiv #ParticipantPreviewList,#GroupList{
	padding:1px; width:120px;  
}

#DetailedBalloonMainDiv .participantMood{
	font-style:italic;
}
#DetailedBalloonMainDiv .DescriptionContainer{
	padding-right:5px;
}
#DetailedBalloonMainDiv .videoAddedBy{
	color:#5E6f61; font-size:11px; margin-left:5px;
}
#DetailedBalloonMainDiv .videoDate{
	float:right; color:#A8B6B9; font-size:11px;
}

/*Picture classes*/
.Picture img{
	border: 1px solid #A8B6B9; padding:4px; background:#FFFFFF; cursor:pointer;
}

/*Participant Preview classes */
.ParticipantPreview{
	width:60px; vertical-align:top;
}
.ParticipantPreview div{
	font-size:9px;
}

.ParticipantCommentsPreview{
	 overflow-y:hidden;	width:380px; font-size:11px;
}
.CommentDate{
	color:#A8B6B9; font-size:10px;
}
.CommentsPreview{
	 overflow-y:hidden;	width:380px; text-align:left;
}
.ExpansionLinkContainer{
	float:right; margin-left:5px;	
}			

/* Zoom Animation classes*/
#ZoomAnimation{
	position:absolute; visibility:hidden; /*display:none;*/
}


