/***************************************************/
/*                                                 */
/* HAWKZ Ltd CSS                                   */
/* by Steve Hawkes                                 */
/* (c) 2008 Hawkz Ltd                              */
/*                                                 */
/***************************************************/

/***************************************************/
/* LAYOUT                                          */


* { margin: 0; padding: 0; }

html { height: 100%; }

body {
	background: #254380 url('/img/back.png') top left repeat-x;
	background-attachment: fixed;
	/*background: #254380 url('/img/hgrid.png') top left repeat-x;*/
	text-align: left;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	color: #ccddff;
	text-shadow: #333 0 0 5px;
	font: 12px/20px Arial, Helvetica, sans-serif;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#page {
	display: block;
	padding-left: 80px; /* for logo overhang */
	width: 882px; /* width of the main line etc */
	text-align: left;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
}

#page #padding {
	padding: 0 0 139px 0;
}

h1 {
	display: block;
	border-bottom: 1px dotted #345DB3;
	height: 75px;
	padding: 40px 0 0 0;
}

h1 a {
	display: block;
	background: url(/img/hawkz.png) left top no-repeat;
	behavior: url("/iepngfix.htc");
	width: 260px;
	height: 60px;
	margin: 0 0 0 -60px;
	margin: 0 0 0 -67px;
}

h1 a:hover { background: url(/img/hawkz.png) left top no-repeat; }

h1 span { display: none; }

h2 {
	display: none;
	width: 882px;
	height: 80px;
	line-height: 80px;
	font-size: 40px;
	padding: 0 0 0 8px;
}

#header-wrapper {
	overflow: hidden;
	height: 79px; 
	width: 882px;
	position: relative;
	border-bottom: 1px dotted #345DB3;
}
 
#header-inner {
	width: 5292px;
	height: 79px;
	background-image: url(/img/header.png);
	behavior: url("/iepngfix.htc");
	position: absolute;
}

.scrolling-content {
	width: 1px;
	height: 1px;
	position: absolute;
	top: 0px;
}

body#home #header-inner { margin-left: 0px; }
body#about #header-inner { margin-left: -882px; } 
body#portfolio #header-inner { margin-left: -1764px; } 
body#services #header-inner { margin-left: -2646px; } 
body#downloads #header-inner { margin-left: -3528px; } 
body#contact #header-inner { margin-left: -4410px; } 
 
#content1 {	left: 0px; }
#content2 {	left: 882px; } 
#content3 {	left: 1764px; }
#content4 {	left: 2646px; }
#content5 {	left: 3528px; }
#content6 {	left: 4410px; }

#nav {
	display: block;
	width: 882px;
	height: 59px;
	background: url(/img/nav_all.png) 0 0 no-repeat;
	border-bottom: 1px dotted #345DB3;
	behavior: url("/iepngfix.htc");
}

#nav li {
	width: 147px;
	height: 59px;
	display: block;
	float: left;
}

#nav li a {
	display: block;
	width: 147px;
	height: 59px;
	margin: 0 0 0 0;
	behavior: url("/iepngfix.htc");
}

#nav li a span { display: none; }
#nav li.home a:hover { background: #2C5099 url(/img/nav_all.png) 1px -60px; behavior: url("/iepngfix.htc"); }
#nav li.about a:hover { background: #2C5099 url(/img/nav_all.png) -147px -60px; behavior: url("/iepngfix.htc"); }
#nav li.portfolio a:hover { background: #2C5099 url(/img/nav_all.png) -293px -60px; behavior: url("/iepngfix.htc"); }
#nav li.services a:hover { background: #2C5099 url(/img/nav_all.png) -441px -60px; behavior: url("/iepngfix.htc"); }
#nav li.downloads a:hover { background: #2C5099 url(/img/nav_all.png) -588px -60px; behavior: url("/iepngfix.htc"); }
#nav li.contact a:hover { background: #2C5099 url(/img/nav_all.png) -735px -60px; behavior: url("/iepngfix.htc"); }

.content {
	border-bottom: 1px dotted #345DB3;
}

.column {
	margin: -1px 0 19px 0;
	float: left;
}

.column .wrap {
	margin: 0 16px 0 8px;
}

.unwrap {
	margin: 0 -16px 0 -8px;
}

.width1 { width: 147px; }
.width2 { width: 294px; }
.width3 { width: 441px; }
.width4 { width: 588px; }
.width5 { width: 735px; }
.width6 { width: 882px; }

ul.bars {
	margin: 0 0 20px 0;
	list-style-type: none;
	list-style: none;
	width: 100%;
	border-top: 1px dotted #345DB3;
}
ul.bars li {
	width: 100%;
}
ul.bars small {
	color: #ccddff;
}
ul.bars li a {
	border-bottom: 1px dotted #345DB3;
	text-decoration: none;
	display: block;
	width: 100%;
	padding: 20px 0 19px 0;
}

ul.bars li p a {
	border-bottom: 1px dotted #345DB3;
	text-decoration: none;
	display: inline;
	width: auto;
	padding: 0;
}

ul.bars li p {
	border-bottom: 1px dotted #345DB3;
	display: block;
	padding: 20px 0 19px 0;
	margin: 0;
}
ul.bars li h5 {
	border-bottom: 1px dotted #345DB3;
	display: block;
	width: 100%;
	line-height: 39px;
}
ul.bars li a:hover {
	background: #2C5099;
}
ul.bars li a:hover span small {
	color: #ccddff;
}
ul.bars li a span, ul.bars li p span {
	margin-left: 8px;
	display: block;
}

dt {
	clear:both;
	float:left;
	text-align:right;
	display: block;
	width:15%;
}
dd {
	float:left;
	display: block;
	margin:0 0 20px 1em;
	width:74%;
	}
	
