#loading{
width:20%;
left:40%; /*this could just be width:100%; if it wasn't for IE7 */
text-align:center;
position:absolute;
z-index:0;
top:180px;
line-height:90px;
}


*{
margin:0;
padding:0;
}

html {
overflow-y:scroll;
}

a img{
border:none;
}

a {
outline:none;
}

#main .maincontent a{
	color:#1882CF;
}

fieldset {
display:inline;
width:98%;
border:none;
}

.clearfix {
clear:both;
height:0px;
}

.cl{
clear:left;
}
.fl{
float:left;
}

.siteright{
margin-left:8px;
}

.pink{
color:#f90057;
}


body {
text-align:center;
font-family:Verdana, Arial;
font-size:11px;
/*
background:url(../img/sky_wide.jpg) #f0f5f1 top left repeat-x fixed;
*/
background:#EEEEEE;
}


#banner {
background:url(../img/banner_black.png);
width:880px;
height:98px;
margin:0 auto 0 auto;
text-align:center;
position:fixed;
top:0;
z-index:999;
}

h1{
	width:400px;
	height:100%;
	margin:auto;
	background:url(../img/adam_alton.png) 50% 50% no-repeat;
	text-indent:-9999px;
}

h1 a{
	display:block;
	width:100%;
	height:100%;
}

/*
h1 {
background:url(../img/banner_black.png);
width:880px;
height:98px;
margin:0 auto 0 auto;
text-align:center;
font-family:Verdana, Arial;
font-size:56px;
line-height:95px;
letter-spacing:10px;
color:#48a5e9;
position:fixed;
top:0;
z-index:999;
}
*/

#shadow{

top:98px;
height:12px;
width:880px;
background:url(../img/shadow.png) center top no-repeat;
margin:0 auto;
position:fixed;
z-index:999;
}

#container{
width:880px;
margin:0 auto;
text-align:center;
position:relative;
}

#inner_container {
margin:98px auto 30px auto;
width:855px;
height:730px;/*note, this gets changed and set by javascript when the page loads*/
background:#4f4f4f url(../img/container_background_bottom.jpg) center bottom no-repeat;
/* If using drop shaddow:
width:855px;
background-image:url(../img/container_background_shaddow.png);
padding:0 12px 15px 13px;
*/
background-position:bottom center;
/*now make it sit on top of the 'loading' div*/
position:relative;
z-index:1;
}

#left, #right {
width:210px;
height:100%;
float:left;
position:relative;
padding-top:25px; /*10px more than it appears to be cos the box ends overhang by 10px*/
text-align:center;
color:white;
}

#main {
width:433px;
height:100%;
position:relative;
float:left;
padding-top:15px;
}

#main1{
height:221px;
}
#main1 .mainboxbackg{
height:181px;
}

#main2{
height:370px;
}
#main2 .mainboxbackg{
height:330px;
}



#main>div {
position:relative;
margin-bottom:20px;
width:435px;
/*height is set inline*/
background:none;
text-align:justify;
line-height:13px;
padding:23px 0 20px 0;/*20px top&bot to move .mainboxbackg away from the ends to there's no bg behind the rounded corners*/
}

#main p{
	padding:8px 0 0 0;
}

#main2 p{
	padding:5px 0;
}

#left ul{
margin-top:5px;
list-style-position:inside;
list-style-image:url(../img/blue_bullet.gif);
}
#left ul li.spaced{
margin-top:8px;
}


#left>div, #right>div {
height:205px;
width:176px;
position:relative;
margin:0 auto 30px auto;
/*background:#1b1b1b; OLD */
text-align:justify;
padding:0 0 0 0;
}

#left div a, #right div a {
text-decoration:none;
color:white; /*should be 'inherit' but IE can't cope with that*/
}
#left div a:hover, #right div a:hover {
text-decoration:underline;
}

#left a.qmark:hover {
cursor:help;
text-decoration:none;
}

#right ul{
list-style-type:none;
}

.boxbg{
background:#1B1B1B;
height:100%;
position:absolute;
top:0;
width:100%;
z-index:-2;
}

.boxtop {
background:url(../img/black_box_top_darker.png);
background-position:top center;
position:absolute;
width:176px;
height:56px;/*the image needs to be 1 pixel bigger than the space to prevent a gap appearing at the bottom of it*/
top:-10px;/*so that it overhags the box, so there's no background behind the rounded corners*/
left:0px;
z-index:-1;
}
.boxbottom {
background:url(../img/black_box_bottom.png);
background-position:bottom center;
position:absolute;
width:176px;
height:56px;/*the image needs to be 1 pixel bigger than the space to prevent a gap appearing at the top of it*/
bottom:-10px;/*so that it overhags the box, so there's no background behind the rounded corners*/
left:0px;
z-index:-1;
}
.boxcontent {
/*z-index:99;
position:absolute;*/
background:none;
padding:6px 16px 10px 16px;/*top & bottom are effectively 10px more becuase the box ends overhang*/
}


