/*
Theme Name: Tracyton Dental Center
Theme URI: http://tracytondental.com
Author: SpiderLily Web Design
Author URI: http://spiderlilyweb.com
Version: 1.0
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none;}
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
/* tables still need cellspacing="0" in the markup */
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

/*
 *
 * Base Styles 
 *
 */
body, select, input, textarea { 
  	color: black;
	font-family:'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4; 
	color:black;
	}
html { height: 100%; }
body {background: transparent; }
/* Headings */
h1,h2,h3,h4,h5,h6 {line-height:1.2em;}
h1,h2,h3 {font-weight:700; }
h1 {font-size:36px; margin-bottom:0.4em; clear:both; display:block; border-bottom:1px #1A3F71 solid;}
body.home h1 {border-bottom:none;}
h1.page-title {font-size:28px; border-bottom:none;}
h2 {font-size:28px; clear:both; margin-bottom:0.3em;}
h3 {font-size:20px; clear:both;}
h4 {font-size:18px; clear:both; margin-bottom:0.2em; font-weight:700;}
/* always force a scrollbar in non-IE */ 
html { overflow-y: scroll; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
ul, ol {  }
ul {list-style-type:none;}
ol { list-style-type: decimal; list-style-position:inside; margin-left:20px; text-indent: -1em; padding-left: 1em; margin-bottom:1em;}
ol li {padding-bottom:3px;}
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }
/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background:#000099; color:white; text-shadow: none; }
::selection { background:#000099; color:white; text-shadow: none; } 
/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #000099; } 
/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {width: auto; overflow: visible;}
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img {-ms-interpolation-mode: bicubic;}


/*
 *
 * Nonsemantic Base Styles 
 *
 */
/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; } 
/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
/*
 *
 * Structure
 *
 */
#wrapper {
	max-width: 1600px; 
	margin: 0 auto; 
	position:relative;
	}

#primary {
	clear:both;
	position:relative;
	float:left;
	width:98%;
	margin:0 1%;
	}

.content {
	width:98%; 
	margin:10px 1%;
	float:left;
	}

#colophon {
	clear: both;
	display: block;
	width: 100%;
	padding-top:1em;
	padding-bottom:1em;
	position:relative;
	}

.col1-2 { /* content on page with sidebar */
	width:69%;
	float:left;
	margin-left:1%;
	}
.col2-3 { /* content on page with sidebar */
	width:69%;
	float:right;
	}	
.col2-3 .text, .col1-2 .text {
	max-width:710px;
	margin:0 auto;
	}
	
.col3-3, .blog3-3 { /* sidebar */
	width:30%;
	float:right;
	background:#D6D8D8;
	}
.col1-3 { /* left sidebar */
	width:27%;
	float:left;
	}		
.callout {
	border-bottom:1px #1A3F71 solid;
	font-weight:700;
	color:#1A3F71;
	padding:16px 0;
	width:96%;
	float:left;
	margin:8px 2%;
	}

.topwidget p  {
	font-size:22px;
	text-align:center;
	line-height:1.6em;
	}
		
.award {
	background:url('images/gold-star-small.png') center center no-repeat;
	padding:42px 32px;
	font-size:18px;
	font-weight:700;
	font-style:italic;
	text-align:center;
	color:#1A3F71;
	line-height:1.6em;
	}	
.attn {
	font-size:18px;
	line-height:1.6em;
	font-weight:700;
	text-align:center;
	color:#1A3F71;
	font-style:italic;
	margin:16px 0;
	padding:16px 0;
	border-top:1px #1A3F71 solid;
	border-bottom:1px #1A3F71 solid;
	}	
.grid {
	float:left; 
	width:100%;
	display: -webkit-box;
    display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display:flex;
	flex-direction:row;
	}
.grid > div {flex:none;}		
/* sidebar */
.textwidget {
	float:left;
	width:90%;
	margin-left:5%;
	padding-bottom:10px;
	margin-bottom:10px;
}	
.textwidget h3 {padding-bottom:5px;}	
.textwidget.logos img {
	max-width:30%;
	margin:0 1%;
}
.widget {
	width:96%;
	float:left;
	margin:8px 2%;
}
h2.title {
	display:block;
	width:96%;
	margin-top:8px;
	color:#1A3F71;
	text-align:center;
	border-top:1px #1A3F71 solid;
	border-bottom:1px #1A3F71 solid;
}	
input[type="text"] {width:80%; max-width:320px;}
a img:hover, input[type="image"]:hover {opacity:0.8;}	
/* home page sidebar links */

