/**
 * Styling for the widget
 * 
 * HTML Example: 
 * 	<div class="widget">
 *		<div class="top"><h2>Widget Title</h2></div>
 *		<div class="body">
 *			Widget Body
 *		</div>	
 *	</div>
 *  
 * Author: Tim
 */

/*
 * Widget container, holds all the corners and content  
 */
div.inactive_widget,
div.widget {	
	width: auto;
	float: left;	
	margin: 0px 20px 20px 0px;
	background: url('../../../public/img/web/v2/widget_body_right.png') no-repeat bottom right;
}

div.widget div.old_tip {
	position: absolute;
	margin-left: -7px;
	margin-top: 30px;
	width: 8px;
	height: 15px;
	background: url('../../../public/img/web/v2/widget_tip.png') no-repeat top left;
}

div.widget div.tip {
	left: -9px; 
	top: 0px; 
	width: 5px; 
	height: 0px; 
	position: relative; 
	z-index: 2;
}


	div.widget div.tip s {
		border-style: solid; 
		border-color: transparent rgb(154, 152, 152); 
		top: 1px; 
		display: block; 
		position: relative;
	}
		div.widget div.tleft s {
			border-width: 8px 9px 8px 0px; 
		}
		div.widget div.tright s {
			border-width: 8px 0px 8px 9px; 
		}
		div.widget div.tbottom s {
			border: 9px solid transparent;
			border-top-color: rgb(154, 152, 152);;
		}
		div.widget div.ttop s {
			border: 9px solid transparent;
			border-bottom-color: rgb(154, 152, 152);
		}

div.widget div.tip i {
	border-style: solid; 
	border-color: transparent rgb(154, 152, 152); 
	top: 1px; 
	display: block; 
	position: relative;
}
	div.widget div.tleft i {
		border-right-color: rgb(255, 255, 255);
		border-width: 8px 9px 8px 0px; 
		left: 1px; 
		top: -15px; 
	} 
	
	div.widget div.tright i {
		border-left-color: rgb(255, 255, 255);
		border-width: 8px 0px 8px 9px; 
		left: -1px; 
		top: -15px; 
	} 
	div.widget div.tbottom i {
		border: 9px solid transparent; 
		border-top-color: rgb(255, 255, 255);
		left: 0px; 
		top: -18px; 
	} 
	div.widget div.ttop i {
		border: 9px solid transparent; 
		border-bottom-color: rgb(255, 255, 255);
		left: 0px; 
		top: -16px; 
	}


div.inactive_widget {
	background: url('../../../public/img/web/v2/widget_body_right_inactive.png') no-repeat bottom right;	
}
	div.inactive_widget div.top,
	div.widget div.top {	
		background: url('../../../public/img/web/v2/widget_top_right.png') no-repeat top right;
	}
	div.widget div.top a {
		text-decoration: none;
	}
	div.widget div.top a span {	
		color: #3c93dd;
		text-decoration: none;	
		line-height: 26px;
		padding-right: 3px;
	}
		div.widget div.top a:hover span {	
			text-decoration: underline;
		}
	div.widget div.top span.close {
		float: right;
		margin: 5px 10px 0px 10px;			
	}
		span.close a {
			display: block;
			width: 16px;
			height: 16px;
			background: url('../../../public/img/icons/cross-gray.png') no-repeat top left;	
		}
		span.close a:hover {
			background: url('../../../public/img/icons/cross-white.png') no-repeat top left;	
		}
	
	div.inactive_widget div.top {
		background: url('../../../public/img/web/v2/widget_top_right_inactive.png') no-repeat top right;
	}
		div.inactive_widget div.top img,
		div.widget div.top img {
			float: left;
			padding: 4px;
		}
		
		div.inactive_widget div.top h2,
		div.inactive_widget div.top h3,
		div.widget div.top h2,
		div.widget div.top h3 {			
			height: 27px;
			background: url('../../../public/img/web/v2/widget_top_left.png') no-repeat top left;
			margin: 0px;
			padding: 0px 20px 0px 10px;
			line-height: 25px;
			font-size: 14px;
			color: #3c93dd;
			font-weight: bold;
			white-space:nowrap;
			cursor: default;
		}
		div.inactive_widget div.top h2,
		div.inactive_widget div.top h3 {
			color: #9dc9ee;
			font-weight: normal;
			background: url('../../../public/img/web/v2/widget_top_left_inactive.png') no-repeat top left;
		}
		
	
	div.inactive_widget div.body,
	div.widget div.body {		
		background: url('../../../public/img/web/v2/widget_body_left.png') no-repeat bottom left;
		overflow: hidden;
		padding: 5px 10px 10px 10px;
	}
	div.inactive_widget div.body {
		
		background: url('../../../public/img/web/v2/widget_body_left_inactive.png') no-repeat bottom left;
	}
		div.inactive_widget div.body a,
		div.widget div.body a {
			color: #3c93dd;
			text-decoration: none;	
		}		
			div.inactive_widget div.body a:hover,
			div.widget div.body a:hover {
				text-decoration: underline;	
			}
			
div.body ul {
	margin: 0px;
	padding: 0px;
}
	div.body ul li {
		list-style: none;		
	}
	
div.collapsed > div.body {
	height: 3px;
	padding: 0px;
}

div.collapsed > div.top h3,
div.collapsed > div.top {
	height: 26px;
}