* {
outline:none;
}

body {
margin:0px;
padding:0px;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
line-height:18px;
background-color:#ededed;
color:#666;
}

h2 {
text-transform:uppercase;
font-size:16px;
font-weight:normal;
margin:0px;
padding:5px 0px 5px 0px;
color:#000;
}

h3 {
text-transform:uppercase;
font-size:22px;
font-weight:normal;
margin:0px;
padding:0px;
color:#000;
text-shadow:#fff 0px 1px 0px;
}

h4 {
text-transform:lowercase;
font-size:14px;
font-weight:bold;
margin:0px;
padding:0px;
color:#000;
}

form {
margin:0px;
padding:0px;
}

img {
border:0px;
}

a, a:link, a:active, a:visited {
text-decoration:none;
color:#3097b9;
}

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

p {
margin:0px;
padding:0px 0px 20px 0px;
}


body.style1, body.style2 {
background-color:#000000;
}

body.style3 {
background-color:#ededed;
}

#body {
background:#fff url(/images/header-bg.gif) repeat-x top;
min-height:500px;
text-align:center;
}

#body.home {
background:#fff url(/images/page-bg.jpg) repeat-x top;
}

.page {
width:980px;
margin:0px auto;
text-align:left;
position:relative;
}

#header {
height:83px;
text-align:center;
}

#header.home {
height:auto;
background-repeat:no-repeat;
background-position:center bottom;
}

#header .logo {
display:block;
width:240px;
height:30px;
position:absolute;
top:40px;
left:0px;
background-image:url(/images/blackpepper-logo.gif);
background-repeat:no-repeat;
background-position:left top;
}

#header .logo b {
display:block;
position:absolute;
top:-999px;
}


#home-banners {
height:446px;
text-align:left;
}

.home-banner {
display:block;
position:absolute;
width:100%;
height:446px;
background:#fff no-repeat center top;
min-width:980px;
cursor:pointer;
}

.home-banner .shadow {
display:block;
background:url(/images/banner-shadow.png) repeat-x left bottom;
height:446px;
}


#container {
padding:40px 0px 40px 0px;
}

#container.home {
padding-top:20px;
}


#nav {
width:700px;
float:right;
text-align:right;
margin-top:50px;
}

#nav .item:hover {
border-bottom:1px solid #fff;
}

#nav .item {
color:#fff;
font-size:14px;
text-transform:lowercase;
margin-left:20px;
}

#nav .item.on {
color:#3097b9;
}


#footer .content {
width:980px;
margin:0px auto;
padding:20px 0px 10px 0px;
text-align:left;
border-top:0px solid #ccc;
}

#footer .copyright {
float:left;
padding-right:15px;
font-weight:bold;
}

#footer * {
line-height:20px;
color:#757575;
font-size:11px;
text-decoration:none;
}

#footer a:hover {
color:#aaa;
}

#footer-nav {
width:600px;
float:left;
}

#footer-nav a {
display:block;
float:left;
}

#footer-nav span {
display:bock;
float:left;
padding:0px 5px 0px 5px;
}

#footer .icon {
display:block;
float:right;
margin-left:7px;
opacity:0.6;
-moz-opacity:0.6;
}

#footer .icon:hover {
opacity:1;
-moz-opacity:1;
}




#altstrip {
background-color:#ededed;
text-align:center;
}
#altstrip .content {
width:980px;
margin:0px auto;
padding:40px 0px 30px 0px;
text-align:left;
}


#follow {
width:313px;
float:left;
}

#follow h3 {
width:220px;
float:left;
}

#follow .social {
display:block;
float:right;
margin-left:5px;
}

#follow .hr {
height:10px;
border-bottom:1px solid #ccc;
}

#follow p {
padding:15px 0px 5px 0px;
}

#follow .link {
font-size:9px;
text-transform:uppercase;
}

#touch-wide {
width:625px;
float:right;
}

#altstrip .block {
width:303px;
float:left;
margin-left:30px;
}

#touch-wide .map {
display:block;
width:300px;
float:right;
text-align:right;
}

#touch-wide .positioner {
width:300px;
float:left;
}

