/* Joh Ming Design 
 last updated 3-30-08 
 by Thalia Kemp

 */
 
 html, body {
  margin: 0; padding: 0;
  overflow: auto;
  }

 body {
  width: 90%; max-width: 90%;
  background-color: #333;
  font: 400 0.8em arial, sans-serif;
  color:#ccc;
  line-height: 1.4em;
  }

 a {
  text-decoration: none;
  color:#00adef;
  outline-style:none;}

 a:hover {
  text-decoration: underline;
  /*color:#999;*/
  color: #0099FF;
  }

 #left {
  position: absolute; top: 0; left: 0; 
  overflow: hidden; 
  height: 100%; width: 32%;
  text-align: right;
  background: #333 url('../../images/bg/fade.jpg') no-repeat right;
  }


 #outer {
  position: absolute; left: 9px;
  top: 200px;
  width:100%;
  height: 240px;
  margin-top: -120px;
  }

  img #outer {
  border: none;
  }

 body > #left {
  position:fixed;
  }
        
     
    


#myvar {
margin-top:0px;
border:none;
background:url(subsection.jpg) repeat-x;
padding:0px 30px 0px 30px;
list-style-type:none;
}

#myvar1 {
margin-top:0px;
border:0px solid #ccc;
background:url(subsection.jpg) repeat-x;
padding:10px;

}



       #myvar2 {
              margin-top:0px;
             border:0px solid #ccc;
padding:10px;
}


       #myvar3 {
              margin-top:0px;
             border:0px solid #ccc;

padding:10px;
}



       #myvar4 {
              margin-top:0px;
             border:0px solid #ccc;

padding:10px;
}

       #myvar5 {
              margin-top:0px;
             border:0px solid #ccc;

padding:10px;
}


       #myvar6 {
              margin-top:0px;
             border:0px solid #ccc;

padding:10px;
}



       #myvar7 {
              margin-top:0px;
             border:0px solid #ccc;

padding:10px;
}





 #main {
  height: 100%;
  margin: 70px 0 20px 36%;
  padding-top: 0px !important;
  padding-top: 20px;
  overflow: hidden;
  }
 .runaround {
    float: left;
    clear: left;
  }
  
 h1 {
  display: inline;
  margin-right: 30px;
  font: 800 35px 'trebuchet ms', arial, sans-serif;
  text-align: right;
  }

 span.title {
  display: block;
  margin: 0 0 5px 0;
  font: 600 1.1em 'trebuchet ms', arial, sans-serif;
 
 
  }

 img.johming {
  margin-bottom: -6px;
  margin-right: 8px;
                border:none;
  }



  span.equals {
  color:#FF9900;
  width: 1.0em;
  font: 50 1.3em arial, sans-serif;
  padding-right: 5px;
  
  }

  span.legend {
  
  width: 1.0em;
  font: 50 1.3em arial, sans-serif;
  padding-right: 5px;
  
  }

  
 span.ltgrey {
  color:#CCCCCC;
  }

 span.grey {
  color: #666666;
  }

 a.nav {
  display: block;
  margin: 0;
  text-decoration: none;
  font: 400 20px 'trebuchet ms', arial, sans-serif;
  color: #aaa;
  padding: 0 30px 3px 0;

  }

 a.nav:hover {
  color:#0099FF;
  background: #222;
  text-decoration: none;
  border-left:3px solid #0099FF;
  /*border-right:3px solid #0099FF;*/
 
  }

 .status {
                display: block;
  padding: 0px 20px 3px 0px;
  text-decoration: none;
  background: #222;
  border-left:3px solid #0099FF;
   
  }
 




 .copyw a, .copyw a:hover {
  color:#555;
  }

 .date {
  float: left; 
  width: 2.0em;
  font: 600 1.3em arial, sans-serif;
  padding-right: 5px;
  text-align: right;
  }

 div.main {
  margin-left: 2.9em;
  margin-bottom: 25px;
  /*border-left: solid 1px #3a3a3a;*/
  border-left: none;
   /*padding: 0 50px 30px 5px;*/
 padding: 0 0px 30px 5px;
  /*background: #333 url('../../images/bg/corner.jpg') no-repeat bottom right;*/
  background: #333 url('j_bg.png') no-repeat bottom right;
  }

 img.main {
  float: right;
  margin: 10px;
  padding: 4px;
  background: #0c0;
  border: solid 3px #2e2e2e;
  }

 a img.main:hover {
  background: #cf0;
  }

 div.subsection {
  margin: 8px 0 12px 10px; color: #fff;
  background: #2a2a2a url('../../images/bg/subsection.jpg') repeat-x top;
  border-bottom: solid 1px #2e2e2e; 
   border-right: solid 1px #2e2e2e; 
   border-left: solid 2px #FF9900;
  padding: 8px;
  line-height: 1.7em;
  }
  
  div.ia_subsection {
  margin: 8px 0 12px 10px; color: #fff;
  /*background: #2a2a2a url('../../images/bg/subsection.jpg') repeat-x top;*/
  border-bottom: solid 1px #2e2e2e; 
   border-right: solid 1px #2e2e2e; 
   border-left: solid 2px #FF9900;
  padding: 8px;
  line-height: 1.7em;
  }

 p.comment {
  font-size: 0.9em;
  font-family:'trebuchet ms', arial, sans-serif;
  }

 span.copy {
  display: block;
  text-align: center;
  color: #555;
  margin: 15px 0 20px 0;
  font: 400 0.9em 'trebuchet ms', arial, sans-serif;
  }

 .width50 {
  width: 48%;
}
/**************************************************************
   Thumbnail Lists
 **************************************************************/

