html { min-height: 100%; }
body { background: #f6f8fd url(../images/background.jpg) right bottom no-repeat; margin: 0px; min-height: 100%; }
img { border: 0; }

#mainContent { text-align: center; height: 800px; }
#mainContent #centeredContent { margin-left: auto; margin-right: auto; width: 804px; }

#rulerContainer { position: relative; left: 0px; background: #c2c2c2; padding: 1px 0px 1px 1px; float: left; text-align: left; }
#rulerContainer #ruler { background: url(../images/ruler_bg.jpg) top left repeat-x; height: 746px; width: 178px; }
#rulerContainer #ruler img { margin: 7px 0px 0px 0px; padding: 0px; border: 0px; float: left; }
#rulerContainer #ruler #menu { float: left; margin: 165px 15px 10px; line-height: 200%; font-family: Arial; font-size: 14px; width: 117px; }
#rulerContainer #ruler #menu a { color: #fff; text-decoration: none; }
#rulerContainer #ruler #menu a.actual { color: #fbb23f; }
#rulerContainer #ruler #menu a:hover { color: #802244; }

#mainContainer { background: #fff; width: 450px; float: left; position: relative; }
#mainContainer #mainTop, #mainContainer #mainMiddle, #mainContainer #mainBottom { margin: 0px 5px 0px 5px; width: 440px; }
#mainContainer #mainTop { background: url(../images/mainTop.jpg) top left no-repeat; height: 140px; }
#mainContainer #mainMiddle { background: url(../images/mainMiddle.jpg) top left repeat-x; height: 419px; }
#mainContainer #mainBottom { background: url(../images/mainBottom.jpg) top left no-repeat; height: 184px; margin-bottom: 5px; text-align: right; color: #fff; font-family: Tahoma; font-size: 12px; }
#mainContainer #mainBottom span { padding-right: 20px; }
#mainContainer #mainBottom span a { color: #fff; text-decoration: none; }
#mainContainer #mainBottom span a:hover { color: #fff; text-decoration: underline; }

#mainContainer #mainTop h1 { display: none; }

#contentBoxBg { position: absolute; top: 128px; left: 8px; width: 630px; height: 445px; z-index: 4; }
#contentBox { position: absolute; top: 128px; left: 8px; width: 630px; height: 445px; z-index: 5; }
#contentBox #content { margin: 17px 18px 19px 7px; width: 605px; height: 409px; }
#contentBox .home, #contentBox .contact { background: url(../images/bg_home.jpg) right bottom no-repeat; color: #2463a1; }
#contentBox .designer { background: #eeffea url(../images/chestnut.jpg) right top no-repeat; }
#contentBox .design { background: #eeffea url(../images/plan1.jpg) right top no-repeat; }
#contentBox .service { background: #eeffea url(../images/anemone-cell-final2.jpg) right top no-repeat; }
#contentBox .examples { background: #eeffea url(../images/daffodil.jpg) right top no-repeat; }

.garden { text-align: left; }

.innerContent { position: relative; line-height: 150%; font-family: Arial; font-size: 13px; text-align: left; color: #800000; }
.innerContent ul { list-style: square; margin-top: 10px; margin-bottom: 10px; }
.home .innerContent { font-size: 26px; padding: 60px 0px 0px 20px; }
.designer .innerContent, .design .innerContent, .service .innerContent, .examples .innerContent, .contact .innerContent { padding: 20px 10px 10px 10px; }

.examples .innerContent .left, .examples .innerContent .right { padding: 0px; border: 0px; }
.examples .innerContent .left { float: left; margin: 0px 10px 10px 0px; }
.examples .innerContent .right { float: right; margin: 0px 0px 10px 10px; }

.contact .innerContent a { color: #000; text-decoration: none; font-weight: bold; }
.contact .innerContent a:hover { text-decoration: underline; }

#mainContainer #butterfly { width: 180px; height: 160px; position: absolute; top: 2px; left: 395px; z-index: 6; }
#mainContainer #pencil { width: 206px; height: 116px; position: absolute; top: 559px; left: -90px; }
#mainContainer #ereaser { width: 137px; height: 82px; position: absolute; top: 559px; left: 63px; }

html>body #contentBoxBg { background: url(../images/content_bg.png) top left no-repeat; }
html>body #mainContainer #butterfly { background: url(../images/butterfly.png) top left no-repeat; }
html>body #mainContainer #pencil { background: url(../images/pencil.png) top left no-repeat; }
html>body #mainContainer #ereaser { background: url(../images/ereaser.png) top left no-repeat; }

/* SCROLLBOX */
#scrollbox { position: relative; width: 582px; height: 370px; }
#scrollArea { position: absolute; top: 0px; left: 0px; width: 552px; height: 370px; overflow: hidden; }
#scrollContent {  }
#scrollBar { position: absolute; top: 0px; left: 562px; width: 20px; height: 350px; z-index: 10; }
#scroller { position: absolute; top: 0px; left: 562px; width: 20px; height: 20px; cursor: move; z-index: 10; }

.sb_bttMouseDown { background: #ddd; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

html>body #scrollBar { background: url(../images/bar_bg.png) top left no-repeat; }
html>body #scroller { background: url(../images/scroller.png) top left no-repeat; }

#mdseo {clear:both;font-family:tahoma;font-size:9px;padding:3px;;text-align:center;}
#mdseo,#mdseo a {color:#576 !important;text-decoration:none;}