/****************GENERAL STYLING*******************/
html, body {height: 100%;}
body {font: 75%/1.2 verdana,geneva,lucida,arial,sans-serif; color: #eee; background: #581411 url(images/brick_wall_edit.jpg) center;}
input {font: 79%/1.3 verdana,geneva,lucida,arial,sans-serif;}
body, p, h1, h2, h3, h4, #main_nav ul, #main_nav li, #footer_nav, #footer_nav li, #hours ul, #flyer p, #news, form, #contact ol, #contact li {padding: 0; margin: 0;}
h4 {font-size: 1.2em; margin-bottom: .5em;}
img {border: none;}
address, address a, address a:link {font-style: normal; color: #6c9;}
.print {display: none;}
#flyer {color: #333;}
.clear {clear: both;}
#ad_pics {outline: black solid 1px;}

/****************NAVIGATION*******************/
a, a:link {text-decoration: none; color: #ffb30e;}
a:hover, a:focus {text-decoration: underline;}
h1 a:hover, h1 a:focus, h3 a:hover, h3 a:focus {text-decoration: none;}
.more {padding-left: 1em;}
#main_nav a {
  display: block;
  height: 100%;}
#main_nav a:hover, #main_nav a:focus, .btn_active {background: url(images/btn_ul.png) 50% 90% no-repeat;}
#main_nav a:active, .btn_active {font-weight: bold;}
#main_nav {
  background: url(images/btn_box.png) center no-repeat;
  width: 115px;
  height: 297px;
  margin-left: 9px;}
#main_nav ul{
  width: 100%;
  list-style: none;
  text-align: center;
  margin-top: 13px;}
#main_nav li {
  margin-bottom: 11px;
  height: 30px;}
#footer_nav {
  width: 660px;
  margin: 3px;
  list-style: none;}
#footer_nav a {
  color: #eee;
  padding: 0 0.7em;
  border-left: #eee solid 1px;}
#footer_nav .first_btn {border: none;}
  
/****************MASTHEAD*******************/
#masthead {
  background: url(images/Chalkboard_top.png) center no-repeat;
  width: 660px;
  height: 161px;
  margin: 15px auto 0;
  padding: 68px 75px 0;
  line-height: 1.3;}
#header_b {
  background: url(images/header_bottom.png) center no-repeat;
  width: 445px;
  height: 13px;}
#logo {
  width: 196px;
  height: 164px;
  overflow: hidden;
  font-size: 2em;}
#logo img {
  width: 100%;
  height: 100%;}
#tl_ypsi {
  background: url(images/header_top.png) top center no-repeat;
  width: 439px;
  height: 43px;
  overflow: hidden;
  font-size: 1.5em;}
#tl_ypsi img{
  width: 100%;
  height: 29px;
  margin-top: 14px;}
#tl_hours {
  width: 4em;
  font-size: 100%;
  font-weight: normal;
  display: inline;}
#hours, #hours ul{
  list-style: none;
  width: 19em;
  text-align: right;}
#hours ul {width: 16em;}

  
/****************CONTENT*******************/
#wrapper {
  width: 810px;
  margin: 0 auto;}
#content {
  width: 810px;
  min-height: 310px;
  background: url(images/chalkboard_mid_copy.png) center top repeat-y;}
  
/*****************MENU***************/
#flyer #menu p {text-align: left;}
#flyer a, #flyer a:link {color: #55120c;}
#tl_menu_glance {
  width: 220px;
  height: 23px;
  overflow: hidden;
  margin: -10px auto 10px;}
#tl_menu_glance img{
  width: 100%;
  height: 23px;}
#tl_coffee {
  width: 42px;
  height: 16px;
  overflow: hidden;
  margin: 0 auto;}
#tl_coffee img{
  width: 100%;
  height: 16px;}
#tl_tea {
  width: 26px;
  height: 14px;
  overflow: hidden;
  margin: 0 auto;}
#tl_tea img{
  width: 100%;
  height: 14px;}
#tl_cold_drinks {
  width: 81px;
  height: 16px;
  overflow: hidden;
  margin: 0 auto;}
#tl_cold_drinks img{
  width: 100%;
  height: 16px;}
#tl_breakfast {
  width: 68px;
  height: 16px;
  overflow: hidden;
  margin: 0 auto;}
#tl_breakfast img{
  width: 100%;
  height: 16px;
  margin: 0 auto;}
#tl_lunch {
  width: 44px;
  height: 16px;
  overflow: hidden;
  margin: 0 auto;}
#tl_lunch img{
  width: 100%;
  height: 16px;}
#tl_desserts {
  width: 58px;
  height: 14px;
  overflow: hidden;
  margin: 0 auto;}
#tl_desserts img{
  width: 100%;
  height: 14px;}
#tl_choices {
  width: 184px;
  height: 21px;
  overflow: hidden;
  margin: -5px auto;}
#tl_choices img{
  width: 100%;
  height: 21px;}
#tl_full_menu {
  width: 91px;
  height: 19px;
  overflow: hidden;
  margin: -5px auto;}
#tl_full_menu img{
  width: 100%;
  height: 19px;}
#content #adobe_logo img {display: block; width: 30px; margin: 0 10px;}
#col .menu-links {margin: 10px 0;}

/*******************ABOUT US - TEAM BIOS - CATERING - FEEDBACK**********************/
#tl_about_us, #tl_team_bios, #tl_catering, #tl_contact, #tl_feedback {
  width: 220px;
  height: 23px;
  overflow: hidden;
  margin: -10px auto 10px;}
#tl_about_us img, #tl_team_bios img, #tl_catering img, #tl_contact img, #tl_feedback img {
  width: 100%;
  height: 23px;}
