﻿/**
*	Clay Ant Creative Style Sheet
*/

/**
* Defaults
******************************************************************************************/
* { margin: 0px; padding: 0px; }

body {
	background: #333;
	color: #444;
	font: normal 12px Arial,Verdana,sans-serif;
	text-align: center;
}

#feed-icon img{float:right}

a { color: #8e9d98; outline: none; text-decoration: underline; } /*8E9D98*/
a:hover { color: #8e9d98; text-decoration: none; }

a.tt { color: #a7481a; border-bottom: dotted 1px #a7481a; text-decoration: none; }
a:hover.tt { color: #a7481a; border-bottom: solid 1px #a7481a; text-decoration: none; }
a img { border: none; }
b { font-weight: normal; }

input.txt {
	border: solid 1px #8E9D98;
	width: 254px;
	padding: 3px;
}

input.btn {
	background: url(button.gif) no-repeat 0% 0%;
	color: #fff;
	border: none;
	font-weight: bold;
	display: block;
	height: 38px;
	line-height: 38px;
	width: 108px;
}

textarea {
	border: solid 1px #8E9D98;
	height: 100px;
	padding: 3px;
	width: 254px;
}

.msgbox {
	background:#d0dbdd;
	border: dotted 1px #999;
	color: #000;
	font-weight: bold;
	margin: 10px 0px 5px 0px;
	padding: 10px;
}

.ajaxtooltip {
	position: absolute; /*leave this alone*/
	display: none; /*leave this alone*/
	width: 350px;
	left: 0; /*leave this alone*/
	top: 0; /*leave this alone*/
	background: #666;
	border: solid 10px #e6e6e6;
}

.trans {}

/**
* Classes
******************************************************************************************/
div.clear { clear: both; height: 0px; }
.play { background: url(play.gif) no-repeat 0% 50%; padding-left: 25px; line-height: 20px; display: block; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.quote { font-size: 14px; color: #333; font-weight: bold; line-height: 20px; }
.quote-bold-12 { font-size: 12px; color: #333; font-weight: bold; line-height: 20px; }
.float-left { float: left; width: 49%; }
.float-right { float: right; width: 49%; }

.float-l { float: left; width: 45%; }
.float-r { float: right; width: 45%; }

.img-right { float: right; margin: 10px 0px; }
.img-right2 { float: right; margin: 35px 0px 0px 0px; }
.img-left { float: left; }
.img-left2 { margin-top: 5px; float: left; margin-right: 10px; margin-bottom: 40px; }
.img-left3 { float: left; margin: 0px 10px 0px 0px; }
.img-left-side { float: left; margin-bottom: 80px; }
.border {border:1px solid #000000}

.codeFrame {
	border: solid 2px #da6228;
}

/**
* Header
******************************************************************************************/
#header-wrapper { background-color: #2e2e2e; border-bottom: solid 3px #8E9D98; height: 100px; width: 100%; }
#header { background: url(menu.jpg) no-repeat 0% 0%; height: 100px; margin: 0px auto; position: relative; text-align: left; width: 1000px;  }
#header #logo-holder { float: left; height: 100px; width: 160px; }
#header #logo-holder h1#logo a { background: url(logo.jpg) no-repeat 0% 0%; display: block; height: 100px; text-indent: -5000px; width: 152px; }
#header #navigation { background: transparent; color: #fff; float: right; height: 35px; line-height: 35px; margin-top: 65px; width: 740px; }
#header #navigation li { /*border-left: solid 2px #333;*/ margin-left: 2px; float: right; list-style-type: none; white-space: nowrap; }
#header #navigation li a { background: #56626E; color: #fff; display: block; font-size: 12px; font-weight: bold; padding: 0px 15px; text-decoration: none; }
#header #navigation a:hover { background: #da6228; color: #fff; text-decoration: none; }
#header #navigation .selected { background: #8E9D98; color: #fff; text-decoration: none; }
#header #navigation li.home { border-left: none; }

/**
* Content
******************************************************************************************/
#content-wrapper {
	text-align: center;
	width: 100%;
	/*background: #212221 url(background.jpg) repeat-x 0% 0%;*/
	background: #212221 url(tile.jpg) repeat 0% 0%;
}

#content {
	margin: 0px auto;
	position: relative;
	text-align: left;
	width: 1000px;
}

#banner {
	/*background: url(home.jpg) no-repeat 0% 0%;*/
	height: 420px;
	width: 1000px;
}

#banner div {
	float: right;
	color: #fff;
	font-size: 11px;
	width: 270px;
	padding: 60px 140px 0 0;
}

#banner h1 {
	color: #d0661c;
	font-size: 18px;
	font-weight: bold;
	font-style: italic;
	margin: 0;
	padding: 0;
}

#banner h2 {
	color: #fff;
	font-size: 14px;
	padding: 10px 0;
	margin: 0;
	font-weight: normal;
}

#banner p {
	padding: 5px 0;
}

#banner span {
	color: #d0661c;
	font-weight: bold;
}
.banner-home { background: url(home.jpg) no-repeat 0% 0%; }
.banner-brand { background: url(brand-identity.jpg) no-repeat 0% 0%; }
.banner-brand-s { background: url(brand-identity-s.jpg) no-repeat 0% 0%; }
.banner-web { background: url(web-design.jpg) no-repeat 0% 0%; }
.banner-web-s { background: url(web-design-s.jpg) no-repeat 0% 0%; }
.banner-work { background: url(work.jpg) no-repeat 0% 0%; }
.banner-work-s { background: url(work-s.jpg) no-repeat 0% 0%; }
.banner-glossary { background: url(glossary.jpg) no-repeat 0% 0%; }
.banner-glossary-s { background: url(glossary-s.jpg) no-repeat 0% 0%; }
.banner-team { background: url(team.jpg) no-repeat 0% 0%; }
.banner-contact { background: url(contact.jpg) no-repeat 0% 0%; }
.banner-work4us { background: url(work-for-us.jpg) no-repeat 0% 0%; }
.banner-sitemap { background: url(sitemap.jpg) no-repeat 0% 0%; }
.banner-error { background: url(error.jpg) no-repeat 0% 0%; }
.banner-generic { background: url(generic.jpg) no-repeat 0% 0%; }

