/*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: #000000;
	}
	
p { 
	font-size:13px;
	text-align:left;
	line-height:19px;
	margin-bottom:8px;
	text-align:left;
	color:#cccccc;
	}
	
	a:link, a:active, a:visited {color: #262626; text-decoration: none}
a:hover {color: #262626; text-decoration: underline}

A:link{
  color: #262626; 
 }

A:visited{
  color: #262626; 
}

A:active
 {
  color: #262626; 
}

A:link:hover {
  color: #000000;

}

A:visited:hover {
  color: #000000;

}

A:active:hover {
  color: #000000;

}


	
/*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: 960px; /*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: 960px;
	height: 302px; /*need a height, as this div has no content, just a pretty background*/
	background-image: url(graphics/topabbelina.png);
	background-repeat: no-repeat;
	}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIN NAVIGATION
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
	
#nav { /* this acts as the second element within the wrapper*/
	width: 960px;
	height: 142px; /*need a height, as this div has a little bit of content, but a pretty background 218px high*/
	background-image: url(graphics/nav.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:610px;
	margin:auto;
	overflow:hidden;
	position:absolute;
	top:20px;
	left:350px;
		}
		
.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;
	margin-right:50px;
		}
		

/*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: 960px;
	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/fw-bg.png);
	background-repeat: x;
	}
	
#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:#000000;
		padding:15px;
		border: none;
		}
		
		
	
			
	.dressentrybox {
    float:left;
    width:170px;
    background-image:url(graphics/bg-box.png);

    padding:15px;
    border: 2px solid #c69c6c;
    margin: 10px 5px 10px 5px;
    }
   
.dressentrypic {
    border: 2px solid #c69c6c;
    height: 200px;
    width: 165px;
    overflow:hidden;
    }
   
.dressentrytext {
    margin-top: 10px;
    height: 50px;
    overflow:hidden;
    }
   
.dressentrytext a {
    color:white;
    text-decoration:none;
	
	}

.picturefront {
    border: 2px solid #c69c6c;
    margin: 10px 35px 10px 0px;
    }
	
	.picturegallery {
    border: 2px solid #c69c6c;
    margin: 5px 5px 5px 5px;
    }
   

.girlentrybox {
    float:left;
    width:820px;
    background-image:url(graphics/bg-box.png);
	overflow:hidden;
    padding:15px;
    border: 2px solid #c69c6c;
    margin: 10px 5px 10px 5px;
    }
   
.girlentrypic {
    border: 2px solid #c69c6c;
    height: 260px;
    width: 250px;
	float:left;
	margin-right: 80px;
      }
   
.girlentrytext {
	float:left;
	margin-top: 10px;
    height: 250px;
	width:230px;
    }
	
	
	.contactbox {
    float:left;
    width:820px;
    background-image:url(graphics/bg-box.png);
	overflow:hidden;
    padding:15px;
    border: 2px solid #c69c6c;
    margin: 10px 5px 10px 5px;
    }
   
.contactpic {
    border: 2px solid #c69c6c;
    height: 170px;
    width: 170px;
	float:left;
	margin-right: 80px;
      }
   
.contacttext {
	float:left;
	margin-top: 10px;
	margin-bottom: 10px;
    height: 140px;
	width:500px;
    }
   

	
	
	.floatsidebar {
    float:right;
    width:200px;
    padding:15px;
    background-image: url(graphics/fw-box.png);
    border: 1px solid #333333;
    margin-left:15px;
    }

		
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
FOOTER
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
	

	
#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:960px;
	background-color: #000000;
	}
	
#footer { /* this acts like header, nav, main content etc....it stays centered within it's wrapper*/
	width:960; /*so the div stretches the full page*/
	height: 33px; /*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/footer.png);
	}
	
#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;
	}