body {
	margin: 0px;
}
body, td, th{
    font-family:  Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
body.zh-CN, .zh-CN td, .zh-CN th,
body.zh-TW, .zh-TW td, .zh-TW th,{
    font-family:  Microsoft YaHei,Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
table {
	border-collapse: collapse;
}
div.FinCalendar {
/*
	The Container for the FinCalendarObject itself, in essence controlls the with of the tool. (All CSS should be OK for this element)
*/
	width: 319px;
	border: 1px solid #CCCCCC;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
div.HeaderContainer {
/*
	The container element for the HeaderObject
*/
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-radius:0px \0/;
	background-color: #ededed;
   /* box-shadow: inset 0px 5px 5px 0px gainsboro;
	/*
		NB! - ALL of the above code (starding from [background-color]) is required for cross browser compadible CSS gradient!
	*/
	border-bottom: 1px solid #CCCCCC;
}
table.Header {
/*
	The Header Table for the FinCalendarObject
*/
	
	height: 21px;
}
div.CurrentValue {
/*
	In the HeaderObject, the current month marker
*/
	text-align: center;
	color: #8d8d8d;
	font-size: 1.2em;
	font-weight: 500;
}
td.Next,
td.Previous {
/*
	[td.Next] - In the HeaderObject, the container for the next-months link
	[td.Previous] -In the HeaderObject, the container for the previous-months link
*/
	padding: 0px 10px 0px 10px;
	text-align: center;
}
a.link {
/*
	The calendar moving links
*/	
	text-decoration: none;
	color: #ffffff;
}
td.Next a.link,
td.Previous a.link {
	color: #8d8d8d;
}
div.LegendColorBox {
/*
	The marker for the ColorBox in the legend.
	NOTE! - The [background-color] is set by the JS
*/
	width: 7px;
	height: 7px;
	border-radius: 5px;
	margin-left: 5px;
}
div.LegendContainer {
/*
	The LegendObject's container
*/
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	padding: 2px;
	padding-top: 2px;
	border-top: 1px solid #CCCCCC;
}
div.LegendContainer table {
/*
	 The legend Table it self
*/
	border-collapse: collapse;
	width: 100%;
}
div.LegendContainer table td {
/*
	The cell of the Legend Table, the TD element holds the color marker and the TD.LegendName holds the name of the legend Item.
*/
	border: 0px solid #333333;
}
div.LegendContainer td.LegendName {
/*
	The marker for the Legend Items name i.e. the text part of the legend
*/
	text-align: left;
	padding-left: 5px;
	
}

div.CalendarContainer {
/*
	The Container DIV for the CalendarObject
*/
	padding: 3px;
}
table.Calendar {
/*
	The actual calendar itself as a table.
	the TH elements are the weekday markers and the TD elements are the day cells 
*/
}
table.Calendar td.Day, 
table.Calendar th {
	width: 14.28%; /* (100% / 7) == ~14.28%  - in essence this gives equal distributation between the days*/
	line-height: 13px !important;
}
table.Calendar th {
	font-weight: normal;
}
table.Calendar td.Day {
	border: 1px solid #f7f7f7;
}
table.Calendar th {
	text-align: right;
	padding-right: 7px;
}
table.Calendar th.Weekend{
	color: #E60000;
}
div.Day {
/*
	The individual DayObject inside a day cell of the calendar
*/
	padding: 0px 0 0 0;
}
div.DateNumber {
/*
	The DIV inside the DayObject that holds the day's number
*/
	text-align:right;
	padding-right: 7px;
	
}
table.Calendar td.NotActive {
/*
	The Marker for a not active Day cell in the Calendar
*/
	color: #cccccc;
	background: #fafafa;
	color: #C8C8C8;
}
table.Calendar td.Weekend {
/*
	The Marker for a weekend Day cell in the Calendar
	NOTE! - The [.Weekend] class is also on the TH elements of the Calendar Object i.e. on the weekday markers
*/
	background: #e1e1e1;
	border-color: #fdfae7;
}
table.Calendar td.WeekendNotActive {
/*
	The Marker for a weekend Day cell in the Calendar on a day, that is not active i.e. not in the set month
*/
	background: #f1efe8;
}
td.Today {
/*
	The Marker for a today's cell in the Calendar
*/
	color: #ff0000;
}

table.Calendar td.HasEvents:Hover {
/*
	The [TD.HasEvents] is given to the individual cell buy it's DayObject, but only if it actually has any events on it.
*/
	background-color: #dddddd;
}
table.EventMarkers {
/*
	The Table inside a DayObject that holds the individual Event markers for set day.
*/
	float: right;
}
td.EventTypeMarker {
	padding: 2px 1px 2px 0px;
}
td.EventTypeMarker div {
/*
	The marker for the individual Event a day cell.
	NOTE! - The [background-color] is set by the JS
*/	
	width: 8px;
	height: 8px;
	border-radius: 4px;
}
div.Info {
/*
	The Container DIV for the HoverMessages
*/
	background: #ffffff;
	
	-webkit-box-shadow: 0px 0px 10px 3px #cccccc;
	-moz-box-shadow: 0px 0px 10px 3px #cccccc;
	box-shadow: 0px 0px 10px 3px #cccccc;
		
	border: 1px solid #cccccc;
	margin-left: 7px;
	margin-right: 7px;
}
html.IE7_8 div.Info {
	margin-left: 0px;
	margin-right: 0px;
}
div.QuickInfo {
/*
	The DIV container element into with the quick info is made
	PS! - The 100% width is needed for the Quick Info, because of IE6 & IE7 that otherwise do not give this div a width of 100% for some reason.
*/
	padding: 5px;
	width: 100%;
}
div.QuickInfo b {
/*
	The heading of the QuickInfo.
	NB! - Besides this tag there is only the "Click for more info..." text avalible.
*/
	color: #333333;
}
table.EventsHeading {
/*
	The Heading for the Events itself (holds the date) and the close button (if needed).
	The TH element holds the Events' Heading while the [TD.CloseButton] element holds the close Button
*/
	margin-bottom: 0px;
	width: 100%;
}
table.EventsHeading TH {
	width: 100%;
	text-align: left;
	color: #333333;
	padding: 10px 5px 5px 5px;
}
table.EventsHeading TD.CloseButton {
	padding-right: 5px;
}
table.EventsHeading TD.CloseButton input {
/*
	The Actuale close button element
*/
	background-color: #9e0b0f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#9e0b0f)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #ed1c24, #9e0b0f); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #ed1c24, #9e0b0f); /* FF3.6 */
    background-image:     -ms-linear-gradient(top, #ed1c24, #9e0b0f); /* IE10 */
    background-image:      -o-linear-gradient(top, #ed1c24, #9e0b0f); /* Opera 11.10+ */
    background-image:         linear-gradient(top, #ed1c24, #9e0b0f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ed1c24', EndColorStr='#9e0b0f'); /* IE6-IE9 */
	
	border: 1px solid #77080b;
	color: #ffffff;
	font-weight: bold;
	padding: 0px 5px 0px 5px;
	
}
div.Events {
/*
	The Container Element for all of the events that are displayed in the Hover info box
*/
	padding: 5px;
}
div.Event {
/*
	An individual event inside the [div.Events] element. The B element holds the event's heading while the P element holds the events text. Inside the B element there can also be a "I" (italic) element that holds aider the time of the event or the date range of the event.
*/
	background: #f3f3f3;
	border: 1px solid #dddddd;
	margin-bottom: 5px;
	padding: 5px;
}
div.Event b {
	color: #333333;
}
div.Event p {
	margin: 0px;
}
div.Event i {
	font-style: normal;
}
div.Footer {
/*
	The Events' Footer Eelement, holds the "Go to main tool" button
*/ 
	padding: 0px 5px 10px 5px;
}
div.Footer input {
/*
	The actuale "Go to main tool" button.
*/
	width: 100%;
	background: #969696;
	border: 1px solid #393939;
	color: #ffffff;
}