/* -------------------------------------------
project:	West London Flowers
date:		2007/04/13
------------------------------------------- */

html { height: 100%; margin-bottom: 1px; font-size: 100.01%; }
body { margin: 0; padding: 0; background: #1a1a1a url(../images/bg.jpg) 50% 0 no-repeat; color: #fff; font: 75%/150% Arial,Helvetica,sans-serif; }
textarea, input, select, option, button { font: 1em Arial,Helvetica,sans-serif; }

/* COMMON
------------------------------------------- */
fieldset { border: none; margin: 0 0 12px; padding: 0; }
legend { display: none; }

img { border: none; }
 
em { padding: 1px 2px; background: #ffffe0; font-style: normal; }

abbr, 
acronym { border-bottom: 1px dotted #aaa; }

dl { margin: 0 0 12px; }
 dt { font-weight: bold; }
 dd { margin: 0; }

p { margin: 0 0 12px; }

a { color: #00b4ff; text-decoration: none; }
a:hover, a:focus, a:active { color: #fff; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font: normal 1.5em Arial,Helvetica,sans-serif; color: #fff; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.500em; }
h3 { font-size: 1.334em; }
h4 { font-size: 1.167em; }
h5 { font-size: 1.000em; }
h6 { font-size: 0.800em; }

/* HELPERS
------------------------------------------- */
.wrapper { overflow: hidden; }
.offset { position: absolute; left: -10001em; }
.center { text-align: center; }

/* LAYOUT
------------------------------------------- */
#root { width: 592px; margin: 0 auto; }
 #top { position: relative; height: 95px; margin: 0 0 3px; border-bottom: 5px solid #a7a7a7; }
  #logo { position: absolute; left: 0; top: 13px; width: 333px; height: 66px; background: url(../images/logo.png) no-repeat; }
   #logo a { display: block; overflow: hidden; width: 333px; height: 66px; text-indent: -10001px; }
  #top div.tel { position: absolute; right: 0; top: 44px; color: #ee70af; }
   #top div.tel abbr { border-bottom: none; color: #ee70af; }
   #top div.tel span { color: #a7a7a7; }
  #top #mobile { top: 64px; }
  #top-nav { position: absolute; top: 18px; right: -7px; list-style: none; margin: 0; padding: 0; }
   #top-nav li { float: left; width: 15px; height: 15px; padding: 0 7px; font-size: 1px; line-height: 1px; text-indent: -10001em; }
   #top-nav li.home { border-right: 1px solid #a7a7a7; }
    #top-nav li a { display: block; overflow: hidden; width: 15px; height: 15px; }
    #top-nav li.home a { background: url(../images/i_home.png) 50% 50% no-repeat; }
    #top-nav li.contact a { background: url(../images/i_mail.png) 50% 50% no-repeat; }
 #nav { overflow: hidden; list-style: none; margin: 0 0 3px; padding: 0; border: 1px solid #a7a7a7; border-width: 1px 0; }
  #nav li { float: left; padding: 0 20px 0 0; }
   #nav li a { display: block; height: 30px; color: #df62a4; background: url(../images/nav.png) no-repeat; line-height: 30px; text-transform: uppercase; text-indent: -10001em; }
   #nav li a:hover { color: #eee; }
   #nav li.home a { width: 35px; background-position: 0 0; } #nav li.home a:hover, #nav li.home a:focus { background-position: 0 -37px; }
   #nav li.wedding a { width: 121px; background-position: -62px 0; } #nav li.wedding a:hover, #nav li.wedding a:focus { background-position: -62px -37px; }
   #nav li.sympathy a { width: 128px; background-position: -210px 0; } #nav li.sympathy a:hover, #nav li.sympathy a:focus { background-position: -210px -37px; }
   #nav li.contact-us a { width: 58px; background-position: -364px 0; } #nav li.contact-us a:hover, #nav li.contact-us a:focus { background-position: -364px -37px; }
   #nav li em { position: absolute; left: -10001em; }
 #movie { margin: 0 0 10px; }
 #content { clear: both; overflow: hidden; width: 100%; padding: 0 0 20px; }
  #side { float: right; width: 172px; margin: 0 0 0 -172px; }
  #main { float: left; margin: 0 240px 0 0; padding: 30px 0 0; }
  body.price-list #main,
  body.wedding-links #main,
  body.contact-us #main,
  body.testimonials #main { float: none; margin: 0; }
  body.home #main { padding-top: 0; }
 #footer { padding: 7px 0; border-top: 5px solid #656565; color: #aaa; font-size: 0.83em; text-align: right; }
  #footer a { color: #aaa; }
  #footer a:hover { color: #fff; text-decoration: underline; }
 
/* SKIP LINKS
------------------------------------------- */
#skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
 #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 592px; padding: 2px 0; background: #df62a4; color: #fff; font-size: 1.4em; text-align: center; }
   
/* ELEMENTS
------------------------------------------- */
#quick-menu-bg { display: block; position: relative; z-index: 10; width: 100%; height: 321px; margin: 0 0 -321px; background: url(../images/quick-box.png) no-repeat; opacity: 0.5; }
#quick-menu { position: relative; z-index: 15; width: 100%; }
 #quick-menu h2 { margin: 0 0 5px; padding: 0 0 0 8px; line-height: 29px; background: #a8a8a5; color: #fff; font-size: 1.17em; font-weight: bold; }
 #quick-menu ul { list-style: none; margin: 0; padding: 0 8px; }
  #quick-menu ul li { margin: 0 0 7px; padding: 0 0 7px 20px; border-bottom: 1px solid #5a5958; background: url(../images/bullet-a.gif) 0 0.3em no-repeat; color: #aaa; font-size: 0.92em; }
   #quick-menu ul li strong { color: #fff; }
   
div.testimonial { overflow: hidden; margin: 0 0 30px; }
 div.testimonial p.right { display: inline; float: right; margin: 0 0 3px 25px; }
 div.testimonial h2 { color: #fff; }
 
body.home h1,
body.home h2,
body.price-list h2 { color: #d6649d; }

ul.prices { list-style: none; margin: 0 0 15px; padding: 0; }
 ul.prices li { position: relative; width: 200px; }
 ul.prices li.double { margin: 0 0 3em; }
  ul.prices li strong { position: absolute; left: 200px; top: 0; width: 200px; font-weight: normal; }
 
#prices { margin: 30px 0 0; }
 #prices h2 { width: 200px; font-size: 1em; font-weight: bold; }
 #prices p.prices { margin: -29px 0 0 200px; color: #df62a4; font-weight: bold; }
 #prices ul { list-style: none; margin: 0 0 15px; padding: 0; }
  #prices ul li { position: relative; width: 200px; }
  #prices ul li.double { margin: 0 0 3em; }
   #prices ul li strong { position: absolute; left: 200px; top: 0; width: 200px; font-weight: normal; }
   
#contact-content { width: 70%; }
 ul.contact-details { list-style: none; margin: 0 0 15px; padding: 0; }
  ul.contact-details li { position: relative; }
   ul.contact-details li strong { position: absolute; left: 150px; font-weight: normal; }
  
#contact { }
 #contact div { margin: 0 0 10px; }
  #contact div label { float: left; width: 130px; padding: 0 20px 0 0; }
  #contact div input { width: 250px; background: none; border: 1px solid #aaa; color: #fff; }
  #contact div textarea { overflow: auto; width: 350px; background: none; border: 1px solid #aaa; color: #fff; }
  #contact div.message textarea { height: 75px; }
  #contact div button { margin-left: 150px; border: none; background: #eee; color: #333; }
  #contact div span { color: #888; }
  
/* HOME
------------------------------------------- */
#intro { padding-top: 30px; }
#home h1 { color: #fff; }
#home h2.pink { color: #d6649d; }
#home h2.gray { color: #afafaf; }

div.halfs { overflow: hidden; width: 100%; }
 div.halfs div.column-a { float: left; width: 282px; }
 div.halfs div.column-b { float: right; width: 282px; }
 div.halfs ul { margin: 0 0 15px; padding: 0 0 0 20px; }

/* WEDDING FLOWERS
------------------------------------------- */
#wedding #nav { float: right; height: 30px; }
 #wedding #nav li { float: left; padding: 0 0 0 20px; }
 #wedding #nav li.home { padding: 0 55px 0 0; }
  #wedding #nav li a { background: url(../images/nav-wedding.png) no-repeat; }
  #wedding #nav li.home a { width: 35px; background-position: 0 0; } #wedding #nav li.home a:hover, #wedding #nav li.home a:focus { background-position: 0 -37px; }
  #wedding #nav li.introduction a { width: 91px; background-position: -62px 0; } #wedding #nav li.introduction a:hover, #wedding #nav li.introduction a:focus { background-position: -62px -37px; }
  #wedding #nav li.testimonials a { width: 90px; background-position: -180px 0; } #wedding #nav li.testimonials a:hover, #wedding #nav li.testimonials a:focus { background-position: -180px -37px; }
  #wedding #nav li.price-list a { width: 66px; background-position: -297px 0; } #wedding #nav li.price-list a:hover, #wedding #nav li.price-list a:focus { background-position: -297px -37px; }
  #wedding #nav li.wedding-links a { width: 97px; background-position: -389px 0; } #wedding #nav li.wedding-links a:hover, #wedding #nav li.wedding-links a:focus { background-position: -389px -37px; }
  #wedding #nav li.contact-us a { width: 58px; background-position: -513px 0; } #wedding #nav li.contact-us a:hover, #wedding #nav li.contact-us a:focus { background-position: -513px -37px; }

/* SYMPATHY FLOWERS
------------------------------------------- */
#sympathy #nav { float: right; height: 30px; }
 #sympathy #nav li { float: left; padding: 0 0 0 20px; }
 #sympathy #nav li.home { padding: 0 119px 0 0; }
  #sympathy #nav li a { background: url(../images/nav-sympathy.png) no-repeat; }
  #sympathy #nav li.home a { width: 35px; background-position: 0 0; } #sympathy #nav li.home a:hover, #sympathy #nav li.home a:focus { background-position: 0 -37px; }
  #sympathy #nav li.introduction a { width: 91px; background-position: -62px 0; } #sympathy #nav li.introduction a:hover, #sympathy #nav li.introduction a:focus { background-position: -62px -37px; }
  #sympathy #nav li.testimonials a { width: 90px; background-position: -180px 0; } #sympathy #nav li.testimonials a:hover, #sympathy #nav li.testimonials a:focus { background-position: -180px -37px; }
  #sympathy #nav li.prices a { width: 119px; background-position: -297px 0; } #sympathy #nav li.prices a:hover, #sympathy #nav li.prices a:focus { background-position: -297px -37px; }
  #sympathy #nav li.contact-us a { width: 58px; background-position: -442px 0; } #sympathy #nav li.contact-us a:hover, #sympathy #nav li.contact-us a:focus { background-position: -442px -37px; }

#sympathy #logo { background-image: url(../images/logo-grey.png); }
#sympathy #top div.tel abbr { color: #fff; }
#sympathy h1, #sympathy h2, #sympathy h3, #sympathy h4, #sympathy h5, #sympathy h6{ color: #afafaf; }

#sympathy p.prices { color: #afafaf; }