								/* Big screens and systems... bigger machines .... */
								@media screen and (min-width: 1200px){
									.content{
									width: 80%;
									float: right;
									padding: 10px;
									background-color: #00058A;
									color: #dddddd;
									border-radius: 50px;
									text-align: center;
								}
								.notification_title_head{
									width: 50%;
									text-align: center;
								}
								.notification_title_head .notification_headtext{
									text-align: center;
									border-radius: 20px;
									color: #00058A;
									background: #BBBBBB; /* For browsers that do not support gradients */
								  	background: -webkit-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Safari */
								  	background: -o-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Opera 11.6 to 12.0 */
								  	background: -moz-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Firefox 3.6 to 15 */
								  	background: radial-gradient(circle, #FFFFFF, #BBBBBB); /* Standard syntax */

									background-color: #de4323;
									border: 3px solid #FFFFFF;
									padding: 12px;
									font-size: 22px;
								}

									.notifications{
										width: 70%;
										text-align: center;
										margin-left: 14%;
									}
									.notifications .notification{
										width: 100%;
										text-align: left;
										display: inline-block;
										vertical-align: middle;
										padding: 10px;

									}
									.notifications .new_notify{
										padding: 5px;
										background-color: green;
										color: #fff;
									}
									.notifications .notification img{
										width: 10%;
										border-radius: 40%;
										text-align: center;
										display: inline-block;
										float: left;
										vertical-align: middle;
									}
									.notifications .notification p{
										display: inline;
										font-size: 12px;
										vertical-align: middle;
										padding: 10px;
										font-family: arial;
										font-weight: bold;
										font-size: 16px;
										width: 65%;
										vertical-align: middle;
									}
									.notifications .notification .time{
										display: inline;
										vertical-align: middle;
										width: 15%;
									}

								}

/* Tablets and Medium Devices and lit stuffs .... */
@media screen and (max-width: 1200px){
	.content{
	width: 70%;
	float: right;
	padding: 10px;
	background-color: #00058A;
	color: #dddddd;
	border-radius: 50px;
	text-align: center;
}
.notification_title_head{
	width: 60%;
	text-align: center;
}
.notification_title_head .notification_headtext{
	text-align: center;
	border-radius: 20px;
	color: #00058A;
	background: #BBBBBB; /* For browsers that do not support gradients */
  	background: -webkit-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Safari */
  	background: -o-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Opera 11.6 to 12.0 */
  	background: -moz-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Firefox 3.6 to 15 */
  	background: radial-gradient(circle, #FFFFFF, #BBBBBB); /* Standard syntax */

	background-color: #de4323;
	border: 3px solid #FFFFFF;
	padding: 12px;
	font-size: 22px;
}

	.notifications{
		width: 100%;
		text-align: center;
	}
	.notifications .notification{
		width: 100%;
		text-align: left;
		display: inline-block;
		vertical-align: middle;
		padding: 10px;

	}
	.notifications .new_notify{
		padding: 5px;
		background-color: green;
		color: #fff;
	}
	.notifications .notification img{
		width: 10%;
		border-radius: 40%;
		text-align: center;
		display: inline-block;
		float: left;
		vertical-align: text-top;
	}
	.notifications .notification p{
		display: inline;
		font-size: 12px;
		vertical-align: middle;
		padding: 6px;
		font-family: arial;
		font-weight: bold;
		font-size: 16px;
		width: 65%
	}
	.notifications .notification .time{
		display: inline;
		vertical-align: middle;
		width: 15%;
	}
	
}

							/* Smallest Screens and Mobile Devices... Hand gadgets .... */
							@media screen and (max-width: 860px){
								.content{
								width: 100%;
								background-color: #00058A;
								color: #dddddd;
								border-radius: 20px;
								text-align: center;
							}
							.notification_title_head{
								width: 60%;
								text-align: center;
							}
							.notification_title_head .notification_headtext{
								text-align: center;
								border-radius: 20px;
								color: #00058A;
								background: #BBBBBB; /* For browsers that do not support gradients */
							  	background: -webkit-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Safari */
							  	background: -o-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Opera 11.6 to 12.0 */
							  	background: -moz-radial-gradient(circle, #FFFFFF, #BBBBBB); /* Firefox 3.6 to 15 */
							  	background: radial-gradient(circle, #FFFFFF, #BBBBBB); /* Standard syntax */

								background-color: #de4323;
								border: 3px solid #FFFFFF;
								padding: 12px;
								font-size: 22px;
							}

								.notifications{
									width: 100%;
									text-align: center;
								}
								.notifications .notification{
									width: 100%;
									text-align: left;
									display: inline-block;
									vertical-align: middle;
									padding: 10px;

								}
								.notifications .new_notify{
									padding: 5px;
									background-color: green;
									color: #fff;
								}
								.notifications .notification img{
									width: 20%;
									border-radius: 40%;
									text-align: center;
									display: inline-block;
									float: left;
									vertical-align: text-top;
								}
								.notifications .notification p{
									display: inline;
									font-size: 12px;
									vertical-align: middle;
									padding: 6px;
									font-family: arial;
									font-weight: bold;
									font-size: 16px;
									width: 65%
								}
								.notifications .notification .time{
									display: inline;
									vertical-align: middle;
									width: 15%;
								}

							}

