/* lotus-girl.com by betsy lam c. 2002-2009 */

/* Palette
==========================================

aqua = #089698
chocolate = #1F1605
cobalt = #384E4D
candy = #FF598B
tulip = #EF77C5
eggplant = #3F2B2B
fuchsia = #EF008C
lime = #eef030
midnight = #0C3155;
mudbath = #4b3816
ochre = #dac40c
olive = #7F7617
pink = #fcdcf7
sea = #089698
sky = #97C3C1
squid = #EF6868
suede = #4B3816
summer = #B6EF2C
sunshine = #f5e60d
teal = #318A86
tulip = #EF77C5
river rock = #4C4343

========================================= */

body {
background: #dfdfdf url(../imgs/tentacle_bkgd.gif) repeat;
font-family: Arial, trebuchet ms, garamond, sans-serif;
font-size: 12px;
overflow: hidden; 
width: 16501px;
}
.ViewMaster {
float: left;
display: block;
height: 633px;
width: 2000px;
}
.Container {
clear: both;
position: relative;
}

/* General 
============================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
padding: 5px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h3, h4 {
line-height: 20px;
}
h5 {
font-size: 13px;
}
h6 {
font-size: 12px;
}
p {
display: block;
font-size: 11px;
line-height: 24px;
padding: 5px;
}
li, li a {
font-size: 11px;
}
small {
font-size: 11px;
}
a {
color: #EF008C;
}
.Hide {
display: none;
}
.upper {
text-transform: uppercase;
}

/* Colors ------------------------------------- */
.aqua { color: #089698; }
.candy { color: #FF598B; }
.chocolate { color: #1F1605; }
.cobalt { color: #384E4D; }
.eggplant { color: #3F2B2B; }
.fuchsia { color: #EF008C; }
.tulip { color: #EF77C5; }
.midnight { color: #0C3155; }
.olive { color: #7F7617; }
.sky { color: #97C3C1; }
.squid { color: #EF6868; }
.suede { color: #4B3816; }
.teal { color: #318A86; }

/* Styles for ScrollPane, yo ------------------ */
.ScrollMe {
display: block;
float: left;
width: 450px;
}
#About .ScrollMe { 
padding-left: 36px;
}
#Words .ScrollMe {  
padding: 50px 0 0 90px;
width: 450px;
}
.scroll-pane {
background: none;
float: left;
height: 300px;
overflow: auto;
width: auto;
}
#Words .scroll-pane {
width: 450px;
}
#Art .scroll-pane { 
height: 210px;
width: 305px;
}
#Love .scroll-pane { 
height: 200px;
width: 300px;
}
.jScrollPaneContainer {
overflow: hidden;
position: relative;
z-index: 1;
}
.jScrollPaneTrack {
background: #FFF;
cursor: pointer;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 5px !important; /* ach hack */
}
.jScrollPaneDrag {
background: #CFC667;
cursor: pointer;
overflow: hidden;
position: absolute;
}
#About .jScrollPaneDrag {
background: #FAAECC;
}
#Love .jScrollPaneDrag {
background: #D7D7D7;
}
a.jScrollArrowUp, a.jScrollArrowDown {
display: block;
position: absolute;
height: 9px;
overflow: hidden;
right: 0;
text-indent: -2000px;
z-index: 1;
}
a.jScrollArrowUp {
background: transparent url(../imgs/basic_arrow_up.gif) repeat-x scroll 0 0;
top: 0;
}
a.jScrollArrowDown {
background: transparent url(../imgs/basic_arrow_down.gif) repeat-x scroll 0 0;
bottom: 0;
}

/* Header ----------------------------------- */
img.Home {
padding-top: 13px;
}
#SubNav {
left: 550px;
position: relative;
top: -20px;
width: 140px;
}
img.Next {
padding-left: 10px;
} 

/* Home 
============================================= */

#Home {
background: #f0c5e9 url(../imgs/home_bkgd.jpg) no-repeat left top;
}
#Home #MainNav {
height: 295px;
left: 357px;
position: absolute;
top: 249px;
width: 616px;
padding: 0;
margin: 0;
}
#Home p {
left: 750px;
position: relative;
top: 27px;
width: 41px;
}
#News {
background: #F0C5E9;
width: 400px;
}
#News #content {
margin: 20px;
}
#News h1, #News h2, #News h3, #News p {
padding: 0;
margin: 0;
}
#News p {
color: #EF6868;
font-size: 11px;
line-height: 14px;
padding: 10px 0;
}
#News img {
display: block;
margin: 0 auto;
}
/* About
============================================= */
#About {
background: #FFF url(../imgs/about/about_bkgd.gif) no-repeat left top;
}
#About #Header {
margin: 10px 0 0 181px;
width: 725px;
} 
#About .Pix {
clear: both;
float: left;
margin-left: 100px;
width: 122px;
}
#About .Pix img {
padding-bottom: 9px;
}
#About .Container {
left: 150px;
top: 50px;
width: 750px;
}
#Live, #Bacon {
background: #FFF;
width: 500px;
}
#Live img, #Bacon img {
border: 1px solid #D7D7D7;
float: left;
margin: 5px;
padding: 3px;
width: auto;
}
/* Web
================================================ */
#Web {
background: #8fb1b0 url(../imgs/web/web_bkgd.gif) no-repeat left top;
}
#Web.ViewMaster {
width: 1216px;
}
#Web #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Web #SubNav { 
left: 570px;
position: relative;
top: -23px;
width: 150px;
}
#Web .Container {
left: 276px;
top: 20px;
width: 670px;
}
#Web h2 {
font-size: 24px;
padding: 5px 5px 10px 5px;
}
#Web .Copy p {
font-weight: bold;
padding: 5px;
}
#Web p.one {
font-size: 16px;
}
#Web p.two {
font-size: 14px;
}
#Web h3, #Web h4 {
padding: 0;
}
#Web ul.Pix, #WebMore ul.Pix {
float: left;
padding-top: 10px;
width: 420px;
}
#Web ul.Pix h3, #WebMore ul.Pix h3 {
padding-left: 5px;
}
#Web .Pix li, #Web .Pix img, #Web .Pix p, #WebMore .Pix li, #WebMore .Pix img, #WebMore .Pix p {
float: left;
width: auto;
}
#Web .Pix li {
clear: left;
padding: 0 0 0 5px;
width: 415px;
}
#Web .Pix p, #WebMore .Pix p {
line-height: 16px;
padding: 0 0 0 13px;
width: 210px;
}
#Web ul.Callout {
float: left;
padding-top: 10px;
width: 250px;
}
#Web ul.Callout li {
font-size: 14px;
font-weight: bold;
line-height: 28px;
}
#Web p.Bubble {
font-size: 9px;
left: 4910px;
line-height: 16px;
position: absolute;
top: 330px;
width: 165px;
}
#Web p.More {
left: 4958px;
position: absolute;
top: 263px;
width: 51px;
}
#WebMore {
background: #8fb1b0 url(../imgs/web/webmore_bkgd.gif) no-repeat left top;
}
#WebMore.ViewMaster {
width: 1285px;
}
#WebMore #Header {
left: 810px;
position:relative;
top: 25px;
width: 400px;
} 
#WebMore #SubNav { 
left:250px;
position:relative;
top:-23px;
width:150px;
}
#WebMore h3 {
padding-left: 65px;
width: 200px;
}
#WebMore .TwoCol {
float: left;
margin: 30px 0 0 65px;
width: 784px;
}
#WebMore .TwoCol .Col1, #WebMore .TwoCol .Col2 {
float: left;
width: auto;
}
#WebMore .TwoCol h3 {
background: transparent url(../imgs/web/web_cloud.gif) no-repeat left top;
clear: left;
font-size: 14px;
padding: 23px 0 23px 20px;
width: 300px;
}
#WebMore ul.Clients {
float: left;
padding-top: 10px;
width: 300px;
}
#WebMore ul.Clients li {
padding: 8px 5px;
}
#WebMore .TwoCol ul.Pix {
width: 410px;
}
#WebMore .TwoCol ul.Pix li {
padding-bottom: 10px;
}
#WebMore p.Cloud {
left: 6080px;
position: absolute;
top: 330px;
width: 125px;
}
#WebMore p.Cloud a {
text-indent: -333333px;
width: 125px;
}

