/* Widget Container (one per page, contains one header and widgets)*/

.MACEwidgetContainer {
	background:	url(../img/gradient_bg.gif) repeat-x #eae7e1;
	width:29.5em;
	height:auto;
	padding:0.5em;
	/* important: all widgets have to be positioned relative! - otherwise the overlays could not work!*/
	position:relative;
}

.MACEwidgetContainer .header {
	
	background: #FFF url(../img/mace_grey_web.gif) no-repeat .5em 0em;
	
	font-size: 1.2em;
	font-weight: normal;
	color: #60A3CA;
	text-transform: uppercase;
	
	margin-bottom:.5em;
	padding-top: 11px;
	padding-right: 1em;
	padding-left: 65px;
	padding-bottom: 0.1em;
	
	
}
/* Widget (contains header and widget components)*/

.MACEwidget {
	margin-bottom:1em;
	border: 1px solid #777;
}

.MACEwidget .widgetHeader{
	background: #666666 url(../img/widget_header_expanded.gif) repeat-x center;
	padding-left:8px;
}

.MACEwidget .widgetHeader, .MACEwidget .widgetHeader a{
	color: #FFF;
}



/* Widget Component (used for grouping blocks in widget) */

.MACEwidgetComponent {
	background: #fff url(../img/shadow_top.gif) repeat-x;
	border-top:1px solid;
	border-color:#ccc;
	margin: 0;
	padding: 0.5em;
	clear:both;
}

.MACEwidgetComponent .componentHeader {
	color: #666;
	/* text-transform: uppercase; */
	margin: .25em 0em;
	font-weight: bold;
}

/* Tabs used in timeline and map widget */

.widgetTab{
	margin-right:10px;
	color:#555;
	padding: 2px 5px;
}

.widgetTab.active{
	color:#333;
	font-weight:bold;
	background:#DDD;
}

  /* WIDGET EDIT MODE */
  
  .editMode .editBar{
  	background:#444;
  	border-color:#222;
  }
  
  /* hidden, unless in editMode container! */
  
  .editMessage{
  	display:none;
  }
  
  .editMode .editMessage{
  	display:block;
  	color: #a8a8a8;
  	font-weight: bold;
  	padding: 5px 0px 0px 3px;
  }
  
  /* hidden, unless in editMode container! */
  
  .editHelpMessage{
  	display:none;
  	font-size:.85em;
  	color:#EEE;
  	background:#222;
  	padding:.25em .25em .15em 8px;
  }
  
  .editMode .editHelpMessage{
   	display:block;  
  }
  
  /* hidden, unless in editMode container! */
  
  button.leaveEditMode{
  	display:none !important;
  	float:right;
  }
  
  .editMode button.leaveEditMode{
  	display:block !important;
  }
  
  /* shown, unless in editMode container! */
  
  button.enterEditMode{
  	display:block !important;
  	float:right;
  }
  
  .editMode button.enterEditMode{
  	display:none !important;
  }