/*--------------------------------------------------------------------------

<Site Name> - Basic Style Sheet

Version:	2.0
Author:		Danny
Website:	farjo.com / 2008

*** Last Modify Date: 13/08/2008 ( Danny ) ***

--------------------------------------------------------------------------*/

/* Structure 

	=Global
	=Typography
	=Headings
	=Links
	=Access Keys / Jumps
	=Forms
	=LayoutStructure
		- header
		- sidebar
			- navigation
		- p-content	
		- s-content
		- footer
	=Shared Styles
	=header
	=contentcontainer
	=sidebar
	=p-content ( insides )
	=s-content ( insides )
	=footer ( insides )

--------------------------------------------------------------------------*/


/* =Global 
--------------------------------------------------------------------------*/

* { margin: 0; padding: 0; } 

html { height: 100%; margin-bottom: 0.01em; } /* forces v-scroll bar in all browsers */
body { line-height: 1.4; background-color: #E6E9F8; padding-bottom: 60px; }

.clearme { clear: both; }
.hideme { display: none; } /* visibility: hidden; could be used here instead depends what you need */
.left { float: left; }
.right { float: right; }

acronym { speak: normal; }
abbr { speak: spell-out; }




/* =Typography
 *
 * Use this section for general type styles
--------------------------------------------------------------------------*/

html { font-size: 100.01%; }

body { font-size: 1em; font-family: Arial, Trebuchet MS, Tahoma, Sans-Serif; }
p { margin-bottom: 6px; } 

#p-content { font-size: 0.75em; }
#s-content { font-size: 0.75em; }

/* Freeform - normally we have freeform wrapped inside a container of some sort */

.freeform { font-size: 1em; color: #636262; width: 536px; }
.freeform p { font-size: 1em; color: #636262; margin-bottom: 12px; }

.freeform ul { clear: both; margin: 0 0 0 12px; padding-bottom: 6px; list-style-type: none; }
.freeform ol { clear: both; margin: 0 0 0 11px; padding-bottom: 6px; list-style-position: inside; } /* needs slightly bigger left margin than ul */

.freeform li { margin-bottom: 6px; font-size: 1em; }

.freeform li a { color: #636262; text-decoration: underline; }
.freeform li a:hover { text-decoration: none; }

.freeform ol li {  } 
.freeform ul li { background: url(/img/bullet.gif) 0 7px no-repeat; list-style: none; padding-left: 15px; } 

.in-this-section li a { text-decoration: none; color: #636262; }
.in-this-section li a:hover { text-decoration: underline; }

.freeform a { color: #636262; }
.freeform a:hover { text-decoration: none; color: #6f7aaf; }

.freeform img { margin: 5px; }

/* CSS3 selectors, for the good browsers */

.freeform img[align=left] { margin-left: 0; }
.freeform img[align=right] { margin-right: 0; }


/* =Headings
--------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 { font-family: Verdana, Arial, Tahoma, Sans-Serif; }

.freeform h3, .freeform h4, .freeform h5 { font-size: 0.92em; }

.freeform h3 { color: #717171; border-bottom: 1px solid #b1b1b1; padding-bottom: 3px; margin-bottom: 6px; clear: both; }

.freeform h4 { color: #717171; margin-bottom: 4px; clear: both; }

.freeform h5 { color: #969696; margin-bottom: 4px; clear: both; }

h1 { font-size: 1.08em; font-weight: bold; color: #c75b28; padding-bottom: 2px; border-bottom: 1px solid #b1b1b1; margin-bottom: 6px; }

h1.logo { text-indent: -9999em; position: relative; border: 0; margin: 0; padding: 0; }
h1.logo a { position: absolute; top: 0; left: 0; width: 150px; height: 40px; border: 0; } 

h2 { font-size: 1em; font-weight: bold; color: #717171; border-bottom: 1px solid #b1b1b1; padding-bottom: 3px; margin-bottom: 6px; }


/* =Links
 * 
 * LVHA ( :link / :visited / :hover / :active ) - important due to the way CSS handles cascade / ordering.
--------------------------------------------------------------------------*/

a { }
a:link { }
a:visited { }
a:hover, a:active, a:focus { }

a img { border: none; }


/* =Access Keys / Jumps
--------------------------------------------------------------------------*/


/* =Forms
--------------------------------------------------------------------------*/

fieldset { border: none; }
legend { }
label { cursor: pointer; }

input, select, textrea { font-family: inherit; font-size: 1em; }

div.form h2 { margin-bottom: 0; border: 0; }
fieldset.sameline 
{
	background-color: #f5f6fa; 
	position: relative; 
	display: inline; 
	width: 536px; 
	border-bottom: 1px solid #b1b1b1;
}

fieldset.sameline ol 
{
	padding: 11px 13px; 
	width: 510px; 
	float: left; 
	clear: both; 
	position: relative;
	border-top: 1px solid #b1b1b1;
}
fieldset.sameline li 
{
	margin: 0 0 6px 0; 
	list-style: none; 
	position: relative; 
	clear: both; 
	float: left; 
	width: 510px; 
	display: inline;
}

fieldset.sameline li label, fieldset.sameline p.custom { display: block; width: 182px; float: left; color: #636363; padding: 3px 5px 2px 0; vertical-align: middle; }
fieldset.sameline li .formFieldText { width: 199px; padding: 2px; color: #636262; float: left; border: 1px solid #E6E9F8; border-top-color: #AAADB2; }

fieldset.sameline li .formFieldDropDown { width: 205px; padding: 2px; color: #636262; float: left; border: 1px solid #E6E9F8; border-top-color: #AAADB2; }

fieldset.sameline li textarea 
{
	border: 1px solid #E6E9F8; 
	border-top-color: #AAADB2; 
	width: 204px; padding: 2px; 
	font-family: Arial, Verdana, Tahoma, Sans-Serif; 
	font-size: 1em; 
	color: #636262;
	float: left;
}

fieldset.sameline li p.help { width: 100px; float: left; margin: -2px 0 10px 10px; position: relative; }

.buttons { clear: both; width: 536px; float: left; }

/* Form Error */

#validationSummary 
{
	clear: both; 
	width: 516px; 
	margin: 0 0 30px 0; 
	border-bottom: 1px solid #df4f4f; 
	border-top: 1px solid #df4f4f; 
	padding: 6px 10px; 
	background-color: #f8eeec; 
	color: #df3f4f;
}
#validationSummary p { display: inline; }
#validationSummary p strong { color: #df4f4f; } 
#validationSummary ul { margin-left: 16px; list-style: none; padding-top: 2px; } 

fieldset.sameline li label.error { color: #DF3F4F; }


/* Signup */

fieldset.signup { position: relative; width: 192px; margin: 0 0 26px 0; }

fieldset.signup h2 { margin: 0 0 8px 0; }
fieldset.signup h2 label { display: block; }

fieldset.signup #signuptext 
{
	width: 157px; 
	padding: 2px; 
	color: #636262; 
	border: 1px solid #E6E9F8; 
	border-top-color: #AAADB2; 
	vertical-align: middle;
}
fieldset.signup #signupbtn { vertical-align: middle; /*fixes positioning to centre align*/}

fieldset.signup p { font-size: 0.92em; color: #838383; width: 163px; padding: 6px 3px; }
fieldset.sameline p.custom { padding-top: 9px; clear: both; vertical-align: middle; margin: 0; position: relative; display: inline; }

fieldset.sameline #passwordConfirm { margin: 6px 0 0 0; }

/* =LayoutStructure
--------------------------------------------------------------------------*/

#sitecontainer 
{
	padding: 0 5px; 
	width: 960px;
	background: url(/img/site_background.gif) top left repeat-y; 
	margin: 0 auto;
}

#header 
{
	background: url(/img/header_background.jpg) top left no-repeat; 
	padding: 31px 0 0 30px; 
	position: relative; 
	height: 74px;
	float: left;
	width: 930px;
}

#contentcontainer 
{
	position: relative; 
	background: url(/img/content_gradient.gif) top left repeat-x; 
	padding: 5px 8px 8px 8px; 
	float: left; 
	clear: both;
	width: 944px;
	overflow: hidden;
}

#sidebar { clear: both; float: left; width: 192px; margin-right: 11px; }

#p-content { float: left; width: 538px; overflow: hidden; }
#s-content { float: left; width: 192px; position: relative; margin-left: 11px; }

#footer { width: 970px; clear: both; background: url(/img/footer_background.gif) top left no-repeat; margin: 0 auto; }


/* =Shared Styles
 *
 * If you find your re-using the same styles on certain elements 
 * put them here
--------------------------------------------------------------------------*/

a.consultation, a.enquiry-form
{
	color: #717171; 
	display: block; 
	font-weight: bold; 
	padding-right: 16px; 
	text-align: right;
	background: url(/img/arrow_dark_grey.gif) 100% 8px no-repeat;
	clear: both;
	text-decoration: none;
	padding-top: 5px;
	border-top: 1px solid #b1b1b1;
}
a.consultation:hover, a.enquiry-form:hover { text-decoration: underline; }

#page-controls { clear: both; float: left; width: 538px; padding-bottom: 4px; margin-bottom: 8px; border-bottom: 1px solid #b1b1b1; }
#page-controls h2 { border: 0; float: left; width: 400px; padding: 0; margin: 0; }
#page-controls span { width: 130px; float: right; font-size: 1em; font-weight: bold; text-align: right; font-family: Verdana, Tahoma, Arial, Sans-Serif; }

/* =header
--------------------------------------------------------------------------*/

#header .strapline 
{
	margin-left: 177px; 
	font-family: Tahoma, Arial, Verdana, Sans-Serif; 
	width: 555px; 
	float: left;
	position: relative;
	display: inline;
}
#header .strapline h2 { font-size: 0.94em; font-weight: bold; color: #fff; border-bottom: 0; margin: 0; }
#header .strapline address { font-size: 0.81em; font-style: normal; color: #f5d7c0; font-weight: bold; }

#header fieldset { position: relative; float: left; width: 190px; }

#header fieldset label 
{
	font-size: 0.75em; 
	font-family: Verdana, Arial, Tahoma, Sans-Serif; 
	font-weight: bold; 
	color: #fff;
	display: block;
}

#header fieldset #searchinput 
{
	font-size: 0.75em; 
	width: 152px; 
	border: 1px solid #E6E9F8; 
	border-top-color: #AAADB2;
	padding: 2px;
	color: #636262;
	vertical-align: middle;
}

#header fieldset #searchbtn { vertical-align: middle; }


/* =sidebar
--------------------------------------------------------------------------*/

#sidebar { font-size: 0.75em; }

#navigation { width: 192px; margin: 0 0 16px 0; }
#navigation li { width: 192px; list-style: none; background-color: #6f7aaf; margin: 0 0 2px 0; }
#navigation li a 
{
	display: block; 
	font-size: 1em;
	font-weight: bold;
	color: #717171;  
	padding: 3px 0 2px 5px; 
	vertical-align: middle;
	margin-left: 6px; 
	border-left: 1px solid #fff; 
	background: #f2f2f2 url(/img/nav/nav.gif) right top no-repeat; 
	width: 181px; 
	text-decoration: none;
}

#navigation li a:hover, #navigation li a.on { background: #6f7aaf url(/img/nav/nav_on.gif) right top no-repeat; color: #fff; }

.blog li { width: 190px; list-style: none; margin-bottom: 8px; }
.blog li a { vertical-align: middle; width: 190px; display: block; border: 1px solid #dadada; }
.blog li p a { font-size: 0.92em; color: #838383; padding: 0 3px; border: 0; }
.blog li p a:hover { text-decoration: none; }

.sponsors, .blog { list-style: none; }
.sponsors li { width: 190px; list-style: none; margin-bottom: 8px; text-align: center; }
.sponsors li a { text-align: center; vertical-align: middle; width: 190px; display: block; border: 1px solid #dadada; }
.sponsors li a img { width: 190px; }
.sponsors li p a { font-size: 0.92em; color: #838383; padding: 6px 3px; border: 0; }
.sponsors li p a:hover { text-decoration: none; }

.sponsors li.hair-loss-centre p { text-align: center; padding: 6px 0 }
.sponsors li.hair-loss-centre a { display: inline; }
.sponsors li.hair-loss-centre span { font-size: 0.9em; }
.sponsors li.hair-loss-centre a.image { display: block; }

/* =p-content
--------------------------------------------------------------------------*/

#breadcrumbs { margin: 3px 0 5px 0; }
#breadcrumbs a { color: #636262; text-decoration: none; }
#breadcrumbs a:hover { text-decoration: underline; }

#p-content { color: #636262; }
#p-content .news { float: left; clear: both; width: 536px; }

/* News */

div.news { margin: 26px 0; font-size: 1em; position: relative; }

div.news a { text-decoration: none; }
div.news a:hover { text-decoration: underline; }

h2.clearme { position: relative; padding-top: 9px; } 

#page_controls { position: relative; }

h2.clearme a.rss
{
	position: absolute; 
	right: 3px; 
	top: 13px; 
	font-size: 0.88em; 
	color: #717171; 
}

div.featured-news { width: 536px; margin: 5px 0 20px 0; }

div.featured-news img { width: 103px; height: 105px; margin: 3px 8px 4px 0; border: 1px solid #7fb4d8; float: left; }

div.featured-news h3 { font-size: 1em; border: 0; }
div.featured-news h3 a { color: #c75b28; margin: 0 0 3px 0; }


div.featured-news h3 a:hover { text-decoration: underline; }

#forums h3 a { color: #c75b28; margin: 0 0 3px 0; text-decoration: none; font-size: 0.88em; }
#forums h3 a:hover { text-decoration: underline; }

ol.latest-news { clear: both; width: 536px; margin: 5px 0 0 0; float: left; }

ol.latest-news li 
{
	clear: both; 
	width: 536px; 
	list-style-type: none; 
	border-bottom: 1px solid #dadada; 
	margin-bottom: 8px;
	position: relative;
	float: left;
}

ol.latest-news img { width: 51px; height: 51px; margin: 3px 5px 3px 0; border: 1px solid #7fb4d8; float: left; }

ol.latest-news li h3 { font-size: 1em; border: 0; } 
ol.latest-news li h3 a { color: #6f7aaf; margin: 0 0 3px 0; text-decoration: none; } 
ol.latest-news li h3 a:hover { text-decoration: underline; }
a.view-news-archive
{
	color: #717171; 
	display: block; 
	font-weight: bold; 
	padding-right: 16px; 
	text-align: right;
	background: url(/img/arrow_dark_grey.gif) center right no-repeat;
	clear: both;
}
a.back-to-forum 
{
	color: #717171; 
	display: block; 
	font-weight: bold; 
	padding-left: 16px; 
	background: url(/img/arrow_dark_grey_back.gif) center left no-repeat;
	text-decoration: none;
}
a.back-to-forum:hover { text-decoration: underline; }
.featured-news p.date, .latest-news p.date { clear: none !important; }

/* Forum */

#forum { clear: both; width: 536px;}
#forum .summary { clear: both; padding-bottom: 6px; border-bottom: 1px solid #b1b1b1; margin-bottom: 4px; }

#forum .created-by { margin-bottom: 26px; }
#forum .created-by strong { color: #6f7baf; display: inline; font-weight: normal; text-transform: capitalize; }

.item-posting { clear: both; padding-bottom: 6px; border-bottom: 1px solid #dedede; margin-bottom: 6px; width: 536px; }

.item-posting .controls h3 { text-transform: capitalize; font-size: 1em; width: 250px; float: left; font-family: Arial, Verdana, Tahomo, Sans-Serif;}

.controls .control-buttons { width: 200px; float: right; text-align: right; } 

.controls .control-report, .controls .control-edit, .controls .control-delete 
{
	color: #626262; 
	text-decoration: none; 
	padding: 1px 0 1px 20px;
	margin: 0 0 0 3px; 
	background-position: left center; 
	background-repeat: no-repeat;
}

.controls .control-report { background-image: url(/img/icons/report.gif) }
.controls .control-edit { background-image: url(/img/icons/edit.gif) }
.controls .control-delete { background-image: url(/img/icons/delete.gif) }

p.date { clear: both; font-size: 0.92em; font-weight: bold; color: #626262; margin-bottom: 5px; }

#forums { border-top: 1px solid #b1b1b1; padding-top: 6px; }
li.item { border-bottom: 1px solid #dedede; padding-bottom: 6px; margin-bottom: 4px; }
li.item h3 { font-size: 1em; /*font-family: Arial, Verdana, Tahomo, Sans-Serif;*/ }
li.item h3 a { font-size: 1em; color: #616161; text-decoration: none; margin-bottom: 6px; }
li.item h3 a:hover { color: #616161; text-decoration: underline; }

li.no-line { margin-top: -8px; border-top: 0 !important; position: relative; }

/* Search Page */

#search-results { width: 536px; clear: both; }


/*=Paging 
--------------------------------------------------------------------------

#paging { clear: both; margin: 0 12px; position: relative; }
#paging li { list-style: none; float: left; margin: 0 5px 0 0; display: inline; }*/

/* Standard Link Styles (Numbers)

#paging li a, #paging li span { display: block; padding: 1px 5px; text-align: center; color: #757575; text-decoration: none; border: 1px solid #e2e9ef; }
#paging li a:hover { color: #fff; text-decoration: none; background-color: #6f7baf; }

/* First and Last Pages
#paging li.first-page a.on, #paging li.last-page a.on { }
#paging li.first-page a.on:hover, #paging li.last-page a.on:hover { }
#paging li.first-page span, #paging li.last-page span { color: #d3d3d3; }

/* Arrows (Previous and Next) 

#paging li.previous a.on { background-image: url(/img/icons/previous.gif) }
#paging li.previous a.on:hover { background-image: url(/img/icons/previous_on.gif) }
#paging li.previous span { background-image: url(/img/icons/previous_off.gif) }


#paging li.next a.on { background-image: url(/img/icons/next.gif) }
#paging li.next a.on:hover { background-image: url(/img/icons/next_on.gif) }
#paging li.next span { background-image: url(/img/icons/next_off.gif) }*/

div.center { text-align: center; float: left; width: 538px; }
.page_select
{
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	float: left;
	margin: 0 auto;
}

.page_select img { float: left; margin: 0 1px; text-align: center; }
.page_select a
{
	text-decoration: none;
	text-align: center;
	float: left;
	display: block;
}

.page_select a img { float: none; margin: 0 1px; text-align: center; }

a.first-last { width: 73px; height: 24px; float: left; margin: 0 1px; }

a.arrow { display: block; float: left; margin: 0 1px; padding: 0; }

span.paging-on, a.paging-off
{
	margin: 0 1px; 
	/*padding: 5px 11px 5px 11px;*/
	background-repeat: no-repeat;
	width: 29px; 
	padding: 4px 0 5px 0;
	vertical-align: middle;
	display: block;
	float: left;
	text-align: center;
}
span.paging-on
{
	color: white;
	background-image: url(/img/paging/number_on.gif);
}

a.paging-off
{
	color: #747474;
	background-image: url(/img/paging/number.gif);
}

a.paging-off:hover
{
	color: white;
	background-image: url(/img/paging/number_on.gif);
}



/* =s-content
--------------------------------------------------------------------------*/

#s-content { width: 192px; }

#quick-links { margin-bottom: 20px; width: 192px; position: relative; }

#quick-links li { list-style: none; line-height: 0; display: inline; }
#quick-links li a { display: block; margin: 0 0 2px 0; }

/* In This Section - See Freeform section for list styles */


.in-this-section { margin-bottom: 26px; position: relative; margin-left: 4px }
.in-this-section ul { margin-left: 2px; }
.in-this-section li { padding-left: 10px; background: url(/img/bullet.gif) 0 6px no-repeat; list-style: none; margin-bottom: 6px; } 
.in-this-section h2 { margin-bottom: 6px; margin-top: 14px; }

/* Documents */

#documents ul { margin-left: 4px; }
#documents li { color: #636262; list-style-type: none; margin-left: 4px; list-style-type: none; width: 192px; margin-bottom: 6px; }

#documents li a { color: #636262; display: block; padding-left: 20px; width: 162px; float: left; text-decoration: none; }
#documents li a:hover { text-decoration: underline; }

#documents li span { color: #888; margin-left: 20px; clear: both; }

#documents li a.pdf { background: url(/img/icons/pdf.gif) 0 2px no-repeat; }
#documents li a.xsl { background: url(/img/icons/excel.gif) 0 2px no-repeat; }
#documents li a.mp3 { background: url(/img/icons/mp3.gif) 0 2px no-repeat; }
#documents li a.ppt { background: url(/img/icons/powerpoint.gif) 0 2px no-repeat; }
#documents li a.txt { background: url(/img/icons/text.gif) 0 2px no-repeat; }
#documents li a.doc { background: url(/img/icons/word.gif) 0 2px no-repeat; }
#documents li a.mp2 { background: url(/img/icons/mp3.gif) 0 2px no-repeat; }
#documents li a.mp4 { background: url(/img/icons/mp4.gif) 0 2px no-repeat; }
#documents li a.wmp { background: url(/img/icons/wmp.gif) 0 2px no-repeat; }
#documents li a.mov { background: url(/img/icons/quicktime.gif) 0 2px no-repeat; }
 

/* =footer
--------------------------------------------------------------------------*/

#footer { padding-top: 30px; }

#footer p { padding-left: 13px; font-size: 0.69em; color: #9da0a3; width: 250px; }
#footer p.right { text-align: right; padding-right: 13px; }

#footer a { color: #9da0af; }
#footer a:hover { text-decoration: none; }


/* Added 9th June 2009 */

p.iahrs { display: block; width: 170px; color: #838383; padding: 10px; text-align: center; border: 1px solid #DADADA; clear: both; }
p.iahrs a { color: #838383; display: inline; margin: 0 !important; padding: 0 !important; font-size: 12px !important; vertical-align: top; }
p.iahrs a:hover { color: #222; text-decoration: none; }

.external-link  
{
	background: url(/img/external.png) right 2px no-repeat;
	padding-right: 14px;	
}