/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ----- template ------------------------------------------------------------------------------------- */
/* ----- ABSTRACT ------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */



img {
	vertical-align:text-bottom;
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px 15px 0px 15px;
	
}

/*used for images when do not want a border*/
.borderless{
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border-bottom:none;
}

/*used for for images that are links, to remove underline
DO NOT APPLY TO THE IMAGE DIRECTLY,
SURROUND THE IMAGE WITH A DIV WITH THIS CLASS, AROUND THAT IS THE ANCHOR*/
.no-underline{
}
.no-underline a:link{
	border-bottom:0px black solid;
}
.no-underline a:hover{
	background-color:none;/*this does not work because the a: background still shows, not a problem if image is opaque*/
}




body{
	background-image:url("i/x/background_white_wall.png");
	background-attachment:fixed;
	background-color:none;
	text-align:left;
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

.header-container {
	position:fixed;
	width:280px;
	height:100%;
	top:0px;
	/*background-image:url("i/x/bg02.gif");*/
	background-color:#112258;
	opacity:1;
	z-index:2;
	} /*WITHOUT CONTAINER, CAN BE PROBLEMS CENTRALISING HEADER*/
.header {
	width:100%;
	top:0px;
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
.menu{
	border:0px solid;
	text-align:right;
}

#button_highlight
{
	position:absolute;
	width:0px;
	height:0px;
	left:255px;
	top:0px;
	opacity:1;
}

.content-container {
	width:100%;
} /*OPTIONAL, ENABLES VARYING BACKGROUND COLOURS/IMAGES*/
				   /*EXAMPLE, IN 'CONTENT-CONTAINER' TAG style="background:green;"*/
.content {
	overflow:hidden;/*without this, cannot set background colour*/
	background:#e3eaf5;/*IF CHANGE, ALSO CHANGE HOVER COLOUR AND ANY OTHERS*/
	width:750px;
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px auto auto 280px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* ----- template ------------------------------------------------------------------------------------- */
/* ----- FONTS ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

em{
	font-style:italic;
}

bold{
	font-weight:bold;
}

em_extra{
	font-weight:bold;
	color:#1283ae;
}

h1{
	font-family:arial;
	font-size:30px;
	color:#202d64;
	font-weight:normal;
}
h2{
	font-family:arial;
	font-size:25px;
	color:#202d64;
	font-weight:normal;
}

.dark_left, .dark_center, .dark_right , .dark_borderless{
	font-family:VERDANA, arial;
	font-size:14px;
	color:#112258;
	border:0px 0px 0px 0px;
	padding:30px 30px 30px 30px;
	margin:0px 0px 0px 0px;
	font-weight:normal;
	line-height:145%
}
.dark_left {
	text-align:left;
}
.dark_center {
	text-align:center;
}
.dark_right {
	text-align:right;
}
.dark_borderless{
	vertical-align: text-top;
	font-size:13.5px;
	text-align:left;
	padding:0px 0px 0px 0px;
}

.white_left, .white_center, .white_right {
	font-family:chantilly-light, georgia, times, serif;
	font-size:16px;
	color:white;
	border:0px 0px 0px 0px;
	padding:20px 20px 20px 20px;
	margin:0px 0px 0px 0px;
}
.white_left {
	text-align:left;
}
.white_center {
	text-align:center;
}
.white_right {
	text-align:right;
}
A:link {
	color:#112258;
	background-color:none;
	text-decoration:none;
	border-bottom:1px black dotted;
}
A:visited {
	color:#112258;
	background-color:#1283ae;
	text-decoration:none;
	border-bottom:none;
}
A:active {
	color:#112258;
	background-color:#1283ae;
	text-decoration:none;
	border-bottom:none;
}
A:hover {
	color:#e3eaf5;
	background-color:#1283ae;
	text-decoration:none;
	border-bottom: none;
}

.error {
	font-family:arial;
	font-size:0.6em;
	font-weight:bold;
	color:#400a1c;
	border:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	float:right;
    clear:both;
}

.map{
	width:200px;
	height:200px;
	background-color:red;
}

/* ---------------------------------------------------------------------------------------------------- */
/* ----- template ------------------------------------------------------------------------------------- */
/* ----- MAGAZINE STYLE LAYOUT------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

.text_line {
	clear:both;
	margin-bottom:2px;
}

.text_box {
	float:left;
	border-style:none;
	border-width:0px;
}

.thumbnail {
	float:left;
	margin:0px;
	vertical-align:text-bottom;
}

/* ---------------------------------------------------------------------------------------------------- */
/* ----- template ------------------------------------------------------------------------------------- */
/* ----- FORM ----------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

form
{
	display:inline;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border:none;
	border-radius:none;
	width:500px;
}
fieldset /*remove border around form*/
{
	border:none;
}
/* INPUT */
input
{
	display:inline;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border:2px #112258;
	border-style:solid solid solid solid;
	width:400px;
	float:right;
    clear:both;
	font:11px sans-serif;
	font-weight:bold;
	background:#e3eaf5;
	color:#112258;
}
input:hover
{
	border:2px #1283ae;
	border-style:solid solid solid solid;
}
input:focus
{
	border:2px #1283ae;
	border-style:solid solid solid solid;
	background:#1283ae;
	color:white;
	outline:none;/*remove chrome highlight*/
}
/* TEXTAREA */
textarea
{
	display:inline;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border:2px #112258;
	border-style:solid solid solid solid;
	height:200px;
	width:400px;
	float:right;
    clear:both;
	font:11px sans-serif;
	font-weight:bold;
	background:#e3eaf5;
	color:#112258;
	resize:none;/*otherwise can resize horz too on chrome*/
}
textarea:hover
{
	border:2px #1283ae;
	border-style:solid solid solid solid;
}
textarea:focus
{
	border:2px #1283ae;
	border-style:solid solid solid solid;
	background:#1283ae;
	color:white;
	outline:none;/*remove chrome highlight*/
}
/* BUTTON */
input.button
{
	display:inline;
	margin:20px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	border:0px;
	border-style:solid solid solid solid;
	width:405px;
	height:30px;
	float:right;	
    clear:both;
	background:#112258;
	color:white;
}
input.button:hover
{
	display:inline;
	border:0px;
	border-style:solid solid solid solid;
	width:405px;
	background:#1283ae;
	color:white;
}

/* ---------------------------------------------------------------------------------------------------- */
/* ----- template ------------------------------------------------------------------------------------- */
/* ----- JAVASCRIPT OR JQUERY ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

/*class applied to all buttons, for general formatting*/
.button_all
{
	float:center;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

/*id applied to individual button*/
#button_welcome
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_welcome.png") no-repeat 0 0;
}
#button_welcome:hover
{
	background-position:0 -30px;
}
#button_howiwork
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_howiwork.png") no-repeat 0 0;
}
#button_howiwork:hover
{
	background-position:0 -30px;
}
#button_aboutme
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_aboutme.png") no-repeat 0 0;
}
#button_aboutme:hover
{
	background-position:0 -30px;
}
#button_location
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_location.png") no-repeat 0 0;
}
#button_location:hover
{
	background-position:0 -30px;
}
#button_contact
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_contact.png") no-repeat 0 0;
}
#button_contact:hover
{
	background-position:0 -30px;
}

/*the location menu buttons*/
#button_location_wimbledon
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_location_wimbledon.png") no-repeat 0 0;
}
#button_location_wimbledon:hover
{
	background-position:0 -30px;
}
#button_location_central
{
	width:330px;
	height:30px;
	border:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background:url("i/x/button_location_central.png") no-repeat 0 0;
}
#button_location_central:hover
{
	background-position:0 -30px;
}