/*
Body
    Header area
        Header middle
    Body area
        Text part of body
        list part in own style sheet BodyListItems
    Footer area
        Stuff for mums and dads
        Visting trafford centre
General Items
*/


* { margin: 0; padding: 0; }

body
{
    font-family: Arial;
    font-size:100%;
    background-color: #CC0000;
    background: #CC0000 url(/img/bodybackground.gif);
}

img{ border: 0;}


/*Freeform templates*/


	.oneCol{width: 544px; margin-bottom: 10px; float: left;}
	
	.twoCols{width: 544px; }
		.twoCols .leftCol{width: 271px; float: left;}
		.twoCols .rightCol{width: 271px; float: right; }
		
	.twoColsOdd{width: 544px; }
		.twoColsOdd .leftCol{width: 308px; float: left;}
		.twoColsOdd .rightCol{width: 234px; float: right; }
		
	.twoColsOddHeavyLeft{ width: 550px;}
		.twoColsOddHeavyLeft .leftCol{width: 366px; float: left;}
		.twoColsOddHeavyLeft .rightCol{width: 176px; float: right; }

		
	.twoColsPicture{width: 544px; }
		.twoColsPicture .leftCol{width: 271px; float: left;}
		.twoColsPicture .rightCol{width: 271px; float: right; text-align: right; margin-right: -6px; }


/*The main body area*/
#mainBody
{
    width: 754px;
    margin: auto;
    padding: 10px 0 10px 0;
}

    /*The header area*/
    #divHeader
    {
        width: 754px;
        height: 136px;
        padding: 15px 5px 0 5px;
        background: transparent url(/img/BGTop.gif) no-repeat;
    }
    
        /*Middle bit of the header*/
        h1.HelloFriendsHeader { width: 428px; height: 136px; background: transparent url(/img/HelloFriendsHeader.png) no-repeat; float: left;}
        h1.HelloFriendsHeader a { height: 136px; width: 428px; display: block; cursor: hand;  z-index: 2; position: relative; top: 0; left: 0;}
        h1.HelloFriendsHeader a span{ background-color: Red; margin: 0 0 0 -2000px;}
    
        /**/
        .divHeaderMiddle
        {
            width: 428px;
            height: 136px;
            float: left;
            position: relative;
        }
        
        .divHeaderWelcomeText
        {
            position: absolute;
            top: 0;
            right: 0;
            color: #999999;
            font-weight: bold;
            font-size: 110%;
        }
        
        .divHeaderHeaderText h1 span
        {
            display: block;	width: 0; height: 0; overflow: hidden;
        }
        
        .divHeaderHeaderText
        {
            position: absolute;
            top: -5px;
            left: 0;
            height: 104px;
            width: 376px;
            background: transparent url(/img/headers/hellofriends.png) no-repeat;  
            z-index: 2;
            
        }
        
        .divHeaderLogout
        {
            position: absolute;
            bottom: 0px;
            right: 0;
            width: 421px;
            height: 58px;
            background: transparent url(/img/logout.gif) no-repeat; 
            z-index: 1;           
        }
        
        .divHeaderLogin
        {
            position: absolute;
            bottom: 0px;
            right: 0;
            width: 421px;
            height: 58px;
            background: transparent url(/img/login.png) no-repeat; 
            z-index: 1;           
        }
        
        .divHeaderLogout h4, .divHeaderLogin h4
        {
            z-index: 2;
        }
        
        .divHeaderLogout h4 a span, .divHeaderLogin h4 a span
        {
            display: block;	width: 0; height: 0; overflow: hidden;
        }
        
        .divHeaderLogout h4 a, .divHeaderLogin h4 a
        {
            width: 421px;
            height: 58px;
            display: block; cursor: hand;  z-index: 2; 
            position: relative; top: 0; left: 0;
        }
    
    
    /*Body area*/
    #divMainOutterBody /*we need this for the background*/
    {
        width: 754px;
        padding: 0px 5px 0px 5px;
        float: left;
        background:  url(/img/BGBody.gif) repeat-y;
    }
    
        /*the right side for the other pages*/
        
        #divRightSide
        {
            width: 174px;
            float: left;
            padding-top: 0px;
            font-size: 70%;
            font-weight: bold;  
          
        }
        
            /*if they have a list set the style here*/
            #divRightSide ul
            {
			 
            }
            
            #divRightSide ul li ul li
            {
                padding-left: 30px;
                width: 154px;   
            }
            
            /*could just be a p tag so set the style here*/ 
            #divRightSide ul li p
            {
                padding-left: 30px;
                padding-right: 20px;
                width: 134px;   
            }
    
        /*The text part of the body for the homepage*/
        #divBodyText
        {
            width: 170px;
            float: left;
            padding: 0 5px 0 5px;    
        }

        h2.WelcomeToMyWebsite
        {
            width: 174px;
            height: 107px;
            background: transparent url(/img/WelcomeToMyNewWebsite.png) no-repeat;
        }

        h2.WelcomeToMyWebsite span
        {
             margin: 0 0 0 -2000px;
        }
        
        .contentAreaHome
        {
            background: #ffffff url(/img/homepage/contentBG.gif) no-repeat;
            width: 568px;
            min-height: 436px;
            float: right;
        }
        
        .contentArea
        {
            
            width: 568px;
            min-height: 518px;
            float: right;
            
        }
        
        .mainBodyTopBG
        {
            height: 15px;
            width: 568px;
            background: #ffffff url(/img/mainBodyBGTop.gif) no-repeat;
            margin: 0;
            padding: 0;            
        }
        
        .mainBodyCenter
        {
            padding: 0 8px 0 8px;
            margin: 0;
            background: #ffffff url(/img/contentBGmain.gif) repeat-y;
        }
        
        .mainBodyBottomBG
        {
            height: 15px;
            width: 568px;
            background: #ffffff url(/img/mainBodyBGBottom.gif) no-repeat;
            
        }
        
        /*The right list is in its own sheet BodyListItems.css*/
        
        /*We need the stlyes for the text and items in the main body area*/
        .mainBodyCenter
        {
            color: #333333;
            font-weight: bold;
            font-size: 90%;   
        }


    /*Now lets have the stuff for the footer*/
    #divFooter
    {
        width: 754px;
        height: 75px;
        clear: both;
        padding: 15px 5px 3px 5px;
        background: transparent url(/img/BGBottom.gif) no-repeat bottom left;
    }
    
        /*On the left stuff for mums and dads*/
        h3.StuffForMumsAndDads
        {
            background: transparent url(/img/StuffForMumsAndDads.png) no-repeat;
            height: 75px;
            width: 353px;
            float: left;    
        }

        h3.StuffForMumsAndDads a
        {
            height: 75px; width: 351px; display: block; cursor: hand;  z-index: 2; position: relative; top: 0; left: 0;
        }

        h3.StuffForMumsAndDads a span
        {
            margin: 0 0 0 -2000px;
        }
        
        /*on the right part about visiting barney*/
        h4.ComeAndMeetBarneyBear
        {
            background: transparent url(/img/ComeandmeetBarney.png) no-repeat;
            height: 75px;
            width: 401px;
            float: right;
        }
        h4.ComeAndMeetBarneyBear a
        {
            height: 75px; width: 399px; display: block; cursor: hand;  z-index: 2; position: relative; top: 0; left: 0;
        }

        h4.ComeAndMeetBarneyBear a span
        {
            margin: 0 0 0 -2000px;
        }


