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

WEBGRAPES THEME

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


/* =RESET (thanks Erik Meyer)
------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,  tr, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
html > body { height: 100%; }
body {
	line-height: 1;
	color: #001b1e;
	background: white;
}
ol, ul {
	list-style: none;
}
em { 
font-style: normal; 
}
strong {
font-weight: bold;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	/*text-align: left;*/
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
color:#179ad1;
text-decoration:none;
}
/* =LAYOUT
------------------------------------------------ */
body {
font-size:84%;
font-family:"helvetica neue", arial, helvetica, sans-serif;
line-height:1.3em;
}
#header-inner, #content, .onecol, .twocol, .threecol, #footer-inner {
width: 960px;
margin: 0 auto;
position:relative;
}

/* =TWO COL --*/
.twocol .col-1 {
width: 609px;
float: left;
}
.twocol .col-2 {
width: 340px;
float: left;
}
/* =THREE COL --*/
.threecol .col-1 {
width: 295px;
float: left;
}
.threecol .col-2 {
width:270px;
float: left;
margin-left: 54px;
}
.threecol .col-3 {
width:315px;
float:right;
}
/* =HEADER
------------------------------------------------ */
#header {
background:url(./band-top.png) repeat-x 0 -12px;
_background: transparent;
min-height:155px;
_height: 155px;
}
#header a {
color: #e5eed2;
}


/* =ATTIC
------------------------------------------------ */
#attic {
	background: url(./attic-bg.png) no-repeat left bottom;
	_background: #181818;
	width: 180px;
	height:52px;
	float: right;
	color: #696b6b;
	font-size:12px;
}
#attic-phone strong,
#language-menu a.selected {
color:#e5eed2; /* lite gray */
}
#attic-phone,
#language-menu a {
color: #9be922; /* green */
}
#attic-phone strong {
padding-left: 6px;
}
#attic-phone {
float: left;
line-height:2em;
margin-top: 2em;
margin-left: 9px;
}
#language-menu {
float: right;
line-height:2em;
margin-top: 2em;
margin-right: 9px;
}
#language-menu a:hover {
color: #fff;
}
#attic .divider {
padding:0 5px;
}
/* =BRANDING
------------------------------------------------ */
#logo {
position:absolute;
/*width: 358px;
height:139px;*/
width: 262px;
height:131px;
top: 10px;
text-indent:-9000px;
}
#logo  {
	background-image: url(webgrapes-logo2.gif);
/*//filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='webgrapes-logo.png');*/
}
#logo[id] {
background: url(webgrapes-logo2.gif) no-repeat 0 0;
}

