/* CSS Document 
 Author - Marc Mahoney
 Date - 17th July 2007
*/

html {
 background-color: #ebebeb;
 font: normal 12px "Trebuchet MS", Verdana, "Lucida Grande", Georgia, Sans-Serif;
}

/* Links */

a { 
 font-weight: bold; 
 border-bottom: 1px dotted transparent;
}

a:link {
 color: #009;
 text-decoration: none;
 border-bottom-width: 0;
}

a:visited {
 color: #009;
 text-decoration: none;
 border-bottom-width: 0;
}

a:hover, a:active {
 color: #009;
 border-bottom-width: 0;
}

/* Html Elements */

h1, h2, h3, h4, h5, h6 {
 font-weight: normal;
 margin: 0;
 padding: 0; 
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 font-weight: normal;
 border-bottom-width: 0;
}

h1 {
 font-size: 28px; 
}

h2 {
 font-size: 26px;
}

h3 {
 font-size: 24px; 
}

h4 {
 font-size: 20px; 
}

h5 {
 font-size: 18px; 
}

h6 {
 font-size: 16px; 
}

ul, ol, blockquote, pre {
 color: #555;
 padding: 10px 30px;
 line-height: 1.8em;
}

q {
 font-weight: bold;
 display: block;
}

ul {
 list-style-type: square;
}

blockquote, pre {
 background-repeat: repeat;
 background-image: url('../images/maincontentbg.gif'); 
 border: 1px dashed #bcd; 
}

form {
 background-repeat: repeat;
 background-image: url('../images/maincontentbg.gif');
 border: 1px dashed #bcd; 
 color: #555;
 margin: 0 40px;
 padding: 10px 20px;
 line-height: 2.6em;
}

form dd {
 margin-left: 125px;
}

form dt {
 float: left;
 position: relative;
 padding-left: 10px;
 padding-right: 10px;
 margin-left: 0;
}


/* Structure */

body {
 padding: 0;
 width: 850px;
 margin: 0 auto 0 auto;
}

#bodycontainer {
 padding: 0;
 width: 850px;
 margin: 0 auto 0 auto;
 background-repeat: repeat-y;
 background-position: top left;
 background-image: url('../images/bodybg.gif');
}

#content {
 width: 750px;
 text-align: center;
 margin: 0 auto 0 auto;
 border-top: 5px solid #333;
}

#container {
 width: 700px;
 margin: 0 auto 0 auto;
}

#header {
 position: relative;
 width: 100%;
 margin: 10px 0 10px 0; 
}

#navigation {
 clear: both; 
 margin: 0 0 10px 0;
 background-color: #ccc;
}

#navigation, #dual-navigation, #sub-navigation {
 width: 100%;
 position: relative;
 float: left;
}

#dual-navigation {
 margin: 0;
 background-color: #ccc;
}

#sub-navigation {
 margin: 0 0 10px 0;
}

#page-header {
 clear: left;
 position: relative;
 margin: 20px 0 10px 0;
}

#wrapper {
 clear: both;
 position: relative;
 text-align: center;
}

#cols, #wide-cols {
 clear: both;
}

#footer {
 clear: both;
 height: 50px;
 width: 700px;
 background-color: #ccc;
 margin-top: 20px;
}

#footer a {
 border-bottom-width: 0;
}

#w3c-validation {
 float: left;
 text-align: left;
 width: 250px;
 padding: 0;
 margin: 0;
}

#copyright {
 float: right;
 text-align: right;
 width: 440px;
}

#copyright p {
 font-size: 11px;
 padding: 10px 10px 0 0;
 margin: 0; 
 color: #333;
}

.validator-img {
 float: left;
 padding: 20px 0 0 10px;
 margin: 0;
}



/* Header */

#main-title {
 display: block;
 padding: 0 5px 0 0;
 float: left;
 width: 250px;
 margin: 5px 0 10px 0;
 border-right: 1px solid #999;
}

#main-title h1 {
 float: left;
 font-size: 24px;
 margin: 10px 5px 0 0;
 letter-spacing: 0.1em;
 color: #009;

}

