@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:			Arial, Helvetica, sans-serif;
	font-size:				12px;
	background-color: 		#E6E6E6;
}


.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, h2, h3, h4, h5, h6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1
{    
    font-size: 250%;
}
h2
{
	font-size: 210%;
}
h3
{
	font-size: 160%;
}
h4
{
	font-size: 140%;
}
h5
{
	font-size: 126%;
}
h6
{
	font-size: 110%;
}
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;
	background-color:		#FFF;
    min-height:             500px;
}
* html #pageWrapper
{
	word-wrap: break-word;
    height:                     500px;
}

#outerColumnContainer
{
	margin: 10px 0 0 0;
	background-color:		#FFF;
}
#outerColumnContainer p.hidden {
    display: none;
}

#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. */
}




#rightColumn
{
	width: 40px;
	float: right;
	margin-left: 20px;
	background-color:		#FFF;	
}
#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;
}





/******************************************************************************/
/* Crumbtrail (Top Navigation) */
/******************************************************************************/

#crumbtrail {
	height:	30px;
	font-family: 	Arial, Helvetica, sans-serif;
	font-size: 		12px;	
}
#crumbtrail a {
	color:	#1793B7;
	font-weight: bold;
	margin: 0 3px;
}
#crumbtrail a:hover {
	text-decoration: underline;
}



/******************************************************************************/
/* Left Navigation Bar */
/******************************************************************************/
#leftColumn
{
	float: left;
	width: 200px;
	margin: 30px 25px 20px 20px;
	background-color:		#FFF;
}

#leftnav {
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	width: 					200px;
	float: 					left;
}

#leftnav ul {
	list-style:				none;
}

#leftnav ul li.selected {
    margin-top:                6px;
    margin-bottom:             6px;   
}

#leftnav li a {
	background: 			url(/media/img/bg-leftnav.gif) no-repeat;
	background-position:	0 0;
	display:				block;
	height: 				20px;
	color:					#fff;
	font-size:				11px;
	font-weight:			bold;
	padding: 				3px 0 0 5px;
}
#leftnav li a:hover {
	background-position:	-200px 0;
	color:					#fff;
}
#leftnav li a.selected {
    background-position:    -400px 0;
	color:					#fff;	
}



#leftnav li li a {
	color:					#fff;
	padding-left: 			16px;
	background-position:	-600px 0;
}
#leftnav li li a:hover,
#leftnav li li a.selected {
	color:					#fff;
	background-position:	-800px 0;
}


#leftnav li li li a {
	background-position:	-1000px 0;
	color:					#666;
}
#leftnav li li li a:hover,
#leftnav li li li a.selected {
	color:					#333;
	background-position:	-1200px 0;
}






/******************************************************************************/
/* contentColumn */
/******************************************************************************/

#contentColumn
{
	width: 					650px;
	margin:					0 45px 25px 0;
	float: 					left;
    clear:                  right;
}


#contentColumn h1 {
	margin-bottom: 15px;
	margin-top: -8px;
}


.editorial {
	/* background: url(/media/img/bg-scratch-lotus.gif) bottom right no-repeat; */
}

#contentColumn p {
    margin-bottom: 10px;
}
#contentColumn p img,
#contentColumn h1 img {
    margin: 10px 0 10px 10px;
}
#contentColumn img#header
{
    margin: 0;
}


#contentColumn a {
    color:    #1793B7;
    font-weight: bold;
}
#contentColumn a:hover {
    text-decoration: underline;
}

#contentColumn ul
{
    display: block;
    list-style: disc;
    margin: 10px 0 10px 20px;
}
#contentColumn ol
{
    display:    block;
    list-style: decimal;
    margin: 10px 0 10px 20px;
}
#contentColumn li
{
    margin:         4px;
    font-family:     Arial, Helvetica, sans-serif;
    font-size:       14px;
}
#contentColumn li li
{
    list-style-image: url(/media/img/li-hyphen.gif);
}




