/*
Theme Name: SSC
Theme URI: http://specialistskin.com.sg
Version: 2.0
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

/* Global Resets */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
.clear { clear:both; }
a { outline: none; }
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */

/* Body */
body { background-color: #d1d9b6; border-top: 36px solid #471901; }
#content-area { border-top: 20px solid white; height: 100%; width: 787px; margin: 0px auto; background-color: white; border-bottom: 10px solid #471901; margin-bottom: 10px; }

/* Wrapper */
#headwrapper { width: 787px; background-color: white; height: 100%; margin: 0px auto; }
#wrapper { width: 787px; background-color: white; height: 100%; margin: 0px auto; }

/* Header */
#header { background: url(images/header.png); height: 157px; width: 787px; }


/* Navigation Bar*/
#nav {	background:#471901; width: 100%; }
#navbar {	z-index: 1000;	position: relative;	margin:0 auto;	padding:0px 10px;	background:#471901; width: 785px; }
#navbar a {	font-family: Arial; font-size: 11px; text-decoration: none; font-weight: 100; letter-spacing: 1px;	}

#page-bar {	width:100%;	}
#page-bar ul {	list-style: none;}
#page-bar li {	float:left;list-style:none;	cursor: pointer;display:block;}
#page-bar li:hover { background: #c9ab95;}
#page-bar a, #page-bar a:visited {	margin: 0px;	padding:10px 31px; color:#FFF;	display:block;	}
#page-bar a:hover {	text-decoration:none;display:block;	}

/* Dropdown Menus */		
#page-bar li {	float: left;	margin: 0px;	padding: 0px;	}
#page-bar li li {	float: left;	margin: 0px;	padding: 0px;	width: 122px;	text-transform:none;}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {	background: #471901;width: 122px;float: none;	margin: 0px;	padding: 5px 10px 5px 18px;	}
#page-bar li li a:hover, #page-bar li li a:active {	background: #c9ab95;padding: 5px 10px 5px 18px;	}
#page-bar li ul {	position: absolute;width: 10em;	left: -999em;	}
#page-bar li:hover ul {	left: auto;	display: block;	}	
#page-bar li:hover ul, #page-bar li.sfhover ul {	left: auto;	}

/* Float Properties*/
.clearfloat:after {	content:".";	display:block;	height:0;	clear:both;	visibility:hidden;	}
.clearfloat {	display: inline-block;	}

/* Body */
#homepage-body { border-top: 20px solid white; height: 100%; width: 787px; margin: 0px auto; background-color: white; border-bottom: 10px solid #471901; margin-bottom: 10px; }
.homepage-left { width: 535px; float: left; height: 100%; }
.welcome-content { width: 490px; margin: 0px auto; font-family: Arial; font-size: 12px; line-height: 1.6em; margin-bottom: 20px;}
.welcome-content a { font-family: Arial; font-size: 12px; line-height: 1.6em; margin-bottom: 20px; color: #471901; font-weight: bold; text-decoration: none;}
.homepage-bottom { width: 535px; height: 100%; font-family: Arial; color: white; font-size: 11px; background: #dac0ad; border-bottom: 28px solid #dac0ad; }
.homepage-bottom a { font-family: Arial; color: #471901; font-size: 11px; background: #dac0ad; border-bottom: 28px solid #dac0ad; }
.bottomtop { width: 535px; height: 24px; background: url(images/bottomtop.gif); }
.bottom-1 { width: 212px; background: #dac0ad; padding-left: 20px; float: left; margin-top: 0px; margin-bottom: 10px; line-height: 1.6em; padding-right: 35px;  }
.bottom-2 { width: 212px; background: #dac0ad; padding-left: 18px; float: left; margin-top: 0px; margin-bottom: 10px; line-height: 1.6em; }
.homepage-bottom p { margin-top: 10px;  }
.homepage-right { width: 252px; float: right; height: 365px; background: #d6dcb1; }
.viewtop { width: 252px; height: 25px; background: url(images/viewtop.gif); }
.picture1 { width: 218px; height: 288px; background: url(images/thumb-1.jpg); margin: 15px;}
.picture2 { width: 218px; height: 288px; background: url(images/thumb-2.jpg); margin: 15px;}
.picture3 { width: 218px; height: 288px; background: url(images/thumb-3.jpg); margin: 15px;}
.picture4 { width: 218px; height: 288px; background: url(images/thumb-4.jpg); margin: 15px;}
.picture5 { width: 218px; height: 288px; background: url(images/thumb-5.jpg); margin: 15px;}
.picture6 { width: 218px; height: 288px; background: url(images/thumb-6.jpg); margin: 15px;}
.picture7 { width: 218px; height: 288px; background: url(images/thumb-7.jpg); margin: 15px;}


/* Dermatologists */
.derma-intro { width: 480px; padding-left: 25px; }
.derma-intro h1 { font-family: Arial; font-size: 28px; color: #471901; font-weight: 100; margin-bottom: 10px; }
.derma-intro p { font-family: Arial; font-size: 12px; color: black; line-height: 1.6em; margin-bottom: 10px;}
.dermatab { width: 508px; height: 23px; background: url(images/derma-tab.png); }
.doctor-profile { width: 550px; height: 100%; padding-left: 25px; float: left; margin-bottom: 10px;}
.profile { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; border-bottom: 1px dashed white; padding-bottom: 10px;  }
.profile h2 { font-family: Arial; font-size: 16px; color: #471901; font-weight: 100; margin-bottom: 5px; }
.profile h6 { font-family: Arial; font-size: 9px; color: #471901; padding: 5px; }
.profile-side p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; margin-bottom: 10px; padding-top: 10px; }
.profile-photo { padding-top: 10px; }
.profile-side { width: 480px; height: 100%; float: right;}

/* Related */
.related-derma { width: 195px; height: 100%; float: right; background-color: #d6dcb1; border-bottom: 10px solid #006837; margin-right: 17px;}
.relatedtab { width: 195px; height: 23px; background: url(images/relatedtab.png); }
.related-derma p { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}
.related-derma a { font-family: Arial; font-size: 11px; color: #006837; line-height: 1.6em; margin-bottom: 10px; padding: 12px; text-decoration: none; font-weight: bold;}
.textwidget { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}


/* Services */
.services-intro { width: 480px; padding-left: 25px; }
.services-intro h1 { font-family: Arial; font-size: 28px; color: #471901; font-weight: 100; margin-bottom: 10px; }
.services-intro p { font-family: Arial; font-size: 12px; color: black; line-height: 1.6em; margin-bottom: 10px;}
.services-main { width: 550px; height: 100%; padding-left: 25px; float: left; }
.services { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.comestictab { width: 509px; height: 23px; background: url(images/comestictab.png); }
.services p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid white; }
.servicechoicetab { width: 508px; height: 23px; background: url(images/servicechoice.png); }
.serviceschoice { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.serviceschoice p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; padding-bottom: 10px; padding-top: 10px; padding-left: 20px; }
.serviceschoice h1 { font-family: Arial; font-size: 24px; color: #471901; line-height: 1.6em; padding-bottom: 5px; padding-top: 10px; }
.services-main a { text-decoration: underline; font-weight: bold; color: #471901;}
.generaltab { width: 509px; height: 23px; background: url(images/general.png); }
.services-sub { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.services-sub h4 { font-family: Arial; font-size: 14px; color: #471901; font-weight: 100; margin-bottom: 5px; }
.services-sub p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; padding-bottom: 10px; padding-top: 10px; }
.services-sub ul { padding-left: 50px; }
.services-sub li { list-style: circle; font-size: 11px; color: #471901; font-family: Arial; line-height: 1.6em;  }
.services-sub ol { padding-left: 50px; }
.services-sub ol li { list-style: decimal; line-height: 1.6em; }

/* About */
.about-intro { width: 480px; padding-left: 25px; }
.about-intro h1 { font-family: Arial; font-size: 28px; color: #471901; font-weight: 100; margin-bottom: 10px; }
.about-intro p { font-family: Arial; font-size: 12px; color: black; line-height: 1.6em; margin-bottom: 10px;}
.about-main { width: 550px; height: 100%; padding-left: 25px; float: left; }
.about-text { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.about-text p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; padding-bottom: 10px; padding-top: 10px; }
.about-text a { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em; padding-bottom: 10px; padding-top: 10px; font-weight: bold; text-decoration: none; }
.abouttab { width: 509px; height: 23px; background: url(images/abouttab.png); }

/* Publications */
.publication-intro { width: 480px; padding-left: 25px; }
.publication-intro h1 { font-family: Arial; font-size: 28px; color: #471901; font-weight: 100; margin-bottom: 10px; }
.publication-intro p { font-family: Arial; font-size: 12px; color: black; line-height: 1.6em; margin-bottom: 10px;}
.publication-main { width: 550px; height: 100%; padding-left: 25px; float: left; }
.publicationtab { width: 509; height: 23px; background: white; }
.publication-text { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.document { width: 150px; height: 100%; background-color: #dac0ad; float: left; }
.publication-text a { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em;  text-decoration: none; font-weight: bold;}

/* Products */
.product-main { width: 550px; height: 100%; padding-left: 25px; float: left; }
.producttab { width: 509; height: 23px; background: white; }
.product-text { width: 483px; height: 220px; background-color: #dac0ad; padding-left: 25px; padding-top: 20px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.product { width: 150px; height: 250px; background-color: #dac0ad; float: left; }
.product p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em;  text-decoration: none; }
.product a { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em;  text-decoration: none; font-weight: bold;}


/* Contact */
.contact-intro { width: 480px; padding-left: 25px; }
.contact-intro h1 { font-family: Arial; font-size: 28px; color: #471901; font-weight: 100; margin-bottom: 10px; }
.contact-intro p { font-family: Arial; font-size: 12px; color: black; line-height: 1.6em; margin-bottom: 10px;}
.contact-main { width: 550px; height: 100%; padding-left: 25px; float: left; }
.emailtab { width: 509; height: 23px; background: white; }
.contact-text { width: 483px; height: 100%; background-color: #dac0ad; padding-left: 25px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; margin-bottom: 10px;}
.contact-text p { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em;  text-decoration: none; }
.contact-text a { font-family: Arial; font-size: 11px; color: #471901; line-height: 1.6em;  text-decoration: underline; font-weight: bold;}
.contact-text ul { padding-left: 50px; }
.contact-text li { list-style: circle; font-size: 11px; color: #471901; font-family: Arial; line-height: 1.6em;  }
.contact-text strong { font-family: Arial; font-size: 14px; color: #471901; line-height: 1.6em;  text-decoration: none; font-weight: bold; }


/* Contact Form */
.contact-text input, .contact-text textarea { padding: 3px; width: 471px; font-family: Arial, sans-serif; font-size: 12px; margin: 0px 0px 10px 0px; color: #666; border: 1px solid #fff; }
.contact-text textarea { height: 150px; }
.contact-text textarea:focus, .contact-text input:focus { border: 1px solid #fff; }
.contact-text input.submit-button {	width: 100px; background-color: #471901; color: white; }
label {	 text-align: right; margin-right: 15px;	width: 100px; padding-top: 5px; font-size: 12px; font-family: Arial; color: white; }

/* Latest Services */
.latest-services { width: 195px; height: 100%; float: right; background-color: #d6dcb1; border-bottom: 10px solid #006837; margin-right: 17px; margin-bottom: 10px;}
.latesttab { width: 195px; height: 23px; background: url(images/latesttab.png); }
.latest-services p { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}
.latest-services a { font-family: Arial; font-size: 11px; color: #006837; line-height: 1.6em; padding-left: 12px; text-decoration: none; font-weight: bold;}

/* Definition */
.definition { width: 193px; height: 100%; float: right; background-color: #d6dcb1; border-bottom: 10px solid #006837; margin-right: 17px; margin-bottom: 10px;}
.definitiontab { width: 193px; height: 23px; background: url(images/definitiontab.png) white;}
.definition p { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}
.definition a { font-family: Arial; font-size: 11px; color: #006837; line-height: 1.6em; padding-left: 12px; text-decoration: none; font-weight: bold; }

/* Latest Paper */
.latestpaper { width: 193px; height: 100%; float: right; background-color: #d6dcb1; border-bottom: 10px solid #006837; margin-right: 17px; margin-bottom: 10px;}
.latestpapertab { width: 193px; height: 23px; background: url(images/latestpapertab.png) white;}
.latestpaper p { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}
.latestpaper a { font-family: Arial; font-size: 11px; color: #006837; line-height: 1.6em; padding-left: 12px; text-decoration: none; font-weight: bold; }

/* Address */
.address { width: 194px; height: 100%; float: right; background-color: #d1d7ac; border-bottom: 10px solid #006837; margin-right: 17px; margin-bottom: 10px;}
.addresstab { width: 194px; height: 23px; background: url(images/contacttab.png) white;}
.address p { font-family: Arial; font-size: 11px; color: white; line-height: 1.6em; margin-bottom: 10px; padding: 12px;}

/* Gallery */
#gallery { border-top: 20px solid white; padding-left: 5px; height: 300px; width: 730px; margin: 0px auto; background-color: #dac0ad;  margin-bottom: 10px; }
.gallerytab { width: 730px; height: 23px; background: white; }

/* Box */
#box { height: 100%; width: 100%; }
#box p { font-size: 12px; font-family: Arial; line-height: 1.6em; }

/* Footer */
#footer { width: 787px; margin: 0px auto; font-family: Arial; font-size: 11px; margin-bottom: 10px ;}

/* About Gallery */
#s3slider {   width: 710px; /* important to be same as image width */   height: 250px; /* important to be same as image height */   position: relative; /* important */   overflow: hidden; /* important */ margin: 0px auto; margin-top: 12px;}

#s3sliderContent {   width: 400px; /* important to be same as image width or wider */   position: absolute; /* important */   top: 0; /* important */   margin-left: 0; /* important */}

.s3sliderImage {   float: left; /* important */   position: relative; /* important */   display: none; /* important */}

.s3sliderImage span {   position: absolute; /* important */   left: 0;   font: 10px/15px Arial, Helvetica, sans-serif;   padding: 10px 13px;   width: 700px;   background-color: #471901;   filter: alpha(opacity=70); /* here you can set the opacity of box with text */  -moz-opacity: 0.7; /* here you can set the opacity of box with text */   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */   opacity: 0.7; /* here you can set the opacity of box with text */   color: #fff;  display: none; /* important */   top: 0; }