/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 14, 2010 */ @font-face { font-family: 'Segoe'; src: url('type/segoeuiz-webfont.eot'); src: local(''), url('type/segoeuiz-webfont.woff') format('woff'), url('type/segoeuiz-webfont.ttf') format('truetype'), url('type/segoeuiz-webfont.svg#webfont5s4lVtqa') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SegoeItalic'; src: url('type/segoeuii-webfont.eot'); src: local(''), url('type/segoeuii-webfont.woff') format('woff'), url('type/segoeuii-webfont.ttf') format('truetype'), url('type/segoeuii-webfont.svg#webfont513OGsRT') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SegoeBold'; src: url('type/segoeuib-webfont.eot'); src: local(''), url('type/segoeuib-webfont.woff') format('woff'), url('type/segoeuib-webfont.ttf') format('truetype'), url('type/segoeuib-webfont.svg#webfontWndPGhpQ') format('svg'); font-weight: normal; font-style: normal; } /* reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;vertical-align:baseline;} object {outline: none;} body {line-height:21px; font-family:'Segoe', "Candara", "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif; font-weight: normal; font-size:14px; color:#052b36; background:url(../images/tile.jpg) repeat-x #c2e1e8;} table {border-collapse:separate;border-spacing:0;} caption, th, td {text-align:left;font-weight:normal;} table, td, th {vertical-align:middle;} a img {border:none;} .hide {display:none;} .flash-replaced .alt {display:none;} a {color:#004d82;} a:hover {text-decoration:none;} .center {text-align:center;} p {margin:10px 0; font-weight: normal; font-style: normal; font-family: Arial, Helvetica, sans-serif;} h2, h3, h4 {margin:15px 0; font-style: normal; font-family: Arial, Helvetica, sans-serif;} #brushing-instructions ul, #flossing-instructions ul {list-style:none;} #content ul, #content ol {margin:30px;} /* LAYOUT */ #wrap {width:100%; background:url(../images/bg.jpg) no-repeat top center;} #container {width:990px; min-height:1100px; margin:0 auto; background:url(../images/tile-body.jpg) repeat-y; position:relative; } #bd {width:100%; background:url(../images/bg-body.jpg) no-repeat; min-height:1070px; height:auto !important; height:1070px;} p.address {width:364px; clear:both; font-size:14px; color:#004d82; padding:0; margin:0; text-align:center; line-height:16px; margin-bottom:275px; position:absolute; top:183px; margin-left:93px; z-index:16;} .address a {text-decoration:none;} .address a:hover {text-decoration:underline; color:#FFF;} .phone {font-weight:bold;font-size:18px;} #flash-homepage {position:absolute; top:65px; margin-left:0; z-index:7; width:990px; height:396px;} .pic {position:absolute; top:75px; margin-left:454px; z-index:7; width:535px; height:350px;} #content {clear:both; width:651px; margin-left:42px; padding-bottom:40px; padding-top:490px;} p.back-to-top {padding:0; color:#004d82; font-size:11px; clear:both; margin-left:42px; margin-top:0; position:absolute; bottom:0px; z-index:16;} p.back-to-top a { color:#025b72; font-size:11px; } /* FOOTER */ #ft {width:940px; margin:0 auto; padding:155px 0 0 50px; color:#FFF; font-size:12px; background:url(../images/bg-footer.jpg) no-repeat top center; min-height:100px; height:auto !important; height:100px;} #ft a:hover {text-decoration:none;} #ft a { color:#FFF;} #col1 {float:left; width:270px;} #col2 {float:left; width:314px;} #col3 {float:left; width:340px;} #sitemap {clear:both; width:915px; text-align:right; color:#70b3e1; padding-top:21px;} #sitemap a {color:#70b3e1;} #sitemap a.sesame {color:#FFF; font-weight:bold;} #sidebar {position:absolute; z-index:7; top:489px; margin-left:724px; width:238px; color:#8fc4e8;} #sidebar img {padding:0 0 4px 0; margin:0;} #addresses {width:238px; background:url(../images/bg-address.jpg) no-repeat;font-size:13px; line-height:16px; text-align:center; padding:10px 0;} #addresses p.bigphone {font-size:21px; color:#c6e1f4; margin-bottom:15px; padding:0; margin-top:0;} #addresses p {padding-bottom:18px; margin:0;} /* HEADINGS */ h1#logo {position:absolute; top:80px; margin-left:93px; z-index:15; padding: 0; background-repeat: no-repeat; width:364px;/* this width reflects the width of the logo image */ height: 95px; /* this height reflects the height of the heading image */ text-indent: -999em;} /* hides rich text so only background image shows */ h1#logo a { display: block; height: 95px;/*same height as logo h1*/ width: 364px;/*same width as logo h1*/} /* CSS code for both current and previous versions */ h1.jcIR {/* These are your standard styles for your H1 elements */ font-size: 40px; line-height:30px; margin: 0 0 0 -10px; padding:0; color: #004d82; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; clear: both; width:533px; height:92px; } h1.replaced {/* jcIR plugin wraps text in div named replaced and hides it */ overflow: hidden; text-indent: -999em; background-repeat: no-repeat; } #content h2 {color:#004d82; font-size:15px; font-weight:bold; } body.home #content h2 {color:#004d82; font-size:14px; font-style:italic;} body.home #content h3 {color:#004d82; font-size:15px; font-weight:bold; font-style:normal; } #content h3 {color:#004d82; font-size:14px; font-style:italic; } #content h4 {color:#012c4a; font-size:13px; font-weight:bold; } /* MISCELLANEOIUS */ .map {padding:5px; background:#FFF; border:1px solid #004d82; clear:both;} .resources {padding:5px; background:#FFF; border:1px solid #004d82; float:right; margin:0 0 10px 10px} /* - - - - - - - - - - NAVIGATION - - - - - - - - - - */ #nav { width: 990px; position:absolute; z-index:10; top:422px; margin-left:0px;} #nav ul { list-style: none; width: 990px; } /*#nav li { float: left; }*/ #nav a { display: block; height: 39px; overflow: hidden; text-indent: -9999px; } #nav li {float:left;} .member { background-color: #FFF; text-align: center; padding: 10px; border: 1px solid #D6D6D6; margin: 10px; clear: both; -webkit-box-shadow: 0px 0px 5px #999; -moz-box-shadow: 0px 0px 5px #999; box-shadow: 0px 0px 5px #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .member img { padding: 10px; } /* set bg image for each link */ a#meet-the-team {background-image:url(../images/nav/meet-the-team.png); width:152px;} a#testimonials {background-image:url(../images/nav/testimonials.png); width:126px;} a#for-new-patients {background-image:url(../images/nav/for-new-patients.png); width:176px;} a#about-orthodontics {background-image:url(../images/nav/about-orthodontics.png); width:140px;} a#braces-101 {background-image:url(../images/nav/braces-101.png); width:111px;} a#invisalign {background-image:url(../images/nav/invisalign.png); width:121px;} a#our-treatments {background-image:url(../images/nav/our-treatments.png); width:164px;} /* - - - NAVIGATION ROLLOVER EFFECTS - - - */ #nav ul a:hover, #nav ul li.active a { background-position: 0px -39px; } #nav ul li:hover #meet-the-team, #nav ul li.sfhover #meet-the-team, #nav ul li:hover #for-new-patients, #nav ul li.sfhover #for-new-patients, #nav ul li:hover #our-treatments, #nav ul li.sfhover #our-treatments, #nav ul li:hover #braces-101, #nav ul li.sfhover #braces-101, #nav ul li:hover #about-orthodontics, #nav ul li.sfhover #about-orthodontics, #nav ul li:hover #invisalign, #nav ul li.sfhover #invisalign, #nav ul li:hover #testimonials, #nav ul li.sfhover #testimonials { background-position: 0px -39px; } /* - - - POP-UP - - - */ #nav ul li ul { background: url(../images/bg-pop-up.jpg) no-repeat bottom; display: block; left: -999px; list-style: none; position: absolute; z-index: 1; width: 188px; } #nav ul li:hover ul, #nav ul li.sfhover ul { left: auto; margin: 0; padding:5px 0 20px 0; } #nav ul li ul li { display: block; margin: 0; float:none; } #nav ul li ul li a { color: #012c4a; font-size: 13px; font-weight: normal; height: 24px; line-height: 24px; padding-left: 10px; text-decoration: none; text-indent: 0; } /* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */ #nav ul li ul li a:hover, #nav ul li ul li.active a {color:#FFF; background:#1c6da5;} /* UTILITY NAV */ ul.callouts { width: 447px; position:absolute; z-index:10; top:25px; margin-left:543px;list-style: none; } .callouts a { display: block; height: 39px; overflow: hidden; text-indent: -9999px; } .callouts li {float:left;} /* set bg image for each link */ li.home a {background-image:url(../images/nav/home.gif); width:63px;} li.contact-us a {background-image:url(../images/nav/contact-us.gif); width:115px;} li.patient-login a {background-image:url(../images/nav/patient-login.gif); width:133px;} li.doctor-login a {background-image:url(../images/nav/doctor-login.gif); width:136px;} /* - - - NAVIGATION ROLLOVER EFFECTS - - - */ .callouts ul a:hover, .callouts ul li.active a { background-position: 0px -39px; } .callouts ul li:hover .contact-us, .callouts ul li.sfhover .contact-us { background-position: 0px -39px; } /* - - - POP-UP - - - */ .callouts li ul { background: url(../images/bg-pop-up.jpg) no-repeat bottom; display: block; left: -999px; list-style: none; position: absolute; z-index: 1; width: 188px; padding-bottom:20px;} .callouts li:hover ul, .callouts li.sfhover ul { left: auto; margin: 0; padding:5px 0; } .callouts li ul li { display: block; margin: 0; float:none; } .callouts li ul li a { color: #012c4a; font-size: 13px; font-weight: normal; height: 24px; line-height: 24px; padding-left: 10px; text-decoration: none; text-indent: 0; } /* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */ .callouts li ul li a:hover, .callouts li ul li.active a {color:#FFF; background:#1c6da5;} /* UTILITY NAV */ #utility-nav { width: 447px; position:absolute; z-index:10; top:25px; margin-left:543px;} #utility-nav ul { list-style: none; width: 447px; } #utility-nav a { display: block; height: 39px; overflow: hidden; text-indent: -9999px; } #utility-nav li {float:left;} /* set bg image for each link */ li.home a {background-image:url(../images/nav/home.gif); width:63px;} li.contact-us a {background-image:url(../images/nav/contact-us.gif); width:115px;} li.patient-login a {background-image:url(../images/nav/patient-login.gif); width:133px;} li.doctor-login a {background-image:url(../images/nav/doctor-login.gif); width:136px;} .contact-us ul li a {background:none; width:177px;} /* - - - NAVIGATION ROLLOVER EFFECTS - - - */ #utility-nav ul a:hover, #utility-nav ul li.active a { background-position: 0px -39px; } #utility-nav ul li:hover .contact-us, #utility-nav ul li.sfhover .contact-us { background-position: 0px -39px; } /* - - - POP-UP - - - */ /* #utility-nav li ul { background: url(../images/bg-pop-up.jpg) no-repeat bottom; display: block; left: -9999px; list-style: none; position: absolute; z-index: 1; width: 188px;} the Contact Us Drop-Down was funny with this.*/ #utility-nav li ul { background: url(../images/bg-pop-up.jpg) no-repeat bottom; display: block; left: -9999px; list-style: none; position: absolute; z-index: 1; width: 188px;} #utility-nav li:hover ul, #utility-nav li.sfhover ul { left: auto; margin: 0; padding:5px 0 20px 0; } #utility-nav li ul li { display: block; margin: 0; float:none; } #utility-nav li ul li a { color: #012c4a; font-size: 13px; font-weight: normal; height: 24px; line-height: 24px; padding-left: 10px; text-decoration: none; text-indent: 0; } /* - - - SUBNAVIGATION ROLLOVER EFFECTS - - - */ #utility-nav li ul li a:hover, #utility-nav li ul li.active a {color:#FFF; background:#1c6da5;} /* MORE IN THIS SECTION */ #subnav {background:url(../images/bg-more-bottom.jpg) no-repeat bottom; min-height:157px; height:auto !important; height:157px; margin-bottom:10px; font-size:13px; line-height:16px;} #subnav ul { list-style:none; background:url(../images/bg-more-top.jpg) no-repeat top ;padding:50px 0 20px 25px; } #subnav li {padding:0px 0; margin:0;} #subnav a {color:#6fb2e1;} #subnav a:hover, #subnav li.active a {text-decoration:none; color:#FFF;} #subnav li.appointment-request a {background-image:none;} /* SESAME CSS */ img.right { margin: 0 0 15px 15px; float: right; clear: right; } img.left { margin: 0 15px 15px 0; float: left; clear: left; } img.left-border { float: left; clear: left; margin: 5px 15px 15px 0; border: solid 1px #333; /* Customize me! */ } img.right-border { float: right; clear: right; margin: 5px 0 15px 15px; border: solid 1px #333; /* Customize me! */ } p.flash_notice { margin: 18px; padding: 9px; color: #ff0000; border: 1px dotted #ff0000; background: #ffffff; text-align: center; } .clear {clear: both;} /* This styled div acts as the hr for most browsers */ div.hr { height: 0px; background-color: #eee; /* Customize me! */ border: solid 1px #eee; /* Customize me! */ border-width: 1px 0 0 0; /* Customize me! */ margin: 20px 0; padding: 0; clear: both; } /* This is the backup for screen readers */ hr { display: none; height: 0px; background-color: #eee; border: solid 1px #eee; border-width: 1px 0 0 0; clear: both; } /* Clear Fix */ .clear {clear: both;} .cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cf {display: inline-block;} /*this trips hasLayout for ie7*/ .cf {display: block;} /*this returns it back to normal*/ * html .cf {height: 1px;} div.box { float: right; clear: right; width: 334px; background-color: #3f8ec5; /* Customize me! */ padding: 5px 0 5px 5px; margin: 0 0 20px 20px; border: solid 1px #333; /* Customize me! */ -moz-border-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-radius: 5px; } div.box img { float: left; border: solid 1px #333; /* Customize me! */ margin-right: 5px; } div.box p { float: left; width: 50%; margin: 0; padding: 0; } /* invisalign teen */ img.right { border: solid 1px #000; margin: 0 0 15px 15px; float: right; clear: right; } img.left { border: solid 1px #000; margin: 0 15px 20px 0; float: left; } span.indent { padding-left: 40px; } #invisalign-sidebar { background: #fff; width: 275px; margin: 0 0 15px 15px; padding: 0; border: solid 1px #000; float: right; clear: right; } #invisalign-sidebar a { color: #036; } #invisalign-sidebar h3 { background: #97AFC2; margin: 0; padding: 15px; color: #fff; } #invisalign-sidebar p { padding: 0 15px; margin: 15px 0; } .thumb { border: solid 1px #000; margin: 0 10px 10px 0; float: left; clear: left; } .clear {clear: both;} /* Emergency Care */ ul#toggle-emergency { list-style: none; margin: 0 0 1em 0;} ul#toggle-emergency li { border: solid 1px #fff; border-width: 0 0 1px 0; padding: 1em 0; margin: 0;} .general-soreness { background: url(http://media.sesamehost.com/images/emergency-care/general-soreness.gif) no-repeat; width: 80px; height: 60px;} .general-soreness p {padding:0; margin:0;} .headgear { background: url(http://media.sesamehost.com/images/emergency-care/headgear.gif) no-repeat; width: 80px; height: 60px;} .headgear p {padding:0; margin:0;} .loose-appliance { background: url(http://media.sesamehost.com/images/emergency-care/loose-appliance.gif) no-repeat; width: 80px; height: 60px;} .loose-appliance p {padding:0; margin:0;} .loose-bracket { background: url(http://media.sesamehost.com/images/emergency-care/loose-bracket.gif) no-repeat; width: 80px; height: 60px;} .loose-bracket p {padding:0; margin:0;} .loose-wire { background: url(http://media.sesamehost.com/images/emergency-care/loose-wire.gif) no-repeat; width: 80px; height: 60px;} .loose-wire p {padding:0; margin:0;} .poking-wire { background: url(http://media.sesamehost.com/images/emergency-care/poking-wire.gif) no-repeat; width: 80px; height: 60px;} .poking-wire p {padding:0; margin:0;} .left-border { border: solid 1px #333; margin: 5px 15px 15px 0; float: left; clear: left;} /*----------------------------------------------- Forms */ /* Global form styles */ div.referral-form, div.appointment-form, div.comments { width: 100%; margin-top: 18px; letter-spacing: normal; } fieldset {border: 0; padding: 9px 0;margin: 0 18px;} fieldset h2 {margin: 0 0 9px;} fieldset p {margin: 0 0 18px;} fieldset p.disclaimer {font-size: 90%; font-style: italic; margin: 0;} fieldset dl {} fieldset dl dt {font-size: 16px; clear: both; margin: 9px 0 0;} fieldset dd ul {margin: 9px 0;} fieldset dd ul li, fieldset dd ol li {list-style: none;} fieldset dd li { clear: both; margin: 3px 0; padding: 5px 0 4px 10%; overflow: auto; height: auto; position: relative; } fieldset dd li:hover {background: #d5e0eb;/* customize me - this is the hover color change of li */} fieldset dd li input:hover, fieldset dd li input:focus, fieldset dd li select:hover, fieldset dd li select:focus, fieldset dd li textarea:hover, fieldset dd li textarea:focus { background: #f1f1f1;/* customize me - this is the hover color change of form fields*/ outline-color: #537197;/* customize me */ } fieldset li h3 {font-size: 12px; line-height: 18px; margin: 0;} fieldset li div {float: left; display: inline-block; width: 40%; position: relative; padding-right: 5%;} fieldset li div.input-street {width: 85%;} fieldset li div.input-city {width: 60%;} fieldset li div.input-full-name {width: 85%;} fieldset li div.input-phone-full {width: 85%;} fieldset li div.input-email {width: 85%;} fieldset li div.input-zip {width: 20%;} fieldset li div.content-switch, fieldset li div.radio, fieldset li div.checkbox {width: 85%;} fieldset li div.radio input {border: none;} fieldset li div.radio label {padding-right: 9px; font-size: 90%;} /*fieldset li div.hidden-content, fieldset li.hidden-content {display: none;}*/ fieldset li div.input-select-full {width: 85%;} fieldset li div.input-comments {width: 85%;} li div.input-comments textarea {height: 63px; overflow: auto;} fieldset li div.input-captcha {width: 50%;} fieldset li div.verification {width: 35%;} li div.verification img { border: 1px solid; margin-top: 9px; -moz-border-radius: 4px; /*for Moz, optional*/ -webkit-border-radius: 4px; /*for Webkit Browsers, optional*/ } fieldset li div label { line-height: 18px; font-weight: bold; margin-bottom: 9px; font-size: 80%; color: #537197;/*override to match site*/ } fieldset li div input, fieldset li div textarea, fieldset li div select { display: block; line-height: 18px; width: 100%; border: 1px solid; padding: 4px 0 3px; text-indent: 4px; margin-top: 9px; -moz-border-radius: 4px; /*for Moz, optional*/ -webkit-border-radius: 4px; /*for Webkit Browsers, optional*/ } fieldset li div select {height: 25px;} fieldset li div.radio input {display: inline; width: auto; margin-right: 4px;} fieldset li div div {width: 100%;} fieldset dl dd.form-footer button {/*these styles control the look of the button, change as necessary*/ clear:both;/*do not change, forces button to sit below floated elements*/ display: block; width: 125px; height: 34px; text-align: center; margin: 0; background:#cfdae4;/* customize me! */ border: 1px solid #537197; line-height: 34px; color:#537197;/* customize me! */ font-size:12px; font-weight:bold; -moz-border-radius: 4px; /*for Moz, optional*/ -webkit-border-radius: 4px; /*for Webkit Browsers, optional*/ } /* appointment form * Styles only for the appointment request form */ /* comment form * Styles only for the comments form */ /*numbering added by jQuery*/ fieldset ol li span.comment-number { font-size: 150%; color: #537197;/* customize me*/ position: absolute; left: 9px; top: 9px; } /* referral form * Styles only for the referral form */ .referral-form fieldset li div.radio {width: 40%;} /* JQuery */ input.error, select.error, textarea.error {border-color: #a52003; background: #fefda1;} div.error { background: url(../images/validate_error.gif) 0 0 no-repeat; color: #a52003; width: 18px; height: 18px; position: absolute; top: 0; right: 0; overflow: hidden; display: block; margin: 12px -2% 0 0; text-indent: -999em;} div.success { background: url(../images/validate_ok.gif) 0 0 no-repeat; width: 18px; height: 18px; position: absolute; top: 0; right: 0; overflow: hidden; display: block; margin: 12px -2% 0 0; text-indent: -999em;} .contact-form div.error, .contact-form div.success {margin-left: 0;} #slideshow-container ul.slideshow { list-style: none; width: 460px; height: 350px; margin: 0; padding: 0; } #slideshow-container { background: #6996b3; /* Customize me */ /*border: solid 1px #a0b606; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-radius: 5px; /* Optional - you may customize or remove */ width: 460px; padding: 10px; line-height: 18px; } #slideshow-container div#caption { min-height: 18px; clear: both; background-color: #bed0dc; /* Customize me */ color: #333; /* Customize me */ padding: 10px; margin: 10px 0 0 0; /*border: solid 1px #a0b606; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-radius: 5px; } #slideshow-container ul.slideshow img { width: 460px; height: 350px; margin: 0; } .office-tour-nav { background-color: #bed0dc; /* Customize me */ margin: 0 0 10px 0; padding: 5px 3px; /*border: solid 1px #a0b606; /* Customize me */ -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */ -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */ } .office-tour-nav a { text-decoration: none; font-size: 12px; padding: 5px; margin: 0 3px; color: #333;} .office-tour-nav a.activeSlide, .office-tour-nav a:hover {color: #009EC7;} /* jQuery Cycle Before and After */ #before-after-container { width: 490px; height: 100%; line-height: 18px; margin: 0 0 18px 0; padding: 10px 0 10px 10px; background-color: #6996b3; /* Customize me */ border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-radius: 5px; /* Optional - you may customize or remove */ } #before-after-container ul.slideshow { list-style: none; margin: 0; padding: 0; width: 490px; height: 100%; overflow: hidden; } ul#before-after-cycle li img { width: 232px; float: left; margin-right: 10px; margin-bottom: 5px; border: solid 1px #333; /* Customize me */ } #before-after-container p { float: left; width: 50%; margin: 0 0 10px 0; } #before-after-container div.cycle-detail { min-height: 55px; /* Increase this number to accomodate longer or shorter description text and to prevent "bumping" of lower content */ clear: both; background-color: #bed0dc; /* Customize me */ padding: 10px; margin: 0 10px 0 0; border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-radius: 5px; /* Optional - you may customize or remove */ } #before-after-container .before-after-nav { background: #bed0dc; /* Customize me */ margin: 0 10px 10px 0; padding: 5px 3px; border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove */ -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove */ -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove */ } #before-after-container .before-after-nav a { text-decoration: none; font-size: 12px; padding: 5px; margin: 0 3px; outline: none; color: #333; /* Customize me */ } #before-after-container .before-after-nav a.activeSlide, #before-after-container .before-after-nav a:hover {color: #009EC7;} /* Customize me */ /* Reset */ #pro-pack { position: relative; font-size: inherit; line-height: inherit; } #pro-pack img { display: block; } #pro-pack a, #pro-pack img, #pro-pack object { border:none; outline:none; } /* Global Styles ------------------- */ #pro-pack .border { border: solid 1px #333; /* Customize me!! */ } #pro-pack .right { float: right; margin: 0 0 15px 15px; } #pro-pack .left { margin: 0 15px 15px 0; float: left; } #pro-pack .right-border { border: solid 1px #333; /* Customize me!! */ float: right; clear: right; margin: 0 0 15px 15px; } #pro-pack .left-border { border: solid 1px #333; /* Customize me!! */ float: left; clear: left; margin: 0 15px 15px 0; } #pro-pack img.border { border: solid 1px #333; /* Customize me!! */ } /* Main Invisalign page ----------------- */ #pro-pack #video-invisalign { width: 360px; height: 266px; display: block; } #pro-pack p.flash_notice { margin: 18px; padding: 9px; color: #ff0000; border: 1px dotted #ff0000; background: #ffffff; text-align: center; } /* Invisalign Footer -------------------- */ #pro-pack #invisalign-footer { background: #fff; width: 100%; margin: 30px 0; padding: 0; border: solid 1px #333; /* Customize me!! */ font-size: 11px; -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ clear: both; } #pro-pack #invisalign-footer h3 { background: #97AFC2; /* Customize me!! */ margin: 0; padding: 8px 15px; color: #fff; /* Customize me!! */ font-size: 14px; -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ } #pro-pack #invisalign-footer ul li img { margin: 0 10px 0 15px; float: left; } #pro-pack #invisalign-footer p { padding: 0 15px; margin: 30px 0 15px 0; } #pro-pack #invisalign-footer ul { margin: 15px; padding: 0 0 15px 0; list-style: none; border: solid 1px #333; /* Customize me!! */ border-width: 0 0 1px 0; } #pro-pack #invisalign-footer li { width: 33%; float: left; margin: 0; padding: 0; border: none; background: none; } #pro-pack #invisalign-footer li a { float: left; } #pro-pack .invisalign-footer-logo { margin: 0 30px 0 15px; float: left; } /* Clear Fix --------------------- */ .clear {clear: both;} .cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .cf {display: inline-block;} /*this trips hasLayout for ie7*/ .cf {display: block;} /*this returns it back to normal*/ * html .cf {height: 1px;} /* Invisalign Testimonials ------------------ */ #pro-pack ul#testimonials { margin: 0; padding: 0; list-style: none; list-style-image: none; } #pro-pack .invisalign-block { width: 315px; float: left; } p.invisalign-block {padding-top:0; margin-top:0;} /* Invisalign Videos ------------------- */ #pro-pack div.invisalign-flash { background: url(http://media.sesamehost.com/images/invisalign-pro-package/invisalign-video-bg.jpg) no-repeat; width: 450px; height: 250px; border: solid 1px #333; /* Customize me!! */ margin-bottom: 15px; } #pro-pack div.invisalign-flash img { margin: 30px 50px 0; float: right; } #pro-pack .bump-right { margin-right: 5px; } #pro-pack #video-invisalign-best-friends, #pro-pack #video-invisalign-news-travels-fast { width: 320px; height: 206px; display: block; } #pro-pack #video-invisalign-lobby { width: 320px; height: 266px; display: block; } /* Invisalign Before and After */ #pro-pack #invisalign-before-after { width: 488px; color:#FFF; min-height: 335px; line-height: 18px; margin: 0 0 18px 0; padding: 10px 0 10px 10px; background-color: #025894; /* Customize me */ border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ } #pro-pack #invisalign-before-after ul.slideshow { list-style: none; margin: 0; padding: 0; width: 488px; height: 270px; overflow: hidden; } #pro-pack ul#before-after-cycle li img { width: 232px; height: 265px; float: left; margin-right: 10px; border: solid 1px #333; /* Customize me */ } #pro-pack #invisalign-before-after p { float: left; width: 50%; margin: 0 0 10px 0; } #pro-pack #invisalign-before-after div.cycle-detail { _width: 478px; min-height: 55px; _height: 75px; line-height: 18px; clear: both; background-color: #fff; /* Customize me */ color: #333; /* Customize me */ padding: 10px; margin: 0 10px 0 0; border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ } #pro-pack #invisalign-before-after div.before-after-nav { background: #fff; /* Customize me */ _width: 478px; margin: 0 10px 10px 0; padding: 5px 3px; border: solid 1px #333; /* Customize me */ -moz-border-radius: 5px 5px 0 0; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-top-left-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ -webkit-border-top-right-radius: 5px; /* Optional - you may customize or remove - Does not work in IE */ } #pro-pack #invisalign-before-after .before-after-nav a { text-decoration: none; font-size: 12px; padding: 5px; margin: 0 3px; outline: none; color: #333; /* Customize me */ } #pro-pack #invisalign-before-after .before-after-nav a.activeSlide, #pro-pack #invisalign-before-after .before-after-nav a:hover {color: #009EC7;} /* Customize me */ .community { width: 275px; float:left; margin: 0px 15px 0px 0px; } img.community { margin-bottom: 5px; border: solid 1px #333; /* Customize me! */ } .small-text { font-family: Tahoma, Geneva, sans-serif; line-height: 12px; font-size: 12px; color: #090400; display: block; margin: 0px 0px 15px 0px; }