.cosmetic-clinic {
 float: left;
 padding: 0;
 margin: 0 0 0 11px;
 color: #000;
 font-size: 10px;
 letter-spacing: 1.1em;
}

#sub-title {
 display: block;
 float: left;
 width: 160px;
 text-align: left;
}

#sub-title h2 {
 padding: 20px 0 0 10px;
 float: left;
 font-size: 12px;
 line-height: 2.5em;
 text-align: left;
}

#logo {
 float: left;
 width: 150px;
 padding-bottom: 10px;
}

#address {
 float: right;
 width: 300px;
 text-align: right;
 padding: 0 15px 0 0;
}

.italic-text {
 float: left;
 clear: left;
 width: 150px;
 text-align: left;
 font-style: italic;
 color: #009;
 margin: 60px 0 0 0;
}

/* Navigation */

#navigation ul, #dual-navigation ul {
 padding: 0;
 width: 100%;
 float: left;
 margin: 0 0 0 10px;
 list-style-type: none;
}

#navigation li, #dual-navigation li {
 float: left; 
}

#navigation a:link, #navigation a:visited, #dual-navigation a:link, #dual-navigation a:visited {
 float: left;
 display: block;
 color: #009;
 padding: 5px 8px;
 border-bottom-width: 0;
}

#navigation a:hover, #navigation a:active, #dual-navigation a:hover, #dual-navigation a:active {
 color: #fff;
 background-color: #009;
}

#sub-navigation ul {
 padding: 0;
 width: 100%;
 float: left;
 margin: 0;
 list-style-type: none;
 background-color: #009;
}

#sub-navigation li {
 float: left; 
}

#sub-navigation a:link, #sub-navigation a:visited {
 float: left;
 display: block;
 color: #fff;
 padding: 5px 10px;
 border-bottom-width: 0;
}

#sub-navigation a:hover, #sub-navigation a:active {
 color: #fff;
 background-color: #006;
}

body#bhome li#lhome a {
 color: #fff;
 background-color: #009;
}

body#baboutus li#laboutus a {
 color: #fff;
 background-color: #009;
}

body#bpractice li#lpractice a {
 color: #fff;
 background-color: #009;
}

body#bteam li#lteam a {
 color: #fff;
 background-color: #009;
}

body#bservices li#ldentalcosmetics a {
 color: #fff;
 background-color: #009;
}

body#bservices li#linvisalign a {
 color: #fff;
 background-color: #006;
}

body#bservices li#ldental a {
 color: #fff;
 background-color: #006;
}

body#bservices li#ldentalimplants a {
 color: #fff;
 background-color: #006;
}

body#bservices li#lbeforeafter a {
 color: #fff;
 background-color: #006;
}

body#bservices li#lfamily a {
 color: #fff;
 background-color: #009;
}

body#bservices li#lcosmetics a {
 color: #fff;
 background-color: #009;
}

body#bservices li#lfacial a {
 color: #fff;
 background-color: #006;
}

body#bservices li#lcosmeticservices a {
 color: #fff;
 background-color: #006;
}

body#bcosts li#lcosts a {
 color: #fff;
 background-color: #009;
}

body#bcontactus li#lcontactus a {
 color: #fff;
 background-color: #009;
}

body#bcontactus li#lcontactussub a {
 color: #fff;
 background-color: #006;
}

body#bcontactus li#lfeedback a {
 color: #fff;
 background-color: #006;
}

body#bcontactus li#lquestion a {
 color: #fff;
 background-color: #006;
}

body#blinks li#llinks a {
 color: #fff;
 background-color: #009;
}

/* Wrapper */

#welcome {
 text-align: left;
 padding: 10px;
 margin: 10px 0 10px 0;
 background-repeat: repeat;
 background-image: url('../images/maincontentbg.gif');
}

#welcome h3, h4 {
 color: #009;
 padding: 0 10px;
}

#welcome h5 {
 color: #333;
 padding: 10px 10px 0 15px;
}

#welcome p {
 padding: 0 20px;
}

#welcome ul {
 margin-left: 50px;
 padding: 0 20px 0 0;
 list-style: circle; 
}

#welcome li {
 color: #000;
}

#welcome table {
 margin-left: 30px;
 margin-bottom: 20px;
 border-left: 1px solid #666;
 border-top: 1px solid #666;
 border-collapse: collapse;
}

