@import url("reset.css");

/****************************************************************************/
/*                                                                          */
/*  Basic HTML styling and resets                                           */
/*                                                                          */
/****************************************************************************/

body
  {
  /*position: relative;*/
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size:   14px;
  background:  white;
  color:       #000;
  margin:      4px;
  padding:     0;
  }

form
  {
  /*position: relative;*/
  margin: 0;
  }

a
  {
  color: #1e4ec8;
  }

a:link, a:visited
  {
  text-decoration: underline;
  color:           #006600;
  }

a:hover
  {
  text-decoration: underline;
  }

ul,ol
  {
  margin:  0;
  padding: 10px 0 0;
  }

h1
  {
  font:        bold 24px Georgia, Verdana, Arial;
  color:       #006600;
  margin:      1em 0 0 0;
  padding:     0 0 0 10px;
  }

h2
  {
  font:        bold 20px Georgia, Verdana, Arial;
  color:       #006600;
  margin-top:  1em;
  }

h3 { padding: 0 0 0 10px; }

label
  {
  cursor:pointer;
  }

/****************************************************************************/
/*                                                                          */
/* Styles for the header                                                    */
/*                                                                          */
/****************************************************************************/

/* - This paints the top portion of the screen the background color.  The line
     below the tabs is then created by overlaying all but a bit of the color
   - Changing the height of header and header_foreground moves the line under
     the tabs up or down
   - Changing the background changes the line color */
#header
  {
  padding:    0;
  position:   relative;
  margin:     0;
  width:      auto;
  min-width:  810px;
  height:     135px;
  background: #0066FF;
  }

/* - Changing the height will change the thickness of the line under the tabs 
   - This is the white that overlays all of the blue...leaving just a tiny line on the bottem */
#header_foreground
  {
  background: white;
  height:     133px;
  }

/* - Adjust the logo width here
   - Adjust the height to move the logo up or down */
#logo_area
{
    background-repeat: no-repeat;
    background-position: 0% 30%;
    background-image: url('/images/store_logo.jpg');
    background-color:   transparent;

    width:              350px;
    height:             135px;
    float:              left;
}

/*#logo_area a*/
  /*{*/
  /*padding:         0 202px 40px 7px;*/
  /*text-decoration: none;*/
  /*}*/

/*  Displays Gator Mattress at the top of each page */
#store_name
{
    position:       relative;
    font:           30px Georgia, Verdana, Arial;
    color:          Blue;
    padding-top:    10px;
    padding-left:   510px;
}
#store_description
{
    position:       relative;
    font:           20px Georgia, Verdana, Arial;
    font-style:     italic;
    color:          Blue;
    padding-left:   475px;
}

#customer_quote
{
    padding:        0 0 0 420px;
    color:          Blue;
    font-style:     italic;
}

#quote_id
{
    font-style: normal;
}

ul#tab_list
  {
  list-style:   none;
  margin-right: 0;
  }

/* - Adjusting top moves the tabs up or down
   - Adjusting background changes the tab color of the unselected tab */
ul#tab_list li
  {
  list-style:  none;
  background:  #B2DFEE;
  padding:     0 1px;
  margin:      0 1px 0 0;
  float:       left;
  /*position:    relative;*/
  /*top:         20px;*/
  }

/* adjusting margin-top moves the tab_start and tab_end up or down */
.tab_start
  {
  width:        11px;
  float:        left;
  margin-right: 1px;
  margin-top:   10px;
  line-height:  21px;
  }
.tab_end
  {
  width:        11px;
  float:        left;
  margin-right: 1px;
  /*margin-top:   0px;*/
  line-height:  21px;
  }

/* using - adjusting backgound sets the color of the tab that has been selected */
ul#tab_list li.selected
  {
  background:  #0066FF;
  line-height: 27px;
  height:      27px;
  }

