// JavaScript Document
function getcss(cssfile){
	loadcss = document.createElement('link')
	loadcss.setAttribute("rel", "stylesheet")
	loadcss.setAttribute("type", "text/css")
	loadcss.setAttribute("href", cssfile)
		document.getElementsByTagName("head")[0].appendChild(loadcss)
}
if(screen.width < '800') 
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)
{
getcss('http://amc.ccul.org/css/s320.css') 
// Defines the .css file you want to load for this range (320.css)
}


else if(screen.width >= '800' && screen.width < '1024' )
//Targeting screen resolutions under 800 wide
{
getcss('http://amc.ccul.org/css/s800.css')
//Load 800.css
}


else if(screen.width >= '1024' && screen.width < '1280' ) 
// This time we're targeting all resolutions between 1024 wide
{
getcss('http://amc.ccul.org/css/s1024.css') 
//And we want to load the .css file named "1024x768.css"
}


else if(screen.width >= '1280' && screen.width < '1600' )
//Targeting screen resolutions between 1280 
{
getcss('http://amc.ccul.org/css/s1280.css')
//Load 1280.css
}


else if(screen.width >= '1600' )
//Targeting screen resolutions at 1600 or above wide
{
getcss('http://amc.ccul.org/css/s1600.css')
//Load 1600.css
}


else 
{
getcss('http://amc.ccul.org/css/s1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1024.css
}