#banner-sub {
	/*background: url(home.jpg) no-repeat 0% 0%;*/
	height: 120px;
	width: 1000px;
}

#banner-line {
	background: url(line1.gif) no-repeat 0% 0%;
	display: block;
	height: 3px;
	line-height: 3px;
	width: 1000px;
	font: 0px/0px "";
}

#wrapper {
	background: url(slice1.gif) repeat-y 0% 0%;
	width: 1000px;
}

body.home #wrapper {
	background: url(slice1.gif) repeat-y 0% 0%;
	width: 1000px;
}

body.marketing #wrapper {
	background: url(slice2.gif) repeat-y 0% 0%;
	width: 1000px;
}

#page { float: left; padding-bottom: 15px; width: 870px; }
#page ul { margin: 5px 10px 5px 15px; }
#page li { padding-bottom: 5px; }
#page p { line-height: 17px; padding: 5px 0px; }
#page .breadcrumb { font-size: 11px; line-height: 15px; padding: 15px 0px 10px 0px; }
#page span { font-style: normal; font-weight: bold; font-size: 12px; }
#page span.bold-gray { color: #333; }
#page span.bold-blue { color: #8E9D98; }
#page span.bold-orange { color: #da6228; }
#page span.larger{ font-size: 14px; font-weight: bold; color: #da6228; }
#page h1 { color: #56626E; font-size: 24px; font-weight: bold; }
#page h1 span { font-size: 24px; color: #db5c2d; font-style: normal; }

#page h1 span.alt { font-size: 24px; color: #333; font-weight: bold; }

#page h2 { color: #56626E; font-size: 16px; font-weight: bold; }
#page h3 { color: #999; font-size: 18px; font-weight: bold; }
#page .legend { color: #ccc; font-size: 11px; padding: 5px 0px 0px 20px; }
#page .green { background: url(green-circle.gif) no-repeat 0% 50%; }
#page .orange { background: url(orange-circle.gif) no-repeat 0% 50%; }
#page .semi { background: url(semi-circle.gif) no-repeat 0% 50%; }

#page .box { float: left; width: 106px; }
#page .box h3 { padding: 10px 20px 5px 0px; }
#page .box p { padding: 5px 20px 5px 0px; }

#page #column-400 { float: left; width: 200px; }
#page #column-400 h1 { padding: 15px 0px 10px 80px; }
#page #column-400 p { padding: 5px 0px 5px 80px; }
#page #column-400 p.overflow { padding: 5px 0px; }

