/* Handheld CSS for www.excel-yourself.com - c David Owen 2007-2009 */

/*	CSS Contents:  
	fonts
	navigation    h-link    h-button	button    v-list    v-list-sub    v-button    v-button-sub	
	bits:    .note	.pullquote     .clear     .clearfix     (header-prop)
    Layout    body    container    header area & search    intro    navigation    content    end bits
	styles
*/


/* ----- YUI font size test - for reference only ----------------------- */

.size10 {font-size:77%;} /* for setting 10px */
.size11 {font-size:85%;} /* for setting 11px */
.size12 {font-size:93%;} /* for setting 12px */
.size13 {font-size:100%;} /* for setting 13px */
.size14 {font-size:108%;} /* for setting 14px */
.size15 {font-size:116%;} /* for setting 15px */
.size16 {font-size:123.1%;} /* for setting 16px */
.size17 {font-size:131%;} /* for setting 17px */
.size18 {font-size:138.5%;} /* for setting 18px */
.size19 {font-size:146.5%;} /* for setting 19px */
.size20 {font-size:153.9%;} /* for setting 20px */
.size21 {font-size:161.6%;} /* for setting 21px */
.size22 {font-size:167%;} /* for setting 22px */
.size23 {font-size:174%;} /* for setting 23px */
.size24 {font-size:182%;} /* for setting 24px */
.size25 {font-size:189%;} /* for setting 25px */
.size26 {font-size:197%;} /* for setting 26px */

/* ==== End of Yahoo YUI font size test - BSD Licensed Copyrighted (c) ==== */


/* ===================== Site Styles Start Here ======================== */

