/************************************************************************
	Title: The Blue Cross Tea Party
	Company: The Blue Cross animal charity
	File: global.css
	
	GLOBAL CSS 
	==========
	
	Provides all global styles for the site which more specific sections 
	can be built on using the layered css technique
	
	Author:		DVA  [www.dva.co.uk] - Dan Viveiros		[danv@dva.co.uk]
                                               Kris Young               [kristophery@dva.co.uk]

	Listing Order:
	==============

	Imports
	Universal
	General Structure / Layout
	Navigation Elements
	Header Elements
	Body Elements
	Footer Elements
	Forms

************************************************************************/

/***********************************************************************
	IMPORTS
************************************************************************/


/***********************************************************************
	UNIVERSAL STYLES
************************************************************************/
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, h7, p, pre, blockquote, ul, ol, dl, address, abbr, input, select, textarea, table, td, th {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

body {
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_body.gif);
	background-position: top center;
	background-repeat: repeat-y;
	background-color: #FF9900;
}

p {
	font-size: 11px;
	line-height: 14px;
	margin-bottom: 10px;
}

#right h1 {
	font-size: 28px;
	color: #003764;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

h1, h2, h3, h4 {
	margin-bottom: 10px;
	font-weight: normal;
	color: #004681;
}

h1 {
	font-size: 20px;
	color: #FFFFFF;
}
h7 {
        color:#FFFFFF;
        font-size: 20px;
}

/***********************************************************************
	GENERAL STRUCTURE/LAYOUT
************************************************************************/
#container {
	width: 780px;
	margin: auto;
}

#header {

}

#header_left {
	height: 157px;
	width: 322px;
	float: left;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_header_left.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#header_left_int {
	height: 157px;
	width: 322px;
	float: left;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_header_left_int.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#header_right {
	height: 157px;
	width: 440px;
	float: left;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_header_right.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#wrapper {

}

#left {
	height: 300px;
	width: 262px;
	float: left;
	padding: 90px 20px 0px 40px;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_left.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#right {
	height: 300px;
	width: 420px;
	padding: 0px 10px 0px 10px;
	float: left;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_right.jpg);
	background-position: top left;
	background-repeat: no-repeat;
}

#title {
	position: relative;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bg_title.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	padding: 40px 40px 0px 40px;
}

#wrapper {
	margin-top: 20px;
	padding: 0px 40px 0px 40px;
}

#content {
	background-color: #FFFFFF;
	padding: 10px 0px 10px 0px;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/divider.gif);
	background-position: top left;
	background-repeat: repeat-y;
	margin-bottom: 20px;
}

#content_full {
	background-color: #FFFFFF;
	padding: 0px 0px 10px 0px;
	margin-bottom: 20px;
}

#content img, content_full img {
	margin: 5px;
}

img {
	margin: 5px;
}

#content_home {
	height: 850px;
}

#content_left {
	width: 390px;
	float: left;
	padding: 10px 20px 10px 10px;
}

#content_right {
	width: 220px;
	float: left;
	padding: 10px 10px 10px 20px;
}

/***********************************************************************
	NAVIGATION
************************************************************************/
ul#nav {
        width:285px;
	font-size: 10px;
	font-weight: bold;
	float: left;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 40px;
}

ul#nav li {
	display: block;
	float: left;
	width: 140px;
	padding: 2px 0px 2px 0px;
}

ul#nav li a {
	color: #004681;
	border-left: 4px solid #FF9900;
	padding-left: 5px;
	text-decoration: none;
}



/***********************************************************************
	HEADER ELEMENTS
************************************************************************/
.bx {
	float: right;
}

#header_left img, #header_left_int img {
	margin: 70px 0px 0px 40px;
}

/***********************************************************************
	BODY ELEMENTS
************************************************************************/

/* home page elements */
.homesq {
	margin-bottom: 15px;
	padding: 10px;
}

.homesq p {
	font-size: 10px;
}

.homesq ul {
	font-size: 10px;
	text-align: right;
	margin-top: 10px;
}

.homesq ul a {
	font-size: 10px;
	text-align: right;
	font-weight: bold;
	margin-top: 10px;
	padding-right: 10px;
}

.white {
        color:#FFFFFF;
}

.pink {
	background-color: #E23690;
	color: #FFFFFF;
}

.pink ul a {
	color: #FFFFFF;
}

.green {
	background-color: #9BCD61;
}

.blue {
	background-color: #08B2EB;
}

.orange {
	background-color: #F69F48;
	color: #FFFFFF;
}

.orange ul a {
	color: #FFFFFF;
}

.purple {
	background-color: #8083BD;
}

/* // home page elements */

.imgcenter {
	margin: auto;
	margin-bottom: 20px;
}

.imgright {
	float: right;
}

.imgleft {
	float: left;
}

#titlesq {
	margin: 40px 0px 15px 0px;
	padding: 10px 250px 10px 10px;
}

#titlesq p {
	font-size: 10px;
}

#titlesq ul {
	font-size: 10px;
	text-align: right;
	margin-top: 10px;
}

#titlesq ul a {
	font-size: 10px;
	text-align: right;
	font-weight: bold;
	margin-top: 10px;
	padding-right: 10px;
}

/* Text formating */
#content p, #content_full p {
	font-size: 11px;
	line-height: 16px;
	margin-bottom: 10px;
}

#content ol, #content_full ol {
	font-size: 11px;
	list-style-position: inside;
	margin-bottom: 20px;
}

#content ul, #content_full ul {
	font-size: 11px;
	margin-bottom: 20px;
}

#content a, #content_full a {
	color: #004681;
}

#content ul li,#content_full ul li {
	padding-left: 18px;
	line-height: 16px;
	background-image: url(http://www.bluecrossteaparty.org.uk/upload/teaparty_home_files/bullet.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin-bottom: 8px; 
}

