/* Layout */

body {
background: #2d5671 url(../images/bg_pixels_04_2009.jpg) top center repeat-x fixed;
padding: 0; margin: 0;
text-align:center;
}

#container {
width: 980px;
margin: auto;
text-align: left;
min-height: 500px;
}

#phone {height:20px; font-size: 1.2em;  width:98%; text-align:right; margin-top:10px;}

#left {
position: fixed;
background: url(../images/bg_fade.png);
width: 220px;
text-align: left;
float: left;
padding: 0  0 0 20px;
margin-top: 20px;
margin-right: 10px;
}

#left p {color: #f2f2f2; margin-top: 8px; padding-right: 10px}

#left a img {border: 0;}


#logo {
background: url(../images/logo_4x4.gif) 0 20px no-repeat;
width: 220px;
height: 120px;
}

#navbox { font-size: 1.3em; margin-bottom: 50px;}
#navbox ul {padding: 0; margin: 0; }
#navbox ul li { width: 200px; list-style: none; margin-bottom: 1px; }
#navbox ul li:hover {background: url(../images/navbox_dot_border_white.gif) top left repeat-y;}

#navbox ul li a {
width: 200px;
display:block;
padding:6px 0;
text-indent: 15px; 
background: url(../images/navbox_bg_trans_grad.png);
color: #fff;
text-decoration: none;
margin-bottom: 2px;
}

#navbox ul li a:hover { color: #0bafe5;}

#navbox ul li a.active { color: #0bafe5;}


.portfolio-nav { }

#right {
background: #fff url(../images/content_bg_grad.gif) repeat-x;
width: 680px;
padding: 0 15px 20px 15px;
float: left;
margin-top: 20px;
min-height: 550px;
margin-left: 250px;
}

#rightportfolio {
background: #dee5e8;
width: 680px;
padding: 0 15px 20px 15px;
float: left;
margin-top: 20px;
margin-left: 250px;
}

.whitebg {
padding: 15px 30px 15px 30px;
background: #fff;
}

/* Services Page */

.services-column { padding: 15px 30px 15px 30px; background: #fff; float: left; width: 620px; margin-right: 15px;} /* width is 400px with prices column active*/
.prices-column { float: left;  width: 185px;}

.prices-column .offer { background: #f2f2f2; padding: 10px 10px 0px 10px; width: 185px; margin-bottom: 0px; border-bottom: 3px dotted #fff;}
.prices-column .offer img { padding-bottom: 1em;}
.prices-column .offer p { padding: 0;}
.prices-column .offer:hover { background: #fff;}

.prices-column h2 { font-weight: bold; margin: 0; padding: 0;}


.largepromoitem { float: left; width: 675px; display: inline; min-height: 240px; padding-bottom: 10px;}
.largepromoitem img { background: #fff; border: 0; float: left; padding: 5px;}
.largepromoitem .largepromotextbox { width: 225px; padding: 8px 0; float: right;   }



.promoitem { float: left; width: 225px; display: inline; min-height: 260px;}
.promoitem img { background: #fff; border: 0; clear:both; padding: 5px;}


.promoitem p { width: 200px; padding: 8px 0;   }
.promoitem p.url { padding: 0;}
.promoitem a {color: #0088cc;}
.promoitem a:hover {}
.promoitem .launch {width: 200px; height: 100px; display: block;}
.promoitem .launch:hover {background: url(../images/launch.gif) top left no-repeat;}


#news{
width: 450px;
float: left;
margin: 0;
}

#news p {
padding-right: 30px;
}

#services{
width: 225px;
float: right;
}

#services ul { width:200px; padding: 0; margin: 0;}
#services ul li { list-style: url(../images/service_bullet.gif); padding:5px 0; list-style-position: inside; border-bottom: 1px dotted #ccc;}
#services .top { border-top: 1px dotted #ccc;}
#services ul li a { font-size: 1.2em; color:#0088CC;}
#services ul li a:hover {  background: #fff;}

#footer {
width: 680px;
background: #122130;
padding: 10px 15px;
clear: both;
margin-left: 250px;
color: #666;
text-align: center;
}

#footer ul {
margin: 0;
padding: 0;
}

#footer ul li {
display: inline;
list-style: none;
padding: 0 10px;
}

