@import url("http://www.thebahaicalendar.org/css/reset.css");

	HTML, BODY {
		height: 100%;
		overflow: hidden;		
		border: none;
		margin: 0;
		padding: 0;				
	}
	BODY { background-color: transparent; }
	IMG { display: inline; margin: 0; vertical-align: middle !important; }
	DIV.ThreeColumnContainer { width: 100%; float: left; }
	DIV.ThreeColumnContainer DIV.column {
		float: left;
		width: 32%;
		}
	DIV.ThreeColumnContainer DIV.middle { text-align: center; }
	DIV.ThreeColumnContainer DIV.right { text-align: right; }
							
	DIV.content-wrapper { 
		width: 100%; 
		height: 100%; 			
		margin: 0; 
	}
	DIV.calendar-wrapper { 
		visibility: hidden;

		height: 100%; 				
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: .9em;
	}
	DIV.calendar-header { 
		position: relative;
		width: 100%;
		height: 24px;
		padding: .125em .5% 0 0;
		margin: .25em 0;
		}
		DIV.calendar-header DIV.column { 
			position: absolute;
			width: 33%; 
		}
		DIV.calendar-header DIV.left { width: 35%; left: 0; text-align: center; }
		DIV.calendar-header DIV.middle { width: 28%; left: 33%; text-align: center; }
		DIV.calendar-header DIV.right { width: 33%; left: 66%; text-align: right; }
		DIV.calendar-header H1 SPAN {
			font-size: 85%; 
			font-weight: normal; 
			margin-left: .75em; 
		}

		DIV.calendar-header A {
			color: #555;
			font-weight: bold;
			text-decoration: none; 
		}
			DIV.calendar-header A.large-icon {
				display: block;
				float: left;
				
				width: 24px;
				height: 24px;
				background-repeat: no-repeat;
				
				text-indent: -999em;
				margin: -5px .5em 0 .25em;
			}
			DIV.calendar-header A.home { margin-left: .5em; background-image: url("http://www.thebahaicalendar.org/images/home-small-icon.png"); }

			DIV.calendar-header DIV.left H1,
			DIV.calendar-header DIV.left A.next-prev IMG { float: left;	margin-left: .5em; }
			DIV.calendar-header DIV.left H1 { margin-left: 0; }		
			DIV.calendar-header DIV.right H1,			
			DIV.calendar-header DIV.right A.next-prev IMG {	float: right;	margin-right: .5em; }
			DIV.calendar-header DIV.right H1 { margin-right: .5em; }		
				
	TABLE.calendar { 
		clear:both;
		
		width: 100%; 
		height: 80%; 
		
		background-color: #FFF;
		border-right: 1px solid #999;				
		border-top: 1px solid #999;				
		}
						
		TABLE.calendar TH { 
			vertical-align: middle;
						
			border-left: 1px solid #999; 
			border-bottom: 1px solid #999; 
			padding: .25em;
		}
		TABLE.calendar TH.first-th { border-left: 1px solid #999; }
		TABLE.calendar TH.last-th { border-right: 0; }
			TABLE.calendar TH ABBR { 
				display: block; 
				float: left; 
				font-weight: bold;
				margin-top: 0px !important; 
			}
			TABLE.calendar TH A { color: #333; text-decoration: none; float: right; }
				
		TABLE.calendar TD {
			height: 25%;
			width: 14.25%;
			border-left: 1px solid #999;
			border-bottom: 1px solid #999;
			padding: .25em;
		}			
		TABLE.calendar TD UL {
			clear: both;
			padding-top: .5em;
		}
		TABLE.calendar TD UL LI { color: #555; font-size: 80%; line-height: 125%; padding-top: .5em; }				
		
		/* used to show/hide date formats in JS */
		TABLE.calendar TD NOBR { display: none; }
		
		DIV.mini-cal-day { position: relative; }
		DIV.bahai-date { 
			position: absolute;
			right: 0;
			top: -.25em;
			
			width: 1.75em;
			
			color: #333;
			font-size: 95%;
			text-align: center;
									
			border-left: 1px solid #999;
			border-bottom: 1px solid #999;
								
			margin: 0 -.35em 0 0;	
			padding: .25em .0125em .4em .0125em;				
		}
		DIV.gregorian-date {
			font-size: 90%;
			color: #777;
		}
		
			.day-today { background-color: #fffab1; }			
			.day-today .bahai-date {
				background-color: #FFCE00;
				color: #333;
				font-weight: normal;
				
				margin: -1px -3px 0 0;
				}		
			.day-today H4 { font-weight: normal !important; }

		TABLE.calendar TR TD.gray-days { background-color: #EEE; }
		TABLE.calendar TR TD.gray-days A {
			display: block;
			width: auto;								
			height: 100% !important;
			text-decoration: none;
			text-indent: -999em;
			margin: 0 !important;
			padding: 0 !important;
			}
		TABLE.calendar TR TD.gray-days A IMG {
			display: none;
			}
			
			
		/* Mini Calendar Navigation */
		#divCalendarNav {
			position: relative;
			width: 100%;
			height: 20px;					
			margin: 5px 0 5px 0;
			}		
			#divCalendarNav A { 
				color: #00F;
				font-size: 90%;
				text-decoration: none;
			}
			#divCalendarNav A:hover,
			#divCalendarNav A:hover {
				text-decoration: underline; 
			}
											
		#divCalendarNav DIV.left {
			position: absolute;
			width: 25% !important;
			left: 0;
			padding-left: .25em;
			}
			
		#divCalendarNav DIV.middle {
			position: absolute;
			width: 60%;
			left: 20%;				
			text-align: center;
			
			padding-left: .5em;
			}
			
		#divCalendarNav DIV.right {
			position: absolute;
			width: 19%;
			left: 80%;					
			text-align: right !important;
			}
		
		/* mini-cal & FB Styles */						
		.holy-day { font-weight: bold !important; color: #555; }
		INS { text-decoration: none; }
		
		DIV.fb-intro { margin-bottom: 1em; }
		DIV.fb-intro H1 {
			font-weight: bold;
			font-size: 1.3em;
			margin: 0 0 1em 0;
			}
			
		DIV.fb-intro P {
			font-size: 9pt !important;
		}