/*body{
background-color: #666666;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size:100%;
}
*/
#wrapper{
width: 834px;
background-color: #FFFFCC;
margin: 10px auto;
border: 1px solid #000000;
text-align: left;
background-image:url(file:///C|/websites/sfoot.co.uk/tutorial_images/wrapper_bg.gif);
background-repeat:repeat-y;
}

#banner{
	height: 274px;
	background-image: url(../images/ComboWWW.jpg);
	background-repeat: no-repeat;
	width: 834px;
	float: left;
	background-position: center;
}



#leftcol { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	width: 400px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 120px;
	margin-left: 7px; /*creates a margin on the left to move the div away from the wrapper's edge */
	/*	margin-top: 25px; /* sets the path to the bg image */
	background-repeat: no-repeat; /* prevents the bg image from repeating, no need to position it as top left is the default and that is where we want the image to show */
	margin-top: 10px;
/*	padding-top: 35px; /* sets a padding to the top of the div to allow the bg image to show above the leftcol divs contents */
}
/*
#leftcol #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
/*	width: 169px; /* sets the path to the bg image */
/*	background-repeat: no-repeat; /* prevents the bg image from repeating */
/*	background-position: bottom left; /*uses keywords to place the image at the bottom left of the div */
/*	padding-bottom: 100px; /* gives our background image room to display */
/*}

#leftcol #navigation ul {
	border-top: 1px solid #000; /* sets a border to the top of the ul */
/*  	border-bottom: 1px solid #000; /* sets a border to the bottom of the ul */
/*	list-style-type: none; /* removes the bullets from our list navigation */
/*	margin: 0; /* zeroes off the margins */
/*	padding: 0; /* zeroes off the padding */
/*	font-size: 75%; /* scales the font to 75% of the body font declaration*/
/*}

#leftcol #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
/*	padding: 0; /* zeroes off the padding */
/*	margin: 0; /* zeroes off the margins */
/*	margin: /* 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
/*	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
/*	background-image: url(file:///C|/websites/sfoot.co.uk/amylee/images/li_bg.gif); /* sets the image for the roll over */
/*	background-repeat: repeat-y; /* repeats the image vertically, no need to position it as top left is the default and that is where we want the image begin tiling from */
	
/*}

#leftcol #navigation a, 
#leftcol #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
/*	border-bottom: 1px solid #000000; /* sets the bottom border */
/*	border-left: 1px solid #323C55; /* sets the left border */
/*	border-right: 1px solid #000000; /* sets the right border */
/*	color: #fff; /* changes the default text colour to white */
/*	display: block; /* required to make the links act like a button, having the full area "clickable" */
/*	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
/*	text-decoration: none; /* removes the default underline */
/*	background-color: #FF00CC; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
/*	width: 169px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
/*	w\idth: 163px; /* resets the width for IE6 and compliant browsers */
/*}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

/*#leftcol #navigation a:hover, 
#leftcol #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
/*	background-color: transparent; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
/*	border-bottom: 1px solid #fff; /* changes the bottom border to white to give the hover state an indented look */
/*	color: #000; /* changes the hover and focus text to black */
/*}


*/
#content{
	margin-left: 17px;
	width: 400px;
	vertical-align: top;
	margin-top: 5px;
}

#nav {
	float: left;
	width: auto;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 0;
}
/*
#content p{
font-size: 80%;
margin: 20px;
}

#content h1{
font-size: 130%;
color: #660099;
padding: 0;
margin: 20px;
}

#content h2{
font-size: 110%;
color: #003366;
padding: 0;
margin: /*100px 0 0*/ /*20px;
}
*/
.leftimage{
float: left;
margin-right: 10px;
border: 1px solid #000000;
}

.rightimage{
margin-bottom: 20px;
float: right;
margin-left: 15px;
border: 1px solid #000000;
}

/*.clearit{
clear: both;
display: block;
background-color:#00FF66;
width: 200px;
}*/

/*
#footer{
border-top: 1px solid #000000;
background-color: #660099;
color: #FFFFFF;
clear: both;
}

#footer p{
padding: 10px;
margin: 0;
font-size: 70%;
}

#leftcol{
margin-left: 10px;
margin-top: 20px;
width: 170px;
margin-bottom: 20px;
float: left;
}

#content p.right{
float: right;
}
*/
.container{
	width: 99%;
	float:right;
	}

.miq_text {
	color: #333333;
}

.miq_heading { font-size: 13px; color: #333333; }

.subscribe {padding:5px; border: 1px solid #02A9C6; background: #eee; margin: 0 0 5px 0}
.subscribe h1{font-size:120%; font-weight:bold; color:#02A9C6}

.nav {padding:5px; border: 1px solid #02A9C6; background:#C8FDFC; margin: 0 0 5px 0}
.nav ul{list-style:none; margin:0; padding: 0; }
.nav li{display: block;padding: 1px 1px 1px 1px}
.nav a{display: block;padding: 2px 2px 2px 2px; }
.nav a:link, .navs a:visited {color:#02A9C6; text-decoration:none; display: block; font-weight:bold}
.nav a:hover{color:#fff; text-decoration:none; background:#02A9C6;}
/*
#ul{
font-size: 80%;
}
#ul li{
font-size: 80%;
}
label
{
	width: 16em;
	float: left;
	text-align: right;
	margin: 0 2em 10px 0;
	clear: both;
	font-size: 60%;
}
.label-cb
{
	width: 25em;
	float: left;
	text-align: right;
	margin: 0 2em 10px 0;
	clear: both;
	font-size: 60%;
}


.address-field
{
	float: left;
	margin-bottom: 10px;
	width: 16em;
	font-size:80%;
}


.input-box
{
	float: left;
	margin-bottom: 10px;
	color: #26a;
	border: #26a solid 1px;
	background-color: #FFFFCC;
	width: 16em;
}
.input-check-box
{
	float: left;
	margin-bottom: 10px;
	width: 7em;
}


.submit-button
{
	clear: both;
	color: #FFFFFF;
	border: 2px #9cf outset;
	background-color: #003366;
	float: right;
	margin-right: 100px;
	display: inline;
}

fieldset
{
	border: #26a solid 1px;
	width: 30em;
}

legend
{
	border: #26a solid 1px;
	padding: 1px 10px;
	background-color: #9644C6;
	color: #FFFFFF;
}