/* CSS Document */

/* Author Ashoor Namrood, Syrox */

body {
	margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:11px; /* Always define 0px margin and padding, never use the Body tag to specify spaces. Body tags should only be used to specify backgrounds, font-family's (i.e. Arial, Verdana etc), a container class (i.e. .container) should be used to specify spaces. background-color:#000033; */ background:url(../images/Layout/body-dashed-bg.gif) 0px 0px #000033;
}

h1 {
	margin:0px 5px 10px 15px; padding:0px; color:#a7a9ac; font-size:18px; line-height:18px; text-transform:uppercase; /* Always define 0px margin and padding to begin with on heading tags. You can then modify these as you continue building a site. */
}

h2 {
	margin:0px 5px 18px 13px; padding:0px; color:#567788; font-size:30px; line-height:32px; text-transform:uppercase; /* */
}

h3 {
	margin:0px 5px 24px 15px; padding:0px; color:#567788; font-size:18px;
line-height:20px; /* */
}

h3.contact {
	margin:0px 5px 15px 15px; padding:0px; color:#567788; font-size:18px; line-height:20px; /* */
}

h3 span {
	color:#567788 !important; /* */
}

h4 {
	margin:0px 0px 21px 0px; padding:0px; font-size:16px; line-height:16px; color:#000033; text-transform:uppercase; /* */
}

h5 {
	margin:0px 0px 10px 0px; padding:0px; font-size:12px; line-height:16px; color:#000033; /* */
}

h5.white {
	color:#ffffff; /* */
}

h6 {
	margin:0px; padding:0px; /* */
}

a {
	text-decoration:none; color:#999999;
}

a img {
	border:0px; /* This defines that any images placed inside a <a href> tag or a .NET 2.2 Hyperlink have no default "blue" border that Internet Explorer adds by default */
}

p {
	color:#333333; margin:0px 18px 18px 15px; padding:0px; font-size:12px; line-height:14px; /* Rule: when specifying font-size, line-height should always be roughly 3px more, so, i.e. 11px font-size = 14px line-height. */
}

ul {
	margin:0px; padding:0px;
}

ul li {
	margin:0px; padding:0px;
}

div.clear {
	clear:both; line-height:0pt; font-size:0px; height:0px; /* When a CSS class has an auto height (i.e. line 39, .container), it means that it'll grow in height according to the elements inside it. However, due to cross-browser differences, some browsers will not comply with this rule as they dont take into account floated elements so the DIV is 0px in height effectively. 'div.clear' is an "invisible" DIV which enforces this rule. */
}

.container {
	width:964px; height:auto; margin:auto; margin-bottom:10px; /* This is used to centre an element. Some people use text-align:center but that also centers text and you have to specify an inner DIV with a left or right text align which can then get slightly messy. */ background-color:#FFFFFF; border-left:4px solid #ffffff; border-right:4px solid #ffffff;border-bottom:4px solid #ffffff;
}

/* .container-alternative {
	width:964px; min-height:500px; height:auto !important; height:500px; margin:auto; ---------- This DIV is an alternative container. It works just the same as the previous container (i.e. line 39, .container), but has a minimum height defined. This means that the DIV starts off at a certain height of 500px (in this example) and increases in height should its inner elements require it to. ---------- 
}*/

.header {
	position:relative; width:964px; height:90px; margin:auto; /* For detailed information on, CSS Positioning go to: http://webdesign.about.com/od/advancedcss/a/aa061307.htm */
}

.header a.logo {
	position:absolute; top:6px; right:3px; z-index:200;
}

.header p.todaysdate {
	position:absolute; top:6px; right:137px; z-index:200; margin:0px; color:#a7a9ac;
}

.header a.logo img {
	behavior: url(/Common/pngHack.htc);
}
 
.header .top-nav {
	position:absolute; top:30px; left:0px; width:964px; height:60px; background:url(../Images/Layout/links-area.gif) repeat-x 3px -7px #f0f0f0; z-index:1;
}

.header .top-nav ul {
	position:absolute; top:7px; left:7px;
}

/*.header .top-nav ul li {
}*/

.content {
	width:964px; min-height:500px; height:auto !important; height:500px; margin:auto; padding:1px 0px 7px 0px; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.footer {
	width:964px; height:auto; margin:auto; background-color:#f0f0f0; padding:0px 0px 31px 0px; position:relative; margin-top:1px; /* */
}

.footer .left-wide-footer-column {
	width:304px; height:auto; padding:41px 15px 10px 15px; float:left; position:relative;
}

.footer .left-wide-footer-column h1 {
	position:absolute; top:11px; left:15px; font-size:16px; font-weight:bold; color:#333333; text-transform:none; margin:0px;
}

.footer .left-wide-footer-column p {
	font-size:11px; color:#333333; margin:0px; display:block; float:left; width:152px; line-height:13px;
}

.footer .left-wide-footer-column a {
	color:#a7a9ac; text-decoration:none;
}

.footer .left-wide-footer-column a:hover {
	color:#333333;
}

.footer .left-footer-column {
	width:195px; height:auto; padding:41px 15px 15px 0px; float:left; position:relative;
}

.footer .left-footer-column h1 {
	position:absolute; top:11px; left:0px; font-size:16px; font-weight:bold; color:#333333; text-transform:none; margin:0px;
}

.footer .left-footer-column p {
	font-size:11px; color:#333333; margin:0px; line-height:13px;
}

.footer .left-footer-column a {
	color:#333333; text-decoration:none;
}

.footer .left-footer-column a:hover {
	color:#999999;
}

.footer .footer-links {
	margin:auto; border-top:3px solid #ffffff; min-height:9px; height:auto !important; height:9px; padding:9px 9px 9px 5px; width:950px; position:absolute; bottom:0px; left:0px; background:url(../Images/Layout/links-area.gif) repeat-x 3px 0px;
}

.footer .footer-links ul {
/*	position:absolute; top:8px; left:5px;
*/}

.footer .footer-links ul li {
	float:left; list-style:none; border-right:1px solid #ffffff; min-height:10px; height:auto !important; height:10px; display:block; color:#ffffff; line-height:10px; padding:0px 4px 0px 4px;
}

.footer .footer-links ul li a {
	color:#ffffff; text-decoration:none;
}

.footer .footer-links ul li a:hover {
	color:#cccccc;
}

li.last-li {
	border-right:0px !important; background:none !important;
}