* { margin: 0; padding: 0; } body { font: 62.5% "Lucida Grande", Helvetica, Arial, sans-serif; text-align: center; color: #333; background: #fff url(/resources/images/bella_bg.gif) fixed repeat; } h2 { margin-bottom: 0.2em; font: bold 2.8em "Times New Roman", Times, serif; color: #778BA6; padding-top: 20px; } h3 { margin-bottom: 0.4em; font: normal 1.9em "Times New Roman", Times, serif; color: #A2D0CE; } h4 { margin-bottom: 0.4em; font: normal 1.8em "Times New Roman", Times, serif; } ul, ol { list-style: none; font-size: 1.1em; } a { border-bottom: 1px dotted #9BCD98; text-decoration: none; color: #9BCD98; } a:hover { border-bottom: 1px dotted #9BCD98; color: #9BCD98; } a img { border: 0; } .clear { *height: 1%; } .clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; } .alt { display: none;} /* --------------------------------------------------------------------- Main Layout --------------------------------------------------------------------- */ div#wrap { position: relative; width: 90%; max-width: 960px; min-width: 500px; margin: 0 auto; text-align: left; } div#content-wrap { background: white; padding-bottom: 15px; font-size: 1.1em;} div.sidebar { width: 180px; float: left; } div#content { position: relative; margin-left: 180px; padding-right: 50px; } /* --------------------------------------------------------------------- Header Layout --------------------------------------------------------------------- */ div#header { height: 170px; background: url(/resources/images/bg_heading.gif) repeat; } div#header h1 { padding-top: 5px; padding-right: 5px; width: 527px; height: 158px; background: url(/resources/images/logo.gif) 25px 0 no-repeat; } div#header h1 a { width: 527px; height: 158px; border: none; text-decoration: none;} div#header a:link, div#header a:visited, div#header a:hover { border: none; text-decoration: none;} div#header h1 a em { visibility: hidden; width: 502px; height: 158px; } /* --------------------------------------------------------------------- Navigation items --------------------------------------------------------------------- */ #navigation ul { margin-left: 10px; margin-top: 20px;} #navigation li { margin-bottom: 7px; } #navigation li a span { display: none; } #navigation li a { height: 40px; width: 132px; display: block; border: 0; } #navigation li#nav_philosophy a:link, #navigation li#nav_philosophy a:visited { background: url(/resources/images/nav_sprite.png) 0 0 no-repeat; } #navigation li#nav_philosophy a:hover { background: url(/resources/images/nav_sprite.png) -268px 0 no-repeat; } #philosophy li#nav_philosophy a, #philosophy li#nav_philosophy a:link, #philosophy li#nav_philosophy a:visited, #philosophy li#nav_philosophy a:hover { background: url(/resources/images/nav_sprite.png) -134px 0 no-repeat; } #navigation li#nav_profile a:link, #navigation li#nav_profile a:visited { background: url(/resources/images/nav_sprite.png) 0 -40px no-repeat; } #navigation li#nav_profile a:hover { background: url(/resources/images/nav_sprite.png) -268px -40px no-repeat; } #profile li#nav_profile a, #profile li#nav_profile a:link, #profile li#nav_profile a:visited, #profile li#nav_profile a:hover { background: url(/resources/images/nav_sprite.png) -134px -40px no-repeat; } #navigation li#nav_services a:link, #navigation li#nav_services a:visited { background: url(/resources/images/nav_sprite.png) 0 -80px no-repeat; } #navigation li#nav_services a:hover { background: url(/resources/images/nav_sprite.png) -268px -80px no-repeat; } #services li#nav_services a, #services li#nav_services a:link, #services li#nav_services a:visited, #services li#nav_services a:hover { background: url(/resources/images/nav_sprite.png) -134px -80px no-repeat; } #navigation li#nav_portfolio a:link, #navigation li#nav_portfolio a:visited { background: url(/resources/images/nav_sprite.png) 0 -120px no-repeat; } #navigation li#nav_portfolio a:hover { background: url(/resources/images/nav_sprite.png) -268px -120px no-repeat; } #portfolio li#nav_portfolio a, #portfolio li#nav_portfolio a:link, #portfolio li#nav_portfolio a:visited, #portfolio li#nav_portfolio a:hover { background: url(/resources/images/nav_sprite.png) -134px -120px no-repeat; } #navigation li#nav_praise a:link, #navigation li#nav_praise a:visited { background: url(/resources/images/nav_sprite.png) 0 -160px no-repeat; } #navigation li#nav_praise a:hover { background: url(/resources/images/nav_sprite.png) -268px -160px no-repeat; } #praise li#nav_praise a, #praise li#nav_praise a:link, #praise li#nav_praise a:visited, #praise li#nav_praise a:hover { background: url(/resources/images/nav_sprite.png) -134px -160px no-repeat; } #navigation li#nav_press a:link, #navigation li#nav_press a:visited { background: url(/resources/images/nav_sprite.png) 0 -239px no-repeat; } #navigation li#nav_press a:hover { background: url(/resources/images/nav_sprite.png) -268px -239px no-repeat; } #press li#nav_press a, #press li#nav_press a:link, #press li#nav_press a:visited, #press li#nav_press a:hover { background: url(/resources/images/nav_sprite.png) -134px -239px no-repeat; } #navigation li#nav_contact a:link, #navigation li#nav_contact a:visited { background: url(/resources/images/nav_sprite.png) 0 -200px no-repeat; } #navigation li#nav_contact a:hover { background: url(/resources/images/nav_sprite.png) -268px -200px no-repeat; } #contact li#nav_contact a, #contact li#nav_contact a:link, #contact li#nav_contact a:visited, #contact li#nav_contact a:hover { background: url(/resources/images/nav_sprite.png) -134px -200px no-repeat; } /* --------------------------------------------------------------------- Main Content Items --------------------------------------------------------------------- */ dl dt { margin-top: .7em; font-size: 1.3em; color: #A2D0CE; } p, dd { line-height: 1.5em; font-size: 1.1em; } #content p { margin-bottom: 1.5em; } /* --------------------------------------------------------------------- Specific Page Tweeks Items --------------------------------------------------------------------- */ #contact h2 { padding-top: 170px; } /* ---------- Main Page Content ---------------------------------------- */ #main { height: 420px; background: url('') no-repeat 50% 50%; margin-right: -20px;} #main #text { color: #282f38; font-size: 2em; text-align: right; padding: 15px; background-color: white; position: absolute; height: 45px; right: 0; left: 0; bottom: 10px; opacity:.70;filter: alpha(opacity=70); -moz-opacity: 0.70; } /* ---------- Reviews -------------------------------------------------- */ blockquote { font-style: italic; } #praise blockquote blockquote p { margin-bottom: 0.5em; } #praise img.photo-left { margin: 1em 0.5em 0.3em 0; float: left;} .hreview { max-width: 500px; padding-bottom: 40px; margin-bottom: 15px; background: url(/resources/images/divider.png) bottom center no-repeat; } .hreview .reviewer { display: block; text-align: right;} .hreview .dtreviewed { display: block; border: none; text-align: right;} #featured { width: 221px; float: right; background: url(/resources/images/praise_sidebar_bg.jpg) repeat-y; margin: 0 0 10px 25px; } #featured blockquote { padding: 350px 7px 5px 30px; color: white; background: url(/resources/images/praise_sidebar.jpg) top left no-repeat;} #featured.hreview { padding-bottom: 0px; } #featured .dtreviewed { background: url(/resources/images/praise_sidebar_bottom.jpg) no-repeat bottom left; padding-bottom: 8px;} #featured .reviewer, #featured .dtreviewed { padding-right: 7px; color: white; } /* ----------- Press ---------------------------------------------------- */ #press #content { padding-right: 10px;} ul#articles li { float: left; width: 340px; height: 200px; margin: 5px; padding: 10px; background: transparent url('/resources/images/bg_press.png') bottom right no-repeat; border: 1px solid #a2d0ce; } ul#articles li h3 { font-family: verdana, arial, helvetica, sans-serif; font-size: 1.1em; } ul#articles li img { float: left; padding-right: 7px; } /* ----------- Services ------------------------------------------------- */ #services dl dt { margin-top: 0; } #services dl dd { margin-bottom: 0.7em; } /* ----------- Portfolio ------------------------------------------------ */ #portfolio #modalContainer { height: 85%; _height: 600px; width: 750px; top:10%; margin-left:-375px; zoom: 1;} #portfolio #modalContainer iframe { height: 100%; width: 750px; border: none; } ul#galleries li {float: left; width: 325px; height: 160px; margin: 5px; padding: 10px; } ul#galleries li h3 { padding-left: 30px; padding-top:2em; font-family: verdana, arial, helvetica, sans-serif; font-size: 1.5em; } ul#galleries li p { padding-left: 30px; font-size: 1.1em; } ul#galleries li img { float: left; padding-right: 7px; } /* ----------- Credits -------------------------------------------------- */ #credits div#body { margin: 2em auto; padding: 2em; width: 500px; background-color: #fff; } #credits div#body p { margin-bottom: 1.7em;} /* --------------------------------------------------------------------- Blog --------------------------------------------------------------------- */ #blog div#header h1 { background: transparent url('/resources/images/bella_blog_sprite.png') 16px 10px no-repeat; } #blog #content-wrap .sidebar { width: 240px; float: right; } #blog #content { margin: 0 240px 0 0; padding: 0; } #blog #blog-main { margin: 0 20px; } #blog-nav { display: block; position: absolute; top: 96px; right: 0; } #blog-nav li { float: left; } #blog-nav a { display: block; height: 24px; margin: 38px 3px 0; padding: 8px 15px 4px; font-size: 16px; color: #fff; } #subscribe { height: 74px; width: 106px; background: transparent url('/resources/images/bella_blog_sprite.png') -700px -76px no-repeat; } #blog .picture { text-align: center; } #blog .sidebar .about img { float: right; padding: 0 10px 3px 3px; } .blog-post { margin-bottom: 20px;} .blog-post .heading-post { position: relative; } .blog-post .heading-post h2 { padding: 31px 0 0 85px; font-size: 24px; color: #778ba6; } .blog-post .heading-post h2 a { text-decoration: none; color: #778ba6; border: 0; } .blog-post .heading-post .date { position: absolute; display: block; top: 0; left: 0; height: 73px; width: 77px; color: #fff; background: transparent url('/resources/images/bella_blog_sprite.png') -730px -160px no-repeat; } .blog-post .heading-post .month { position: absolute; display: block; top: 13px; left: 3px; height: 20px; width: 32px; text-align: center; font-size: 14px; } .blog-post .heading-post .day { position: absolute; display: block; top: 28px; left: 20px; height: 37px; width: 53px; text-align: center; font-size: 24px; } .blog-post .heading-post .posted { margin-left: 85px; } .blog-post .entry-content { margin: 15px 25px 0 85px; } .blog-post .entry-content a { color: #3faca7; } .blog-post .post-footers { margin: 0 25px 5px 85px; } #blog .sidebar h3 { display: block; height: 41px; width: 150px; background: transparent url('/resources/images/bella_blog_sprite.png') -1px -1px no-repeat; } #blog .about h3 { background-position: -515px -73px; } #blog .about .follow a { display: block; padding: 8px 2px 8px 31px; text-transform: uppercase; letter-spacing: 0.5px; border: 0; background: transparent url(/resources/images/twitter_icon.png) no-repeat -7px -4px; _background-image: none; } #blog .search h3 { background-position: -515px -38px; } #blog .links h3 { background-position: -515px -112px; } #blog .links h4 { font-size: 14px; padding: 0; margin: 10px 0 0; color: #778aa5; } #blog .links ul { margin: 7px 0 0; } #blog .links li { margin: 0 0 5px; } #blog .categories h3 { background-position: -515px -158px; } .comment-form { margin-left: 85px; } .comment-form label { display: block; float: left; width: 80px; } .comment-form li { margin-bottom: 5px; } .comments-list li { position: relative; min-height: 115px; padding-bottom: 1.4em; } .comments-list .avatar { position: absolute; top: -0px; left: 13px; width; 60px; height: 60px; z-index: 496; } .comments-list .comment { margin-bottom: 15px; margin-left: 78px; min-height:90px; _height: 90px; width: 480px; padding: 5px 10px 0; background-color: #c5e2e1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 0; } .comments-list .owner .comment { background-color: #778aa5; color: #fff;} .comments-list .comment-count { display: none; position: absolute; bottom: 18px; right: 173px; font-size: 60px; color: #fff; } .comments-list .comment-wrap { position: absolute; top: 0; left: 0; width: 500px; height: 90px; background: transparent url('/resources/images/bella_blog_sprite.png') -1px -252px no-repeat; z-index: 505; } .comments-list .commentbox-1 .comment-wrap { background-position: -1px -252px; } .comments-list .commentbox-2 .comment-wrap { background-position: -1px -252px; } .comments-list .owner .comment-wrap { background-position: -2px -154px; } .comments-list .comment-posted { position: absolute; bottom: 0; left: 80px; font-size: 90%; z-index: 578; } /* --------------------------------------------------------------------- Photographs Items --------------------------------------------------------------------- */ .photograph { background-repeat: no-repeat; padding: 0;} .photograph cite { font-size: 9px; color: #999999; margin:0; padding:0; } .right cite { text-align: right;} .photograph.right { float:right; margin-left: 25px; } .photograph.left { float: left; margin-right: 25px; } #contact .photograph { width: 300px; height: 461px; margin-top: 20px; } #philosophy .photograph { width: 400px; height: 277px; } #services .photograph { width: 246px; height: 381px; } #profile .photograph { width: 250px; height: 375px; } /* --------------------------------------------------------------------- Footer Items --------------------------------------------------------------------- */ #footer { background-color: white; position: relative; height: 80px; bottom: 0;} #tagLine {position: absolute; top: 5px; left: 70px; width: 403px; height: 37px; background: url(/resources/images/beautifulNight.gif) no-repeat; } #tagLine span { display: none; } #contactInfo { position: absolute; top: 34px; height: 46px; width: 100%; background: url(/resources/images/footer_bar.gif) repeat-x; color: #778BA6; } #contactInfo a, #contactInfo a:link, #contactInfo a:visited, #contactInfo a:hover { color: #778BA6; text-decoration: none; border: 0; } #contactInfo .vcard { text-align: center; height: 20px; font-size: 14px; margin-top: 25px; } #contactInfo .vcard p, #contactInfo .vcard .fn, #contactInfo .vcard .org { display: none; } #contactInfo .vcard div { margin: 0 15px; display: inline;} #decorationDots { width: 88px; height: 68px; background: url(/resources/images/bottomDots.gif) no-repeat; position: absolute; top: -3px; left: -20px; } #copyright { text-align: center; font-size: 10px; color: #333; padding: 1em; } /* --------------------------------------------------------------------- Modal Dialog Items --------------------------------------------------------------------- */ #modalOverlay { background-color:#000; cursor:wait; } #modalContainer { height:400px; width:600px; left:50%; top:15%; margin-left:-300px; /* half the width, to center*/ background-color:#fff; border:3px solid #a2d0ce; } #modalContainer a.modalCloseImg { position:absolute; display:inline; width:25px; height:29px; top:-14px; right:-18px; background:url(/resources/images/x.png) no-repeat; z-index:3200; cursor:pointer; } /* --------------------------------------------------------------------- Gallery Styles --------------------------------------------------------------------- */ /*#gallery .caption{font-style:italic;color:#887;} #gallery .demo{position:relative; margin-top:2em;} #gallery .gallery_demo{ width:600px; margin:0 auto;} #gallery .gallery_demo li{ width:68px; height:50px; border:3px double #111; margin: 0 2px; background:#000; } #gallery .gallery_demo li div{left:240px} #gallery .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} #gallery #main_image {margin:0 auto 60px auto; width:600px; height: auto; background:black;} #gallery #main_image img{ margin-bottom:10px; } #gallery .nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} #gallery .info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;} #gallery .info p{margin-top:1.6em;} #gallery .galleria{list-style:none;width:200px} #gallery .galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0} #gallery .galleria li a{display:none} #gallery .galleria li div{position:absolute;display:none;top:0;left:180px} #gallery .galleria li div img{cursor:pointer} #gallery .galleria li.active div img,.galleria li.active div{display:block} #gallery .galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto} #gallery .galleria li .caption{display:block;padding-top:.5em} * html #gallery .galleria li div span{width:400px}*/ /* MSIE bug */