p.patient-links {
	margin-left:32px;
	padding-left:50px;
	vertical-align:middle;
	font-weight:700;
	font-size:18px;
}
.forms {background:url('images/patient-forms-small.png') center left no-repeat; line-height:65px;}
.insurance {background:url('images/insurance-small.png') center left no-repeat; line-height:65px;}
.blog-link {background:url('images/our-blog-small.png') center left no-repeat; line-height:55px;}
.map {background:url('images/map-small.png') center left no-repeat; line-height:55px;}

a p.patient-links:hover {
	opacity:0.8; 
	transition: ease;
	transition-duration: 0.2s;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*
 *
 * Header
 *
 */

#banner {float:left; position:relative; width:100%;}
.logo img {float:left; max-width:380px; margin-top:10px;}	
.contact-info {
	float:right;
	font-size:17px;
	font-weight:700;
	color:#1A3F71;
	text-align:right;
	margin-right:1%;
}
.contact-info span {font-size:21px;}

/* Links */
a, a:active, a:visited {
	color: #2D6EB5; /* blue */
}
a:hover { 
	border-bottom:1px #2D6EB5 dotted; /* dotted blue underline */
}  

/*
 *
 * Menu
 *
 */

#access {
	clear: both;
	display: block;
	float: left;
	width: 100%;
	margin:5px 0;
}
#access ul {
	padding: 0;
	text-align:center;
	width:100%;
	float:left;	
}
#access ul li {
	list-style: none;
 	display: inline-block;
	float:left;
	width:13%;
	padding:5px 0;
}
#access ul li.short {width:10%;}
#access ul li.long {width:14.65%;}
#access a {
	font-weight:bold; 
	font-size: 16px; 
	text-align:center;
	color: #1A3F71;
	text-transform:uppercase;
	}

#access li:hover  {
	background:#D6D8D8;
	transition: ease;
	transition-duration: 0.2s;
	}
#access li a:hover {border-bottom:none;}
#access .current_page_item a, #access li.current_page_item a:hover {color:#2D6EB5;}

nav#access a#pull, a.back, .contact-map-mobile  {display:none;}


/* text elements */

p {
	margin-bottom: 8px;
}
p.read-more {text-align:right;}
.col2-3 ul, .col1-2 ul, .textwidget ul {
	margin: 20px 0 20px 20px;
	list-style-position:inside;
	list-style:disc;
}
.col2-3 ul li, .col1-2 ul li {padding-bottom:6px;}
ul.contact {
	font-weight:bold;
	margin-bottom:10px;
	}

/* emergencies list formatting */

dl {margin-top:16px;}
dt span, dd span {
	font-weight:700;
	display:block;
	width:100%;
	color:#1A3F71;	
	font-size:18px;
}
dt span {
	border-top:1px #1A3F71 solid;
	border-bottom:1px #1A3F71 solid;
	background-color:#D6D8D8;
	padding:3px 0 3px 8px;
	margin:8px 0 6px;
}
dd {margin-left:20px;}	
dd span {margin-bottom:6px;}
.col1-2 dd ul {margin:0 0 0 40px;}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #5BC9E1;
  margin: 1.5em 10px;
  padding: 0.5em 10px 2em;
  quotes: "\201C""\201D""\2018""\2019";
  font-weight:bold;
  font-style:italic;
}
blockquote:before {
  color: #5BC9E1;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
blockquote span {
	clear:both;
	width:100%;
	text-align:right;
	float:right;
}
/*
 *
 * Images
 *
 */
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption img,
img.attachment-custom-size {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin: 0.5em 1em 1em 0;
}
img.alignright {
	margin-left: 3em;
	margin-bottom:1em;
}
img.aligncenter {margin-bottom:1em;}

img.attachment-thumbnail {float:left; margin-right:1em;}

.wp-caption {
	padding: 0;
	max-width:100%;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	font-style:italic;
	font-size:14px;
}
.widget_sp_image {margin-bottom:10px;} /* add space under image widget */

.widget_sp_image-description p {
	margin:1em 0;
	font-size:14px;
	line-height:1.3em;
}
/* contact map */

.contact-map {
	float:right;
	width:100%;
}

/* mailchimp overrides */
#mc_embed_signup{clear:left !important; font:14px Helvetica,Arial,sans-serif !important; color:#1A3F71 !important;}
#mc_embed_signup form {padding:0 0 10px 3% !important;}

/*
 *
 * Footer
 *
 */
#colophon {
	float:left;
	border-top:1px #1A3F71 solid;
	margin-top:10px;
	padding:10px 0;
	} 
#colophon p {font-size:80%; margin:0; line-height:1.4em;}	 
#colophon a {color:#000;}
#colophon a:hover {color: #1A3F71; border:none;}	
.site-info {
	width:98%;
	margin-left:1%;
	} 
span.nowrap {white-space:nowrap;}
/* contact form styling */	
p.indicate {
	font-style:italic;
	padding:0 0 0.5em 0;
	}
