body
{
    font: 1em/150% Arial, Helvetica, sans-serif;
    background-color: #999;
}
a {
	color: #669;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif;
}
p
{
    padding: 0px;
    margin: 0px;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap
{
    padding: 0px;
    width: 1580px;
    margin: 0px auto;
    background-color: #eef;
    top: 0px;
}
#header {
	height: 300px;
    background-color: #aaa;
}
h1 {
		font-size: 36px;
}
#content 
{
    width:60%;
    min-height:400px;
    background-color: #fff;
	float: left;
}
#sidebarLeft
{
    width: 20%;
    float: left;
    background-color: #ddd;
}
#sidebarRight
{
    width: 20%;
    float: left;
    background-color: #ccc;
}
#footer {
	clear: both;
    min-height:50px;
    background-color: #bbb;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* 5. for 1600px or less */
@media screen and (max-width: 1600px) {
    h1 {
	    font-size: 150%;
	    color:Aqua;
    }
    #header {
	    height: 200px;
    }
	#pagewrap
    {
        width: 94%;
    }
	
    #footer {
	    height: 100px;
    }

}
/* 4. for 1280px or less */
@media screen and (max-width: 1280px) {
h1
    {
        font-size: 150%;
        color: Fuchsia;
    }
    #header {
	    height: 180px;
    }
	#pagewrap
    {
        width: 94%;
    }
	
    #footer {
	    height: 125px;
    }
	


}

/* 3. for 1024px or less */
@media screen and (max-width: 1024px) 
{
    
h1
    {
        font-size: 150%;
        color: Lime;
    }
    #header {
	    height: 150px;
    }
	#pagewrap
    {
        width: 96%;
    }
    
	#content 
	{
		width: 65%;	    
	}
	#sidebarLeft {
		width: 35%;
	}
	#sidebarRight {
		width: 35%;
		float: none;
	}
	
    #footer {
	    height: 125px;
    }

}

/* 2. for 768px or less */
@media screen and (max-width: 768px) {
    
h1
    {
        font-size: 150%;
        color: Teal;
    }
    #header {
	    height: 120px;
    }
	#pagewrap
    {
        width: 97%;
    }
    
	#content 
	{
		width: auto;	  
		float: none;  
	}
	#sidebarLeft {
		width: auto;	
		float: none;
	}
	#sidebarRight {
		width: auto;	
		float: none;
	}
	
    #footer {
	    height: 125px;
    }
    
    


}

/* 1. for 480px or less */
@media screen and (max-width: 480px) {h1
    {
        font-size: 150%;
        color: Maroon;
    }
    #header {
	    height: 100px;
    }
	#pagewrap
    {
        width: 98%;
    }
       

}

/* border & guideline (you can ignore these)
#content {
	background: #f8f8f8;
}
#sidebarRight, #sidebarLeft {
	background: #f0efef;
}
#header, #content, #sidebarRight, #sidebarLeft {
	margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebarRight, #sidebarLeft, #footer {
	border: solid 1px #ccc;
}
 */