/* CSS Document */

/* 
COLOURS
-------------------------
Hairforce Purple #7C2B83
Hairforce 50% Tint #AF88B6
Hairforce 30% tint #E6D5E7
-------------------------
*/

body {
font-family:Houschka, Arial, Helvetica, sans-serif;
/*font-size:11px;
line-height:15px;*/
font-size:11px;
line-height:13px;
color:#7C2B83;
height: 100%;
}

H1{
font-family:Houschka, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:14px;
color:#7C2B83;	
}

H2{
font-family:Houschka, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:13px;
color:#7C2B83;	
}

	
#container {
width:765px;
/*border:2px solid #B088B5;*/
margin:20px auto;
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:10px;
height:auto;
}

#titlelogo {
width:160px;
height:102px;
float:left;
margin-right:10px;
background-image:url(images/hairforcelogo.gif);
background-repeat:no-repeat;
}

#titlecontact {
width:270px;
height:102px;
float:left;
background-image:url(images/hairforcecontactdetails.gif);
background-repeat:no-repeat;

}

/* New banner div for the link to Arm Yourself */
#bannerspace {
width:310px;
height:91px;
padding:11px 0 0 10px;
float:left;
background-image:url(images/HFbanner_bg.gif);
background-repeat:no-repeat;
}

.spacer {
width:760px;
clear:both;
}

.spacer_base {
width:760px;
height:1px;
clear:both;
background-image:url(images/spacer_base.gif);
background-position:right;
background-repeat:no-repeat;
}

.spacer_enemy {
width:760px;
height:0;
clear:left;
}

.spacer_summon {
width:760px;
height:1px;
clear:both;
background-image:url(images/spacer_summon.gif);
background-position:right;
background-repeat:no-repeat;
}

.spacer_ref {
clear:both;
}

#navbar {
width:160px;
height:100%;
background-image:url(images/navbar_bg.gif);
background-repeat:repeat-y;
float:left;
margin-right:10px;
display:block;
/*position:relative;*/
}

/* Bit of a structural change needed on the reference page to accomodate the scaling visor beam - 05/05/07 */

#navbar_brief {
width:160px;
height:600px;
background-image:url(images/navref_bg.gif);
background-repeat:no-repeat;
background-position:bottom;
float:left;
margin-right:10px;
display:block;
/*position:relative;*/
}


/* GWG Award (keep until october) */

.goodwebsite {
width: 120px;
height:60px;
float: left;
padding: 0;
margin: 20px;
display: inline;
}

img.gwg {
border: 0;
}

/* Social media buttons */
.socialmedia {
width:140px;
margin:10px 0;
border:0;
/*display:inline;*/
padding-left:10px;
}

.socialmedia img, .socialmedia a {
border:0;
}

#copyblock {
width:590px;
height:100%;
/*background-image:url(images/maincontent_bg.gif);*/
background-repeat:repeat-y;
float:left;
display:block;
}

#copyblockbase {
border-top: 2px solid #7C2B83; 
	padding-top: 30px;
	display: block;
	float: left;
	width: 588px;
	background-image:url(images/maincontent_bg_base.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	height: 100%;
	position:relative;
}

#copyblockenemy {
width:590px;
height:100%;
background-image:url(images/maincontent_bg_enemy.gif);
background-repeat:no-repeat;
background-position:bottom;
float:left;
display:block;
/*position:relative;*/
}

#copyblocksummon {
width:590px;
height:100%;
background-image:url(images/maincontent_bg_summon.gif);
background-repeat:no-repeat;
background-position:bottom;
float:left;
display:block;
}

/* Added 08/10/08 by Dan Dineen */
#copyblockarmyourself {
width:590px;
height:100%;
background-image:url(images/maincontent_armyourself_bg.gif);
background-repeat:no-repeat;
float:left;
display:block;
}

/* Additional title block to facilitate the overlaying on the Arm Yourself page */
#armyourselftitle {
width:590px;
height:135px;
}

.armed {
margin:0 0 30px 10px;
padding:0;
}

.armed li {
margin-bottom:10px;
}

/* Spaces out the indented list on the Arm yourself page */
.armed li ul {
margin:10px 0;
}



/* Position the navbar and copyblock bottoms at the bottom of the relevant areas */