.event-listing
{
    width:          630px;
    height:         90px;
    padding:        15px 10px;
    background:     url(/media/img/bg-event-listing.gif) bottom left no-repeat;
    display:        block;
    margin-top:     10px;
    margin-bottom:  10px;
    position:       relative;
}
.event-detail-top
{
    width:          650px;
    height:         30px;
    background:     url(/media/img/bg-event-detail-top.gif) top left no-repeat;
    display:        block;
    margin-top:     10px;
}
.event-detail-inner
{
    width:          630px;
    padding:        0 10px;
    margin:         -10px 0;
    background:     url(/media/img/bg-event-detail-inner.gif) repeat-y;
    display:        block;
    position:       relative;
}
.event-detail-bottom
{
    width:          650px;
    height:         30px;
    background:     url(/media/img/bg-event-detail-bottom.gif) top left no-repeat;
    display:        block;
    position:       relative;
    margin-bottom:  10px;
}




#contentColumn .event-listing h1 {
    font-size:      160%;
    color:          #1793B7;
    margin-bottom:  10px;
}
#contentColumn .event-listing h2 {
    font-size:      140%;
    display:        block;
    width:          500px;
    margin-bottom:  4px;
}
#contentColumn .event-listing h3 {
    font-size:      126%;
    display:        inline;
    width:          500px;    
    font-weight:    bold;
}
#contentColumn .event-listing p {
    font-size:      100%;
    display:        block;
    width:          630px;
    margin-bottom:  4px;
}


a.book-now,
a.event-details,
a.event-edit,
a.event-save,
a.go-back
{
    display:        block;
    width:          94px;
    height:         30px;
    position:       absolute;
}
a.book-now {
    background:     url(/media/img/btn-book-now.gif) 0 0 no-repeat;
    right:          10px;
    bottom:         10px;
}
a.event-details {
    background:     url(/media/img/btn-event-details.gif) 0 0 no-repeat;
    right:          10px;
    bottom:         10px;    
}
a.event-edit {
    background:     url(/media/img/btn-event-edit.gif) 0 0 no-repeat;
    right:          10px;
    bottom:         10px;    
}
a.event-save {
    background:     url(/media/img/btn-event-save.gif) 0 0 no-repeat;
    right:          10px;
    bottom:         10px;    
}
a.go-back {
    background:     url(/media/img/btn-go-back.gif) 0 0 no-repeat;
    left:           38px;
    bottom:         25px;   
}
a.go-back-normal {
    display:        block;
    width:          94px;
    height:         30px;
    background:     url(/media/img/btn-go-back.gif) 0 0 no-repeat;   
}


a.book-now:hover,
a.event-details:hover,
a.event-edit:hover,
a.event-save:hover,
a.go-back:hover,
a.go-back-normal:hover
{
    background-position:    0 -30px;
}
a.book-now:active,
a.event-details:active,
a.event-edit:active,
a.event-save:active,
a.go-back:active,
a.go-back-normal:active
{
    background-position:    0 -60px;
}
a.book-now strong,
a.event-details strong,
a.event-edit strong,
a.event-save strong,
a.go-back strong,
a.go-back-normal strong
{
    display:                none;
}

div.fully-booked
{
    display:        block;
    position:       absolute;
    right:          10px;
    bottom:         10px;
}
/******************************************************************************/
/* Footer */
/******************************************************************************/

#footer
{
    /*margin:                 0 auto;*/
    width:                  940px;
    min-height:             8px;
    margin: -4px auto 20px auto;
}
* html #footer
{
    height:                     8px;
}


/******************************************************************************/
/* Admin Area */
/******************************************************************************/

