body
{
	background-color: #696969;
	font-family: arial;
}

#pageWrapper > div
{
	border: 2px solid;
}

#header
{
	border: 2px solid;
	padding: 10px;
	background-color: #f59b42;
	display: flex;
}

#header a[class="nav"]
{
	border: 2px solid;
	color: #000000;
	padding: 7px;
	font-size: 18px;
	
}

.name
{
	margin: 0;
}


p 
{
	color: #000000;
}

#bod
{
	display: flex;
	flex-direction: column;
	padding: 5px;
	border: 2px;
	background-color: #ffffff;
	justify-content: center;
}

#bod div[class="pain"]
{
	border: 2px solid;
}

#bod p[class"pain"]
{
	margin: 0;
	justify-content: center;
	padding: 5px;
}

div[class="pick"]
{
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* Taitojen arvailun tyylit */

#skillz
{
	border: 2px solid;
	border-width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 6px;
	justify-content: center;
}

#skillz img
{
	width: 80px;
	height: auto;
}

#skillz div[class="arvaus"]
{
	display: flex;
	flex-direction: row;
}

#skillz > div
{
	border: 2px solid;
	padding: 4px;
}

#skill
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.arvaus
{
	display: flex;
	justify-content: space-between;
}

.estimate
{
	font-family: serif;
	background-color: #363636;
	color: #ffffff;
	border: 2px solid;
	padding: 2px;
}



/* Eri resoluutioille muokkautuvat muutokset */

@media only screen and (min-width: 891px)
{
	#bod
	{
		flex-direction: row;
		justify-content: center;
	}
}

@media only screen and (min-width: 891px) and (max-width: 1300px)
{
	#bod
	{
		flex-wrap: wrap;
	}
	
	.help
	{
		min-width: 50%;
		max-width: 1200px;
	}	
}

@media only screen and (min-width: 1301px)
{
	.help
	{
		width: 600px;
	}
}