#navbarbottom {
width:160px;
height:20px;
float:left;
margin-right:10px;
}

#copyblockbottom {
width:590px;
height:20px;
float:left;
}

#copyblockbrief {
	border-top: 2px solid #7C2B83; 
	padding-top: 30px;
	display: block;
	float: left;
	width: 588px;
	height: 100%;
	overflow: visible;
	margin-left: 2px;
	background-image: url(images/maincontent_bg_briefing.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#briefinglowerbar {
	position: relative;
	top: -20px;
	display: block;
	z-index: 1;
}
/* Text columns */

.columnonebase {
width:280px;
height: 100%;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnoneexp {
width:280px;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnoneassassin {
width:280px;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnonebrief {
width:280px;
height: 100%;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnonebrief p {
font-size:14px;
color:#FFFFFF;
line-height:17px;
}

.columnone_enemy {
width:280px;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnonesummon {
width:280px;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnonesupport {
width:280px;
margin: 0 30px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

.columnoneresponse {
width:310px;
margin: 0 0px 10px 0;
padding-left: 20px;
float:left;
display:block;
}

#responsenav {
width:570px;
height:30px;
padding-left:20px;
margin-bottom:20px;
}

/*.columntwo {
width:240px;
height:300px;
margin-top:20px;
float:left;
}*/
.columntwoassassin {
width:171px;
height:595px;
margin-top:0px;
margin-left:40px;
float:left;
background-image:url(images/assassinationkit/assassination_stripe.gif);
background-position:left;
background-repeat:no-repeat;
}

.columntwolice {
width:187px;
margin-top:0px;
margin-left:20px;
float:left;
}

.columntwoexperience {
width:230px;
margin-top:0px;
margin-left:10px;
float:left;
text-align:center;
}

.columntwosupport {
width:234px;
margin-top:0px;
margin-left:0px;
float:left;
}

.columntwosummon {
width:120px;
margin-top:0px;
margin-left:80px;
float:left;
}

.columntworesponse {
width:205px;
margin-top:0px;
margin-left:20px;
float:left;
}

H1 {
font-family:Houschka, Arial, Helvetica, sans-serif;
font-size:13px;
line-height:17px;
font-weight:bold;
color:#7C2B83;
margin-top: 0px;
margin-bottom:0px;
}

p {
margin-top:10px;
margin-bottom:5px;
}

#doublecolcontainer {
width:760px;
background-image:url(images/doublecol_bg.gif);
background-repeat:repeat-y;
/*position:relative;*/
}

#button {
width: 116px;
height: 116px;
position: relative;
top: -250px;
left: 20px;
z-index: 1;
}

#button_alt {
width: 116px;
height: 116px;
position: relative;
top: -220px;
/*top: -500px;   Updated to fit in with the new multi-circle layout */ 
left: 20px;
z-index: 1;
}

.kitpics {
width:116px;
margin-left:55px;
}

/* Special right hand sade for the Briefing section */

#briefingright {
width:25px;
height:598px;
float:left;
background-image:url(images/brief_right_bg.gif);
background-position:bottom;
background-repeat:no-repeat;
border-top:2px solid #7C2B83;
}

/* DIVs for the Pop windows */
#popchair {
width:340px;
height: 357px;
display: none;
top:38%; left:38%;
position:fixed;
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}
 
#poppsp {
width:340px;
height: 357px;
display:none;
left:38%; 
top:38%; 
position:fixed; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}

#poplight {
width:340px;
height: 357px;
display:none;
position:fixed; 
left:38%; 
top:38%; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}

#popvisor {
width:340px;
height: 357px;
display:none;
position:fixed; 
left:38%; 
top:38%; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}


#popsucker {
width:340px;
height: 357px;
display:none;
position:fixed; 
left:38%; 
top:38%; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}


#poppouch {
width:340px;
height: 383px;
display:none;
position:fixed; 
left:38%; 
top:38%; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}


#poptweezers {
width:340px;
height: 370px;
display:none;
position:fixed; 
left:38%; 
top:38%; 
border: solid 1px #7C2B83; 
background-image:url(images/pops/pop_bg.gif);
background-repeat:repeat-y;
}

