body {
	width: 320px;
	margin: auto; 
	background: #8dcdd8; 
}


/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
body {
	width: 480px;
	margin: auto; 
	background: #8dcdd8; 
}
} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {
body {
	width: 600px;
	margin-left: 50px;
	margin-right: auto; 
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(leima.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 33%, auto, 70%;
	background-origin: border-box, initial, initial;
	background-repeat: repeat-y, no-repeat, no-repeat;
	background-position: left, center top, right top;
}
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
body {
	width: 600px;
	margin-left: 50px;
	margin-right: auto; 
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(leima.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 33%, auto, 70%;
	background-origin: border-box, initial, initial;
	background-repeat: repeat-y, no-repeat, no-repeat;
	background-position: left, center top, right top;
}
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
body {
	width: 600px;
	margin-top: 30px;
	margin-left: 300px;
	margin-right: auto; 
	background: #8dcdd8; 
	background-image: url(bgVasen.png), url(leima.png), url(KielisolmunIsoLiikemerkki.png);
	background-size: 20%, auto, 70%;
	background-origin: border-box, initial, initial;
	background-repeat: repeat-y, no-repeat, no-repeat;
	background-position: left, 600px 80px, right top;
}
}