/* =MENU
------------------------------------------------ */
#menu {
background: url(./delivered-on-time.png) no-repeat 151px 18px;
_background: none;
float: right;
clear:both;
}
#menu ul li {
background:url(./menu-divider.png) no-repeat 0 56px;
_background:url(./menu-divider.gif) no-repeat 0 56px;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
padding-left: 13px;
padding-right: 8px;
float:left;
display:block;
padding-top: 52px;
}
#menu ul li a {
color:#fff;
height:20px;
display:block;
_float:left;
}
#menu ul li.first {
padding-left:0;
background:transparent;
}
#menu ul li.last {
padding-right: 0;
}
body#home #menu ul li#tab-home a,
body#about #menu ul li#tab-about a,
body#whatwedo #menu ul li#tab-whatwedo a,
body#dot #menu ul li#tab-dot a,
body#portfolio #menu ul li#tab-portfolio a,
body#location #menu ul li#tab-location a,
body#contact #menu ul li#tab-contact a,
#menu ul li a:hover {
background: url(./menu-selected-item-bg.png) repeat-x bottom;
color:#9be922;
}
#menu #tab-dot a {
}
#upstairs[id] {
background: url(./basement-brushstrokes.png) repeat-x bottom;
padding-bottom: 53px;
}
/* =CONTENT
------------------------------------------------ */
#content {
background:url(./content-top-2.png) no-repeat 0 0;
_background: #181818;
position:relative;
padding-top: 15px;
min-height:280px;
_height: 280px;
color:#a5b48f;
}
#content-inner {
position: relative;
background:url(./content-btm-2.png) no-repeat left bottom;
_background: none;
padding-bottom:15px;
}
#content-inner-2 {
background:url(./content-bg-2.png);
_background: none;
min-height:275px;
}
#content a {
color:#fff;
}
#content strong {
color: #fff;
font-weight:bold;
}
#content .col-1 {
float: left;
width: 540px;
}
#content .col-2 {
float: right;
width: 340px;
}
#content p {
margin: 0 0 1em 0;
line-height: 1.5em;
font-size: 13px;
}
#content big {
color: #fff;
font-size:1.1em;
}
#content big em,
#content big a {
color:#8dc63f;
}
.btn-launch-site {
background: url(./btn-launch-site.png) no-repeat 0 0;
display: block;
height: 0 !important;
height /**/: 24px;
padding: 24px 0 0 0;
width: 134px;
overflow: hidden;
_background: #181818;
_padding:3px;
_height: 20px !important;
_width: 110px;
}
.btn-launch-site:hover {
background-position: 0 -24px;
}
/* CALL TO ACTION 
---------------------------------------------------*/
p#call-to-action {
position:relative;
height:30px;
width: 233px;
float: right;
margin-bottom:0;
margin-top: 7px;
}
#container #content .btn-get-a-quote {
_background:url(./btn-green.gif) no-repeat 0 0;
width: 103px; height:30px; line-height: 30px;
display:block;
float: left;
color:  #001f20;
padding-left: 16px;
}
#container #content .btn-get-a-quote[class] {
background:url(./btn-green.png) no-repeat 0 0;
}
#container #content .btn-get-a-quote:hover {
background-position: 0 -30px;
color: #fff;
}
#container #content .btn-portfolio {
_background:url(./btn-blue.gif) no-repeat 0 0;
width: 79px; height:30px; line-height: 30px;
display:block;
float: left;
padding-left: 23px;
margin-left: 10px;
color:  #fff ;
}
#container #content .btn-portfolio[class] {
background:url(./btn-blue.png) no-repeat 0 0;
}
#container #content .btn-portfolio:hover {
background-position: 0 -30px;
}

/* =BASEMENT
------------------------------------------------ */
#basement {
background: #ebf1db;
_background: transparent;
_border-top: 10px solid #ebf1db;
_margin-top: 20px;
width: 100%;
}
#basement-inner {
background: #ebf1db url(./basement-bg.gif) repeat-x top;
padding-top: 30px;
padding-bottom:25px;
position: relative;
}
#basement ul.checks {
margin: 20px 0;
}
#basement ul.checks li {
background:url(./icon-check.gif) no-repeat left center;
padding-left: 25px;
margin-bottom:.5em;
_height:1%;
}
#basement p {
line-height: 1.4em;
margin: 0 0 .5em;
}
#basement h2 {
font-size: 1.2em;
font-weight:bold;
margin: 0 0 1em;
border-bottom: 1px solid #ebf1db;
}
#basement big {
font-size: 1.2em;
}
#basement strong {
color: #88bd44;
}
/* =FORM DEFAULTS
------------------------------------------------ */
form label {
text-transform:uppercase;
font-size:10px;
font-weight:bold;
letter-spacing:1px;
*letter-spacing: 0;
color:#001d1f;
}
form .row {
margin-bottom:5px;
}
form input.textbox {
background: transparent url(./form-textfield-234.gif);
border:0;
height:21px;
width: 226px;
padding: 4px 4px;
color: #fff;
font-weight:bold;
font-size:1em;
font-family: "helvetica neue", arial, helvetica, sans-serif;
}
form textarea {
background: transparent url(./form-textarea-323.gif);
border:0;
height:140px;
width: 315px;
padding: 4px 4px;
color: #fff;
font-weight:bold;
font-size:1em;
font-family: "helvetica neue", arial, helvetica, sans-serif;
}
form label .required {
color: #ee2b32;
font-size: 1.3em;
padding-left: 2px;
}
.wpcf7-response-output {
clear: both;
font: italic 1.4em/1.2em georgia;
color: #cc4200;
text-align: center;
width: 300px;
padding: 1em 10px 0;
}
.wpcf7-validation-errors {
background: url(./icon-error-48.png) no-repeat left center;
}
.wpcf7-mail-sent-ok {
background: url(./icon-check-48.png) no-repeat 84px 0;
color: darkgreen;
width: 440px;
padding: 1em 110px 0;
min-height: 34px;
}
.wpcf7-not-valid-tip {
color: #cc4200;
display:  block;
background: url(./error-arrow.png) no-repeat left top;
padding-left: 32px;
margin-left: -32px;
margin-top: -10px;
line-height: 1.5em;
padding-top: 10px;
width: 370px;
}
/* =CLIENT ACCESS FORM
------------------------------------------------ */
#client-access-form {
background:url(./client-access-form-bg.png) no-repeat left bottom;
_background: #fff;
padding: 0 28px 24px;
}
#client-access-form h2 {
padding-left: 19px;
background: url(./icon-lock.gif) no-repeat 0 3px;
}
input.login-button {
float: right;
}
#forgot-password {
font-size:.9em;
margin: .5em 0;
text-align:right;
}
#client-access-form .row {
width: 233px;
}
/* =OUR SERVICES
------------------------------------------------ */
#our-services ul {
margin: 20px 0;
}
#our-services ul li {
background:url(./icon-check.gif) no-repeat left center;
padding-left: 25px;
margin-bottom:.5em;
_height:1%;
}
/* =PRESS
------------------------------------------------ */
#quote-bubble {
width: 318px;
position:relative;
margin-left: -4px;
}