/* adjusting the color changes the text of the selected tab */
ul#tab_list li.selected a
  {
  color:           #FFFFFF;
  }

 /* adjusting the color changes the color of the tab text */
ul#tab_list a
  {
  color:           #FFFFFF;
  font:            bold 14px Arial,Helvetica,sans-serif;
  text-decoration: none;
  padding:         5px 7px 8px 7px;
  top:             5px;
  line-height:     26px;
  }

ul#tab_list a:hover
  {
  text-decoration: underline;
  }

#header_prefs a:hover
  {
  text-decoration: underline;
  }

.quarter_dome
  {
  display: block
  }

.quarter_dome *
  {
  display:    block;
  height:     1px;
  overflow:   hidden;
  font-size:  .01em;
  }

 /*using - adjusting the background changes the color of tab_start and tab_end */
#tabbar .bg
  {
  background: #B2DFEE;
  }

 /*using - adjusting the background changes the color of the top of tab_start and tab_end */
#tabbar .quarter_dome *
  {
  background: #B2DFEE;
  }

.quarter_dome .r1
  {
  padding-left:  1px;
  padding-right: 1px;
  background:    #CCCCCC;
  }

.tab_start .quarter_dome .r1
  {
  margin-left:   3px;
  margin-right:  0px;
  border-left:   1px solid #CCCCCC;
  }

.tab_end .quarter_dome .r1
  {
  margin-left:   0;
  margin-right:  3px;
  border-right:  1px solid #CCCCCC;
  }

.quarter_dome .r2
  {
  background:    #CCCCCC;
  }

.tab_start .quarter_dome .r2
  {
  margin-left:   1px;
  margin-right:  0px;
  padding-right: 0px;
  padding-left:  1px;
  border-left:   1px solid #CCCCCC;
  }

.tab_end .quarter_dome .r2
  {
  margin-left:   0px;
  margin-right:  1px;
  padding-right: 1px;
  padding-left:  0px;
  border-right:  1px solid #CCCCCC;
  }

.tab_start .quarter_dome .r3
  {
  margin-left:   1px;
  margin-right:  0px;
  border-left:   1px solid #CCCCCC;
  }

.tab_end .quarter_dome .r3
  {
  margin-right:  1px;
  margin-left:   0px;
  border-right:  1px solid #CCCCCC;
  }

.quarter_dome .r4
  {
  height:        1px;
  margin:        0;
  }

.tab_start .quarter_dome .r4
  {
  border-left:  1px solid #CCCCCC;
  }

.tab_end .quarter_dome .r4
  {
  border-right: 1px solid #CCCCCC;
  }

.tab_start .quarter_dome .r5
  {
  border-left:  1px solid #CCCCCC;
  }

.tab_end .quarter_dome .r5
  {
  border-right: 1px solid #CCCCCC;
  }


#our_bed
{
  position:     relative;
  float:        left;
  padding:      25px 0 0 325px;
}

#right_side
{
    position:   relative;
    float:      left;
    padding:    85px 0 0 0;
}
#side
{                    *
    position:   relative;
    float:      left;
    width:      240px;
    padding:   35px 0 0 10px;
}

#side .contacttext
{
    position:       relative;
    float:          left;
    font:           18px Arial;
    color:          Blue;
    text-align:     center;
}
#side .email
{
    position:           relative;
    float:              left;
    font:               18px Arial;
    color:              Blue;
    text-align:         center;
    text-decoration:    underline;
    padding-left:       85px;
}

.specials_intro
{
    font-size:  22px;
    color:      Blue;
    text-align: center;
    padding:    35px 0 20px 0;
}

.specials
{
    position:   relative;
    float:      left;
}
    
.specials .specials_pic
{
    padding:            20px;
}

.specials .specials_header
{
    font:           22px Arial;
}

.specials .specials_header2
{
    font:           14px Arial;
    text-align:     center;
    padding-left:   30px;
}

