@import url("reset.css");
@import url("typography.css");

/*div, img{border: 1px solid #FFF;}*/

html, body{ margin:0; padding:0; text-align:center;} 

body { font-family:Arial, Helvetica, sans-serif; background: #f3f3f3; color:#272626;}

body.conversion, body.home {overflow-x: hidden;}

a{text-decoration: underline; color: #272626;}
a:hover{text-decoration: underline; color: #0071c7;}

p {color: #272626;}

h1,h2,h3,h4,h5,h6{margin-bottom:18px; color:#006495; line-height:25px}
h1{font-size:30px;}
h2{font-size:26px; font-weight:bold; /*background: url("../graphics/claw.png") 2px 14px no-repeat;*/ padding: 10px 0 15px /*25px*/; border-bottom:1px solid #dedede;  line-height:35px!important;  }
h3{font-size:23px; font-weight:bold; /*background: url("../graphics/claw.png") 2px 14px no-repeat;*/  padding: 10px 0 15px /*25px*/; border-bottom:1px solid #dedede;}
h4{font-size:18px; font-weight:bold; /*background: url("../graphics/claw.png") 2px 14px no-repeat;*/  padding: 10px 0 15px /*25px*/; border-bottom:1px solid #dedede; }
h4.home-page-seo-blog-title{font-size:14px; font-weight:bold; /*background: url("../graphics/claw.png") 2px 14px no-repeat;*/  padding: 5px 0 5px /*25px*/; border-bottom:1px solid #dedede; lineheight: 110%; }

h4.home-page-seo-blog-title a, h4.home-page-seo-blog-title a:visited{color:#006495; text-decoration:none;}
h4.home-page-seo-blog-title a:hover{color:#006495; text-decoration:underline;}

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

h1#logoTag{font-size: 13px; font-weight: normal; line-height:100%;}

.alignright{float:right; display:inline; margin:0 10px 15px 15px;}
.alignleft{float:left; display:inline;  margin:0 15px 15px 10px;}

.clear-fix{width: 100%; height: 1px; clear: both; display: block; position:relative;}

/*DONATE NOW*/

#donate{width:100%;background-color:#FFFFFF; text-align:center; font-size:14px; font-weight:bold; position:relative;}
#donate a{background:url("../images/donate2.jpg") 0 0px no-repeat; position:relative; display:block; width:716px; height:50px; margin:0 auto 0 auto;}


#quicklinks{position:absolute; top:0px; right:0;  width:100%; z-index:999999; background:#01293f; height: 30px;}
#quicklinks ul {width:990px; margin:0 auto; background:none!important; margin-top: 5px;}
#quicklinks li{background:none; float:right; display:block;margin-right: 10px;}
#quicklinks li a{color:#FFFFFF; font-weight: bold; text-decoration:none;}
#quicklinks li a:hover{text-decoration:underline;}

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

/*FORM*/
label{/*background-color:#00FF99;*/ display:block; margin-bottom:5px; color:#666666; font-weight:bold;}
input.txt, textarea, select{width:300px; margin-bottom:10px; padding:3px;}
.submit{clear:both; display:block;}
.required{color:#FF0000; font-weight:normal;}

input:focus{}
form#rank-prediction{padding:0; margin:0;}


/*PAGE WIDTH*/
#pagewidth, #header-inner, #panel-inner, #footer-inner{ width:1000px; text-align:left; margin-left:auto; margin-right:auto;} 
#panel-inner{position:relative;}
#wrapper{ background:url("../graphics/main-bg.gif") repeat-y top left; padding:0 0 50px 0; margin-top:20px;}
#wrapper.hp{ background-image:url("../graphics/2-col-bg.gif") ;}
#wrapper-inner{padding:35px 0 0 0; background:url("../graphics/main-top.png") no-repeat 10px 0;}

/*--HEADER--*/
#conversion-header{position:relative;width:100%; height:486px; background: #003454 url("../graphics/header-bg.jpg") repeat-x top left;}
#header{position:relative;width:100%; height:630px; background: #003454 url("../graphics/conversion-header-bg.gif") repeat-x top left; border-bottom: 5px solid #004b6f; -moz-box-shadow:-10px 0 10px #000000; -webkit-box-shadow:0 0 10px #000000; box-shadow:0 0 10px #000000; margin-right: -10px; top: 20px;}

.conversion #header{position:relative;width:100%; height:481px; background: #003454 url("../graphics/conversion-header-bg.gif") repeat-x top left; border-bottom: 5px solid #004b6f; -moz-box-shadow:0 0 10px #000000; -webkit-box-shadow:0 0 10px #000000; box-shadow:0 0 10px #000000;}

a#twitter{width:101px; height:122px; position:absolute; top: 70px;  left:50%; margin-left: 483px; background:url("../graphics/twitter-vertical.png") top left no-repeat; text-indent:-5000px; z-index:9500;}
#header a#header-request-quote{width: 235px; height: 41px; text-indent: -9999em; margin:0; padding: 0; background: transparent url("../graphics/request-button.png") 0 0 no-repeat; *margin-left: 235px; position: absolute; right: 10px; bottom: 5px;  }

 
 
body.inner #header{height:186px; border-bottom:1px solid #FFFFFF;}

#header-inner{background:url("../graphics/blueclaw-homepage-header-inner-bg.gif") no-repeat 0 20px; position:relative;}
#conversion-mast-head{background:url("../graphics/blueclaw-homepage-header-inner-bg.gif") no-repeat; }

#conversion-mast-head #col1{width:310px; height:125px; float:left; padding-left:10px; display:inline; position:relative;}
#conversion-mast-head #col2{width:650px; height:126px; float:right; padding-right:10px; display:inline; position:relative;}


/******* Hot Off the Blog *********/
#hot-blog-container{
	width: 360px;
	height: 75px;
	background-color: #006da1;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 5px -5px 5px #002d45;
	-moz-box-shadow: 0 -5px 10px #002d45;
	box-shadow: 5px -5px 5px #002d45;
	position: absolute;
	top: 39px;
	left: 0px;
	padding: 10px;
	/*margin-left: -180px; 
	margin-top: 40px;
	margin-left: -260px \9;
	*margin-left: 0;*/
	}
	
#hot-blog-container img{
 position: absolute;
 left: -30px;
 top: -30px;
 }
 
 #hot-blog-container a{
 color: #FFF;
 text-decoration:none;
 margin-left: 0px;
 font-size: 14px;
 z-index: 999;
 }
 
 #hot-blog-container a:hover{
 text-decoration: underline;
 }
 
#hot-blog-container ul a:visited, #hot-blog-container ul a:hover{
  color: #FFF;
  }

#hot-blog-container span{
color: #FFFFFF;
font-weight: bold;
text-transform:uppercase;
display: block;
font-size: 18px;
margin-bottom: 13px;
}

a#seo-blog-link {
	color: #E9B654;
	display: block;
	font-size: 14px;
	text-align:right;
	text-decoration:none;
	position: absolute;
	bottom: 10px;
	right: 10px
	}
	
ul#seo-blog-homepage{
margin: 0;
padding: 0;
}

#seo-blog-homepage li{
list-style:none;
margin: 0;
padding: 0;
font-size: 18px;
}

#header_client_logos{width: 100%; height: 55px; border-top: 5px solid #006495; background: url("../graphics/logos-bg.jpg") repeat-x; background: -moz-linear-gradient(100% 100% 90deg, #cbcccd, #fafafa); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#cbcccd));}
#client-logos{width: 100%; height: 55px;  background: url("../graphics/client-logos.png") center top no-repeat; position: relative; display:block;}

#logo { float: left; width: 258px; height: 50px; margin: 30px 0 0 0; padding: 0; line-height: normal; background: transparent url("../graphics/logo.png") 0 0 no-repeat; }
#logo a { display: block; float: left; width: 258px; height: 50px; text-indent: -9999em; margin: 0; padding: 0; background: transparent; }
#logoTag { float: left; color: #fff; font-weight: bold; margin: 10px 0 0 0; padding: 0; width:450px;}
#logoTag a { color: #fff; text-decoration: none; }

#phonenumber {float: right; width: 232px; height: 32px; text-indent: -9999em; margin: 35px 0 0 0; padding: 0; background: transparent url("../graphics/number.png") 0 0 no-repeat; }
#numberTag { float: right; color: #fff; font-weight: bold; font-size: 100%; width:450px; text-align:right; margin: 10px 0 0 0; }


#nav {margin: 0; padding: 0; background:url("../graphics/nav-bg.png") top left repeat-x; height: 52px; padding:8px 0 0 10px; float:left; width:990px; z-index:9000;}
#nav ul { float: none; width: 980px; background: transparent; margin: 0; padding: 0; list-style: none; font-size: 14px; }
#nav ul li { position: relative; z-index: 8000; float: left; margin: 0; padding: 0; background: transparent; display:inline;}
#nav ul li a { float:left; display: inline; font-weight: bold; text-decoration: none; margin: 0; padding: 14px 7px 18px 7px;background: transparent; color: #777; }
#nav ul li a:hover { color: #272626!important; background: url("../graphics/nav-hover.gif") top left repeat-x; z-index: 9000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

#nav ul li:hover { color: #272626!important; background:  url("../graphics/nav-hover.gif") bottom left repeat-x;  }
#nav ul li:hover a { color: #272626!important; }
#nav ul li .drop { display: none; }
#nav ul li:hover .drop { display: block; position: absolute; left: -15px; top: 52px; z-index: 9999!important; width: 230px; height: auto; background: transparent url("../graphics/drop.png") bottom left no-repeat!important; margin: 0; padding: 0 15px 20px 15px; }
#nav ul li:hover .drop li { float: left; width: 193px; background: transparent url("../graphics/fadeTop.png") 0 0 repeat-x; margin: 1px 0 0 0; padding: 15px 15px 0 10px; }
#nav ul li:hover .drop .dropBox { float: left; width: 173px; margin: 0; padding: 0 0 10px 20px; background: transparent url("../graphics/iconArrow.png") 0 2px no-repeat;}
#nav ul li:hover .drop .dropBox p { color: #666; margin: 0 0 2px 0; padding: 0; background: transparent; font-size: 90%; line-height: normal; }
#nav ul li:hover .drop .dropBox p a { text-decoration: none; color: #0071A9!important; margin: 0; padding: 0; background: transparent; font-weight: bold; width:180px;}
#nav ul li:hover .drop .dropBox p a:hover { text-decoration: underline; background: transparent; }

#nav ul li#navSeo ul.drop li .dropBox p strong a{background:none!important; color:#008bcb!important;}
#nav ul li#navDevelopment ul.drop li .dropBox p strong a{background:none!important; color:#008bcb!important;}
#nav ul li#navPpc ul.drop li .dropBox p strong a{background:none!important; color:#008bcb!important;}

body.home #nav ul li#navHome a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.home #nav ul li#navHome a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}

body.seo #nav ul li#navSeo a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.seo #nav ul li#navSeo a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}


body.ppc #nav ul li#navPpc a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.ppc #nav ul li#navPpc a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}

body.pitch #nav ul li#navPitch a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.pitch #nav ul li#navPitch a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}

body.quote #nav ul li#navQuote a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.quote #nav ul li#navQuote a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}

body.development #nav ul li#navDevelopment a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.development #nav ul li#navDevelopment a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}

body.portfolio #nav ul li#navPortfolio a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.portfolio #nav ul li#navPortfolio a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}
#nav ul li#navPortfolio ul.drop li .dropBox p strong a{background:none!important; color:#008bcb!important;}

body.contact #nav ul li#navContact a{color: #fff!important; background: #00537C url("../graphics/nav-current.gif") top left repeat-x; }
body.contact #nav ul li#navContact a:hover{ background: url("../graphics/nav-current.gif") top left repeat-x;}


#nav ul li#navPpc ul.drop li .dropBox p strong a{background:none!important; color:#008bcb!important;}


#panel2{position:relative; height:5px; border-bottom:1px solid #FFFFFF; background:#001f32;width:100%;}

table a{font-weight:bold;}
table{border-collapse:collapse;  margin-bottom:20px; width:447px}
#pos{color:#339900;}
thead{background:#000000; color:#fcb034; }
thead th{padding:8px;}
caption{font-size:14px; font-weight:bold; text-align:center;}

.odd{background:#f3f3f3;}
th,td{padding:5px;}
/*--PANEL--*/
#panel{position:relative; height:201px; background:url("../graphics/panels-bg.jpg") repeat-x top left; width:960px; padding:0 10px;margin-left: 10px;} 
#panel-inner{height:200px; /*background-color:#330066;*/}
 
#feature{width: 980px; height: 383px; background: float:left; clear:both; /*position:relative;*/ margin-left: 10px;}
#feature-left{position:absolute; top:0; left:10px; width:674px; height:300px}
#feature-right{position:absolute; top:0; right:9px; width:306px; height:300px;}
#featureTabs { position: absolute; bottom: 0; left: 18px; float: left; clear: both; width: 510px; margin: 0; padding: 0; background: transparent; list-style: none; }
#featureTabs li { float: left; width: 160px; margin: 0 10px 0 0; padding: 0; background: transparent; }
#featureTabs li span { float: left; width: 160px; margin: 0; padding: 13px 0 12px 0; background: #002E45 url("../graphics/tab.png") -160px 0 no-repeat; display: block; text-align: center; font-size: 110%; font-weight: bold; text-decoration: none; color: #fff; cursor:pointer }
#featureTabs li span:hover { background: #005A80 url("../graphics/tab.png") -320px 0 no-repeat; text-decoration: none; color: #fff; }
#featureTabs li.active span { background: #D6D8D8 url("../graphics/tab.png") 0 0 no-repeat; text-decoration: none; color: #444; }
#featureTabs li.ui-tabs-selected span { background: #D6D8D8 url("../graphics/tab.png") 0 0 no-repeat; text-decoration: none; color: #444; }

#flash{position:absolute; top:15px; left:14px; z-index:1;}

/*--LEFTCOL--*/
#leftcol{width:239px; float:left; position:relative; padding-left:15px; margin-left:10px; display:inline; }

ul.side-nav{list-style:none; margin:0 0 15px 0; padding:0; width:225px; float:left; position:relative;}
ul.side-nav li a{font-weight:bold;width:197px;background:url("../graphics/square-bullet.gif") no-repeat 2px 50%; padding:6px 10px 6px 24px; text-decoration:none; color:#342f2f; display:block; border-bottom:1px solid #dedede;}
ul.side-nav li a:hover{color:#0071C7; text-decoration:none; background-color:#EBEBEB}

h2.sect-title {clear: both; margin:0 0 5px 0; padding:0; font-size:12px; font-weight:bold; color:#FFFFFF;float:left; display:inline; width:225px; background:url("../graphics/sect-bg.jpg") no-repeat right; line-height:24px!important;}
h2.sect-title span{width:10px; height:26px; float:left; display:inline; background:url("../graphics/sect-bg.jpg") no-repeat left;}

/*--TWOCOLS--*/
#twocols{width:735px; float:right; position:relative; }

/*--RIGHTCOL--*/
#rightcol{width:240px; float:right; position:relative; margin-right:8px; display:inline; /*background-color:#00FF99;*/}
#rightcol ul{line-height:18px;}
 
#latestBlog{position:relative; top:0; left:0; min-height:200px;}
#latestBlog h3{background:none; font-size:11px; padding:0; margin:0;}
#latestBlog h2.sect-title{width:225px;}
#latestBlog h2.sect-title a{color:#FFFFFF; text-decoration:underline;}
#latestBlog h2.sect-title a:hover{text-decoration:none;}
#latestBlog ul {list-style:none; margin:0; padding:0px; overflow:hidden; height:125px; position:absolute; top:30px; left:0;}
#latestBlog ul li a{width:220px; padding:6px 0 6px 9px; text-decoration:none;  display:block; border-bottom:1px solid #dedede;color:#4D4D4D; *position: absolute;}
#latestBlog ul li a:hover{color:#0071C7; text-decoration:none; background-color:#e0e0e0}
#latestBlog ul li#last a{border-bottom:0;}
#latestBlog ul li h4{margin:0px; padding:0px; font-size:12px; font-weight:bold; background:none; line-height:18px; letter-spacing:normal; border-bottom:none;}


.accordion div ul.testimonials li:hover{background:none!important; cursor:text; color:#272626; border-bottom:1px solid #005a8f;}

.accordion div ul#casestudy{margin:0!important; padding:0!important;}
.accordion div ul#casestudy li:hover{background:none!important; cursor:text; color:#272626; border-bottom:1px solid #005a8f;}
.accordion div ul#casestudy li{border-bottom:none!important; margin:0!important; padding:0!important; }




.accordion {width: 225px;}
.accordion div ul {margin:0; padding:0; list-style:none; font-size:12px; color:#666666;}
.accordion div ul li{padding:8px 15px 8px 15px; /*background:url("../graphics/accordion-bg.jpg") left bottom;*/ border-bottom:1px solid #dedede;}
.accordion div ul li a{color:#666666;}
.accordion div ul li:hover{color:#FFFFFF; background:url("../graphics/accordion-bg.jpg") 100% bottom; cursor:pointer; border-bottom:1px solid #005a8f; border-bottom:1px solid #005a8f; }
.accordion div ul li:hover a{color:#FFFFFF; text-decoration:none;}
.accordion div ul li:hover .acc-title{color:#FFFFFF; text-decoration:none;}
/*.accordion div ul li a{display:inline-block; margin:0; padding:0; border-left:5px solid #bfbfbf; padding-left:10px; width:210px;}*/
/*.accordion div ul li a:hover{border-left:5px solid #000000;} */ 
.accordion a.title {cursor:pointer;display:block; height:26px; text-decoration: none;font-weight: bold;font-size: 12px;	color: #FFFFFF; background: url("../graphics/accordion.jpg") top left; line-height:24px; padding-left:15px; margin-bottom:2px;}
.accordion a.title:hover {background: url("../graphics/accordion.jpg") bottom left;}
.accordion a.selected {background: url("../graphics/accordion.jpg") bottom left;}
.acc-title {display:block; font-weight:bold; margin-bottom:5px; color:#0071a9;}


.slogos{width:225px; position:relative; padding:0 0 15px 0; border-bottom:1px solid #CCCCCC;}

#google-logos{background:url("../graphics/google-logos.gif") no-repeat top left; width:225px; height:115px; margin:15px 0 15px 0; position:relative;}
#google-logos a {width:112px;float:left; display:inline; height:115px; text-indent:-5000px }
 
 
/*--MAINCOL--*/
#maincol{/*background-color: #8C4F03;*/ float: left; display:inline; position: relative; width:447px; padding:0 11px 0 14px; font-size:13px; }
#maincol.hp{/*background-color: #8C4F03;*/ float: left; display:inline; position: relative; width:650px; padding:0 11px 0 14px; font-size:13px; margin-left:20px; }
#maincol ul{line-height:25px;}
.medium{font-size:14px;}

/*CASE STUDY*/
.casestudy{float:left; display:inline; margin:0 15px 0 0; text-align:center; font-size:11px}
.casestudy p{margin:5px 0 0 0; padding:0;}
.casestudy a{background:#ffffff url("../graphics/casestudy-bg.jpg") repeat-x bottom left; display:block; padding:5px; -moz-border-radius: 8px; border-radius: 8px; text-decoration:none; border:1px solid #c8c8c8}
.casestudy a:hover{background:#ffffff url("../graphics/casestudy-bg-hover.jpg") repeat-x bottom left;  border:1px solid #acacac}

/*ECOMMERCE PORTFOLIO*/
.ecomm-block{float:left; margin:0 0 20px 0; text-align:center; font-size:11px; }
.ecomm-block p{margin:10px 0 0 0; padding:0;}
.ecomm-block a{background:#ffffff url("../graphics/casestudy-bg.jpg") repeat-x bottom left; display:block; padding:7px; -moz-border-radius: 8px; border-radius: 8px; text-decoration:none; border:1px solid #c8c8c8}
.ecomm-block a:hover{background:#ffffff url("../graphics/casestudy-bg-hover.jpg") repeat-x bottom left;  border:1px solid #acacac}




/*BLOCK*/
.block{margin:0 0 20px 0;}
.block ul{list-style:none; padding:0; margin:0; width:446px;  line-height:inherit!important;}
.block ul li {width:341px; padding:15px 15px 15px 90px;}
.block ul li#last {border-bottom:0;}

/*TICK BLOCK*/
.block.tick ul li {background:url("../graphics/tick-icon.png") 20px 50% no-repeat;}
.block.plus ul li {background:url("../graphics/plus-icon.png") 20px 50% no-repeat;}
.block.tick ul li:hover {background: #FFFFFF url("../graphics/tick-icon.png") 20px 50% no-repeat; cursor:default}
.block.plus ul li:hover {background: #FFFFFF url("../graphics/plus-icon.png") 20px 50% no-repeat;cursor:default}


/*BLUE BLOCK*/
.block.blue ul { background: #eefbff url("../graphics/blue-block.jpg") 0 0 repeat-y; border-bottom:1px solid #88a8b3; border-top:1px solid #88a8b3;  }
.block.blue ul li {border-bottom:1px solid #afc8d0; color:#0a2345;}


/*YELLOW BLOCK*/
.block.yellow ul { background: #fffbe1 url("../graphics/yellow-block.jpg") 0 0 repeat-y; border-bottom:1px solid #ffec6e; border-top:1px solid #ffec6e;  }
.block.yellow ul li {border-bottom:1px solid #e8de9d; color:#453d0a;}


/*CARTS*/

ul.ecomm-carts{background:#f1f1f1; list-style:none; border: 1px solid #dbdbdb; padding:0 0 0 0; margin-left:0; line-height:19px!important;}
ul.ecomm-carts li{ border-bottom: 1px solid #dbdbdb; padding:15px 15px 15px 200px;}
ul.ecomm-carts li.cubecart{background:url("../graphics/carts-cubecart.gif") 0 5px no-repeat;}
ul.ecomm-carts li.magento{background:url("../graphics/carts-magento.gif") 0 5px no-repeat;}
ul.ecomm-carts li.xcart{background:url("../graphics/carts-xcart.gif") 0 15px no-repeat;}
ul.ecomm-carts li.last{ border-bottom:none;}

#keywords{float:left;}
#keywords h3{background:none; margin:0 0 15px 0; padding:0; font-size:16px; border-bottom:none; color:#4d4d4d;}

.panelItem { float: left; width: 220px; background: transparent; margin: 7px 18px 0 0; padding: 0;}
.panelItem h3 { margin: 0 0 10px 0; padding: 5px 0 15px 0; line-height: normal; font-size:20px;}
.panelItem h3 a { color: #4D4D4D; text-decoration: none; font-weight: normal; letter-spacing: -1px;}
.panelItem h3 a:hover { text-decoration: underline; }
.panelItem p { margin: 0 0 5px 0; padding: 0; line-height: normal; color: #888; line-height: 1.4em;}

.panelItem p a {font-weight: bold; font-style: normal; text-decoration: none; color:#0071c7; text-decoration:underline;}
.panelItem p a:hover {text-decoration: none; }
.panelItem p em {font-size: 100%;}

.widePanelItem {float: left; width: 780px; background: transparent; margin: 0 0 0 15px; padding: 0;}
.widePanelItem h3 {margin: 0; padding: 0 0 10px 0; line-height: normal; font-size: 130%; color: #4D4D4D; font-weight: bold; letter-spacing: -1px; }

#seo h3 {background: transparent url("../graphics/panel-icons.png") right -1px no-repeat;}
#search h3 {background: transparent url("../graphics/panel-icons.png") right -130px no-repeat;}
#conversions h3 {background: transparent url("../graphics/panel-icons.png") right -67px no-repeat;}
#ecomm h3 {background: transparent url("../graphics/panel-icons.png") right -186px no-repeat;}


.tableHead span{background: transparent url("../graphics/tableBar.png") 100% -32px; position:absolute; top:0; right:-5px; width:20px; height:25px}
.table, .tableBody {width: 955px; clear:both;}
.tableHead {width: 950px;}
.table {float: left; margin: 0; padding: 0; text-transform: capitalize; background: transparent; font-size:11px; }
.tableHead {float: left; background: transparent url("../graphics/tableBar.png") 0 0 no-repeat; margin: 0; padding: 0; color: #fff; font-weight: bold; position:relative; height:25px; line-height:25px; }
.tableBody {height: 100px; overflow: auto; margin: 0; padding: 0; }
.tableHead .col {float: left; width: 180px; margin: 0; padding: 0 15px;}
.tableBody .col {float: left; width: 180px; margin: 0; padding: 8px 15px 3px 15px; background: transparent; color: #666; }
.tableRow {float: left; width: 930px; /*20px less than others*/ margin: 0; padding: 0; border-bottom: 1px solid #ccc; }
.tableRow a { font-weight: bold; }
.increase { background: transparent url("../graphics/iconIncrease.png") 0 0 no-repeat; color: #78C710; font-weight: bold; margin: 0; padding: 0 0 0 22px; font-size: 130%; }


.accordion .casestudy{margin:0 0 11px 7px!important;}
#maincol .casestudy{margin:0 0 11px 7px!important;}

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {width: 430px; height: 395px; margin: 0; padding: 25px 25px 25px 25px; background: url("../graphics/callback.png") 0 0 no-repeat;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background: transparent url("../graphics/x.png") 0 0 no-repeat!important; width: 29px!important; height: 29px!important; display: inline; z-index: 3200; position: absolute; top: 24px; left: 430px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:8px;}



#fieldScroll { width: 420px; height: 220px; overflow: auto;  margin: 0; padding: 0; background: transparent; }
#callBackForm h3{background:none; padding-left:0;}
#callBackForm div.jsError { clear: both; width: 200px; margin: 0; padding: 6px 0 3px 122px; color: #222; background: transparent url("http://www.blueclaw.co.uk/graphics/error.png") 100px 5px no-repeat; font-weight: bold; }
#callBackForm input.jsError { border: 2px solid #cc3300; }
#callBackForm .btnSubmit { float: right; clear: both; margin: 0; padding: 5px 33px 0 0}
#callBackForm textarea.jsError { border: 2px solid #cc3300;}
#callBackForm h6 { font-size: 150%; text-transform: capitalize; color: #444; margin: 0; padding: 0 0 8px 0; font-weight: bold;}
#callBackForm p { margin: 0 0 15px 0; padding: 0 15px 0 0; color: #555;}
#callBackForm form { margin: 0; padding: 0; background: transparent;}
#callBackForm legend { display: none; }
#callBackForm fieldset { border: 0; margin: 0; padding: 0; }
#callBackForm label { display: block; float: left; width: 90px; font-weight: bold; color: #777; margin: 0; padding: 3px 10px 0 0; text-align: right; }
#callBackForm div { clear: both; margin: 0 0 5px 0; padding: 0; }
#callBackForm img { border: 2px solid #ccc; margin: -4px 0 0 0; padding: 0; background: #fff; vertical-align: middle; float:right;}
#callBackForm .txt { width: 270px; border: 2px solid #ccc; margin: 0; padding: 3px 6px; color: #666; }
.area { width: 270px; height: 80px; border: 2px solid #ccc; margin: 0; padding: 3px 6px; color: #666; font-family: arial, helvetica, sans-serif; font-size: 100%; overflow: auto;}
.captchaTxt {width: 150px; border: 2px solid #ccc; margin: 0 0 0 0; padding: 3px 6px; color: #666; font-size: 100%;}
.required { }



form.contactus label{display:block;  clear:both;  }
form.contactus{background-color:#EBEBEB; padding:15px 20px 0 20px; margin:0; border-top:1px solid #DADADA; border-bottom:1px solid #DADADA; margin-bottom:20px;}


#b-address{float:left; width:200px;}
#b-map{float:left; width:242px;}
#b-map img{padding:8px; background-color:#f7f7f7; border:1px solid #dedede; margin-bottom:20px;}

a#projects-toggle{width:327px; height:40px; display:block; text-indent:-5000px; margin: 0 auto 0 auto;}
a.norm{background:url("../graphics/projects-but.gif") no-repeat top left;}
a.select{background:url("../graphics/projects-but.gif") no-repeat bottom left!important;}

/*
#fieldScroll { width: 420px; height: 220px; overflow: auto;  margin: 0; padding: 0; background: transparent; }

#callBackForm div.jsError { clear: both; width: 200px; margin: 0; padding: 6px 0 3px 122px; color: #222; background: transparent url("http://www.blueclaw.co.uk/graphics/error.png") 100px 5px no-repeat; font-weight: bold; }
#callBackForm input.jsError { border: 2px solid #cc3300; }
#callBackForm .btnSubmit { float: right; clear: both; margin: 0; padding: 5px 33px 0 0}
#callBackForm textarea.jsError { border: 2px solid #cc3300; }
#callBackForm h6 { font-size: 150%; text-transform: capitalize; color: #444; margin: 0; padding: 0 0 8px 0; font-weight: bold;}
#callBackForm p { margin: 0 0 15px 0; padding: 0 15px 0 0; color: #555; }
#callBackForm form { margin: 0; padding: 0; background: transparent;}
#callBackForm legend { display: none; }
#callBackForm fieldset { border: 0; margin: 0; padding: 0; }
#callBackForm label { display: block; float: left; width: 90px; font-weight: bold; color: #777; margin: 0; padding: 3px 10px 0 0; text-align: right; }
#callBackForm div { clear: both; margin: 0 0 5px 0; padding: 0; }
#callBackForm img { border: 2px solid #ccc; margin: -4px 0 0 0; padding: 0; background: #fff; vertical-align: middle }
.txt { width: 270px; border: 2px solid #ccc; margin: 0; padding: 3px 6px; color: #666; }
.area { width: 270px; height: 80px; border: 2px solid #ccc; margin: 0; padding: 3px 6px; color: #666; font-family: arial, helvetica, sans-serif; font-size: 100%; overflow: auto; }
.captchaTxt {width: 180px; border: 2px solid #ccc; margin: 0 4px 0 0; padding: 3px 6px; color: #666; font-size: 100%; }
.required { }

*/

/*a.call{position:absolute; top:12px; left:13px; background-color:#006666; width:280px; height:58px; background:url("../graphics/callback-but.png") no-repeat top left; display:block; text-indent:-5000px}
a:hover.call {background:url("../graphics/callback-but.png") no-repeat 0 -57px; }*/

a.call{position:absolute; top:15px; left:13px; width:279px; height:50px; background:url("../graphics/request-quote-but.png") no-repeat top left; display:block; text-indent:-5000px}
a:hover.call {background:url("../graphics/request-quote-but.png") no-repeat 0 -56px; }
a:active.call {background:url("../graphics/request-quote-but.png") no-repeat 0 -114px; }

p.button{background:url("../graphics/button.png") no-repeat top right; position:relative; line-height:22px; float:left; font-size:10px; display:inline; width:auto; 
  overflow:visible;  margin:5px 0 0 0; padding:0;}
p.button a{color:#4d4d4d!important; cursor:pointer; text-decoration:none!important; }
p.button a:hover{color:#000000!important; text-decoration:none!important;}
p.button a span{  background:url("../graphics/button.png") 0 -24px;  height:23px; position:relative; display:inline-block; white-space:nowrap; padding:0 15px 0 15px; }


a#ecomm-but{height:77px; width:416px; background:url("../graphics/ecomm-but.jpg") no-repeat top left; float:left; margin:0 0 18px 14px; display:inline; text-indent:-5000px}
a:hover#ecomm-but{background-position:bottom left;}


.sideform { clear: both; width: 228px; height: 429px; margin: 0 0 15px 0; padding: 0 0 13px 0; overflow: hidden; background: url("../graphics/request-form.png") 0 0 no-repeat; }
.sideform  h3{color:#f8bf34; background:none; border:none; font-size:22px; padding:0 0 0 0; margin: 15px 0 5px 10px ;}
.sideform p#tag{margin: 0 10px 5px 10px ; font-size:12px;}
.sideform fieldset { border: 0; margin: 0; padding: 0px 0 0 0;}
.sideform legend { margin: 0!important; padding: 0!important;}

.sideform form {  margin: 0; padding: 0; width:210px; padding:0 0  0 10px}
.sideform label { color: #fff; font-size: 100%; display: block; width: 205px; margin: 0; text-transform: capitalize; font-weight: bold;}
.sideform div { padding: 0 0 10px 0; color: #fff; vertical-align: middle;}
.sideform .txt { color: #666; font-size: 12px; display: block; width: 205px; margin: 0 0 0 0; padding: 2px 0; border:none;  font-family: arial;  }
.sideform .area { color: #666; font-size: 12px; display: block; width: 205px; height: 57px; overflow: auto; margin: 0 0  0; padding: 2px 0; border:none;font-family: arial; }
.sideform .captchaTxt { color: #666; font-size: 12px; display: inline; width: 65px; margin: 0 0 0 10px; padding: 2px 0; font-family: arial ;border:none; }
.sideform p { color: #fff; margin: 0;  font-size:12px; }
.sideform img { margin: 0 7px 0 0; vertical-align: middle; }
.sideform .btnSubmit { margin: 0 0 0 0; padding: 0; }




/*-------------------------*/
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 4px;
	position:absolute;
	top:-48px;
	left:21px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    float: left;
    margin: 0 10px 0 0;
    min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 20px;
    background: url(../graphics/tab.png) 0 0 no-repeat;
}
.tabs-nav a {
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
    color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:active, .tabs-nav .tabs-selected a:hover  {
    background-position: 100% -250px;
    outline: 0; /*prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -150px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 37px; /* IE 6 treats height as min-height */
    min-height: 37px;
    padding-top: 10px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 10px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:active span, .tabs-nav .tabs-selected a:hover span{
    background-position: 0 -100px;
}

.tabs-nav a:hover span, .tabs-nav a:focus span{
    background-position: 0 -50px;
}
.tabs-nav a:hover, .tabs-nav a:focus{
    background-position: 100% -200px;
}

.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor:pointer;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.tabs-nav .tabs-disabled {
    opacity: .4;
}
.tabs-container {
    padding: 15px 20px 0 25px;
	
    /*background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
    background: url(http://www.blueclaw.co.uk/css/loading.gif) no-repeat 0 50%;
}
/*-------------------------*/











/*--FOOTER--*/

#footerCon { width: 100%; min-height: 100px; height: 100px; margin: 0; padding: 20px 0 0 0; clear: both; background: #333133 url("../graphics/footer.png") 0 0 repeat-x; border-top: 2px solid #444; text-align:left;}
#footer { width: 980px; background: transparent; margin: 0 auto 0 auto; padding: 0; }
#footerLeft { float: left; width: 500px; min-height: 200px; height: 200px; background: transparent url("../graphics/footerLeft.png") 0 0 no-repeat; margin: 0; padding: 10px 25px 0 15px; }
#footerRight { float: left; width: 210px; min-height: 200px; height: 200px; background: transparent url("../graphics/footerRight.png") 0 0 no-repeat; margin: 0; padding: 10px 15px 0 15px; }

#footerLeft h6 { font-size: 160%; color: #fff; font-weight: normal; margin: 0; padding: 0; }
#footerLeft h6 span { font-size: 60%; color: #666; font-weight: bold; margin: 0; padding: 0; vertical-align: middle; }

#footerRight h6 { font-size: 160%; color: #fff; font-weight: normal; margin: 0; padding: 0; }
#footerRight h6 span { font-size: 60%; color: #666; font-weight: bold; margin: 0; padding: 0; vertical-align: middle; }

#footerLinks { float: left; width: 100%; clear: both; background: #2B292B; margin: 0; padding: 15px 0 15px 0; text-align:center;}
#footerLinks ul { float: left; width: 780px; clear: both; background: #2B292B; margin: 0; padding: 0 0 0 0; list-style: none;}
#footerLinks ul li { float: left; margin: 0; padding: 0 0 0 20px; font-size: 100%;  color: #555; }
#footerLinks ul li a { color: #7C7B7C; margin: 0; padding: 0 20px 0 0; font-weight: bold; border-right: 1px solid #555;}
#footerLinks ul li a:hover { color: #fff; text-decoration: none;  }


#newsletterForm { margin: 0; padding: 0;}
#newsletterForm fieldset { margin: 0; padding: 0; border: 0;}
#newsletterForm legend { display: none;}
#newsletterForm label { display: none;}
#newsletterForm .txt { width: 192px; border: 4px solid #666; margin: 0 0 5px 0; padding: 4px 5px; text-align: left;}

#newsletterForm div { margin: 0; padding: 0; clear: both; background: transparent; text-align: right;}

 /**************************************************************************************************************/


body.dev-portfolio #wrapper { background:url("../graphics/main-bg-full.gif") repeat-y top left; padding:0 0 50px 0!important;}

.project  img,
.portfolioHeader img { border:0; }

.theportfolio{margin:0 0 0 25px;}
#portfolioNav {
	background:url("../graphics/portfolio-nav.jpg") repeat-x;
	border:1px solid #e2e2e2;
	height:49px;
	line-height:49px;
	width:950px;
}
#portfolioNav a {
	border-right:1px solid #e2e2e2;
	color:#707070;
	display:inline-block;
	float:left;
	font: bold 14px/49px arial;
	padding: 0 15px;
	text-decoration:none
}
#portfolioNav a.activ {
	background:url("../graphics/portfolio-nav-over.jpg") repeat-x;
}

#ecommercePortfolio .portfolioHeader { background:url("../graphics/nav-arrw.jpg") 240px 0px  no-repeat;}
#webdesignPortfolio .portfolioHeader { background:url("../graphics/nav-arrw.jpg") 64px 0px  no-repeat;}
#businessPortfolio .portfolioHeader { background:url("../graphics/nav-arrw.jpg") 418px 0px  no-repeat;}

.portfolioHeader {
	
	border:1px solid #e2e2e2;
	border-top:0;
	border-bottom: 5px solid #e8e8e8;
	font-family:Arial, Helvetica, sans-serif;
	height:auto;
	margin:-1px 0 20px 0;
	padding: 10px 0px 0px;
	width:950px;
}
.portfollioIntro {
	height:99px;
	padding:20px 20px 10px 20px;
}
.portfolioHeader h1 {

	font: bold 30px arial;
	
	height:40px;
	line-height:40px;
	margin:0px 0 20px;

}
.portfolioHeader p{
	color:#272626;
	font: normal 14px arial;

	
}
.reasonsWhy {
	border:1px solid #e2e2e2;
	border-left:0;
	height:270px;
	float:left;
	padding-left:20px;
	
	width:600px;
}
.reasonsWhy h2{
	font: bold 20px arial;
	width:580px;
	padding:10px 0 10px 0;
}
.reasonsWhy ul {
	list-style:none;
	padding:0 0 5px 0;
	margin:0 0 20px 0;
}
.reasonsWhy li {
	background: url("../graphics/green-tick.gif") 0 6px no-repeat;
	color:#272626;
	font: normal 14px/33px arial bold;
	margin-left:15px;
	padding-left:30px;
	font-weight:bold;
}
.relatedServices {
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	height:270px;
	float:right;
	padding-left:20px;
	padding-right:20px;
	width: 289px
}
.relatedServices h3{
	color:#727272;
	font: bold 16px arial;
	padding:20px 0 15px 0;
}
.relatedServices ul{
	padding-left:0;
	list-style-image:url("../graphics/square-bullet.gif");
}
.relatedServices li{
	font: normal 13px/30px arial;
	font-weight:bold;
}
.relatedServices a{
	color:#1198d8;
	
	text-decoration:none;
}
.project {
	height:382px;
	margin:0 0 70px 0;
	width:950px;
	float:left;
}
.projectImageWrap{
	background:url(../graphics/browser-screen.jpg) top left no-repeat;
	float:left;
	height:442px;
	width:606px;
	position:relative;
	margin-top:-12px;
}
.projectImageWrap img{
left:14px;
position:absolute;
top:41px;
}
.projectDescription{
	border: 1px solid #e2e2e2;
	color:#5b5b5b;
	height: 388px;
	float:right;
	font: normal 12px/22px arial;
	padding:12px 24px;
	width:278px;
}
.projectDescription h4{
	border-bottom: 1px solid #d8d8d8;
	color:#0054a5;
	font: bold 16px arial;
	margin:0;
	padding-bottom:18px;
}
.projectDescription p {
	
	
	margin:18px 0;
}
.projectDescription ul{
	list-style-image:url("../graphics/grey-arrw.gif");
	margin-bottom:30px;
	padding-left:20px;
}


/*------TABS------*/

.container {
    display: inline;
    float: left;
    margin: 0 0 30px;
    position: relative;
    width: 440px;
}
.hp .container { width:650px; }
.hp .tab_content ul { width:600px; }

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	border-bottom: 1px solid #d6d6d6;
	border-left: 1px solid #d6d6d6;
	width: 100%;
}

ul.tabs li {
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	line-height: 31px;
	border: 1px solid #d6d6d6;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	position: relative;

	
}




ul.tabs li span {
padding:5px 7px 5px 7px;
margin:0;
font-size: 12px;
text-decoration: none;
display: block; 
background:#f6f6f6; 
color:#676767; 
font-weight:bold;
border: 1px solid #fff;
cursor:pointer



}

ul.tabs li span:hover {
	background:#dfdfdf;
}	

html ul.tabs li.active, html ul.tabs li.active span:hover, html ul.tabs li.active span{
	background: #FFFFFF!important;
	border-bottom: 1px solid #FFFFFF;
	font-weight:bold;
	color:#0f0f0f!important;
}

.tab_container {
	border: 1px solid #d6d6d6;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;

}

.tab_content {
	padding: 15px;

}

.tab_content a {
color:#0071bb;
}

.tab_content a:hover {
text-decoration:none;
}



.tab_content ul{float:left; width:260px; padding:0!important; margin:0 0 15px 0!important;}
.tab_content ul li{list-style:none; padding:0!important; margin:0!important;}
.tab_content ul li a{text-decoration:none; background-color:#FFFFFF; border-bottom:1px solid #dedede; display:block; width:230px; padding:5px 10px 5px 0; color:#333333;}
.tab_content ul li.last a{border-bottom:none;}

.tab_content ul li a:hover{color:#0071bb;}



.tab_content  select{
	width:100%; margin:0 0 10px 0;
}






 /**************************************************************************************************************/

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

/*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}