/* CSS Document */

/*generic styles applying to the content area across all pages*/
.clear {
  clear:both ;
}

#content { /*content div - same width as header div*/
  width: 59.8em ;/*to nearly equal the width of the header and footer text div's with a lower em value for text*/
  margin: 0 auto 0 auto ;
  padding-left:12px;
  padding-right:7px ; 
  margin-top:28px ; 
  font-size:0.9em;
  line-height:1.3em;
  min-width:730px;
  max-width:950px;
}

#content h1 {
  font-size: 1.2em ;
}

#content h2 {
  font-size: 1em ;
  color: #de1067;
}

.capitals { /*applied to anything needing capitals*/
 text-transform:uppercase ;
}


#content a { /*highlights key words in pink */
  color: #de1067;
}

#content a:hover, #content a:focus {
  color:#616060;
}

p.firstP { /*pushes down paragraphs with class firstP*/
  margin-top: 20px ; 
}

.move_up { /*to move up any item*/
  margin-top:4px;
}

img {
  border:none;
}


/*styles specificaly relating to those on the index page.*/

/*the following styles create the slideshow on the index page*/
div.slideshow_container {
  width:318px;
  height:368px;
  position:relative;
}
ul#slideshow {
  list-style:none;
  width:290px;
  height:304px;
  overflow:hidden;
  position:relative;
  padding:0;
  margin:0;
  border: 14px solid #000;
  border-bottom: 50px solid #000;
  z-index:1;
}
ul#slideshow li {
  position:absolute;
  left:0;
  top:0;
}
ul#slideshow li.show {
  z-index:500;
}
ul img {
  border:none;
}
div#slideshow-caption {
  width:318px;/*width of image 290 + 15 + 15(plus padding)= 320*/
  height:50px;
  position:absolute;
  color:#fff ;
  background-color:#000 ;
  z-index:700;
}
#slideshow-caption p.style {
  float:left;
  width:170px;
  margin:5px;
  margin-left:15px;
  text-transform:uppercase;
  font-size:1em;
}
#slideshow-caption p.photographer {
  text-align:right;
  font-size:0.799em;
  margin:5px;
  margin-right:15px;
  line-height:1.3em;
}
#slideshow-caption p.photographer a {
  color:#fff;
}
#slideshow-caption p.photographer a:hover, #slideshow-caption p.photographer a:focus {
  color:#cecbcb;
}


/*holds the slideshow and any competition/offers*/
div#front_image {
  float:left;
  margin-right:20px ; 
  width:319px;
}

img#offers {/*competition or offers image below slideshow*/
  display:block;
  margin:19px auto 0 auto;
}

p#offer_disclaimer {
  position:relative;
  top:20px;
}

#map_info { /*div that holds both the find-us info and the map - to keep them aligned*/
  float:left;
  width:30em;
  margin-top:12px;
  min-width:400px;/*to keep both map and find us info in same place at smallest text size in IE
                  cannot be more than 412px as the min width for content div is 750px and the main
                  image on left is 318px with a 20px margin (338px)*/
}

#find_us { /*div that holds the find us info*/
  width:10em;
  color:#343535;
  line-height:1.2em;
  float:left; 
}

#find_us h4 {
  border-bottom:1px #de1067 solid; /*creates an underline under the header*/
  font-weight:normal ;
  font-size: 1.2em ; 
  padding-bottom: 2px ;
  margin-top:0;
  margin-bottom:0;
}

#find_us p {
  margin-top:10px;
}

.orange_highlight {
  color: #dc7404;
  font-weight:bold ;
  font-size:0.9em ; 
}

#small_map {/*div that holds the small map and caption*/
  width:258px;
  float:right;
  text-align:center;
}

#small_map p {
  margin-top: 4px ; 
}





/*styles for the prom and evening wear pages*/
#proms_info { /*holds all the info on the left side of the page*/
  width: 27em ; 
  max-width:400px;
  float:left; 
  margin-right:15px;
  padding-right:2px;
}

#supp_info { /*div that holds the intro paragraph at the top left of the page*/
  margin-bottom:25px;
}

#supp_info a { /*the links that allow for switching of the supplier*/
  padding-right: 7px ;
  font-size: 1em;
}

.prom_heading {/*refers to the headings on the prom and evening page*/
  margin-bottom:0;
  margin-top:9px;
}

div#prices { /*div that holds the price bands table*/
  border: 1px #000 solid;
  width: 20.5em;
  margin-bottom:20px;
  max-width:395px;
}

#prices h3 { /*creates the strip at the top of the #prices div */
  background-color: #000;
  margin:0;
  padding:5px;
  color: #fff;
  font-weight:normal;
  text-transform:uppercase;
  font-size: 1em;
}

#prices td { 
  padding: 5px ; 
}

#prom_pictures {/*the div that surrounds all the small prom images*/
  float:right;
  width:29.5em;
  max-width:520px;
  min-width:345px;
  margin-left:10px;
}

.proms { /*the div that surrounds each small dress image inc caption*/
	float:left;
	padding: 8px; 
	padding-top: 1px ; 
	margin-top: 9px ;
	height: 165px;	
	width:90px;
	border:none;
	text-decoration:none;
}

.proms img {
	border: 1px solid #c6c3c3 ; 
	padding: 0 ; 
}

.proms a:hover, .proms a:focus {
  border-bottom: 1px #000 solid;
}

.proms p { /*caption at the bottom of each small dress image*/
	font-size: 0.9em ;
	color: #000;
	text-align:center ; 
	margin-top: 2px ; 
}


p#table_links {
  clear:left;
  float:right;
  font-size:1.05em;
  margin-right:13em;
}


/*styles applying to the FAQ page*/
.question, .highlight {
  color:#de1067 ;
  font-weight:bold;
}



/*styles for the contact page*/
#contact_form {
  width: 31em;
}
.error {
  color:#ac0202;
}

.formlabel {
	float: left ;
	width: 7em ; 
	clear: left ;
	text-align: right ;
	margin-right : 0.7em ;	
	font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
}

input[type="submit"] {
  margin-left: 110px ; 
}

.email_disclaimer {/*the div that contains the email disclaimer at the bottom of the page*/
  font-size:0.9em;
}

.email_disclaimer span, .pink_notBold  {
  color:#de1067;
}



/*styles for the large map page*/
#large_map {
  display:block;
  margin: 0 auto 0 auto;/*to center the large map*/
}

p#back {
  font-size:1.1em;
  font-weight:bold;
  margin-left:50%; /*centers link in the middle of the container*/
}