@charset "utf-8";
/* CSS Document */


/** Phillustration 2014 **/
#the_box {
background:url(http://www.phillustration.co.uk/heart_pulse_mask.png), url(http://www.phillustration.co.uk/heart_pulse_overlay.png); background-size:100% 100%, 100% 100%;
height:180px;
width:180px;
display:inline-block;
margin-top:19%;
-webkit-animation:heart_pulse 30s infinite;
-moz-animation:heart_pulse 30s infinite;
-o-animation:heart_pulse 30s infinite;
animation:heart_pulse 30s infinite; }

div#intro h1 {
color:#E6E7E8;
font-weight:normal;
font-size:1.0em;
font-family: 'Open Sans', sans-serif;
margin:30px 0px 20px 0px;
line-height:150%;
}
div#intro h1 span {
color:#808285;
}

div#intro h2 {
color:#666;
font-weight:normal;
font-size:0.9em;
font-family: 'Open Sans', sans-serif;
padding:0px 40px;
font-style:italic;
}
div#intro h2 span {
color:#458c6b;
}




@-webkit-keyframes heart_pulse { 
0% {background-color:#D94436;} 
50% {background-color:#458C6B;}
100% {background-color:#D94436;} 
}
@-moz-keyframes heart_pulse { 
0% {background-color:#D94436;} 
50% {background-color:#458C6B;}
100% {background-color:#D94436;} 
}
@-o-keyframes heart_pulse { 
0% {background-color:#D94436;} 
50% {background-color:#458C6B;}
100% {background-color:#D94436;} 
}
@keyframes heart_pulse { 
0% {background-color:#D94436;} 
50% {background-color:#458C6B;}
100% {background-color:#D94436;} 
}


/** Phillustration 2013 **/
@font-face {
	font-family:rockwell;
	src:url('Rock.TTF');  }


* {margin:0px; padding:0px;  }
a img {border:none;}
a {text-decoration:none;}


/*MAIN LAYOUT*/
html,body {	
	margin:0px;
	padding:0px;
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
	background:#231F20;  }
#container {
	height:100%;
	position:relative;
	text-align:center;
	width:100%;  }
#main {
	padding-bottom:30px;
	margin:0 auto;
	width:100%;  }
/*VIDEO LAYOUT*/
body.video {	
	margin:0px;
	padding:0px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;  }
	
	
/*HEADER AND MENUS*/
#header {
	background:url(header.png) top repeat;
	position:relative;
	width:100%;
	height:44px;
	min-width:960px;
	padding:0px;
	margin:0px;
	text-align:center;
	z-index:1000;  }
#header img {
	border:none;  }
#header img.title {
	border:none;
	margin:-8px 0px 0px 0px;  }	
	
/*MAIN MENU*/	
#navigation_menu ul { 
	padding:0px 0px 0px 0px;  
	list-style:none;
	position:relative;
	display:inline-table;  }
#navigation_menu ul:after {
	content:"";
	clear:both;
	display:block; 	}	
#navigation_menu ul ul {
	display:none;
	background:url(header.png);
	position:absolute;  }
#navigation_menu ul li {
	float:left;  }
#navigation_menu ul li a {
	display:block;
	padding:15px 14px 11px 14px;
	color:#F2F2F2;
	text-decoration:none;
	text-align:left;
	font-family:arial;
	font-size:1.1em;
	line-height:100%;  }
#navigation_menu ul li:hover a.link {
	/*background:url(header_over.png);*/
	color:#8EB77D;  }
#navigation_menu ul li a.selection {
	color:#8EB77D;  }
#navigation_menu ul li:hover a.selection {
	/*background:url(header_over.png);*/  }
	
/*SUB-MENU*/
#navigation_menu ul li:hover > ul {
	display:block;
	color:#FFF;
	background:none;  }	
#navigation_menu ul ul li {
	float:left;
	clear:both;
	width:200px;
	padding:0px 0px 0px 0px;
	background:url(header.png);
	position:relative;
	color:#FFF;
transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out; /* Firefox 4 */
-webkit-transition: padding 0.2s ease-out; /* Safari and Chrome */
-o-transition: padding 0.2s ease-out; /* Opera */  }
#navigation_menu ul ul li:hover {
	width:200px;
	padding:0px 0px 0px 20px;
	background:#8EB77D;  }  
