/*
========================
Global
========================
*/
html {
	background:#2e66aa url(/Images/bg-body.gif) center repeat-y;
}
body {
	font-family:Arial,Sans-Serif;
	font-size:12px;
	line-height:150%;
	color:#333;
	min-height:2470px;
}
* html body {
	height:2470px;
}
h1, h2, h3 {
	font-size:20px;
	font-family:Calibri,Arial,Sans-Serif;
}
h1 {
	font-size:22px;
	font-weight:bold;
	font-family:Arial,Sans-Serif;
	line-height:100%;
	margin:30px 0 20px 0;
	color:#1f60b1;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
}
h2 {
	font-size:17px;
	color:#1f60b1;
	clear:left;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
	margin-bottom:25px;
}
h3 {
	font-size:16px;
	line-height:34px;
	color:#fff;
	margin:0 -16px 16px -16px;
	padding:0 16px;
	text-transform:uppercase;
	background:#5e99e1 url(/Images/bg-bar-blue.gif) top no-repeat;
	border:1px solid #fff;
}
h4 {
	margin-bottom:1em;
}
h4, dt {
	font-weight:bold;
}
p, ul, dd {
	margin-bottom:1em;
}
p {
	width:420px;
}
p.intro {
	width:auto;
}
p a {
	color:#1f60b1;
}
ul.bullet {
	padding-left:2em;
}
ul.bullet li {
	list-style:disc;
}
.clear {
	clear:both;
	line-height:0;
	font-size:0;
}

/*
========================
Containers
========================
*/
#container {
	width:920px;
	position:relative;
	margin:auto;
	padding-bottom:40px;
}
#header {
	padding:60px 0 12px 0;
	/* Don't mess with my padding! */
}
.leftPanel {
	padding-right:290px;
}
.rightPanel {
	position:absolute;
	top:153px;
	right:0;
	width:250px;
	background:#d4d8d0;
}
.rightPanel img {
	display:block;
}
.rightPanel a {
	display:block;
	width:200px;
	background:#eee;
	padding:6px;
	border:1px solid #ccc;
	margin:auto;
	margin-bottom:17px;
}
.rightPanel a:hover {
	background-color:#fff;
}
.rightPanel h3 {
	font-weight:normal;
	text-align:center;
	line-height:34px;
	color:#fff;
	background:#adada6 url(/Images/bg-recent.gif) top no-repeat;
	font-size:16px;
	margin:0 0 17px 0;
	padding:0;
	border:none;
}
#content {
	min-height:300px;
}
#footer {
	margin-top:20px;
	font-size:11px;
	font-weight:bold;
	color:#aaa;
	text-align:center;
}

/*
========================
Colours
========================
*/
a.marketing, .marketing h1, .marketing li.title {
	color:#1f60b1 !important
}
.marketing h3 {
	background:#5e99e1 url(/Images/bg-bar-blue.gif) top no-repeat;
}
a.web, .web h1, .web li.title {
	color:#c10505 !important
}
.web h3 {
	background:#5e99e1 url(/Images/bg-bar-red.gif) top no-repeat;
}
a.design, .design h1, .design li.title {
	color:#3aa828 !important
}
.design h3 {
	background:#5dbd53 url(/Images/bg-bar-green.gif) top no-repeat;
}
a.consulting, .consulting h1, .consulting li.title {
	color:#8828a8 !important
}
.consulting h3 {
	background:#a274bf url(/Images/bg-bar-purple.gif) top no-repeat;
}