#content ol li, #content_full ol li {
	margin-bottom: 8px;
	line-height: 16px;
}

/* // Text formating */

div.purple_links a, div.purple_links a u {
	color: #8083BD !important;
	font-weight: bold;
}

div.pink_links a, div.pink_links a u {
	color: #E23690 !important;
	font-weight: bold;
}

div.orange_links a, div.orange_links a u {
	color: #F69F48 !important;
	font-weight: bold;
}

div.green_links a, div.green_links a u {
	color: #9BCD61 !important;
	font-weight: bold;
}

div.blue_links a, div.blue_links a u {
	color: #08B2EB !important;
	font-weight: bold;
}
.clearbar {
	width:700px; 
	height:30px; 
	margin:auto;
	}
.purplebar {
	width:700px; 
	background-color:#8083bd; 
	position:relative;
	}
.pictureframe {
	width:189px;
	height:189px; 
	position:absolute; 
	top:-20px; 
	left:475px; 
	}
.purplebartext {
        width:450px;
        position:absolute;
        top:20px;
        left:20px;
        }
/***********************************************************************
        ELEMENT COLOURS
************************************************************************/

.pink_element {
        width:680px; 
        height:180px; 
        margin:auto;
	background-image: url(http://www.bluecrossteaparty.org.uk/Upload/pink_element.gif);
        }
.green_element {
        width:680px; 
        height:180px; 
        margin:auto;
        background-image: url(http://www.bluecrossteaparty.org.uk/Upload/green_element.gif);
        }
.orange_element {
        width:680px; 
        height:180px; 
        margin:auto;
        background-image: url(http://www.bluecrossteaparty.org.uk/Upload/orange_element.gif);
        }
.blue_element {
        width:680px;
        height:180px;
        margin:auto;
        background-image: url(http://www.bluecrossteaparty.org.uk/Upload/blue_element.gif);
        }
.purple_element {
        width:680px;
        height:180px;
        margin:auto;
        background-image: url(http://www.bluecrossteaparty.org.uk/Upload/purple_element.gif);
        }

/***********************************************************************
        ELEMENT BLOCKS
************************************************************************/

.elementblockone {
        width:400px; 
        height:200px; 
        float:left;
        }

.elementblocktwo {
        width:400px; 
        height:100px; 
        margin-top:50px; 
        margin-bottom:50px; 
        margin-left:10px;
        }

.elementblocktwo_one {
        width:400px;
        height:50px;
	background-image: url(http://www.bluecrossteaparty.org.uk/Upload/purple_banner.jpg);
        }

.elementblocktwo_two {
        width:400px;
        height:50px;
        float:left;
        }

.elementblockthree {
        width:200px; 
        height:200px; 
        float:right;
        }

/***********************************************************************
	HEADER IMAGES
************************************************************************/

.2008_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/2008_banner.jpg);
}
.2007_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/2007_banner.jpg);
}
.about_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/about_banner.jpg);
}
.contact_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/contact_banner.jpg);
}
.copyright_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/copyright_banner.jpg);
}
.downloads_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/downloads_banner.jpg);
}
.HATP_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/HATP_banner.jpg);
}
.ideas_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/ideas_banner.jpg);
}
.news_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/news_banner.jpg);
}
.privacy_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/privacy_banner.jpg);
}
.register_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/register_banner.jpg);
}
.terms_banner {
        width:400px;
        height:50px;
        background-image:url(http://www.bluecrossteaparty.org.uk/Upload/terms_banner.jpg);
}

/***********************************************************************
	FOOTER ELEMENTS
************************************************************************/

#footer {
	width: 750px;
	margin: auto;
	padding: 0px 0px 10px 30px;
}

#footer ul {
	font-size: 10px;
}

#footer ul li {
	display: inline;
	border-right: 1px solid #333333;
	padding: 0px 5px 0px 5px;
}

#footer ul li a {
	color: #333333;
}
/***********************************************************************
	FORMS
************************************************************************/

.ae_form {
	margin: 0;
	padding: 0;
}

form {
	margin: 0 0 0 0;
	width: 675px;
	margin: auto;
	border: 0px solid #E6E6FA;
	padding: 0;
}

.formContainer {
padding: 0;
margin: 0;
}

.infoText {
font-size: 12px;
font-weight: bold;
}

#form_left {
	width: 290px;
	float: left;
}

#form_right {
	width: 290px;
	float: left;
	margin: 0 0 0 30px;
	padding: 0 0 0 30px;
}

label {
margin: 0 0 3px 0;
}

input {
margin-left:0px;
}

.answer label {
        margin:4px;
}

.FormField {
width: auto;
padding: 2px 0 -2px 0;
margin: 2px 0 -8px 0;
border: 0px solid #e6e6fa;
height: auto;
font-size: 12px;
font-weight: normal;

}

.FormField h4 {
	margin: 0;
	padding: 0;
}

.FormField label{
	font-weight:bold;
        margin-top:5px;
        margin-bottom:5px;
}
.formButtons {
	margin: 0;
	padding: 0;
	float: left;
}

.FormField input {
        margin:3px;
}

#FE38 { /* MAKES CHECKBOXES INLINE */
	vertical-align: top;
	display: inline;
}

#FE6, #FE8, #FE39, #FE11, #FE28, #FE32, #FE58, #FE7, #FE9, #FE10, #FE12, #FE18, #FE36, #FE60 { /* DIRTY HACK - each form field had an id, this code is how i specified their widths, as specifiying width on "form input" affected radio buttons, as one radio button didn't have any ID or class, so this was the only way i could work around it. */
    border: 1px solid #E69C00;
	width: 290px;
        margin: 3px;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}