/* RESET */
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,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;}

/* GLOBAL */
body{background:#000;text-align:center;font-family:Verdana, Sans;font-size:80%;color:#fff;}
.content{width:900px;margin:0 auto;}
.clear{clear:both;}
.float-left{float:left;margin-right:15px;}

/* HEAD-NAVIGATION */
#meta{background:#fff;height:150px;overflow:hidden;}
#hyperMetrixLogo{}
img#head-logo{display:none;}

#nav{text-align:center;}
#nav .links{position:absolute;z-index:1;top:-10px;margin-left:291px;border:1px dotted purple;display:none;}
#nav .links a{position:absolute;display:block;width:316px;text-align:center;color:#000;font-size:14px;text-decoration:none;z-Index:2;letter-spacing:-.15em;text-transform:/*uppercase*/;white-space:}
#nav .links a:focus{background:#0af;color:#fff;/*text-decoration:underline*/;z-index:3;}
#nav .links a:focus:hover{background:#0af;color:#fff;/*text-decoration:underline*/;z-index:3;}
#nav .links a:hover{color:#0af;/*text-decoration:underline*/;z-index:3;}

#breadcrumb{background:url(../img/breadcrumb.gif) repeat-x;height:50px;text-align:left;}
h3{font-size:14px;font-weight:normal;letter-spacing:10px;padding-top:20px;color:#0af;position:relative;z-index:2;float:left;}
h4{height:60px;text-align:center;}


#data .content h1{text-align:center;margin:0;}
#data .content h2{color:#fff;font-weight:normal;text-align:center;margin-top:-15px;}

/* CONTENT */
#data{background:url(../img/pageback.gif) repeat-x;margin-top:0px;padding:30px 0 0px 0;min-height:1080px;}
#data .content{padding-top:20px;text-align:left;}
#data #mask{display:none;}
#data #lineshine{background:url(../img/shine.gif) no-repeat;height:19px;width:100px;position:absolute;margin-top:-30px;display:none;}

#data div.para {margin:10px 0 20px 0;z-index:1;position:relative;/*background:url(../img/para-back.gif) repeat-x top;*/}
#data div.para span.line{height:1px; background:url(../img/para.gif) no-repeat;display:block;overflow:hidden;}
#data div.para div.hidden{display:none;}

#data div.portfolio-nav{border-right:1px solid #0095ff;border-left:1px solid #0095ff;}
#data div.portfolio-nav span.line{height:1px; background:url(../img/page.gif) no-repeat;display:block;overflow:hidden;clear:both;}
#data div.portfolio-nav span.linebot{height:1px; background:url(../img/page.gif) no-repeat;display:block;overflow:hidden;clear:both;margin-top:198px;}


#data div.portfolio h6{padding-bottom:5px;}

#data div.portfolio div.para a.eg{background:url(../img/eg.gif) no-repeat top right; padding:0 7px 0 0;color:#34abff;color:#007ed8;} 
#data div.portfolio div.para a.eg span{background:url(../img/egspan.gif) no-repeat;display:block;float:left;width:35px;height:16px;position:relative;top:-1px;vertical-align:top;margin-bottom:-3px;}
#data div.portfolio div.para a.eg:hover{color:#34abff;text-decoration:none;background:url(../img/eg.gif) no-repeat right -16px;}
#data div.portfolio div.para a.eg:hover span{background-position: 0px -16px;}
#data div.portfolio div.para a.eg:focus{background:url(../img/eg.gif) no-repeat right -32px;color:#005a9a;text-decoration:none;}
#data div.portfolio div.para a.eg:focus span{background-position: 0px -32px;}
#data div.portfolio div.para a.eg:active{background:url(../img/eg.gif) no-repeat right -48px;color:#999;text-decoration:none;}
#data div.portfolio div.para a.eg:active span{background-position: 0px -48px;}


/*

#data div.para.hide p{display:none;}
#data div.para.hide ul{display:none;}
#data div.para.hide h6{display:none;}
*/

#data .content h4{font-weight:normal;letter-spacing:10px;font-size:18px;}
#data .content h5 a{display:block;padding:4px 0 5px 0;font-size:12px;text-transform:uppercase;color:#0095ff;font-weight:normal;line-height:11px;letter-spacing:5px;text-align:center;border-right:1px solid #0095ff;border-left:1px solid #0095ff;background:#181818;}
#data .content h5 a:focus{text-decoration:none;background:#0af;color:#fff;}
#data .content h5 a:hover{text-decoration:none;background:#048;color:#fff;}
#data .content h5 a:active{text-decoration:none;background:#fff;color:#000}

#data .content h6{text-align:left;border-right:1px solid #0095ff;border-left:1px solid #0095ff;font-weight:bold;padding:0 0 0 14px;color:#ddd;}

#data .content p{color:#aaa;line-height:14px;font-size:13px;padding:10px 15px;border-left:1px solid #0095ff;border-right:1px solid #0095ff;text-align:justify;}
#data .content table{border-left:1px solid #0095ff;border-right:1px solid #0095ff;width:649px;border-collapse:collapse;margin-left:1px;}
#data .content table th{padding:5px 0 5px 10px;background:#048;}
#data .content table td{padding:1px 0 1px 10px;color:#888;}
#data .content table tr.y td{color:#af0;}

#data .content span.diagram{border-left:1px solid #0095ff;border-right:1px solid #0095ff;text-align:center;display:block;}

#data .content span.hmb{background:url(../img/hyper-metrix-brand-b.gif) no-repeat;display:block;float:left;width:147px;margin-top:2px;margin-bottom:-3px;}
#data .content span.hmb b{visibility:hidden;}
#data .content strong{font-weight:normal;color:#eee;}
.content a{color:#0088dd;text-decoration:none;}
.content a:visited{color:#0088dd;}
.content a:hover{color:#00aaff;text-decoration:underline;}
.content a:focus{background:#00aaff;color:#000;}
.content a:active{background:#0066bb;color:#fff;}
#data .content pre{font-size:14px;padding:5px 0 14px 14px;border-right:1px solid #0095ff;border-left:1px solid #0095ff;}

.strike{text-decoration:line-through!important;}


#data .content ul{padding:0px 10px 10px 30px;list-style-type:disc;color:#aaa;font-size:14px;border-left:1px solid #0095ff;border-right:1px solid #0095ff;}
#data .content ul li h6{font-weight:normal;}

#data .content img.float-right{float:right;margin:10px 0 0 0}
#data .content img{margin:10px 0 0 0}


img.minifloat{float:left;margin:0 15px 10px 0!important;display:block;}



.server-response{display:none;margin-top:20px;margin-bottom:5px;padding-right:10px;}
#server-response{font-size:11px!important; color:#888!important;}
#server-response p{text-align:left;margin-bottom:10px;}


/* WIDE FORM */
#data .content form {background:#222;padding:10px 10px 20px 20px;margin-top:20px;}
#data .content form label{display:block;width:300px;margin-top:10px;color:#ccc;}
#data .content form span{}
#data .content form input.text, #data .content form textarea{display:block;width:300px!important;margin-top:2px;background:#000;border:1px solid #333;color:#aaa;}
#data .content form textarea{margin-top:5px;height:100px;}
#data .content form input.text:hover, #data .content form textarea:hover{background:#333;border:1px solid #444;color:#bbb;}
#data .content form input.text:focus, #data .content form textarea:focus{background:#07c;border:1px solid #0af;color:#fff;}
#data .content form input.submit{margin-top:5px;}

#data .content .pageleft{width:650px; float:left;}
#data .content .pageright{margin-left:680px;margin-bottom:20px;padding:0;}
#data .content .pageright.home{}

#data .content .pageleft.portfolio{padding-top:20px;}
#data .content .pageright.portfolio{padding-top:0!important;}


#data .content .pageright .linkbox {border-right:1px solid #0095ff;border-left:1px solid #0095ff;}
#data .content .pageright .linkbox span.roundtop{background:url(../img/round.gif);display:block;height:6px;position:relative;top:-6px; left:-1px;z-index:2;width:220px;margin-bottom:-6px;}
#data .content .pageright .linkbox span.roundbot{background:url(../img/round.gif) bottom left;display:block;height:6px;position:relative; left:-1px;z-index:2;width:220px;}
#data .content .pageright .linkbox span.roundtop.grey{background:url(../img/round-grey.gif);}
#data .content .pageright .linkbox span.roundbot.grey{background:url(../img/round-grey.gif) bottom left;}

#data .content .pageright h5{margin:5px;font-weight:normal;color:#aaa;}
#data .content .pageright h6 {border:none;padding:0;text-align:center;}
#data .content .pageright h6 img{margin:0;top:-4px;position:relative;z-index:2;margin-top:20px;}

#data .content .pageright a.l{display:block;padding:6px 10px 0 5px;letter-spacing:1px;font-size:12px;background:url(../img/page-right-button.gif) no-repeat;height:20px;text-align:center;width:209px;margin-left:5px;}
#data .content .pageright .download a.l{background:url(../img/download.gif) no-repeat;height:20px;text-align:center;width:209px;margin-left:5px;}
#data .content .pageright .example a.l{background:url(../img/example-button.gif) no-repeat;}
#data .content .pageright a.l:hover, #data .content .pageright .client a:focus{color:#fff;text-decoration:none;background-position:0px -26px;}
#data .content .pageright a.l:active{background:#fff;color:#000;text-decoration:none;}
#data .content .pageright a.l span{width:50px;background:#fff;margin:0 10px 0 0;padding:5px;text-align:center;overflow:hidden;display:block; border:1px solid 888;float:left;display:none;}
#data .content .pageright img{vertical-align:middle;}
#data .content .pageright .linkbox a:active{background:url(../img/page-right-button.gif) no-repeat 0px -26px;}

#data .content .pageright .linkbox .download a:active{background:url(../img/download.gif) no-repeat 0px -26px;}
#data .content .pageright .linkbox .example a:active{background:url(../img/example-button.gif) no-repeat 0px -26px;}

#data .content .pageright .oops{margin-left:-10px;}
#data .content .pageright .oops form{padding-bottom:10px;border:1px solid #333;border-left:none;}

#data .content .pageright .biglink {text-align:center;}
#data .content .pageright .biglink p{border:none;margin-top:7px;padding:0;font-size:.9em;margin-bottom:10px;/*border-top:1px solid #ccc*/;position:relative;z-index:2;padding-top:3px;text-align:justify;}

/* PageRight Form */
#data .content .pageright form {margin:0!important;padding:0 0 0 8px;border:1px solid #222;}
#data .content .pageright form label{display:block;width:200px;color:#ccc;}
#data .content .pageright form input.text, #data .content .pageright form textarea{display:block;width:200px!important;margin-top:2px;background:#000;border:1px solid #333;color:#aaa;}
#data .content .pageright form textarea{margin-top:5px;height:100px;}
#data .content .pageright form input.text:hover, #data .content form textarea:hover{background:#333;border:1px solid #444;color:#bbb;}
#data .content .pageright form input.text:focus, #data .content form textarea:focus{background:#07c;border:1px solid #0af;color:#fff;}
#data .content .pageright form input.submit{margin-top:5px;}
#data .content .pageright form p{border:0;padding:0;}




#foot {clear:both;padding:0px 0 100px 0;}
#foot .content{padding:2px 10px 4px 10px;border-top:1px dotted #555;width:900px;font-size:10px;color:#555;letter-spacing:3px;text-align:center;}
#foot .content strong{font-weight:normal;color:#888;}





div#listindex {}
div#listindex div.item {border-left:1px solid #0095ff;border-right:1px solid #0095ff;padding:0;}
div#listindex div.item img{border:1px solid #0095ff;margin:0 10px 0 0;float:left;width:40px;height:30px;vertical-align:top;}
div#listindex div.item a {font-weight:bold;}
div#listindex div.item p {font-size:12px!important;border:none;padding:10px;}

span.inner div#listindex {background:#222;padding:0 5px;}
div#listindex div.blog-item {border:none!important;}
div#listindex div.blog-item a.img{display:block;}
div#listindex div.blog-item img{border:1px solid #09f;margin:0 10px 0 0;display:lock;float:none;vertical-align:top;}
div#listindex div.blog-item a.text {font-weight:bold;font-size:13px;display:block;padding:5px 0;}
div#listindex div.blog-item p {font-size:12px!important;padding:5px;line-height:11px;border:none;}



.portfolio-nav {margin-top:20px;width:900px;height:200px;}
.portfolio-nav a{position:absolute;text-align:center;}
.portfolio-nav a:hover span,.portfolio-nav a:focus span{border:5px solid #0af;display:block;position:relative;margin-top:-90px; opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.50;}
.portfolio-nav a:focus{background:none;}
.portfolio-nav a:active{background:none;}

/*border:2px dotted #0af;;display:block;position:relative;width:200px;height:150px;margin-top:-210px; opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.50;*/


.portfolio{margin-top:10px;}


.done{text-decoration: line-through;}

.IEewarning{display:none;}


div#tweets{background:url(../img/twitter.png) no-repeat right 2px; height:35px;margin-top:15px;float:right;margin-top:0;padding:19px 50px 0 0;overflow:hidden;display:inline;width:400px;text-align:right;font-size:14px;}
div#tweets div.inner{position:relative;}
div#tweets div.inner div.tweet {display:none;overflow:hidden;height:26px;white-space:nowrap;width:390px;margin-left:10px;}
div#tweets div.inner div.tweet span{display:none;}
div#tweets div.inner div.tweet a.tweeter {font-weight:bold;}
div#tweets div.inner div.tweet a.at {color:#ffaa00;}  



/*##### TIMELINE STYLES #####*/
  #timeline{border-right:1px solid #0af;border-left:1px solid #0af;font-size:.8em;overflow:hidden;height:185px;padding-top:5px}
  #timeline .dragline{opacity:0;filter: alpha(opacity=0); -moz-opacity: 0}
  #timeline .year{position:absolute!important;border-left:1px dashed #0af;}
  #timeline .this {position:absolute;font-size:70px;color:#024;font-weight:bold;margin-top:110px;}  
  #timeline .months12{background:url(../img/timeline-year.png) no-repeat bottom left;position:relative;z-index:3;height:185px;width:600px;}  
  #timeline .event{width:auto;float:left;overflow:hidden;height:33px;white-space:nowrap;position:relative;margin-left:-15px;} /* Set relative so that FF2 can get the correct width. */
  #timeline .event p{margin:10px 0 0 10px;color:#000;background:url(../img/timeline-event.png);padding:5px 15px 5px 10px;position:relative;}
  #timeline .event strong{color:#fff;text-transform:uppercase;}
  .layer1{margin-top:0;position:absolute;}
  .layer2{margin-top:38px;position:absolute;}
  .layer3{margin-top:76px;position:absolute;}
  .layer4{margin-top:114px;position:absolute;}    
  #timeline .marker{background:url(../img/timeline-marker.png) no-repeat;background-position: 3px 0px;width:18px;height:33px;position:absolute;z-index:2;float:left;margin-top:2px;}
  #timeline .marker span{display:none;}
  #timeline .marker.begin {}
  #timeline .marker.end {margin-left:-12px;}
  #timeline a{color:black;border-bottom:1px dotted #000;font-weight:bold;}
  #timeline a:hover,#timeline a:focus,#timeline a:active {color:#fa0;text-decoration:none;border-bottom:1px dotted #fa0;}
  
  #timeline div.upcoming p{background:#8a0!important;}
  #timeline div.upcoming a:hover,
  #timeline div.upcoming a:focus{border-bottom:1px dotted #f20!important;color:#f20!important;}


#blog{margin-bottom:50px;}
#blog p.subtitle{border:none;margin:0;padding:0;text-align:center;margin-bottom:20px;color:#ddd;}
#blog span.line{height:1px; background:url(../img/para.gif) no-repeat;display:block;overflow:hidden;}
h5{font-size:24px;color:#0af;letter-spacing:3px;text-align:center;margin:10px 0 0 0;}
p.subtitle{letter-spacing:1pt;}
.blog-content{padding:10px 20px;border-left:1px solid #0af;border-right:1px solid #0af;}
.blog-content p{padding:0!important;border:0!important;margin-bottom:20px;border:none!important;}
.blog-content span.float-right{ float:right;margin:0 0 10px 20px;}
p.datekeys{font-size:10px!important;line-height:10px!important;font-style:italic;text-align:right!important;}

.blog-content h6{font-size:16px!important;color:#eee;border:none!important;padding:0!important;margin:30px 0 10px 0;}
.blog-content code{font-size:16px!important}


div.para h5{margin:0!important;padding:0!important;}