html, body { margin:0; padding:0; text-align:center; height:100%; background:url(/images/bg-center.gif) repeat-y center top #fff; font-size:1em; font-family:Verdana, Arial, Helvetica, sans-serif; color:#2e3336; height: 100%; margin-bottom: 1px; }
#pagebg { background:url(/images/bg.gif) repeat-x center top; width:100%; height:100%; margin:0; padding:0; }
#pagewidth { position:relative; width:770px; text-align:left; margin:0 auto; padding:0; background:url(/images/bg-right.jpg) no-repeat right top; } 
 
/* logo */
#logo { position:absolute; left:7px; top:0px; width:163px; height:109px; background:url(/images/bg-left-logo.jpg) no-repeat top right; }
#logo a img { border:none; margin-top:38px; }

/* FOR TESTING */
.test { outline:1px dotted #f00; }

/* content area */
#maincol { float: right; display:inline; position: relative; width:592px; background:#fff; margin-right:8px; }

/* text styles */
h1, h2, h3, h4, h5	{ padding:5px 0; margin:0 27px; line-height:1.3em; font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;}
h1 { font-size:1.2em; padding:20px 0 20px 0; margin-top:14px; color:#d73d00; line-height:1.1em;  }
h2 { font-size:1.05em; font-weight:normal; color:#000; background:url(/images/h-line.gif) repeat-x bottom left; margin-bottom:5px; }
h3 { font-size:0.9em; padding-bottom:0;}
h4 { font-size:0.85em;}
h5 { font-size:0.8em;}
p { font-size:0.75em; line-height:1.5em; padding:5px 0; margin:0 27px; color:#2e3336;}
ul, ol { font-size:0.75em; padding:5px 0 5px 14px; margin:0 27px; line-height:1.5em; }
dl { font-size:0.75em; padding:5px 0; margin:0 27px; line-height:1.5em; }
li p { font-size:1em; padding:0; margin:5px 0; }
table { margin:5px 27px; color:#2e3336; }
td, th { font-size:0.7em; line-height:1.5em; padding:3px 6px; }
a img { border:none; }
#maincol li { margin-bottom:3px; }

/* link styles */
a:link { color: #028aca; text-decoration: underline;}
a:visited { color: #666; text-decoration: underline;}
a:hover, a:active { color: #028aca; text-decoration: none;} 
a:focus { outline:none; }

/* other styles */
acronym, abbr {cursor: help; border-bottom: 1px dotted #333;}
hr { clear:both; display:none } 

/* Page intro */
#intro { position:relative; text-align:left; color:#3d4346; margin:14px 14px 0 14px; padding:14px 0 32px 0; background:url(/images/bg-intro.gif) repeat-x bottom #fff; }
#intro p { color:#3d4346; margin:0; padding:5px 14px 5px 14px; font-size:0.75em; line-height:1.6; font-weight: bold; }
#intro h1 { padding:5px 14px 20px 14px; margin:0; line-height:1.1em; }

/* HOMEPAGE styles: */
/* homepage intro */
#introhome { position:relative; text-align:left; color:#3d4346; margin:14px 14px 10px 14px; padding:14px 0 0 0; background:url(/images/bg-intro.gif) repeat-x bottom #fff; }
#introhome p { color:#3d4346; margin:0; padding:25px 14px 32px 240px; font-size:0.75em; line-height:1.6; text-align:right; }
#introhome h1 { padding:5px 14px 0 0; margin:0; line-height:1.1em; text-align:right; }

/* photo shuffle (laptop with screenshots) */
#photodiv { position:absolute; top:3em; left:8px; background-repeat: no-repeat; }
#photodiv a img { border:none; }

/* homepage 2 columns */
#homecols { position:relative; text-align:left; margin:0; padding:0; }

/* homepage news */
#news { width:353px; float:left; display:inline; position:relative; }
#news h2 { margin-right:0; margin-bottom:15px; padding-top:0; font-size:1.1em; }
#news ul { padding:0; margin:0 0 0 27px; list-style:none; line-height:1.2; font-size:0.7em; }
#news ul li { background:url(/images/plus.gif) no-repeat 0 2px; padding:0 0 0 20px; margin:0 0 10px 0; }
#news ul li a { font-weight:bold }
#news ul li strong { color:#f0680d; }
#news ul ul { padding:0; margin:2px 0 2px 12px; list-style: disc; line-height:1.2; font-size:1em; }
#news ul li li { background:none; padding:0 0 0 0px; margin:0 0 2px 0; }
#news p { background:url(/images/h-line.gif) repeat-x top left; padding-top:10px; margin-top:3px; font-size:0.7em;  }
#news p a { background: url(/images/plus2.gif) no-repeat; padding-left:20px; color:#d73d00; }
#news p a:hover { text-decoration:none; }

/* homepage portfolio */
#work { float:right; position:relative; width:213px; }
#work h2 { margin:0 33px 15px 0; padding-top:0; font-size:1.1em; }
#work ul { margin:0; padding:0; list-style:none; }
#work li { line-height:1.1; margin:0 33px 0 0; padding:6px 0 10px 0; font-size:0.85em; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif }
#work a { color:#d73d00; text-decoration: none; }
#work a strong { text-decoration: underline; font-weight:normal; }
#work a:hover strong { text-decoration: none; }
#work a:visited { color: #666; }
#work a img { border:1px solid #8e9193; margin-bottom:2px; }
#work p { background:url(/images/h-line.gif) repeat-x top left; padding:10px 0 0 0; margin:3px 27px 0 0; font-size:0.7em;  }
#work p a { background: url(/images/plus2.gif) no-repeat; padding-left:20px; color:#d73d00; text-decoration:underline; }
#work p a:hover { text-decoration:none; }

/* contact (address columns) */
#intro p.address { width:230px; float:left; font-weight:normal; margin:0; padding:0 0 0 14px; position:relative; }

/* contact (location map) */
#map { margin:5px 27px; border:1px solid #facaaa; }

/* client list */
#clients { padding:0; margin:10px 17px 0 27px; font-size:0.7em }
#clients dt { width:50%; float:left; margin:0; padding:.3em 0; border-top:1px dotted #ccc; font-weight: bold; clear: both; }
#clients dd { float:left; width:45%; margin:0; padding:.3em 0; border-top:1px dotted #ccc; }
#clients dt.first { border:none 0; }
#clients dd.first { border:none 0; }
#clients a img { vertical-align:middle; margin:-1px 0; float:right; }

/* news archive */
#newsarchive ul { padding:5px 0; margin:0 27px; list-style:none; line-height:1.2; font-size:0.7em; }
#newsarchive ul li { background:url(/images/plus.gif) no-repeat 0 2px; padding:0 0 0 20px; margin:0 0 10px 0; }
#newsarchive ul li a { font-weight:bold }
#newsarchive ul li ul { padding:0; margin:2px 0 2px 12px; list-style: disc; line-height:1.2; font-size:1em; }
#newsarchive ul li ul li { background:none; padding:0 0 0 0px; margin:0 0 2px 0; }

/* team */
#team img { float:left; margin-right:10px; margin-bottom:8px; border:1px solid #ccc }
#team h2 { clear:left; font-size:0.95em; padding-top:15px; }
#team h2 em { color:#d73d00; }

/* approach */
#method p { padding-left:5.5em; text-indent:-5.5em; }
#method p.phase { padding-left:5.5em; text-indent:0; color:#d73d00; border-bottom:1px solid #ddd; margin-bottom:5px; padding-bottom:10px; }

/* services */
#servicelist { margin:0 7px 0 27px; padding:0; list-style:none; }
#servicelist li { border:1px solid #d5d5d5; padding:6px 6px 4px 6px; margin:10px 20px 10px 0; list-style:none; float:left; width:235px; background:url(/images/services-bg.gif) repeat-x top left; }
#servicelist li a { text-decoration:none; font-weight:bold; color:#666; }
#servicelist li a img { vertical-align:middle; margin:0 6px 2px 0; }
#servicelist li a strong { color:#ea5309; }
#servicelist li a:hover { text-decoration:underline; }

/* references */
#references em { font-size:0.9em; color:#555; }
#references p { line-height:1.3; } 
#references h2 { background:none; padding-top:10px; color:#d73d00}
#references blockquote { margin:0; } 
#references blockquote p { padding:0 10px 10px 10px; line-height:1.5; }
#references blockquote p.bubble { border-top:2px solid #facaaa; padding:7px 10px 20px 10px; background:url(/images/bubble.gif) no-repeat bottom left; }

/* case studies overview */
#casestudies { margin:0 10px 0 27px; padding:0; list-style:none; }
#casestudies li { margin:15px 0 5px 0; padding-right:17px; list-style:none; float:left; width:168px; height:15.5em; border-bottom:1px solid #ddd; font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif; font-size:0.9em; line-height:1.2; color:#454e52;  }
#casestudies li.rowend { padding-right:0;  }
#casestudies li img { border:1px solid #8e9193; margin:8px 0 5px 0; }
#casestudies li a { text-decoration:none; color:#d73d00; font-weight:bold; font-size:1.1em; }
#casestudies li a:hover { text-decoration:underline; color:#666; }

/* individual case study */
#casestudy { width:353px; float:left; position:relative; }
#casestudy h2 { clear:both; margin-right:0; margin-bottom:10px; font-size:1.1em; }
#casestudy ul { padding:0; margin:0 0 0 27px; list-style:none; line-height:1.2; font-size:0.7em; }
#casestudy ul li { padding:0 0 0 20px; margin:0 0 10px 0; }
#casestudy p { margin:0 0 0 27px; }

#casestudyimg { float:right; position:relative; display:inline; width:213px; }
#casestudyimg p { margin:5px 27px 0 0; }
#casestudyimg p img { border:1px solid #8e9193; }

#casestudylist { clear:both; border:1px solid #d5d5d5; padding:3px 10px; margin:20px 27px; background:url(/images/services-bg.gif) repeat-x top left; }
#casestudylist h3, #casestudylist p { margin-left:0; margin-right:0; }
#casestudylist p { font-size:0.7em;}
#casestudylist p a { text-decoration:none; }
#casestudylist p a:hover { text-decoration:underline; }

#casestudynav { float:right; width:180px; font-size:0.7em; text-align:center; padding:3px 5px; color:#b9bcbe; margin-top:5px; }
#casestudynav strong { color:#454e52 }
#casestudynav img { vertical-align:middle; margin:0 3px 1px 3px; }
#casestudynav a img { border:none; }
#casestudynav a:link { text-decoration:none; color:#028aca; }
#casestudynav a:visited { text-decoration:none; color:#028aca; }
#casestudynav a:hover { text-decoration:underline; }

/* support */
#spamdata { border-right:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; }
#spamdata th { border:1px solid #d5d5d5; border-right:none; border-bottom:none; background:url(/images/services-bg.gif) repeat-x top left; }
#spamdata td { border:1px solid #d5d5d5; border-right:none; border-bottom:none; }
#spamtotal td { background:#eee; border-top:2px solid #ccc; }

#emailsupport h3 { clear:right; color:#d73d00; border-bottom:1px solid #d5d5d5; }
#emailsupport p { clear:right; }
#emailsupport p img { float:right; margin-left:10px; border:1px solid #8e9193; }

/* terms & conditions */
#terms h3 { margin-bottom:15px; }
#terms ul { list-style:none; margin:0 27px; padding:0; }
#terms ul ul { list-style:none; font-size:1.0em; margin:0 14px; padding:0; }
#terms h2 strong, #terms li strong { color:#585c5e; font-size:1.1em; }
.bulletlist li { list-style:disc; margin-left:15px }

/* left column (navigation) */
#leftcol { margin-top:109px; width:170px; float:left; position:relative; background:url(/images/bg-left.jpg) no-repeat right top; padding-top:27px; }
#leftcol ul { margin:0 0 0px 0; padding:0; width:170px; list-style:none; font-family:"Trebuchet MS", Tahoma, Verdana, sans-serif; font-size:0.9em; font-weight:bold; line-height: normal; }
#leftcol ul li { margin:0; padding:0; background:url(/images/nav-line.gif) repeat-x bottom; width:170px;   }
#leftcol ul li a:link { text-decoration:none; text-transform:uppercase; color:#2e3336; display:block; margin:0; padding:5px 0 7px 9px; }
#leftcol ul li a:visited { color:#2e3336; text-decoration:none; text-transform:uppercase; display:block; margin:0; padding:5px 0 7px 9px; }
#leftcol ul li a:hover, a:active { text-decoration:underline; }
#leftcol ul li ul { display:none; margin:0; padding:0 0 6px 0; font-size:0.9em; }
#leftcol ul li ul li { margin:0; padding:0 0 0 10px; background:url(/images/nav-plus.gif) no-repeat 9px 6px; width:160px; }
#leftcol ul li ul li a:link { text-transform:none; color:#585c5e; margin:0; padding:0 0 3px 9px; }
#leftcol ul li ul li a:visited { text-transform:none; color:#585c5e; margin:0; padding:0 0 3px 9px; }
#leftcol ul li ul li a:hover, a:active { text-decoration:underline; }
#leftcol ul li ul li ul { display:none; margin:0; padding:0 0 3px 0; font-size:0.95em; font-weight:normal; }
#leftcol ul li ul li ul li { margin:0; padding:0 0 0 10px; background:url(/images/nav-plus.gif) no-repeat 9px 6px; width:150px; }
#leftcol ul li ul li ul li a:link { padding:0 0 0 9px; }
#leftcol ul li ul li ul li a:visited { padding:0 0 0 9px; }
#leftcol ul li ul li ul li a:hover, a:active { text-decoration:underline; }
/* show active sub-navigation list */
#about ul li#navabout ul { display:block; }
#contact ul li#navcontact ul { display:block; }
#portfolio ul li#navportfolio ul { display:block; }
#services ul li#navservices ul { display:block; }
#services ul li#navservices ul li#navdevelopment ul { display:none; }
#development ul li#navservices ul { display:block; }
#development ul li#navservices ul li#navdevelopment ul { display:block; }
#support ul li#navsupport ul { display:block; }

#leftcol div { font-family:"Trebuchet MS", Tahoma, Verdana, sans-serif; font-size:1em; font-weight:bold; line-height:normal; padding:20px 9px 5px; }
#leftcol div strong { color:#d73d00; padding-right:6px }
#leftcol div img { padding:3px 6px 0 0; vertical-align:top; }
#leftcol div#registrar { padding:20px 12px 10px 0; text-align:right; }

/* footer */
#footer { position:relative; height:50px; background:url(/images/bg-footer.gif) repeat-y center #dfebf1; clear:both; margin-top:15px; color:#6d7376; font-family:Arial, Helvetica, sans-serif; } 
#footer div { position:relative; width:770px; text-align:left; margin:0 auto; padding:0; }
#footer div p { width:592px; text-align:center; margin:0 8px 0 170px; color:#6d7376; line-height:1.2; padding:10px 0 0 0; font-size:0.7em; } 
#footer div p#copy { position:absolute; top:11px; left:5px; font-size:0.65em; width:165px; padding:0; margin:0; text-align:left; } 
#footer div a { color:#6d7376; text-decoration:underline; } 
#footer div a:hover { text-decoration:none; } 

 
/* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ 
.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;} */
/* #twocols, #maincol{width:100%; float:none;} */
/* } */

.iphone-screenshot {
	float: right;
	margin:0 0 0 20px;
}

.iphone-copyright {
	color: #666;
	font-size: 10px;
}