/*This is the CSS file for the AirGraver website, which is used to control the style of html elements.*/

/*Controls the site header which consists of the AirGraver logo*/
#header img {
	margin: 10px auto; /*First value controls the spacing above and below the logo and the second value centers the logo horizontally*/
}

/*The following nine sections control the horizontal navigation bar at the top of the page*/
#nav {
	position: relative;
	background: #DFBD55; /*Controls the background color of the navigation bar*/
	width: 660px; /*Controls the width of the navigation bar*/
	list-style: none;
	height: 28px; /*Controls the height of the navigation bar*/
	font-family: verdana, geneva, sans-serif; /*Controls the font preferences for the navigation bar*/
	padding: 0px 0px 0px 50px; /*Last value controls the horizontal distance between the left edge of the navigation bar and the left tab*/
	margin: 0px auto; /*First value controls the spacing above and below the navigation bar and the second value centers the navigation bar horizontally*/
}

/*The following two sections control the appearance of navigation bar links*/
#nav a {
	display: block;
	text-decoration: none; /*Removes the underline from navigation bar links*/
	font-size: 14px; /*Controls the font size of navigation bar links*/
	font-weight: bold; /*Controls the boldness of navigation bar links*/
	color: #726639; /*Controls the font color of navigation bar links*/
	padding: 0px 18px; /*Last value controls how wide navigation bar tabs are compared to the width of the links*/
}

/*Controls the appearance of navigation bar links when they are hovered over*/
#nav a:hover {
	color: #4A200F; /*Controls the hover color of navigation bar links*/
}

/*Controls the appearance of individual tabs in the navigation bar*/
#nav li {
	width: auto;
	float: left;
	margin: 0px; /*Controls the spacing around navigation bar tabs*/
	line-height: 28px; /*Vertically centers text of navigation bar links within the line height*/
}

/*The following two section determine which page is currently active on the website and change the appearance of the active tab in the navigation bar*/
#home #nav-home a, /*When body tag in html is defined as id="home" the active tab is set to the the list tag that is defined as id="nav-home"*/
#about #nav-about a,
#products #nav-products a,
#support #nav-support a,
#multimedia #nav-multimedia a,
#contact #nav-contact a {
	background: #F3DB85 url(../media/images/page_layout/tab_corner_left.png) top left no-repeat; /*Controls background color of active navigation bar tab and links to the left tab corner*/
	color: #4A200F; /*Controls font color for active tab in navigation bar*/
	padding: 4px 0px 0px 18px; /*Right value controls how wide the active tab in the navigation bar is compared to the width of the link*/
	line-height: normal;
	height: 24px;
}

/*This section is an extension of the previous one that is required to display the right corner on the active tab in the navigation bar*/
#home #nav-home a span, /*This works the same as the section above but the span is required to display the right corner on the active tab"*/
#about #nav-about a span,
#products #nav-products a span,
#support #nav-support a span,
#multimedia #nav-multimedia a span,
#contact #nav-contact a span {
	background: #F3DB85 url(../media/images/page_layout/tab_corner_right.png) top right no-repeat; /*Controls background color of active navigation bar tab and links to the right tab corner*/
	padding: 4px 20px 0px 0px;
}

/*The following three sections control the corner images displayed on the navigation bar tabs*/
#nav .corner {
	background-image: url(../media/images/page_layout/nav_corner.png); /*This url links to the tab corner image*/
	position: absolute;
	width: 16px;
	height: 16px;
}

/*Controls the position of the left corner of the navigation bar tabs*/
#nav .top-left {
	top: 0px;
	left: 0px;
	background-position: 0px 0px;
}

/*Controls the position of the right corner of the navigation bar tabs*/
#nav .top-right {
	top: 0px;
	right: 0px;
	background-position: -16px 0px;
}

#container {
	position: relative;
	background: #DFBD55; /*Controls the the color inside the page border*/
	padding: 0px;
	border: 8px solid #F3DB85; /*Controls the size and color of the page border*/
	clear: both;
}

