/* Main Screen CSS Document */

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }


/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h1, h2, h3, h4, h5, p, li { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial; }


h2 { font-size: 110%; margin: .6em 0 .4em 0; color: #f79862; font-weight: normal; }
h3 { font-size: 84%; margin: .5em 0 .5em 0; color: #fff; font-weight: bold; }
p { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #454545; }
li { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #454545; }
ul { margin-top: 0; margin-bottom: 0; }

a:link { color: #f79862; }
a:visited { color: #f79862;}
a:active, a:hover { color: #f06d23; }
a { outline: none; }

hr { border:0; border-top: 1px solid #999; height: 1px; }

.back-to-top { background: url(../../images/back_to_top_arrow.gif) top right no-repeat; padding: 0 20px 0 0; text-align: right; }

.orange { color: #f79862; }
.grey { color: #454545; }

/* ----------------- PAGE STYLES ----------------- */
body { background-color: #fff; margin: 0 10px 10px 10px; }

/* ----------------- FORM STYLES ----------------- */
form { display: inline; }

/* ---------------- CONTENT FRAMES --------------- */
#frame { width: 960px; margin: 0 auto; }
#body { width: 960px; background: url(../../images/body_background.gif) top left repeat-y; }


/* -------------------- HEADER ------------------- */
#header { width: 960px; height: 180px; background: url(../../images/header_stripes.gif) bottom left repeat-x; }
#header .logo { width: 400px; float: left; padding-top: 25px; }
#header .telephone-number { width: 190px; height: 172px; float: left; background: url(../../images/header_telephone_number.gif) top left no-repeat; }
#header .telephone-number span { display: none; visibility: hidden; }
#header .faces { width: 370px; height: 172px; float: left; background: url(../../images/header_faces.jpg) top right no-repeat; }

/* Navigation */
#navigation { width: 210px; float: left; }
#navigation ul { border-bottom: 1px solid #fff; margin: 0; padding: 0; }
#navigation ul li { display: inline; list-style-type: none; margin: 0; padding: 0; }
#navigation li a { width: 210px; height: 30px; display: block;border-top: 1px solid #fff; border-bottom: 1px solid #00b5cb; }
#navigation li span { display: none; visibility: hidden; }
#navigation li a:hover { background-position: bottom left; }
#navigation li a.selected, #navigation li a.selected a:hover { background-position: bottom left; }

/*-- Buttons --*/
#navigation #home a { background-image: url(images/nav_home.gif); }
#navigation #the-process a { background-image: url(images/nav_the_process.gif); }
#navigation #how-white-will-my-teeth-go a { background-image: url(images/nav_how_white_will_my_teeth_go.gif); }
#navigation #understand-teeth-whitening a { background-image: url(images/nav_understand_teeth_whitening.gif); }
#navigation #history a { background-image: url(images/nav_history.gif); }
#navigation #before-and-after a { background-image: url(images/nav_before_and_after.gif); }
#navigation #customer-comments a { background-image: url(images/nav_customer_comments.gif); }
#navigation #faqs a { background-image: url(images/nav_faqs.gif); }
#navigation #contact-us a { background-image: url(images/nav_contact_us.gif); }

/* -- Banners -- */
#banner { }
.bite-the-credit-crunch { width: 175px; height: 95px; margin: 20px auto; background: url(../../images/banner_bite_the_credit_crunch.gif) top left no-repeat; }
.bite-the-credit-crunch p { display: none; visibility: hidden; }



/* ------------------- CONTENT ------------------- */
#main-content { width: 740px; float: left; padding: 10px 0 0 10px; }

/* columns */
.column-430 { width: 430px; float: left; }
.column-300 { width: 300px; float: left; }

/*.column-280 { float: left; width: 280px; }
.column-410 { float: left; width: 410px; }

.column-345 { float: left; width: 345px; }*/

/* Feature Panel */
.feature-panel { border: 1px solid #f79862; background-color: #fde0d0; text-align: center; padding: 0 10px; }

/* -- Float Styles -- */
.float-left { float: left; }
.float-right { float: right; }

/* -- Alignment Styles -- */
.align-left { text-align: left; }
.align-centre { text-align: center; }
.align-right { text-align: right; }

/* -- Image Styles -- */
.blue-border-100 { border: 1px solid #04b6cc; }
.orange-border-100 { border: 1px solid #f79862; }

/* The Process Video */
#the-process-video { width: 316px; border: 1px solid #00b5cb; margin-left: auto; margin-right: auto; }

/* FAQ listing */
#faq-listing { border: 1px solid #f79862; background-color: #fde0d0; }
#faq-listing ul { padding-left: 25px; margin-left: 0; }
#faq-listing a:link, #faq-listing a:visited { color: #454545; }
#faq-listing a:active, #faq-listing a:hover { color: #000; }

/* Google Map */
#locationsmap { width: 300px; height: 350px; border: 1px solid #f79862; }

/* Customer Comments */
#featured-listing { background: url(../../images/comments_quote.gif) #fde0d0 5px 5px no-repeat; border: 1px solid #f79862; padding: 5px; margin: 20px 0; }
#featured-listing #featured-quote { margin: 5px 0 0 45px; }
#featured-listing #featured-quote p { color: #454545; font-size: 110%; margin: 0; line-height: 1.2em; }
#featured-listing #featured-quoter { text-align: right; }
#featured-listing #featured-quoter p { font-size: 80%; color: #454545; margin: 0; }
.quote { font-size: 90%; }
.quoter { font-size: 90%; color: #f79862; }
.divider { height: 0; border-top: 1px solid #fbcbb0; margin: 0; overflow: hidden; }

/* ----------------- PAGE TITLES ----------------- */
#page-title { width: auto; height: 30px; border-bottom: 1px solid #fff; border-bottom: 1px solid #b2e9ef; margin-bottom: 10px; }
#page-title div { width: auto; height: 30px; margin: 0 0 6px 0; background-position: top left; background-repeat: no-repeat; }
#page-title h1 { display: none; visibility: hidden; }

#page-title .error { background-image: url(../../images/title_error.gif); }
#page-title .welcome { background-image: url(../../images/title_welcome.gif); }
#page-title .the-process { background-image: url(../../images/title_the_process.gif); }
#page-title .how-white-will-my-teeth-go { background-image: url(../../images/title_how_white_will_my_teeth_go.gif); }
#page-title .understand-teeth-whitening { background-image: url(../../images/title_understand_teeth_whitening.gif); }
#page-title .history { background-image: url(../../images/title_history.gif); }
#page-title .before-and-after { background-image: url(../../images/title_before_and_after.gif); }
#page-title .customer-comments { background-image: url(../../images/title_customer_comments.gif); }
#page-title .faqs { background-image: url(../../images/title_faqs.gif); }
#page-title .contact-us { background-image: url(../../images/title_contact_us.gif); }


/* ------------------- FOOTER ------------------- */
#footer { padding-top: 8px; background: url(../../images/footer_stripes.gif) top left repeat-x; }
#footer .copyright { width: 740px; float: left; padding-top: 5px; }
#footer .beyond-credit { width: 220px; height: 35px; float: left; background: url(../../images/footer_beyond_credit.gif) top left no-repeat; }
#footer .beyond-credit p { display: none; visibility: hidden; }
#footer p { margin: 0 auto; font-size: 70%; color: #00b5cb!important; }


/* -- MARGIN STYLES -- */
/* 1 Side */
.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }

/* 2 Sides */
.margin10-t-r { margin: 10px 10px 0 0; }
.margin10-t-b { margin: 10px 0 10px 0; }
.margin10-t-l { margin: 10px 0 0 10px; }
.margin10-r-b { margin: 0 10px 10px 0; }
.margin10-r-l { margin: 0 10px 0 10px; }
.margin10-b-l { margin: 0 0 10px 10px; }

/* ERROR STYLES */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title { padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold; }
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #454545; margin: 0; }