.width2 dt { width: 10px; }
.width2 dd { width: 220px;}

.left { 
	float: left; 
	margin: 0 19px 19px 0; 
}
.right { 
	float: right; 
	margin: 0 0 19px 19px; 
}

.fl { float: left;}
.fr { float: right;}

img.tl { margin: 0 10px 19px 0; }
img.bl { margin: 19px 10px 0 0; }
img.tr { margin: 0 0 19px 10px; }
img.br { margin: 10px 0 0 10px; }
img.b { margin: 0 0 20px 0; }

img { line-height: 20px; vertical-align: text-bottom; border: none; }
h4 img {vertical-align: 5%;}


/***************************************************/
/* TYPOG                                           */

h3, h4, h5, h6 {
	font-size: 25px;
	font-weight: normal;
	line-height: 40px;
	margin: 0;
}

h3 {
	font-size: 25px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
}

h5 img {
	margin-top: 3px;
	vertical-align: middle;
	float: right;
}

h6 {
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
}

.h3drop { height: 40px;}

p, ul, ol { 
	margin: 0 0 20px 0;
	line-height: 20px;
	padding: 0;
}

.img {
	margin: 1px 0 21px 0;
}

img { behavior: url("/iepngfix.htc"); border: none; }

blockquote {
	font-weight: bold;
	padding-left: 20px;
	margin-bottom: 10px;
}

hr {
	width: 100%;
	height: 1px;
	margin: -10px 0 10px 0;
	background: url(/img/dot.png) top left repeat-x;
	color: #345DB3;
	border-width: medium;
	border-style: none;
	border-color: -moz-use-text-color;
}

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

a:hover {
	color: #fff;
	text-decoration: none;
}

.b1 {
	border: 1px solid #345db3;
	margin-bottom: 5px;
}

/***************************************************/
/* Tables - in a good way                          */


caption {
	padding: 0 0 5px 0;
	width: 100%;	 
	text-align: right;
}

table {
	width: 100%;
	text-shadow: none;
	padding: 0;
	
}

th {
	color: #fff;
	text-shadow: none;
	border-bottom: 1px dotted #345db3;
	border-top: 1px dotted #345db3;
	text-transform: uppercase;
	text-align: left;
	line-height: 40px;
	padding-left: 8px;
	background: #345db3 url(/img/back.png) repeat-x;
}

th.nobg {
	border: none;
	background: none;
}

td {
	border-bottom: 1px dotted #345db3;
	padding: 0 0 0 8px;
	background: none;
	color: inherit;
	margin: 0;
	line-height: 40px;
}


td.alt {
	background: #F5FAFA;
	color: #797268;
}

/***************************************************/
/* Forms                                           */

form {
	background: #254380 url('/img/back.png') top left repeat-x;
	padding: 10px;
	margin-top: 0px;
	margin-bottom: 12px;
	min-height: 60px;
}

form p {
	line-height: 40px;
	font-size: 19px;
}

form label {
	text-align: right;
	float: left;
	width: 110px;
	margin-right: 10px;
	line-height: 22px;
	font-size: 19px;
}

form input, select {
	line-height: 20px;
	font-size: 18px;
	width: 280px;
	width: 70%;
	height: 20px;
	vertical-align: middle;
}

textarea {
	width: 280px;
	width: 70%;
	font-size: 12px;
	line-height: 20px;
	height: 120px;
}

input, textarea {
	color: #666;
	border: 1px solid #2f54a1;
	font: 12px/19px Arial, Helvetica, sans-serif;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 8px;
}

form button { width: 70%; }

.buttons a, button, a.button {
    position: relative;
    margin:0 7px 0 0;
    background-color:#182b58;
    border:1px solid #2f54a1;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
    padding:5px 10px 6px 7px; 
}
button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
button img, .buttons a img,  a.button img {
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px dotted #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px dotted #6299c5;
    color:#fff;
}

div.bubble {
	width: auto;
	font-size: 0.75em;
	margin-bottom: 24px;
}

/***************************************************/
/* Bubble                                          */

div.bubbleroll {
	margin-top: 20px;
}

div.bubble {
	width: auto;
	margin-bottom: 0px;
}

div.bubble blockquote {
	margin: 0px;
	padding: 0px;
	border: 1px solid #345db3;
	background-color: #d4dae6;
	color: #192c5a;
	font-size: 14px;
	text-shadow: none;
}

div.bubble blockquote p {
	margin: 10px 8px 9px 8px;
	padding: 0px;
	line-height: 20px;
}

div.bubble blockquote a {
	color: #0066cc;
}

div.bubble blockquote a:hover {
	color: #0066ee;
	text-decoration: underline;
}

div.bubble cite {
	display: block;
	background: transparent url(/img/tip.png) no-repeat 95% 0;
	font-style: normal;
	font-size: 12px;
	height: 40px;
	line-height: 40px;
	margin-top: -1px;
	text-align: right;
}

.hid { display: none; }

/***************************************************/
/* Footer                                          */

#footer {
	margin-top: -120px;
	background: #1f2e4d url(/img/back_blue.png) 0 -300px repeat-x;
	background: #254380 url('/img/back.png') top left repeat-x;
	width: 100%;
	text-align: center;
	height: 120px;
}

#footer a { 
	text-decoration: none;
}

#footer .wrap {
	padding-left: 80px;
	width: 882px;
	margin: 0 auto;
}

#footer .wrap div {
	margin: 19px 0 0 0;
}

/***************************************************/
/* CSS HACK - we had to do one to make life simple */


.clear:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clear { display:inline; }
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide from IE-mac */