/* Global
============================ */

html,body,div,p,ul,ol,li,h1,h2,h3,h4,h5,pre,form,p,button,img {
  margin: 0;
  padding: 0;
  border: 0;
}

ul,li { list-style-type: none; }
a {outline: none;}
button span,a span,li span {display: none;}

table,tr,td {
  border: 0;
  border-collapse: collapse;
  vertical-align: top;
}

div.clear {
	position: relative;
	clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

body {
  font: normal 100% Verdana, Arial, Helvetica, sans-serif;
  color: #2f2d29;
  background: #F7F5F1;
}

#body {
  background: url(/img/backgrounds/header.gif) top repeat-x #FFFFFF;
  text-align: center;
}

.divider {
  position: relative;
  background: url(/img/backgrounds/sandwich_divider.gif) 0 0 repeat-x;
  height: 2px;
  line-height: 2px;
  font-size: 1px;
  margin: 16px 0;
}

input.hidden {
  display: none;
}

/* Typography
============================ */

#header #logo {
  height: 103px;
}

#header h1 {
  background: url(/img/header/logo.gif) 0 0 no-repeat;
  height: 77px;
  margin-top: 26px;
  margin-left: 0;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
}

#header a {
  display: block;
  width: 350px;
  float: left;
}

#header a#quote {
  background: url(/img/header/speech_bubble.gif) 0 0 no-repeat;
  float: right;
  width: 170px;
  height: 40px;
  margin-top: 47px;
}

#header a#quote:hover {
  background-position: 0 -40px;
}

h2 {
  height: 24px;
  font: bold 80% Arial, Helvetica, sans-serif;
  color: #fff;
  padding: 6px 18px 0 18px;
  margin: 30px 0 0 0;
}

#left_column h2 {background: url(/img/backgrounds/heading_base.gif) 0 0;}
#right_column h2 {background: url(/img/backgrounds/heading_base_rhc.gif) 0 0;}

p {
  position: relative;
	font-size: 75%;
	line-height: 150%;
}

  #left_column .content p {
    margin: 0 18px;
    padding: 10px 0 0 0;
  }

  #left_column .content p.top {padding: 4px 0 0 0;}

  #left_column .content p span,
  #left_column ul.pagination span {
    display: inline;
    color: #c5c1b9;
  }

  #left_column .content .sandwich p  {
    line-height: 20px;
    margin: 6px 0 0 0;
    padding: 0 0 0 6px;
    float: left;
  }

  #left_column .content .sandwich p.time  {
    position: absolute;
    top: 34px;
    right: 18px;
    color: #7f7d79;
    margin: 0;
    padding: 0;
  }

  #left_column ul.pagination  {
    font-size: 70%;
    margin: 4px 0 0 0;
    padding: 0 18px 0 0;
    float: right;
  }

    #left_column ul.pagination li  {
      float: left;
    }

  #right_column .advert_container p {
    color: #bdb8ad;
    font-size: 60%;
    margin: 0 0 4px 0;
  }

  #right_column .content .sandwich p  {
    margin: 5px 0 0 0;
    padding: 0 0 0 6px;
    float: left;
  }

  #footer p {
    color: #8f8a7c;
    font-size: 70%;
    line-height: 170%;
    margin: 30px 0 0 0;
    float: left;
  }

    #footer p span {color: #c5c0b6;}
    #footer p.bbb {float: right;}

/* Linkage
============================ */

p a,
p a:visited {
	color: #dd700d;
  text-decoration: none;
  border-bottom: 1px solid #f6dcc4;
}

  p a:hover {
    color: #6b3606;
  	text-decoration: none;
  }

ul.pagination a,
ul.pagination a:visited {
	color: #dd700d;
  text-decoration: none;
  border-bottom: 1px solid #f6dcc4;
}

  ul.pagination a:hover {
    color: #6b3606;
  	text-decoration: none;
  }

