/*DEBUGGING STYLE*/
div{
	/*border: 1px solid black;*/
}

/*INITIALISING STYLE*/
body, div, h2, h3, p, img, td, ul, li, a, form {
	padding: 0;
	margin: 0;
}

body{
	background-image : url(images/bg.gif);
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 80%;
}

h2{
	color: #003100;
	font-size: 1.5em;
	padding-left: 5px;
}

h3 {
	color: #003100;
	font-size: 1.3em;
	padding-left: 5px;
	padding-top: .5em;
	padding-bottom: .2em;
}

/*SINGLE SURROUNDING CONTAINER
restricted width, centred*/
#outer{
	width: 750px;
	position:absolute;
	left:50%;
	margin-left:-375px;
	background-color : #FFFFCC;
	margin-top: 15px;
	margin-bottom: 15px;
	border: 1px solid #006633;
}

/*FOUR OUTER CONTAINERS
FOR HEAD, CONTENT AND FOOT RESPECTIVELY
will not expand unless they contain at least one
relative div*/
#top-container {
  position:relative;
  left:0;
  top:0;
  }
 
 #nav-container{
  position:relative;
  left:0;
  top:0;
}
  #mid-container {
  position:relative;
  left:0;
  top:0;
 }
 
  #base-container {
  position:relative;
  left:0;
  top:0;
  }
  /*END OF OUTER CONTAINERS*/
  
  
  /*HEAD CONTAINER*/
 #head{
	position:relative;
	border-bottom: 1px solid  #006633;
}


/*NAVIGATION*/
#menu{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #006633;
	font-size: 1em;
	font-weight: bold;
	/*padding-top: .2em;
	padding-bottom: .2em;*/
	height:1.6em;
	
}

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
clear: both;
}

#menu li
{
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}

#menu a
{
	color: #CCFF99;
	display: block;
	width: auto;
	text-decoration: none;
	background: #006633;
	margin: 0;
	padding: 0 .5em .2em .5em;
	border-left: 1px solid #CCFF99;
	border-top: 1px solid #CCFF99;
	border-right: 1px solid #009933;
	white-space:nowrap;
}

#menu a:hover, #menu a:active {
	background: #339900;
}

#menu a.active:link, #menu a.active:visited
{
	/*position: relative;*/
	z-index: 102;
	background: #006633;
	font-weight: bold;
}
/*END OF NAVIGATION*/

/*CONTENT CONTAINERS*/
#mid-left{
  position:relative;
  top:0;
  left:0;
  width:70%;
   border-right: 1px dotted  #006633;
}

#mid-left p, #mid-right p{
	padding: 5px;
}

 #mid-left ul, #mid-right ul{
	padding: .5em .5em .5em 3em;
}
  
#mid-right{
	position:absolute;
	top: 0;
	right: 0;
	width: 29.5%;
}
#mid-right td{
	font-size: .85em;
	padding: .1em;
}
#mid-right table{
	margin: .1em;
	padding: .1em;
	background-color: #FFFF99;
}
.slogan{
	font-size: 1.3em;
	font-weight: bold;
}
.slogan a{
	color: red;
	text-decoration: none;
}

.discount{
	color: red;
}

.product{
	font-weight: bold;
	border-top: 1px solid #006633;
}

.product-div{
	width: 80%;
	margin-left: 10%;
	clear: both;
}

.product-div img.right{
	margin-left: 1em;
	float: right;
	position: relative;
	top: -2em;
}
.product-div img.left{
	margin-right: 1em;
	float: left;
	position: relative;
	top: -2em;
}

.right{
	text-align: right;
}

/* container on the products page for coal*/
#coal{
	width:400px;
	border: 2px solid #660000;
	background-color: #FFCC99;
	color: #000000;
	margin: 5px;
	margin-left: 62px;

}
#coal p, #coal h3{
	text-align: center;
}

/*FOOT CONTAINER*/
#foot{
	 border-top: 1px solid  #006633;
}
#address{
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
	font-size: .75em;
	padding: .2em;
}
#slogan1{
	position: absolute;
	top: 0;
	left: 75px;
	text-align: left;
	font-weight: bold;
	font-size: 1.2em;
}

#slogan2{
	position: absolute;
	top: 1.2em;
	left: 82px;
	font-weight: bold;
	font-size: 1em;
}
.emph{
	font-weight: bold;
	font-size: 1.2em;
	color: #003100;
}