/* -----------------------------------------------------------------------
Project Name:  Calgary Smiles
Filename: screen.css
Author: Cory Schadt
----------------------------------------------------------------------- */
@import url("reset.css");
@import url("superfish.css");
@import url("forms.css");

/* typography
----------------------------------------------- */

html, body { height: 100%; }
html { font-size:100.01%; }
body { color:#666666; background:url(../images/bg.png) no-repeat center top; font: 0.75em/1.25em Verdana, Geneva, sans-serif; }
p { padding: 0px; margin: 0 0 1.25em; line-height: 1.5em; }
a { color:#611012; text-decoration:underline; }
a:focus, a:hover { color:#000000; text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #111; }
h1 { font-size: 1.5em; line-height: 1.25em; margin-bottom: 1.5em; color: #611012; }
h1 span { color: #333; }
h2 { font-size: 1.25em; margin-bottom: 1em; color: #333; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
ul, ol { margin-bottom: 1.5em; }
ol { list-style: decimal; padding-left: 18px;}
ol li {margin-bottom: 10px;}
ul li { list-style: none; background: url(../images/bullet.png) no-repeat 0px 5px; padding-left: 18px; margin-bottom: 10px; }
ul.column { width: 255px; float: left; margin-right: 25px; margin-bottom: 0px; }
ul ul, ul ol, ol ol, ol ul { margin-top: .5em; margin-bottom: .5em; margin-left: 1.5em; }
blockquote { margin:1.5em; color:#666; font-style:italic; }
hr { background-color:#cdcdcd; border-width:0; color:#cdcdcd; height:1px; line-height:0; margin:10px 0 10px 0; page-break-after:always; text-align:center; width:100%; }

/* misc
----------------------------------------------- */
.clear { clear: both; }
.skip-nav { display: none; }
.image-left { padding: 2px; border: 1px solid #DBDBDB; float: left; margin-right: 15px; }
.image-right { padding: 2px; border: 1px solid #DBDBDB; float: right; margin-left: 15px; }
a.button { background: transparent url(../images/button-a.png) no-repeat scroll top right; color: #565656; display: block; float: left; height: 30px; margin: 16px 6px 10px -5px; padding-right: 30px; text-decoration: none; font-size: 12px; font-style: normal; font-weight: bold; font-variant: normal; }
a.button span { background: transparent url(../images/button-span.png) no-repeat; display: block; line-height: 30px; padding: 0 0 0 18px; }
a.button:hover { color: #333; text-decoration: none; }
a.button-learn-more { display: block; width: 267px; height: 53px; text-decoration: none; background-image: url(../images/button-learn-more.gif); position: absolute; top: 203px; right: 24px; }
a.button-learn-more:hover { background: url(../images/button-learn-more.gif) 0px -53px; }

/* home specific
----------------------------------------------- */
#section-home h1 { margin-bottom: .5em; }
#section-home #banner { background: url(../images/banner-home-bg.png); height: 301px; position: relative; width: 945px; margin-top: 10px; }
#section-home #content-wrapper { background: url(../images/content-bg-home.png) no-repeat center bottom; width: 945px; margin-bottom: 58px; margin-top: 15px; }
#section-home #content { background: url(none); margin-bottom: 0px; padding-bottom: 0px; }
#section-home #content #text { background: url(none); }
#promos { width: 625px; margin: 0px; padding: 0px; }
.promo { background: url(../images/promo-bg.png) no-repeat center bottom; width: 275px; float: left; padding: 0px 15px 40px; margin: 15px 15px 0px 0px; position: relative; height: auto; }
.promo.alt { margin-right: 0px; }
.promo h2.alt { background: url(../images/promo-heading-bg2.png) no-repeat; color: #611012; }
.promo .button { position: absolute; left: 15px; bottom: 5px; }
.promo p { font-size: 12px; line-height: 18px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; }
.promo h2 { background: url(../images/promo-heading-bg.png) no-repeat; height: 41px; line-height: 41px; font-size: 18px; color: #FFF; padding-left: 73px; letter-spacing: -1px; padding-bottom: 0px; margin: 0px -15px 15px; padding-top: 0px; }

/* home banner
----------------------------------------------- */
#banner { background: url(../images/banner-bg.png); height: 301px; position: relative; width: 945px; margin-top: 10px; }
#banner #sub-nav { height: 285px; width: 296px; position: absolute; right: 9px; top: 8px; }
#banner #sub-nav ul { margin: 0px; padding: 41px 0px 0px; list-style: none; }
#banner #sub-nav ul li { margin: 0px; padding: 0px; border-top: 1px solid #892B2E; }
#banner #sub-nav ul li.last { margin: 0px; padding: 0px; border-top: 1px solid #892B2E; border-bottom: 1px solid #892B2E; }
#banner #sub-nav ul li a { display: block; margin: 0px; padding: 0px 0px 0px 32px; font-size: 13px; line-height: 28px; text-decoration: none; height: 29px; background: url(../images/sub-nav-bg.png) no-repeat top; }
#banner #sub-nav ul li a:hover, #banner #sub-nav ul li a.active { color: #FFF; background: url(../images/sub-nav-bg.png) 0px -29px; }
#banner #sub-nav.services { background: url(../images/sub-nav-services.png); }
#banner #sub-nav.patient-services { background: url(../images/sub-nav-patient-services.png); }
#slideshow, #image { position: absolute; height: 287px; width: 626px; top: 7px; left: 7px; }
#slideshow img { height: 287px; width: 626px; z-index: 1; }
a#next { position: absolute; background: url(../images/banner/arrow-right.png) no-repeat; height: 28px; width: 14px; z-index: 10; top: 255px; right: 327px; display: block; }
a#prev { position: absolute; background: url(../images/banner/arrow-left.png) no-repeat; height: 28px; width: 14px; z-index: 10; top: 255px; right: 493px; display: block; }
#pager { position: absolute; margin: 0px; padding: 0px; list-style: none; z-index: 10; left: 453px; top: 254px; }
#pager li { margin: 0px; padding: 0px; }
#pager a { line-height: 30px; height: 30px; width: 46px; margin-right: 2px; margin-left: 2px; display: block; float: left; font-size: xx-small; text-indent: -9999px; }
#pager a.thumb-1 { background: url(../images/banner/thumb-1.png) 0px 0px; height: 30px; width: 46px; }
#pager a.thumb-1:hover, #pager a.thumb-1.activeSlide { background: url(../images/banner/thumb-1.png) 0px -30px; height: 30px; width: 46px; }
#pager a.thumb-2 { background: url(../images/banner/thumb-2.png) 0px 0px; height: 30px; width: 46px; }
#pager a.thumb-2:hover, #pager a.thumb-2.activeSlide { background: url(../images/banner/thumb-2.png) 0px -30px; height: 30px; width: 46px; }
#pager a.thumb-3 { background: url(../images/banner/thumb-3.png) 0px 0px; height: 30px; width: 46px; }
#pager a.thumb-3:hover, #pager a.thumb-3.activeSlide { background: url(../images/banner/thumb-3.png) 0px -30px; height: 30px; width: 46px; }
#buckets { background: url(../images/buckets-home-bg.gif); height: 90px; margin-top: 10px; }
#buckets a { display: block; height: 74px; float: left; width: 193px; padding-left: 82px; padding-right: 40px; padding-top: 16px; font-size: 20px; color: #611011; text-decoration: none; }
#buckets a:hover { color: #2F0709; text-decoration: none; }
#buckets a span { display: block; margin-top: 8px; font-size: 12px; color: #666; }
#buckets a:hover span { color: #000; text-decoration: none; }

/* masthead
----------------------------------------------- */
#masthead { height: 129px; position: relative; }
#masthead h5 { font-size: xx-small; text-indent: -9999px; overflow: hidden; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; position: absolute; top: 20px; }
#masthead h5 a { display: block; width: 178px; height: 86px; background-image: url(../images/logo.gif); background-position: 0em; background-repeat: no-repeat; }
#masthead h6 { font-size: xx-small; text-indent: -9999px; overflow: hidden; margin: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; position: absolute; top: 48px; width: 428px; height: 38px; background-image: url(../images/slogan.gif); background-position: 0em; background-repeat: no-repeat; left: 233px; }
#utilities { background: url(../images/utilities-bg.gif); height: 26px; width: 380px; position: absolute; top: 0px; right: -9px; margin: 0px; padding: 0px 0px 0px 40px; list-style: none; }
#utilities li { display: inline; margin: 0px; padding: 0px; background: url(none); }
#utilities li a { font-weight: bold; text-decoration: none; line-height: 26px; margin-right: 12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; border-right: 1px solid #DBDBDB; font-size: 11px; }
#utilities li.last a { border-style: none; }

/* main nav (replaced with drop down )
----------------------------------------------- */

#nav { width:945px; height:40px; background:url(../images/nav-bg.gif) no-repeat left top; }
/* See superfish.css */


/* general layout
----------------------------------------------- */
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -184px; width: 945px; }
#content-wrapper { background: url(../images/content-bg.png) no-repeat center bottom; width: 945px; margin-bottom: 58px; margin-top: 12px; min-height: 350px; }
#content { float: left; margin: 0px; padding: 0px 0px 15px; width: 640px; }
#content #text { padding: 10px 50px 0px 15px; background: url(../images/content-top.png) no-repeat 0px top; width: 560px; }
#content #text.alt { padding: 10px 50px 0px 15px; background: url(../images/content-top-alt.png) no-repeat 0px top; width: 560px; }
#content img.banner { background: #FFF; padding-bottom: 14px; }

/* sidebar
----------------------------------------------- */
#sidebar { float: left; width: 305px; margin: 0px; padding: 0px; }
#sidebar h2 { color: #611012; font-size: 17px; line-height: 18px; margin-bottom: 5px; }
#sidebar p { line-height: 1.5em; margin-bottom: 8px; }
#sidebar ul { list-style: none; margin: 0px; padding: 2px 0px; }
#sidebar ul li { background: url(none); margin: 0px 0px 3px; padding: 0px; }
#sidebar .callout { background: url(../images/callout-bg.png) no-repeat center bottom; padding: 15px 16px 14px; width: 273px; }
#sidebar p.links a { margin-right: 10px; color: #666; text-decoration: underline; }
#sidebar p.links a:hover { color: #333; }
#sidebar .callout.regular { background: url(none); padding: 15px 16px 14px; width: 273px; }
#sidebar .callout.rounded { position: relative; }
#sidebar .callout.rounded .top { position: absolute; width: 305px; height: 3px; background: url(../images/callout-rounded-top.png) no-repeat top; top: 0; left: 0; }
#sidebar .callout.phone { background: url(../images/callout-phone-bg.png) no-repeat; padding: 44px 18px 0px; width: 269px; margin: 0px; height: 100px; }
#sidebar .callout.phone.alt { background: url(../images/callout-phone-alt-bg.png) no-repeat; }
#sidebar a.learn-more { background: url(../images/learn-more-arrow.gif) no-repeat left center; line-height: 23px; padding-left: 29px; font-weight: bold; color: #666666; text-decoration: none; display: block; }
#sidebar a.learn-more:hover { color: #333; text-decoration: none; }

/* footer
----------------------------------------------- */
#footer-wrapper { background: url(../images/footer-bg.gif) repeat-x; height: 184px; width: 100%; }
.push { height: 184px; }
#footer { margin: 0px auto; width: 945px; background: url(../images/logo-footer.gif) no-repeat 0px; height: 121px; position: relative; border-bottom: 1px solid #cdcdcd; }
#footer a { color: #666; text-decoration: none; }
#footer address { position: absolute; left: 194px; top: 32px; font-style: normal; font-size: 12px; line-height: 20px; }
#footer address.alt { position: absolute; left: 409px; top: 32px; }
#footer #logos { position: absolute; right: 0px; height: 87px; border-left: 1px solid #cdcdcd; top: 18px; padding-right: 15px; padding-left: 15px; }