#left_column .content .sandwich p a  {font-size: 130%;}

/* Layout
============================ */

#container {
	width: 850px;
	margin: 0 auto;
  text-align: left;
}

#header {
  position: relative;
  display: block;
  height: 159px;
  border-top: 1px solid #ff9b27;
}

#left_column {
  position: relative;
  width: 510px;
  margin: 0 40px 0 0;
  float: left;
}

  #left_column .content {
    background: url(/img/backgrounds/base_bottom.gif) left bottom  no-repeat #f7f5f1;
    padding: 9px 0 26px 0;
  }

    #left_column .content .sandwich {
      position: relative;
      background: url(/img/backgrounds/sandwich_divider.gif) left bottom repeat-x;
      font-size: 90%;
      height: 50px;
      padding: 8px 0 9px 0;
    }

      #left_column .content .sandwich:hover {background: url(/img/backgrounds/sandwich_divider.gif) left bottom repeat-x #f9f7f4;}
      #left_column .content .last:hover, #right_column .content .last:hover {background: #f9f7f4;}
      
      #left_column .content .sandwich .sandwich_thumb {
        background: url(/img/backgrounds/sandwich_thumb.gif) 0 0 no-repeat;
        width: 50px;
        height: 50px;
        margin: 0 0 0 18px !important;
        margin: 0 0 0 9px;
        padding: 3px 0 0 3px;
        float: left;
      }

      #left_column .content .sandwich ul.rating {
        height: 10px;
        margin: 12px 0 0 0;
        padding: 0 18px 0 0;
        float: right;
      }

      #left_column .content .sandwich ul.rating li {
        margin: 0 1px 0 0;
        float: left;
      }

      #left_column .content .sandwich ul.rating li.star {
        background: url(/img/icons/stars/star.gif) 0 0 no-repeat;
        width: 10px;
        height: 10px;
      }

      #left_column .content .sandwich ul.rating li.half_star {
        background: url(/img/icons/stars/half_star.gif) 0 0 no-repeat;
        width: 10px;
        height: 10px;
      }

      #left_column .content .sandwich ul.rating li.star_off {
        background: url(/img/icons/stars/star_off.gif) 0 0 no-repeat;
        width: 10px;
        height: 10px;
      }

    #left_column .content .section {
      background: url(/img/backgrounds/sandwich_divider.gif) left bottom repeat-x;
      padding: 0 0 18px 0;
    }

    #left_column .content .blank_ad {
    padding: 18px 18px 0 18px;
    }

    #left_column .content .order_wrapper {height: 30px;}
    #left_column .content .section_bottom {padding: 18px 0 0 0;}
    #left_column .content .padding_top {padding: 18px 0;}

#right_column {
  width: 300px;
  float: left;
}

  #right_column #search_top {
    background: url(/img/backgrounds/base_rhc.gif) 0 top  no-repeat #f7f5f1;
    margin: 30px 0 0 0;
  }

  #right_column #search_bottom {
    background: url(/img/backgrounds/base_bottom_rhc.gif) left bottom no-repeat;
    height: 56px;
    padding: 20px 0 0 0;
  }

  #right_column .advert_container {
    margin: 27px 0 0 0;
  }

  #right_column .content {
    background: url(/img/backgrounds/base_bottom_rhc.gif) left bottom  no-repeat #f7f5f1;
    padding: 9px 0 26px 0;
  }

    #right_column .content .sandwich  {
        position: relative;
        background: url(/img/backgrounds/sandwich_divider.gif) left bottom repeat-x;
        font-size: 90%;
        height: 50px;
        padding: 8px 0 9px 0;
      }

      #right_column .content .sandwich .sandwich_thumb  {
        background: url(/img/backgrounds/sandwich_thumb.gif) 0 0 no-repeat;
        width: 50px;
        height: 50px;
        margin: 0 0 0 18px !important;
        margin: 0 0 0 9px;
        padding: 3px 0 0 3px;
        float: left;
      }

      #left_column .content .last,
      #right_column .content .last  {
        background: none;
        padding: 8px 0 0 0;
      }