#quote-bubble blockquote {
background: url(./press-bubble-top.png) no-repeat left top;
_background: #fff;
color:#556145;
font-size:1.1em;
line-height:1.4em;
display:block;
padding: 40px 46px 30px;
text-indent:0;
_height:1%;
}
#quote-bubble cite {
background: url(./press-bubble-btm.png) no-repeat left top;
_background: transparent;
display:block;
clear:both;
height:20px;
padding-top: 27px;
padding-right: 23px;
font-size:.9em;
text-align:right;
color: #a3af87;
}
#quote-bubble cite em {
color: #13443b;
font-weight:bold;
display:block;
}
/* =BASEMENT NAV
------------------------------------------------ */
#basement ul.basement-nav li {
background:transparent;
padding-left: 0;
border-bottom:1px solid #d9e1c4;
_height:1%;
margin-bottom:.2em;
}
#basement ul.basement-nav li a {
display:block;
padding: 4px 0;
}
#basement ul.basement-nav li a:hover {
background: url(./basement-nav-item-hover.png) repeat-x bottom;
}

/* =FOOTER
------------------------------------------------ */
#footer {
background:#fff;
color: #636363;
position:relative;
clear: both;
}
#footer-inner {
min-height:90px;
}
#footer a {
color:#2291ba;
}
#footer strong {
color:#5da500;
}
#footer-contact {
margin-top: 22px;
float: left;
}
#footer-contact .email {
padding-left: 8px;
}
#footer-menu {
	margin-top: 13px;
	/*float:right;
z-index: 0;*/
margin-right: 130px;
}
#footer-menu[id] {
float:right;
}
#footer-menu ul {
margin-bottom: .3em;
}
#footer-menu ul li {
float: right;
}
#footer-menu ul li a {
	background:url(./footer-divider.gif) no-repeat right center;
	float: left;
	display:block;
	padding: 5px;
	width: 180px;
}
#footer-menu ul li.last a {
padding-right: 0;
background:transparent;
}
#powered-by {
background:url(./powered-by-webgrapes.gif) no-repeat 0 0;
display:block;
width:133px; height:36px;
text-indent:-9000px;
position:absolute;
_left: 830px;
top:27px;
z-index: 3;
}
#powered-by[id] {
right:0;
}
.copyright {
clear:both;
text-align:right;
margin-right:153px;
}

