/* Hey Eshan I have commented the CSS so you can make simple changes should wish to. Thanks Ben. */
/* Below we have the coding for the body of the page */
body {
   margin: 0px;
   padding: 0px;
   background-color: #FFFFFF;
   }
/* Below we have the coding to remove ugly border that HTML adds automatically to any link image. */
img { border: 0px solid #FFFFFF;
}  
/* Here we have the code to posistion the logo, which is very nice , love the shiny .mobi bit, nice work. */
#logo {
    margin-left: 5%;
	margin-top: 20px;
}
/* Code for the nav bar, this makes it full width, gives it padding, and contains your links at the top. */
#nav {
	width: 97.5%;
	background-image:url(images/nav_bg.jpg);
	background-repeat:repeat-x;
	height: 35px;
	font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	color: #375904;
	font-size: 1.2em;
	padding-left: 2.5%;
	padding-top: 6px;
	word-spacing: 6px;
}
#showcase {
    margin-left: auto;
	margin-top: 20px;
	margin-right: auto;
	width: 800px;
}
.showcase {
    margin: 5px;

}
#left_bar {
     background-color: #b7eff6;
	 width: 225px;
	 float: left;
	 height: 400px;
	
}
#button {
     background-color: #a5dc54;
	 width: 215px;
	 height: 24px;
	 margin-top: 8px;
	 margin-left: 2.5%;
	 clear: both;
	 font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	 color: #ffffff;
	 font-size: 16px;
	
	 
}
.right {
     float: right;
}
.left {
     float: left;
}
#content {
     margin-left: 235px;
	 height: 390px;
	 width: 495px;
	 background-color: #b7eff6;
	 padding-top: 10px;
	 clear: right;
}
#welcome {
	background-color: #a5dc54;
	width: 100%;
	height: 25px;
	font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	color: #ffffff;
	font-size: 16px;
}
#inlay { 
      width: 95%;
	  border: #67a2c0 solid 1px;
	  height: 350px;
	  margin-left: 1%;
	  font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	 color: #67a2c0;
	 font-size: 14px;
	 margin-top: 3px;
	 padding: 5px;
	 text-align: justify;


}
#categroy{
     background-color: #a5dc54;
	 width: 100%;
	 height: 20px;
	 font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	 color: #ffffff;
	 font-size: 16px;
	 text-align: center;
	 margin-top: 40px;
}
#links{
	margin-top: 10px;
	background-color: #e1feb7;
	width: 95%;
	font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	color: #86ad4c;
	font-size: 22px;
	text-align: center;
	padding: 10px;
	padding-top: 30px;
	height: 120px;

	
}
#ben {
	width:90%;
	background-color: #92dcff;
	height: auto;
	margin-top: 10px;
	clear: both;
	


}
#footer {
	padding: 10px;
	width: 97.3%;
	background-image: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
	height:  100px;
	color: #3582bb;
	font-family: "Trebuchet MS", Calibri, Arial, Verdana;
	font-size: 12px;


}

#list1 { 
   float: left;
   }

/* Heres all the text styles*/
/* These are the styles for the links, a span class called selected is used to create the white link at the top, so all you need to do is change it to <span class="selected".... */
.selected {
   color: #FFFFFF;
}
a { color: #375904;  text-decoration: none;}
a.nav {
   color: #FFFFFF; text-decoration: none;
}
.middle {
   color: #86ad4c; text-decoration: none;
}