#navigation_menu ul ul li a {
	color:#FFF;
	font-family:arial;
	font-size:0.8em;
	letter-spacing:1px;
	padding:10px;
	width:auto;  }
#navigation_menu ul ul li a:hover {
	color:#FFF;  }	
	
		
/*PAGES*/
#page_container {
	position:absolute;
	right:8px;
	top:55px;
	width:60px;
	z-index:100;  }
#page {
	background:#000;
	text-align:center;
	float:right;
	width:10px;
	height:10px;
	padding:10px 15px 20px 15px;
	margin-bottom:7px;
	opacity:0.3;
transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out; /* Firefox 4 */
-webkit-transition: padding 0.2s ease-out; /* Safari and Chrome */
-o-transition: padding 0.2s ease-out; /* Opera */  }
#page.current {
	opacity:0.8;
	padding:10px 50px 20px 15px;  }
#page:hover {
	opacity:0.8;
	color:#8EB77D;
	padding:10px 50px 20px 15px;  }
#page_container a {
	color:#FFF;
	text-decoration:none; 
	font-size:20px;
	transition: 0.2s ease-out;
	/* Firefox 4 */-moz-transition: 0.2s ease-out;
	/* Safari and Chrome */-webkit-transition: 0.2s ease-out;
	/* Opera */-o-transition: 0.2s ease-out;  }
#page_container a:hover {
	color:#A8AD53;  }
#page_news {
	background:#000;
	text-align:center;
	float:right;
	height:10px;
	padding:10px 15px 20px 15px;
	margin-bottom:7px;
	opacity:0.3;
transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out; /* Firefox 4 */
-webkit-transition: padding 0.2s ease-out; /* Safari and Chrome */
-o-transition: padding 0.2s ease-out; /* Opera */  }
#page_news.current {
	opacity:0.8;
	padding:10px 50px 20px 15px;  }
#page_news:hover {
	opacity:0.8;
	color:#8EB77D;
	padding:10px 50px 20px 15px;  }
	
	
/*SELECTION GRID*/
table.selection {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	table-layout: fixed;  }
table.selection tr td {
	height:48%;
	position:relative;  }
table.selection tr td div {	
	/*TRANSITION*/
	transition: 0.4s ease-out;
	-moz-transition: 0.4s ease-out;
	-webkit-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
	/*EVERYTHING ELSE*/
	width:100%;
	min-height:100%;
	height:100%;
	opacity:1.0;
	position:relative;  }
table.selection tr td div a {	
	width:100%;
	min-height:100%;
	height:100%;
	float:left;
	opacity:1.0;
	text-decoration:none;
	transition: 0.2s ease-out;
	/*FIREFOX TRANSITION REMOVED*/
	-webkit-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;  }
table.selection tr td div:hover a {	
	opacity:0.0;  }
table.selection tr td div span {
	opacity:0.0;
	margin:100px 0px 0px 20px;
	padding:0px 0px 0px 20px;	
	color:#8EB77D;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:2.2em;
	position:absolute;
	left:0px;
	border-left:1px dashed #999;
	transition: 0.3s ease-out;
	/*FIREFOX TRANSITION REMOVED*/
	-webkit-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;  }
table.selection tr td div:hover span {	
	opacity:1.0;
	margin:50px 0px 0px 20px;  }
table.selection tr td div span strong {	
	color:#333;
	font-family:arial;
	font-size:0.6em;
	font-weight:normal;
	width:250px;
	float:left;  }
	
	
