/* Hello source code fans. If you learn something by borrowing from this CSS then that's fantastic but i can't promise this stuff is any good. It does validate though, so i suppose that's something. */
/* Created by Mark Wainwright, June 2013. If you reckon any of this code can be improved i'd love to hear from you. mail@sallonoroff.co.uk */

body
{
	color: #ffffff;
	font-family: verdana,sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	letter-spacing: -0.1em;
	text-align: center;
	margin-top: 20%;
	
 	/* Background gradient code generated using http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/ */
 	/* Slightly different for each browser engine(!). Well done, browser people. */
	background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C0C0C0 100%);
	background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C0C0C0 100%);
	background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C0C0C0 100%);
	background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #FFFFFF), color-stop(1, #C0C0C0));
	background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #C0C0C0 100%);
	background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #C0C0C0 100%);
}

div /* The div in this page was only included so we could change alignment of p.theoptions if required */
{
	margin: 0 auto; 
	width: 36em;
	position: relative;
}

p
{
	margin-top: 0.0em;
	margin-bottom: 0.1em;
}

p.thetitle
{
	font-size: 5.0em;
	letter-spacing: -0.1em;
	text-shadow: 3px 3px 15px #262626;
}

p.theoptions
{
	/*text-align: right;*/  /* Uncomment this if we want these "buttons" left/right aligning instead of centred */
	font-size: 1.5em;
	letter-spacing: -0.06em;
}

span.honeyi
{
	font-size: 0.35em;
	letter-spacing: -0.05em;
}

a:link, a:visited
{
	color: #D8D8D8;
	text-decoration: none;
	background-color: #A0A0A0;
	border-style: solid;
	border-width: 0.1em;
	border-color: #D8D8D8;
	padding: 0.15em 0.22em 0.2em 0.2em; /* These values should all be equal in theory, but it looks slightly off to my eye. Maybe my eye is broken. */
	margin: 0.0em 0.0em 0.0em 0.2em; /* Just creating a bit more space between each "button" */
	border-radius: 0.2em;
	box-shadow: 2px 2px 14px #262626;
	
	/* Code for subtle colour change of "button" text, border and background that occurs on hover. 3 lines per browser engine(!) C'mon, sort it out, browser folk. */
   -webkit-transition-property: color, border-color, background-color;   
   -webkit-transition-duration: 0.5s, 0.5s, 0.5s;
   -webkit-transition-timing-function: ease-in, ease-in, ease-in;
   -moz-transition-property: color, border-color, background-color;   
   -moz-transition-duration: 0.5s, 0.5s, 0.5s;
   -moz-transition-timing-function: ease-in, ease-in, ease-in;
   -o-transition-property: color, border-color, background-color;   
   -o-transition-duration: 0.5s, 0.5s, 0.5s;
   -o-transition-timing-function: ease-in, ease-in, ease-in;
   transition-property: color, border-color, background-color;   
   transition-duration: 0.5s, 0.5s, 0.5s;
   transition-timing-function: ease-in, ease-in, ease-in;
}

a:hover, a:active
{
	color: #ffffff;
	text-decoration: none;
	border-style: solid;
	border-width: 0.1em;
	border-color: #ffffff;
	padding: 0.15em 0.22em 0.2em 0.2em;
	box-shadow: 2px 2px 15px #404040;
}

a:hover.twink, a:active.twink
{
	background-color: #00ACED;
}

a:hover.flink, a:active.flink
{
	background-color: #FF0084;
}

a:hover.blink, a:active.blink
{
	background-color: #F5D702;
}

a:hover.abink, a:active.abink
{
	background-color: #AAD450;
}

/* Fin. */