/* Whole site: Dark bluey grey on sft white */
html{color:#336;background:#F9F9F9;}
legend{color:#336;}

body {font:verdana,arial,helvetica,clean,sans-serif;}
h1,h2,h3,h4/*,h5,h6*/{font-family:"Trebuchet MS",Helvetica,sans-serif;color:#36f;} /* curly 'g' and soft light blue */

h1 {font-size:153.9%;} /* for setting 20px */	/* main header  */
h2 {font-size:123.1%;} /* for setting 16px */	/*sub header*/
h3 {font-size:108%;} /* for setting 14px */	/* sub sub header */
h4 {font-size:100%;} /* for setting 13px */	/* text size sub header */
h5 {font-size:100%;} /* for setting 13px */	/* Used for normal text eg locations */
h6 {font-size:77%;} /* for setting 10px */ /* Used for small font eg keyword lists */
small {font-size:85%;} /* for setting 11px */

h1,h2,h3,h4,
.style1,.style2,.style3,.style4 {
	margin:.5em 0 .2em 0;
	line-height: 1.0;}

h5,h6{
	font-weight:normal;
}
p,h5,style5{margin-bottom: 0.5em; }
	
abbr,acronym {border-bottom:1px solid #CCF;	cursor:help;
	/* More info available - is now solid and normal text colour */} 


#header-text p {margin:0;font-weight:bold;font-size:100%; /* for setting 13px */ color:#36f;} /* soft light blue of headings */
#header-text .style1 {font-size:153.9%; /*approx 20px*/ margin:0;color:#f90;} /*title light orange*/
#header-text .size15 {margin: 0;font-weight: bold; font-size:100%; /* for setting 15px in normal header but 12px in mobile header */ color:#36f;} /* soft light blue of headings */

#search .style5{ height:2em;}

	
/* ============================= Navigation ============================ */

/* Get rid of the dotted lines around links in Firefox and Mozilla */
:-moz-any-link:hover {outline: none;}
:-moz-any-link:focus {outline: none;}

/* -------------------------- basic meta states ----------------------- */

a, a:link  {color: #00f;} /* Dark blue */
a:visited  {color: #36f;} /* Light blue */
a:hover, a:focus  {color: #36f; text-decoration:none;}
a:active {color: #f60;} /* dark orange */
#content a:focus { outline: thin solid #36f;}
									
/* ----------------- Navigation divisions and styles ------------------- */

#search ul{padding:0;margin:0;height:2em;}
#navigation ul{padding:0;margin:0;}
#footer ul{padding:0;margin:0;height:2em;}

#search ul li{list-style:none;}
#navigation ul li{list-style:none;}
#footer ul li{list-style:none;}

#navigation a, #navigation a:link{ color:#336; } /* Normal colour */
#navigation a:visited{ color:#88B; } /* Light grey */
#navigation .sister a:visited {color:#336;} /* Restores normal colour on sister after visited */
#navigation a:hover, #navigation a:focus{ color:#36F;} /* light blue */
#navigation .sister a:hover, #navigation .sister a:focus{ color:#36F;} /* light blue */
#navigation a:active{ color:#F60;}  /* dark orange */
#navigation .sister a:active{ color:#F60;} /* dark orange */

/* ---- Vertical navigation meta state borders colours ----------------  */

.v-link li a:focus, .v-link-sub li a:focus {outline:thin solid #36f;}

.v-button li a:hover, .v-button li a:focus, 
.v-button-sub li a:hover, .v-button-sub li a:focus, 
.sister li a:hover, .sister li a:focus,
.ext-link li a:hover, .ext-link li a:focus {border:1px solid #36F;} /*Light blue border on hover*/

#navigation small 
{ display:block; color:#336; margin:0.15em 0 0.25em 1em; padding:0 } /*Small: Normal text colour, Indented*/
.sister li a small,
	.sister li a:link small,	
	.sister li a:visited small,
	.sister li a:hover small,
	.sister li a:focus small,
	.sister li a:active small,
.ext-link li a small,
	.ext-link li a:link small,	
	.ext-link li a:visited small,
	.ext-link li a:hover small,
	.ext-link li a:focus small,
	.ext-link li a:active small
{ display:block; color:#336; margin:0 0 0 1em; padding:0 } /*Small: Normal text colour, Indented*/

.sister li a:visited small, .ext-link li a:visited small { color:#88B; } /* light grey */

/* --------------------- Navigation layouts ---------------------------- */

/* -------------------- Head buttons and text layout ------------------- */

.bold-head { /* h2 style within navigation */
	color: #36F;
	font-weight: bold; 
 	font-size:123.1%;
 	font-family:"Trebuchet MS",Helvetica,sans-serif;}
	
#navigation .bold-head	{ /* Bold header button layout */
	margin:0 0 0 0; padding:0 0 0 0.4em; 
	background:#fff url(images/css-nav.gif) repeat-x bottom left; 
	display:block; height:2em; line-height:2em; border: 1px solid #89c;}
						
#navigation .light-head	{ /* Light header button layout */
	margin:0 0 0 0; padding:0 0 0 0.4em; 
	background:#fff url(images/css-nav.gif) repeat-x bottom left; 
	display:block; height:2em; line-height:2em; border: 1px solid #CCF;}

#navigation .norm 		{ /* Normal non link text within navigation. Normal text colour */
	padding:0;
	display:block;
	color:#336;
	margin-top: 0.3em;
	margin-right: 0;
	margin-bottom: 0.2em;
	margin-left: 0.4em;}

#navigation small		{ /* Small text within navigation. Normal text colour, Indented */
	margin:0.2em 0 0.25em 1em; padding:0; 
	display:block; color:#336;  } 


/* ---------------- Web links and buttons from ----------------------------
http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml*/

/* ------------------ h-link - horisontal plain links  ------------------- */

.h-link li {float:left; margin: 0 1em 0 0; background:none; padding:0}
.h-link li a {text-decoration:none; height:2em; text-align:center; color:#336; line-height:2em;
				width:5em;}
.h-link li a:visited {color:#336; }
.h-link li a:hover, .h-link li a:focus { color:#36f; text-decoration:underline}
.h-link li a:active { color:#f60; text-decoration:underline}

/* Hide from IE5-Mac \*/
.h-link li a {float: none}
/* End hide */

/* ----------------- h-button - horisontal buttons ----------------------  */

.h-button li{list-style:none;}
.h-button {text-align:center;}
.h-button ul {list-style:none; padding:0; margin:0}
.h-button li {float:left; margin:0 0 0 0; background:none; padding:0}
.h-button li a {color:#336; text-decoration:none; float:left; 
				background:#fcfcfc url(images/css-nav.gif) repeat-x bottom left; 
				display:block; height:2em; border: 1px solid #CCF; 
				text-align:center; line-height:2em;
				width:5em;}

.h-button li a:visited{color:#336; }
.h-button li a:hover, .h-button li a:focus{ color:#36f;}
.h-button li a:active{ color:#f60; }

/* Hide from IE5-Mac \*/
.h-button li a {float: none}
/* End hide */

/* ----------------- v-link - vertical plain links  --------------------- */
/*
.v-link {width:100%}
.v-link ul { margin:0; padding:0; list-style:none}
.v-link li { margin:0.2em 0 0 0.4em; padding:0; background:none}
.v-link li a {text-decoration:none; display:block; width:100%; border:none; }

/* ----------------- v-link-sub - indented vertical plain links  -------  */
/*
.v-link-sub {width:100%}
.v-link-sub ul { margin:0; padding:0; list-style:none}
.v-link-sub li { margin:0.2em 0 0 1.4em; padding:0; background:none}
.v-link-sub li a {text-decoration:none; display:block; width:100%; border:none; }

/* ----------------------  v-button - vertical buttons  -------------------  */
/*
.v-button {width:100%}
.v-button ul { margin:0 0 0 0; padding:0; list-style:none}
.v-button li { margin:0 0 0 0; padding:0; background:none}
.v-button li a { padding:0 0 0 0.4em; text-decoration:none; 
				background:#fff url(images/css-nav.gif) repeat-x bottom left; 
				display:block; height:2em; border: 1px solid #CCF; line-height:2em;}


/* --------------- v-button-sub - indented vertical buttons --------------  */
/*
.v-button-sub {width:100%}
.v-button-sub ul { margin:0; padding:0; list-style:none}
.v-button-sub li { margin:0 0 0 1em; padding:0; background:none}
.v-button-sub li a { padding:0 0 0 0.4em; text-decoration:none; background:#fff url(images/css-nav.gif) repeat-x bottom left; display:block; height:2em; border: 1px solid #CCF; line-height:2em}

/* ---- sister - large vert buttons with sub text for sister sites -------- */
/*
.sister {width:100%}
.sister ul { margin:0; padding:0; list-style:none}
.sister li { margin:0 0 0 0; padding:0; background:none}
.sister li a { padding:0.4em 0 0 0.4em; text-decoration:none; 
				background:#fcfcfc url(images/css-nav.gif) repeat-x bottom left; 
				display:block;/*height:4em;*/ border: 1px solid #CCF; }

/* ----------------------  ext-link - external links  -----------------------  */
/*
.ext-link {width:100%}
.ext-link ul { margin:0; padding:0; list-style:none}
.ext-link li { margin:0 0 0 0; padding:0; background:none}
.ext-link li a { padding:0.4em 0 0 0.4em; text-decoration:none; 
				display:block; border:none;  border: 1px solid #CCF; }

*/
/* =============================End of Navigation ============================ */


/* -------------- Prop and Clear Floats, 1 simple, next 2 rules combined ----------------- */

.prop-end {
    height:2000px;
    width:1px;
    float:right;
} 

.clear {clear:both; height:1px; overflow:hidden;}
 
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ========================== Layout ========================== */

body { 
   position: relative;
   text-align: center; /* needed to center the container in IE5.x 
   because it doesn't like 'margin: 0 auto' */  
   background: #bdf; /* pale blue */
   margin: 0; padding: 0;
/*   width:228px; */
}
#topspace{
   display:none;
}  

/* ---- Variable width container - 98% to allow for scroll bar ---- */

#container {background: #f9f9f9 url(images/page-bg.jpg);
   text-align: left; /* resets the text alignment from body text-align centre */ 
   font-size: 0.8em; /* reduced text size for handheld */
   margin:  0 auto;
   padding: 0.2em;
   overflow: hidden;
 /*  width: 97%; */
}
/* ------------------- Header & search sections -------------- */

#header-image-l { /* For 'Couple on beach' */
   display:none;
}  
#header-image-r { /* For portrait */
   display:none;
}  
#header-image-hand-l { /* For 'Couple on beach' */
   float:left;
   width:53px;
   background-color: transparent;
   display:block;
}  
#header-image-hand-r { /* For portrait */
   float:right;
   width:53px;
   background-color: transparent;
   display:block;
}  
#header-text {
	text-align: center;
	padding-top:	0;
	padding-right:	0;
	padding-bottom:	0.25em;
	padding-left:	0;
}
#search { 
	border: solid 1px #69c;  
	padding: 0 0.5em; 
	margin:0.5em 0;
} 
/* ------------------- Intro, navigation & content -------------- */

#intro { 
   margin:0.5em 0;
   padding:0.5em; 
   border: solid 1px #69c;  
} 
#navigation {
   display:none;
}
#content { 
   margin:0.5em 0;
   padding:0.5em;
   border: solid 1px #69c;  
}
/* ----------------- -- End sections ----------------------- */
#footer { 
   margin:0.5em 0;
   padding: 0 ; 
   border: solid 1px #69c;  
/* text-align:  right; */
/* border: solid 1px #69c; */
   } 
#foot { 
   margin:0.5em 0;
   padding: 0 ; 
   text-align:  center;
   /*border: solid 1px #69c;*/
}
#subspace{
   display:none;
}  


/* ======================== Styles ========================== */

.style1 { /* h1 style */
	color: #36F;
	font-weight: bold;
	font-size:153.9%; /* for setting 20px */
	font-family:"Trebuchet MS",Helvetica,sans-serif;
	margin:1.5em 0 0 0;
}
.style2 { /* h2 sub head style */
	color: #36F;
	font-weight: bold;
	font-size:123.1%; /* for setting 16px */
	font-family:"Trebuchet MS",Helvetica,sans-serif;
	margin:1.5em 0 .2em 0;
	line-height: 1.2;
}
.style3 { /* h3 sub sub head style */
	color: #36F;
	font-weight: bold;
	font-size:108; /* for setting 14px */
	font-family:"Trebuchet MS",Helvetica,sans-serif;
	margin:1.5em 0 .2em 0;
	line-height: 1.2;
}
.style4 { /* h4 text size 13px sub head style */
	color: #36F;
	font-weight: bold;
	font-size:100; /* for setting normal 1em at 13px */
	font-family:"Trebuchet MS",Helvetica,sans-serif;
	margin:1.5em 0 .2em 0;
	line-height: 1.2;
}
.style5 { /* Light blue bold */
	color: #36f; 
	font-weight: bold; 
}
.style6 { 
	font-size:77%; /* for setting 10px */
}


.style7 { /* Dark blue bold */
	color: #00f; 
	font-weight: bold; 
}
.style8 { /* Dark orange bold */
	color: #f60; 
	font-weight: bold; 
}