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

body {
margin: 0;
color: #333;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
font-size: 85%;
}

/* -- General Link Styling -- */

a:link {
color: #069BF7;
}

a:visited {
color: #4C37B5;
} 

a:hover {
color: #1048A0;
}


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

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

#Header {
height: 388px;
margin-left:-25px;
width:950px;
position: relative;
z-index: 1;
}

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

#ContentColumn {
margin: 0 0 0 400px;
}

#NavColumn {
float: left;
width: 200px;
margin-left: -900px;
}

#ExtraColumn {
float: left;
width: 160px;
margin-left: -680px;
}

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

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

#Footer p {
margin:0;
}
.Liner {
padding: 10px 10px;
}

#Header .Liner,
#Footer .Liner {
padding:0;
}

#Footer .Liner {
  padding-bottom:5px;
}


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

#PageWrapper {
margin: 0 auto;
}

#Header {
background: url(http://www.la-coffee-melodie-suite.com/images/Header-Nicholas-better.jpg) top left no-repeat;
}

#Footer {
background:#595959 bottom right no-repeat;

}

#ExtraColumn, #NavColumn {
color: #595959;
}

#NavColumn {
  font-family:"Trebuchet MS", sans-serif;
}
/* ------ Section 4 - Left Column Navigation ------ */

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

.Navigation h3 {
background-color:#CCCCCC;
color:#333;
margin-left:1px;
}

.Navigation h3,
.Navigation a {
padding:4px;
position:relative;
width:100%;
}

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

.Navigation a {
text-decoration:none;
border: 1px dotted #666;
display:block;
margin-top:2px;
}

.Navigation a:visited {
color:#7F67F9;
}

.Navigation a:hover {
color:#1048A0;
border-color:#1048A0;
border-style:solid;
}


/* ------ 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;
background:#1048A0;
color:#FFF;
}

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

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

.ExtraNav a {
padding: 0 4px;
}

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

#Header .ExtraNav {
  width:900px;
  
}

#Header .ExtraNav ul {
text-align:right;
}

#Header .ExtraNav ul a {
white-space:nowrap;
}
.ExtraNav a:visited {
  color:#998FEF;
}
.ExtraNav a:hover {
  color:#FFF;
}


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

#Footer {
font-size: 85%;
color:#FFF;
}

h1 {
font-size:160%;
}

h1, h2, h3, h4, h5, h6 {
font-family:"Trebuchet MS", sans-serif;
clear: both;
font-weight: normal;
color:#666;
}

h1, h2 {
padding-bottom: 20px;
margin-bottom: -10px;
background: url(http://www.la-coffee-melodie-suite.com/images/accent-Nicholas.gif) top left no-repeat;
padding-left:40px;
}
h2, h3, h4, h5, h6 {
margin-top: 24px;
}

#NavColumn h1,
#NavColumn h2,
#NavColumn h3,
#NavColumn h4,
#NavColumn h5,
#NavColumn h6,
#ExtraColumn h1,
#ExtraColumn h2,
#ExtraColumn h3,
#ExtraColumn h4,
#ExtraColumn h5,
#ExtraColumn h6 {
color:#333;
}

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



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

.CalloutBox, .ReminderBox {
font-family:"Trebuchet MS", sans-serif;
font-weight:bold;
letter-spacing:0.07em;
color:#FFF;
padding: 4px;
}

.CalloutBox {
background-color: #595959;
width: 85%;
margin: 18px auto 24px auto;
}

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

div.CalloutBox h1 {
margin: 0;
}


.ReminderBox {           /* the container box */
color: #FFF;
background-color:#095ACE;
width: 50%;
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;
}

.ReminderBox1 {           /* the container box */
color: #FFF;
background-color:#095ACE;
width: 100%;
margin: 0 20px 12px 18px;
float: left;            /* adding float enables text to flow around it */
}

/* this is the style that I found on my own for drop shadow box from Dynamic Drive Css Library*/

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */<!-- Hide entire CSS code from IE6 -->
<![if !IE 6]>

.shiftcontainer{
position: relative;
left: 9px; /*Number should match -left shadow depth below*/
top: 9px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 675px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -9px; /*shadow depth*/
top: -9px; /*shadow depth*/
}

</style>

<![endif]>

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

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

.AdSenseBoxRight {
margin: 0 18px 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;
}