#footer ul li a {
color: #fff;
}


#footer ul li a:hover {
text-decoration: underline;
}



.projectbox {
clear: both;
display: inline;
background: #fff;
display: block;
width: 660px;
height: 180px;
padding:10px;
margin-bottom: 2px;
}

.projectbox a img {border: 0;}

.projecttext {
width: 260px;
float: left;
padding-right: 20px;
}

.projectbox img {
float: left;
border: 0;
}

.projectbox h2 {
margin:0 0 10px 0; padding: 0;
}

#contactform {
width: 370px;
float:left;
display: inline;
background: #fff;
padding: 10px 0 0 20px;
margin-right: 10px;
}

#contactsidebar {
background: #fff;
padding: 10px 0 0 20px;
width: 260px;
float: left;
}


img.new {
padding: 0; margin: 0; border: 0;
}


/* FONTS */

body {
font-family: "Lucida Grande", Helvetica, Arial, Verdana; margin: 0 0 1.5em 0;
line-height: 1.5; /* Unitless for proper inheritance */
color: #333;
}

body          { font-size: 75%; }   /* IE */
html > body   { font-size: 11px; }  /* Other browsers */


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color:#3d424d;
  clear: both;
}

h1 { font-size: 2em; margin-bottom: 1em; font-weight: normal;  }

h1.services, h1.profile, h1.portfolio, h1.contact, h1.documentation, h1.identity {
	padding: 50px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
	height: 0px !important;
	height /**/:50px;
	font-size: 1px;
	color: #fff;
	margin-top: 20px;
	width: 650px;
	clear: both;
}

h1.services 	{background-image: url(../images/headings/services_large.gif);}
h1.profile		{background-image: url(../images/headings/profile_large.gif);}
h1.portfolio	{background-image: url(../images/headings/portfolio_large.gif);}
h1.contact		{background-image: url(../images/headings/contact_large.gif);}
h1.documentation{background-image: url(../images/headings/documentation_large.gif);}
h1.identity {background-image: url(../images/headings/identity_large.gif);}

h2.recentwork, h2.latestnews, h2.services, h2.profile, h2.portfolio {
	padding: 30px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
	height: 0px !important;
	height /**/:30px;
	font-size: 1px;
	color: #fff;
	
}

h2.recentwork 	{background-image: url(../images/headings/recent_work.gif);}
h2.latestnews 	{background-image: url(../images/headings/latest_news.gif);}
h2.services 	{background-image: url(../images/headings/our_services.gif);}
h2.profile		{background-image: url(../images/headings/profile.gif);}


h2#webdesign { padding-left: 70px; background: url(../images/icon_design.jpg) top left no-repeat; padding-top: 20px; display: block; height: 50px; }
h2#ia { padding-left: 70px; background: url(../images/icon_ia.jpg) top left no-repeat; padding-top: 20px; display: block; height:50px; }
h2#content { padding-left: 70px; background: url(../images/icon_cms.jpg) top left no-repeat; padding-top: 20px; display: block; height: 50px; }
h2#usability { padding-left: 70px; background: url(../images/icon_usability.jpg) top left no-repeat; padding-top: 20px; display: block; height:50px; }
h2#accessibility { padding-left: 70px; background: url(../images/icon_access.jpg) top left no-repeat; padding-top: 20px; display: block; height:50px; }
h2#seo { padding-left: 70px; background: url(../images/icon_seo.jpg) top left no-repeat; padding-top: 20px; display: block; height: 50px; }
h2#hosting { padding-left: 70px; background: url(../images/icon_hosting.jpg) top left no-repeat; padding-top: 20px; display: block; height: 50px; }
h2#logos { padding-left: 70px; background: url(../images/icon_logo.jpg) top left no-repeat; padding-top: 20px; display: block; height: 50px; }