.required {
	color: #cc0033;
}
.wpcf7 p {
	padding-bottom:5px;
	font-size:14px;
	clear:both;
	}
.wpcf7 p span.block {
	display: inline-block;
	width:120px;
	}	
input[type="text"], input[type="email"], input[type="tel"] {
	padding:6px 1px;
	background-color: white;
	border: 1px inset;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}
textarea {
	border: 1px inset;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}	
p.captcha {
	line-height:20px;
	vertical-align:top;
	}
p.captcha span.required {
	line-height:20px;
	vertical-align:top;
	}			
.form div.wpcf7-response-output {
	margin: 0 0.5em 1em;
	padding: 0.2em 1em;
}	
.wpcf7 form input[type="image"] {margin-bottom:1em;}
.wpcf7 form input[type="image"]:hover {opacity:0.8;}
.wpcf7 form span.wpcf7-list-item {white-space:nowrap; clear:both; float:left; padding-top:3px;}
.wpcf7 form {padding-bottom:20px;}

.drop {padding-top:10px;}

	
/*
 *
 * Media queries for responsive design
 *
 */
@media screen and (max-width: 1230px) {
	.col2-3 .text {float:none; margin:0 auto;}
	.col1-2 img {max-width:98%;}
	.callout {width:98%; margin:8px 1%; padding:8px 0;}
	.topwidget p {font-size:18px;}
}

@media screen and (max-width: 975px) {
	html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
	.grid {flex-direction:column;}
	.col3-3 {display:none;}
	.col1-2, .col1-3, .col2-2, .col3-2, .col2-3, .blog3-3 {
		float:left;
		clear:both;
		width:100%;
		max-width:100%;
		margin:0;
		padding:0;
	}
	nav#access {
  	  	top:0;
		left:0;
		width:100%;
		padding:0;
		background-color:#1A3F71;
		background: rgba(185,200,212,0.8);
		}
	a#pull {
		height:30px;
		line-height:30px;
		vertical-align:middle;
		}
	ul#menu-primary {
		width:100%;
		background-color:#1A3F71;
		}		
 	nav#access ul {
		display: none;
		height: auto;
		width:100%;
		margin:0; padding:0.5em 0;
		}
  	nav#access li, #access ul li.short, #access ul li.long {
  		width:100%;
		margin:0;
		padding:6px 0;
		border:none;	
		text-align:left;
  		}
	nav#access li a {padding-left:12px; color:white;}
	nav#access li a:hover {color:#1A3F71;}
  	nav#access a#pull {
		display: block;
		background-color: #1A3F71;
		width: 100%;
		position: relative;
		float:left;
		padding:0.1em 0;
		font-weight:bold;
		}
]	nav#access li a {text-align:left; white-space:nowrap;}	
	nav#access a#pull img {padding-top:0.2em; float:left; padding-left:0.5em;}	
	span.pull-menu {
		color:#fff;
		padding-left:0.5em;
		float:left;
		}
	span.pull-menu:hover {color:#D8D8D8;}	
	span.pull-menu:after {content:" \25BC";}	
	span.pull-menu.clicked {color:#D8D8D8;}	
	span.pull-menu.clicked:after {content:" \25B2";}	
  	nav#access a#pull:hover {
	 	opacity:0.6;
	}
	div.menu-footer-container {display:none;}
	h1 {font-size:36px;}
	#colophon a.back {
   		display:block; 
		clear:both;
		width:40%; 
		text-align:center;
		margin:0 auto 5px;
   		background: #1A3F71;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-align:center;
		font-size:1em;
		font-weight:bold;
		color:white;
		max-width:200px;
		padding:6px;
		}
	#colophon a.back:hover {opacity:0.8;}	
	.contact-map, .hide {display:none;}
	.contact-map-mobile {display:block;}
}

@media screen and (max-width: 870px) {
	.logo {
		max-width:100%;
		width:100%;
		float:none;
		display: block;
		margin: 0 auto 16px;
	}
	.logo img {margin:0 auto; float:none; max-width:380px;}
	.contact-info {
		clear:both;
		float:left;
		width:100%;
		text-align:center;
	}
	.contact-info p {margin-bottom:0;}
	dt span {padding:3px 0;}
	dd {margin-left:3px;}
}
@media screen and (max-width: 510px) {
	.text {max-width:96%;}
	.col1-2 .text {max-width:96%;}
	p.patient-links {margin-left:0; font-size:16px;}
}	
@media screen and (max-width: 460px) {
	.forms {background:none;}
	p.patient-links {padding:0;  line-height:1.4em;}
}
/*
 *
 * Base Print Styles, inline to save the HTTP request
 *
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}