#storefront, #catering_tray, #happy_family {display: block; margin: 10px auto;}
#bios, #peters_corner_txt {width: 500px; margin: -30px 85px 0 0;}
#bios p {margin: 20px 0; min-height: 100px;}
#bios img {display: block; margin-left: 10px; clear: both;}
#bios #peter_bio {margin-top: -15px;}
#bios #fritz_bio {margin-right: 15px;}

#peters_corner_txt #tl_peter {margin: 0 auto 10px;}

/*******************FEEDBACK FRAMES**********************/
#feedback_top {background: url(images/back1.gif) repeat-x;}
#feedback_top #footer_nav {margin-top: 10px; font-size: 1.3em;}
#feedback_top #footer_nav a {color: #000; border-color: #000;}
/*******************CONTACT**********************/
#contact ol li {list-style: none; margin-bottom: 0.5em;}
#contact ol {padding-left: 10px;}
.contact-label {display: block; width: 4em; text-align: right; padding-right: 5px;}
#flyer #contact .req {color: red;}
#flyer #contact p {font-size: 100%; text-align: center; padding: 0 10px 0 0; margin: 10px auto;}
#refresh_image {padding-right: 10px;}
#contact .txtinput {width: 170px;}
#contact textarea.txtinput {width: 223px;}
#col.map {
  width: 250px;
  margin: -53px 77px 0 0;}

/****************FLYER/AD AREA*******************/
#flyer {
  background: url(images/flyer_shadow.png) right bottom no-repeat;
  width: 255px;
  margin: -30px 0 0 220px;}
#flyer_top {
  background: url(images/flyer_top2.png) center no-repeat;
  width: 255px;
  height: 15px;}
#ad_pics {
  width: 230px;
  display: block;
  margin: 0 10px;}
#tl_welcome {
  width: 206px;
  height: 16px;
  overflow: hidden;
  margin: 7px 30px 0 20px;}
#tl_welcome img{
  width: 100%;
  height: 16px;}
#flyer p {
  padding: 5px 15px 10px 10px;
  text-align: justify;
  font-size: 85%;}
  
/****************COLUMN*******************/
#col {
  background: url(images/col_cap_top.png) center top no-repeat;
  width: 236px;
  padding-top: 31px;
  margin: -53px 78px 0 0;
  font-size: 95%;}
#col p {
  padding: 0 8px;
  margin: 0 auto;}
#news {list-style: none;}
#news li {
  background: url(images/bullet.png) 12px 3px no-repeat;
  width: 200px;
  padding-left: 36px;
  margin-bottom: 5px;}
#tl_news {
  width: 137px;
  height: 17px;
  overflow: hidden;
  margin: 0 auto;}
#tl_news img{
  width: 100%;
  height: 17px;}
.col_dvidr {
  background: url(images/col_divider_orange.png) center no-repeat;
  width: 214px;
  height: 14px;
  margin: -2px auto 5px;}
#tl_peter {
  width: 137px;
  height: 17px;
  overflow: hidden;
  margin: -3px 0 2px 67px;}
#tl_peter img {
  width: 100%;
  height: 17px;}
#av_photo {
  width: 68px;
  height: 71px;
  margin-top: -17px;
  display: block;}
#col .box_gr_bd {
  width: 204px;
  padding: 0 16px;}
.box_gr_t, .box_lgr_t, .box_gr_b, .box_lgr_b {width: 236px; height: 12px;}
.box_gr_t {
  background: url(images/col_box_green_top.png) center top no-repeat;
  height: auto;
  padding-top: 15px;}
.box_gr_bd {background: url(images/col_box_green_body.png) center repeat-y;}
.box_gr_b {background: url(images/col_box_green_bottom.png) center no-repeat;}
.box_lgr_t {background: url(images/col_box_lg_green_top.png) center top no-repeat;}
.box_lgr_bd {background: url(images/col_box_lg_green_body.png) center repeat-y;}
.box_lgr_b {
  background: url(images/col_box_lg_green_bottom.png) center bottom no-repeat;
  margin: 0 auto;}
.box_lgr_bd img {
  margin: 0 auto;
  display: block;}
#col form {
  text-align: center;
  padding-top: 5px;
  vertical-align: middle;}
#col_cap_bt {
  background: url(images/col_cap_bottom.png) center bottom no-repeat;
  width: 200px;
  height: 30px;
  margin: 0 auto;}
  
/****************FOOTER*******************/
#footer {
  background: url(images/chalkboard_bottom.png) center -4px no-repeat;
  width: 660px;
  padding: 0 75px;
  text-align: center;
  line-height: 1;
  clear: both;}
#footer_nav {
  width: 39.8em;
  margin: 0 auto;}
#footer_nav li {padding: 3px 0;}
#copyright {
  width: 660px;
  padding-top: 1px;
  clear: both;}
#credit {
  text-align: center;
  margin: 75px auto;}
#credit a {color: #f60;}

/****************POSITIONING*******************/
#footer_nav li, #tl_hours, #av_photo, #av_photo img, #flyer, .contact-label {float: left; display: inline;}
#col, #adobe_logo, #adobe_logo img, #bios, #bios img, #peters_corner_txt {float: right; display: inline;}
#wrapper, #content, #masthead, #logo, #flyer_top, #tl_welcome img, #flyer, #col, #footer_nav li, #tl_choices, body {position: relative;}
#tl_ypsi, address, #hours, #hours ul, #main_nav, #header_b {position: absolute;}
#tl_ypsi {top: 70px; left: 290px;}
address {top: 111px; left: 293px;}
#hours {top: 111px; right: 83px;}
#hours ul {top: 0; right: 0;}
#header_b {top: 164px; left: 287px;}
#main_nav {top: 13px; left: 75px; z-index: 2;}
#flyer_top {top: -15px;}
