@charset "utf-8";
/*
Theme Name: Dentistry In Markham 2013/14
Description: Professional One Page WordPress theme with tons of functions. 
Author: Adam Connor
Author URI: http://adamconnor.ca/
version: 1.+
Tags: 2013. 2014
*/

/*  HTML5 tags
********************************************************************************************
********************************************************************************************/
header, section, footer,
aside, nav, article, figure, span {
	display: block;
}

/*  font-links
********************************************************************************************
********************************************************************************************/
@font-face { font-family: Keffeesatz; src: url(YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(YanoneKaffeesatz-Bold.otf) format("opentype") }


/*  reset
********************************************************************************************
********************************************************************************************/
* { margin: 0; padding: 0; outline: 0; }
.clear {clear: both;}


/*  basics
********************************************************************************************
********************************************************************************************/
body { 	font-family: Keffeesatz, Arial; 
				color: #8bb9d8;
				font-size: 87.5%; /* Base font size: 14px */
				background: url(../img/bg-li), url(../img/bg.jpg); #6093ad;
				line-height: 1.429;
				margin: 0;
				padding: 0;
				text-align: left;
				 }
				 
/*  global
********************************************************************************************
********************************************************************************************/
.flourish {background: url(../img/flourish.png); height: 15px; width: 293px; margin: 0 auto;}
.hr {background: url(../img/hr.png); height: 2px; width: 898px; margin: 0 auto; clear: both;}
#logo-text {background: url(../img/logo-text.png); height: 194px; width: 702px; margin: 0 auto;}
				 
/*  header
********************************************************************************************
********************************************************************************************/
header {background: url(../img/header-bg.png) 0px; width: 960px; height: auto; margin-top: 4em;}

/*  nav
********************************************************************************************
********************************************************************************************/
nav {
	width: 920px;
	height: 45px;
	margin: 0 auto;
}
nav ul {
    list-style-type: none;
    margin: 1em;
    overflow: hidden;
}
nav ul li {
	float: left;
}
nav ul li.indent {
	background: url(../img/flourish.png) no-repeat center;
	display: inline-block;
	height: 15px;
	width: 293px;
	margin-top: 0.5em;
}

.fixed {
	position: fixed; 
	background: url(../img/subnav-bg.png); #6093ad;
	top: 0; 
	width: 960px;
	height: 80px;
	padding-left: 23px; 
	z-index: 1;
}

/*  slider
********************************************************************************************
********************************************************************************************/
#slider { 
    position: relative; 
    width: 911px; 
    height: 308px; 
    padding: 10px; 
}

#slider > div { 
    position: absolute; 
    top: 10px; 
    left: 11px; 
    right: 10px; 
    bottom: 10px; 
}

/*  sections
********************************************************************************************
********************************************************************************************/
#wrapper {margin: 0 auto; width: 960px; }
#welcome, #our-dentistry, #dental-services, #contact-us {width: 960px; padding-top: 2em; background-color: #fff; margin-bottom: 1em; background: url(../img/section-bg.png) top center no-repeat;}
footer {background: url(../img/header-bg.png) 0px 140px; width: 960px; min-height:100px; padding-top: 2em; margin-bottom: 1em;}
.content-left {float: left;  margin:1.5em 0.5em 1.2em 1.2em; width: 450px;} 
.content-right {float: right; margin:1.5em 1.2em 1.2em 0.5em; width: 450px; } 

.section-title {width: 960px; text-align: center;}


#testimonials {
	position: center;
	background: url(../img/welcome-frame.png) no-repeat;
	width:932px;
	height:346px;
	margin: 0 1em 1em 1em;
}

#dim-cutout {
	background: url(../img/dim-cutout.png) no-repeat;
	width:451px;
	height:241px;
	position: relative;
	bottom:25px;
}

ol#office-hours {
		height: 105px;
		width: 440px;
		position: relative;
		top:9px;
		z-index: -999;
		padding: 0.5em 0 0 0.7em;
}


