@import url('reset.css');

.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.center { text-align: center; }
#hr { border: none; background: none; clear: both; border-bottom: 1px #333 solid; }

#wrapper { background: #000; width: 900px; margin: 0 auto; padding: 110px 0 0; text-align: left; }

#nav { border-top: 1px #333 solid; float: right; padding: 0 36px 0; }
#nav ul { margin: 0 0 0; }
#nav ul li { float: left; }
#nav ul li a {  display: block; height: 15px; text-decoration: none; color: #999; font-size: 1.0em; line-height: 1.5; letter-spacing: 1px; padding: 10px 20px; }
#nav ul li a:hover, #nav ul li.active a { background: #333; color: #fff; }

#content { width: 900px; margin: 0 auto; clear: both; font-size: 1.1em; line-height: 1.7; letter-spacing: .1em; }
#content p { clear: both; float: right; margin: 15px 40px 0; }
#content p img { padding: 0 15px; }
#content ul { display: block; width: 470px; clear: both; float: right; margin: 0 60px 15px 0; }
#content h1 { margin: 0 210px 0px 0; float: right; vertical-align: bottom; display: block;  }
#content a { color: #f0b34b/*orange*/; }
#content a:hover { text-decoration: underline; }
#content #hr { margin-bottom: 20px; }
#pageHome #content { width: 860px; }
#pageHome #content #hr { width: 755px; margin: 0 -20px 0 0; float: right; }
#pageHome #content p {margin: 40px 40px 80px; font-size: 1.2em; }
#pageAbout #content p, #pageOrder #content p, #pageContact #content p, #pageHome #content p { width: 470px; }
#pageAbout #content p, #pageOrder #content p { width: 455px; }
#pageAbout #content { background: url(../images/g_about_beach.jpg) no-repeat top left; float: left; margin-top: 74px; height: 571px; }
#pageOrder #content { background: url(../images/g_howToOrder_beach.jpg) no-repeat top left; float: left; margin-top: 74px; height: 483px; }
#pageContact #content { background: url(../images/g_contact_house.jpg) no-repeat top left; float: left; margin-top: 74px; height: 267px; text-align: center; }
#pageGallery #content { margin-top: 110px; height: 300px; }
#pageGallery #content ul { float: left; width: inherit; margin: 0 0 60px 45px; width: 100%; }
#pageGallery #content ul li { display: block; float: left; margin: 20px; text-align: center; }
#pageGallery #content ul li a { color: #eee; text-decoration: none; }
#pageGallery #content ul li a span { display: block; clear: both; margin: 7px 0 0; }
#pageGallery #content ul li.extraPadding { margin-left: 120px; }

#pageGallery #content ul.thumbs { width: 210px; float: left; margin: 30px 0 30px 80px; }
#pageGallery #content ul.thumbs li { margin: 5px; padding: 0; }
#pageGallery #content .large { float: right; width: 500px; height: 500px; margin: 30px 50px 40px 0; }
#pageGallery #content .large div { position: relative; }
#pageGallery #content .large div img { margin: 0 auto; display: block; }
#pageGallery #content .large div p { position: absolute; margin: 0; padding: 5px 15px 3px; text-align: center; bottom: 0px; right: 15px; background: rgba(0, 0, 0, 0.6) !important; }
#pageGallery #content .large div p.skinny { position: absolute; right: 101px; }

#pageSlideshow #content { margin-top: 74px; }
#pageSlideshow #ss { margin: 40px 0; padding-top: 75px; text-align: center; }

#footer { clear: both; background: #333; width: inherit; height: 30px; color: #999; text-align: center; font-family: Tahoma, Arial, Helvetica, san-serif; }
#footer a { color: #eee; }
#footer a:hover { color: #26b8c5/*blue*/; }


/* ----------- HEADING REPLACEMENTS ---------------*/
h1#logo, h1#welcome, h1#about, h1#howToOrder, h1#contact, h1#slideShow, h1#gallery, h1#shoreline, h1#countryside, h1#sandAndSea, h1#flora, h1#fromAbove, h1#architecture, h1#skyline { text-indent: -9999px; background-position: top left; background-repeat: no-repeat; }

h1#logo { background: url(../images/g_logo.gif); width: 223px; height: 59px; float: left; margin: -30px 0 0 30px; }
h1#logo a { display: block; height: 59px; }

h1#welcome { background: url(../images/g_welcome.jpg); width: 828px; height: 301px; margin: 0 auto; }

h1#about { background: url(../images/h_about.gif); width: 110px; height: 35px; margin-top: -54px; }
h1#howToOrder { background: url(../images/h_howToOrder.gif); width: 211px; height: 45px; margin: -63px 175px 0 0; }
h1#contact { background: url(../images/h_contact.gif); width: 114px; height: 44px; margin: -57px 240px 0 0; }
h1#slideShow { background: url(../images/h_slideShow.gif); width: 189px; height: 38px; margin: 0px 190px 0 0; }
h1#gallery { background: url(../images/h_gallery.gif); width: 109px; height: 51px; margin: -54px 220px 0 0; }

h1#shoreline { background: url(../images/h_shoreline.gif); width: 143px; height: 39px; margin: -54px 235px 0 0; }
h1#countryside { background: url(../images/h_countryside.gif); width: 167px; height: 54px; margin: -57px 220px 0 0; }
h1#sandAndSea { background: url(../images/h_sandAndSea.gif); width: 195px; height: 46px; margin: -54px 210px 0 0; }
h1#flora { background: url(../images/h_flora.gif); width: 88px; height: 44px; margin: -59px 260px 0 0; }
h1#fromAbove { background: url(../images/h_fromAbove.gif); width: 202px; height: 44px; margin: -59px 210px 0 0; }
h1#architecture { background: url(../images/h_architecture.gif); width: 175px; height: 35px; margin: -53px 210px 0 0; }
h1#skyline { background: url(../images/h_skyline.gif); width: 121px; height: 52px; margin: -54px 240px 0 0; }