It's working now. I re-uploaded the styles.css again and then refreshed the page and css cache. It works now. :D
this is the entire css file (http://www.pscompetitiveedge.com/styles.css)
Now, I'm off to work on changing all the images using the responsive grid system you showed me earlier this week.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<title>CSS3 Grid Images - Fluid Scale, Responsive</title>
<!-- http://www.dynamicdrive.com/forums/archive/index.php/t-77355.html -->
<style>
html, body { margin:0; padding:0; font:16px/1.75 Verdana, Arial, Helvetica, sans-serif; background:#ccc }
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
.page-content { padding:1em; max-width:64em; margin:auto; background:#fff }
table { margin:1em 0 }
td { font-weight:bold }
td, input { text-align:center }
.right { text-align:right }
.left { text-align:left }
.clearfix:after { content:" "; display:table; clear:both }
.img-01 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Truly Outrageous Jem.jpg') }
.img-02 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Zazz & Roxy.JPG') }
.img-03 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - double vision.JPG') }
.img-04 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Rio and Rio.jpg') }
.img-05 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Now.JPG') }
.img-06 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Roxy GGGRRRRR.jpg') }
.img-07 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - back.jpg') }
.img-08 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - front.jpg') }
.img-09 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx Rio & Jem again.jpg') }
.img-10 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx saunters.jpg') }
.img-11 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - One Pizzazz Too Many.jpg') }
.img-12 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - loves young dream.jpg') }
.img-13 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - down with the 80s.JPG') }
.img-14 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - he is mine Jem.jpg') }
.img-15 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - mini Misfits.jpg') }
.img-16 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - nasty Jetta & Roxy.jpg') }
.img-17 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Pizzazz!.jpg') }
.img-18 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Roxy.jpg') }
.img-19 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants & Jetta.JPG') }
.img-20 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants!.jpg') }
/* #### - reduce padding-bottom for rectangular images (75% = 4:3 aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
.img { padding-bottom:100%; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover }
.img:hover { opacity:0.5 }
/* #### - smallest width = 2 images per row - #### */
.grid-outer { margin:-3% } /* negative value of .grid margin */
.grid { float:left; margin:3%; width:44% } /* width = (100 / images per row) - ( margin x 2 ) */
@media ( min-width:20em ) { /* #### - > 320px = 3 images per row - #### */
.grid-outer { margin:-2% } /* negative value of .grid margin */
.grid { margin:2%; width:29.333% } /* width = (100 / images per row) - ( margin x 2 ) */
}
@media ( min-width:35em ) { /* #### - > 560px = 4 images per row - #### */
.grid-outer { margin:-1.5% } /* negative value of .grid margin */
.grid { margin:1.5%; width:22% } /* width = (100 / images per row) - ( margin x 2 ) */
}
@media ( min-width:50em ) { /* #### - > 800px = 5 images per row - #### */
.grid-outer { margin:-1% } /* negative value of .grid margin */
.grid { margin:1%; width:18% } /* width = (100 / images per row) - ( margin x 2 ) */
}
</style>
<!--[if lt IE 9]>
<style>
.grid-outer { margin:-1% }
.grid { width:125px; margin:1% }
.img { height:125px; padding-bottom:0 }
.clearfix { *zoom:1 }
</style>
<![endif]-->
</head>
<body>
<div id="header">
<a href="/"><img src="/template/images/logo-50x50.png" style="position:absolute; top:0.5em; left:1em; width:3em; height:3em; border:0" alt="Home" title="Home"/></a>
<span style="position:absolute; top:1.175em; left:5em; color:#fff">Focus on Function</span>
</div><!-- closing "#header" -->
<div class="page-content">
<h2>CSS3 Grid Images - Fluid Scale, Responsive</h2>
<p>The images in this demo fluidly scale down in size as the browser width decreases. They do not break out of their grid.</p>
<br/>
<div class="grid-outer clearfix">
<div class="grid">
<div class="img img-01"></div>
</div>
<div class="grid">
<div class="img img-02"></div>
</div>
<div class="grid">
<div class="img img-03"></div>
</div>
<div class="grid">
<div class="img img-04"></div>
</div>
<div class="grid">
<div class="img img-05"></div>
</div>
<div class="grid">
<div class="img img-06"></div>
</div>
<div class="grid">
<div class="img img-07"></div>
</div>
<div class="grid">
<div class="img img-08"></div>
</div>
<div class="grid">
<div class="img img-09"></div>
</div>
<div class="grid">
<div class="img img-10"></div>
</div>
<div class="grid">
<div class="img img-11"></div>
</div>
<div class="grid">
<div class="img img-12"></div>
</div>
<div class="grid">
<div class="img img-13"></div>
</div>
<div class="grid">
<div class="img img-14"></div>
</div>
<div class="grid">
<div class="img img-15"></div>
</div>
<div class="grid">
<div class="img img-16"></div>
</div>
<div class="grid">
<div class="img img-17"></div>
</div>
<div class="grid">
<div class="img img-18"></div>
</div>
<div class="grid">
<div class="img img-19"></div>
</div>
<div class="grid">
<div class="img img-20"></div>
</div>
</div>
<br/>
<h2>Compatibility</h2>
<ul>
<li>IE9+ *</li>
<li>Chrome</li>
<li>Safari</li>
<li>Firefox</li>
<li>Opera</li>
<li>Android</li>
<li>iOS</li>
</ul>
<p>* "background-size:cover;" isn't supported in IE7/8 so a fixed-size fallback is provided for those browsers.</p>
<div id="calc">
<h2>Grid Image Calculator</h2>
<p>This form calculates the required <b>width</b> CSS value of each image in a row, for this demo's fluid grid scaling.</p>
<p>Enter the desired number of images per row, the margin around images, then transfer the results to your CSS.</p>
<table>
<tr>
<td> </td>
<td>images per row</td>
<td>margin (%)</td>
</tr><tr>
<td class="right"> </td>
<td><input type="text" id="ipr" /></td>
<td><input type="text" id="mar" /></td>
</tr><tr>
<td> </td>
<td colspan="2"><input type="submit" onclick="Calculate();" value="CALCULATE"/></td>
</tr><tr>
<td class="right">width: </td>
<td><input type="text" id="wth" /></td>
<td class="left">% (per image)</td>
</tr>
</table>
</div>
</div><!-- closing ".page-content" -->
<script>
function roundNumber(number, digits) {
var multiple = Math.pow(10, digits);
var rndedNum = Math.round(number * multiple) / multiple;
return rndedNum;
}
function Calculate() {
var ipr = document.getElementById('ipr').value;
var mar = document.getElementById('mar').value;
var wth = (100 / ipr) - (mar * 2);
document.getElementById('wth').value = roundNumber(parseFloat(wth), 3);
localStorage.setItem('ipr', ipr.value);
localStorage.setItem('mar', mar.value);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
/* })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); */
})(window,document,'script','//fofwebdesign.co.uk/template/scripts/ga.php','ga');
ga('create', 'UA-33863475-1', 'fofwebdesign.co.uk');
ga('send', 'pageview');
</script>
</body>
</html>