/* Admin Login */
#admin-form {
    width: 200px;
    height: 145px;
    /*background-color: #838E90;*/
    color: #fff;
    margin-top: -230px;
    margin-left: 3px;
    
}
#admin-form form#admin label{
    display: block;
}
#admin-form p {
    color: #fff;
    font-size: 10px;
    margin: 0 9px;
}
#admin-form a {
    color: #D6CE01;
}
form#admin {
    margin: 12px 9px 0 9px;
}
form#admin label {
    display: none;
}
form#admin input {
    background-color: #CCCCCC;
    margin-bottom: 9px;
}


/* Picture Manager form */
#picture-manager-form {
    width: 600px;
    height: 145px;
    /*background-image:         url(/media/img/bg-signup.gif);*/
    background-color: #24282B;
    padding-top: 10px;
    color: #fff;
    margin-bottom: 10px;
    
}
#picture-manager-form form#picture-manager label{
    display: block;
}
#picture-manager-form p {
    color: #fff;
    font-size: 10px;
    margin: 0 9px;
}
#picture-manager-form p a {
    color: #FF6600;
}
form#picture-manager {
    margin: 12px 9px 0 9px;
}
form#picture-manager label {
    display: none;
}
form#picture-manager input {
    background-color: #CCCCCC;
    margin-bottom: 9px;
}







/*******************************************************************************
*  Admin pages
*******************************************************************************/
#album {
    width: 650px;
}
#album a.delete_button {
    float: right;
}
#album a.delete_button img {
    margin: 0;
}


.slide {
    font-family:                Verdana, Arial, Helvetica, sans-serif;  
    width:                         140px;
    height:                     160px;
    background:                    url(/media/img/bg_gallery_tile.gif) 0 0 no-repeat;
    float:                        left;
}
.slide img {
    margin:                      0 0 0 3px;
}
.slide img.thmb {
    margin:                        10px 0 2px 10px;
    text-align: center;
}
.slide h2, .slide p {
    width:                      112px;
    margin:                     0 0 2px 10px;
    text-align:                 left;
}
.slide h2 {
    font-size: 12px;    
}
.slide p {
    font-size: 11px;
}

/*******************************************************************************
*  CMS toolkit
*******************************************************************************/
#cms-toolbar {    
    float:               left;
    position:            relative;
    display:             block;
    width:               650px;
    height:              34px;    
    margin-bottom :       6px;*/
    background-color:     #FFF;
    color:                 #333;
    font-size:             12px;
    border: 1px solid #FF6600;
    /*background-image:     url(/media/img/bg-cms-toolbar.gif);*/
    clear: right;
}
#cms-toolbar img {    
    position: absolute;
    top: 0;
    left: 0;
    margin: 1px;
}
#cms-toolbar p {    
    position: absolute;
    right: 10px;
    top: 1px;
    font-size:             12px;
}

#cms-toolbar #buttons {
    margin-left: 32px;
    padding: 5px;
}
#cms-toolbar input.button
{
    border: 3px double #FF6600;
    border-top-color: #FF6600;
    border-left-color: #FF6600;
    padding: 0.25em;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cms-toolbar input.button:hover
{
    background-color: #FF6600;
    color:    #FFF;
}
#cms-toolbar input.button:active
{
    border: 3px double #CCCCCC;
    border-top-color: #999999;
    border-left-color: #999999;
}
#cms-toolbar input.button#logout
{
    margin-left: 0.5em;
    border: 3px double #FF0000;
    border-top-color: #FF0000;
    border-left-color: #FF0000;
}
#cms-toolbar input.button#logout:hover
{
    background-color: #FF0000;
}








#cms-pageaction-toolbar {    
    float:               left;
    position:            relative;
    display:             block;
    width:               650px;
    height:              34px;    
    margin-bottom :       6px;*/
    background-color:     #FFF;
    color:                 #333;
    font-size:             12px;
    /*border: 1px solid #FF6600;*/
    /*background-image:     url(/media/img/bg-cms-toolbar.gif);*/
    clear: right;
}
#cms-pageaction-toolbar img {    
    position: absolute;
    top: 0;
    left: 0;
    margin: 1px;
}
#cms-pageaction-toolbar p {    
    position: absolute;
    right: 10px;
    top: 1px;
    font-size:             12px;
}