/* =HOME
------------------------------------------------ */
#home #content .col-1 {
	width: 95%;
	padding-top: 15px;
	margin-left: 30px
}
* html #home #content .col-1 {
display:inline;
padding-left: 0;
}
#home #content .col-2 {
width: 600px;
}
#home-title {
margin-bottom: 8px;
line-height: 1.4em;
font-size:16px;
color: #9eeb21;
border-bottom: 1px solid #024E42;
}
#home-subtitle {
color: #fff;
margin-bottom: 9px;
font-size: 21px;
line-height: 1.1em;
}
#home #content .col-1 p {

}
/* =FEATURED PROJECT -- */
#featured-project .frame {
background: white;
height: 268px;
width: 578px;
display:block;
padding: 3px;
position:relative;
_background: url(./banner-bg-2.gif) no-repeat 0 0;
}
#featured-project .frame .screen-label {
background: #3fb0e0 url(./banner-title-bg.png) repeat-x;
height:40px;
position:absolute;
bottom:3px;
left:3px;
width: 578px;
}
#featured-project .screen-label a.case-study-link {
float: right;
background: url(./banner-case-study-btn.gif) no-repeat 0 0;
width:83px;height:22px;
display:block;
position:relative;
margin-top: 8px;
margin-right: 8px;
text-indent:-9000px;
}
.screen-label h3 {
font-size:11px;
text-transform:uppercase;
color:#ceeaf5;
float: left;
line-height:40px;
padding-left: 13px;
}
#featured-project .screen-label h3 a {
color: #001f20;
font-weight:bold;
}

/* =ERRORPAGE
------------------------------------------------ */
#errorpage #content-inner .col-1 {
padding-left: 30px;
padding-top: 15px;
width: 520px;
}
#errorpage #content-inner .col-2 {
position: relative;
background: url(./content-divider.png) no-repeat 0 30px;
_background-image: url(./content-divider.gif);
min-height: 200px;
}
#ia .col-1 {
position: relative;
background: url(./content-divider.png) no-repeat 0 30px;
_background-image: url(./content-divider.gif);
min-height: 200px;
}
#errorpage #error-postit[id] {background: url(./postit-bg.png) no-repeat 0 0;}
#errorpage #error-postit {
_background: url(./about-postit.jpg) no-repeat;
display:block;
width: 280px;
height:290px;
position:absolute;
z-index:1;
top: 0;
left: 30px;
text-indent: -9000px;
}
#errorpage #error-postit[id] span {background: url(./error-postit-trans.png) no-repeat 42px 65px;}
#errorpage #error-postit span {
height: 270px;
width: 300px;
display:block;
}
#errorpage #title {
margin-bottom: 7px;
}
#errorpage #subtitle {
margin-bottom: 9px;
}

/* =MISC
------------------------------------------------ */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
.clearer { clear: both; }
#footer .clearer { height: 0px; }
blockquote.pullquote {
	float:right;
	width:10em;
	margin:0.35em 0.75em 0.25em .5em;
	padding:1em 0 .5em;
	border: 1px solid #555;
	border-width:1px 0;
	color:#fff;
	background:transparent;
	font:  1.3em/1.3 "helvetica neue", arial, helvetica, sans-serif;
}
blockquote.alt {
	float:right;
	margin:0.25em 0 0.25em 0.75em;
}
.pullquote p {
	margin:0;
	text-align: right;
}
.pullquote p:first-letter {text-transform:uppercase;}

.nobasement #basement {
height: 0;
}

#fotodecora {
	width:120px;
	padding-top: 2px;
	padding-left: 2px;
	padding-right: 2px;
	margin-right: 10px;
	margin-left: 10px;
	float: left;
	border-color: #013D3B;
	border: 0.8em;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-style: solid;
	background-color: #FFF;
}

#ver-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 2px;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	background-color:#FFF
}
#ver-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 12px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #039;
}
#ver-zebra td
{
	padding: 8px 15px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	color: #669;
}
.vzebra-odd
{
	background: #eff2ff;
}
.vzebra-even
{
	background: #e8edff;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
{
	background: #d0dafd;
	border-bottom: 1px solid #c8d4fd;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
{
	background: #dce4ff;
	border-bottom: 1px solid #d6dfff;
}

#vzebra-comedya
{
	background: #FC0;
	border-bottom: 1px solid #d6dfff;
}
#vzebra-actionv
{
	background: #6C0;
	border-bottom: 1px solid #d6dfff;
}
#hor-zebra
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 2px;
	width: 780px;
	text-align: left;
	border-collapse: collapse;
}
#hor-zebra th
{
	font-size: 10px;
	font-weight: normal;
	padding: 5px 4px;
	color: #039;
}
#hor-zebra td
{
	padding: 4px;
	color: #669;
}
#hor-zebra .odd
{
	background: #e8edff; 
}