#right1.email_error .boxtop{
	background-image:url(../img/pink_box_top.png);
}
#right1.email_error .boxbottom{
	background-image:url(../img/pink_box_bottom.png);
}
#right1.email_error .boxbg{
	background-color:#f90057;
}

#right1.email_error h2{
	color:black;
}


.mainboxtop {
background:url(../img/main_box_top.png);
position:absolute;
width:435px;
height:141px;
top:0px;
left:0px;
z-index:2;
}
.mainboxbottom {
background:url(../img/main_box_bottom.png);
position:absolute;
width:435px;
height:141px;
bottom:0px;
left:0px;
z-index:2;
}
.mainboxbackg{
position:absolute;
width:100%;
/*height is set inline, it needs to be 40px less than that of the containing div*/
background:white;
z-index:1;
}
.maincontent {
z-index:99;
position:absolute;
background:none;
margin:-23px 0 -20px 0; /*to compensate for the margin in #main>div that keeps the .mainboxbackg away from the rounded ends*/
padding:15px 16px 10px 16px;
}




/************************************** INFO BOXES ***************************/


.infotop {
background:url(../img/info_box_top.png);
position:absolute;
width:200px;
height:52px;
top:-10px;/*so that the rounded corners overhang the top & there4 do not have white behind them*/
left:0px;
z-index:200;
}
.infobottom {
background:url(../img/info_box_bottom.png);
position:absolute;
width:200px;
height:52px;
bottom:-8px;/*so that the rounded corners overhang the bottom & there4 do not have white behind them*/
left:0px;
z-index:200;
}

.infocontent{
z-index:201;
position:relative;
background:none;
padding:0px 8px 10px 8px;/*top & bottom already have padding because the end/corner images overhang*/
text-align:justify;
}
.infotitle {
color:#f90057;
font-weight:bold;
}




#left li, #right li, #main2 div.maincontent>div, #right fieldset>div{
	position:relative;
}

/* non-JS users */
#noJS #left li:hover .info,
#noJS #right li:hover .info,
#noJS #main2 div.maincontent>div:hover .info,
#noJS #right fieldset>div:hover .info{
	display:block;
	left:80px;
	top:20px;
}
#noJS #left li:hover .info.left,
#noJS #right li:hover .info.left,
#noJS #main2 div.maincontent>div:hover .info.left,
#noJS #right fieldset>div:hover .info.left{
	left:-210px;
}
/* end non-JS users */

#container .info{
display:none;
position:absolute;
width:200px;
height:104px;
color:black;
z-index:999;
}

.info h3{ /*titles in info boxes*/
color:#f90057;
font-weight:bold;
font-size:11px;
}

.info>div{
z-index:201;
position:relative;
background:white;
}


/****************************************	END INFO BOXES		*********************************/

/*
blue and pink titles
*/

#left h2, #main h2{
display:block;
margin-bottom:5px;
color:#48a5e9;
font-weight:bold;
font-size:12px;
}

h2.space{
	padding:30px 0 0 0;
}


#right h2{
display:block;
margin-bottom:5px;
color:#f90057;
font-weight:bold;
font-size:12px;
}




label{
display:block;
width:100%;
}
input[type=text], textarea {
border:none;
font:inherit;
width:141px;
display:block;
padding:1px;
margin-bottom:6px;
}
input[type=text]{
background:url(../img/input_background.png);
height:16px;
}
textarea {
height:60px;
background:url(../img/textarea_background.png);
/*and for the sake of IE which can't deal with 'inherit'....*/
font-family:Verdana, Arial;
font-size:11px;
}
.inputerror{
color:#f90057;
}

#right #form_error_message{ /*only appears when the form fails validation */
position:absolute;
/*background:url(../img/pink_box_bottom.png) bottom right no-repeat;
width:146px;
height:70px;
left:15px;
top:0px;
margin-top:-100px;
z-index:99;
padding:15px;*/
text-indent:-999px;
background:none;
width:1px;
height:1px;
top:-999px;
left:-999px;
}

#right #form_error_message span{
font-weight:bold;
}

input[type=submit] {
background:url(../img/send_it_background.png);
border:none;
font:inherit;
display:block;
width:43px;
height:18px;
line-height:10px;
text-align:center;
padding:0 0 3px 0;
}

#form_controls{
width:100%;
text-align:right;
}

img.border{
border:1px solid black;
width:127px; /*195px;*/
height:107px; /*165px;*/
margin-top:5px;
}
img.support{
margin-top:5px;
}