.specials_header3
{
    font:           14px Arial;
    text-align:     center;
    padding: 0 20px 0 20px;
}
.specials .specials_pricing
{
    font-size:    16px;
}

.specials_pricing .mattress_size
{
    text-align:     left;
    font-weight:    bold;
    padding-left:   55px;
}

.specials_pricing .price_text
{
    text-align: left;
    padding-left: 15px;
}
#mattress_tower
{
    position:   relative;
    float:      left;
    width:      240px;
    padding:    30px 0 0 10px;
}

.store-info
{
    padding:    5px 0 15px 0;
    font:       16px Arial;
    color:      Blue;
    text-align: center;
}

.pageheader
{
    position:       relative;
    float:          left;
    font:           22px Arial;
    color:          Blue;
    padding:        25px 0 0 50px;
    width:          650px;
    text-align:     center;
}

.pagebf
{
    position:       relative;
    float:          left;
    font:           18px Arial;
    color:          Green;
    padding:        0 0 10px 50px;
    width:          650px;
    text-align:     center;
}

.pagetext
{
    position:       relative;
    float:          left;
    font:           18px Arial;
    color:          Blue;
    text-align:     left;
    width:          650px;
    padding:        0 0 0 50px;
}
.producttext
{
    position:       relative;
    float:          left;
    font:           18px Arial;
    color:          Blue;
    text-align:     left;
    width:          450px;
    padding:        30px 0 0 40px;
}

.pagetextsmall
{
    padding:    15px 0 0 30px;
    font:       16px Arial;
    color:      Blue;

    position:       relative;
}

.store_sign
{
    position:   relative;
    float:      left;
    padding:    15px 0 15px 50px;
}
.store_front
{
    position:   relative;
    float:      left;
    padding:    5px 0 0 150px;
}
.store_front_location
{
    position:   relative;
    float:      left;
    padding:    30px 0 0 25px;
}

#storemap
{
    postion:    relative;
    float:      left;
    padding:    20px 0 0 75px;
}

.storewords
{
    font:           36px Monotype Corsiva;
    font-weight:    bold;
    color:          #FF3300;
}
#header_prefs
  {
  position:        absolute;
  right:           0px;
  padding-top:     5px;
  height:          18px;
  line-height:     12px;
  color:           #999;
  font-size:       11px;
  z-index:         1000;
  }

#header_prefs A
  {
  text-decoration: none;
  font-weight:     normal;
  font-size:       11px;
  color:           #006600;
  z-index:         1000;
  }

/****************************************************************************/
/*                                                                          */
/* Styles for page layout                                                   */
/*                                                                          */
/****************************************************************************/

.main, .form_main
  {
  /*position: relative;*/
  padding:   0;
  margin:    0;
  width:     auto;
  min-width: 810px;
  }

/****************************************************************************/
/*                                                                          */
/* Styles for round boxes                                                   */
/*                                                                          */
/****************************************************************************/

.rounded_box
  {
  margin: 10px 8px 0px 12px;
  }

.rounded_box .b_containment
  {
  background:   #fff;
  border-left:  2px solid blue;
  border-right: 2px solid blue;
  padding:      0 0 10px 0;
  font:         15px Arial;
  color:        Blue;
  }

.rounded_box .body
  {
  padding: 10px 10px 10px 50px;
  }

.rounded_box .b_header
  {
  position:      relative;
  display:       block;
  color:         blue;
  background:    #B2DFEE;  /*  background of header */
  font:          14pt Arial;
  font-weight:   bold;
  padding:       0 10px 5px 10px;
  margin:        0 0 15px 0;
  border-bottom: 2px solid blue;
  min-height:    1.25em;

  /* gnu:1 */
  vertical-align: middle;
  }

.rounded_box .footer_fix
  {
  border-bottom: 1px solid #a0a0a0;
  }

.rounded_box .b_footer
   {
   position:    relative;
   display:     block;
   color:       #000000;
   background:  #E4E4E4;
   font-size:   11px;
   font-weight: bold;
   min-height:  1em;
   padding:     3px 8px;
   }

