/*#############################################################

© 2007 Lee Perlow
Created by: Arcsin, http://arcsin.se

#############################################################*/

/* default elements */
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	padding-bottom: 1px;
}
body {
	background: #333;
	color: #222;
	font: normal 62.5% sans-serif;
}
a {color: #04C;}
a:hover {color: #06F;}

.clearer {clear: both;}

h1,h2,h3 {
	color: #444;
	margin: 6px 0 2px;
}

table h1,table h2,table h3 {margin-top: 0;}

h1 {font: normal 2em Verdana,sans-serif;}
h2 {font: bold 1.2em Verdana,sans-serif;}
h3 {font: bold 1em sans-serif;}

img {border: none;}
img.bordered {
	background: #FFF;
	border: 1px solid #CCC;
	padding: 5px;
}

li {
	line-height: 1.5em;
	list-style: square;
}
form,table {margin: 6px 0 12px;}
p {padding-bottom: 6px;}
ul {padding: 0 2em 1.2em;}
small {font: normal 0.9em sans-serif;}

a.more {font: bold 1em sans-serif;}

/* structure */
#container {font-size: 1.3em; line-height: 1.3em;}

/* default layout elements */
.wrapper {
	margin: 0 auto;
	width: 770px;
}
.content {
	background: #EAEAEA url(img/content.jpg) repeat-x;
	border-bottom: 1px solid #D9D9D9;
	padding: 20px 0;
}

/* gfx, frontpage */
.gfx h1 {color: #FFF;}
.gfx h2 {
	color: #FFE;
	font: normal 1.5em Verdana,sans-serif;
	margin: 0;
}
.gfx {
	background: #94B26C url('img/gfx.gif') repeat-x;
	border-bottom: 1px solid #CCC;
}
.gfx .logo {
	background: url('img/logo.gif') no-repeat;
	float: left;
	height: 200px;
	width: 74%;
}
.gfx .slogan {padding: 74px 0 0 150px;}
.gfx .slogan span {font: bold 0.6em sans-serif;}
.gfx .left {
	background: #94B26C url('img/gfx-left.gif') repeat-x;
	height: 200px;
	width: 15%;
}

/* page specific */
.portfolio-list a {
	background: #FFF;
	border: 1px solid #BBB;
	display: block;
	height: 80px;
	margin-bottom: 10px;
	padding: 5px;
	width: 260px;
}
#home .left {width: 54%;}
#home .right {
	text-align: right;
	width: 36%;
}

#overview .wrapper {background: url('img/divider.gif') repeat-y center top;}
#overview .left,#overview .right {width: 45%;}

#contact .left,#contact .right {width: 48%;}
#contact .right {text-align: right;}

#about img {
	float: right;
	margin: 0 0 16px 16px;
}

/* services */
#custom-gis .left, #mapping .right, #planning .left, #training .right, #design .left {width: 60%;}
#custom-gis .right, #mapping .left, #planning .right, #training .left, #design .right {width: 36%;}

/* portfolio */
.showcase {
	background: #F5F5F5;
	float: left;
	margin: 6px 10px 6px 0;
}

/* navigation */
.navigation {background: #444;}
.navigation a {
	color: #DDD;
	float: left;
	font: bold 1em sans-serif;
	margin-right: 1px;
	padding: 12px 16px;
	text-align: center;
	text-decoration: none;
}
.navigation a:hover,.navigation a#active {
	background: #555;
	color: #FFF;
}

/* footer */
.footer {color: #CCC;}
.footer .left {
	background: url('img/footer.jpg') no-repeat left center;
	padding: 18px 0 10px 50px;
}
.footer .right {padding: 18px 0 10px;}
.footer .right p {text-align: right;}
.footer a {
	color: #DDD;
	font-weight: bold;
	text-decoration: none;
}
.footer a:hover {color: #FFF;}
.footer .left span {font-size: 0.8em;}
.footer .stats {color: #666;}

/* misc */
.padded {padding: 8px;}
.left {float: left;}
.right {float: right;}
.big {font-size: 1.1em;}
.odd {background: #F2F2F2;}
.clearer {
	clear: both;
	font-size: 0;
}

/* lists */
ul.block {
	border-top: 1px solid #DADADA;
	margin: 4px 0;
	padding: 0;
}
.block li {
	border-bottom: 1px solid #DADADA;
	list-style: none;
}
.block li a,.block li em {display: block;}
.block li em {
	color: #555;
	font-size: 0.9em;
	font-style: normal;
}
.block li a {
	color: #248;
	padding: 6px 7% 6px 13%;
	width: 80%;
	text-decoration: none;
}
.block li a span {font-weight: bold;}
.block li a:hover {color: #04C;}

li#icon1 a {background: url('img/icon1.gif') no-repeat left center;}
li#icon2 a {background: url('img/icon2.gif') no-repeat left center;}
li#icon3 a {background: url('img/icon3.gif') no-repeat left center;}
li#icon4 a {background: url('img/icon4.gif') no-repeat left center;}
li#icon5 a {background: url('img/icon5.gif') no-repeat left center;}

ul.big {
	font-size: 1.1em;
	padding: 4px 0 12px 16px;
}

/* tables */
table.list {border-collapse: collapse;}
table.list td {
	padding: 10px 16px;
	vertical-align: middle;
}
table.list td a {font-size: 1.1em;}

/* tooltip */
div#toolTip {
	background: #FFE;
	border: 1px solid #BBA;
	padding: 5px;
	position: absolute;
	text-align: left;
	width: 220px;
	z-index: 1000;
}
div#toolTip p {
	color: #555;
	font: normal 12px Verdana,sans-serif;
	margin: 0;
	padding: 0;
}
div#toolTip p em {
	color: #333;
	display: block;
	font-style: normal;
	font-weight: bold;
	margin-bottom: 3px;
}
div#toolTip p em span {
	color: #555;
	font-weight: bold;
}