/* Words 
====================================== */
#Words {
background: #c3b83a url(../imgs/words/words_bkgd.gif) no-repeat left top;
}
#Words #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Words #SubNav { 
left: 570px;
position: relative;
top: -23px;
width: 150px;
}
#Words .Copy {
float: left;
margin-top: 80px;
padding-left: 45px;
width: auto;
}
.PoemNav {
float: left;
padding: 0 10px;
width: 130px;
}
.PoemNav li {
line-height: 13px;
padding: 3px 0;
}
.PoemNav li a {
color: #FFF;
text-decoration: none;
}
.PoemNav li a:hover {
color: #ded13b;
}
#Words #content h3 {
color: #7F7617;
}
/* Artwork
============================================ */
#Art {
background: #4b3816 url(../imgs/artwork/art_bkgd.jpg) no-repeat left top;
}
#Art #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Art #SubNav { 
left: 570px;
position: relative;
top: -23px;
width: 150px;
}
#Art .Intro {
background: url(../imgs/artwork/art_intro_bkgd.png) repeat left top;
left: 230px;
position: relative;
top: 230px;
width: 588px;
}
#Art .Intro p {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
#Art a {
color: #1f1605;
}
#Art a:hover {
color: #089698;
}
#Art .About {
left: 10120px;
padding: 33px;
position: absolute;
top: 30px;
width: 325px;
}
#Art .About h2 {
background: #F5E60D;
font-size: 14px;
left: 75px;
padding: 5px;
position: relative;
top: -26px;
width: 140px;
}
#Art .About p {
line-height: 18px;
padding: 10px;
}
#Art .elgee {
margin-top: 20px;
padding: 5px 10px 10px 50px;
width: 235px;
}
#Art .elgee h3 {
font-size: 14px;
}
#Art .elgee p {
padding-bottom: 0;
}
/* Love
======================================= */
#Love {
background: #fdd9d9 url(../imgs/love/love_bkgd.gif) no-repeat left top;
}
#Love #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Love #SubNav { 
left: 750px;
position: relative;
top: -23px;
width: 150px;
}
#Love ul#Pix li, #Love .Frame {
position: relative;
}
#Love ul#Pix li.one {
left: 65px;
top: 200px;
}
#Love ul#Pix li.two {
left: 330px;
top: -120px;
}
#Love ul#Pix li.three {
left: 760px;
top: -380px;
}
#Love ul#Pix li.four {
left: 1065px;
top: -450px;
}
#Love ul#Pix li.five {
left: 1275px;
top: -435px;
}
#Love .Frame {
left: 650px;
padding: 0 5px;
top: -450px;
}
#Love .Frame img {
display: block;
margin: 0 auto;
}
#Love #content h4 {
color: #EF008C;
font-size: 12px;
text-align: center;
}
/* Friends
======================================= */
#Friends {
background: #414142 url(../imgs/friends/friends_bkgd.gif) no-repeat left top;
}
#Friends #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Friends #SubNav { 
left: 570px;
position: relative;
top: -23px;
width: 150px;
}
#Friends ul {
left: 129px;
margin-bottom: 20px;
position: relative;
top: 108px;
width: 895px;
}
#Friends ul li, #Friends ul li a, #Friends ul li span.caption {
float: left;
}
#Friends a {
text-decoration: none;
}
#Friends ul li {
line-height: 14px;
padding: 0 10px;
width: 125px;
}
#Friends ul li a {
padding: 3px;
width: auto;
}
#Friends ul li a img {
height: 125px;
width: 125px;
}
#Friends ul li span.caption {
clear: left;
color: #333;
font-weight: normal;
padding: 3px;
width: 125px;
}
#Friends ul li span.caption h3 {
color: #EF008C;
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
text-align: center;
}
#Friends ul li:hover span.caption h3 {
color: #0C3155;
}
/* Contact
======================================= */
#Contact {
background: #f3e8ef url(../imgs/contact/contact_bkgd.gif) no-repeat left top;
}
#Contact #Header {
margin: 13px 0 0 240px;
width: 725px;
} 
#Contact #SubNav { 
left: 750px;
position: relative;
top: -23px;
width: 150px;
}
#Contact .Container {
left: 240px;
top: 50px;
width: 750px;
}
#Contact h2 {
margin: 20px 0;
padding: 0;
}
#Contact a {
color: #EF77C5;
font-size: 16px;
font-weight: bold;
padding-left: 0;
text-decoration: none;
}
#Contact a:hover {
text-decoration: underline;
} 
#Contact p {
color: #3F2B2B;
font-weight: bold;
padding-left: 0;
}
#Contact p.one, #Contact p.two { 
font-size: 14px;
}
#Contact p.one {
margin-top: 20px;
}
#Contact p.one a {
color: #EF77C5;
}
#Contact .Copyright {
left: 1700px;
position: relative;
top: 30px;
width: 140px;
}
#Contact .Copyright img {
display: block;
margin: 0 auto;
padding-bottom: 5px;
}
#Contact .Copyright p, #Contact .Copyright a {
font-size: 10px;
line-height: 14px;
padding: 0;
}