/*CATEGORY BACKGROUNDS ILLUSTRATION*/
#logos a {background: url(illustration/logos/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#dromos a {background: url(illustration/dromos/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#fluid a {background: url(illustration/fluid/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#trivia a {background: url(illustration/trivia/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#recycled a {background: url(illustration/recycled/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#secret a {background: url(illustration/secret/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
/*CATEGORY BACKGROUNDS ANIMATION*/
#yellow a {background: url(animation/yellow/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#blue a {background: url(animation/blue/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#red a {background: url(animation/red/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#green a {background: url(animation/green/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
/*CATEGORY BACKGROUNDS WEB*/
#martinbaxter a {background: url(web/martinbaxter/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#snoopers_web a {background: url(web/snoopers/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#dromos_web a {background: url(web/dromos/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#stocklabels a {background: url(web/stocklabels/category.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#pretty a {background: url(web/pretty/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#springboard a {background: url(web/springboard/category.gif) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}


/*HOME NEWS*/
#home_news {
	background:url(header.png);
	margin:10px;
	width:220px;
	padding:0px 0px 5px 0px;  }
#home_news h1 {
	background:#8EB77D;
	padding:3px 4px 3px 5px;
	color:#FFF;
	font-weight:normal;
	font-size:1.5em;
	font-family:rockwell, Helvetica, sans-serif;  }
#home_news h2 {
	padding:9px 8px 0px 8px;
	color:#8EB77D;
	font-size:1.1em  }
#home_news p {
	padding:8px;
	color:#FFF;
	line-height:140%;
	text-align:justify;
	text-justify:inter-word;
	font-size:0.7em  }
#home_news a {
	background:#8EB77D;
	padding:5px 5px 5px 5px;
	color:#FFF;
	text-decoration:none;
	font-size:1.3em;
	font-weight:bold;
transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out; /* Firefox 4 */
-webkit-transition: padding 0.2s ease-out; /* Safari and Chrome */
-o-transition: padding 0.2s ease-out; /* Opera */  }
#home_news a:hover {
	padding:5px 5px 5px 25px;  }


/*INFO*/
#info {
	width:780px;
	margin:0 auto;
	padding:0px;
	margin-top:35px;
	margin-bottom:20px;
	overflow:hidden;  }
#info_left {
	width:510px;
	padding:0px 10px 0px 0px;
	margin:0px;
	float:left;  }
#info_right {
	width:218px;
	padding:0px 0px 0px 25px;
	margin:0px 0px 0px 15px;
	float:right;
	font-size:0.9em;
	border-left:1px dashed #999;  }
#info h1 {
	margin-bottom:2px;
	font-weight:normal;
	line-height:100%;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:2.4em;
	color:#333;  }
#info h2 {
	margin-bottom:40px;
	font-weight:normal;
	line-height:125%;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.5em;
	color:#8EB77D;  }
#info h2 a {
	font-weight:normal;
	line-height:100%;
	text-decoration:none;
	color:#8EB77D;  }
#info h2 a:hover {
	border-bottom:2px dotted #8EB77D  }
#info h3 {
	margin:-35px 0px 20px 0px;
	padding:4px 5px 4px 4px;
	float:left;
	background:#8EB77D;
	color:#FFF;
	font-weight:normal;
	line-height:100%;
	font-size:0.9em;  }
#info ul, li.info {
	line-height:120%;
	margin-bottom:5px;  }
#info p {
	line-height:150%;
	margin-bottom:20px;
	text-align:justify;
	text-justify:inter-word;
	font-size:0.8em;
	color:#444;  }
#info p strong {  
	font-weight:normal;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:2.0em;
	color:#333;  }
#info img {
	margin-bottom:5px;  }
#info p.smallprint {  
	font-weight:normal;
	font-size:0.7em;
	text-align:left;
	line-height:150%;
	color:#444;
	margin:0px 0px 0px 0px;  }
#info #info_right p {
	line-height:150%;
	margin-bottom:20px;
	text-align:justify;
	text-justify:inter-word;
	font-size:0.8em;
	color:#8EB77D;  }
#info #info_right p strong {
	color:#333;  }
	

/*SOCIAL LINKS*/
#facebook {
	width:35px;
	height:30px;
	padding:5px;
	margin:-35px 0px 0px 0px;
	background:#8EB77D;
	cursor:pointer;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#facebook:hover {
	background:#8EB77D;
	width:210px;  }
#facebook img {
	position:absolute;  }
