/* CSS Document */
/*these styles control the body and the header styles - banner, nav bar etc*/
body {
  margin: 0;
  padding: 0 ;
  font-family: arial ;
  font-size: 100% ;
}

#banner1 { /*pink banner that goes along the whole top edge of the screen*/
  height: 170px ;
  background-color: #de1067;
  margin-top: 0 ;
  padding-top: 0 ;
}

#header { /*header is the section over the banner that matches */
/*the width of the main content div to make logo and title appear in line*/
  width: 55em ;
  min-width:750px;
  max-width:970px;
  height: 168px ;
  margin: 0 auto 0 auto ;
  background-color: #de1067;
  border: 1px #de1067 solid ; /*forces the banner to reamin at very top of page without it the banner will drop down - don't know why yet?*/
}

#logo {
 /* background-image: url('../images/logo3.gif');*/
  height: 143px ;
  width: 173px ; 
  margin-top: 16px ; 
}


#title { /*div that contains the image of the catchphrase - find it at Fashion Factory*/
  float: right ;
  height:58px;
  width:455px;
  margin-top: 100px ; 
  background-image:url('../images/title1.png');
  _display:none;
}


/*styles for the navigation bar*/
#nav_bar { /*relates to the containing div*/
  background-color: #f67aae;
  width:100%
}

div#nav_bar div { /*inner div centers the navigation*/
  width: 55em ; /*is smaller than the main content and banner wrapper width*/
  background-color: #f67aae;/*to accomadate horizontal scrolling*/
  margin: 0 auto ;
  max-width:970px;
}

#nav_bar ul {  /*floated inside the inner div to contain the floated li elements*/
  list-style-type: none ;
  font-weight: bold ;
  text-transform: uppercase ;
  float:left;
  margin:0;
  font-size:0.9em;
  margin-left:9em;
  max-width:620px;
}

#nav_bar li {
 float:left;
}

#nav_bar li a {
  color: #fafafa;
  text-decoration: none ; 
  display: block ;
  padding: 7px ; 
}

#nav_bar li a:hover, #nav_bar li a:focus {
  background-color: #de1067  ; 
}

.selected { /*highlights the current selection (with Jquery)*/
  background-color: #de1067 ;
}


/*styles for the footer*/
#footer {
  margin-top: 25px ; 
  background-color: #000 ;/*this color will only extend along width of window not past horizontal scroll*/
                          /*see below*/
  padding-bottom:0;
  width:100%;
}

#footer_text { /*centers the footer text*/
  padding-top: 12px ; 
  width: 55em ;/*same as header*/
  min-width:750px;
  max-width:970px;
  margin: 0 auto 0 auto ;
  background-color: #000 ;/*also needs background color to accomadate horizontal scrolling*/
}

#footer p { /*covers both footer paragraphs*/
  padding-right:9px;
  padding-left:12px;/*padding is to align the footer p more with the logo and title in the header*/
  margin-top:0;
  font-size:0.9em;
}

#footer p.float_right { /* puts the whole address to the right hand side and makes bits not in a span tag white*/
  color:#FFF ;
  float:right ;
  margin-top:0;
  margin-right:4px;
}

#footer a {
  color: #FFF ;
  text-decoration: none ; 
}

#footer a:hover, #footer a:focus {
  color: #de1067;
  text-decoration: underline ;
}

#footer span { /*creates the pink highlights*/
  color: #de1067 ; 
}