/* ------------- RESET -------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;text-align:left;font-family:Arial, Helvetica, sans-serif;}table{border-collapse:collapse;border-spacing:0;}ol,ul{list-style:none;}q:before,q:after,blockquote:before,blockquote:after{content:"";}

* { margin: 0; outline: none; }
html, body { height: 100%; }

/* ----------- PAGE LAYOUT ----------- */

#wrapper {
	background: transparent url(img/bg-wrapper.gif) repeat-y;
	width: 960px; /* Width of main container */
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -35px; /* The bottom margin is the negative value of the footer's height */
	margin-bottom: -1px;
	overflow: hidden;
}

#column1, #column2, #column3 {
	float: left;
	min-height: 500px;
	height: auto !important;
	height: 500px; /* Needs to match the min height pixels above */ 
}

#column1 { float: left; margin: 25px 20px; width: 160px; }
#column2 { float: left; margin: 25px 20px; width: 520px; }
#column3 { float: left; margin: 25px 20px; width: 160px; }

/* STICKY FOOTER */

#footer {
	background: #fff url(img/footer.png) no-repeat 0% 0%;
	margin: 0 auto;
	padding-top: 15px;
	text-align: center;
	width: 960px;
}

#footer, #push {
	height: 35px; /* #push must be the same height as #footer */
}

/* ---------- FONTS/COLORS ----------- */

body { background: #fff url(img/bg.png) repeat-x 0% 0%; color: #333; font: normal 13px/1.3em arial, helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { line-height: 1em; letter-spacing: 1px; margin: 20px 0; }
h1 { font-size: 240%; font-weight: normal; margin-bottom: 0; }
h2 { font-size: 180%; margin-top: 0; font-weight: normal; }
h3 { font-size: 140%; }
h4, h5, h6 { border-top: 1px solid #333;  font-size: 100%; font-weight: bold; padding-top: 5px; }

#column1 h4, #column3 h4 { border: 0; margin: 0 0 5px 0; }

/* ------------- LINKS ------------- */

:link:focus, :visited:focus { background-color: #f2f5f7; }
:link { color: #00428c; font-weight: bold; letter-spacing: 1px; text-decoration: none; }
:visited { color: #00428c; font-weight: bold; letter-spacing: 1px; text-decoration: none; }
:link:hover, :visited:hover { color: #46a834; text-decoration: none; }
:link:active, :visited:active { color: #00428c; }


/* -------------- HEADER ------------- */

#header { background: url(img/header.png) no-repeat 0% 0%; height: 114px; }
#header h1 { margin: 0 0 5px 0; padding-top: 15px; }
#header h2 { margin: 0; }

/* ------------ NAVIGATION ----------- */

/* NAVIGATION 1 */

#navigation1 { background-color: #fff; height: 21px; padding-top: 5px; }

#menu1 { text-align: right; }
#menu1 li { display: inline; list-style-type: none; padding-left: 10px; }
#menu1 li a, #menu1 li a:link, #menu1 li a:active, #menu1 li a:visited { color: #00428c; font-weight: normal; letter-spacing: 0; text-decoration: none; }
#menu1 li a:hover { color: #46a834; text-decoration: none; }

#menu1 :link:focus, #menu1 :visited:focus { background: transparent; }

/* NAVIGATION 2 */

#navigation2 { margin: 0; }

#menu2 { margin-bottom: 15px; }
#menu2 li { margin: 0; }
#menu2 li a, #menu2 li a:link, #menu2 li a:active, #menu2 li a:visited { color: #00428c; font-weight: bold; letter-spacing: 1px; line-height: 1.5em; text-decoration: none; }
#menu2 li a:hover { color: #46a834; text-decoration: none; }

#menu2 :link:focus, #menu2 :visited:focus { background: transparent; }

/* ----------- SITE STYLES ----------- */

p { margin-bottom: 20px; }

strong, bold, i, em { font-weight: bold; letter-spacing: 1px; }

#column2 ul { clear: both; padding-left: 0; margin: 10px 0; }
#column2 li { list-style-type: square; margin: 5px 0 5px 25px; }

blockquote { padding: 0 20px; }
blockquote p { font-size: 100%; font-style: italic; letter-spacing: 1px; }

img { border: 0; }

/* ------------- CLASSES ------------- */

.img-left { float: left; margin: 5px 10px 0 0; }
.img-right { float: right; margin: 5px 0 0 10px; }

.border-bottom { border-bottom: 1px solid #ccc; margin-bottom: 15px; padding: 0 0 15px 0; }

/* ------------ GRID EXAMPLE ----------- 

Source: http://grid.mindplay.dk

Two columns/width: 520px

Columns: 0, 251, 15, 251, 0

(X)HTML:
========

<div class="grid clear">
<div class="grid-m1"></div>
<div class="grid-c1">
{column 1}
</div>
<div class="grid-m2"></div>
<div class="grid-c2">
{column 2}
</div>
</div>

---------------------------------------*/

.grid-m1 { float: left; width: 0px; height: 1px; }
.grid-c1 { float: left; width: 251px; }
.grid-m2 { float: left; width: 15px; height: 1px; }
.grid-c2 { float: left; width: 251px; }

/* ------------- CLEARFIX ------------ */

.clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear { display: inline-block; }
* html .clear { height: 1%; }