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

/* Defines the font and size for entire site */
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* This defines the link colour in paragraph tags */
p a{
	text-decoration:none;
	color:#000000;
}

/* This defines the paragraph text link colour when hovering */
p a:hover{
	color:#FFFFFF;
}

/* This removes borders from images on site */
img {
	border-style:none;
}

/* This removes dashed outline from links */
a:hover, a:active, a:focus {
	outline:none;
}

/* This divide holds the entirety of the site. It keeps it all centered */
#container {
	position:absolute;
	left:50%;
	width:850px;
	margin-left:-425px;
	height:auto;
}

/* Header of the site, holds logo and prompt */
#header{
	width:100%;
	height:131px;
	position:relative;
}

/* Box which contains the Fusion logo */
.logo{
	float:left;
	width:75px;
	height:101px;
	margin:15px 0 15px 25px;
}

/* Box for smallprint such as privacy policy and legal info */
.smallprint{
	width:825px;
	height:auto;
}

/* Holds all 6 icons (6 x .icon) to group together */
.iconholder{
	width:850px;
	height:550px;
	position: relative;
	z-index: 0;
}

/* Holds the flash navigation buttons */
.icon{
	float:left;
	width:225px;
	height:225px;
	margin:25px;
}

/* Footer properties */
#footer{
	width:805px;
	height:30px;
	top:15px;
	left:10px;
	position: relative;
}

#footer UL{
	list-style:none;
	text-align:center;
}

#footer LI{
	float:left;
	margin: 0;
	margin-left:25px;
	margin-top:10px;
	text-align:center;
}

#footer LI a {
	text-decoration:none;
	color:#000000;
}

#footer LI a:hover{
	color:#CEDD44;
}

#footer LI a:visited{
}

/* This class defines properties for copyright */
.copyright{
	text-align:center;
	font-size:10px;
	color:#CCCCCC;
}

.copyright a{
	text-align:center;
	text-decoration:none;
	font-size:10px;
	color:#CCCCCC;
}

.copyright a:hover{
	text-align:center;
	font-size:10px;
	color:#666666;
}

/* class that holds twitter/ facebook icons */
.socialicons{
	float:left;
	padding-top:8px;
	padding-right:5px;

}

/* This class takes the dashed outline from flash buttons */
.flashbtn{
	outline:none;
	position: relative;
	z-index: 0;
}

/* Holds the prompts at top of page */
#prompt{
	outline:none;
	float:right;
	width:180px;
	height:129px;
	margin-right: 10px;
}

/* The content box which appears when page is clicked (holds all the divides below) */
#overlaycontent{
	width:630px;
	height:auto;
	z-index:999;
	top:125px;
	position: absolute;
	left: 195px;
	display: block;
	background-image: url(../img/contentboxbg.gif);
	background-repeat:repeat-y;
	}

/* Holds the top image of the box */
#overlaycontent_top{
	float:left;
	width:630px;
	height:47px;
	background-image:url(../img/contentbox_top.gif);
	background-color: #ffffff;
	}

/* Hold the bottom image of the box */
#overlaycontent_bottom{
	float:left;
	width:630px;
	height:47px;
	background-image:url(../img/contentbox_bottom.gif);
	background-color: #ffffff;
}

/* middle of box which expands depending on content. Contains #contentmain divide */
#overlaycontent_main{
	float:left;
	width:630px;
	height:auto;
	background-repeat:repeat-y;
	background-image:url(../img/contentboxbg.gif);
}

/* holds the close button image*/
#closebtn{
	float:right;
	width:50px;
	height:20px;
	margin-top: 10px;
}

/* Hold page title images */
#contentitle{
	width:600px;
	height:50px;
	margin-left:15px;
}

/* Hold page title images */
#contentitle2{
	width:600px;
	height:85px;
	margin-left:15px;
	margin-top: 18px;
}

/* Box holding page contents in centre */
#contentmain{
	width:500px;
	height:auto;
	margin-left:65px;
	font-size:12px;
}

/* Box holding page contents in centre */
#contentmainse{
	width:500px;
	height:auto;
	margin-left:65px;
	font-size:12px;
	background-image:url(../img/smartenoughbg.gif);
	background-repeat:no-repeat;
}

/* Box holding google map code */
#googlemap{
	float:left;
	width:500px;
	height:500px;
}

/* Pop up box on google map */
div#popup {
background:#ffffff;
margin:0px;
padding:7px;
width:300px;
}

/* Box holding whos who character divides */
.characterbox{
	float:left;
	width:500px;
	height:158px;
	margin-bottom: 10px;
	margin-top: 10px;
}

/* characters on left */
.characterl{
	float:left;
	width:100px;
	height:158px;
}

/* characters on right */
.characterr{
	float:right;
	width:100px;
	height:158px;
}

.formbox {
	width:200px;
}