h2 { font-size: 1.6em; margin-bottom: 0.5em; font-weight: normal; }
#news h2 {margin-bottom: 0;}
h2.new {background: url(../images/new.gif) top right no-repeat;}
.new { color: #ff3399;}
h3 { font-size: 1.4em; }
h3.home-link { font-weight: normal; margin: 0; padding: 0; }
h4 { font-size: 1em; color: #000; }

/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 0.5em 0;}
p.last      { margin-bottom:0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */

ul, ol      { margin: 0; padding: 0 0 0 15px; }
li			{ margin-bottom: 0.4em; list-style: square;}
ol          { list-style-type: decimal; }
dl          { margin: 1.5em 0; }
dl dt       { font-weight: bold; }

a           { color: #0088cc; text-decoration: none; outline: none; }
a:hover     { text-decoration: underline;}

blockquote  {
font-family: "Lucida Grande", Arial, sans-serif;
font-size:1.1em;
color: #e6e6e6;
letter-spacing: 0.02em;
padding-top: 35px; margin:0;
padding-right: 10px;
font-style: italic;
font-weight: lighter;
background: url(../images/blockquote_bg.gif) top left no-repeat;
}

strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }

/* Tables
-------------------------------------------------------------- */

table   { margin-bottom: 1.4em; border-top:0.1em solid #ddd; border-left:0.1em solid #ddd; }
th,td   { height: 1em; padding:0.2em 0.4em; border-bottom:0.1em solid #ddd; border-right:0.1em solid #ddd; }
th      { font-weight:bold; }


/* Forms
-------------------------------------------------------------- */

label     { font-weight: bold; }
textarea  { height: 180px; width: 300px; }


/* Some default classes
-------------------------------------------------------------- */

address { font-style: normal; font-size: 1.4em;}

p.large   { font-size: 1.5em; font-weight: lighter; color: #f2f2f2;  }
p.medium   { font-size: 1.4em;  font-weight: lighter; }
p.statement	{ font-size: 1em; font-style: italic; color: #f2f2f2; margin: 0; padding: 0;  }
p.quiet   { color: #666; }
.hide     { display: none; }


.dquo { margin-left: -.7em; } 


p.incr, .incr p {
	font-size: 0.83333em; /* font size 10px */
	line-height: 1.44em;  
	margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */
}

/* Custom Styles
-------------------------------------------------------------------*/

.mission   {
background: url(../images/intro_bg_grad.jpg) top left no-repeat;
font-size: 1.5em; font-weight: lighter; color: #242933;
padding: 20px;
padding-right: 0;
margin-top: 10px;
color: #333;

}

.tel {height:30px; color: #333; }

.big-price { font-size: 4em; font-family: Helvetica, Arial, Verdana; color: #0088cc; font-weight: normal ;}


.post-date {font-size: 0.9em; color: #555; margin-bottom: 0px;}


/* Round Corners */

.roundedcornr_box_655541 {
   background: #242933 url(../images/roundedcornr_655541_grad.gif) repeat-x top left;
}
.roundedcornr_top_655541 div {
   background: url(../images/roundedcornr_655541_tl.gif) no-repeat top left;
}
.roundedcornr_top_655541 {
   background: transparent url(../images/roundedcornr_655541_tr.gif) no-repeat top right;
}
.roundedcornr_bottom_655541 div {
   background: url(../images/roundedcornr_655541_bl.gif) no-repeat bottom left;
}
.roundedcornr_bottom_655541 {
   background: transparent url(../images/roundedcornr_655541_br.gif) no-repeat bottom right;
}

.roundedcornr_top_655541 div, .roundedcornr_top_655541,
.roundedcornr_bottom_655541 div, .roundedcornr_bottom_655541 {
   width: 100%;
   height: 10px;
   font-size: 1px;
}
.roundedcornr_content_655541 { margin: 0 10px; }


/* GBCF Styles */

/* 
  Secure and Accessible PHP Contact Form v.2.0 Basic Styles by Mike Cherim 
  THESE ARE THE VARIOUS ELEMENTS, CLASSES, IDS, AND SELECTORS YOU MAY NEED FOR STYING THIS FORM
  Anchors or link elements have not been included, but everythig else is :-)
*/

div#gb_form_div {
}

form#gb_form {
}

.main_formhead, .formhead { 
  font-size : 1.4em; 
  color : #333; 
}

/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap { 
  background-color : #fefefe; 
  border:0;
}

/* section fieldsets - it's common to make this border : 0; */
fieldset { 
background-color : #fff;
border: 0px;
padding: 0; margin: 0;
}

/* form legends and dt "heading" */
legend, dt { 
  font-weight : bold;  
}

/* main legend at top of the form */
legend#mainlegend { 
  color: #333;
  margin: 0 0 0; padding: 0;
}

/* form label text */
label {}

label em {
color: #ff3399;
font-size: 130%;
vertical-align: middle;
font-style: normal;
text-indent: 3px;
}

/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox { 
  font-family: "Lucida Grande", "Trebuchet MS", sans-serif; 
  color : #333; 
  padding : 3px; 
  margin-bottom: 5px;	
  border : 1px solid #ccc;
  background-color : #e6eff2;
  font-size: 1em;
  
}

/* to make focus stable in IE 6 */
* html input.button { 
  color : #333;  
  border : 1px solid #ccc;
  background-color : #fff;
}
* html input.button.hover { 
  color : #000;  
  border : 1px solid #333;
  background-color : #fff;
}
* html input.button.focus { 
  color : #000;  
  border : 1px solid #333;
  background-color : #fff;
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE 
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus { 
  border-color: #ccc;
  background-color : #fff;
  font-size: 1em;
}*/

/* for the checkbox input */
input.checkbox {
  /* not styled on demo page */
}

/* error heading weight and color - bold is for the error reason text */
span.error, dt.error, strong.error { 
  color : #cd0000; 
  font-weight : bold; 
}

/* success heading color */
span.success { 
  color : #669900; 
  font-weight : bold; 
}

/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis { 
  font-size : 1em; 
}

/* set up relativity to position small Why? text */
small.whythis { 
  position : relative; 
}

/* Why? link style */
small.whythis a { 
  text-decoration : none; 
  font-size : 1em;
}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active { 
  text-decoration : none;
} 

/* hide the Why? text span */
small.whythis a span { 

  padding : 0 4px 0 4px; 
  color : #fff;
  text-decoration : none; 
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span { 

  color : #000;
  padding : 0 4px 0 4px; 
  text-decoration : none; 
}

/* the link back to me for form credit */
p.creditline { 
  float : right; 
  margin : -17px 0; 
  padding-bottom : 1px; 
  font-size : 1em; 
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { 
  cursor : help; 
  
}

/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt, dl.result_dl_blockq dt {
  color : #669900;
}

/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
  margin-left : 0;
}

/* style the input names in the result */
div#hf_form_div span.items {
  font-weight : bold;
  color : #cc9900;
}

dd {margin: 0;}


/* FORMS */

form#quote { background: #fff; padding: 20px;}

form#quote label {
	display: block;
	width: 310px;
	margin-bottom: 10px;
	float: left;
	margin-top: 5px;
	margin-right: 10px;
	font-size: 12px;
	font-weight: normal;
	
	
	}
	
form#quote input {
	background: #fff url(../images/input_bg.gif) top left repeat-x;
	border: 1px solid #ccc;
	margin-bottom: 10px;
	padding: 5px;
	width: 200px;
	clear: right;
	float: left;
}

form#quote input.submit {padding: 0; width: auto; height: auto; border: 1px solid #fff; margin-left: 260px;}

form#quote h3 {margin-bottom: 1em; font-size: 1.8em; color: #2796d6;}

form#quote textarea {
	background: #fff url(../images/input_bg.gif) top left repeat-x;
	font-family: Verdana, Arial;
	font-size: 11px;
	padding: 5px;
	float: left;
	border: 1px solid #ccc;
	height: 80px;
	width: 305px;
	margin-bottom: 10px;
	

	}
	
form#quote input:focus, form#quote textarea:focus {border: 1px solid #888;}
	
.clear { clear: both;}

h3 span.heading-highlight { color: #444; font-weight: bold;}

img.rule { padding-top: 8px; padding-bottom: 12px; border: 0;}

.slide-out-div { background: #fff; width: 200px; padding: 20px; text-align: left; }
.slide-out-div p { line-height: 1.5em;}

table#zoom_table, table#zoom_table th, table#zoom_table td { border: 0;}