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

/*	CSS Contents:  	Universal YUI (Yahoo User Interface):	Reset,base,fonts.
	Redefine fonts
	Navigation styles & h-link 	
	Bits:    (.note	.pullquote - not defined)     .clear     .clearfix     (header-prop)
    Layout:  body   container   header-image	header-text   top-nav   content & bits  bot-nav	 foot  */
/* --------------------------------------------------------------------------------------------------- */

/*  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 - modify below rule-set*/

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;}
legend{color:#000;} /*because legend doesn't inherit in IE */

/* modifications to colours */
html{color:#336;background:#F9F9F9;}/* Dark bluey grey on soft white. Most hex colors multiples of 3 */
legend{color:#336;}


/* Base Font Styles as per Yahoo! YUI - 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%;}



/* modifications to base fonts */
body {font:verdana;}
h1,h2,h3,h4, {font-family:"Trebuchet MS",Helvetica;color:#36f;} /* curly 'g' and soft blue */


/* Font Styles reintroduced as per Yahoo! YUI & modified here or by repeating below the YUI section */
h1 {margin:1em 0;	/* top & bottom margin based on font size */}
h2,h3 	 {font-style: italic;margin:1.5em 0 1em 0;	/* top & bottom margin based on font size */}
h1,h2,h3,h4,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 OL's LIs generated numbers*/
ul li {list-style: disc outside;}	/* giving UL's LIs generated disc markers */
dl dd {margin-left:1em;}	/*indenting the definition*/
th,td {border:1px solid #000;	padding:.5em;	/*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:1em;	/*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;}

/*modifications to yui font styles*/
h1 {font-size:277%;	/* for setting approx 36px */
	margin: 0;color:#f90;}					/* title - orange */
h2 {font-size:138.5%;} /* for setting 18px */	/* main header  */
h3 {font-size:123.1%;} /* for setting 16px */	/* sub header & used for navigation headers */
h4 {font-size:108%;} /* for setting 14px */	
h5 {font-size:100%;} /* for setting 13px ie standard */	/* Used for navigation boxes and keyword lists */
h6 {font-size:77%;} /* for setting 10px */ /* Used for sub lists */
h2,h3 {margin:0.5em 0;	/* top & bottom margin based on font size */}
h2,h3 {color: #36F;} /* light blue */ 
h4,h5,h6 {color: #336;} /* normal text colour */ 
abbr,acronym {border-bottom:1px solid #CCF;	cursor:help; /*indicating to users that more info is available */} 
p {margin-bottom:0.875em;	/* so things don't run into each other*/}
li {margin-bottom:0.5em;	/* to seperate list items*/}

#content p {margin-bottom: 10px; }
#header-text p {margin: 0;font-weight: bold; font-size:153.9%; /* for setting 20px */ font-family:"Trebuchet MS",Helvetica;color:#36f;} /* curly 'g' font and soft blue of headings */
#top-nav h5{ height:2em;} /* top navigation box text - holds box open */
#bot-nav h5{ height:2em;} /* bottom navigation box text - ditto */












/* ----------------------- Navigation -------------------------- */
/* :-moz-any-link:hover {outline: none;} */ /* gets rid of dotted line around links when you hove in firefox or mozilla browsers */
/* :-moz-any-link:focus {outline: none;} */ /* ditto */
a, a:link  {color: #36F;} /* light blue */ 
a:visited  {color: #00f;} /* blue */
a:hover, a:focus  {color: #36f; text-decoration:none;} /* light blue and underline disappears on hover */
a:active {color: #f60;} /* orange */
#top-nav ul{padding:0;margin:0;;height:2em;} /* keeps shape of box */
#bot-nav ul{padding:0;margin:0;;height:2em;} /* ditto not sure if needed */
#top-nav ul li{list-style:none;} /* no underline in navigation boxes */
#bot-nav ul li{list-style:none;} /* no underline in navigation boxes */




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

-------------------------- h-link - plain horisontal links  ------------------------- */
.h-link li {float:left; margin: 0 2em 0 0em; background:none; padding:0}
.h-link li a {text-decoration:none; width:4em; height:2em; text-align:center; color:#336; /* normal text colour */ line-height:2em}
.h-link li a:visited {color:#336; } /* normal text colour */ 
.h-link li a:hover, .h-link li a:focus { color:#36f; text-decoration:underline} /* light blue */ 
.h-link li a:active { color:#f60; /* orange */ text-decoration:underline}
/* Hide from IE5-Mac \*/
.h-link li a {float: none}
/* End hide */
/* ----------------------  End of links  -----------------------  */







/* ----------- Bits: 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 { 
   text-align: center; /* needed to center the container in IE5.x 
   because it doesn't like 'margin: 0 auto' */  
   /* background: #bdf;  pale blue  
   background: #F8E9DA;  Salmon */
   /* background: url(images/oak-leaves-autumn.jpg) top left fixed; */

/* Background gradient from http://gradients.glrzad.com/ dark grey to salmon */

background-image: linear-gradient(top, #EDE1D3 1%, #D0C8C0 20%);
background-image: -o-linear-gradient(top, #EDE1D3 1%, #D0C8C0 20%);
background-image: -moz-linear-gradient(top, #EDE1D3 1%, #D0C8C0 20%);
background-image: -webkit-linear-gradient(top, #EDE1D3 1%, #D0C8C0 20%);
background-image: -ms-linear-gradient(top, #EDE1D3 1%, #D0C8C0 20%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.01, #EDE1D3),
	color-stop(0.2, #D0C8C0)
);

} 


/* Next 2 rules for variable width container */

#container {background: #f9f9f9 url(images/page-bg.jpg); /* paper look over light grey */
   border:  solid #69c 3px;
   text-align: left; /* resets the text alignment from body text-align centre */ 
   font-size: 1em;
   margin:  0 auto;
   padding: 20px;
   padding-bottom: 50px
   overflow: hidden;
   min-width: 400px; /* min width now 400, not 330 to preserve shape of titles. cannot get rid of need to scroll sideways in mobile browsers unles redesign header area, probably with a 2x1 table*/
   max-width: 55em; /* IE 5 and 6 do not support min & max width. Therefore next rule */
}


     /* Following rule is for IE 5&6 
      Width initially set at 55em fixed width ('em' for text resizing) if scripts blocked
      script then sets max and min width */	  
* html #container { width:55em;
   width:expression(((document.compatMode && 
   document.compatMode=='CSS1Compat') ? 
   document.documentElement.clientWidth : 
   document.body.clientWidth) 
   > 750 ? "750px" : (((document.compatMode && 
   document.compatMode=='CSS1Compat') ? 
   document.documentElement.clientWidth : 
   document.body.clientWidth) < 400 ? "400px" : "auto"));
}










#header-image {
   float:left;
   width:162px;
   background-color: transparent;
}  
#header-text {
   text-align: center;
   padding: 0 30px 30px 200px;
   padding: 0 0px 30px 175px;
}
#top-nav { /* top navigation box*/
   margin:10px 0;
   padding: 0 10px; 
   border: solid 1px #69c;  
} 
#content { 
   margin:10px 0;
   padding:1em 10px;
   border: solid 1px #69c;  
}
#content p   {text-align:justify;}
#content img {border:10px solid #F8F8F8;}



#bot-nav { /* bottom navigation box */
   margin:10px 0;
   padding: 0 10px; 
   border: solid 1px #69c;  
   } 
#foot { /* copyright at end */
   margin:10px 0 20px 0;
   padding: 0 ; 
   text-align:  center;
   }





/* Styles */

.style1 { /* h2 style within p */
	color: #36F;
	font-weight: bold;
	font-style: italic;
	font-size:138.5%;
	font-family:"Trebuchet MS",Helvetica;
}

.style2 { /* light blue bold italic */
	color: #36F;
	font-weight: bold;
	font-style: em;
}
.style3 { /* h3 style within p */
	color: #36F;
	font-weight: bold; 
 	font-size:123.1%;
 }
.style4 { /* orange */
	color: #F90


}
.style5 { /* h3 style within p - orange */
	color: #F90;
	font-weight: bold; 
 	font-size:123.1%;
}