/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
GENERAL ADVICE
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* to see where the divs are and to uncover any problems, stick a border on them i.e. border: 1px solid red; borders will add to their width so you may
need to play around with the width to see if all divs are correctly placed and styled*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
GLOBAL RESET
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* for any browser that opnes this css, this clears the default margin and padding for all standard HTML elements i.e. <p>, <h1> etc.
we reeset the margin and padding on these later.*/
*
{
margin: 0;
padding: 0;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
HELPER CLASSES
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* this helper class can be referenced on an empty div on the html to clear any floats...or you could just use float:hidden; on the containing div*/
#clear {
	clear:both;
	}
	
/* changes the opacity of nay element and anything it contains*/
.transparent_class {
        filter:alpha(opacity=10);
        -moz-opacity:0.1;
        -khtml-opacity: 0.1;
        opacity: 0.1;
}	

/* used to preload any images on the page, and makes sure thye don't appear until called by some pseudoclass hover or javascript*/
#preloader {
	position: absolute; 
	left: -9999px;
	top:  -9999px;
	}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
HTML ELEMENT STYLING
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* sets background color, background image if necessary, fonts etc. sets everything to center to fix some old IE bugs..need to remember to reset any <p> to
text-align:left;*/
body	{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	color:#fff; /*default color of text*/
	background-color: #000; /*background color....could use an image as well as this*/
	}
	
p { /* gives each paragraph 8px of space below it, none above, and makes sure they go left, overriding the text-align:center on the body, which was an IE 
	workaround*/
	margin-bottom:8px;
	text-align:left;
	color:#d8cbc5;
	}
	
	
h1{
font-size:18px;
color:#f29D35;
}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
LAYOUT
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
	
#wrapper { /* this acts as a main wrapper, or 'container' for all inner divs except the footer on this design, provides a centred container for other divs to fit in*/
	margin: 0 auto; /*step 1: set margins to auto*/
	width: 1150px; /*step 2: define a width of container which will be centred*/
	}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
HEADER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#header { /* this acts as the first element within the wrapper*/
	width: 1150px;
	height: 400px; /*need a height, as this div has no content, just a pretty background*/
	background-image: url(graphics/header.jpg);
	background-repeat: no-repeat;
	}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIN NAVIGATION
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
	
#nav { /* this acts as the second element within the wrapper*/
	width: 1150px;
	height: 50px; /*need a height, as this div has a little bit of content, but a pretty background 50px high*/
	background-image: url(graphics/fwnav.png);
	background-repeat: no-repeat;
	position:relative; /*might need this later, if we position the menu absolutely within this div*/
	}
		
#mainnav  { /* removes the silly buller point from every list item within this list*/
	list-style-type:none;
	width:900px;
	margin:auto;
	overflow:hidden;
		}
		
.mainnavitem{ /* every list item with this class gets turned from a block into an inline element, and stop requiring a new line...but with a height of 50px, this
will be useful, as there will be an <a> tag within the li element, which will be turned into a block, which will then expand to fill this 50px*/
	display:inline;
	height: 50px;
	float:left;
		}
		
#mainnav a { /* displays the a tag as a block, to make sure that the <a> tag fully takes up the 50px height of the link image...and removes the silly
underline from the link*/
	display:block;
	text-decoration:none;
	}
		
#mainnav a span{ /* turns invisible any text within the span tag within an a tag within the mainnav element - which hides the text, allowing it to be 
replaced with the background images below.*/
	visibility:hidden;
	}
	
#mainnavlink1{
    background-image:url(graphics/fwhome.png);
    width: 115px;
    height: 50px;
	}
	
#mainnavlink1:hover, #mainnavlink1.selected{
    background-image:url(graphics/fwhomeo.png);
}

#mainnavlink2{
    background-image:url(graphics/fwstrip.png);
    width: 115px;
    height: 50px;
	}
	
#mainnavlink2:hover, #mainnavlink2.selected{
    background-image:url(graphics/fwstripeo.png);
}

#mainnavlink3{
    background-image:url(graphics/fwgogo.png);
    width: 125px;
    height: 50px;
	}
	
#mainnavlink3:hover, #mainnavlink3.selected{
    background-image:url(graphics/fwgogoeo.png);
}

#mainnavlink4{
    background-image:url(graphics/fwhostess.png);
    width: 145px;
    height: 50px;
	}
	
#mainnavlink4:hover, #mainnavlink4.selected{
    background-image:url(graphics/fwhostesseo.png);
}
#mainnavlink5{
    background-image:url(graphics/fwshop.png);
    width: 130px;
    height: 50px;
	}
	
