/* 
CSS file for www.psychologydoeswork.com
Author: James K Lee
Last Update: August 17th, 2012;
 */

body {
	margin: 0;
	padding: 0;
	background: #88DBFF url(../images/background_gradient.png) repeat-y center;
}
/*group class fixes the float problem for the content in section tag*/
.group:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* IE6 compatability*/
* html .group {
	zoom: 1;
} 
/* IE7 compatability*/
*:first-child+html .group {
	zoom: 1;
/*header*/
} 
header {
	background: url(../images/header_gradient.jpg) repeat-x;
	background-color: #FFF0D3;
	-webkit-box-shadow: 0px 5px 5px 2px rgba(11, 71, 91, .4);
	box-shadow: 0px 5px 5px 2px rgba(11, 71, 91, .4);
	height: 90px;
	margin-top:3px;
}
header h3 {
	float:right;
	text-align:right;	
}
/*defines the font to be used in the website*/
h1, h2, h3, h4, .right_header, #serv_range, section p, .navlink, #service_areas li, .backtop, #faq_list, .links a, #contact_list   {
	font-family: "myriad pro", helvetica, arial, sans-serif;
}
h1 {
	margin: 0;
	margin-top:15px;
	float:left;
}
/*phone number at in the header*/
.right_header {
	float:right;
	margin-top:15px;
}
.right_header h3 {
	padding:0;
	margin:0;
	font-size:1.1em;
	color:#009ACF;
	font-weight:normal;
}
.right_header span {
	color: #009ACF;
	font-size:1.75em;
	font-weight:normal;
	line-height:40px;
}
/*This eliminates the borders around image links in Internet Explorer*/
a, img {
	border:none;
}
/*Changes the bullets*/
ul li {
	list-style:url(../images/arrowbullet.gif);	
}
/*slide show*/
#slideshow {
	height: 200px;
	z-index: -1;
	position: relative;
	margin-bottom: -30px;
	width: 500px;
	margin: auto;
}
/*please handle with care, otherwise position of slideshow images may appear odd*/
#slideshow div {
	position: absolute;
	left: 45px;
}
h2 {
	color: #009ACF;
	font-weight: normal;
	font-size: 1.75em;
	margin-top: 20px;
	margin-bottom: 10px;
}
section h3 {
	margin: 0;
	font-weight: normal;
	color: rgb(242,131,68);
	text-align: left;
}
h4 {
	margin-top: 30px;
	font-weight: normal;
	color: rgb(242,131,68);
}
section p {
	font-size: 0.9em;
	line-height: 1.35em;
}
/*this is for the services page*/
#serv_range {
	min-width: 200px;
}
#serv_range ul {
	margin-left:20px;
	padding:0;
}
#serv_range li {
	font-size: 0.9em;
	line-height: 1.5em;
}
/*navigation circle bar*/
nav {
	position: relative;
	width: 600px;
	margin: auto;
	z-index: 8888;
	top:10px;
}
#nav_menu ul {
	list-style: none;
	margin: auto;
	padding: 0;
	text-align: center;
	cursor: default;
}
#nav_menu li {
	display: inline-block;
}
.navlink {
	display: block;
	height: 80px;
	width: 80px;
	margin: 0 8px -60px 8px;
	text-decoration: none;
	padding-top: 27px;
	color:#FFFFFF;
	z-index: 9999;
	font-size:1em;
}
#navcircle_1 { 
background: url(../images/navcircle_lgtblue.png) top center no-repeat;
}
#navcircle_2 { 
background: url(../images/navcircle_lgtblue2.png) top center no-repeat;
}
#navcircle_3 { 
background: url(../images/navcircle_lgtblue3.png) top center no-repeat;
}
#navcircle_4 { 
background: url(../images/navcircle_lgtblue4.png) top center no-repeat;
}
#navcircle_5 { 
background: url(../images/navcircle_lgtblue5.png) top center no-repeat;
}
#navcircle_6 { 
background: url(../images/navcircle_lgtblue6.png) top center no-repeat;
}
#nav_menu a:hover {
	text-decoration:underline;
}
.navactive:active {
	text-decoration:underline;
}
/*this is where the content in the each page will be in*/
section {
	padding: 40px 0 40px 0;
	background: #FFF4C8;
	-webkit-: box-shadow: 0px 0px 8px 2px rgba(11, 71, 91, .4);
	box-shadow: 0px 0px 8px 5px rgba(11, 71, 91, .4);
	border-top: 10px solid rgba(255, 244, 200, .10);
}
/*global wrapper that defines the width for all content*/
.wrapper {
	width: 85%;
	max-width: 1200px;
	margin: auto;
}
/*small columns*/
.column {
	width: 28%;
	max-width: 400px;
	min-width: 270px;
	margin: 0 60px 0 0;
	display: inline-block;
	float: left;
}
/*for wider columns used in about, links, FAQ, and contact page*/
.column_wide {
	width: 60%;
	max-width: 800px;
	min-width: 450px;
	margin: 0 30px 0 0px;
	display: inline-block;
	float: left;
}
/*homepage small portrait*/
#portrait_small {
	float: left;
	display: block;
	margin: 15px 15px 5px 0;
}
#portrait_small IMG, #portrait_large IMG {
	border-radius:10px;
}
/*portrait for the about page*/
#portrait_large {
	width: 22%;
	display: inline-block;
	margin-left: 10%;
}
#portrait_large IMG {
	max-width: 100%;
	max-height:100%;
}
/*List of services used in homepage and service page*/
#service_areas {
	width: 25%;
	max-width: 230px;
	min-width: 125px;
	margin-left: 30px;
	float: left;
}
#service_areas h3 {
	border-bottom: 1px solid #FF0000;
}
#service_areas ul {
	display: block;
	margin:15px 20px;
	padding:0;
}
#service_areas li {
	font-size: 0.9em;
	line-height: 1.5em;
}
/*This is for the FAQ section*/
.question_container {
	clear:both;
	margin: 30px 0 30px 0;	
}
/*this formats the confidentiality text in the FAQ questions*/
#conf_list {
	display: block;
	width: 60%;
	max-width: 400px;
	margin: 20px auto 20px auto;
	padding-left: 20%;
	padding-right: 20%;
	text-align: left;
}
#conf_list li {
	margin-top: 10px;
	font: 0.88em helvetica, arial, sans-serif;
}
/*FAQ page "back to top" button*/
.backtop {
	text-decoration: none;
	padding: 5px;
	color:#4FA3B3;
	font-size:0.75em;
	background-color:#FFDF85;
	margin: 25px 0 30px 0;
	display:inline-block; 
	float:right;
	clear:left;
}
.backtop:hover{
	color:#FFF;	
}
/*FAQ question links*/
#faq_list {
	color:#33B1D7;
	padding:0;
	margin-left:15px;	
}
#faq_list a {
	text-decoration:none;	
	font-size:1.05em;
	color:#009ACF;
	line-height:25px;
}
#faq_list a:hover {
	text-decoration:underline;	
	color:#0076A0;
}
/*style the links in the links page*/
.links {
	margin:15px 0 25px 0;
}
.links a {
	text-decoration:none;	
	font-size:1.05em;
	color:#009ACF;
	line-height:25px;
	display:inline-block;
}
.links a:hover {
	text-decoration:underline;	
	color:#0076A0;
}
/*formats the contact information in the contact page*/
#contact_list {
	padding:0;
	font-size:.95em;
	height:75px;
	width:490px;
}
#contact_list li {
	width:80%;
	list-style:none;
	display:inline;
	float:left;
}
#contact_list .cont_info {
	width:20%;
	float:left;
}