#touch-wide .talk {
display:block;
margin-top:20px;
height:75px;
padding-left:60px;
background-image:url(/images/contact-phone.gif);
background-repeat:no-repeat;
background-position:left top;
}

#touch-wide .talk b {
color:#3097b9;
font-size:22px;
text-transform:uppercase;
padding-top:10px;
}

#touch-wide .talk span {
color:#999;
font-size:17px;
font-family:verdana, sans-serif;
padding-top:2px;
}


#blue-bar {
height:207px;
overflow:hidden;
background:#3097b9 url(/images/blue-bar-bg.jpg) no-repeat center top;
}

#blue-bar h1 {
display:block;
width:980px;
margin:0px auto;
text-align:left;
position:relative;
padding-top:110px;
color:#fff;
font-size:80px;
text-transform:lowercase;
letter-spacing:-0.05em;
}


.clear {
clear:both;
height:1px;
overflow:hidden;
font-size:1px;
}

.more-link {
float:left;
padding-right:8px;
background-image:url(/images/small-bullet-arrow.gif);
background-repeat:no-repeat;
background-position:right center;
}

.more-link * {
text-transform:uppercase;
font-size:9px;
font-weight:bold;
}


.screenshow {
height:370px;
overflow:hidden;
position:relative;
border:1px solid #eee;
border-bottom:0px;
}

.screenshow .left {
display:none;
width:50px;
height:70px;
position:absolute;
top:160px;
left:0px;
z-index:10;
cursor:pointer;
background-image:url(/images/screenshow-left.png);
background-repeat:no-repeat;
background-position:center center;
opacity:0.3;
-moz-opacity:0.3;
}

.screenshow .right {
display:none;
width:50px;
height:70px;
position:absolute;
top:160px;
left:670px;
z-index:11;
cursor:pointer;
background-image:url(/images/screenshow-right.png);
background-repeat:no-repeat;
background-position:center center;
opacity:0.3;
-moz-opacity:0.3;
}

.screenshow .screenshot img {
width:720px;
}



#sort-bar {
width:600px;
position:absolute;
top:-95px;
right:0px;
}

#sort-bar .label {
float:right;
height:30px;
line-height:28px;
color:#fff;
font-size:14px;
padding-right:10px;
}

#sort-bar .option {
display:block;
float:right;
margin-left:5px;
height:30px;
line-height:30px;
padding-left:15px;
text-transform:uppercase;
font-size:10px;
background-image:url(/images/sort-off-left.gif);
background-repeat:no-repeat;
background-position:left top;
color:#ddd;
}

#sort-bar .option span {
display:block;
padding-right:15px;
background-image:url(/images/sort-off-right.gif);
background-repeat:no-repeat;
background-position:right top;
}

#sort-bar .option:hover {
color:#fff;
}

#sort-bar .option.active {
background-image:url(/images/sort-on-left.gif);
color:#000;
}

#sort-bar .option.active span {
background-image:url(/images/sort-on-right.gif);
}


#project-listing {
min-height:auto;
background:#fff;
}

#project-listing.loading {
height:670px;
background:#fff url(/images/loading.gif) no-repeat center 65px;
}

.project {
width:300px;
float:left;
margin-left:30px;
}

.project.first {
margin-left:0px;
}

.project .thumb {
display:block;
width:300px;
height:220px;
overflow:hidden;
background-color:#e6e6e6;
border-radius:5px;
-moz-border-radius:5px;
}

.project .thumb img {
width:280px;
height:201px;
margin:9px 0px 0px 9px;
}

.project .label {
display:block;
font-size:15px;
font-weight:bold;
padding:10px 0px 2px 0px;
color:#000;
}

.project .intro {
height:48px;
overflow:hidden;
font-size:11px;
line-height:16px;
}

.project .links {
padding-top:5px;
}

.project .links a {
display:block;
float:left;
padding-right:8px;
background-image:url(/images/small-bullet-arrow.gif);
background-repeat:no-repeat;
background-position:right center;
text-transform:uppercase;
font-size:9px;
font-weight:bold;
}