#page #column-260 { float: right; width: 260px; }
#page #column-260 h2 { padding: 15px 0px 10px 0px; }
#page #column-260 p { padding: 5px 0px; }
#page #column-260 p.showcase { border-bottom: solid 1px #ccc; padding: 5px 0px 0px 0px; }
#page #column-260 p.play { float: left; line-height: 20px; padding: 5px 0px 0px 0px; text-align: left; width: 50%; }
#page #column-260 p.view { float: right; line-height: 20px; padding: 5px 0px; text-align: right; width: 40%; }

#page .block-620 {
	/*background: url(dots.gif) repeat-x 0% 100%;*/
	float: right;
	padding-bottom: 10px;
	width: 620px;
}

#page .block-work {
	background: url(dots.gif) repeat-x 0% 100%;
	float: right;
	padding-bottom: 10px;
	margin-bottom: 20px;
	width: 620px;
}

#page #gallery {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0;
}

#page #gallery  li {
	display: block;
	font-size: 11px;
	float: left;
	width: 122px;
	margin: 0 25px 20px 0;
}

#page #gallery  a {
	text-decoration: none;
}

#page #gallery  a:hover {
	text-decoration: none;
}

#page #gallery img {
	margin-bottom: 5px;
}

#page .logolist {
	border-bottom: 1px dotted #ccc;
	list-style: none;
	height: 150px;
	margin: 20px 0 0 0;
	padding: 0;
}

#page .logolist  li {
	display: block;
	font-size: 11px;
	font-weight: bold;
	float: left;
	margin: 0 15px 10px 0;
}

#page .logolist  a {
	text-decoration: none;
}

#page .logolist  a:hover {
	text-decoration: none;
}

#page .logolist img {
	margin-bottom: 5px;
}

#page .block-work h2 {
	color: #333;
	font-size: 16px;
	padding: 10px 0 0 0;
	margin: 0;
	font-weight: bold;
}

#page .block-work p {
	padding: 5px 0;
	font-size: 11px;
}

#page .work-frame {
	background: #fff;
	border: solid 1px #ccc;
	padding: 5px;
}

#page p.heading {
	padding: 10px 0px 5px 0px;
}

#page p.indent {
	padding: 0px 0px 5px 20px;
}



#page .block-620 h2 { /*background: #fff url(dots.gif) repeat-x 0% 0%;*/ color: #444; padding: 10px 0px; }

#page .block-620-work {
	border-bottom: solid 1px #ccc;
	padding-top: 20px;
	padding-bottom: 20px;
	float: right;
	width: 620px;
}

#page .block-620-work p { color: #999; font-size: 11px; padding: 5px 0px 5px 40px; margin-left: 360px; }
#page .block-620-work p.links { color: #999; font-size: 12px; padding: 10px 0px 10px 40px; margin-left: 360px; }
#page .block-620-work h2 { color: #333; padding: 0px 0px 0px 40px; margin-left: 360px; }
#page .block-620-work h2.green { background: #fff url(green-circle.gif) no-repeat 20px 1px; }
#page .block-620-work h2.orange { background: #fff url(orange-circle.gif) no-repeat 20px 1px; }
#page .block-620-work h2.semi { background: #fff url(semi-circle.gif) no-repeat 20px 1px; }

#page .block-620-sites {
	padding-top: 20px;
	padding-bottom: 20px;
	float: right;
	width: 620px;
}

#page .block-620-sites ul{
	list-style: none;
	margin: 5px 0px;
}

#page .block-620-sites a img{
	border: solid 1px #666;
}

#page .block-620-sites a{
	line-height: 64px;
}


#page .block-700 {
	background: #f3f3f3;
	border: solid 10px #e6e6e6;
	float: left;
	margin: 10px 0px;
	width: 680px;
}

#page .block-700-jargon {
	background: #303030 url(../images/glossary/of-the-month.jpg) no-repeat 0% 0%;
	border: solid 10px #62686a;
	float: left;
	margin: 10px 0px;
	padding-top: 30px;
	width: 680px;
}

#page .block-700-flash { float: left; width: 700px; }

#page .block-700 h2 { color: #709394; padding: 10px 10px; }
#page .block-700 p { padding: 5px 10px; }
#page .block-700 ol { list-style: decimal; margin: 0px 0px 10px 10px; }
#page .block-700 li { margin: 0px 0px 2px 20px; padding-left: 5px; }

#page .column-320 { float: left; width: 620px; }
#page .column-320 h1 { padding: 10px 0px 10px 0px; }
#page .column-320 p { padding: 5px 0px; }


