@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:						930px;
	margin:						12px 0 10px 15px;
        position: 	absolute;
}
* html #topnav {
	height:						30px;
}

#topnav ul {
	display:					block;
	width:						930px;
	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:                                   7px;
	margin-bottom:                                  7px;
}
* html #topnav ul li a {
	height: 					30px;
}


#topnav ul li#depression a {
	width:		104px;
	background: url(/media/img/bg-topnav-020816.png) 0 0 no-repeat;
}
#topnav ul li#addiction a {
	width:		90px;
	background: url(/media/img/bg-topnav-020816.png) -104px 0 no-repeat;
}
#topnav ul li#stress a {
	width:		148px;
	background: url(/media/img/bg-topnav-020816.png) -194px 0 no-repeat;
}
#topnav ul li#pain-management a {
	width:		170px;
	background: url(/media/img/bg-topnav-020816.png) -960px 0 no-repeat;
}
#topnav ul li#stress-reduction-essentials a {
	width:		233px;
	background: url(/media/img/bg-topnav-020816.png) -1266px 0 no-repeat;
}
#topnav ul li#carers a {
	width:		66px;
	background: url(/media/img/bg-topnav-020816.png) -343px 0 no-repeat;
}
#topnav ul li#about a {
	width:		86px;
	background: url(/media/img/bg-topnav-020816.png) -408px 0 no-repeat;
}
#topnav ul li#open-day a {
	width:		135px;
	background: url(/media/img/bg-topnav-020816.png) -1131px 0 no-repeat;
}
#topnav ul li#professionals a {
	width:		127px;
	background: url(/media/img/bg-topnav-020816.png) -494px 0 no-repeat;
}
#topnav ul li#work a {
	width:		82px;
	background: url(/media/img/bg-topnav-020816.png) -621px 0 no-repeat;
}
#topnav ul li#schools a {
	width:		74px;
	background: url(/media/img/bg-topnav-020816.png) -703px 0 no-repeat;
}
#topnav ul li#booking a {
	width:		81px;
	background: url(/media/img/bg-topnav-020816.png) -777px 0 no-repeat;
}


#topnav ul li#our-patron {
	width:		102px;
	position: absolute;
        top: -92px;
        right: 16px;
}
#topnav ul li#our-patron a {
	width:		102px;
	background: url(/media/img/bg-topnav-020816.png) -858px 0 no-repeat;
}



#topnav ul li#depression a:hover {background-position:		0 -30px;}
#topnav ul li#addiction a:hover {background-position:		-104px -30px;}
#topnav ul li#stress a:hover {background-position:		-194px -30px;}
#topnav ul li#pain-management a:hover {background-position:		-960px -30px;}
#topnav ul li#stress-reduction-essentials a:hover {background-position:		-1266px -30px;}
#topnav ul li#carers a:hover {background-position:		-343px -30px;}
#topnav ul li#about a:hover {background-position:		-408px -30px;}
#topnav ul li#open-day a:hover {background-position:		-1131px -30px;}
#topnav ul li#professionals a:hover {background-position:	-494px -30px;}
#topnav ul li#work a:hover {background-position:		-621px -30px;}
#topnav ul li#schools a:hover {background-position:		-703px -30px;}
#topnav ul li#booking a:hover {background-position:		-777px -30px;}
#topnav ul li#our-patron a:hover {background-position:		-858px -30px;}


#topnav ul li#depression a.selected {background-position:	0 -60px;}
#topnav ul li#addiction a.selected {background-position:	-104px -60px;}
#topnav ul li#stress a.selected {background-position:		-194px -60px;}
#topnav ul li#pain-management a.selected {background-position:		-960px -60px;}
#topnav ul li#stress-reduction-essentials a.selected {background-position:		-1266px -60px;}
#topnav ul li#carers a.selected {background-position:		-343px -60px;}
#topnav ul li#about a.selected {background-position:		-408px -60px;}
#topnav ul li#open-day a.selected {background-position:		-1131px -60px;}
#topnav ul li#professionals a.selected {background-position:	-494px -60px;}
#topnav ul li#work a.selected {background-position:		-621px -60px;}
#topnav ul li#schools a.selected {background-position:		-703px -60px;}
#topnav ul li#booking a.selected {background-position:		-777px -60px;}
#topnav ul li#our-patron a.selected {background-position:	-858px -60px;}

.hidden {
    display: none;
}