/*
Theme Name: Hairfax Atlantic
Theme URI: www.hairfax.ca
Description: 2008 Design for Hairfax Atlantic
Author: Point Click Media Productions
Author URI: http://www.pointclickmediaproductions.ca
Version: 1 build 10
*/

/* -- This filters out different older broswsrs and pda so only the markup is shown then. */
@media screen, projection {
	.be-nice-to-Mac-IE5 {
		font-family: "\"}\"";
		font-family: inherit;
	}
	
	/* -- GENERAL REDECLARATIONS ---------------------------------------- */
	* 					{margin:0; padding:0;}
	body 				{font-size: 62.5%; text-align:center; color:#000000;} 
	body, tr, 
	td, input, 
	select, textarea 	{font-family: Verdana, Arial, Helvetica, sans-serif;}
	/* a:link,a:visited 	{text-decoration:underline;} */
	a:hover 			{text-decoration:none;}
	ul, ol	 			{margin:0 0 0px 0px;}
	dl 					{margin:0 0 10px;}
	dt 					{font-weight:bold;}
	dd					{margin:0 0 3px 10px;}
	p 					{margin:0 0 15px;}
	h1 					{font-size:large; margin:0px;}
	h2 					{font-size:medium; margin:0;}
	h3 					{font-size:small; margin:0;}
	h4 					{font-size:x-small; margin:0;}
	h5					{font-size:xx-small; margin:0;}
	h6 					{font-size:xx-small; margin:0;}
	hr 					{display:none;}
	img 				{border:none;}
	acronym				{border-bottom: 1px dotted;}
	blockquote 			{margin:0 25px 20px 25px; font-style:italic;}
	
}

/*------- Basic Layout & Backgrounds ------------*/
	body { /* Sets the Dark Brown Header and first layer of grey gradient as well as the bacground color */
		background:url(images/head_bkgrnd.gif) repeat-x #f8f7f7; 
	}
	#headwrap { /* Sets the width of the header centers it on the page and aligns the content to the left so the Logo sits correctly */
		width:956px;
		height:117px;
		margin: 0 auto;
		text-align:left;
		position:relative; /*give the menwrap something to position to with it's absolute positioning */
		/*border: 1px solid #00FF66; */
	}

	/* ===== Main Menu ===== */
	#headwrap #headmenwrap { /* Wrapper for the top menu: Negative Margin to so that the contact menu sits closer to the edge without effecting the rest */
		/* float:right;
		margin-top:-90px; */
		bottom:12px;
		left:420px;
		position:absolute;
		/* border: #00FF99 solid 1px; */				
	}

	#mainmen li { /* main menu - Formating of list elements and placement of backgrounds */
		list-style:none;
		background: url(images/head_men_background.gif) left top no-repeat; ;
		float:left;
		margin:0pt 0px 0px 0px;
		padding:0px 0pt 0pt 5px;
		width:105px;
		height:99px;
	}
	#mainmen li#home { /* Main Menu - Home - Custom width & no background */
		background: none;
		width:79px;
	}
	#mainmen li#aboutus { /* Main Menu - About Us - Custom width */
		width:90px;
	}
	#mainmen li#lossinfo { /* Main Menu - Hair Loss Info - Custom width */
		width:115px;
	}
	#mainmen li#services { /* Main Menu - Services - Custom width */
		width:127px;
	}
	#mainmen li#contact { /* Main Menu - Contact Us - Custom width */
		width:80px;
	}
	#mainmen li a{ /* Main Menu - Formatting of top level links*/
		font: bold 1.4em Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		color:#e3dfda;
		text-decoration:none;
		/* border: #00FF99 solid 1px; */		
	}
	#mainmen li a:hover { /* Main Menu - Formatting of top level links*/	
		color:#bccbdd;
	}
	#mainmen li span { /*Sub Menu - Setting of spacing */
		display:block;
		margin:3px 0px 0px 0px;
	}
	#mainmen li span a{ /* Sub Menu - Formatting of sub level links */
		font: normal 1.1em Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		color:#cccccc;
		line-height: 1.2em;
	}	
	#mainmen li span a:hover { 	
		color:#bccbdd;
		text-decoration:underline;
	}


	#langmen { /* Language switch Menu - Formatting */
		color:#c2c2c2;
		position:relative;
		margin:4px 0px 0px 10px;
		font: normal 1.2em Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		/* border: #00FF99 solid 1px; */		
	}
	#langmen li { /* Language switch Menu - Formatting */
		display:inline;
		/* border: #00FF99 solid 1px; */		
	}
	#langmen a{ /* Language switch Menu - Formatting */
		color:#c2c2c2;
		text-decoration:none;
		/* border: #00FF99 solid 1px; */		
	}
	#langmen a:hover {	
		color:#bccbdd;
		text-decoration:underline;
	}		
	
	/* ===================== */
	
	/* ===== Main Body ===== */
	#contentwrapper{ /* Setting the Content Wrapper so it sits below the header in the middle of the page and has a set width */
		width: 956px;
		margin: 0 auto;
		padding-top: 0px;
	}
	#bodwrap { /* Places the Gradient stips down the two sides. */
		background: url(images/cont_bkg1.gif) repeat-y;
	}
	#breadcrumb { /* Breadcrumb - Formatting of the area including background to cover stark white bod wrap gradient */
		background:url(images/bod_bread_bkg1.gif) repeat-y;
		width: 955px;
		height: 23px;
		text-align: left;
		padding: 0px 0px 0px 10px;
		/* border: #00FF99 solid 1px; */		 
	}
	#breadcrumbother {/* Breadcrumb formatting for pages other then the main sections */
		width: 955px;
		height: 23px;
		text-align: left;
		padding: 0px 0px 0px 10px;
	}
	#breadcrumb #breadlinks, #breadcrumbother #breadlinks { /* Breadcrumb - Makes sure the breadcrumb links sit in the right places */
		display:block;
		padding:3px 0px 0px 0px;
		font: normal 1.2em Century Gothic, Verdana, Arial, Helvetica, sans-serif;		
	}
	#breadcrumb a, #breadcrumbother a{ /* Breadcrumb - Formatting of the text Links */
		color: #333333;
		text-decoration:none;
		/* border: #00FF99 solid 1px; */		
	}
	#breadcrumb a:hover, #breadcrumbother a:hover {	
		color: #000000;
		text-decoration:underline;
	}
	/* ================================ */
	
	/* ===== Page Sub Header Area ===== */
	#titleblock{ /* Background & formatting for title blocks for normal sections */
		/* background: url(images/head_surgical.jpg) no-repeat;    hidden only to hardcode in wordpress */
		width: 955px;
		height: 311px;
		text-align:left;
		position:relative; /* Set because this is the containing block for beforeafter and this allows it's absolute poitioning to have an anchor in all browsers*/		
		/* border: #00FF99 solid 1px; */		
	}
	#titleblock h1, .homeh1 h1{ /* Will have h1's for SEO & possibly printing purposes but will hide them on the web pages. */
		position: absolute;
		left: -999em;	
		/* border: #00FF99 solid 1px; */			
	}
	
	
	#factswrap { /* Container to hold the Just for facts & Pullquote conetent */
		width:700px;
		padding: 155px 0px 0px 23px;
		/* border: #00FF99 solid 1px; */			
	}
	#factstext { /* Positioning & formatting of facts text using position and float to creat left column with pull quotes */
		position:inherit;
		float:left;
		width:331px;
		text-align:left;
		font: bold 1.3em Arial Narrow, Arial, Helvetica, sans-serif;
		color:#e9e9e9;
		/* border: #FF0000 solid 1px; */		
	}
	#factstext h2{ /* format of Sub headers in Sub header sections - Seperate images used in IE6*/
		background: url(images/h2_tag-bkg.png) no-repeat left bottom;
		font: bold 1.8em Arial Narrow, Arial, Helvetica, sans-serif;
		text-decoration: none;
		color: #f7f9f5;
		margin: 0px 0px 10px 0px;
		/* border: #00FF99 solid 1px; */		
	}
	#factstext ul { /* Removes all styling from lists in the sub header so I can set my own styles */
		margin:0px 0px 0px 0px;
		list-style:none;
		/* border: #00FF99 solid 1px; */		
	}
	#factstext li{ /* My own syles for list itmes in the sub header */
		background:url(images/bullet.gif) no-repeat left top;
		padding:0px 0px 0px 5px;
		/* border: #00FF99 solid 1px; */		
	}
	
	#pullquote { /* Formatting for the Pull Quote area */
		width:310px;
		text-align:left;
		margin:0px 0px 0px 349px;
		font: 2.6em Georgia, "Times New Roman", Times, serif;
		color:#e4e2e0;
		/* border: #0000FF solid 1px; */		
	}
	.beforeafter{ /* Before and After image positioning*/
		position:absolute;
		top:123px;
		left:696px; 
	}
	/* ================================ */

	/* ===== Main Content Area ===== */
	#maincontent { /* Setting of the content Gradient as well as allowing margin to let the side gradients from Bod wrap to show up. */
		background: url(images/bod_bkgrnd2.gif) repeat-x;
		float:left;	
		width:942px;	
		/* border: #00FF99 solid 1px; */		
	}
	#maincontent, #maincontentother {/* keeping the same margin for both */ 
		margin:0px 8px 0px 6px;
	}
	#column1{ /* Left Column for main content */
		float:left;
		width: 700px;
		text-align:left;
		padding: 10px 0px 0px 18px;
		/* border: #00FF99 solid 1px; */		
	}
	#column1 h1 { /* using h2 background but will also need to change for IE6 to use gif */
		background: url(images/h2_tag-bkg.png) no-repeat left bottom;
		font: bold 2.0em Arial Narrow, Arial, Helvetica, sans-serif;
		text-decoration: none;
		margin: 0px 0px 10px 0px;		
	}
	#column1 h2{ /* Similar formating for sub headers as h2's in sub header but altered in coloring - also uses seperate background in IE6 */
		background: url(images/h2_tag-bkg.png) no-repeat left bottom;
		font: bold 1.8em Arial Narrow, Arial, Helvetica, sans-serif;
		text-decoration: none;
		margin: 0px 0px 10px 0px;	
		/* border: #00FF99 solid 1px; */		
	}
	#column1 h1 a, #column1 h2 a{
		text-decoration:none;
		color: #333333;
	}
	#column1 h1 a:hover, #column1 h2 a:hover{
		background:none; /* to counteract the background highlight effect used on regular anchor tags */
		color:#603913;
	}
	#column1 p, #column1 ul, #column1 ol{ /* Genral formatting of the main body text  */
		padding-right:15px;
		font: normal 1.2em Arial, Helvetica, sans-serif;
		color:#464646;	
		/* border: #00FF99 solid 1px; */		
	}
	#column1 ul, #column1 ol {
		padding-left:15px;
		padding-bottom:15px;
	}
	#column1 a{
		color:#603913;
	}
	#column1 a:hover{
		background:#603913;
		color:#FFFFFF;
		text-decoration:none;
	}
	#column1 img, 	#column1 .imgright{ /* Any image not specified will default to the right */
		/*float:right;
		margin:0px 0px 0px 15px; */
		/* border: #00FF99 solid 1px; */		
	}
	.alignright  {
		float:right;
	}
	.alignleft  {
		float:left;
	}
	#column1 .imgleft { /* any img classed to sit at the left of the page */
		float:left;
		margin:0px 15px 0px 0px;
	}
	#column1 .linkbutton { /* style for button images... used so the button doesn't float right */
		float:none;
		margin:0px;
	}
	#column1 .larryconsult { /* style for Larry's consult button */
		display:block;
		margin-bottom: 10px;
	}
	#column1 .larryconsult:hover {
		background:none;
		color:none;
	}
	#column2 { /* Right Column formatting for Call to Action Items. */
		padding-top: 85px;
		float:right;
		width:212px;
		text-align:left;
		/* border: #00FF99 solid 1px; */
	}
	#column2 h2 {
		font-size:1.3em;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-weight:bold;
	}
	#column2 ul {
		padding: 0px 10px 0px 10px;
		list-style:none;
	}
	#column2 li ul {
		padding: 0px 0px 15px 0px;
	}
	#column2 a{
		color: #603913;
		font-weight:bold;
	}
	#column2 #rightmenu {
		margin:10px 0px 20px 0px;
	}
	
	/* ================================== */

	/* ===== Featured Items Section ===== */
	#featureitemswrap { /* Featured Items - Makes sure this stays under the two columns above and adds backgroudns. */
		clear:both;
		height:146px;
		background:url(images/foot_features_bkg.gif) no-repeat left bottom;
		text-align:left;
		/* border: #00FF99 solid 1px; */		
	}
	.firstcolor{ /* First Color in 2 color sub headers */
		color:#f3f3f3;
		font: bold 15px Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		/* border: #00FF99 solid 1px; */		
	}
	.secondcolor{ /* Second Color in 2 color sub headers */
		color:#84837f;
		font: bold 15px Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		/* border: #00FF99 solid 1px; */		
	}
	#featureitemswrap .testimoniallayout{
		float:left;
		width: 350px;
		height:121px;		
		margin: 0px 0px 0px 18px;
		padding: 12px 0px 0px 0px;
		font: normal 1.1em  Verdana, Arial, Helvetica, sans-serif;
		color:#d4cbbb;
		/* border: #00FF99 solid 1px; */
	}
	#featureitemswrap #featuretestimonial1 { /* Background for Testimonial #1 - Joseph Jones */
		background:url(images/testimonial1.png) no-repeat bottom right;
	}
	#featureitemswrap #featuretestimonial2 { /* Background for Testimonial #2 - David Baxendale */
		background:url(images/testimonial2.png) no-repeat bottom right;
	}
	#featureitemswrap #featuretestimonial3 { /* Background for Testimonial #3 - Ruth LeBlanc */
		background:url(images/testimonial3.png) no-repeat bottom right;
	}
	#featureitemswrap #featuretestimonial4 { /* Background for Testimonial #4 - Martin Collins*/
		background:url(images/testimonial4.png) no-repeat bottom right;
	}
	#featureitemswrap #featuretestimonial1f { /* Background for Testimonial french1 - Nancy Dugas */
		background:url(images/testimonial1f.png) no-repeat bottom right;
	}
	#featureitemswrap #featuretestimonial2f { /* Background for Testimonial french2 - Jean-Pierre Lacroix */
		background:url(images/testimonial2f.png) no-repeat bottom right;
	}
	


	#featuretestimonial1 p, #featuretestimonial2 p, #featuretestimonial3 p, #featuretestimonial4 p, #featuretestimonial1f p, #featuretestimonial2f p {	 /* Positioning of text in section */
		margin: 6px 0px 2px 0px;
	}
	#featureitemswrap #latestnews { /* Formatting of News area */
		width:560px;
		margin: 0px 0px 0px 383px;
		padding: 12px 0px 0px 0px;		
		/* font: normal 1.12em  Verdana, Arial, Helvetica, sans-serif;		*/
		/* border: #0000FF solid 1px; */		
	}
	
	#featureitemswrap #latestnews .featurenewsitems {
		display:block;
		padding: 2px 0px 0px 0px;
		margin-bottom:5px;
		color:#a3a2a2;
	}
	.featurenewsitems td { /*baselevel style that give all versions of IE a base to start sizing from */
		font-size:11px;
		color:#a3a2a2;
	}
	.featurenewsitems h4, .featurenewsitems h4 a { /* News Category */
		display:inline;
		margin: 0px 5px 0px 5px;
		font: bold 1.0em  Verdana, Arial, Helvetica, sans-serif;
		color:#a3a2a2;
	}
	.featurenewsitems a { /* Read News Link */
		text-decoration:none;
		color:#a3a2a2;
	}
	.featurenewsitems .itemlink{
		font-weight:bold;
		color:#FFFFFF;
	}
	.featurenewsitems a:hover {
		text-decoration:underline;
	}
	
	.testbreaker { /* sets the breaker beteween the two items */
		float:left;
		position:relative;
		top:20px;
		/* border: #00FF99 solid 1px; */		
	}
	/* ================== */	
	
	/* ===== Footer ===== */	
	#footer { /* Formatting of the Footer Backgrounds etc */
		background: url(images/foot_menu_bkg.gif) no-repeat;
		clear:both;
		margin: 0 auto;
		margin-top: 10px;
		width: 956px;
		height: 60px;
		text-align:left;
		color: #c2c2c2;
		font: normal 1.2em Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		/* border: #00FF99 solid 1px; */		
	}
	#footer #footmen {
		float:left;
		padding: 12px 0px 0px 160px;
		/* border: #00FF99 solid 1px; */		
	}
	#footer #footmen li{
		display:inline;
		list-style:none;
		/* border: #00FF99 solid 1px; */		
	}
	#footer #footmen li a {
		color: #c2c2c2;
		text-decoration:none;
		font-size:0.9em;
		/* border: #00FF99 solid 1px; */		
	}
	#footer #footmen li a:hover {
		text-decoration:underline;
	}	
	#footer .copyright {
		display:block;
		padding:11px 0px 0px 800px;		
		/* padding:11px 0px 0px 740px; */
		 /* border: #00FF99 solid 1px; */
	}
	#contactinfo {
		float:left; /* to allow the badge to become a right cloumn */
		text-align:left;
		padding-left:10px;
		font: normal 1.1em Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		color:#494d4b
	}
	#badge {
		float:right;
		margin:0px 10px 20px 0px;
		/* border: #00FF99 solid 1px; */
	}
	#contactinfo .contactcolor1 {
		color:#603913;
	}
	