/*
========================
Navigation
========================
*/
#nav {
	height:24px;
	position:absolute;
	top:0px;
	right:0px;
	background:url(/Images/bg-nav.gif) left no-repeat;
	padding-left:10px;
	font-family:Calibri,Arial,Sans-Serif;
}
#nav li {
	height:24px;
	float:left;
	padding-right:5px;
	margin-right:5px;
	background:url(/Images/bg-navitem.gif) right no-repeat;
}
#nav li.last {
	background:url(/Images/bg-nav.gif) right no-repeat;
	padding-right:10px;
	margin:0;
}
#nav a {
	font-size:13px;
	float:left;
	color:#fff;
	text-decoration:none;
	line-height:22px;
	font-weight:bold;
	padding:0 5px;
}
#nav a:hover {
	color:#b6dcff;
}
#serviceNav {
	height:24px;
	margin-left:-10px;
	font-family:Calibri,Arial,Sans-Serif;
}
#serviceNav li {
	float:left;
	font-size:17px;
	height:24px;
	border-right:1px solid #bbb;
	padding:0 10px;
}
#serviceNav li.active {
	background:#6db5bf;
}
#serviceNav li.last {
	border:none;
}
#serviceNav li.gallery {
	float:right;
	padding:0;
	margin-top:-13px;
}
#serviceNav a {
	float:left;
	line-height:21px;
	color:#c10505;
	text-decoration:none;
}
#serviceNav a:hover {
	border-bottom:1px dotted #aaa;
}

/*
========================
Why Choose
========================
*/
#intro {
	width:748px;
	height:160px;
	margin-top:40px;
	background:url(/Images/why-choose.gif) no-repeat;
	padding:4px 0 0 170px;
}
#intro img {
	display:block;
	margin-bottom:12px;
}
#intro p {
	width:230px;
	margin:0 12px 0 0;
	height:110px;
	padding-right:12px;
	border-right:1px solid #ccc;
	float:left;
}
#intro p.last {
	margin:0;
	padding:0;
	border:none;
}
#intro strong {
	font-weight:bold;
	color:#1f60b1;
}

/*
========================
Slider
========================
*/
#slider {
	width:630px;
	height:250px;
}
#slider a {
	display:block;
	height:250px;
}
#slider #marketing { background:url(/Images/slider-marketing.jpg) top center no-repeat}
#slider #web { background:url(/Images/slider-web.jpg) top center no-repeat}
#slider #design { background:url(/Images/slider-design.jpg) top center no-repeat}
#slider #consulting { background:url(/Images/slider-consulting.jpg) top center no-repeat}


/*
========================
Home Page
========================
*/
#splash {
	height:364px;
}
#splash a {
	float:left;
	width:459px;
	height:182px;
	background-repeat:no-repeat;
	background-position:top;
}
#splash a:hover {
	background-position:bottom;
}
#splash img {
	display:block;
}
#splash a.marketing {
	background-image:url(/Images/splash-marketing.jpg);
}
#splash a.consulting {
	background-image:url(/Images/splash-consulting.jpg);
}
#splash a.design {
	background-image:url(/Images/splash-design.jpg);
}
#splash a.web {
	background-image:url(/Images/splash-web.jpg);
}

/*
========================
Samples
========================
*/
#tabs {
	height:34px;
	margin:30px 0 0 0;
}
#tabs li {
	float:left;
	margin-right:10px;
	height:34px;
	background:#eee;
}
#tabs li a {
	float:left;
	line-height:34px;
	text-align:center;
	text-decoration:none;
	width:155px;
	font-weight:bold;
	color:#aaa;
}
#tabs li.active {
	background:#5e99e1 url(/Images/bg-bar-blue.gif) top no-repeat;
}
#tabs li.active a {
	color:#fff;
}
#tabContent {
	border:35px solid #d4d8d0;
}
#tabContent h2 {
	padding-top:10px;
	margin-bottom:14px;
}
#tabContent p {
	width:auto;
}
#tabContent p.customer {
	font-weight:bold;
	text-align:right;
}
#tabContent div.sampleItem {
	position:relative;
	padding:35px 30px 30px 264px;
	min-height:220px;
	background:url(/Images/divider.png) bottom left no-repeat;
}
#tabContent div.last {
	background:none;
}
 * html #tabContent div.sampleItem {
	height:220px;
 }
 #tabContent div.clear,
 * html #tabContent div.clear {
	height:0;
	min-height:0;
 }