/*ok stuff that we use across the site here*/
.imgFloatLeft
{
    float: left;
}

.imgFloatRight
{
    float: right;
}

.clearer
{
    clear: both;
}

.freeform img.left		{ margin:0 15px 15px 0; border:none; float:left; }
.freeform img.right		{ margin:0 0 15px 15px; border:none; float:right; }




/*this is the menu above the content area*/
.contentAreaMenu{width: 555px; height: 34px; padding-left: 9px; padding-top: 10px;}

.contentAreaMenu ul{list-style: none; display: block;}

.contentAreaMenu ul li { float: left; display: inline;	list-style-type: none;}

.contentAreaMenu ul li.things{height: 34px; width: 102px; background: transparent url(/img/menu/thingstodo.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.things a { height: 33px; width: 102px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.things a span {display: block;	width: 0; height: 0; overflow: hidden;}

.contentAreaMenu ul li.club{height: 34px; width: 80px; background: transparent url(/img/menu/theclub.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.club a { height: 34px; width: 80px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.club a span {display: block;	width: 0; height: 0; overflow: hidden;}

.contentAreaMenu ul li.stuff{height: 34px; width: 91px; background: transparent url(/img/menu/yourstuff.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.stuff a { height: 34px; width: 91px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.stuff a span {display: block;	width: 0; height: 0; overflow: hidden;}
    
.contentAreaMenu ul li.web{height: 34px; width: 99px; background: transparent url(/img/menu/ontheweb.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.web h3 a { height: 34px; width: 99px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.web h3 a span {display: block;	width: 0; height: 0; overflow: hidden;}
    
.contentAreaMenu ul li.news{height: 34px; width: 71px; background: transparent url(/img/menu/news.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.news a { height: 34px; width: 71px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.news a span {display: block;	width: 0; height: 0; overflow: hidden;}
    
.contentAreaMenu ul li.comp{height: 34px; width: 106px; background: transparent url(/img/menu/competition.gif) no-repeat; z-index: -1;}
    .contentAreaMenu ul li.comp a { height: 34px; width: 106px; display: block; cursor: hand;  z-index: 2; }
    .contentAreaMenu ul li.comp a span {display: block;	width: 0; height: 0; overflow: hidden;}