/* CSS for www.stay-slim-for-good.com - c David Owen 2007-2008 */

/* Source is http://www.dave-woods.co.uk/wp-content/uploads/2008/01/min-max-width.html */


/*	CSS Contents:  
	Universal YUI:	Reset,base,fonts.
	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
*/

/* ====================== Yahoo Universal Interface (YUI) Style Reset ====================== */
/*
Reset, Base styles and Font styles as per Yahoo! YUI: 
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.4.1 */

/* --------------- Basic Reset - Normalise all values --------------- */

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}

/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*because legend doesn't inherit in IE */
legend{color:#000;}


/* ----- YUI Rebuild Base Font Styles - modify below the rule-set ----- */

/* Percents could work for IE, but for backCompat purposes, we are using keywords.
	x-small is for IE6/7 quirks mode. */
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
/* Bump up IE to get to 13px equivalent */
pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}

h1,h2,h3,h4,/*h5,h6,*/strong {font-weight:bold; /*bringing boldness back to headers and the strong element*/}
abbr,acronym {border-bottom:1px dotted #000;	cursor:help;
	/*indicating to users that more info is available */} 
em {font-style:italic;	/*bringing italics back to the em element*/}
blockquote,ul,ol,dl {margin:1em;}	/*giving blockquotes and lists room to breath*/
ol,ul,dl {margin-left:2em;}	/*bringing lists on to the page with breathing room */
ol li {list-style: decimal outside;}	/*giving ordered list's list items numbers*/
ul li {list-style: disc outside;}	/* giving unordered list's list items disc markers */
dl dd {margin-left:1em;}	/*indenting the definition*/
/*th,td {border:1px solid #336;	padding:.5em; */	/* dark grey borders and padding to make the table readable*/}
th {font-weight:bold;	text-align:center;	/*distinguishing table headers from data cells*/}
caption {margin-bottom:.5em;	/*coordinated margin to match cell's padding*/
		text-align:center;	/*centered so it doesn't blend in to other content*/}
p,fieldset,table,pre {margin-bottom:0.5em;	/* so things don't run into each other*/}
/* setting a consistent width, 160px; 
   control of type=file still not possible */
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}

/* ----- 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 Reset - BSD Licensed Copyrighted (c) code ==== */


/* ===================== 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:.2em 0 .2em 0;
	line-height: 1.0;}
	
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:153.9%; /* for setting 20px */ color:#36f;} /* soft light blue of headings */
#header-text .style1 {font-size:277%; /*approx 36px*/ margin:0;color:#f90;} /*title light orange*/
#header-text .size15 {margin: 0;font-weight: bold; font-size:116%; /* for setting 15px in 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 */
   background: url(images/Beach-fr-kevin.JPG) top center fixed; 
   width:100%;
}
body {position: relative; margin: 0; padding: 0;}

#topspace {
      display:block;
}

/* ---- Variable width container - Max 60em (or 780px = 60em x 13px) Min 330px ---- */

#container {background: #f9f9f9 url(images/page-bg.jpg);
   border:  solid #69c 3px;
   text-align: left; /* resets the text alignment from body text-align centre */ 
   font-size: 1em;
   margin:  0 auto;
   padding: 1.5em;
   padding-bottom: 50px
   overflow: hidden;
   min-width: 330px;
   max-width: 60em;
}
     /* Following rule is for IE 5&6 
      Width initially set at 60em fixed width if scripts blocked.
      Script then sets max 780px (60em x 13px) and min 330px width */
* html #container { width:60em;
   width:expression(((document.compatMode && 
   document.compatMode=='CSS1Compat') ? 
   document.documentElement.clientWidth : 
   document.body.clientWidth) 
   > 780 ? "780px" : (((document.compatMode && 
   document.compatMode=='CSS1Compat') ? 
   document.documentElement.clientWidth : 
   document.body.clientWidth) < 330 ? "330px" : "auto"));
}
/* ------------------- Header & search sections -------------- */

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

#intro { border: solid 1px #69c;  
   padding:0.7em; 
   margin:0.7em 0;
} 
#navigation {
   display:block;
   float: right;
   width: 15em;
   margin: 0 0 0 0;
   padding:0 0 0 0;
   border: solid 1px #69C;  
   /*background-color: #F0F6FC;*/
}
#content { 
   margin:0.7em 16em 1.5em 0;
   padding:0.7em;
   border: solid 1px #69c;  
}
/* ----------------- -- End sections ----------------------- */
#footer { 
   margin:0.7em 0;
/* margin:0.7em 16em 0 0; */
   padding:0 0.7em;
   border: solid 1px #69c;  
/* text-align:  right; */
   } 
#foot { 
   margin:0.7em 0 1.5em 0;
   padding: 0 ; 
   text-align:  center;
   /*border: solid 1px #69c;*/
   }
#subspace{
      display:block;
}

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

.style1 { /* h1 style */
	color: #36F;
	font-weight: bold;
	font-size:153.9%; /* for setting 20px */
	font-family:"Trebuchet MS",Helvetica,sans-serif;
	margin:.5em 0 .2em 0;
	line-height: 1.2;
}
.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:.5em 0 .2em 0;
}
.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:.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:.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; 
}