.thumbs,
.thumbs li {
  margin: 0;
  padding: 0;
}

.thumbs li {
  margin: 0 0 15px 0 !important;
  margin: 0;
  padding: 0px;
  list-style: none;
}

a.thumb img {
  
  border: 5px solid #ccc;


}

a:hover.thumb img {
  background: #8EB4C6;
  border: 5px solid #000;
}

a:hover.thumb {
  background: none;
}

a.thumb span {
  display: block;
  margin-top: -5px !important;
  margin-top: -2px;
}


.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}
.dark {
  color: #353E47;
}
/*LIGHTBOX STYLES*/
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}   

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/*END LIGHTBOX STYLES*/

/*contact and sign up form*/


.contact {margin: 0;
 padding: 0;
 border: 0;}
 
#reason {width:300px;}



.contact {
 width:400px;
 margin: 0px;
}

.contact fieldset {border: 0;
 width: 80%;
 overflow: hidden;
 padding: 15px;
 margin: 0;
 position: relative;
 top: 0;
 left: 0;
}


.contact label {
 display: block;
 /*float: left;*/
 white-space: nowrap;
 font-weight: bold;
 width: 115px; 
 line-height: 22px;
}

.contact input {
 /*float: right;*/
 width: 300px;
 height:15px;
}

form input[type="submit"] {
background: url(send_btn.png) 100% 0%;
background-repeat: no-repeat;
width:300px;
height:95px;
border: none;
overflow: visible;
text-indent: -999px;
font-size: 0px;
display:block;	
line-height: 0px;
}



/*input.submit{
width:300px;
height:95px;
border: none;
background: url('send_btn.png')right center no-repeat;
overflow: visible;
text-indent: -999px;
font-size: 0px;
display:block;	
line-height: 0px;
}*/



/*
.submit:hover
 {
     background: url(johming_send.png) 0 -60px no-repeat;
 }*/


/*fieldset {
border: none;   
border:solid 0 transparent;

}*/



legend{
 display:none;
}


/*input {
 width:150px;
}*/


#spamchallenge{
 bottom: 0px;
 width:60px;
}


input#spamchallenge{
 bottom: 0px;
 height:20px;
 margin-left:15px;
}





label {
 display:block;
 width:100%;
 margin-top:20px;
 font-size:13px;
 line-height:24px;
    text-align:left;
}

textarea {
 width:300px;
 display:block;}

select{
 width:100px;}

/*form input.button{   
cursor: pointer;
background:url(images/tiny_leaf.png) 40% 50% no-repeat;
border:none;
padding:5px 10px 10px 10px;
font-size: 16px; 
  
 padding:20px 35px 50px 30px;
 color:#FFFFFF; 
 border:none;
 height:30px;
 line-height:40px;
 font-size:12px;
 margin-right:10px;
 display:inline-block;
 text-decoration:none;

}*/


/*form input.button:hover {

     background-color: #e0e0ff ;

     
} */


div.success, div.error{
 color: #FF6600;
font-size:12px; 

}

.clear{
 clear:both;
}


/**/

 #borderbox
    {
      /*position:      absolute;
      top:           100px;
      left:          200px;*/
      width:         480px;
      height:        380px;
      z-index:       1;
      border-style:  none solid solid solid;
      border-width:  0px 1px 2px 1px;
      border-color:  #333333;
      font-size:     10px;
    }
    #container
    {
  
      z-index:       0;
    }
    
    
    

/*---------------------------------------------------------------------- */

 ul#projects_listing { list-style:none; margin-right:-15px; width:660px; padding:30px 0 0 0; font-size:10px; }
        ul#projects_listing li { width:200px; margin:0 10px 15px 0; overflow:hidden; float:left; }
        ul#projects_listing li img { border:3px solid #666; padding:0; }
        ul#projects_listing li a { text-decoration:none; display:block; color:#666; }
        ul#projects_listing li a:hover,
        ul#projects_listing li a:focus { text-decoration:underline; color: #00adef; }
    
        .projects2 h2 { height:33px; padding:0; background:url(../images/site/projects_main_h2.gif) no-repeat left top; text-indent:-9999px; }
        
        
        
 ul#projects_listing a:link,
 ul#projects_listing a:visited {  }
 ul#projects_listing a:hover,
 ul#projects_listing a:focus { color:#831026; }

 ul#projects_listing h2 a:link,
 ul#projects_listing h2 a:visited { text-decoration:none; color:#831026; }
 ul#projects_listing h2 a:hover,
 ul#projects_listing h2 a:focus { color:#000; }

 ul#projects_listing h3 a { text-decoration:none; }



/* 
---------------------------------------------------------------------- */

 ul#projects_listing li a:hover img{ border:3px solid #999;opacity:0.4; -webkit-transition:opacity 0.15s linear; }

 ul#projects_listing img.fl { float:left; margin:0 20px 10px 0; }
 ul#projects_listing img.fr { float:right; margin:0 0 10px 10px; }