/*
CSS for Percox.com main website also for Assignment 1 Week 5 - 6 : Staffordshire University
Notations have been done all the way through for future learning and ease of editing.
*/

body { /* Body, this is the main background and default setting */
	background-color: gray; /* Color of the background for Body.. this is the main back color */
	background-image: url("images/backgroundheader.png");
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;

}

html {
	margin:0;
	padding:0;
	color:#000;
}

h4 {
	background-color: gray;
	border-bottom: 1px black solid;
	color: white;
	padding: 10px;
	float: left;
	width: 90%;
	height: auto;
	font-size: large;
}

/* HEADER RELATED */

#topbar {
	background-image: url("images/percoxlogo.png"); /* logo being used for the top bar */
	background-repeat: no-repeat; /* Only display the logo once */
	height: 67px;
	margin-left: 17%;
	margin-right: auto;
}

#navbar { /* Navigation Bar at the top */
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;/* Font being used in the navigation, all text will use this */
	font-size: 12px; /* Size of the font being used in the head */
	margin-left: 10%; /* Left Margin in the header, clearing an area outside the border */
	margin-right: 0px; /* Right Margin in the head. */
	padding-bottom: 23px; /* Bottom Padding */
	padding-top: 23px;  /* Top Padding */
}

#navbar a { /* The style of anything in <a href=""> </a> within this navbar */
	color: #FFFFFF; /* Color of the link */
	padding: 23px 15px 23px; /* (Format: Top Padding - Right Padding - Bottom Padding - Left Padding) */
	text-decoration: none;
}

#navbar a:hover { /* The style of what happens when you hover of the href in navbar */
	background-color: #000066;
}

/* MAIN CONTENT BEGIN */

#mainbox {
	background-color: #CCCCCC; /* Background color of the main box */
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	width: 65%;
	float: left
}
#maincontent {
	/* The content within the main division box */
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: small; /* Size of font in the main content */
	width: 65%; /* How wide it is to be the main content */
	float: left; /* Float left */
	clear: left;
	border-style: solid; /* Solid style with a straight line */
	border-width: 0px 2px 0px 0px; /* Border style right increased to 2 */
	/* padding: 25px 25px 25px 10px; */
	display: inline;
}

#mainsidebar {
	float: right;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: auto;
	display: inline;
	width: 200px;

}

/* FOOTER RELATED */

#footer {
	clear: left;
	text-align: center; /* Centralizing all text within this div */
	color: #FFFFFF; /* Colour of the text within the div */
	background-color: #3b3b42; /* General background colour, same as header */
	padding: 25px 10px 25px 10px; /* The padding throughout*/
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;/* Font being used in the navigation, all text will use this */
	font-size: 12px; /* Size of the font being used in the head */
}