#mainnavlink5:hover, #mainnavlink5.selected{
    background-image:url(graphics/fwshopeo.png);
}
#mainnavlink6{
    background-image:url(graphics/fwps.png);
    width: 122px;
    height: 50px;
	}
	
#mainnavlink6:hover, #mainnavlink6.selected{
    background-image:url(graphics/fwpseo.png);
}
#mainnavlink7{
    background-image:url(graphics/fwkontakt.png);
    width: 100px;
    height: 50px;
	}
	
#mainnavlink7:hover, #mainnavlink7.selected{
    background-image:url(graphics/fwkontakteo.png);
}		
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIN CONTENT
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#maincontent { /* this acts as the third element within the wrapper. needs to be quite wide because of the big background image*/
	width: 1150px;
	min-height: 200px; /*min-height means the div has to be at least this high, even if empty, but allows for more if it happens*/
	background-image: url(graphics/fwmaincontent.png);
	background-repeat: no-repeat;
	}
	
#mainpage { /* this is the content area on the index page. Only 900px wide, but centred within it's container, using margin:auto;.*/
	width:900px;
	margin:auto;
	overflow:hidden; /* added this in case you use this as a container for floated children, like in a 2-column layout*/
	padding: 20px 0px 20px 0px; /* adds a bit of space between the nav and anything that comes after*/
	}
	
#intro { /* this has no width, so takes up the whole 900px of it's containers, you could float this though and add somehting else like another column*/
		background-color:#38130d;
		padding:15px;
		border: 2px solid #2b1a12;
		}
		
		.countryentrybox {
    float:left;
    width:170px;
    background-color:#38130d;
    padding:15px;
    border: 2px solid #2b1a12;
    margin-right:15px;
    margin-bottom:15px;
    }
   
.countryentrypic {
    border: 2px solid #f29d35;
    height: 160px;
    width: 160px;
    overflow:hidden;
    }
   
.countryentrytext {
    margin-top: 10px;
    height: 50px;
    overflow:hidden;
    }
   
.countryentrytext a {
    color:white;
    text-decoration:none;
	
	}
	
			.dressentrybox {
    float:left;
    width:170px;
    background-color:#38130d;
    padding:15px;
    border: 2px solid #2b1a12;
    margin-right:15px;
    margin-bottom:15px;
    }
   
.dressentrypic {
    border: 2px solid #f29d35;
    height: 200px;
    width: 160px;
    overflow:hidden;
    }
   
.dressentrytext {
    margin-top: 10px;
    height: 100px;
    overflow:hidden;
    }
   
.dressentrytext a {
    color:white;
    text-decoration:none;
	
	}



	
	.floatsidebar {
    float:right;
    width:200px;
    padding:15px;
    background-color: #2b1a12;
    border: 2px solid #f29d35;
    margin-left:15px;
    }

		
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FOOTER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
	
#footerfullwrap { /* we want a full-width footer on this site with a different color to rest of site....this div is outside the wrapper, and acts like 
the body with a full width of 100%, but with a different background which covers the width of the page*/
	width:100%; /*so the div stretches the full page*/
	min-height: 160px; /*min-height means the div has to be at least this high, even if empty, but allows for more if it happens*/
	background-color: #2b1a12;
	border-top:2px solid #3a2f2b; /*sets a nice little border on top*/
	}
	
#footercentredwrap { /* this acts like the main wrapper, provides a centred container on the footer for everything that goes inside. Use same color as footer
fullwrap to give the illusion of one full length footer*/
	margin:auto;
	width:1160px;
	background-color: #2b1a12;
	}
	
#footer { /* this acts like header, nav, main content etc....it stays centered within it's wrapper*/
	width:900px;
	margin:auto;
	background-color: #2b1a12;
	}
	
#creditswrap { /* this div acts as a wrapper for the copyright notice which will be floated left, and the designed by which will be floated right,
	uses overflow:hidden to make sure floats behave.*/
	overflow:hidden;
	}
	
#copyright { /* float the copyright notice as far left as possible within the containing div*/
	float:left;
	}
	
#design { /* float the 'designed by' as far right as possible within the containing div*/
	float:right;
	}
	
#footercontent { /* sets the margin above and below, creates a bit of space*/
	margin-top: 17px;
	margin-bottom:25px;
	width: 900px;
	}
	
	
#footernav  { /* removes the silly buller point from every list item within this list*/
	list-style-type:none;
		}
		
#footernav  li{ /* every list item on this div gets turned from a block into an inline element, and stop requiring a new line*/
	display:inline;
		}
		
#footer a { /* every a tag within the footer containing div plus it's children divs gets this color*/
	color: #c69c6c;
	}