#page .column-full { width: 620px; }
#page .column-full h1 { padding: 10px 0px 10px 0px; }
#page .column-full p { padding: 5px 0px; }


#page .column-260 {
	float: right;
	width: 260px;
}

#sidebar {
	float: right;
	padding-right: 40px;
	width: 220px;
}

#sidebar h1 {
	background: #56626E;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding: 10px;
}

#sidebar span { color: #da6228; font-size: 14px; font-weight: bold; }

#sidebar p { line-height: 17px; padding: 5px 15px; }

#sidebar p.small { line-height: 16px; padding: 5px 20px; font-size: 11px; }

#sidebar p.contactdetails {
	background:#d0dbdd;
	font-size: 10px;
	line-height: 17px;
	padding: 10px 15px;
}

#sidebar p.contactdetails span{
	color: #333;
	font-size: 11px;
	font-weight: bold;
}

#sidebar ul {
	margin: 0px;
	list-style: none;
}

#sidebar li {
	background: #c6cecb url(dots.gif) repeat-x 0% 100%;
	/*padding: 7px 10px 8px 10px;*/
}

#sidebar li a { color: #56626E; text-decoration: underline;  display: block;padding: 0px; padding: 7px 10px 8px 10px;}

#sidebar li a:hover, #sidebar .selected { padding: 7px 10px 8px 10px; color: #db5c2d; text-decoration: none; background: #fff url(dots.gif) repeat-x 0% 100%; }

#teasers {
	background: #fff url(dots.gif) repeat-x 0% 0%;
	clear: both;
	height: 101px;
	margin: 0px 40px;
	padding-top: 1px;
	width: 1000px;
}

#teasers ul { list-style: none; margin: 0px 10px; }

#teasers li {
	background: #fff;
	color: #666;
	float: left;
	display: block;
	height: 100px;
	width: 300px;
}

#teasers img { float: left; margin: 0px 10px 10px 0px; }

#teasers h1 {
	color: #8E9D98;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 10px 5px 0px;
}

#teasers p { font-size: 11px; line-height: 15px; padding: 5px 0px 5px 0px; }

/*********/

#sidebar #teasers-side {
	width: 220px;
}

#sidebar #teasers-side ul { list-style: none; margin: 0px; }

#sidebar #teasers-side li {
	color: #666;
	float: left;
	display: block;
	/*height: 100px;*/
	margin: 5px 0px 5px 0px;
	padding: 0px;
	width: 220px;
	background: none;
}

#sidebar #teasers-side img { float: left; margin: 0px 5px 40px 0px; }

#sidebar #teasers-side h2 {
	color: #8E9D98;
	font-size: 12px;
	font-weight: bold;
	padding: 10px 10px 5px 0px;
}

#sidebar #teasers-side p { font-size: 11px; line-height: 15px; padding: 5px 10px 5px 0px; }

#sidebar #teasers-side a { padding: 0px; color: #8e9d98; text-decoration: underline; background: none;}
#sidebar #teasers-side a:hover { color: #8e9d98; text-decoration: none; }



/**
* Footer
******************************************************************************************/
#footer {
	background: #333 url(footer-sb1.jpg) no-repeat 0% 0%;
	clear: both;
	color: #999;
	font-size: 10px;
	margin: 0px auto;
	padding: 30px 0px;
	position: relative;
	text-align: left;
	width: 1000px;
}

/* Used for home page footer where sidebar doesn抰 extend over into the footer */
.home #footer, .marketing #footer { background-image: url(footer.jpg); }

#footer span { padding-right: 5px; }
#footer a { color: #999; padding: 0px 5px; text-decoration: none; }
#footer a:hover { color: #ccc; text-decoration: underline; }
#footer .foot-left { float: left; padding-left: 10px; width: 600px; }
#footer .foot-right { float: right; padding-right: 10px; text-align: right; width: 200px; }

#page .busting {
	border-collapse: collapse;
	font-size: 12px;
	margin: 20px 0;
	width: 620px;
}

#page .busting td {
	border-right: dotted 1px #b4b5b5;
	padding: 0 20px;
}

#page .busting td.alt {
	border-right: none;
}

#page .busting td h2 {
	color: #da6228;
	font-size: 16px;
	font-weight: bold;
}

#page .busting td a.btn {
	background: #333 url(blank-btn.jpg) no-repeat 0% 0%;
	display: block;
	color: #fff;
	font-weight: bold;
	height: 35px;
	line-height: 35px;
	text-align: center;
	width: 145px;
	text-decoration: none;
}