#welcome thead {
 background-color: #666;
 color: #fff;
}

#welcome td {
 padding: 5px;
 border-right: 1px solid #666;
 border-bottom: 1px solid #666;
 width: 285px;
}

#welcome form table {
 margin: 20px;
 border: none;
}

#welcome form td {
 padding: 1px;
 width: 125px;
 border: none;
}

#prefooter {
 clear: both;
 padding: 10px;
 text-align: left;
}

#invisalign-div {
 float: left;
 width: 320px;
 height: 280px;
 padding: 15px 0 0 0;
 margin: 10px 10px 20px 300px;
 text-align: center; 
 background-repeat: no-repeat;
 background-image: url('../images/invisalign/treatmentbg.gif');
}

#invisalign-thumbs1, #invisalign-thumbs2 {
 position: relative;
 float: left;
 width: 250px;
 padding: 0;
 margin: 20px 0 0 50px;
}

#invisalign-thumbs table {
 border-collapse: collapse;
 margin-top: 20px;
 border: 0;
 width: 100%;
}

#invisalign-thumbs tr, #invisalign-thumbs td {
 border-collapse: collapse;
 border: 0;
 width: 50%;
}

#filler {
 clear: both;
}

#logos img {
 float: left;
 padding: 15px;
 margin: 0;
}

#gallery {
 background-color: #ccc;
 width: 660px;
 height: 550px;
 margin: 20px 0 20px 10px;
 padding: 0;
}

.flipbook {
 width: 670px;
 height: 550px;
 margin: 10px 5px;
 padding: 0;
 border: 1px solid #333; 
}

.beforeafter {
 width: 100%;
 margin: 10px;
}

.video {
 float: right;
 margin: 10px;
 border-bottom: 3px solid #000;
}

.slideshow {
 float: right;
 margin: 10px;
}

.teamimage {
 float: right;
 margin: 10px;
 position: relative;
}

#small-slide-show {
 width: 200px;
 float: right;
 margin: 10px 5px 0 5px;
 position: relative;
}

.col, .wide-col  {
 float: left;
 position: relative;
 margin: 10px 10px 30px 13px;
 text-align: left; 
 background-repeat: repeat;
 background-image: url('../images/maincontentbg.gif');
}

.col {
 width: 150px;
}

.wide-col {
 width: 325px;
}

.col image {
 width: 150px;
 height: 100px;
}

.col p, .wide-col p {
 margin: 0;
 line-height: 1.5em;  
 padding: 5px; 
}

.col h3, .wide-col h3 {
 font-size: 14px;
 padding: 5px 10px;
}

#col1 h3, #col2 h3, #col3 h3, #col4 h3, #wide-col1 h3, #wide-col2 h3 {
 color: #fff;
 font-weight: bold;
 background-color: #999;
}

#col1 a, #col2 a, #col3 a, #col4 a {
 font-weight: normal;
 border-bottom-width: 0px;
}

#col1 a:link, #col2 a:link, #col3 a:link, #col4 a:link {
 color: #000;
} 

#col1 a:visited, #col2 a:visited, #col3 a:visited , #col4 a:visited {
 color: #000;
}

.highlightloans {
 font-size: 14px;
 font-weight: bold;
}

.highlightcosmetics {
 font-size: 16px;
 font-weight: bold;
 color: #7A3017;
}

.filler {
 height: 50px;
}

.pagefootertext {
 width: 710px;
 margin: 20px 70px;
 padding: 0;
 text-align: center;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 font-weight: normal;
 color: #666;
}

.pagefootertext a, .pagefootertext a:link, .pagefootertext a:visited, .pagefootertext a:active {
 color: #009;
 font-weight: normal;
 text-decoration: none;
 border-bottom: 1px solid #009; 
}

.pagefootertext a:hover {
 color: #009;
 font-weight: normal;
 text-decoration: none;
 border-bottom-width: 0px; 
}

.video-link-1, .video-link-2 {
 float: left;
 margin: 5px 0 5px 20px;
}

.video-link-1 {
 width: 170px;
}

.video-link-2 {
 width: 200px;
}