html, body {height: 100%}
body { margin: 0; padding: 0; font-family: Trebuchet MS, Helvetica, sans-serif; font-size: medium; background: #F5E8E8 url(../images/bg2.jpg) repeat-x top left; background-attachment: fixed }
a {color: #000}
#wrapper{min-height: 100%; height: auto !important; height: 100%}
#wrapper {width: 802px; margin: 0 auto; font-size: 80%; line-height: 1.5em; background: #fff url(../images/main-bg.gif) repeat-y top left;}
#header { background:url(../images/topbar2.jpg) no-repeat bottom left; height: 100px; width: 796px; margin: 0 auto; color: #E2B7E2;  vertical-align: bottom; position: relative; clear: none}
#header p {margin: 0; font-size: 2.2em; font-weight: normal; float: left; color: #52259C; line-height: 1.3em; position: absolute; bottom: 0; left: 0.2em; z-index: 2 }
#header p a { text-decoration: none; color: #52259C;}
#background { background: #F3E7E7; filter: alpha(opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
 -moz-opacity: 0.75; opacity:0.75; padding: 10px; position: absolute; bottom: 0em; left: 0; width: 29em}

ul.topnav {margin: 0 0 14px 3px !Important; margin-left: 2px; padding: 0; width: 796px; background: repeat-x url(../images/button-bg.jpg); border-bottom: 1px solid #E0D1DA; clear: none }
.topnav li { list-style: none;  padding: 0; margin: 0; display: inline-table; float: none }
.topnav li a, .topnav li.on {text-decoration: none; color: #4C0A68; padding: 3px 10px; border-left: 1px solid #F7F3F5; border-right: 1px solid #E0D1DA; clear: none }
.topnav li a:hover, .topnav li.on  { background: repeat-x url(../images/button-bg-hover.jpg)}

/* mac hide \*/
ul.topnav {clear: both;float: left }
.topnav li {float: left;}
.topnav li a { display: block;}
/* end */

.left { float: left; margin: 0 10px 10px 0}
.right {float: right; margin-left: 10px}
h1 { font-size: 1.5em}
h2 {clear: both; font-size: 1.3em; margin-bottom: 0}
h3 { border-bottom: 1px solid #6C39C0; line-height: 0.7em; clear: both; font-size: 1.2em; color: #52259C; margin: 0.8em 0 0.4em}
p {margin-top: 0.4em}
.content {padding: 10px 10px 50px}
.content img {border: 3px double #999}
dl, dt {float: left; margin: 0}
dt { font-weight: bold; margin: 0}
dd { white-space: nowrap}
.bottom0 { margin-bottom: 0}
.days { font-size: 1.3em; color: #52259C; font-weight: bold; margin: 0 0.1em}

#map {width: 500px; height: 300px; margin: 0 auto; border: 2px groove}
#ceremony { margin: 0 auto; width: 500px; display: block}

/* form */
form p { margin: 15px 0 0; clear: both}
textarea { height: 6em; width: 300px}
.button { margin-top: 15px}
pre {font-family: Trebuchet MS, Helvetica, sans-serif;}

p.error { font-size: 1.2em; border: 1px solid #ccc; padding: 5px; float: left; margin-bottom: 10px }
p.error strong { color: #cc0000; display: block}

/* tables */
#rsvp-list .content { padding-top: 0; margin-top: -20px}
#rsvp-list table { width: 750px; border-collapse:collapse;  }
#rsvp-list th { text-align: left; background: repeat-x url(../images/button-bg-hover.jpg); border: 1px solid #ccc; padding: 3px}
#rsvp-list td {border: 1px solid #ccc; padding: 3px}
#rsvp-list th.guests { width: 220px;}
#rsvp-list h2 { font-size: 1.1em; margin: 5px 0 2px}
#rsvp-list h1 { font-size: 1.2em; margin: 30px 0 5px}

.vcard {margin: -0.5em 0 0 50px; font-weight: bold; font-size: 1.1em}
dl.cabs { width: 100%; margin: -1em 0 0}
.cabs dt {font-weight: bold; width: 11.8em; float: left}
.cabs dd { width: 150px; float: left}
.update {padding: 7px; border: 2px dotted #999; margin: 5px 5px 15px 130px;  position: relative}