/* Tooltips CSS definitions */	

.tooltip {
	position: absolute!important;
	overflow:hidden;
	font-size: 12px;
	z-index: 10000!important;
}
	.tooltip .xtop, .tooltip .xbottom { display: block; background: transparent; font-size: 1px; }
	.tooltip .xb1, .tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { display: block; overflow: hidden; }
	.tooltip .xb1, .tooltip .xb2, .tooltip .xb3 { height: 1px; }
	.tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { background: #666; border-left: 1px solid #333; border-right: 1px solid #333; }
	.tooltip .xbottom .xb2, .tooltip .xbottom .xb3, .tooltip .xbottom .xb4 { background: #666; }
	.tooltip .xb1 { margin: 0 5px; background: #333; }
	.tooltip .xb2 { margin: 0 3px; border-width: 0 2px; }
	.tooltip .xb3 { margin: 0 2px; }
	.tooltip .xb4 { height: 2px; margin: 0 1px; }

	.tooltip .xboxcontent {
		padding: 0 .5em;
		margin: 0;
		color: #000;
		border: 1px solid #333;
		border-width: 0px 1px 0 1px;
		background-color: #666;
	}
	
	/*text-shadow: 2px 2px 0px #CCC;
	word-wrap:break-word;*/
	
	#MB_overlay {
		position: absolute;
		margin: auto;
		top: 0;	left: 0;
		width: 100%; height: 100%;
		z-index: 9999;
		background-color: #000!important;
	}
	#MB_overlay[id] { position: fixed; }

	#MB_window {
		position: absolute;
		top: 0;
		border: 0 solid;
		text-align: left;
		z-index: 10000;
	}
	#MB_window[id] { position: fixed!important; }

	#MB_frame {
		position: relative;
		background-color: #EFEFEF;
		height: 100%;
	}

	#MB_header {
		margin: 0;
		padding: 0;
	}

	#MB_content {
		padding: 6px .75em;
		overflow: auto;
	}

	#MB_caption {
		font: bold 100% "Lucida Grande", Arial, sans-serif;
		padding: .5em 2em .5em .75em;
		margin: 0;
		text-align: left;
	}
	/*text-shadow: #FFF 0 1px 0;*/

	#MB_close {
		display: block;
		position: absolute;
		right: 5px; top: 4px;
		padding: 2px 3px;
		font-weight: bold;
		text-decoration: none;
		font-size: 13px;
	}
	#MB_close:hover {
		background: transparent;
	}

	#MB_loading {
		padding: 1.5em;
		text-indent: -10000px;
		background: transparent url('../../img/spinner.gif') 50% 0 no-repeat;
	}

	/* Color scheme */
	#MB_frame {
		padding-bottom: 7px;
	}
	/*-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border-radius: 7px;*/
	
	#MB_window {
		background-color: #EFEFEF;
		color: #000;
	}
	/*-webkit-box-shadow: 0 8px 64px #000; 
	-moz-box-shadow: 0 0 64px #000; 
	box-shadow: 0 0 64px #000;

	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px;
	border-radius: 7px;*/
	
	#MB_content { border-top: 1px solid #F9F9F9; }
	#MB_header {
	  background-color: #DDD;
	  border-bottom: 1px solid #CCC;
	}
	#MB_caption { color: #000 }
	#MB_close { color: #777 }
	#MB_close:hover { color: #000 }


	/* Alert message */
	.MB_alert {
		margin: 10px 0;
		text-align: center;
	}
	
	#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
	#lightbox img{ width: auto; height: auto;}
	#lightbox a img{ border: none; }

	#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
	#imageContainer{ padding: 10px; }

	#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
	#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
	#imageContainer>#hoverNav{ left: 0;}
	#hoverNav a{ outline: none;}

	#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
	#prevLink { left: 0; float: left;}
	#nextLink { right: 0; float: right;}
	#prevLink:hover, #prevLink:visited:hover { background: url(../../img/prevlabel.gif) left 15% no-repeat; }
	#nextLink:hover, #nextLink:visited:hover { background: url(../../img/nextlabel.gif) right 15% no-repeat; }

	#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

	#imageData{	padding:0 10px; color: #666; }
	#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
	#imageData #caption{ font-weight: bold;	}
	#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
	#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

	#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

	/* The main calendar widget.  DIV containing a table. */

	div.calendar {
	  position: relative;
	  z-index: 100;
	}

	.calendar, .calendar table {
	  border: 1px solid #cccccc;
	  font-size: 11px;
	  color: #000;
	  cursor: default;
	  background: #efefef;
	  font-family: arial,verdana,sans-serif;
	}

	/* Header part -- contains navigation buttons and day names. */

	.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
	  text-align: center;    /* They are the navigation buttons */
	  padding: 2px;          /* Make the buttons seem like they're pressing */
	}

	.calendar thead .title { /* This holds the current "month, year" */
	  font-weight: bold;      /* Pressing it will take you to the current date */
	  text-align: center;
	  background: #333333;
	  color: #ffffff;
	  padding: 2px;
	}

	.calendar thead .headrow { /* Row <TR> containing navigation buttons */
	  background: #dedede;
	  color: #000;
	}

	.calendar thead .name { /* Cells <TD> containing the day names */
	  border-bottom: 1px solid #cccccc;
	  padding: 2px;
	  text-align: center;
	  color: #000;
	}

	.calendar thead .weekend { /* How a weekend day name shows in header */
	  color: #dedede;
	}

	.calendar thead .hilite { /* How do the buttons in header appear when hover */
	  background: #bbbbbb;
	  color: #000000;
	  border: 1px solid #cccccc;
	  padding: 1px;
	}

	.calendar thead .active { /* Active (pressed) buttons in header */
	  background: #c77;
	  padding: 2px 0px 0px 2px;
	}

	.calendar thead .daynames { /* Row <TR> containing the day names */
	  background: #dddddd;
	}

	/* The body part -- contains all the days in month. */

	.calendar tbody .day { /* Cells <TD> containing month days dates */
	  width: 2em;
	  text-align: right;
	  padding: 2px 4px 2px 2px;
	}

	.calendar table .wn {
	  padding: 2px 3px 2px 2px;
	  border-right: 1px solid #cccccc;
	  background: #dddddd;
	}

	.calendar tbody .rowhilite td {
	  background: #666666;
	  color: #ffffff;
	}

	.calendar tbody .rowhilite td.wn {
	  background: #666666;
	  color: #ffffff;
	}

	.calendar tbody td.hilite { /* Hovered cells <TD> */
	  background: #999999;
	  padding: 1px 3px 1px 1px;
	  border: 1px solid #666666;
	}

	.calendar tbody td.active { /* Active (pressed) cells <TD> */
	  background: #000000;
	  color: #ffffff;
	  padding: 2px 2px 0px 2px;
	}

	.calendar tbody td.selected { /* Cell showing today date */
	  font-weight: bold;
	  border: 1px solid #000;
	  padding: 1px 3px 1px 1px;
	  background: #000000;
	  color: #ffffff;
	}

	.calendar tbody td.weekend { /* Cells showing weekend days */
	  color: #cccccc;
	}

	.calendar tbody td.today { font-weight: bold; }

	.calendar tbody .disabled { color: #999; }

	.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
	  visibility: hidden;
	}

	.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
	  display: none;
	}

	/* The footer part -- status bar and "Close" button */

	.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
	  text-align: center;
	  background: #cccccc;
	  color: #000;
	}

	.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
	  border-top: 1px solid #cccccc;
	  background: #efefef;
	  color: #000000;
	}

	.calendar tfoot .hilite { /* Hover style for buttons in footer */
	  background: #666666;
	  border: 1px solid #f40;
	  padding: 1px;
	}

	.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
	  background: #999999;
	  padding: 2px 0px 0px 2px;
	}

	/* Combo boxes (menus that display months/years for direct selection) */

	.combo {
	  position: absolute;
	  display: none;
	  top: 0px;
	  left: 0px;
	  width: 4em;
	  cursor: default;
	  border: 1px solid #655;
	  background: #ffffff;
	  color: #000;
	  font-size: smaller;
	}

	.combo .label {
	  width: 100%;
	  text-align: center;
	}

	.combo .hilite {
	  background: #fc8;
	}

	.combo .active {
	  border-top: 1px solid #cccccc;
	  border-bottom: 1px solid #cccccc;
	  background: #efefef;
	  font-weight: bold;
	}