/* odd little fix for ie */
* html #popchair { position:absolute; }
* html #poppsp { position:absolute; }
* html #poplight { position:absolute; }
* html #popvisor { position:absolute; }
* html #popsucker { position:absolute; }
* html #poppouch { position:absolute; }
* html #poptweezers { position:absolute; }

.poptext p {
color:#FFFFFF;
margin:0px 20px 0px 20px;
font-size:10px;
padding:0px;
}

#hairforcemap {
width:495px;
padding:5px;
background-color:#FFFFFF;
display:none;
position:absolute; 
left:50%; 
top:50%; 
border: solid 1px #7C2B83; 
}

.hairforceform input, textarea, select {
background-color:#E6D5E7;
border:1px solid #7C2B83;
color: #7C2B83;
font-size:11px;
padding:3px;
font-family:Houschka, Arial, Helvetica, sans-serif;
}

.hairforceform #feedback .button {
background-image:url(images/spreadtheword_butt.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#FFFFFF;
border:0px;
height:40px;
color: #7C2B83;
width: 100%;
}

.hairforceform #contactus .button {
background-image:url(images/sendemail_butt.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#FFFFFF;
border:0px;
height:40px;
color: #7C2B83;
}

.hairforceform #register .button {
background-image:url(images/btn_register.gif);
background-position:center;
background-repeat:no-repeat;
background-color:#FFFFFF;
border:0px;
height:40px;
color: #7C2B83;
}

.smalltext {
font-size:10px;
/*font-style:italic;*/
}

/* Bottom bar text nav */
#textnav {
text-align:center;
display: block;
line-height:15px;
}

.textnav_spacer { margin-top:20px; }

#textnav a:hover, #textnav a:active {
color:#AF88B6;
text-decoration:underline;
}


#textnav a:link, #textnav a:visited {
color:#7C2B83;
text-decoration:underline;
}

/* Hairforce on TV pop up window */

#hairforcetv, #hairforcetv2 {
width:320px;
padding:5px;
background-color:#FFFFFF;
display:none;
position:absolute; 
left:65%; 
top:50%; 
border: solid 1px #7C2B83; 
}

#hairforcetv img, #hairforcetv2 img {
border:0px;
}


/* Hairforce hotline pop up window */
#hotline {
width:320px;
padding:5px;
background-color:#FFFFFF;
/*display:none;*/
position:absolute; 
left:60%; 
top:25%; 
border: solid 6px #7C2B83;
text-align:center; 
}

#hotline img {
border:0px;
}

#hotline p {
margin:10px 0;
}

#hotline h1 {
font-size:16px;
}


/* Standard links colours */
a:link {
color:#7C2B83;
text-decoration:underline;
}

a:hover {
color:#AF88B6;
text-decoration:underline;
}
a:active {
color:#AF88B6;
text-decoration:underline;
}

a:visited {
color:#7C2B83;
text-decoration:underline;
}

/* Briefing links - white! */
.whitelink a:link {
color:#FFFFFF;
text-decoration:underline;
}

.whitelink a:hover {
color:#AF88B6;
text-decoration:underline;
}

.whitelink a:active {
color:#AF88B6;
text-decoration:underline;
}

.whitelink a:visited {
color:#AF88B6;
text-decoration:underline;
}

/* PayPal shop page */
.HFproduct {
width:170px;
margin:0 18px 20px 0;
float:left;
display:inline;
}

.firstproduct {
margin-left:20px;
}

.HFproduct img {
margin-bottom:10px;
}

.HFproduct h1,p {
margin:0 0 5px 0;
}

.HFproducttext {
width:160px;
padding:0 5px;
}

.widetitleblock {
width:570px;
margin: 0 0 10px 0;
padding-left: 20px;
}

/* I want a simple one of these just to clear the floated DIVs in the shop */
.clearer {
clear:both;
}

/* Small italic copy for the comb page */
.fineprint {
font-size:1em;
font-style:italic;
margin:0;
}

/* A small tweak to get the spacing correct if a paragraph comes directly under a title as on the new cost page */
img + p {
margin-top:10px;
}

/* Home page badges */

#homepagebadges {
width:210px;
/*padding:5px;*/
background-color:#FFFFFF;
position:relative; 
/*left:61%; 
top:29%;*/
left:-35px;
top:10px;
float:right;
}

#homepagebadges a img {
border:0;
}