/* layoutstyles.css */ 

/* Universal style rule */ 
*{ 
/* Block all browser default margins and padding */ 
  margin: 0; 
  padding: 0; 
/* Temporary borders */ 
 
}
body {
    background: url(../images/bg_cks.gif) center repeat;
    background-attachment: fixed;
    font-family: fantasy monospace monospace;
    
}
  

#wrapper{
  width: 50.3em; 
  background: url(../images/bg_cks.gif) center repeat; 
/* Center the wrapper */ 
    /* Put 20px margin above the wrapper */
  /* Set right and left to auto for centering */
  margin: 20px auto;
}
   /* remove mysterious space between content and header image */
#branding img {
    display: block;
}
#content{
       /* Left margin must match leftcolumn width */
    margin-left:12em;
    background-color: #fff;
    color: #000;
    padding: 10px 10px;
}
       /*Applies to all h1 attributes in the content division */
#content h1 {
    font-family: charcoal, impact, sans-serif;
    color: #806659;
    font-weight: normal;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing:  0.08em;
}
      /*Applies to unordered list in the content divison */
#content ul {
    padding: 0 0 0 2.5em;
}
      /* Applies to line height in dontent division */
#content p {
    line-height:  1.5em;
}
      /* Styles h1, h2, and h3 in the content division */
#content h1, #content h2, #content h3{
    font-family:  charcoal, impact, sans-serif;
    color:  #806659;
    font-weight: normal;
    font-style: italic;
    font-variant:  small-caps;
    letter-spacing: 0.08em;
}
     /* Style for h1 heading in the content division */
#content h1 {
    font-family: fantasy;
    font-size:  2em;
}
     /* Style for h2 heading in content division */
#content h2 {
    font-size:  1.5em;
}
     /* Style for h3 heading in content division */
#content h3 {
    font-size:  1.25em;
 }
 #topbar h3 {
    background:#aaa url(../images/bg_cks.gif) repeat-x center;
    font-family: fantasy,;
    text-align: center;
    font-style: italic;
    color: #00f;
 }
     /* applies to all list in the content division */
#content ol, #content ul{
    padding:  .625em 0 .625em 2.5em;
}
table.ex1 {
    table-layout: auto;
}
table.nav{
    table-layout: fixed;
    
}
#leftcolumn{
/* Remember, content left margin must match this width */
 margin-top: 0;
 width:12em;
 float:left;
 background: url(../images/bg_ckssb.gif) repeat-x center;
}
/* Remove bullets from ul in the navbar */ 
#leftcolumn ul{ 
  list-style-type:none; 
} 

/* List items in the navbar */ 
#leftcolumn li{ 
  float:left; 
  /* Required for drop-down menus */ 
  position:relative;
  border: 0.08em double black; 
} 
/* Applies to navbar links, unvisited and visited */ 
#leftcolumn a, 
#leftcolumn a:link, 
#leftcolumn a:visited{ 
  text-decoration:none; 
  font-family:Verdana, Geneva, Arial, Sans-Serif; 
  font-size:80%; 
  color:#000; 
  background: url(../images/bg_ckssb.gif) repeat-x center; 
  display:block; 
  height:1.5em; 
  width:14.6em; 
  border-right: solid 1px #ddd; 
  line-height:1.2em; 
  text-align:center; 
  outline-style:none;
  padding-top: 0.5em;
} 
/* Navbar hover, active, and current page links */ 
#leftcolumn a:hover, 
#leftcolumn a:active, 
#leftcolumn li.selected a:link, 
#leftcolumn li.selected a:visited{ 
  background: url(../images/bg_trrr.gif) repeat-x center; 
  color:#000; 
} 
#caption {
	font-family: fantasy;
	color: #000;
	width: auto;
	background: #fff  url(../images/bg_trrr.gif) repeat-x center;
	text-align: center;
}
/********** Footer division styles **********/ 
#footer{ 
  background: url(../images/bg_ckssb.gif) center repeat; 
  border: solid 0.02em #000;
  text-align: center; 
  display: inline-block;
  width: 100%; 
} 

#footer a:link, 
#footer a:visited{ 
  /* No underline on links */ 
  text-decoration:none; 
  padding: 0.2em;
  border:  0.5em;
  display: inline-block;

} 

#footer a:hover, 
#footer a:active{ 
  color:#3d97d1; 
  padding: 0.2em;
} 
#footer p {
    font-family: sans-serif, cursive, serif;
    font-size: 0.6em;
    font-variant: small-caps;
    font-style: italic;
}
span {
    font-family: fantasy;
    font-size: 1em;
    font-style: italic;
    color: #72b4db;
}
/*************** General styles ************/
html{
	scrollbar-face-color: #2f96d2; 
	scrollbar-shadow-color: #72b4db; 
	scrollbar-highlight-color: #2f96d2; 
	scrollbar-3dlight-color: #72b4db; 
	scrollbar-darkshadow-color: #cc9172; 
	scrollbar-track-color:#72b4db;  
	scrollbar-arrow-color: #e8b59a; 
}
input, select, textarea {
	font-weight: bold;
	color: #008000;
	background: #ecc7aa;
	border: ridge 1px; 
	border-color:#ecc7aa;
}
.hotkey{ 
  text-decoration:underline; 
} 

/* Acronyms and abbreviations */ 
  acronym,abbr{ 
  border-bottom:dotted 1px #333; 
  cursor:help; 
} 

/*********** Printer-Friendly Styles **********/ 
@media print{ 
/* Start printer-friendly styles */ 

/* Make wrapper the full page width */ 
#wrapper{ 
  width:100%; 
} 

/* Hide leftcolumn, navbar,and footer */ 
#leftcolumn, 
#footer{ 
  display:none; 
} 

/* Get rid of content div margins and 
padding. Use a different font for print */ 
#content{ 
  margin:0; 
  padding:0; 
  font-family:'Century Schoolbook', Times, Serif; 
  font-size:1em; 
} 
/*End printer-friendly styles */ 
}
.gallerycontainer{
width: 10em;
position: relative;
padding: 1em 0 2em 0em;
float: left;
}
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid #0b7e9d;
margin: 2px;

}

.thumbnail:hover{
background-color:  transparent; 
}

.thumbnail:hover img{
border: 1px #0b7e9d;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
text-align: left;
width: 18em;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 10em; /*position where enlarged image should offset horizontally */
z-index: 50;
}