body { width: 100%;
       margin: 0;
       padding: 0;
       font-family: helvetica, verdana, arial,  sans-serif;
       font-size: 76%;/* font sizing in ems, baby. if you want to change anything, just change this.*/
       background-image: url(images/bg.jpg);
       background-repeat: repeat-x;}
   
ul,ol,li,pre,form,html,p,blockquote,fieldset,input { margin: 0; padding:0; color: #2a2a2a;}
 
h1,h2,h3 { font-weight: normal;
           font-size: 2.0em;
           color: #fff;
           margin: 0;
           padding-top: 15px;}

h4 { font-weight: bold;
     font-size: 1.2em;
     margin-bottom: 0.4em ;
     clear: left;
     color: #6a6a6a;}

ol,ul,li { list-style: none;
           font-size: 1em;
           line-height: 1.8em;
           margin-top: 0.2em;
           margin-bottom: 0.1em;}
   
p,ins { font-size: 1.0em;
        line-height: 1.9em;
        margin: 0em 0em 0em 0em; }
       
li > p { margin-top: 0.2em;}  
   
pre { font-family: monospace;
      font-size: 1.0em;}

img { border: none;}


/*- - - - - ( ie wee ) - - - - - - - - - - - - - - - */

#content,#navigation {display: inline;}


 /*- - - - - ( page header ) - - - - - - - - - - - - - - - */


#container { width: 870px;
             margin: 0 auto 0 auto;
             padding: 0 0 0 0;}

#control-the-nav { width: 870px; 
                   height: 50px;}

#navigation ul { margin-right: -5px;}
 
#navigation li { padding: 7px 7px 0  0;
                 font-size: 1.2em;
                 list-style: none;
                 float: right;
                 color: #fff;}

#navigation a { line-height: 2em;}  

#navigation a:link { color: #fff;    
                     text-decoration: none;}

#navigation a:hover { color: #86CAE9;
                      border-bottom: 4px solid;
                      padding-bottom: 2px;}

#navigation a:active { color: #86CAE9;
                       text-decoration: underline;
                       padding-bottom: 2px;}
                                     
#navigation a:visited { color: #fff;
                        text-decoration: none;}
                       
#navigation p {margin: 0;} 
 
#logo { height: 184px;}     

.logo { padding-top: 35px;}

.logo-right { margin-top: 52px;}   
  
*html .logo-right { margin-right: 6px;}


/*- - - - - ( content ) - - - - - - - - - - - - - - - */     

#content {  height: 100%;
            width: 870px;
            margin: 8px auto 0 auto;
            padding: 0 0 0 0;}
                                          
#content p, i { width: 330px;
                margin: 4px 0 30px 0;
                font-size: 1.1em;
                line-height: 1.4em;}

#content p a { font-weight: bold;}

#content p a:link { color: #4a4a4a;
                  text-decoration: none;}

#content p a:hover { color: #2a2a2a;
                   border-bottom: 2px solid;
                   padding-bottom: 2px;}

#content p a:active { color: #4a4a4a;
                    text-decoration: none;}

#content p a:visited { color: #4a4a4a;
                     text-decoration: none;}

ul.services { width: 300px;
              margin: 15px 0 -10px 0;}

*html ul.services { margin-left: 5px;}
                                      
.services li { margin-left: 20px;
               list-style-image: url(images/list-circle.gif);}

*html .services li { margin-left: 20px;}
                                   
.portfolio-index { width: 530px;
                   height: 568px;
                   float: right;
                   list-style: none;
                   padding: 0;
                   margin: 0 -6px 12px 0;}
                                                
*html .portfolio-index { width: 536px;}
                              
.portfolio-index h2 { margin-right: 6px;} 
                                                                                    
.portfolio-index img { margin: 0 0 4px 13px;}   

#content iframe { margin-top: 8px;}


/*- - - - - ( portfolio ) - - - - - - - - - - - - - - - */  
                                                    
#portfolio-left { width: 410px;
                  height: 100%;
                  padding: 0 0 50px 0;
                  margin: 0 0 0 0;}
                           
#portfolio-right { width: 410px;
                   height: 100%;
                   float: right;
                   padding: 0 0 50px 0;
                   margin: 0 0 0 0;}
                            
.folio { width:410px;
         height: 100%;
         list-style: none;
         padding: 0 0 10px 0;
         margin: 0 -6px 0px 0;}
             
*html .folio { width: 416px;
               height: 148px;}
                                                                               
.folio li { font-size: 1.0em;
            line-height: 1.4em;}
              
.folio li a:link { color: #377697;
                   text-decoration: none;}
                        
.folio li a:visited { color: #1a1a1a;
                      text-decoration: none;}
                             
.folio li a:hover { border-bottom: 3px solid;
                    padding-bottom: 1px;}

/*- - - - - ( the little things ) - - - - - - - - - - - - - - - */     

.left { float: left;}

.right { float: right;}

.clr-lft { clear:left;}

.clr-rght { clear:right;}

.clr-both { clear: both;}

li.right-hr { margin: 22px 0 10px 5px;}

li.contact-hr { margin: 46px 0 10px 5px;}

img.left-hr { margin: -5px 0 10px 0;} 

.top-twelve { margin-top: 16px;} 

.top-fifteen { margin-top: 15px;}

.ten { margin-left: 10px;}

.twenty { padding-left: 18px;} 

.thirty { margin-bottom: 30px;}

.iePOS a:hover { border:none;
                 padding: 0 0 0 0;}
                            
*html .iePOS { margin: 0px;}

*html .top-five { margin-top: -5px;}

*html li.contact-hr { margin: 48px 0 10px 5px; }


/*- - - - - ( footer ) - - - - - - - - - - - - - - - */

#footer { width: 100%;
          height : 200px;
          background-image: url(images/footer.jpg);
          background-repeat: repeat-x;
          clear: both;}
                
#inside-footer { width:870px;
                 margin: 0 auto 0 auto;
                 padding: 0 0 0 0;}
        
#inside-footer li { margin: 30px 7px 50px  0;
                    font-size: 1.2em;
                    list-style: none;
                    float: left;
                    color: #86CAE9;}
                             
#inside-footer a:link { color: #86CAE9;
                        text-decoration: none;}

#inside-footer a:hover { color: #fff;
                         border-bottom: 4px solid;
                         padding-bottom: 2px;}

#inside-footer a:active { color: #86CAE9;
                          text-decoration: none;}

#inside-footer a:visited { color: #86CAE9;
                           text-decoration: none;}
                                        
#inside-footer p { font-size: 0.9em;
                   line-height: 1.6em;
                   color: #6a6a6a;
                   margin:0;}

#headings { width: 870px;
            height: 52px;}

#headings p { font-weight: normal;
              font-size: 2.0em;
              color: #fff;
              margin: 0;
              padding: 0;
              display: inline;}

#lines { padding: 0px 0 18px 0;}