/*The following five sections control the page corners*/
#container .corner {
	background-image: url(../media/images/page_layout/content_corner.png); /*This url links to the page corner image*/
	position: absolute;
	width: 8px;
	height: 8px;
}

/*Controls the position of the top left page corner*/
#container .top-left {
	top: -8px;
	left: -8px;
	background-position: 0px 0px;
}

/*Controls the position of the top right page corner*/
#container .top-right {
	top: -8px;
	right: -8px;
	background-position: -8px 0px;
}

/*Controls the position of the bottom left page corner*/
#container .bottom-left {
	bottom: -8px;
	left: -8px;
	background-position: 0px -8px;
}

/*Controls the position of the bottom right page corner*/
#container .bottom-right {
	bottom: -8px;
	right: -8px;
	background-position: -8px -8px;
}

/*Controls the content portion of the page*/
#content {
	margin: 5px; /*Controls the spacing between the content section and the page border*/
	margin-left: 150px;
	background-color: #FCFFF3; /*Controls the content background color*/
	padding: 20px; /*Controls the padding between the outside of the content section and the actual content*/
}

 /*The following seven sections control the left navigation menu*/
#left_nav {
	height: 100%; /*Controls the height of the left navigation menu*/
	width: 150px; /*Controls the width of the left navigation menu*/
	float: left; /*Positions the menu to the left of the page*/
}

ul.left_nav {
	clear: both;
	list-style: none;
	font-family: Arial, Verdana, sans-serif; /*Controls the font preferences for the left navigation menu*/
	padding: 0px;
	margin: 7px 0px; /*First value controls the vertical starting position of the left navigation menu*/
}

ul.left_nav a {
	display: block;
	background: #F3DB85; /*Controls the background color of the left navigation menu buttons*/
	border: 1px solid #C8A945; /*Controls the size and color of the left navigation menu button borders*/
	text-decoration: none; /*Removes the underline from the left navigation menu links*/
	padding: 5px 10px; /*First value controls horizontal space and second value controls vertical space around button text*/
	margin: 5px; /*Controls space around left navigation menu buttons*/
	color: #4A200F; /*Controls the text color of the left navigation menu links*/
	line-height: 16px; /*Vertically centers text of left navigation navigation menu links within the line height*/
}

ul.left_nav li {
	font-size: 12px; /*Controls the font size of the left navigation menu text*/
	margin: 0px;
}

ul.left_nav a:hover {
	background: #743A1F; /*Controls the hover background color of navigation menu buttons*/
	color: #F3DB85; /*Controls the hover font color of navigation menu buttons*/
}

li.heading {
	font-weight: bold; /*Controls the boldness of left navigation menu headings*/
	color: #4A200F; /*Controls the color of left navigation menu headings*/
	padding: 0px 8px; /*Second value controls space above and below left navigation menu headings*/
}

/*Controls properties of everything inside the html <body> tag*/
body {
	font-family: Arial, Verdana, sans-serif; /*Controls the font preferences for content text*/
	width: 960px; /*Controls the overall width of the page in a web browser*/
	background: #4A200F; /*Controls the background color behind the page*/
	margin: 0px auto 50px; /*The auto value vertically centers the page and the last value controls the space below the bottom of the page*/
}

.clear {
	clear: both;
}

/*The following two sections control how images appear on the page*/
img {
	display: block;
	margin: 10px; /*Controls spacing around images*/
}

a img {
	border: none; /*Removes border from image links*/
}

a:link {
	color: black; /*Controls color of links*/
}

a:visited {
	color: black; /*Controls color of visited links*/
}

a:hover {
	color: #806800; /*Controls hover color of links*/
}

a:focus {
	outline: none; /*Removes border from image links*/
}

/*The following six sections control the appearance of headings on the page*/
h1 {
	color: #4A200F; /*Controls the color of level 1 header*/
	font-size: 25px; /*Controls the font size of level 1 header*/
	line-height: 30px;
	margin: 0px;
}

