/* CSS Document */

body { margin: 21px 0 20px 0; padding: 0; background: url(../graphics/wrap-hdr.jpg) no-repeat #FFE8B0; background-position: top center; font: normal normal 14px "Times New Roman", Times, serif; color: #453529; }

p, h1, h2, h3, ul, ol, li { margin: 0; padding: 0; }
p { margin-bottom: 15px; }
small { font: normal normal 11px Arial, Helvetica, sans-serif; color: #000; }
h1 { font-size: 16px; font-weight: bold; }
h6 a { font-size: 14px; color: #453529; text-decoration: none; }
h6 a:hover, h6 a:active { color: #000; text-decoration: underline; }

a { color: #000; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

ul { list-style-type: none; list-style-position: outside; margin-bottom: 20px; }
li { }

.list2 { list-style-type: disc; list-style-position: outside; margin: 0 0 15px 30px; }
.list2 li { }

.clear { clear: both; }

.left { float: left; margin: 0 15px 10px 0; }
.right { float: right; margin: 0 0 10px 15px; }
.title { text-align: left; margin: 0 0 10px 0; }

#wrap { }
#hdr { margin: 0 auto; width: 852px; height: 81px; background: url(../graphics/hdr.jpg) no-repeat; }
#address { float: right; margin: 15px 25px 0 0; text-align: left; line-height: 15px; }
#address h1 { font-size: 16px; font-weight: bold; }
#address h2 { font-size: 14px; font-weight: normal; }
#hdrImage { margin: 0 auto; width: 850px; height: 274px; border-left: 1px solid #000; border-right: 1px solid #000; }
#hdrFlash { margin: 0 auto; width:850px; height: 274px; border-left: 1px solid #000; border-right: 1px solid #000; }
/*
#menu { margin: 0 auto; padding: 1px 0 0 0; width: 850px; height: 30px; background: url(../graphics/bg-menu.gif) repeat-x; font-size: 13px; border-left: 1px solid #000; border-right: 1px solid #000; }
#menu ul { list-style: none; padding-left: 11px; }
#menu li { display: inline; }
#menu a { display: block; float: left; height: 28px; text-decoration: none; text-transform: uppercase; color: #F0E7BB; padding: 0 16px 0 16px; line-height: 28px; }
#menu a:hover, #menu a.active { background: url(../graphics/bg-menu-ro.jpg); color: #FFF; }
*/
#content { margin: 0 auto; width: 810px; padding: 20px; background: url(../graphics/bg-content.jpg) repeat-x #e0cea8; border-left: 1px solid #000; border-right: 1px solid #000; }
#colOne { float: left; width: 371px; margin: 0 15px 0 0; }
#colTwo { float: left; width: 424px; margin: 0; }
#news { width: 781px; margin: 15px 0 0 6px; border: 1px dashed #453529; padding: 8px; background: #F1f1f1; }

#banners { margin: 20px 0 0 0; }
#banners img { border: 0; margin: 0 0 20px 0; border: 1px solid #BBB; }

.thing-to-do { width: 232px; margin: 5px 10px; padding: 8px; border: 1px solid #BBB; background: #F1F1F1; float: left; font-family: Verdana, Arial, Helvetica, sans-serif; }
.thing-to-do h1 { font-size: 15px; font-weight: normal; margin: 0 0 10px 0; }
.thing-to-do p { font-size: 12px; color: #000; margin: 0; }
.thing-to-do .thumb { width: 75px; height: 75px; float: right; margin: 0 0 5px 10px; border: 1px solid #999; }
.thing-to-do .more-link { text-align: center; margin: 0 auto; margin: 15px 0 0 0; }

.rooms { float: left; width: 366px; margin: 0 15px 30px 15px; text-align: center; }
.thumb { float: left; text-align: center; width: 270px; margin-top: 20px; }
.video { float: right; width: 400px; height: 285px; background: url(../graphics/bg-video.png); padding: 10px; margin: 0 0 25px 15px; }
.videoIndex { margin: 0; padding: 10px; background: url(../graphics/bg-video.png); width: 400px; height: 286px; }

#colOneStore { width: 572px; float: left; }
#colOneStore ul { margin-top: 10px; }
#colOneStore li { margin: 0 0 12px 10px; }
.product { width: 256px; float: left; margin-right: 25px; margin-bottom: 30px; }
.product .prodThumb { border: 1px solid #000; margin: 0 0 10px 0; }
.product h2 { font-weight: bold; font-size: 14px; color: #000; margin: 0 0 5px 0; }
.product h3 { font-weight: bold; font-size: 15px; color: #000; float: left; margin: 5px 0 0 0; width: 100px; text-align: center; }
.product a { float: right; }
.product p { font-size: 12px; margin-bottom: 10px; }
#colTwoStore { width: 200px; float: right; }
#colTwoStore h1 { border-bottom: 1px solid #000; margin-bottom: 15px; }

#footer { margin: 0 auto; padding: 3px 0 0 0; height: 69px; width: 852px; background: url(../graphics/footer.gif) no-repeat #FFE8B0; font-size: 11px; }
#footer ul { list-style: none; padding-left: 50px; }
#footer li { display: inline; }
#footer a { display: block; float: left; text-decoration: none; text-transform: uppercase; color: #CFCFCF; padding: 0 16px 0 16px; line-height: 28px; }
#footer a:hover, #footer a.active { color: #FFF; }
#footer p { text-align: center; color: #000; margin: 8px 0 0 0; }
#footer p a { color: #000; text-decoration: none; }
#footer p a:hover { color: #000; text-decoration: underline; }

#menu { margin: 0 auto; width: 850px; border-left: 1px solid #000; border-right: 1px solid #000; background: url(../graphics/bg-menu.gif) repeat-x; }

/*--------------TRY AGAIN------------------*/

.menu { width:850px;height:30px; padding: 0px 0 0 0; position:relative; z-index:100; background: url(http://www.mycountryretreat.com/graphics/bg-menu.gif) repeat-x; }
/* hack to correct IE5.5 faulty box model */
* html .menu {width:850px; w\idth:850px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;text-align:center;}
.menu ul ul {width:158px;text-align:left;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;position:relative;width:auto;color:#FFF;}
/* style the links for the top level */
.menu a:link, .menu a:visited, .menu a:active {display:block;font-size:12px;text-decoration:none; padding:0 19px; color:#F0E7BB; height:28px; border:1px solid #111; border-width:0px; background: url(http://www.mycountryretreat.com/graphics/bg-menu.gif); line-height:28px; font-weight:100; text-transform: uppercase; }
.menu a:hover {background: url(http://www.mycountryretreat.com/graphics/bg-menu-ro.jpg); color: #FFF; text-decoration:none;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:0px; w\idth:0px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#800000 130px center;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#800000 130px center;}
.menu ul ul :hover > a.drop {background:#800000 130px center;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:28px;left:0; width:149px;border-top:1px solid #a17242;}
/* another hack for IE5.5 */
* html .menu ul ul {top:28px;t\op:29px;}

/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a:link, .menu ul ul a:visited {background:#1a1411; color:#F0E7BB; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;text-transform:none;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover {background: url(http://www.mycountryretreat.com/graphics/bg-menu-ro.jpg); color: #FFF;}
.menu :hover > a {background: url(http://www.mycountryretreat.com/graphics/bg-menu-ro.jpg); color: #FFF;}

.menu ul ul a:hover{background: url(http://www.mycountryretreat.com/graphics/bg-menu-ro2.jpg); color: #FFF;}
.menu ul ul :hover > a {background: url(http://www.mycountryretreat.com/graphics/bg-menu-ro2.jpg); color: #FFF;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}