html { overflow-y:scroll; overflow-x: hidden }
html,body { padding:0; margin:0; width: 100%; height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; font-size:10pt; background: #0B2C68 url(../img/bg.jpg) left top repeat-x; }

h1, h2, h3, h4 { color: #0099FF; font-size: 12pt; font-weight: normal;}
h1 a, h2 a, h3 a { text-decoration: none; color: #484848; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; }
h2 { color: #484848; }
h3 { color: #0099ff; font-size: 11pt; margin: 20px 0 5px; }
h4 { color: #666; font-size: 8pt; line-height: 1em; margin-bottom: 5px; }
h5 { color: #6A902A; font-size: 11pt; margin-bottom: 10px;}

h1.bigblue { margin: 0; padding-top: 1px; }
h2.greybold { color: #0042b6; font-size: 11pt; margin-top: 12px; }

a,button { outline:none; }
p { color:#505050; margin: 20px 0; font-size: 10pt; line-height:1.3em; }


/* PNG fix for IE*/ 
#screenbox .thumbs li, #screenbox .screen, .photo_frame { behavior: url(pngfix/iepngfix.htc) }



/*** MAIN ELEMENTS ******************************************************************************************/
#head { height: 115px; }
	#head .content { width:840px; margin: 0 auto; padding-top:25px; }
	#logo { width: 300px; height: 17px; color: #d6d4d2; padding-bottom: 4px; display: block; text-decoration: none; }
	#logo span { margin-left: 3px; color: #d6d4d2; font-size: 11pt; }
	#logo:hover span { color: #fff; }
* html #logo { padding-bottom: 0; }


#wrapper { padding-bottom:20px; background: #fff;}
	#wrapper .wrapper-header { border-bottom: 1px solid #d6ecfb; background: #f7fbfd; margin-bottom: 10px; }
	#wrapper .wrapper-header .wrapper-header-content { width:840px; margin: 0 auto; }
	#wrapper .wrapper-content { width:840px; margin: 0 auto;  }


#foot { background:#0B2C68; clear:both; height: 40px; }
	#foot .content { width:840px; margin: 0 auto; padding: 5px 0; }
	#foot .content ul li { color: #AFAFAF; float:left; }
	#foot .content ul li a { color: #AFAFAF; float:left; }
	#foot .content ul li a:hover { text-decoration:none; }
	#foot .content .nav { float:left; }
	#foot .content .nav li { margin-right: 5px; }
	#foot .content .contact { float:right; }
	#foot .content .contact li { margin-left: 5px; }


.image-loading-mask { background: #fff; border: 1px solid #999; opacity: .7; }
.image-loading-mask div { border:1px solid #666; padding: 8px 8px 8px 30px; background: #fff url(../img/icons/loading.gif) 5px 6px no-repeat; }
.ext-el-mask { background:none; }
.ext-ie .image-loading-mask { filter: alpha(opacity=70); }
/************************************************************************************************************/



/*** MENU ***************************************************************************************************/
#menu { float:left; margin-top: 29px; height:40px; list-style: none; }
	#menu li { float:left; margin-right: 5px; font-size: 11pt; }
	#menu li a { float:left; text-decoration:none; height: 28px; width: 116px; background: #253a99 url(../img/menu.jpg) top left no-repeat; margin: 0; text-align: center; color: #fff; padding: 12px 0 0 0; }
	#menu li a:focus,
	#menu li a:hover { color: #d6d4d2; }
	#menu .active a, #menu .active a:focus, #menu .active a:hover { background: #f7fbfd; color: #253a99; }
/************************************************************************************************************/


/* tagbar */
.tagbar { margin: 0; border-collapse: collapse; font-size: 11pt; width: 100%; overflow:hidden; }
.tagbar a { float: left; text-decoration: none; margin: 15px 5px 10px 0; padding: 5px 10px; color: #0099ff; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.tagbar a:focus, .tagbar a:hover { background: #e1f2fd; }
.tagbar a.active { background: #a6dbfe; color: #fff; font-weight: bold; }

.tagbar td { height: 37px; padding: 0; vertical-align: top;}
.tagbar td a { display: block; float:none; }
.tagbar td.last a { margin-right: 0; font-weight: bold; } 





/*** LAYOUT *************************************************************************************************/
.layout	{ display:inline-block; width:100%; margin-top:20px;  }
.ext-gecko .layout { margin-bottom:-3px; }

.layout .separator { border-top:1px solid #D5D5D5;  margin: 5px 0 10px; }
.layout .spacer { height:10px; width:100%; clear:both; }
.layout .clear { width:100%; clear:both; }

.layout p a { color: #0042b6; text-decoration:none; }
.layout p a:hover { text-decoration:underline; }


/* columns */
.column { float:left; margin-right: 30px; }
.column-big { width: 550px; }
.column-small { width: 260px; }
.column-med { width: 405px; }
.column-last { margin-right: 0; }
.column .cell { margin-bottom: 20px; clear:both; display:inline-block; width:100%; }
/*******************************************************************************************************************/



/*** BOXES *********************************************************************************************************/
/* in: projects  */
.quotebox cite { color: #000; font-family:Georgia,Times,serif; font-size: 9pt; }
.quotebox strong { color: #6A902A; display:block;  margin: 10px 0; font-weight:bold; }
.quotebox span { color: #0042B6; float:none; }

.client-feedback a { color: #0042B6; float:none;}
.client-feedback a:hover { text-decoration:none; }


/* in: services, about */
.box { width:796px; margin-bottom: 20px;  }
	.box .box-top { background: url(../img/boxes/box-top.png) right bottom no-repeat; height: 4px; font-size: 0; }
	.box .box-bottom { background: url(../img/boxes/box-bottom.png) right top no-repeat; height: 18px; font-size: 0;  }
	.box .box-mid { background: url(../img/boxes/box-mid.png) right top repeat-y;  }
		.box .box-mid .box-bullet { background: url(../img/boxes/box-bullet.png) left top no-repeat; width:49px; height: 77px; float:left; margin-top:5px; }
		.box .box-mid .box-content { padding: 10px 0 0; margin: 0 10px 0 65px;}
			.box .box-mid .box-content .box-screen { border:1px solid #C0DDE3; background: #fff; width:316px; height: 74px; margin: 0 10px 10px 20px; float:right; }
			.box .box-mid .box-content .box-screen img { margin:4px 4px 1px; }
			.box .box-mid .box-content .box-header { border:1px solid #C0DDE3; background: #F6F9FA; width:320px; margin-bottom: 15px; padding:1px; }
			.box .box-mid .box-content .box-header h1 { border: 2px solid #FDFDFE; background: #F6FBFB; color:#6A902A; padding:5px 10px; margin:0; text-transform:none; }
			.box .box-mid .box-content p,
			.box .box-mid .box-content ul { margin: 10px 0 0 0; color: #717171; }
			.box .box-mid .box-content ul { margin-left: 15px; list-style: disc; }
			
		.box .box-mid .box-bullet-1 { background-image:url(../img/olist/1.png); }
		.box .box-mid .box-bullet-2 { background-image:url(../img/olist/2.png); }
		.box .box-mid .box-bullet-3 { background-image:url(../img/olist/3.png); }
		.box .box-mid .box-bullet-4 { background-image:url(../img/olist/4.png); }
		.box .box-mid .box-bullet-5 { background-image:url(../img/olist/5.png); }
		.box .box-mid .box-bullet-6 { background-image:url(../img/olist/6.png); }
		.box .box-mid .box-bullet-7 { background-image:url(../img/olist/7.png); }
		.box .box-mid .box-bullet-8 { background-image:url(../img/olist/8.png); }
		.box .box-mid .box-bullet-9 { background-image:url(../img/olist/9.png); }
		.box .box-mid .box-bullet-10 { background-image:url(../img/olist/10.png); }
		
		.box .box-mid .box-bullet-1b { background-image:url(../img/olist2/1.png); }
		.box .box-mid .box-bullet-2b { background-image:url(../img/olist2/2.png); }
		.box .box-mid .box-bullet-3b { background-image:url(../img/olist2/3.png); }
		.box .box-mid .box-bullet-4b { background-image:url(../img/olist2/4.png); }
		.box .box-mid .box-bullet-5b { background-image:url(../img/olist2/5.png); }
		.box .box-mid .box-bullet-6b { background-image:url(../img/olist2/6.png); }
		.box .box-mid .box-bullet-7b { background-image:url(../img/olist2/7.png); }
		.box .box-mid .box-bullet-8b { background-image:url(../img/olist2/8.png); }
				
		.box .box-mid .weight { background-image:url(../img/applist/weight.png); }
		.box .box-mid .browser { background-image:url(../img/applist/browser.png); }
		.box .box-mid .accessibility { background-image:url(../img/applist/accessibility.png); }
		.box .box-mid .usability { background-image:url(../img/applist/usability.png); }
		.box .box-mid .personas { background-image:url(../img/applist/personas.png); }
		.box .box-mid .wireframes { background-image:url(../img/applist/wireframes.png); }
		.box .box-mid .design { background-image:url(../img/applist/design.png); }
		.box .box-mid .prototypes { background-image:url(../img/applist/prototypes.png); }
		.box .box-mid .html { background-image:url(../img/applist/html.png); }
		.box .box-mid .interface { background-image:url(../img/applist/interface.png); }
		
#narrow { width: 404px; }
	#narrow .box-top { background:url(../img/boxes/narrow-box-top.png) right bottom no-repeat; height:4px; font-size:0; }
	#narrow .box-bottom { background:url(../img/boxes/narrow-box-bottom.png) right top no-repeat; height: 18px; font-size:0;  }
	#narrow .box-mid { background:url(../img/boxes/narrow-box-mid.png) right top repeat-y;  }
/*******************************************************************************************************************/




/*** BUTTONS *******************************************************************************************************/
.btn { height: 33px; background:#fff left top no-repeat; display:block; margin: 10px -2px;}
.btn:hover { background-position:left bottom; }

.btn-findoutmore { background-image:url(../img/buttons/btn-findout.png); width: 135px; }
.btn-submit { background-image:url(../img/buttons/btn-submit.png); width: 92px; }

.link-findoutmore { font: 13pt Georgia, "Times New Roman", Times, serif; color: #4064A4; text-decoration:none; }
.link-findoutmore:hover { text-decoration:underline; }

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

/* palette
darkest blue 	#0B2C68
darkish blue 	#253a99

teal			#0080b8
light teal		#0099ff

vv light gray 	#e0e0e0

v light blue 	#d6ecfb
*/