@media all /* HTML RESET */
{

	
	span[class|='infobubble'] {
		position: relative;
		text-decoration: none;
		vertical-align:top;	    
		margin-left: 5px;
		vertical-align: bottom;
	}
	
	/*span[class|='infobubble'] .glyphicon	{
		z-index:100;
		margin-top: 0;
		top: 0;
	}*/
	
	span[class|='infobubble'] .glyphicon,
	.alert .glyphicon-info-sign,
	span[class|='infobubble'] .fa,
	.alert .fa	{
		color: #00599B;	
		font-size: 15px;
	}
	
	span[class|='infobubble'] .fa-lock {
		color: #DE0101;	
		font-size: 16px;
		margin:3px;
	}
	
	
	
	span[class|='infobubble'] span {
		padding: 10px;
		font-size: 14px;
		font-weight:normal;
		z-index:600;
		
		/*background-image: -moz-linear-gradient(bottom, #81a8cb, #4477a1);  Firefox 3.6 */
		/*background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4477a1),color-stop(1,#81a8cb));  Safari & Chrome */
	  
		color: #FFFFFF;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;   
		
		position:absolute;
		word-wrap: break-word;
		-webkit-transition: all 0.4s; 
		   -moz-transition: all 0.4s; 
			-ms-transition: all 0.4s; 
			 -o-transition: all 0.4s; 
				transition: all 0.4s; 
		font-weight: normal;
	}
	
	span[class|='infobubble'] span:before {
		position: absolute;
		display: block;
		content: "";     
		border: 10px solid transparent;
		background: none repeat scroll 0 0 transparent;
	}
	
	/*Color*/
	span[class|='infobubble'] span{
		background-color: #81a8cb; 
		background: rgba(68,119,161,.8);
	}
	
	span.infobubble-top span:before	{
		border-top-color: #81a8cb;
		border-top-color: rgba(68,119,161,.8);
	}
	
	span.infobubble-bottom span:before	{
		border-bottom-color: #81a8cb;
		border-bottom-color: rgba(68,119,161,.8);
	}
	
	span.infobubble-right span:before	{
		border-left-color: #81a8cb;
		border-left-color: rgba(68,119,161,.8);
	}
	
	span.infobubble-left span:before	{
		border-right-color: #81a8cb;
		border-right-color: rgba(68,119,161,.8);
	}
	/*End of Color*/
	
	
	span[class|='infobubble'] span ,
	span[class|='infobubble']:hover span:before {
		opacity: 0; 		
		visibility: hidden;
	}
	

	span[class|='infobubble']:hover span,
	span[class|='infobubble']:hover span:before,
	span[class|='infobubble'].always span,
	span[class|='infobubble'].always span:before	{
		opacity: 1; 
		visibility: visible;
	}	
	
	
	/*size*/
	span[class|='infobubble'] span { 
		width: 400px;	
		left:-200px;
	}
	
	span[class|='infobubble'].medium span { 
		width: 300px;	
		left:-150px;
	}
	
	span[class|='infobubble'].small span { 
		width: 200px;	
		left:-100px;
	}
	

	/*TOP*/
	span.infobubble-top span	{
		bottom: 100%;
		top: inherit;
		margin-bottom: 12px;
		
		box-shadow:         0px -2px 6px 0px rgba(50, 50, 50, 0.44);
		-webkit-box-shadow: 0px -2px 6px 0px rgba(50, 50, 50, 0.44);
		-moz-box-shadow:    0px -2px 6px 0px rgba(50, 50, 50, 0.44);
		-khtml-box-shadow:  0px -2px 6px 0px rgba(50, 50, 50, 0.44);
	}
	
	span.infobubble-top  span:before {
		left:50%;
		top: 100%;
		margin-left: -1px;
	}
	
	/*BOTTOM*/
	span.infobubble-bottom span	{
		top: 100%;
		margin-top: 8px;
		
		box-shadow:         0px 2px 6px 0px rgba(50, 50, 50, 0.44);
		-webkit-box-shadow: 0px 2px 6px 0px rgba(50, 50, 50, 0.44);
		-moz-box-shadow:    0px 2px 6px 0px rgba(50, 50, 50, 0.44);
		-khtml-box-shadow:  0px 2px 6px 0px rgba(50, 50, 50, 0.44);
	}
	
	span.infobubble-bottom span:before {
		margin-left: -1px;
		bottom: 100%;
		left:50%;
	}
	
	/*RIGHT*/	
	span.infobubble-right span{
		left: inherit;
		bottom: inherit;
		right: 100%;
		margin-right: 10px;
		top: -100%;
	}
	
	span.infobubble-right span:before {
		bottom: inherit;
		left: 100%;
	}
	
	/*LEFT*/	
	span.infobubble-left span{
		left: inherit;
		bottom: inherit;
		margin-left: 10px;
		top: -100%;
	}
	
	span.infobubble-left span:before {
		bottom: inherit;
		left: inherit;
		margin-left: -29.5px;
	}
	




	span[class|='infobubble'] span a {
		color: #C4D1D4;
	}
	span[class|='infobubble'] span a:hover {
		color: #003366;
	}
}

@media all and (min-width:768px) 
{
	span[class|='infobubble'] {    
		margin-left: 0;
		padding:0;
	}
}

@media all and (max-width:768px) 
{

}