/* ------ Section 1 - Global Body, Font and Link Settings ------ */


body {
background: url(http://www.la-coffee-melodie-suite.com/images/mosaico-Mai-Tai.gif) top left repeat;
margin: 0;
padding-top: 200px;
padding-bottom: 100px;
color: #4D4D4D;
font-family: times, serif;
font-size: 85%;
}

/* -- General Link Styling -- */

a:link {
color: #7C2828;
}

a:visited {
color: #381809;
} 

a:hover {
color: #765E42;
}


/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 926px;
position: relative;
}

#Header {
height: 356px;
position: relative;
top: -200px;
z-index: 1;
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0 0 0 480px;
width: 380px;
}

#NavColumn {
background: url(http://www.la-coffee-melodie-suite.com/images/vertical-line-Mai-Tai.gif) top right repeat-y;
float: left;
width: 170px;
margin-left: -855px;
}

#ExtraColumn {
float: left;
width: 180px;
margin-left: -670px;
}

#ContentWrapper, #NavColumn, #ExtraColumn {
position: relative;
z-index: 10;
margin-top: -320px;
}

#Footer {
clear: both;
width: 100%;
text-align: center;
padding: 8px 0;
position: relative;
z-index: 1;
bottom: -20px;
}

.Liner {
padding: 10px 10px;
}

#Footer .Liner {
margin: 0 0 50px 480px;
padding: 0;
width:380px;
}



/* ------ Section 3 - Page Structure Details ----*/

#PageWrapper {
margin: 0 auto;
background: url(http://www.la-coffee-melodie-suite.com/images/background-Mai-Tai.gif) top right repeat-y;
}

#Header {
background: url(http://www.la-coffee-melodie-suite.com/images/header-Mai-Tai.gif) top right no-repeat;
}

#Footer {
background:url(http://www.la-coffee-melodie-suite.com/images/footer-background-Mai-Tai.gif) bottom right no-repeat;
}



/* ------ Section 4 - Left Column Navigation ------ */

/* --- Nav List ---- */

#NavColumn .Liner {
padding-top:20px;
background:url(http://www.la-coffee-melodie-suite.com/images/menu-word-Mai-Tai.gif) top center no-repeat;
}

.Navigation ul {
list-style-type: none;
position:relative;
top:-30px;
margin:0;
padding:20px 0 0 0;
margin-bottom:-30px;
}

.Navigation li {
padding: 0;
margin: 0 0 3px 0;
background: url(http://www.la-coffee-melodie-suite.com/images/decoration-menu-Mai-Tai.gif) top left no-repeat;
}

.Navigation li,
.Navigation h3 {
padding-left: 13px;
}



/* ------ Section 5 - Additional Navigation ------ */

/* Thumbnail-with-Caption Navigation  */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a {
text-decoration: none;
}

.ThumbnailLink .Caption {
text-decoration: underline;
}


/* --- Horizontal Text NavBar ---- */

.ExtraNav {
margin: 0 auto;
}

.ExtraNav ul {
list-style-type: none;
line-height:1.7em;
}
.ExtraNav a {
white-space:nowrap;
}

.ExtraNav ul li {
display: inline;
text-align: center;
}

.ExtraNav a {
padding: 0 4px;
}

#Footer .ExtraNav a {
text-align: center;  
}

#Header .ExtraNav ul {
position:absolute;
top:110px;
right:25px;
width:380px;
text-align:center;
font-size:13.6px; /* don't want this text to resize */
line-height:14px;
margin:0;
padding:0;
}

#Header .ExtraNav ul a {
white-space:nowrap;
}



/* ------ Section 6 - Specific Font Styles ------ */

#Footer {
font-size: 85%;
}

h1 {
font-size:160%;
}

h1, h2, h3, h4, h5, h6 {
font-family:Baskerville, times, serif;
clear: both;
font-weight: normal;
}

h1, h2 {
padding-bottom: 20px;
margin-bottom: -10px;
}
h2, h3, h4, h5, h6 {
margin-top: 24px;
}

.Caption {
font-size: 85%;
font-weight: bold;
display: block;
}



/* ----- Section 7 - Boxes ----- */

.CalloutBox {
background-color: #765E42;
width: 85%;
margin: 18px auto 24px auto;
padding: 4px;
color:#fff;
letter-spacing:0.07em;
}

div.CalloutBox p {
margin: 13px;
}
p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1 {
margin: 0;
}


.ReminderBox {           /* the container box */
color: #4D4D4D;
width: 50%;
border: 4px solid #765E42;
margin: 0 20px 12px 18px;
float: right;            /* adding float enables text to flow around it */
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox p {
padding:0;
margin:10px;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 5px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 0;
float: left;
}

.AdSenseBoxRight {
margin: 0 0 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}

.ReturnToNavBox {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: 40px auto 12px;
padding: 0 2px;
}


/* --- RSS Box ---- */

#RSSbox {
width: 145px;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-weight: bold;
text-align: center;
}



/* ----- Section 8 - Frequently Used Styles ----- */


.Clear {
clear: both;
}

img {
border: 0 solid #DDD;
}

/* -- lists -- */

#ContentColumn ul {
list-style-type: disc;
margin: 0 0 8px 10px;
}

#ContentColumn ol {
list-style-type: decimal;
margin: 0 0 8px 10px;
}

#ContentColumn li {
margin: 0 0 8px 5px;
}

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

.Center { 
text-align: center;
}

/* ------ Section 9 - bubblewrap button effect ------ */


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 120px;
height:120px;
}

.bubblewrap li img{
width: 100px; /* width of each image.*/
height: 100px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>