#contact_list a {
	color:#009ACF;
	text-decoration:none;	
	font-family: Gill Sans, helvetica, arial, sans-serif;
}
#contact_list a:hover {
	text-decoration:underline;	
	color:#0076A0;
}
/*changes the font link on googlemaps in contact page*/
#viewmap {
	text-decoration:none;	
	font-family: Gill Sans, helvetica, arial, sans-serif;
	font-size:1.05em;
	color:#009ACF;
	text-align:center;
}
/*Footer*/
footer {
	clear: both;
	margin-top: 20px;
	text-align: center;
	font-size: .9em;
	color: #0076A0;
}
footer p {
	font-size: .9em;
	margin: 2px;
	line-height:18px;
	padding: 0;
	font-family: Gill Sans, helvetica, arial, sans-serif;
}
.footer_content {	
	margin:auto;
	width:475px;
}
.footer_content hr {	
	color:#009ACF;
	margin:3px 0 0 0;
	border:none;
	border-top:1px dotted;
}
.sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.sitemap li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.sitemap li a {
	text-decoration: none;
	color: #0076A0;
	font-size: 1em;
	font-family: Gill Sans, helvetica, arial, sans-serif;
}
.sitemap li a:hover {
	color:#4EA3B2;
}


@media (max-width: 1024px) {
	.wrapper {
	width:95%;
	}
	.column {
	margin: 0 25px 0 0px;
	width:30%;
	max-width:500px;
	}
}

@media (max-width: 768px) {
	.wrapper {
	width:95%;
	}
	.column {
	width:90%;
	max-width:600px;
	margin: 0px;
	}
}