.rounded_box .b_icon               {padding: 1px 4px 0 0;}
.rounded_box .b_text_left          {font-size: 16px; font-weight: bold; text-align: left; padding-left: 20px;}
.rounded_box .b_image_right        {float: right; position: relative; padding-right: 20px;}
.rounded_box .b_footer_label       {position: relative; font-size: 10px; font-weight: bold; margin-left:10px; top:2px;}
.rounded_box .b_links              {position: absolute; right: 0.8em;}
.rounded_box .b_links a.minibutton {top: 0px}
.rounded_box .b_links a:hover      {text-decoration: underline;}
.rounded_box .b_body               {padding: 6px;}
.rounded_box .b_body.grey          {background: #E4E4E4;}
.rounded_box .b_body a:hover       {text-decoration:underline;}
/* box topper / bottom inside color here */
.rounded_box .top b  , .rounded_box .btm b   {background: #B2DFEE;}
.rounded_box .top .ra, .rounded_box .btm .ra {margin: 0 5px; background: blue;}
.rounded_box .top .rb, .rounded_box .btm .rb {margin: 0 3px; background: blue;}
.rounded_box .top .rc, .rounded_box .btm .rc {margin: 0 2px; border-left: 4px solid blue; border-right: 4px solid blue;}
.rounded_box .top .rd, .rounded_box .btm .rd {margin: 0 1px; border-left: 3px solid blue; border-right: 3px solid blue;}
.rounded_box .top .re, .rounded_box .btm .re {margin: 0 1px; border-left: 2px solid blue; border-right: 2px solid blue;}
.rounded_box .top .rf, .rounded_box .btm .rf {margin: 0 0px; border-left: 3px solid blue; border-right: 3px solid blue;  height: 1px;}

.rounded_box .hilite_header 	    {background: #CCFFCC none repeat scroll 0 0;}
.rounded_box .top .hilite_header {background: #CCFFCC;}

.rounded_box .b_footer.hide_it       {display: none;}

.top b, .btm b
  {
  display:   block;
  height:    1px;
  overflow:  hidden;
  font-size: 1px;
  }

.crib_side
{
    width:  200px;
    float:  left;
}

.crib_side, .crib_invite
{
    font:           18px Arial;
    color:          RoyalBlue;
    text-align:     center;
}
.crib_side, .crib_image
{
    /*float:          left;*/
    padding-top:    20px;
}

.crib_page
{
    position:   absolute;
    left:       360px;
}
.crib_page, .crib_header
{
    font:           30px Verdana;
    color:          Blue;
    text-align:     center;
    width:          500px;
}

.crib_page, .crib_explain
{
    font:           18px Arial;
    color:          RoyalBlue;
    padding-top:    40px;
    text-align:     left;
}

#separator
  {
  width:      35px;
  float:      left;
  }

.spotlight
{
    padding-top:    20px;
    padding-left:   325px;
    margin-bottom:  30px;
    width:          32%;
}

#spotlight_header
{
    font-size:      22px;
    text-align:     center;
    color:          Blue;
    padding-top:    35px;
    padding-bottom: 10px;
}
#spotlight_text
{
    font-size:      18px;
    text-align:     center;
    font-style:     italic;
    color:          Blue;
}

#spotlight_story
{
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      16px;
    font-weight:    bold;
    color:          Blue;
    padding:        70px 0 0 400px;
    line-height:    150%;
}

#spotlight_specs
{
    font-size:      15px;
    color:          Blue;
    padding:        20px 0 0 20px;
    line-height:    125%;

}

#spotlight_pic1
{
    position:   relative;
    float:      left;
    padding:    50px 25px 0 20px;
}

#spotlight_pic2
{
    position:   relative;
    float:      left;
    padding:    30px 25px 0 20px;
}

#spotlight_link
{
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}