#footer_container {
  background: url(/img/backgrounds/footer.gif) 0 0 repeat-x #f7f5f1;
  width: 100%;
  text-align: center;
  margin: 40px 0 0 0;
  height: 100px;
}

  #footer_container #footer {
    width: 850px;
    text-align: left;
    margin: 0 auto;
  }

/* Tabs
============================ */

#tabs {
  height: 30px;
  position: absolute;
  margin: 26px 0 0 0;
}

  #tabs ul li {float: left;}

    #tabs ul li a {
    	display: block;
    	height: 30px;
    	cursor: pointer;
      margin: 0 2px 0 0;
    }

    #tabs ul li a.home {width: 80px; background: url(/img/tabs/home.gif) 0 0 no-repeat;}
    #tabs ul li a.browse {width: 182px; background: url(/img/tabs/browse_sandwiches.gif) 0 0 no-repeat;}
    #tabs ul li a.add {width: 168px; background: url(/img/tabs/add_sandwich.gif) 0 0 no-repeat;}
    #tabs ul li a.hello {width: 104px; background: url(/img/tabs/say_hello.gif) 0 0 no-repeat;}
    #tabs ul li a.advertise {width: 107px; background: url(/img/tabs/advertise.gif) 0 0 no-repeat;}

      #tabs ul li a.home:hover,
      #tabs ul li a.browse:hover,
      #tabs ul li a.add:hover,
      #tabs ul li a.hello:hover,
      #tabs ul li a.advertise:hover {background-position: 0 -30px;}

    #tabs ul li.on {
      display: block;
    	height: 30px;
      margin: 0 2px 0 0;
    }

    #tabs ul li.home {background: url(/img/tabs/home_on.gif) 0 0 no-repeat; width: 80px;}
    #tabs ul li.browse {width: 182px; background: url(/img/tabs/browse_sandwiches_on.gif) 0 0 no-repeat;}
    #tabs ul li.add {width: 168px; background: url(/img/tabs/add_sandwich_on.gif) 0 0 no-repeat;}
    #tabs ul li.hello {width: 104px; background: url(/img/tabs/say_hello_on.gif) 0 0 no-repeat;}
    #tabs ul li.advertise {width: 107px; background: url(/img/tabs/advertise_on.gif) 0 0 no-repeat;}

/* Forms
============================ */

input,textarea {
	display: block;
  font: normal 80% Verdana, Arial, Helvetica, sans-serif;
	color: #828278;
  height: 20px;
  border: none;
  background: #fff;
  padding: 4px;
}

  input#search_input {
    width: 162px;
    margin: 0 0 0 18px !important;
    margin: 0 0 0 9px;
    float: left;
  }

label.display {
  font-size: 70%;
  float: left;
  margin: 4px 4px 0 18px;
}

textarea {height: 100px;}

/* Buttons
============================ */

a.favourites {
	display: block;
  width: 300px;
	height: 36px;
  background: url(/img/buttons/favourites.gif) 0 0 no-repeat;
	cursor: pointer;
  position: absolute;
  top: 56px;
  right: 0;
}

  a.favourites:hover {background-position: 0 -36px;}

button#search {
	display: block;
  width: 89px;
	height: 29px;
  background: url(/img/buttons/search.gif) 0 0 no-repeat;
	cursor: pointer;
  margin: 0 0 0 4px;
  float: left;
}

  button#search:hover {background-position: 0 -29px;}

a#add_another {
	display: block;
  width: 190px;
	height: 29px;
  background: url(/img/buttons/add_another.gif) 0 0 no-repeat;
	cursor: pointer;
  margin: 16px 0 0 18px;
}

  a#add_another:hover {background-position: 0 -29px;}