#quote {padding: 2em 2em 0.3em 2em; text-align: center;}

/*  our dentistry
********************************************************************************************
********************************************************************************************/


/*******************  photo-gallery ******************/
#features {padding: 1em 0; margin: 0 auto; display: table;}
#gallery {padding-top: 1em;}
#gallery ul li {width:303px; height:208px; background: url(../img/photo-frame.png); display: inline-block; margin: 0.5em;}
#gallery ul li img {padding: 0.7em 0.8em;}
#gallery ul li.lrg-photo {width:430px; height:208px; background: url(../img/photo-frame-lrg.png); display: inline-block; margin: 0.5em;}

/*******************  staff ******************/

#staff { height:255px;}
#staff ul { display: block;}
#staff ul li {
width: 190px; margin-top: 1em; padding: 0.8em 1.5em 0 1.5em ; float: left;}

#staff img {

	margin-left: 1.3em;
}

#staff .vertLine {
position: relative;
border-right: solid 1px #3a5d78; 
height: 50%;

}
.vertLine:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom:0;
   right: -1px;
   border: 1px solid #517da1;
   height: 99%;
}

/*******************  features ******************/
#features ul li {
width: 295px; line-height: 1.2; margin:0 0.3em; padding: 0.5em 0.5em 0 0.5em; float: left;
background-position: 10px;
background: -moz-linear-gradient(top,  rgba(52,82,104,1) 0%, rgba(52,82,104,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,82,104,1)), color-stop(100%,rgba(52,82,104,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#345268', endColorstr='#00345268',GradientType=0 ); /* IE6-9 */
}


/*  dental services
********************************************************************************************
********************************************************************************************/


ol {width: 450px; line-height: 1.6; padding: 0.5em 0 0 0.7em;
background: -moz-linear-gradient(top,  rgba(52,82,104,1) 0%, rgba(52,82,104,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,82,104,1)), color-stop(100%,rgba(52,82,104,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#345268', endColorstr='#00345268',GradientType=0 ); /* IE6-9 */
}


/*  contact us
********************************************************************************************
********************************************************************************************/
#map-frame {
			width:402px; height:253px; background: url(../img/map-frame.png); display: inline-block; 
			 }

#map-frame iframe {padding: 0.75em 0.8em;}

#address-info {

		margin: 1em 0;
		line-height: 1.2em;

}

.form-container {
	height:380px;

}

#form2{
	margin:1em 0;
	max-width: 418px; /* customize width, this form have fluid layout */
	}
	
#form2 fieldset{padding-bottom:1em;}		
#form2 legend{display:none;}	
#form2 p{margin: 0 0 .5em 0;}	
#form2 label{display:block;}	
#form2 input{		
	width:259px;
	background: url(../img/form-feild-frame.png) no-repeat;
	border:0px;
	padding: 13px;
	}
	
#form2 textarea{
	background: url(../img/form-message-frame.png) no-repeat;
	width: 400px;
	max-height:160px;
	overflow:auto;
	resize: vertical;
	padding: 13px;
	}
				
#form2 p.submit{
	text-align:center;
	}
	
#form2 button{
	padding:0 20px;
	width: 418px;
	height:40px;
	line-height:32px;		
	border-bottom: 1px solid #5f94b9;
	border-top: 1px solid #5587aa;
	border-left: 0;
	border-right: 0;
	background: -moz-linear-gradient(top,  rgba(52,82,104,1) 0%, rgba(52,82,104,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,82,104,1)), color-stop(100%,rgba(52,82,104,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(52,82,104,1) 0%,rgba(52,82,104,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#345268', endColorstr='#00345268',GradientType=0 ); /* IE6-9 */
	color:#fff;
	cursor:pointer;		
	text-align:center;		
	}


/*******************  contact-form  *****************

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Helvetica, sans-serif;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

*/

/*  footer
********************************************************************************************
********************************************************************************************/