.project .links span {
display:block;
float:left;
padding:0px 8px 0px 8px;
color:#808080;
font-size:9px;
}

.clear.hr {
height:10px;
border-bottom:1px solid #ccc;
}



#product-detail {
width:720px;
float:left;
}

#product-detail .intro {
width:355px;
float:left;
font-size:20px;
color:#000;
line-height:24px;
}

#product-detail .content {
width:340px;
float:right;
}


#project-summary {
width:240px;
float:right;
background:#fff url(/images/right-panel-bg.gif) repeat-y left top;
}

#project-summary .top {
height:12px;
background:#fff url(/images/right-panel-top.gif) no-repeat left top;
}

#project-summary .content {
padding:0px 5px 0px 5px;
}

#project-summary .pad {
padding:10px 20px 15px 20px;
}

#project-summary .item {
padding:10px 0px 0px 22px;
background:#fff url(/images/tick-gray.png) no-repeat left 10px;
}

#project-summary .item h3 {
font-size:12px;
color:#3097b9;
}

#project-summary .item div {
font-size:11px;
line-height:14px;
}

#project-summary .break {
clear:both;
height:1px;
overflow:hidden;
border-top:1px solid #ccc;
}

#project-summary .services {
padding:5px 0px 0px 0px;
}

#project-summary .services div {
padding-left:22px;
background:#fff url(/images/tick-gray.png) no-repeat left 2px;
}

#project-summary .contact {
display:block;
padding:20px 0px 25px 70px;
background:#fff url(/images/contact-phone.gif) no-repeat 10px 15px;
}

#project-summary .contact .major {
display:block;
color:#3097b9;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
padding-top:5px;
letter-spacing:-0.08em;
}

#project-summary .contact .minor {
display:block;
color:#999;
font-size:12px;
text-transform:uppercase;
font-family:verdana, sans-serif;
line-height:14px;
}

#project-summary .bottom {
height:12px;
background:#fff url(/images/right-panel-bottom.gif) no-repeat left top;
}


#home-left {
width:313px;
float:left;
font-size:20px;
line-height:28px;
color:#222;
}

#home-left h1 {
display:inline;
font-size:20px;
}

#home-center {
width:295px;
float:left;
margin-left:40px;
}

#home-right {
width:295px;
float:right;
}

#home-recent {
width:275px;
float:right;
border-left:1px solid #ccc;
padding-bottom:10px;
}

#home-recent .pad {
padding-left:20px;
}

#home-recent h2 {
padding-bottom:15px;
}

#home-recent a {
display:block;
height:28px;
line-height:18px;
padding-left:25px;
background:#fff url(/images/recent-bullet.gif) no-repeat left top;
font-size:14px;
}

.service-major {
width:430px;
float:left;
margin-right:40px;
}

.service-major div {
padding-top:10px;
}

.service-minor {
width:280px;
float:left;
margin-right:40px;
}

.service-minor h3 {
font-size:16px;
}

.service-minor div {
padding-top:10px;
}


table.form {
border-collapse:collapse;
border-spacing:0px;
}

table.form td {
vertical-align:top;
padding:3px 5px;
}

table.form td.label {
font-weight:bold;
padding-right:20px;
padding-left:0px;
padding-top:10px;
white-space:nowrap;
}

table.form td.field {
width:100%;
}

table.form td.field-text {
padding-top:10px;
}

input.field, textarea.field {
border:1px solid #ccc;
font-weight:bold;
font-size:14px;
padding:3px;
}

.fine {
font-size:10px;
color:#888;
line-height:12px;
}



.button {
display:inline-block;
zoom:1;
*display:inline;
border-radius:3px;
border:0px;
text-align:center;
font-weight:bold;
width:auto;
padding:0px 15px 0px 15px;
margin:0px 5px 0px 0px;
font-size:12px;
height:25px;
line-height:25px;
cursor:pointer;
background-color:#000;
color:#fff;
}

.button:visited {
color:#fff;
}

.button:hover {
background-color:#666;
}

.error {
color:#c00;
font-weight:bold;
font-size:13px;
}

.info {
color:#69b34b;
font-weight:bold;
font-size:13px;
}