html {
    position: relative;
    min-height: 100%;
	font-size: 11px
}

body {
  background-color: white;
  font-family:roboto, sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  margin:0;
}

p {margin-bottom: 1.3em;}

h1, h2, h3, h4 {
  font-weight: inherit;
  line-height: 1.2;
}

h1 				{font-size: 2.5em;font-weight:bold;margin:0;}
h2,
h3 				{font-size: 1em}

header			{margin-bottom:1.5em;background:#d9d6d3;color:#696663;border-bottom:0.5em solid #c9c6c3;box-shadow:inset 0 2px 6px -2px rgba(0,0,0,0.75)}
header .wrapper	{background:url(../_img/ball.png) no-repeat 5% 50%;padding:1em 0 0.5em 0}
header h1		{margin-left:4em}
header h2		{margin-left:10.125em;margin-top:0.125em;font-style:italic;}
section			{padding-bottom:4.5em}/* height of footer */
footer			{position: absolute;left: 0;bottom: 0;width: 100%;border-top:0.5em solid #696663;background:#393633;color:#fff}
footer a		{color:inherit;border-bottom-color:#fff}


a				{text-decoration:none;border-bottom:1px dotted #ccc;color:#333}
img				{vertical-align:middle;border:0}

ul				{padding:0;list-style:none;}
li 				{display:block;margin-bottom:3px;border:3px solid #e9e9e9;border-radius:4px;background: #f9f9f9;transition:background-color 0.8s, border-color 0.8s}
li a 			{display:table;width:100%;border:0;border-radius:1px 0 0 1px}
li a img		{height:28px}
li a img+img	{margin-left:6%}
li a div		{display:table-cell;width:9em;text-align:center;padding:0.25em 0;border-radius:1px 0 0 1px;transition: all ease 0.8s;}
li a h3			{vertical-align:middle;display:table-cell;padding-left:1em}
li:hover		{background:#ffff99;border-color:#e5e533}
li:hover div	{box-shadow: inset 9em 0 0 rgba(155,155,0,0.25);}

#adverts		{height:3em;position:relative;width:600px;margin:0 auto}
#adverts img	{width:100%}
#adverts a		{display:block;border:none;position:absolute;transition: all ease 0.8s;}

.padding		{padding:1em}
.centre			{text-align:center}
.wrapper		{width:90%;margin:0 auto}

.info			{border:0.25em solid #cc0000;border-radius:0.5em;background:#fff0f0;color:#cc0000;padding:0.5em 1em;margin-bottom:2em}

@media only screen and (min-width:320px) { 
	/* smartphones, iPhone, portrait 480x320 phones */ 
	#adverts		{width:300px}
}

@media only screen and (min-width:481px) { 
	/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
	html 			{font-size: 12px}
	header 			{padding:1em 0}	
	li a img		{height:32px}
	#adverts		{width:440px}
}
@media only screen and (min-width:641px) { 
	/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
	html 			{font-size: 13px}
	header 			{padding:0.5em 0}	
	li a img		{height:38px}
	#adverts		{width:600px}
}
@media only screen and (min-width:820px) {
	/* hi-res laptops and desktops */ 
	.wrapper		{width:800px}
}
@media only screen and (min-width:961px) { 
	/* tablet, landscape iPad, lo-res laptops ands desktops */ 
	html 			{font-size: 14px}
	header 			{padding:0}	
	li a img		{height:40px}
}
@media only screen and (min-width:1025px) {
	/* big landscape tablets, laptops, and desktops */ 
	html 			{font-size: 15px}

	li a img		{height:52px}
}
@media only screen and (min-width:1281px) {
	/* hi-res laptops and desktops */ 
	html 			{font-size: 16px}
	li a img		{height:60px}
}