#page .glossary {
	border-collapse: collapse;
	font-size: 12px;
	margin: 20px 0;
	width: 620px;
}

#page .glossary td {
	padding: 5px 10px 20px 10px;
}

#page .glossary td.jargon {
	border-right: dotted 1px #b4b5b5;
	color: #da6228;
	font-weight: bold;
	text-align: right;
	width: 150px;
}

#page .glossary h2 {
	color: #da6228;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
	margin: 0;
}

#page .glossary td.desc {
	color: #333;
}

#page .glossary2 {
	border-collapse: collapse;
	font-size: 12px;
	margin: 20px 0;
	width: 670px;
}

#page .glossary b {
	color:#333;
	font-weight: bold;
}

#page .glossary2 b {
	color:#ccc;
	font-weight: bold;
}

#page .glossary2 td {
	padding: 5px 10px 5px 10px;
}

#page .glossary2 td.jargon {
	border-right: dotted 1px #b4b5b5;
	color: #56626e;
	font-weight: bold;
	text-align: right;
	width: 220px;
}

#page .glossary2 h2 {
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
	margin: 0;
}

#page .glossary2 td.desc {
	color: #fff;
}


/***/


#page .team {
	border-collapse: collapse;
	font-size: 12px;
	padding: 10px 0;
	width: 620px;
}

#page .team div {
	padding: 10px;
	border-bottom: dotted 1px #b4b5b5;
}

#page .team div.none {
	border-bottom: none;
}

#page .team div.text {
	padding: 0px 10px;
	text-align: right;
}

#page .team div.text2 {
	padding: 0px 10px;
}

#page .team h2 {
	padding: 0;
	margin: 10px 0 0 0;
	font-size: 16px;
	font-weight: bold;
	color: #da6228;
}
#page .team h2 A:link {
 color: #da6228;
 TEXT-DECORATION: none
}
#page .team h2 A:visited {
 COLOR: #da6228;
 TEXT-DECORATION: none
}
#page .team h2 A:hover {
 COLOR: #da6228;
 text-decoration: underline;
}
#page .team h2 A:active {
 COLOR: #da6228;  
 text-decoration: underline;
}
#page .team h2 A {
 COLOR: #da6228;  
 text-decoration: underline;
}


#page .team h3 {
	color: #8f9d98;
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-weight: bold;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	margin: 0;
	color: #fff;
	background-color: #eee;
	height: 118px; /* 138 - 20 = 118 */
	font-size: 10px;
	padding: 10px 20px;
	text-align: left;
	/*opacity: 0.95;*/
	width: 180px; /* 220 - 40 = 180 */
}
#tooltip h3, #tooltip div { margin: 0; padding: 0;}

#tooltip h3 {
	color: #fff;
	font-size: 11px;
	margin: 0;
	border: none;
	font-weight: bold;
	padding: 0 0 10px 0;
}

#tooltip.bubble {
	background: url('../images/template/tooltip.png');
}

#sidebars {
	float: right;
	padding-right: 40px;
	width: 220px;
}

#sidebars h1 {
	background: #56626E;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding: 10px;
}

#sidebars span { color: #da6228; font-size: 14px; font-weight: bold; }

#sidebars p { line-height: 17px; padding: 5px 15px; }

#sidebars p.small { line-height: 16px; padding: 5px 20px; font-size: 11px; }

#sidebars p.contactdetails {
	background:#d0dbdd;
	font-size: 10px;
	line-height: 17px;
	padding: 10px 15px;
}

#sidebars p.contactdetails span{
	color: #333;
	font-size: 11px;
	font-weight: bold;
}

.sidebarss {
	margin: 0px;
	list-style: none;
}

.sidebarss li {
	background: #c6cecb url(dots.gif) repeat-x 0% 100%;
	/*padding: 7px 10px 8px 10px;*/
}

.sidebarss li a { color: #56626E; text-decoration: underline;  display: block;padding: 0px; padding: 7px 10px 8px 10px;}

.sidebarss li a:hover { padding: 7px 10px 8px 10px; color: #db5c2d; text-decoration: none; background: #fff url(dots.gif) repeat-x 0% 100%; }
.selected { padding: 7px 10px 8px 10px; color: #db5c2d; text-decoration: none; background: #fff url(dots.gif) repeat-x 0% 100%; }