body 
{
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px; /* Site design requires no margin */
    padding: 0px 0px 0px 0px; /* Remove Firefoxs default 2px window padding */
    background: url('images/layout_green/background2.jpg') fixed repeat-x bottom left; /* Alter to Top Left to view more white space */
}

/* Outer Container - Used to center the next div in Firefox */
.outer-container 
{
    z-index: 0;
    width: 100%;
    height: 100%; 
    text-align: center; /* IE hack to center divs */
    margin: 0 auto; /* Firefox hack to center divs */
}

/* Center Strip - Adds white background and drop shadows */
.center-strip 
{
    z-index: 2;
    width: 1000px; /* Most used screen resolution */
    height: 100%;
    background: url('images/layout_green/body_background.png') repeat-y center top; /* .GIF incase of old browser (LOW QUALITY) */
    margin: 0 auto; /* Firefox hack to center divs */
    text-align: left
}

/* Spacer -  */
.spacer 
{
    z-index:2;
    position: relative;
    width: 101%;
    padding: 100px 0px 0px 0px;
    height: 200px;
}

/* Pad Text - Can't apply padding to outer div so use a span instead */
.padtext 
{
    padding: 0px 40px 0px 40px
}

/* Pad logo */
.padlogo 
{
    padding: 0px 0px 0px 40px
}

/* Top Curve - Apply the orange curve to the center element only */
.topcurve 
{
    position: absolute;
    width: 100%;
    height: 154px;
    top: 0;
    background: url('images/layout/top_curve.gif') no-repeat center top; /* .GIF incase of old browser (LOW QUALITY) */
}

/* Add Padding */
.addpadding 
{
    padding: 2px 24px 0px 26px;
}

/* Menu */
.menu 
{
    z-index: 2; /* Without this the menu will fall behind the topcurve element */
    position: relative; /* Without this the menu will fall behind the topcurve element */
    width: 100%;
    height: 60px; /* Add extra 3px for padding */
    text-align: center; /* Center Table in IE */
    margin: 0 auto; /* Center Table in Firefox */
}

/* Menu Item */
.menuitem 
{
    z-index: 2; /* Without this the menu will fall behind the topcurve element */
    width: 20%;
    position: relative; /* Without this the menu will fall behind the topcurve element */
    height: 60px; /* Add extra 3px for padding */
    background: url('images/layout/menu_tab.jpg') no-repeat center top;
}

/* Render Text - Without this the same problem as the menu will arise for the whole document */
.rendertext 
{
    z-index: 2; /* Without this, this element will fall behind the topcurve element */
    position: relative; /* Without this, this element will fall behind the topcurve element */
    width: 100%
}

/* Categoru Menu Holder - Using a table instead of divs else we get problems with the dynamic building of the menu */
.categorymenu
{
    z-index: 2; /* Without this, this element will fall behind the topcurve element */
    position: relative; /* Without this, this element will fall behind the topcurve element */
    width: 100%
}

.catmenu
{
    z-index: 2; /* Without this, this element will fall behind the topcurve element */
    position: relative; /* Without this, this element will fall behind the topcurve element */
    width: 10%;
    text-align: center;
    margin: 0 auto;
    padding: 0px 20px 0px 35px
}

.displayimage
{
    z-index: 2; /* Without this, this element will fall behind the topcurve element */
    position: relative; /* Without this, this element will fall behind the topcurve element */
    text-align: left;
    padding: 0px 0px 0px 0px
}

/* Latest News */
.latestnews 
{
    width: 235px;
    height: 56px;
}

/* Spacer For The Category Menu */
.spacerwizard
{
    width: 100%;
    height: 20px
}

/* The top part of the cateogry menu */
.wizardtop
{
    width: 233px;
    height: 52px;
    background: url('images/layout/catmenu_top.jpg') no-repeat center top; 
}

