@charset "iso-8859-1";

/*******************************************************************************
*  screen-home.css
* ------------------------------------------------------------------------------
*  Homepage style sheet for Breathing Space London (breathingspacelondon.org.uk)
*******************************************************************************/

/*******************************************************************************
*  reset all styles
*******************************************************************************/

/* foreground and background color should be set on body element */

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
{
	margin:				0;
	padding:			0;
	border:				0;
	font-weight:		inherit;
	font-style:			normal;
	font-size:			100%;
	line-height:		1.25em;
	font-family:		inherit;
	text-align:			left;
	vertical-align:		baseline;
}

a img, :link img, :visited img 
{
	border:				0;
}

table
{
	border-collapse:	collapse;
	border-spacing:		0;
}

ol, ul
{
	list-style:			none;
}

q:before, q:after,
blockquote:before, blockquote:after,
blockquote p:before, blockquote p:after 
{
	content: 			"";
}

strong 
{
	font-weight:		bold;
}

a {
	text-decoration:		none;
}

/*******************************************************************************
*  generic styling
*******************************************************************************/
body {
	font-family:			Verdana, Arial, Helvetica, sans-serif;
    background-color:       #E6E6E6;
	background-position: 	center 0;
	background-attachment: 	scroll;
	background-image: 		url(/media/img/bg-homepage.jpg);
	background-repeat: 		no-repeat;
}


.hide {
	display: 				none;
}
/* :root is an invalid pseudo class but mozilla knows it */
:root code
{
	font-size: 120%;	/* monospace fonts are typically smaller that 
				   'normal' fonts under Mozilla. */
}

/*
	Time to try and get all the heading elements to the same size 
	regardless of browser. (IE seems to put them a big bigger
	than Mozilla, typically.)
*/
h1
{
	font-size: 210%;
}
h2
{
	font-size: 160%;
}
h3
{
	font-size: 140%;
}
h4
{
	font-size: 126%;
}
h5
{
	font-size: 110%;
}
h6
{
	font-size: 100%;
}
p
{
	font-size: 14px;
}

.clear
{
	clear: both;
	padding-bottom: 1px;	/* for Gecko-based browsers */
	margin-bottom: -1px;	/* for Gecko-based browsers */
}

/*html[xmlns] .mozclear*/
html .mozclear
{
        /* this selector should be valid CSS, but Opera 7.5 (and above) will pick
         * this up as well. Shouldn't be a problem, Opera should handle this fine,
         * but it's a Mozilla-targeted hack, and it should probably only affect
         * mozilla. You can do that by replacing the INVALID CSS selector
         * :root .mozclear for what's give here.
         */
        border-bottom: 1px solid; 
        border-color: transparent;
        margin-bottom: -1px;
}


/*******************************************************************************
*  Site-wide general styling
*******************************************************************************/

#pageWrapper
{
	margin: 				0 auto;
	width: 					940px;
	height: 				400px;
}
* html #pageWrapper
{
	word-wrap: break-word;
}

#outerColumnContainer
{
	margin: 10px 0 0 0;
	/*background-color:		#FFFFFF;*/
}

#leftColumn, #contentColumn, #rightColumn
{
	position: relative;	/* IE has a display/render bug with non-floated 
				   block elements inside floated block elements. 
				   setting position:relative on the floating
				   element seems to resolve this. */
}


#leftColumn
{
	float: left;
	width: 200px;
	margin-right: 20px;	
}

#rightColumn
{
	width: 40px;
	float: right;
	margin-left: 20px;	
}
#rightColumn img{
	margin-bottom: 17px;
}

#bookmark
{
	float: right;
	margin: 9px 11px 0 0;
}


/*******************************************************************************
*  Masthead
*******************************************************************************/
#masthead
{
	height: 120px;
	display: block;
	width: 940px;
}

#masthead h1
{
	position: 	absolute;
	display: 	inline;
	margin: 	15px 0 0 15px;
	width: 		317px;
	height: 	105px;
}
#masthead strong
{
	display: none;
}
#masthead #email-us
{	
	display: 				inline;	
	float: 					right;
	margin-top: 			40px;
	margin-right:			15px;
	width: 					168px;
	height: 				40px;
}
#masthead #talk-to-us
{	
	display: 				inline;	
	float: 					right;
	margin-top: 			40px;
	margin-right:			0px;
	width: 					307px;
	height: 				40px;
}

#masthead #mindfulness-for-health
{    
    display:                block;    
    float:                  right;
    clear:                  right;
    margin:                 92px 15px 0 0;
    width:                  349px;
    height:                 18px;
}


/******************************************************************************/
/* Top Navigation Bar */
/******************************************************************************/
#topnav {
	min-height:					30px;
	width:						910px;
	margin:						12px 0 10px 15px;
}
* html #topnav {
	height:						30px;
}

#topnav ul {
	display:					block;
	width:						910px;
	list-style:					none;
	min-height:					30px;	
}
* html #topnav ul {
	height:						30px;
}

#topnav ul li {
	display: 					inline;
	height:						30px;	
}


#topnav ul li {
	display: 					inline;
	height:						30px;	
}

#topnav ul li a strong {
	display:					none;
}
#topnav ul li a {
	display:					block;
	float:						left;
	min-height: 				30px;
	margin-right:				2px;
}
* html #topnav ul li a {
	height: 					30px;
}


#topnav ul li#depression a {
	width:		195px;
	background: url(/media/img/bg-topnav-depression.gif) 0 0 no-repeat;
}
#topnav ul li#addiction a {
	width:		178px;
	background: url(/media/img/bg-topnav-addiction.gif) 0 0 no-repeat;
}
#topnav ul li#carers a {
	width:		153px;
	background: url(/media/img/bg-topnav-carers.gif) 0 0 no-repeat;
}
#topnav ul li#about a {
	width:		94px;
	background: url(/media/img/bg-topnav-about.gif) 0 0 no-repeat;
}
#topnav ul li#booking a {
	width:		200px;
	background: url(/media/img/bg-topnav-booking.gif) 0 0 no-repeat;
}
#topnav ul li#donate a {
	width:		78px;
	background: url(/media/img/bg-topnav-donate.gif) 0 0 no-repeat;
}


#topnav ul li#home a:hover,
#topnav ul li#depression a:hover,
#topnav ul li#addiction a:hover,
#topnav ul li#carers a:hover,
#topnav ul li#about a:hover,
#topnav ul li#booking a:hover,
#topnav ul li#donate a:hover
{
	background-position:		0 -30px;
}
#topnav ul li#home a.selected,
#topnav ul li#depression a.selected,
#topnav ul li#addiction a.selected,
#topnav ul li#carers a.selected,
#topnav ul li#about a.selected,
#topnav ul li#booking a.selected,
#topnav ul li#donate a.selected
{
	background-position:		0 -60px;
}

.hidden {
    display: none;
}