h2 {
	color: #4A200F; /*Controls the color of level 2 header*/
	font-size: 20px; /*Controls the font size of level 2 header*/
	line-height: 35px;
	margin: 0px;
}

h3 {
	color: black; /*Controls the color of level 3 header*/
	font-size: 16px; /*Controls the font size of level 3 header*/
	line-height: 25px;
	margin: 0px;
}

h4 {
	color: black; /*Controls the color of level 4 header*/
	font-size: 16px; /*Controls the font size of level 4 header*/
	font-style: italic;
	line-height: 25px;
	margin: 0px;
}

h5 {
	color: black; /*Controls the color of level 5 header*/
	font-size: 15px; /*Controls the font size of level 5 header*/
	line-height: 25px;
	margin: 0px;
}

h6 {
	color: black; /*Controls the color of level 6 header*/
	font-size: 15px; /*Controls the font size of level 6 header*/
	font-weight: normal;
	font-style: italic;
	line-height: 25px;
	margin: 0px;
}

/*Controls the appearance of paragraphs*/
p {
	font-size: 14px; /*Controls the font size for paragraphs*/
	line-height: 17px;
	margin: 8px 0px 12px; /*First value controls space above and last value controls space below paragraphs*/
}

/*Controls the appearance of lists*/
li {
	font-size: 14px; /*Controls the font size for bullet items*/
	line-height: 17px;
	margin: 8px 0px 12px; /*First value controls space above and last value controls space below paragraphs*/
}

/*The following eight sections control the appearance of tables*/
table {
	font-size: 14px; /*Controls the font size for tables*/
	line-height: 17px;
	width: 100%; /*Controls the width of tables within the content section*/
	
}

table tr th, table tr td {
	text-align: left; /*Controls horizontal alignment of text within table cells*/
	vertical-align: top; /*Controls the vertical alignment of text within table cells*/
}

/*The following four sections control the appearance of tables that are defined as class="colored"*/
table.colored {
	background-color: #DDDCB3; /*Controls the border color between cells for "colored" tables*/
	color: black; /*Controls the font color for "colored" tables*/
}

table.colored tr th {
	background: #EBEABF; /*Controls the background color of header cells for "colored" tables*/
	text-align: left; /*Controls the horizontal alignment of text within header cells for "colored" tables*/
	vertical-align: top; /*Controls the vertical alignment of text within header cells for "colored" tables*/
	padding: 5px; /*Controls the spacing inside header cells, which pads the content they contain*/
}

table.colored tr td {
	text-align: left; /*Controls the background color of cells for "colored" tables*/
	background: #F9FFE3; /*Controls the horizontal alignment of text within cells for "colored" tables*/
	vertical-align: top; /*Controls the vertical alignment of text within cells for "colored" tables*/
	padding: 5px; /*Controls the spacing inside cells, which pads the content they contain*/
}

table.colored img {
	margin: 0px; /*Controls the spacing around images in tables*/
}

/*The next two sections control the appearance of tables that are defined as class="gallery"*/
table.gallery tr th, table.gallery tr td {
	text-align: center; /*Controls horizontal spacing of text within cells for "gallery" tables*/
	font-size: 16px; /*Controls the font size of text within cells for "gallery" tables*/
	color: #001251; /*Controls the font color of text within cells for "gallery" tables*/
	vertical-align: middle; /*Controls the vertical alignment of images within cells for "gallery" tables*/
	padding-bottom: 20px; /*Controls the spacing below images within cells for "gallery" tables*/
}

table.gallery img {
	margin: 15px auto; /*First value controls space above and below images and second value centers them horizontally within cells*/
}

/*The following two sections allow images to be positioned at the left or right of the page and have text wrap around them using class="left" or class="right"*/
.left {
	width: auto;
	float: left;
	margin-left: 0px;
}

.right {
	width: auto;
	float: right;
	margin-right: 0px;
}