#tabContent ul.bullet {
	padding-left:1.35em;
}
#tabContent a.screenshot {
	position:absolute;
	top:30px; left:30px;
	margin-right:16px;
	padding:11px 0;
}
#tabContent a.screenshot img {
	display:block;
	border:8px solid #ddd;
	border-right:none;
}
#tabContent span.edge {
	background:url(/Images/edge.png) no-repeat;
	width:6px;
	height:214px;
	display:block;
	position:absolute;
	left:232px;
	top:30px;
	z-index:1;
}
* html #tabContent span.edge {
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/Images/edge.png',sizingMethod='scale');
}
#tabContent .designItems {
	height:194px;
	padding:30px 0 0 30px;
}
#tabContent .designItems li {
	float:left;
	border:7px solid #e8e8e8;
	margin-right:16px;
}
#tabContent .designItems img {
	display:block;	
}
ul.gallery {
	padding:30px 0 30px 30px;
}
ul.gallery li {
	float:left;
	margin:0 23px 23px 0;
	border:3px solid #ccc;
	width:240px;
	height:150px;
}
ul.gallery img {
	display:block;
}

/*
========================
Content
========================
*/
ul.summaryList {
	float:right;
	font-size:11px;
	padding-left:15px;
	width:150px;
}
.summaryList li {
	font-family:Arial,Sans-Serif;
	list-style:disc;
	color:#333;
}
.summaryList li.title {
	list-style:none;
	margin-left:-15px;
	font-size:16px;
	color:#C10505;
	font-family:Calibri,Arial,Sans-Serif;
	margin-bottom:3px;
}
ul.boxList {
	clear:right;
	margin-top:30px;
}
ul.boxList li.boxListItem {
	padding:0 16px;
	margin-bottom:30px;
}
ul.boxList h3 {
	font-size:22px;
	font-family:Arial;
	font-weight:bold;
	letter-spacing:-1px;
	text-transform:none;
}
ul.boxList p {
	width:auto;
}
li.package {
	width:186px;
	float:left;
}
li.package h4 {
	color:#1f60b1;
	font-family:Calibri,Arial,Sans-Serif;
	font-size:16px;
	margin:4px 0;
}
li.package ul.bullet {
	padding-left:1.35em;
}
li.package li {
	font-size:11px;
	line-height:150%;
}

/*
========================
Contact Page
========================
*/
address {
	float:left;
	width:180px;
}
address span {
	display:block;
	line-height:130%;
}
ul.contact {
	margin-bottom:40px;
}
ul.contact span {
	float:left;
	width:18px;
	padding-left:3px;
	margin-right:.5em;
	color:#fff;
	font-weight:bold;
	background:#1F60B1;
}
ul.contact li {
	font-size:13px;
	float:none;
	width:auto;
	margin:0 0 .5em 0;
	line-height:120%;
}
ul.contact a {
	color:#1f60b1;
}

/*
========================
Terms
========================
*/
ol.terms {
	padding-left:20px;
}
ol.terms li {
	list-style-type:lower-alpha;
	margin-bottom:1em;
}
ol.terms li ul li {
	list-style-type:disc;
}
ol.terms li ul ol {
	padding-left:20px;
}
ol.terms li ul ol li {
	list-style-type:lower-alpha;
	margin:0;
}

