<-- ACS NEW css file for Website -->

 header, section, footer, aside, nav, article, hgroup{
	display:block;
}
 
body {
	
	background-repeat: no-repeat;
	background-color: #062134;
	font-size: 87.5%;
	font-family: Tahoma;
	line-height: 1.5;
	text-align: left;
	max-width:100%;
	overflow-x:hidden;
	/* main body has a non repeating background image 
	the vodafone logo with the red trail to the left. */
}
.body {
	width: 90%;
	margin: 0 auto;
	padding: 0;
	clear: both;
	/* 90% of the total width of its container
	both side panel are clear with no floating objects or whatever! */
}
a:link {text-decoration:none;
	color:#fff;
}
#container{
	position:relative;
	height:450px;
	left:0px;
	margin:0px auto;

}

#ads{display:inline-block;
	border:0px solid white;
	padding:10px;
	width:200px;
	text-align:center;
}
#fb{display:inline-block;
}
#tw{display:inline-block;
	margin-left:10px;
}
#bl{display:inline-block;
	margin-left:10px;
}

#headerstuff{display:inline-block;
	border: 0px solid red;
	background-color: #062134;
	width: 100%;
	margin-top:0px;
	padding:15px;

}
#acstitle{
	border: 0px solid blue;
	float:left;
	font-size:18px;
	color:#fff;
}
#phn{display:inline-block;
	float:left;
}
#eml{display:inline-block;
	padding-left:20px;
}
#buttons{
	position:relative;
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	width:620px;
	height:30px;
	margin-top:36px;
	border: 0px solid white;
	color:#fff;


}
#special_button{
	position:relative;
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	width:620px;
	height:25px;
	border:0px solid green;

}

#offers{display: inline-block;
	width:100%;
	height:360px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	font-size:18px;

}

#offer-deal{display: inline-block;
	position:relative;
	border:0px solid white;
	width:300px;
	height:450px;
	float:left;
	color:yellow;
	margin-left: 20px;
}

#offer-special{display: inline-block;
	position:relative;
	border:0px solid white;
	width:300px;
	height:450px;
	color:yellow;

}

#offer-clearance{display: inline-block;
	border:0px solid white;
	width:300px;
	height:450px;
	float:right;
	color:yellow;
	margin-right: 20px;
}

#back_hidden{
	display:none;
}

#welcome_index{
	position:relative;
	border:0px solid white;
	height:320;
	font-family: Tahoma;
	font-size:16px;
	color:#fff;
	padding:15px;
	margin: 0px;

}
#menu-pic{
	border:0px solid white;
	width:95%;
	height:auto;
	text-align:center;
	color:#000;
}

#side_products{
	position: relative;
	float: right;
	width:248px;
	height:927px;
	padding: 0px;
}
#products_main{
	position:relative;
	width:835px;
	height:350;
	left:10px;
	font-family: Tahoma;
	font-size:16px;
	color:#fff;
	padding:0px;
	margin: 0px;
	text-align: left;
}
#contact-stuff{display:inline-block;
	width:90%;
	text-align:center;
	margin-top:20px;
	margin-right:20px;
	}
#contact_main{display:inline-block;
	position:relative;
	text-align: left;
	width:400px;
	height:400px;
	font-family: Tahoma;
	font-size:16px;
	color:#fff;
	border:0px solid white;
	margin:20px;
}
#clients_main{
	position:relative;
	width:100%;
	height:auto;
	font-family: Tahoma;
	font-size:16px;
	color:#333333;
	
}
#map_position{display:inline-block;
	margin-top:20px;
	margin-left:20px;
	position:relative;
	float:right;
}
    .button{
    width:80px;
    height:24px;
    display:block;
	opacity:0 1;
	-webkit-transition:-webkit-transform .8s, opacity .8s, background .3s;
	}
    .button:hover{
    background-position: left 24px;
		-webkit-transform: scale(1,1);
		opacity: 1;
    }
	
   .specialbutton{
	margin-left:20px;
    width:145px;
    height:24px;
    display:block;
	opacity:0 1;
	-webkit-transition:-webkit-transform .8s, opacity .8s, background .3s;
	}
    .specialbutton:hover{
    background-position: left 24px;
		-webkit-transform: scale(1,1);
		opacity: 1;
    }

    #back{
	    background-image:url('buttons/back.png');
			

    }
    #home{
	    background-image:url('buttons/home.png');
			

    }
    #about{
	    background-image:url('buttons/about.png');
			

    }
    #products{
	    background-image:url('buttons/products.png');
    }
    #service{
	    background-image:url('buttons/service.png');
    }
    #backup{
	    background-image:url('buttons/backup.png');
    }
    #clients{
	    background-image:url('buttons/clients.png');
    }
    #contact{
	    background-image:url('buttons/contact.png');
    }
	#specials{
	    background-image:url('buttons/specials.png');
    }

	#deal{
	    background-image:url('buttons/deal.png');
    }
	#clearance{
	    background-image:url('buttons/clearance.png');
    }
	
#bargains {
	color:#fff;
	font-size:24px;
}
	

@media only screen and (min-width: 150px) and (max-width: 600px)
{
		.body {
		width: 98%;
	}

#products_main{
	width:100%;
	height:auto;
	left:2px;
	font-family: Tahoma;
	font-size:14px;
	color:#fff;
}

#contact-stuff{
	width:100%;
	text-align:center;
	margin-top:2px;
	margin-right:0px;
	}
#contact_main{
	font-size:14px;
	color:#fff;
	border:0px solid white;
	margin:2px;
	height:auto;
}
#map_position{display:inline-block;
	width:100%;
	margin-top:2px;
	margin-left:0px;
	float:center;
	padding-left:0px;
}
	#buttons{
		margin-top:5px;
	}	
	#headerstuff{
		padding:5px;
	}
	#welcome_index{
		font-size:14px;
		padding:5px;
	}	

	#offer-deal{margin-left: 0px;
		text-align:center;
		
	}

	#offer-clearance{margin-right: 0px;
		text-align:center;
		
	}
}