#cms-pageaction-toolbar #buttons {
    margin-left: 32px;
    padding: 5px;
}
#cms-pageaction-toolbar input.button
{
    border: 3px double #FF6600;
    border-top-color: #FF6600;
    border-left-color: #FF6600;
    padding: 0.25em;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cms-pageaction-toolbar input.button:hover
{
    background-color: #FF6600;
    color:    #FFF;
}
#cms-pageaction-toolbar input.button:active
{
    border: 3px double #CCCCCC;
    border-top-color: #999999;
    border-left-color: #999999;
}



/*******************************************************************************
*  Table for Booking Form
*******************************************************************************/
table#booking-form {
    
}
table#booking-form td,
table#booking-form th
{
    color: black;
    margin: 4px;
    padding: 4px 6px;
    border: 4px solid white;
    background-color: #CEEDFB;
}
table#booking-form td#disclaimer {
    font-size: 90%;
    background-color: #FFFFFF !important;
    border: 2px solid #AAD200;;
}
table#booking-form td#disclaimer a {
    color: blue;
}
table#booking-form td.label {
    width: 160px;
    font-weight: bold;
    vertical-align: top;
}
table#booking-form td.label2 {
    width: 200px;
    font-weight: bold;
    vertical-align: top;
}
table#booking-form td.blank {
    background-color: #FFFFFF;
}
table#booking-form th {
    background-color: #A2DEF8;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 140%;
}

table#booking-form input.button
{
    border: 3px double #FF6600;
    border-top-color: #FF6600;
    border-left-color: #FF6600;
    padding: 0.25em;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
table#booking-form input.button:hover
{
    background-color: #FF6600;
    color:    #FFF;
}
table#booking-form input.button:active
{
    border: 3px double #CCCCCC;
    border-top-color: #999999;
    border-left-color: #999999;
}
table#booking-form input.button#logout
{
    margin-left: 0.5em;
    border: 3px double #FF0000;
    border-top-color: #FF0000;
    border-left-color: #FF0000;
}
table#booking-form input.button#logout:hover
{
    background-color: #FF0000;
}

table#booking-form .select
{
    border: 3px double #FF6600;
    border-top-color: #FF6600;
    border-left-color: #FF6600;
    padding: 0.25em;
    background-color: #FFFFFF;
    color: #333333;
    font-size: 75%;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}









table#booking-form input.text,
table#booking-form input.text-half,
table#booking-form input.text-quarter,
table#booking-form input.text-eighth
{
    background-color: #E6FF82;
    border: 1px solid #CCCCCC;
}
table#booking-form input.text
{
    width: 220px;
}
table#booking-form input.text-half
{
    width: 110px;
}
table#booking-form input.text-quarter {
    width: 55px;
}
table#booking-form input.text-eighth {
    width: 28px;
}




table#booking-form .select
{
    width: 220px;    
}
table#booking-form input.radio
{
    margin-right: 10px;
}
table#booking-form input#btn-enrol
{
    float: right;
}
table#booking-form a#office
{
    color: blue;
}
/*******************************************************************************
*  Table for Questionnaire multiple-choice questions
*******************************************************************************/


table#booking-form table.multiple-choice th,
table#booking-form table.multiple-choice td
{
    background-color: #CEEDFB;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    text-align: center;
    vertical-align: middle;   
}
table#booking-form table.multiple-choice td
{
    font-weight: bold;
    font-size: 100%;
}







table.cms-grid td {
    border: 1px solid #FF6600;
}
table.cms-grid td {
    padding: 4px;
    border: 1px solid #FF6600;
}

.error {
    color: #B32400;
    margin: 2px 0 0 12px;
}

div#crumbtrail {
    color: #666666;
}

.hidden {
    display: none;
}