/*
===================
Forms
===================
*/
.form {

}
.form label.text {
	float:left;
	width:200px;
	text-align:right;
	padding:3px 10px 0 0;
}
.form input.text,
.form textarea,
.form span.inputGroup {
	border:1px solid #ccc;
	width:250px;
	padding:4px;
}
.form textarea {
	height:100px;
}
.form .textarea textarea {
	width:600px;
	height:500px;
}
.form select {
	width:260px;
	padding:2px;
	border:1px solid #eee;
	border-top-color:#aaa;
	border-left-color:#aaa;
}
.form span.inputGroup {
	display:block;
	background:#fff;
	padding:6px;
	width:246px;
	margin-left:210px;
}
.form span.inputGroup label {
	position:relative;
	top:-1px;
	margin-left:3px;
}
.form p {
	clear:left;
	width:auto;
}
.form p.indent {
	margin-left:210px;
}
input.button {
	padding:5px 20px;
	margin-top:15px;
}

/*
===================
Validation
===================
*/
.validation-container {
	color:#fff;
	line-height:110%;
	margin-bottom:35px;
	padding-left:210px;
}
.validation-container h3 {
	font-size:16px;
	font-weight:bold;
	line-height:100%;
	color:#333;
	margin:0 0 6px 0;
	background:none;
	padding:0
}
.validation-container li {
	color:#C10505;
	margin:0;
	line-height:130%;
}

/*
========================
Articles
========================
*/
.articleList {
	width:100%;
	margin:15px 0 10px 0;
	background:#f7f7f7;
	border-top:1px solid #ccc;
}
.articleList td {
	padding:12px 50px 12px 12px;
	border-bottom:1px solid #ccc;
}
.articleList a {
	font-weight:bold;
	font-size:13px;
	color:#1F60B1;
}
#articleDisplay p {
	width:auto;
}
#articleDisplay span.highlight {
	font-weight:bold;
	color:#fff;
	background:#3AA828;
	padding:2px 5px;
}
#articleDisplay div.text {
	margin:20px 0;
}
#bookmarking {
	float:right;
	height:16px;
	margin-bottom:20px;
}
.promote {
	float:right;
	clear:right;
	width:200px;
	margin:5px 0 25px 25px;
	border:2px solid #bbb;
	border-bottom-width:6px;
	padding:10px;
}
.promote h4 {
	font-size:13px;
	color:#3AA828;
	border-bottom:1px dotted #bbb;
	padding:2px 0 3px 0;
	text-align:center;
}
.promote span {
	display:block;
	text-align:center;
	text-transform:uppercase;
	color:#999;
	font-size:9px;
	font-weight:bold;
	letter-spacing:1px;
	line-height:100%;
}
.promote p {
	font-size:11px;
	color:#555;
	margin-bottom:.5em;
}
.promote img {
	display:block;
	margin-bottom:12px;
}
.promote a {
	display:block;
	color:#1F60B1;
	font-weight:bold;
	text-align:center;
}

/*
========================
Testimonials
========================
*/
ul.testimonials {
	margin-top:30px;
}
ul.testimonials li {
	border-bottom:1px solid #ccc;
	margin-bottom:20px;
	padding:0 0 7px 250px;
	position:relative;
}
ul.testimonials p {
	width:auto;
}
ul.testimonials p.customer {
	text-align:right;
}
ul.testimonials img {
	position:absolute;
	top:0; left:0;
}
ul.testimonials strong {
	font-weight:bold;
}
ul.testimonials h4 {
	color:#5e99e1;
	font-size:18px;
	letter-spacing:-1px;
	margin-bottom:10px;
}

/*
========================
Terms
========================
*/
#terms p {
	width:auto;
}
#terms h4 {
	margin-top:25px;
}

/*
========================
Admin
========================
*/
#adminNav {
	padding-left:15px;
}
#adminNav a {
	color:#1F60B1;
	font-weight:bold;	
}
#adminNav li {
	list-style:disc;
}
ul.search {
	border-top:1px solid #ccc;
	margin-top:30px;
}
ul.search a {
	display:block;
	text-decoration:none;
	height:24px;
	line-height:24px;
	padding:0 4px;
	color:#1F60B1;
}
ul.search a span {
	float:left;
	width:300px;
}
ul.search a:hover {
	background:#ddd;
}
ul.search li {
	border-bottom:1px solid #ccc;
}