#facebook span {
	padding:2px 0px 0px 20px;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.8em; 
	line-height:100%;
	position:absolute;
	color:#FCF8EC;
	z-index:-1;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#facebook:hover span {
	padding:2px 0px 0px 65px;
	z-index:1;  }

#twitter {
	width:35px;
	height:30px;
	padding:5px;
	margin:5px 0px 0px 0px;
	background:#8EB77D;
	cursor:pointer;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#twitter:hover {
	background:#8EB77D;
	width:210px;  }
#twitter img {
	position:absolute;  }
#twitter span {
	padding:4px 0px 0px 20px;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.4em; 
	position:absolute;
	line-height:100%;
	color:#FCF8EC;
	z-index:-1;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#twitter:hover span {
	padding:4px 0px 0px 50px;
	z-index:1;  }
	
#vimeo {
	width:35px;
	height:30px;
	padding:5px;
	margin:5px 0px 0px 0px;
	background:#8EB77D;
	cursor:pointer;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#vimeo:hover {
	background:#8EB77D;
	width:210px;  }
#vimeo img {
	position:absolute;  }
#vimeo span {
	padding:4px 0px 0px 20px;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.4em; 
	position:absolute;
	line-height:100%;
	color:#FCF8EC;
	z-index:-1;
transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out; /* Firefox 4 */
-webkit-transition: 0.2s ease-out; /* Safari and Chrome */
-o-transition: 0.2s ease-out; /* Opera */  }
#vimeo:hover span {
	padding:4px 0px 0px 52px;
	z-index:1;  }

	
/*CONTACT FORM*/
.freecontactform {
	width:780px;
	margin:0 auto;
	font-family:arial;  }
.freecontactformheader {
	font-weight:normal;
	line-height:80%;
	text-align:left;  }
.freecontactformmessage {
	text-align:left;
	line-height:150%;
	color:#333;
	font-weight:normal;
	font-family:rockwell, Helvetica, sans-serif;  }
.freecontactformmessage span {
	color:#333;  }
.freecontactform p {
	color:#333;  }
.freecontactform label {
	color:#333;
	font-weight:normal;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.6em;  }
.required {
	font-weight:bold;  }
.required_star {
	font-weight:normal;
	font-size:0.8em;
	color:#8EB77D;  }
.not-required {
	font-weight:normal;  }
.antispammessage {
	padding:10px;
	color:#333;  }
.antispamquestion {
	font-weight:normal;
	color:#333;  }
.freecontactform td input, textarea {
	background:#FFF;
	border:1px solid #E0E0E0;
	width:400px;
	height:35px;
	margin-bottom:10px;
	padding:5px;  }
.freecontactform td input.send  {
	width:auto;
	height:auto;
	padding:8px 14px 8px 14px;
	margin-top:-10px;
	background:#8EB77D;
	color:#FFF;
	font-family:rockwell, Helvetica, sans-serif;
	font-size:1.6em;
	cursor:pointer;
transition: padding 0.2s ease-out;
-moz-transition: padding 0.2s ease-out; /* Firefox 4 */
-webkit-transition: padding 0.2s ease-out; /* Safari and Chrome */
-o-transition: padding 0.2s ease-out; /* Opera */  }
.freecontactform td input.send:hover  {
	padding:8px 14px 8px 40px;  }


/*FOOTER*/
#footer {
	height:23px;
	width:100%;
	padding-top:7px;
	margin:0 auto;
	position:absolute;
	bottom:0; /* stick to bottom */
	text-align:center;
	background:url(header.png);
	color:#FFF;
	display:none;  }	
img.footer {
	position:absolute;
	bottom:10px;
	left:5px;  }
#footer p {
	font-size:1.0em;
	line-height:100%;  }
	
	
/*EXTRAS*/
hr { 
	background:none;
	border:0px;
	border-top:1px dashed #999; }
	

/*BACKGROUND IMAGES*/
#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }
#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }
#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }

/*BACKGROUND VIDEO*/
.videoWrapper {background:#993366;}
.videoWrapper iframe {
	background:#FFF;
	position: absolute;
	z-index:-1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  }