/*------- Page Specific styles ------------*/	

	/* ===== Home Page ===== */	
	.ishome {
		margin:0px !important;
		padding:0px !important;
		background:none !important;
	}
	.column1ishome{
		width:723px !important; /* set the width on the home page so that Opera and Safari will space column 2 correctly */
	}
	.column2ishome{
		/* float:left !important; */
		/* padding-right:10px; */
	}
	#bodwrap #homewrap {
		background:url(images/home_head_bkgrnd.jpg) no-repeat top left;
		width:955px;		
		float:left;
		margin:0px;
	} 
	#larrymessagewrap, #larrymessagewrapf {
		background:url(images/frontpage_mainimage.jpg) no-repeat top left;
		width:723px;
		height:517px;
		margin-left:6px;
		margin-right: 0px !important;
		border: transparent solid 1px; /* Used to make Safari's box model stop putting top margin. */
	}
	#larrymessagewrapf { /* French version */
		background:url(images/frontpage_mainimagef.jpg) no-repeat top left !important;
	}

	#larrymessagetext{
		width:284px;
		position:relative;
		top:152px;
		left:384px;
	}
	#larrymessagetext p{
		font: normal 10px Century Gothic, Verdana, Arial, Helvetica, sans-serif;
		text-align:justify;
		color:#FFFFFF;
		line-height:10px;
	}
	.homemessage {/* Restore the padding for stripped from Column 1 for anything on the front page outside the image of Larry */
		padding: 0px 0px 0px 18px;
	}
	#homevidbut	{
		position:relative;
		right:70px;
		top:125px;	
	}
	/* ================== */	

	/* ===== Contact Us Page ===== */	
	/* see cforms stylesheet for form specific styles */
	.maphide{
		display:none;
	}
	#gmaps a{
		color:#FFFFFF;
	}

	/* ================== */	

	/* ===== News Post pages ===== */	
	#bodwrap #newswrap {
		background:url(images/home_head_bkgrnd.jpg) no-repeat top left;
		width:955px;		
		float:left; /* required to make the backgrounnd stretch */
		margin:0px;
	} 	
	.column2nobeforeafter{ /*this class will adjust the padding on the top of the sidbar to change the room normally left for the before and after images. */
		padding-top: 16px !important;
	}
	/* ================== */		
	
	/* ===== Tabbed Objects from Hairloss info pages ===== */
	.tabswrap{
		background: url(images/bod_bkgrnd2.gif) repeat-x top left;
		border: #CCCCCC solid 1px;
		border-top: none;
		padding:15px 0px 12px 10px;
	}
	#tabs1, #tabs2, #tabs3, #tabs4 {
		border-bottom:1px solid #CCCCCC;
		clear:both;
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
		margin:0pt !important;
		padding:0px 0px 25px 0px !important;
		margin-top:25px !important; 
	}
	#tabs1 li, #tabs2 li, #tabs3 li, #tabs4 li{
		float:left;
		/* margin-right:7px; */
		text-align:center;	
	}
	#tabs1 li a, #tabs2 li a, #tabs3 li a, #tabs4 li a{
		background-color: #EEEEEE;
		color:#666666;
		display:block;
	/*	height: 20px; */
		padding: 5px 5px 5px 5px; 
		font-weight:bold;
		text-decoration:none;
		border-right: #CCCCCC solid 1px; 
		border-top: #CCCCCC solid 1px; 

	}
	
	#tabs1 li a.active, #tabs2 li a.active, #tabs3 li a.active, #tabs4 li a.active {
		background-color:#BBBBBB;
	}
	
	#tabs1 li a:hover, #tabs2 li a:hover, #tabs3 li a:hover, #tabs4 li a:hover {
		/* color:#5A666E; */
		color:#FFFFFF;
	}
	.tabswrap h4 {
		font-size:1.2em;
		font-weight:bold;
		margin-bottom:10px;
	}