/* A SIMPLE, BASIC RESPONSIVE LAYOUT TEMPLATE */		

body 
{
	font: 1em/100% Arial, Helvetica, sans-serif;
	/*font-family: 'Bree Serif', serif;*/
	color:#e7e7e7;

	background-color: #ddd;
	/*background-image:url(../bg.png);
	background-attachment:fixed;
	background-repeat:repeat-x;*/
}

a 
{
	color: #87a2a2;
	text-decoration: none;

}

a:hover 
{
	text-decoration: underline;
}

h1 
{
	font-size: bold 36px/100%;
}

h4
{
	font-size: 70%;
}

img 
{
	max-width: 100%;
}

soft
{
	color:#4f6969;
}

softtoo
{
	color:#87a2a2;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/

.pix
{
	font-family: "Arial", Helvetica, sans-serif;
	font-size: 80%;
	color: #a8a8a8;
}

#pagewrap 
{
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}

#header 
{
	height: 80px;
	color: #333;
}

#content 
{
	width: 600px;
	float: left;
	word-wrap: break-word;
	color:#666;
	font-size: 80%;
}

#sidebar 
{
	color: #888;
	width: 300px;
	float: right;
}
#footer 
{
	color: #888;
	clear: both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 3000px) 
{
	img 
	{
		opacity:1.0;
	}
}

/* for 980px or less */
@media screen and (max-width: 980px) 
{
	#pagewrap 
	{
		width: 94%;
	}
	
	#content 
	{
		width: 65%;
	}
	
	#sidebar 
	{
		width: 30%;
	}
	img 
	{
		opacity:1.0;
	}
}

/* for 700px or less */
@media screen and (max-width: 700px) 
{
	#content 
	{
		width: auto;
		float: none;
	}
	
	#sidebar 
	{
		width: auto;
		float: none;
	}
	img 
	{
		opacity:1.0;
	}
}

/* for 480px or less */
@media screen and (max-width: 480px) 
{
	#header 
	{
		height: auto;
	}
	
	h1 
	{
		font-size: 24px;
	}
	
	#sidebar 
	{
		display: none;
	}
	img 
	{
		opacity:1.0;
	}
}

/* border & guideline (you can ignore these) */
#content 
{
	/*background: #f8f8f8;*/
}

#sidebar 
{
	/*background: #f0efef;*/
}

#header, #content, #sidebar 
{
	margin-bottom: 5px;
}

#pagewrap, #header, #content, #sidebar, #footer 
{
	/*border: solid 1px #ccc;*/
}