.catmenutop2
{
    width: 233px;
    height: 52px;
    background: url('images/layout/catmenu_top2.jpg') no-repeat center top; 
}

/* The bottom part of the category menu */
.wizardbottom
{
    width: 233px;
    height: 17px;
    background: url('images/layout/catmenu_bottom.jpg') no-repeat center top;
}

/* Center part of the tile menu */
.wizardtile 
{
    width: 233px;
    background-color: #ff6021;
    text-align: left
}

/* Indent Menu Item */
.indentcatmenuitem 
{
    width: 90%;
    text-align: left;
    padding-left: 20px
}
.spacerwizardinner 
{
    width: 100%;
    height: 15px
}

/* Content Spacer */
.contentspacer1 
{
    width: 100%;
    height: 20px
}

#contenttable 
{
    width: 97%;
}

/* Wizard */
.wizard 
{
    width: 30%;
    text-align: left;
    padding-left: 35px; /* Needs padding to move it off the drop shadow */
}

/* Content Right */
.contentright 
{
    width: 70%;
    text-align: left
}

/* Hold Text - Needed to apply padding to text effectively in IE */
.holdtext 
{
    width: 85%;
    text-align: justify;
    padding-left: 25px; /* Needs padding to move it off the drop shadow */
}

/* Google Checkout Button */
.gcheckout 
{
    width: 100%;
    background-color: #ffffff;
    padding-left: 25px;
    padding-top: 25px;
}

/* Footer */
.footer 
{
    width: 100%;
    height: 170px;
    padding: 0px 0px 0px 25px; /* Keep this padding! */
}

/* Footer Rule - Don't use a HR as it doesn't obey padding in IE */
.footerrule 
{
    width: 955px;
    height: 8px;
    background-color: #b4b1af
}

/* Float Left */
.floatleft 
{
    width: 40%; /* Do not split % equally E.G 50% each, as the float will overlap */
    float: left;
    padding-left: 10px;
    position: relative; /* In case of links */
    text-align: justify;
    z-index: 2 /* In case of links */
}

/* Float Right */
.floatright 
{
    width: 40%; /* Do not split % equally E.G 50% each, as the float will overlap */
    float: right;
    position: relative; /* In case of links */
    text-align: right;
    padding-right: 55px;
    z-index: 2 /* In case of links */
}

/* Footer Menu */
.footermenu-container 
{
    width: 100%;
    height: 45px;
    text-align: center;
    margin: 0 auto; /* Firefox center, don't need for text but i might end up usign a element in the footer */
    position: relative; /* Keep menu on top of the curve */
    z-index: 2 /* Keep menu on top of the curve */
}

/* Menu Layer */
.menulayer 
{
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Contact Page */
.contactdetails
{
    width: 100%
}
.contactdetailsleft 
{
    width: 50%;
}
.contactdetailsright
{
    width: 50%;
}

/* Curve Menu - Not orginally in the design but without it you can't go back to the homepage?? */
.aligncurvemenu 
{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    top: 0;
    height: 154px;
    position: absolute;
    z-index: 1; /* Places div above all other elements */
}
.curvemenu 
{
    padding-top: 3px;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 154px;
    top: 0;
    z-index: 99; /* Places div above all other elements */
}
.choosermaintop 
{
    width: 323px;
    height: 5px;
    background-image: url('images/layout/choosermain_top.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
}
.choosermaintile 
{
    width: 323px;
    height: 5px;
    background-image: url('images/layout/choosermain_tile.jpg');
    background-repeat: repeat-y;
    background-position: center top;
    text-align: center;
}
.choosermainbottom
{
    width: 323px;
    height: 5px;
    background-image: url('images/layout/choosermain_bottom.jpg');
    background-repeat: no-repeat;
    background-position: center top;
}

/*Default style for SPAN icons. Edit if desired: */

.iconspan
{
    float: right;
    margin: 3px;
    cursor:hand;
    cursor:pointer;
    font-weight: bold;
}